*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#1f2937}
a{text-decoration:none;color:inherit}
.header{background:#1d4ed8;color:white;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.header h1{margin:0;font-size:22px}
.layout{display:flex;min-height:calc(100vh - 66px)}
.sidebar{width:250px;background:#111827;color:white;padding:18px}
.sidebar a{display:block;padding:12px;border-radius:10px;margin-bottom:6px;color:#d1d5db}
.sidebar a.active,.sidebar a:hover{background:#2563eb;color:white}
.content{flex:1;padding:22px;max-width:1400px}
.card{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media(max-width:900px){.layout{display:block}.sidebar{width:100%}.col-3,.col-4,.col-6,.col-8{grid-column:span 12}}
h2{margin:0 0 14px;font-size:20px}
label{font-weight:bold;display:block;margin:10px 0 5px}
input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:10px;font-size:14px}
textarea{min-height:90px}
button,.btn{display:inline-block;background:#2563eb;color:white;border:0;border-radius:10px;padding:10px 13px;font-weight:bold;cursor:pointer;margin-top:10px}
.btn-danger{background:#dc2626}.btn-success{background:#16a34a}.btn-dark{background:#374151}.btn-warning{background:#f59e0b;color:#111827}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:10px;text-align:left;vertical-align:top}
.table th{background:#f9fafb}
.badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:bold}
.badge-ok{background:#dcfce7;color:#166534}.badge-bad{background:#fee2e2;color:#991b1b}.badge-warn{background:#fef3c7;color:#92400e}.badge-info{background:#dbeafe;color:#1e40af}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.row>*{flex:1}
.alert{padding:12px;border-radius:10px;margin-bottom:12px}.alert-ok{background:#dcfce7;color:#166534}.alert-error{background:#fee2e2;color:#991b1b}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:15px}.stat b{font-size:24px;display:block;margin-top:5px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{background:#fff;border:1px solid #e5e7eb;border-radius:12px;min-height:105px;padding:8px}
.day-num{font-weight:bold;color:#374151}
.event{font-size:12px;padding:4px 6px;border-radius:7px;margin-top:5px;background:#dbeafe;color:#1e3a8a}
.event.vacaciones{background:#dcfce7;color:#166534}.event.permiso{background:#fef3c7;color:#92400e}.event.baja{background:#fee2e2;color:#991b1b}
.small{font-size:12px;color:#6b7280}.right{text-align:right}
.login-box{max-width:420px;margin:80px auto}


/* V16 - Mi fichaje PRO */
.pro-hero{
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  color:white;
  border-radius:22px;
  padding:24px;
  box-shadow:0 16px 35px rgba(15,23,42,.25);
  margin-bottom:18px;
}
.pro-hero h2{font-size:28px;margin:0 0 6px}
.pro-hero .sub{opacity:.85}
.pro-clock{
  font-size:38px;
  font-weight:800;
  margin-top:16px;
  letter-spacing:1px;
}
.pro-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  font-weight:bold;
  margin-top:14px;
}
.pro-status.in{background:#dcfce7;color:#166534}
.pro-status.out{background:#fee2e2;color:#991b1b}
.pro-status.pause{background:#fef3c7;color:#92400e}
.pro-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
}
.pro-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.pro-action{
  min-height:95px;
  border-radius:18px;
  font-size:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
}
.pro-action span{font-size:28px}
.pro-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.pro-summary .box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
}
.pro-summary .box span{color:#6b7280;font-size:13px}
.pro-summary .box b{display:block;font-size:24px;margin-top:6px}
.timeline{
  position:relative;
  margin-top:10px;
}
.timeline-item{
  display:flex;
  gap:12px;
  border-bottom:1px solid #e5e7eb;
  padding:12px 0;
}
.timeline-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#dbeafe;
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  flex:0 0 34px;
}
.timeline-body b{display:block}
.timeline-body span{color:#6b7280;font-size:13px}
@media(max-width:900px){
  .pro-actions{grid-template-columns:repeat(2,1fr)}
  .pro-summary{grid-template-columns:repeat(2,1fr)}
  .pro-clock{font-size:30px}
}


/* V17 - Botones de fichaje según estado */
button:disabled,
.pro-action:disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:grayscale(1);
  box-shadow:none;
}
.pro-action:disabled:hover{
  transform:none;
}


/* V18 - Actividad de hoy en una sola línea */
.attendance-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:14px;
  line-height:1.6;
}
.attendance-line b{
  color:#111827;
}
.attendance-line span{
  color:#6b7280;
}
@media(max-width:700px){
  .attendance-line{
    display:block;
  }
  .attendance-line span{
    margin:0 4px;
  }
}


/* V21 - Indicadores del panel clicables */
.stat-link{
  display:block;
  color:inherit;
}
.stat-link:hover .stat{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  border-color:#bfdbfe;
}
.stat{
  transition:.18s ease;
}
.stat .go{
  display:block;
  margin-top:8px;
  color:#2563eb;
  font-size:13px;
  font-weight:bold;
}


/* V22 - Documentación PRO */
.doc-employee-block{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  margin-bottom:18px;
  background:#fbfdff;
}
.doc-employee-block h3{
  margin:0 0 12px;
}
.doc-category-block{
  border-left:4px solid #2563eb;
  padding-left:12px;
  margin:14px 0;
}
.doc-category-block h4,
.doc-category-block h3{
  margin:0 0 10px;
}


/* V23 - Responsive tablet/móvil */
.header-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.mobile-menu-btn{
  display:none;
  width:auto;
  margin:0;
  padding:9px 12px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:10px;
  font-size:20px;
}
.header-user{
  white-space:nowrap;
}
.content{
  overflow-x:hidden;
}
.table-wrap{
  width:100%;
  overflow-x:auto;
}
input,select,textarea,button,.btn{
  min-height:44px;
}
.pro-action{
  touch-action:manipulation;
}
@media(max-width:900px){
  body{
    background:#f8fafc;
  }
  .header{
    position:sticky;
    top:0;
    z-index:50;
    padding:12px 14px;
  }
  .header h1{
    font-size:17px;
  }
  .header-user{
    font-size:13px;
  }
  .mobile-menu-btn{
    display:inline-block;
  }
  .layout{
    display:block;
  }
  .sidebar{
    position:fixed;
    top:58px;
    left:-280px;
    width:270px;
    height:calc(100vh - 58px);
    z-index:60;
    transition:left .2s ease;
    overflow-y:auto;
    box-shadow:12px 0 30px rgba(0,0,0,.18);
  }
  .sidebar.open{
    left:0;
  }
  .sidebar a{
    font-size:16px;
    padding:14px;
  }
  .content{
    padding:14px;
  }
  .card{
    border-radius:14px;
    padding:14px;
    margin-bottom:14px;
  }
  .grid{
    gap:12px;
  }
  .stats{
    grid-template-columns:repeat(2,1fr);
  }
  .stat{
    padding:13px;
  }
  .stat b{
    font-size:22px;
  }
  .row{
    display:block;
  }
  .row > *{
    width:100%;
    margin-bottom:10px;
  }
  .btn,button{
    width:100%;
    text-align:center;
    margin-top:8px;
  }
  .table{
    font-size:13px;
    min-width:680px;
  }
  .calendar{
    grid-template-columns:repeat(1,1fr);
  }
  .day{
    min-height:auto;
  }
  .pro-hero{
    border-radius:18px;
    padding:20px;
  }
  .pro-hero h2{
    font-size:24px;
  }
  .pro-clock{
    font-size:34px;
  }
  .pro-actions{
    grid-template-columns:repeat(2,1fr);
  }
  .pro-action{
    min-height:110px;
    font-size:17px;
  }
  .pro-summary{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:520px){
  .header{
    align-items:flex-start;
    gap:6px;
  }
  .header-user{
    font-size:12px;
  }
  .stats{
    grid-template-columns:1fr;
  }
  .pro-actions{
    grid-template-columns:1fr;
  }
  .pro-action{
    min-height:86px;
  }
  .pro-summary{
    grid-template-columns:1fr;
  }
  .attendance-line{
    display:block;
    font-size:14px;
  }
  .timeline-item{
    gap:9px;
  }
  .timeline-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
  }
}


/* V25 - Login limpio CONTROL HORARIO */
.login-clean-body{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f4f6f8,#e5e7eb);
  padding:20px;
}
.login-clean-card{
  width:100%;
  max-width:420px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
  padding:34px;
}
.login-clean-card h1{
  margin:0;
  text-align:center;
  color:#1f2937;
  font-size:28px;
  letter-spacing:1px;
}
.login-subtitle{
  text-align:center;
  color:#6b7280;
  margin:8px 0 24px;
}
.login-clean-card label{
  margin-top:14px;
}
.login-clean-card input{
  min-height:48px;
  font-size:16px;
}
.login-clean-btn{
  width:100%;
  margin-top:20px;
  min-height:52px;
  background:#2563eb;
  border-radius:12px;
  font-size:16px;
}
.login-secure-text{
  text-align:center;
  margin-top:22px;
  color:#6b7280;
  font-size:13px;
}
@media(max-width:600px){
  .login-clean-card{
    padding:26px 20px;
    border-radius:18px;
  }
  .login-clean-card h1{
    font-size:24px;
  }
}


/* V26 - Login PRO */
.login-pro-body{
  min-height:100vh;
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#0f172a;
  color:#111827;
  overflow:hidden;
}
.login-pro-background{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,235,.55), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(14,165,233,.35), transparent 30%),
    radial-gradient(circle at 70% 90%, rgba(16,185,129,.25), transparent 32%),
    linear-gradient(135deg,#020617,#0f172a 52%,#111827);
}
.login-pro-background:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
}
.login-pro-shape{
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
  opacity:.55;
}
.shape-one{
  width:280px;
  height:280px;
  left:6%;
  bottom:8%;
  background:#2563eb;
}
.shape-two{
  width:210px;
  height:210px;
  right:8%;
  top:12%;
  background:#06b6d4;
}
.shape-three{
  width:170px;
  height:170px;
  right:25%;
  bottom:18%;
  background:#10b981;
}
.login-pro-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  max-width:1120px;
  margin:0 auto;
  padding:34px;
}
.login-pro-panel{
  color:#fff;
  padding:34px;
}
.login-pro-brand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:42px;
}
.login-pro-icon{
  width:72px;
  height:72px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}
.login-pro-brand h1{
  margin:0;
  font-size:36px;
  letter-spacing:1px;
}
.login-pro-brand p{
  margin:7px 0 0;
  color:#cbd5e1;
  font-size:15px;
}
.login-pro-info{
  max-width:520px;
}
.login-pro-info h2{
  color:#fff;
  font-size:42px;
  line-height:1.05;
  margin:0 0 18px;
}
.login-pro-info p{
  color:#cbd5e1;
  font-size:18px;
  line-height:1.6;
  margin:0;
}
.login-pro-features{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.login-pro-features span{
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#e5e7eb;
  font-size:14px;
}
.login-pro-card{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:28px;
  padding:38px;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
}
.login-pro-card-header{
  margin-bottom:26px;
}
.login-pro-card-header h2{
  margin:0;
  font-size:28px;
  color:#111827;
}
.login-pro-card-header p{
  margin:8px 0 0;
  color:#6b7280;
}
.login-pro-form label{
  display:block;
  margin:16px 0 7px;
  color:#374151;
  font-weight:bold;
}
.login-pro-field{
  display:flex;
  align-items:center;
  gap:12px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:15px;
  padding:0 14px;
  transition:.18s ease;
}
.login-pro-field:focus-within{
  background:#fff;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.login-pro-field span{
  font-size:20px;
  width:26px;
  text-align:center;
}
.login-pro-field input{
  border:0;
  background:transparent;
  min-height:54px;
  padding:0;
  font-size:16px;
}
.login-pro-field input:focus{
  outline:none;
  box-shadow:none;
}
.login-pro-btn{
  width:100%;
  min-height:56px;
  margin-top:24px;
  border-radius:15px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:white;
  font-size:16px;
  letter-spacing:.7px;
  box-shadow:0 16px 34px rgba(37,99,235,.32);
}
.login-pro-btn:hover{
  background:linear-gradient(135deg,#1d4ed8,#1e40af);
}
.login-pro-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:24px;
  color:#6b7280;
  font-size:13px;
}
@media(max-width:920px){
  .login-pro-body{
    overflow:auto;
  }
  .login-pro-shell{
    grid-template-columns:1fr;
    padding:22px;
    gap:18px;
  }
  .login-pro-panel{
    padding:12px 4px;
    text-align:center;
  }
  .login-pro-brand{
    justify-content:center;
    margin-bottom:18px;
  }
  .login-pro-brand h1{
    font-size:28px;
  }
  .login-pro-info h2{
    font-size:28px;
  }
  .login-pro-info p{
    font-size:15px;
  }
  .login-pro-features{
    justify-content:center;
  }
  .login-pro-card{
    padding:28px 22px;
    border-radius:24px;
  }
}
@media(max-width:520px){
  .login-pro-shell{
    padding:16px;
  }
  .login-pro-brand{
    display:block;
  }
  .login-pro-icon{
    margin:0 auto 12px;
    width:64px;
    height:64px;
  }
  .login-pro-brand h1{
    font-size:24px;
  }
  .login-pro-info{
    display:none;
  }
  .login-pro-card-header h2{
    font-size:24px;
  }
  .login-pro-footer{
    display:block;
    text-align:center;
    line-height:1.8;
  }
}


/* V27 - Responsive total PC / Tablet / Móvil */

/* Base PRO refinements */
html{
  -webkit-text-size-adjust:100%;
}
body{
  min-width:320px;
}
.header{
  position:sticky;
  top:0;
  z-index:100;
}
.mobile-overlay{
  display:none;
}
.content{
  width:100%;
}
.card{
  overflow:hidden;
}
.table{
  width:100%;
}
.table td,.table th{
  word-break:break-word;
}
.btn,button,input,select,textarea{
  max-width:100%;
}
.btn{
  margin-top:10px;
}

/* Tablas responsive: se convierten en scroll horizontal */
.table-responsive,
.card:has(.table){
  overflow-x:auto;
}
.card > .table{
  min-width:760px;
}

/* Formularios PRO responsive */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.form-grid .full{
  grid-column:1/-1;
}

/* PC grande */
@media(min-width:1200px){
  .content{
    padding:28px;
  }
  .card{
    padding:22px;
  }
  .sidebar{
    width:270px;
  }
}

/* Tablet horizontal / portátil pequeño */
@media(max-width:1199px){
  .content{
    padding:18px;
  }
  .sidebar{
    width:235px;
  }
  .stats{
    grid-template-columns:repeat(2,1fr);
  }
  .col-3{grid-column:span 6}
  .col-4{grid-column:span 6}
  .col-6{grid-column:span 6}
  .col-8{grid-column:span 12}
}

/* Tablet vertical y móvil grande */
@media(max-width:980px){
  .header{
    padding:12px 16px;
  }
  .header-left h1,
  .header h1{
    font-size:18px;
  }
  .header-user{
    font-size:13px;
  }
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .layout{
    display:block;
  }
  .mobile-overlay.open{
    display:block;
    position:fixed;
    inset:0;
    top:58px;
    background:rgba(15,23,42,.45);
    z-index:80;
  }
  .sidebar{
    position:fixed;
    top:58px;
    left:-290px;
    width:285px;
    max-width:86vw;
    height:calc(100vh - 58px);
    z-index:90;
    transition:left .22s ease;
    overflow-y:auto;
    box-shadow:18px 0 45px rgba(0,0,0,.30);
  }
  .sidebar.open{
    left:0;
  }
  .sidebar a{
    font-size:16px;
    padding:15px 14px;
    margin-bottom:8px;
  }
  .content{
    padding:14px;
  }
  .grid{
    grid-template-columns:repeat(12,1fr);
    gap:12px;
  }
  .col-3,.col-4,.col-6,.col-8,.col-12{
    grid-column:span 12;
  }
  .card{
    border-radius:16px;
    padding:15px;
  }
  h2{
    font-size:19px;
  }
  .row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .row > *{
    width:100%;
  }
  .row button,
  .row .btn{
    width:100%;
  }
  input,select,textarea{
    min-height:46px;
    font-size:16px;
  }
  button,.btn{
    min-height:46px;
    font-size:15px;
  }
  .stats{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .stat{
    min-height:100px;
  }
  .calendar{
    grid-template-columns:repeat(2,1fr);
  }
  .day{
    min-height:95px;
  }
  .pro-actions{
    grid-template-columns:repeat(2,1fr);
  }
  .pro-summary{
    grid-template-columns:repeat(2,1fr);
  }
  .doc-employee-block{
    padding:12px;
  }
}

/* Móvil */
@media(max-width:620px){
  body{
    background:#f8fafc;
  }
  .header{
    align-items:center;
    gap:8px;
  }
  .header-left{
    min-width:0;
  }
  .header-left h1,
  .header h1{
    font-size:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .header-user{
    font-size:12px;
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .content{
    padding:10px;
  }
  .card{
    padding:13px;
    border-radius:14px;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
  }
  h2{
    font-size:18px;
  }
  .stats{
    grid-template-columns:1fr;
  }
  .stat{
    min-height:auto;
  }
  .stat b{
    font-size:24px;
  }
  .pro-hero{
    padding:18px;
    border-radius:18px;
  }
  .pro-hero h2{
    font-size:23px;
  }
  .pro-clock{
    font-size:32px;
  }
  .pro-actions{
    grid-template-columns:1fr;
  }
  .pro-action{
    min-height:82px;
    border-radius:16px;
  }
  .pro-summary{
    grid-template-columns:1fr;
  }
  .timeline-item{
    align-items:flex-start;
  }
  .attendance-line{
    display:block;
    line-height:1.8;
  }
  .calendar{
    grid-template-columns:1fr;
  }
  .day{
    min-height:auto;
  }
  .login-pro-shell{
    padding:14px;
  }
  .login-pro-panel{
    display:block;
  }
  .login-pro-info{
    display:none;
  }
  .login-pro-card{
    padding:24px 18px;
  }
  .login-pro-brand h1{
    font-size:22px;
  }
}

/* Móvil muy pequeño */
@media(max-width:390px){
  .header-user{
    display:none;
  }
  .content{
    padding:8px;
  }
  .card{
    padding:11px;
  }
  .btn,button{
    font-size:14px;
  }
}

/* Tarjetas visuales para listados en móvil cuando la tabla sea grande */
@media(max-width:620px){
  .table th,.table td{
    padding:8px;
  }
  .badge{
    white-space:nowrap;
  }
}


/* V28 - Calendario móvil real con 7 días */
.calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  gap:8px;
}
.calendar > .small{
  text-align:center;
  font-weight:bold;
  color:#374151;
  background:#f3f4f6;
  padding:8px 4px;
  border-radius:10px;
}
.day{
  min-height:105px;
}
@media(max-width:620px){
  .calendar{
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
    gap:4px;
  }
  .calendar > .small{
    font-size:12px;
    padding:6px 2px;
    border-radius:7px;
  }
  .day{
    min-height:72px;
    padding:5px 3px;
    border-radius:8px;
    font-size:11px;
  }
  .day-num{
    font-size:12px;
    margin-bottom:3px;
  }
  .event{
    font-size:9px;
    padding:2px 3px;
    border-radius:5px;
    line-height:1.2;
    word-break:break-word;
  }
}
@media(max-width:390px){
  .calendar{
    gap:3px;
  }
  .day{
    min-height:64px;
    padding:4px 2px;
  }
  .event{
    font-size:8px;
  }
}


/* V29 - Login móvil más centrado */
@media(max-width:920px){
  .login-pro-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:18px;
  }

  .login-pro-panel{
    width:100%;
    max-width:420px;
    text-align:center;
    padding:0;
    margin:0 0 14px;
  }

  .login-pro-brand{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:0;
  }

  .login-pro-icon{
    margin:0 auto;
  }

  .login-pro-brand h1{
    text-align:center;
    font-size:28px;
    line-height:1.15;
    letter-spacing:.8px;
  }

  .login-pro-brand p{
    text-align:center;
    font-size:14px;
  }

  .login-pro-card{
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .login-pro-card-header{
    text-align:center;
  }
}

@media(max-width:520px){
  .login-pro-shell{
    justify-content:center;
    padding:14px;
  }

  .login-pro-panel{
    margin-bottom:12px;
  }

  .login-pro-brand h1{
    font-size:25px;
    white-space:normal;
  }

  .login-pro-brand p{
    font-size:13px;
  }

  .login-pro-card{
    margin:0 auto;
  }

  .login-pro-card-header h2,
  .login-pro-card-header p{
    text-align:center;
  }
}


/* V30 - Formulario móvil Mis vacaciones / permisos */
.absence-form select,
.absence-form input[type="date"],
.absence-form textarea,
.absence-form button{
  width:100%;
}

@media(max-width:768px){
  .absence-form{
    width:100%;
  }

  .absence-form label{
    display:block;
    width:100%;
  }

  .absence-form select,
  .absence-form input[type="date"],
  .absence-form textarea,
  .absence-form input,
  .absence-form button{
    width:100% !important;
    max-width:100% !important;
    display:block;
    box-sizing:border-box;
  }

  .absence-form textarea{
    min-height:120px;
  }

  .absence-form button{
    margin-top:14px;
  }
}


/* V31 - Corrección real formulario vacaciones/permisos */
.absence-card{
  min-width:0;
}

.absence-form-pro{
  width:100%;
  display:block;
}

.absence-form-pro .form-field-full{
  width:100%;
  display:block;
  margin-bottom:12px;
}

.absence-form-pro label{
  width:100%;
  display:block;
  margin:10px 0 6px;
}

.absence-form-pro select,
.absence-form-pro input[type="date"],
.absence-form-pro input[type="text"],
.absence-form-pro textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:block !important;
  box-sizing:border-box !important;
}

.absence-form-pro textarea{
  min-height:120px;
  resize:vertical;
}

.absence-form-pro .btn-full,
.absence-form-pro button{
  width:100% !important;
  display:block !important;
  margin-top:14px;
}

@media(max-width:980px){
  .absence-card{
    grid-column:span 12 !important;
  }

  .absence-form-pro select,
  .absence-form-pro input[type="date"],
  .absence-form-pro textarea{
    height:auto;
    min-height:48px;
    font-size:16px;
  }
}


/* V32 - Calendario de vacaciones para empleados */
.calendar-team .day{
  background:#fff;
  position:relative;
}
.calendar-team .today-day{
  border:2px solid #2563eb;
  background:#eff6ff;
}
.calendar-team .empty-day{
  background:transparent;
  border:0;
}
.calendar-team .event{
  display:block;
  margin-top:4px;
}
.calendar-team .event-name{
  display:block;
  font-weight:bold;
}
.calendar-team .event-type{
  display:block;
  opacity:.85;
}
@media(max-width:620px){
  .calendar-filter-form .row{
    display:block;
  }
  .calendar-team .day{
    min-height:78px;
  }
  .calendar-team .event-name{
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .calendar-team .event-type{
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* V33 - Menú 3 puntos en empleados */
.action-menu{
  position:relative;
  display:inline-block;
}
.dots-btn{
  width:38px;
  height:38px;
  min-height:38px;
  padding:0;
  margin:0;
  border-radius:10px;
  background:#f3f4f6;
  color:#374151;
  border:1px solid #e5e7eb;
  font-size:24px;
  line-height:1;
  font-weight:bold;
}
.dots-btn:hover{
  background:#e5e7eb;
}
.action-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:44px;
  min-width:150px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 14px 35px rgba(0,0,0,.14);
  padding:6px;
  z-index:200;
  text-align:left;
}
.action-dropdown.open{
  display:block;
}
.action-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:9px;
  color:#111827;
  font-size:14px;
}
.action-dropdown a:hover{
  background:#f3f4f6;
}
.action-dropdown a.danger{
  color:#dc2626;
}
.action-dropdown a.danger:hover{
  background:#fee2e2;
}
@media(max-width:700px){
  .dots-btn{
    width:42px;
    height:42px;
    min-height:42px;
  }
  .action-dropdown{
    right:0;
    min-width:160px;
  }
}


/* V34 - Fix menú 3 puntos visible */
.card{
  overflow:visible !important;
}
.table-responsive{
  overflow-x:auto;
  overflow-y:visible !important;
}
.action-menu{
  position:relative;
  z-index:9999;
}
.action-dropdown{
  z-index:99999 !important;
  overflow:visible !important;
}
.action-dropdown.open{
  display:block !important;
}
.table td{
  overflow:visible !important;
}
@media(max-width:700px){
  .action-dropdown{
    position:fixed !important;
    right:14px !important;
    top:auto !important;
    min-width:180px;
  }
}


/* V37 - Menú 3 puntos solicitudes */
.action-dropdown a.success{
  color:#16a34a;
}
.action-dropdown a.success:hover{
  background:#dcfce7;
}
.action-dropdown a.warning{
  color:#b45309;
}
.action-dropdown a.warning:hover{
  background:#fef3c7;
}


/* V38 - Menús 3 puntos auto arriba/abajo */
.action-dropdown{
  z-index:99999 !important;
}
.action-dropdown.drop-up{
  animation:menuDropUp .12s ease-out;
}
.action-dropdown.drop-down{
  animation:menuDropDown .12s ease-out;
}
@keyframes menuDropUp{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes menuDropDown{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}


/* V39 - Fix definitivo desplegable 3 puntos */
.action-menu{
  position:relative !important;
  display:inline-block !important;
}
.dots-btn{
  cursor:pointer !important;
  user-select:none;
}
.action-dropdown{
  display:none !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  padding:6px !important;
  min-width:165px !important;
  z-index:99999 !important;
}
.action-dropdown.open{
  display:block !important;
}
.action-dropdown a{
  display:block !important;
  padding:11px 13px !important;
  border-radius:9px !important;
  color:#111827 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
.action-dropdown a:hover{
  background:#f3f4f6 !important;
}
.action-dropdown a.danger{
  color:#dc2626 !important;
}
.action-dropdown a.danger:hover{
  background:#fee2e2 !important;
}
.action-dropdown a.success{
  color:#16a34a !important;
}
.action-dropdown a.success:hover{
  background:#dcfce7 !important;
}
.action-dropdown a.warning{
  color:#b45309 !important;
}
.action-dropdown a.warning:hover{
  background:#fef3c7 !important;
}


/* V40 - Fix desplegable solicitudes al final del margen */
.action-dropdown{
  max-height:calc(100vh - 24px) !important;
  overflow-y:auto !important;
}
.absence-action-menu{
  z-index:100000 !important;
}
.absence-dropdown{
  min-width:180px !important;
}
.absence-dropdown.open{
  display:block !important;
}
.table-responsive,
.card,
.content,
.layout{
  overflow:visible !important;
}
@media(max-width:700px){
  .absence-dropdown{
    min-width:190px !important;
  }
}


/* V41 - Fix definitivo: todos los 3 puntos abren hacia arriba */
.action-menu{
  position:relative !important;
  display:inline-block !important;
  z-index:999999 !important;
}

.dots-btn{
  cursor:pointer !important;
  width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:10px !important;
  background:#f3f4f6 !important;
  color:#374151 !important;
  border:1px solid #d1d5db !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:bold !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.dots-btn:hover{
  background:#e5e7eb !important;
}

.action-dropdown{
  display:none !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  padding:6px !important;
  min-width:175px !important;
  max-height:calc(100vh - 24px) !important;
  overflow-y:auto !important;
  z-index:999999 !important;
}

.action-dropdown.open{
  display:block !important;
}

.action-dropdown a{
  display:block !important;
  padding:12px 14px !important;
  border-radius:9px !important;
  color:#111827 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font-size:14px !important;
  line-height:1.2 !important;
}

.action-dropdown a:hover{
  background:#f3f4f6 !important;
}

.action-dropdown a.danger{
  color:#dc2626 !important;
}

.action-dropdown a.danger:hover{
  background:#fee2e2 !important;
}

.action-dropdown a.success{
  color:#16a34a !important;
}

.action-dropdown a.success:hover{
  background:#dcfce7 !important;
}

.action-dropdown a.warning{
  color:#b45309 !important;
}

.action-dropdown a.warning:hover{
  background:#fef3c7 !important;
}

/* Evita que tablas/tarjetas corten el menú */
.card,
.content,
.layout,
.table-responsive,
.table td{
  overflow:visible !important;
}


/* V42 - CSS crítico incluido */
.action-menu{
  position:relative !important;
  display:inline-block !important;
  z-index:999999 !important;
}
.dots-btn{
  cursor:pointer !important;
  width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:10px !important;
  background:#f3f4f6 !important;
  color:#374151 !important;
  border:1px solid #d1d5db !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:bold !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.action-dropdown{
  display:none !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  padding:6px !important;
  min-width:175px !important;
  max-height:calc(100vh - 24px) !important;
  overflow-y:auto !important;
  z-index:999999 !important;
}
.action-dropdown.open{
  display:block !important;
}
.action-dropdown a{
  display:block !important;
  padding:12px 14px !important;
  border-radius:9px !important;
  color:#111827 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font-size:14px !important;
}
.action-dropdown a:hover{background:#f3f4f6 !important;}
.action-dropdown a.danger{color:#dc2626 !important;}
.action-dropdown a.danger:hover{background:#fee2e2 !important;}
.action-dropdown a.success{color:#16a34a !important;}
.action-dropdown a.success:hover{background:#dcfce7 !important;}
.action-dropdown a.warning{color:#b45309 !important;}
.action-dropdown a.warning:hover{background:#fef3c7 !important;}
.card,.content,.layout,.table-responsive,.table td{
  overflow:visible !important;
}


/* V43 - Fix botón 3 puntos en Grupos dentro del diseño */
.actions-th{
  width:90px !important;
  text-align:center !important;
}

.actions-td{
  width:90px !important;
  min-width:90px !important;
  max-width:90px !important;
  text-align:center !important;
  vertical-align:middle !important;
  padding-left:6px !important;
  padding-right:6px !important;
  overflow:visible !important;
}

.action-menu-inline{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  position:relative !important;
}

.actions-td .dots-btn{
  margin:0 auto !important;
  position:relative !important;
  right:auto !important;
  left:auto !important;
  transform:none !important;
}

@media(max-width:700px){
  .actions-th,
  .actions-td{
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
  }

  .actions-td .dots-btn{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}


/* V44 - Grupos en tarjetas para que 3 puntos no se desplace */
.groups-card-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  overflow:visible !important;
}

.group-row-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:14px;
  padding:14px;
  overflow:visible !important;
}

.group-row-main{
  min-width:0;
  flex:1;
}

.group-row-title{
  font-weight:700;
  font-size:16px;
  color:#111827;
  margin-bottom:3px;
}

.group-row-desc{
  color:#6b7280;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.group-row-meta{
  display:inline-block;
  margin-top:7px;
  padding:4px 9px;
  border-radius:999px;
  background:#dbeafe;
  color:#1e40af;
  font-size:12px;
  font-weight:bold;
}

.group-row-actions{
  width:48px;
  min-width:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible !important;
}

.group-row-actions .action-menu{
  position:relative !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
}

.group-row-actions .dots-btn{
  position:static !important;
  margin:0 !important;
  transform:none !important;
}

@media(max-width:700px){
  .group-row-card{
    padding:12px;
    gap:10px;
  }

  .group-row-title{
    font-size:15px;
  }

  .group-row-desc{
    font-size:13px;
    white-space:normal;
  }

  .group-row-actions{
    width:44px;
    min-width:44px;
  }
}


/* V47 - Pulido PRO global */
.card{
  border-radius:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.btn,button{
  border-radius:12px;
}
input,select,textarea{
  border-radius:12px;
}
.badge{
  border-radius:999px;
  padding:5px 9px;
  font-weight:800;
}
@media(max-width:700px){
  .card{
    border-radius:15px;
  }
}


/* V55 - Fix menú desplegable móvil */
.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  margin:0;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.mobile-overlay{
  display:none;
}

@media(max-width:980px){
  .mobile-menu-btn{
    display:inline-flex !important;
  }

  .layout{
    display:block !important;
  }

  .sidebar{
    position:fixed !important;
    top:58px !important;
    left:-290px !important;
    width:285px !important;
    max-width:86vw !important;
    height:calc(100vh - 58px) !important;
    z-index:9998 !important;
    transition:left .22s ease !important;
    overflow-y:auto !important;
    box-shadow:18px 0 45px rgba(0,0,0,.30) !important;
  }

  .sidebar.open{
    left:0 !important;
  }

  .mobile-overlay.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    top:58px !important;
    background:rgba(15,23,42,.45) !important;
    z-index:9997 !important;
  }

  body.menu-open{
    overflow:hidden;
  }
}


/* V68 - Menú admin/empleado limpio */
.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar nav a{
  display:block;
}
.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  margin:0 12px 0 0;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.mobile-overlay{
  display:none;
}
@media(max-width:980px){
  .mobile-menu-btn{
    display:inline-flex !important;
  }
  .layout{
    display:block !important;
  }
  .sidebar{
    position:fixed !important;
    top:58px !important;
    left:-290px !important;
    width:285px !important;
    max-width:86vw !important;
    height:calc(100vh - 58px) !important;
    z-index:9998 !important;
    transition:left .22s ease !important;
    overflow-y:auto !important;
    box-shadow:18px 0 45px rgba(0,0,0,.30) !important;
  }
  .sidebar.open{
    left:0 !important;
  }
  .mobile-overlay.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    top:58px !important;
    background:rgba(15,23,42,.45) !important;
    z-index:9997 !important;
  }
  body.menu-open{
    overflow:hidden;
  }
}


/* V34 - Fix móvil: el menú lateral siempre por encima de botones 3 puntos */
@media(max-width:980px){
  body.menu-open .action-menu{
    z-index:1 !important;
    pointer-events:none !important;
  }

  body.menu-open .action-dropdown,
  body.menu-open .action-dropdown.open{
    display:none !important;
    z-index:1 !important;
  }

  body.menu-open .mobile-overlay.open{
    z-index:1000000 !important;
  }

  body.menu-open .sidebar,
  body.menu-open .sidebar.open{
    z-index:1000002 !important;
  }

  body.menu-open .mobile-menu-btn{
    position:relative !important;
    z-index:1000003 !important;
  }
}

/* V46 - Ajuste final móvil: eliminar espacio blanco sobrante al final */
html,
body{
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
}

@media(max-width:768px){
  html,
  body{
    min-height:100% !important;
    height:auto !important;
    overflow-x:hidden !important;
    background:#f8fafc !important;
    overscroll-behavior-y:none;
  }

  .layout{
    min-height:auto !important;
    height:auto !important;
  }

  .content{
    min-height:auto !important;
    height:auto !important;
    padding-bottom:12px !important;
    margin-bottom:0 !important;
  }

  .content > *:last-child,
  .content .card:last-child,
  .content .table-responsive:last-child{
    margin-bottom:0 !important;
  }

  .calendar,
  .attendance-calendar,
  .absence-calendar{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
}


/* V48 - Móvil: Desde/Hasta igual que el selector Vacaciones */
.absence-form-pro select,
.absence-form-pro input.absence-date-field,
.absence-form-pro input[type="date"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 14px !important;
  border:1px solid #d1d5db !important;
  border-radius:13px !important;
  background:#fff !important;
  color:#1f2937 !important;
  font-size:16px !important;
  line-height:48px !important;
  box-sizing:border-box !important;
  display:block !important;
}

.absence-form-pro input.absence-date-field{
  -webkit-appearance:none !important;
  appearance:none !important;
}

.absence-form-pro input.absence-date-field::-webkit-date-and-time-value{
  min-height:48px !important;
  line-height:48px !important;
  text-align:left !important;
}

.absence-form-pro input.absence-date-field::-webkit-calendar-picker-indicator{
  margin-right:0 !important;
}

@media(max-width:768px){
  .absence-form-pro select,
  .absence-form-pro input.absence-date-field,
  .absence-form-pro input[type="date"]{
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    line-height:50px !important;
    padding:0 14px !important;
    border-radius:13px !important;
    margin:0 !important;
  }

  .absence-form-pro .form-field-full{
    width:100% !important;
    max-width:100% !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }
}

/* V52 - Fix scroll móvil: permite deslizar hacia abajo */
@media(max-width:980px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body.menu-open{
    overflow-y:auto !important;
    position:static !important;
    height:auto !important;
  }

  .layout,
  .content{
    height:auto !important;
    min-height:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .sidebar{
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  .mobile-overlay{
    touch-action:auto !important;
  }
}

/* V53 - Fix definitivo scroll móvil: desbloquea página y evita overlay fantasma */
html,
body{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  position:static !important;
  touch-action:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

@media(max-width:980px){
  html,
  body{
    overflow-y:auto !important;
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    position:static !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body:not(.menu-open){
    overflow-y:auto !important;
    position:static !important;
    height:auto !important;
    max-height:none !important;
  }

  body:not(.menu-open) .mobile-overlay,
  body:not(.menu-open) .mobile-overlay.open{
    display:none !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }

  .layout,
  .content,
  main.content{
    overflow:visible !important;
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    position:relative !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .card,
  .grid,
  .stats,
  .table-responsive{
    touch-action:auto !important;
  }

  body.menu-open{
    overflow:hidden !important;
    height:100% !important;
  }

  body.menu-open .sidebar.open{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
}

/* V54 - FIX REAL scroll móvil: no bloquear nunca el desplazamiento de la página */
@media(max-width:980px){
  html,
  body{
    width:100% !important;
    min-height:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    position:static !important;
    touch-action:pan-y !important;
    -ms-touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.menu-open{
    overflow-y:auto !important;
    height:auto !important;
    max-height:none !important;
    position:static !important;
    touch-action:pan-y !important;
  }

  .layout,
  .content,
  main.content{
    min-height:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .mobile-overlay{
    pointer-events:none !important;
  }

  .mobile-overlay.open{
    pointer-events:auto !important;
  }

  body:not(.menu-open) .mobile-overlay,
  body:not(.menu-open) .mobile-overlay.open{
    display:none !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }
}

/* V55 - Fix definitivo scroll móvil: el contenido principal es el área desplazable */
@media(max-width:980px){
  html,
  body{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
    position:relative !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .header{
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    flex-shrink:0 !important;
  }

  .layout{
    display:block !important;
    height:calc(100dvh - 58px) !important;
    min-height:calc(100dvh - 58px) !important;
    max-height:calc(100dvh - 58px) !important;
    overflow:hidden !important;
    position:relative !important;
  }

  main.content,
  .content{
    display:block !important;
    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 58px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    position:relative !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .content > *:last-child,
  .content .card:last-child{
    margin-bottom:0 !important;
  }

  .sidebar{
    height:calc(100dvh - 58px) !important;
    max-height:calc(100dvh - 58px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body.menu-open main.content,
  body.menu-open .content{
    overflow-y:auto !important;
  }

  body:not(.menu-open) .mobile-overlay,
  body:not(.menu-open) .mobile-overlay.open{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* V56 - Panel móvil: 2 indicadores por línea */
@media(max-width:620px){
  .stats{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
  .stat{
    min-height:96px !important;
    padding:12px 10px !important;
  }
  .stat b{
    font-size:22px !important;
    line-height:1.1 !important;
  }
  .stat span,
  .stat .small,
  .stat .go{
    font-size:12px !important;
  }
}

@media(max-width:360px){
  .stats{
    gap:8px !important;
  }
  .stat{
    padding:10px 8px !important;
  }
  .stat b{
    font-size:20px !important;
  }
}