:root{
  --bg:#f3f3f1;
  --surface:#ffffff;
  --soft:#fafafa;
  --text:#262626;
  --muted:#777777;
  --line:#e8e6e1;
  --primary:#3b3b3b;
  --primary-hover:#181818;
  --accent:#ff6b2b;
  --danger:#d9482f;
  --success:#16a56f;
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --shadow:0 22px 55px rgba(35,35,35,.10);
  --shadow-soft:0 12px 30px rgba(35,35,35,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 18% 0%,#fff 0,#f7f7f5 35%,#eeeeeb 100%);color:var(--text);font-size:17px;line-height:1.45}
a{text-decoration:none;color:inherit}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.026) 1px,transparent 1px),linear-gradient(0deg,rgba(0,0,0,.026) 1px,transparent 1px);background-size:92px 92px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 70%)}
.container{width:min(1220px,calc(100% - 36px));margin:28px auto 42px}
.topbar{position:sticky;top:14px;z-index:20;width:min(1220px,calc(100% - 36px));margin:14px auto 0;background:rgba(255,255,255,.86);backdrop-filter:blur(22px);border:1px solid rgba(232,230,225,.9);border-radius:28px;box-shadow:var(--shadow-soft);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:950;letter-spacing:-.045em;font-size:22px;display:flex;align-items:center;gap:12px;white-space:nowrap}.brand:before{content:"◆";width:46px;height:46px;border-radius:17px;background:#fff;display:grid;place-items:center;border:1px solid var(--line);box-shadow:0 10px 26px rgba(35,35,35,.08);font-size:17px;color:#333}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nav a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 15px;color:#494949;font-weight:850;font-size:15px;box-shadow:0 8px 18px rgba(35,35,35,.045);transition:.18s}.nav a:hover{transform:translateY(-1px);color:#111;box-shadow:var(--shadow-soft)}.nav a:last-child{background:#3b3b3b;color:#fff;border-color:#3b3b3b}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:6px 0 22px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:950;font-size:13px;margin:0 0 8px}h1{font-size:44px;line-height:1.02;letter-spacing:-.06em;margin:0 0 8px}h2{font-size:24px;line-height:1.15;letter-spacing:-.045em;margin:0 0 5px}h3{font-size:20px;letter-spacing:-.035em}.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:rgba(255,255,255,.90);border:1px solid rgba(232,230,225,.9);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow);margin-bottom:20px}.card p:first-child{margin-top:0}.kpi{font-size:46px;line-height:1;font-weight:950;letter-spacing:-.07em;margin-bottom:6px}
.btn,button{appearance:none;border:0;background:var(--primary);color:#fff;border-radius:18px;min-height:54px;padding:14px 20px;font-weight:950;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 16px 32px rgba(30,30,30,.17);transition:.18s}.btn:hover,button:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn.secondary{background:#fff;color:#333;border:1px solid var(--line);box-shadow:var(--shadow-soft)}.btn.danger{background:#fff1ed;color:#c73522;border:1px solid #ffd9cf;box-shadow:none}.btn-large{width:100%;min-height:64px;font-size:18px;border-radius:20px;margin-top:10px}
label{display:block;font-weight:900;font-size:16px;margin:0 0 9px;color:#313131}input,select,textarea{width:100%;min-height:62px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px 18px;margin:0 0 16px;font-size:17px;color:#222;outline:none;transition:.16s;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}textarea{min-height:142px;resize:vertical}input::placeholder,textarea::placeholder{color:#aaa}input:focus,select:focus,textarea:focus{border-color:#cac6bd;box-shadow:0 0 0 6px rgba(255,107,43,.10)}select{appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 24px) 29px,calc(100% - 17px) 29px;background-size:7px 7px;background-repeat:no-repeat}input[type=file]{padding:17px;background:linear-gradient(180deg,#fff,#fafafa);border-style:dashed;cursor:pointer}.alert,.success{padding:16px 18px;border-radius:20px;font-weight:800;font-size:16px}.alert{background:#fff2ee;color:#a53321;border:1px solid #ffd8cc}.success{background:#effdf6;color:#117047;border:1px solid #c9f4df}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-soft)}th,td{padding:17px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:15.5px;vertical-align:middle}th{background:#fafaf8;color:#777;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:950}tr:last-child td{border-bottom:0}.photos{display:flex;gap:14px;flex-wrap:wrap}.photos img{width:220px;height:165px;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
/* Login inspirado en la referencia: card grande, campos altos y aire visual */
.login{display:grid;place-items:center;padding:28px}.login .container{width:min(1080px,100%);margin:0}.login-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}.login-visual,.login-card{background:rgba(255,255,255,.9);border:1px solid rgba(232,230,225,.92);border-radius:36px;box-shadow:var(--shadow);overflow:hidden}.login-visual{position:relative;min-height:610px;padding:40px;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(246,246,243,.96))}.login-visual:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-88px;top:-80px;background:rgba(255,107,43,.12)}.login-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-size:15px;font-weight:900;box-shadow:var(--shadow-soft)}.login-visual h1{font-size:54px;margin-top:70px;max-width:480px}.login-visual p{max-width:470px;font-size:18px;line-height:1.58}.mini-cards{position:absolute;left:40px;right:40px;bottom:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.mini-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow-soft);font-size:16px}.mini-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#f5f5f2;border:1px solid var(--line);font-size:24px;margin-bottom:14px}.login-card{padding:48px;display:flex;flex-direction:column;justify-content:center}.login-lock{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;background:linear-gradient(180deg,#fff,#f0f0ed);box-shadow:inset 0 0 0 1px var(--line),0 16px 36px rgba(35,35,35,.1);font-size:34px}.login-card h1{text-align:center;font-size:42px}.login-card .muted{text-align:center;margin-bottom:30px;font-size:17px}.login-card button{background:#3f3f3f}.login-card button:hover{background:#151515}
/* Nuevo reporte con estética tipo app/card */
.report-card{padding:0;overflow:hidden}.report-card form{padding:10px 28px 30px}.section-title{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:28px 0 16px;border-top:1px dashed var(--line)}.section-title:first-of-type{border-top:0}.section-title span{width:52px;height:52px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);display:grid;place-items:center;font-weight:950;font-size:18px;color:#333}.section-title p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-grid>div,.field-soft{background:var(--soft);border:1px solid var(--line);border-radius:26px;padding:18px 18px 2px}.products-list{display:grid;gap:14px;margin-bottom:18px}.product-row{display:grid;grid-template-columns:1fr 150px;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 9px 22px rgba(35,35,35,.04)}.product-row label{font-size:17px;margin:0}.product-row small{display:block;margin-top:6px;font-size:14px}.product-row input{margin:0;text-align:center;font-weight:950;font-size:22px;background:#f9f9f7}.report-card>form>label:last-of-type{margin-top:8px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.login-shell{grid-template-columns:1fr}.login-visual{display:none}}
@media(max-width:760px){body{font-size:17px}.container{width:calc(100% - 24px);margin:18px auto 38px}.app .container{padding-bottom:104px}.topbar{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;margin:0;border-radius:26px;padding:10px;background:rgba(255,255,255,.92);box-shadow:0 18px 50px rgba(20,20,20,.15)}.brand{display:none}.nav{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.nav a{min-height:50px;border-radius:18px;padding:9px 7px;font-size:13px;box-shadow:none}.nav a:nth-child(n+7){display:none}.page-head{display:block;margin:8px 0 18px}.eyebrow{font-size:12px}h1{font-size:36px;letter-spacing:-.055em}h2{font-size:22px}.grid,.form-grid{grid-template-columns:1fr;gap:14px}.card{border-radius:30px;padding:22px;margin-bottom:16px}.kpi{font-size:42px}label{font-size:17px}input,select,textarea{min-height:68px;border-radius:22px;font-size:18px;padding:20px 18px;margin-bottom:17px}select{background-position:calc(100% - 25px) 32px,calc(100% - 18px) 32px}.btn,button{width:100%;min-height:64px;border-radius:22px;font-size:17px}.btn-large{min-height:68px;font-size:18px;position:sticky;bottom:104px;z-index:5}.login{padding:16px}.login-card{border-radius:36px;padding:36px 22px}.login-card h1{font-size:36px}.login-lock{width:82px;height:82px}.report-card{border-radius:32px}.report-card form{padding:4px 16px 20px}.section-title{grid-template-columns:54px 1fr;gap:13px;padding:26px 0 16px}.section-title span{width:54px;height:54px;border-radius:19px}.section-title p{font-size:15.5px}.form-grid>div,.field-soft{border-radius:26px;padding:17px 16px 1px}.product-row{grid-template-columns:1fr 112px;border-radius:26px;padding:17px}.product-row label{font-size:16px}.product-row input{min-height:66px;font-size:24px}.photos img{width:100%;height:auto}table{display:block;overflow-x:auto;border-radius:24px;box-shadow:none}th,td{font-size:14px;padding:13px 12px;white-space:nowrap}}



/* Login: web conserva layout visual; móvil con más aire y sin scroll */
body.login{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(circle at 50% 0%,#fff 0,#f7f7f5 38%,#eeeeeb 100%);
}
body.login .container{
  width:min(1080px,100%);
  height:auto;
  margin:0;
  display:block;
}
.auth-card .alert,.auth-card .success{font-size:15px;padding:13px 15px;border-radius:18px;margin:0 0 18px}.auth-form{width:100%}.password-field{position:relative}.password-field input{padding-right:86px}.password-toggle{position:absolute;right:8px;top:8px;width:auto!important;min-height:calc(100% - 16px)!important;padding:0 14px!important;border-radius:15px!important;background:#f4f4f1!important;color:#333!important;box-shadow:none!important;font-size:14px!important}.password-toggle:hover{transform:none!important;background:#ecece8!important}.auth-links{text-align:center;margin-top:18px;font-weight:900}.auth-links a{text-decoration:underline;text-underline-offset:4px;color:#3f3f3f}

@media(max-width:980px){
  body.login{padding:28px;}
  body.login .container{width:min(560px,100%);display:grid;place-items:center;}
  .login-shell{grid-template-columns:1fr;width:100%;}
  .login-visual{display:none;}
}

@media(max-width:760px){
  body.login{padding:0;}
  body.login .container{
    width:calc(100vw - 34px);
    display:grid;
    place-items:center;
    padding:18px 0;
  }
  .login-card.auth-card{
    width:100%;
    border-radius:32px;
    padding:clamp(26px,5.2vh,38px) 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .auth-card .login-lock{
    width:clamp(64px,10vh,82px)!important;
    height:clamp(64px,10vh,82px)!important;
    font-size:clamp(26px,4.2vh,34px)!important;
    margin-bottom:clamp(18px,3vh,24px);
  }
  .auth-card h1{font-size:clamp(32px,5.2vh,38px);margin-bottom:10px;}
  .auth-card .muted{font-size:clamp(15px,2.35vh,17px);line-height:1.48;margin-bottom:clamp(24px,4vh,34px);}
  .auth-form label{font-size:16px;margin-bottom:10px;}
  .auth-form input{min-height:clamp(58px,8.6vh,68px);font-size:17px;border-radius:22px;margin-bottom:clamp(17px,2.8vh,22px);padding:18px 17px;}
  .password-field input{padding-right:88px;}
  .password-toggle{top:9px;right:9px;min-height:calc(100% - 18px)!important;border-radius:16px!important;}
  .auth-form .btn-large{min-height:clamp(60px,9vh,70px);font-size:17px;border-radius:22px;margin-top:4px;position:static;}
  .auth-links{font-size:15px;margin-top:clamp(18px,3vh,24px);}
  .auth-card .alert,.auth-card .success{font-size:14px;padding:12px 14px;border-radius:17px;margin-bottom:16px;}
}

@media(max-height:700px) and (max-width:760px){
  body.login .container{width:calc(100vw - 26px);padding:13px 0;}
  .login-card.auth-card{padding:24px 20px;border-radius:28px;}
  .auth-card .login-lock{width:56px!important;height:56px!important;font-size:24px!important;margin-bottom:12px;}
  .auth-card h1{font-size:29px;margin-bottom:6px;}
  .auth-card .muted{font-size:14px;line-height:1.35;margin-bottom:16px;}
  .auth-form label{font-size:14.5px;margin-bottom:7px;}
  .auth-form input{min-height:50px;font-size:15.5px;margin-bottom:10px;border-radius:18px;padding:13px 15px;}
  .auth-form .btn-large{min-height:52px;font-size:16px;border-radius:18px;}
  .password-toggle{top:7px;right:7px;min-height:36px!important;font-size:13px!important;}
  .auth-links{font-size:14px;margin-top:10px;}
}

/* =========================================================
   AJUSTE FINAL SIN RESTRICCIONES DE SCROLL
   ========================================================= */
html, body{
  overflow-x:hidden;
  overflow-y:auto;
  height:auto;
  max-height:none;
  position:static;
}
body.app,
body.login{
  overflow-y:auto;
  height:auto;
  max-height:none;
  position:static;
}
main.container,
.container,
.card,
.report-card,
.report-card form,
form{
  max-height:none;
}
body.app main.container{
  padding-bottom:120px;
}
.password-field{
  position:relative;
  margin-bottom:22px;
}
.password-field input{
  margin-bottom:0;
  padding-right:100px;
}
.password-toggle{
  position:absolute!important;
  top:50%!important;
  right:10px!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  min-width:64px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 15px!important;
  border-radius:14px!important;
  background:#f4f4f1!important;
  color:#333!important;
  box-shadow:none!important;
  font-size:14px!important;
  line-height:1!important;
}
.password-toggle:hover{
  transform:translateY(-50%)!important;
  background:#ecece8!important;
}
.auth-form .btn-large{
  margin-top:16px;
  margin-bottom:0;
  position:static;
}
.auth-links{
  margin-top:32px;
  text-align:center;
  line-height:1.45;
}
@media(max-width:760px){
  body.login{
    padding:0;
  }
  body.login .container{
    min-height:auto;
    padding:28px 0;
  }
  .login-card.auth-card{
    justify-content:flex-start;
    padding:34px 22px;
  }
  .auth-card .muted{
    margin-bottom:28px;
  }
  .auth-form input{
    margin-bottom:20px;
  }
  .password-field{
    margin-bottom:24px;
  }
  .auth-form .btn-large{
    margin-top:12px;
  }
  .auth-links{
    margin-top:30px;
    font-size:15.5px;
  }
  body.app main.container{
    padding-bottom:145px;
  }
}
@media(max-width:760px){.btn-large{position:static!important;bottom:auto!important;}}
/* El formulario de reportes nunca debe cortar contenido */
.report-card,
.report-card form{
  overflow:visible!important;
}

/* Evidencia fotográfica tipo app */
.upload-card{background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:28px;box-shadow:0 18px 45px rgba(15,23,42,.08);overflow:hidden;margin:18px 0 34px}.upload-card-head{display:flex;align-items:center;gap:18px;padding:26px 30px;border-bottom:1px solid rgba(17,24,39,.08)}.upload-card-head h3{margin:0 0 4px;font-size:24px;line-height:1.15;color:#151515}.upload-card-head p{margin:0;font-size:17px;color:#6b7280}.upload-icon,.drop-zone-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#444;background:#fafafa;border:1px solid rgba(17,24,39,.08);box-shadow:0 8px 24px rgba(15,23,42,.06);flex:0 0 auto;font-size:26px}.drop-zone{margin:30px;min-height:260px;border:2px dashed #d7d7d7;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:34px 24px;background:#fff;transition:all .2s ease;cursor:pointer}.drop-zone strong{font-size:24px;line-height:1.2;color:#171717}.drop-zone span{font-size:18px;color:#6b7280}.drop-zone.is-dragover{border-color:#333;background:#f7f7f7;transform:scale(.995)}.btn-browse{margin-top:14px;height:58px;padding:0 28px;border-radius:16px;border:1px solid rgba(17,24,39,.12);background:#fff;font-size:19px;font-weight:700;color:#333;box-shadow:0 8px 20px rgba(15,23,42,.06);cursor:pointer}.upload-list{display:flex;flex-direction:column;gap:18px;padding:0 30px 30px}.upload-item{display:grid;grid-template-columns:76px 1fr 42px;gap:18px;align-items:center;padding:18px 20px;border:1px solid rgba(17,24,39,.08);border-radius:22px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.045)}.upload-thumb{width:76px;height:76px;border-radius:18px;object-fit:cover;background:#f3f4f6;border:1px solid rgba(17,24,39,.08)}.upload-file-title{font-size:19px;font-weight:800;color:#151515;margin:0 0 4px;word-break:break-word}.upload-meta{font-size:16px;color:#5f6368;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.status-dot{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;background:#20c56b;color:#fff;font-size:12px;font-weight:900}.upload-progress{height:9px;background:#ececec;border-radius:999px;overflow:hidden;margin-top:13px}.upload-progress span{display:block;height:100%;width:100%;background:#2563eb;border-radius:999px}.upload-remove{width:42px;height:42px;border:0;border-radius:14px;background:#f7f7f7;color:#333;font-size:24px;line-height:1;cursor:pointer}.upload-remove:hover{background:#efefef}.upload-help{padding:0 30px 30px;margin:-10px 0 0;color:#777;font-size:16px}.upload-error{color:#b91c1c;font-weight:700}@media(max-width:700px){.upload-card{border-radius:24px;margin:16px -2px 30px}.upload-card-head{padding:22px 20px;gap:14px}.upload-card-head h3{font-size:22px}.upload-card-head p{font-size:16px}.drop-zone{margin:20px;min-height:230px;border-radius:24px;padding:28px 18px}.drop-zone strong{font-size:22px}.drop-zone span{font-size:16px}.btn-browse{width:100%;height:60px;font-size:18px}.upload-list{padding:0 20px 24px;gap:14px}.upload-item{grid-template-columns:62px 1fr 40px;gap:14px;padding:16px;border-radius:20px}.upload-thumb{width:62px;height:62px;border-radius:15px}.upload-file-title{font-size:17px}.upload-meta{font-size:14px}}


/* Semana + rango dinámico */
.week-cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:128px;
  line-height:1.2;
}
.week-title{
  display:block;
  font-weight:800;
  color:#242424;
  font-size:15px;
}
.week-range{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:6px 9px;
  border-radius:999px;
  background:#f5f5f5;
  border:1px solid #e9e9e9;
  color:#686868;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.week-range-detail{
  display:inline-flex;
  margin-left:6px;
  padding:5px 8px;
  border-radius:999px;
  background:#f5f5f5;
  border:1px solid #e9e9e9;
  color:#686868;
  font-size:13px;
  font-weight:700;
}
@media(max-width:760px){
  .week-cell{min-width:150px;}
  .week-title{font-size:16px;}
  .week-range{font-size:12px; padding:7px 10px;}
}

/* Ajuste solicitado: rango debajo de Semana, en gris y texto más pequeño */
.week-cell{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  line-height:1.22!important;
}
.week-title{
  display:block!important;
  font-weight:800!important;
  color:#242424!important;
  font-size:15px!important;
}
.week-range{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  margin-top:2px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8a8a8a!important;
  font-size:11px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
.week-range-detail{
  display:block!important;
  margin:3px 0 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8a8a8a!important;
  font-size:12px!important;
  font-weight:600!important;
}
@media(max-width:760px){
  .week-cell{min-width:150px!important; gap:4px!important;}
  .week-title{font-size:16px!important;}
  .week-range{font-size:12px!important;}
}


/* Reportes agrupados tipo acordeón */



.group-count{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  font-weight:800;
  color:#333;
}
.report-accordion-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:36px;
}
.report-accordion{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:28px;
  box-shadow:0 18px 45px rgba(15,23,42,.075);
  overflow:hidden;
}
.report-accordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 28px;
}
.report-accordion summary::-webkit-details-marker{display:none;}
.accordion-main{min-width:0;}
.chain-pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  background:#f5f5f5;
  color:#666;
  font-size:13px;
  font-weight:900;
  margin-bottom:10px;
  letter-spacing:.2px;
}
.accordion-main h3{
  margin:0 0 5px;
  font-size:23px;
  color:#161616;
  line-height:1.12;
}
.accordion-main p{
  margin:0;
  color:#777;
  font-size:15px;
  line-height:1.35;
}
.accordion-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.accordion-meta span{
  padding:9px 12px;
  border-radius:999px;
  background:#fafafa;
  border:1px solid rgba(17,24,39,.08);
  color:#555;
  font-size:14px;
  font-weight:800;
}
.accordion-meta b{
  color:#222;
  font-size:15px;
  font-weight:900;
}
.report-accordion[open] .accordion-meta b::after{content:' ↑';}
.report-accordion:not([open]) .accordion-meta b::after{content:' ↓';}
.accordion-body{
  border-top:1px solid rgba(17,24,39,.08);
  padding:18px 22px 24px;
  background:#fcfcfc;
}
.grouped-report-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.grouped-report-item{
  display:grid;
  grid-template-columns:190px 1fr auto auto;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(17,24,39,.07);
  box-shadow:0 8px 20px rgba(15,23,42,.045);
}
.grouped-info strong{
  display:block;
  font-size:16px;
  color:#202020;
  margin-bottom:4px;
}
.grouped-info span{
  color:#777;
  font-size:14px;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:#f5f5f5;
  color:#444;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.status-aprobado{background:#ecfdf3;color:#087443;}
.status-observado{background:#fff7ed;color:#b45309;}
.status-pendiente{background:#f5f5f5;color:#555;}
.status-revisado{background:#eff6ff;color:#1d4ed8;}
.empty-state{padding:28px!important;}
.empty-state strong{font-size:20px;color:#222;}
.empty-state p{margin:8px 0 0;color:#777;}
@media(max-width:900px){
  .grouped-report-item{grid-template-columns:1fr; align-items:start; gap:12px;}
  .grouped-report-item .btn{width:100%; text-align:center; justify-content:center;}
}
@media(max-width:760px){
  
  
  
  .group-count{font-size:14px;}
  .report-accordion{border-radius:24px;}
  .report-accordion summary{padding:22px 20px; align-items:flex-start; flex-direction:column; gap:14px;}
  .accordion-main h3{font-size:22px;}
  .accordion-meta{width:100%; justify-content:space-between;}
  .accordion-body{padding:16px 14px 18px;}
  .grouped-report-item{border-radius:20px; padding:16px;}
  .status-badge{width:max-content;}
}

/* Progreso visual por semanas dentro de acordeones */
.week-progress-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
  width:100%;
}
.week-progress-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(248,250,252,.78);
}
.week-progress-label{
  min-width:145px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#0f172a;
}
.week-progress-label strong{
  font-size:14px;
  line-height:1.1;
  font-weight:800;
}
.week-progress-label span{
  font-size:12px;
  color:#64748b;
  font-weight:700;
}
.week-dots{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.week-dot{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  border:2px solid #dbe4ef;
  color:#64748b;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
}
.week-dot.done{
  border-color:#16a34a;
  background:#16a34a;
  color:#fff;
  box-shadow:0 8px 18px rgba(22,163,74,.22);
}
.week-dot.pending{ background:#f8fafc; }

@media (max-width: 760px){
  .week-progress-row{ align-items:flex-start; gap:10px; padding:12px; }
  .week-progress-label{ min-width:100%; }
  .week-dots{ gap:10px; }
  .week-dot{ width:38px; height:38px; font-size:14px; }
}

/* Ajustes: flujo por ubicación + semanas disponibles */
.field-help{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:#64748b;
  font-weight:700;
}
select:disabled,
button:disabled{
  opacity:.58;
  cursor:not-allowed;
}

/* Progreso semanal alineado al costado del nombre del acordeón */
.accordion-title-line{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}
.accordion-title-line h3{
  margin:0;
  line-height:1.15;
}
.week-progress-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:7px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.week-progress-inline-period{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  white-space:nowrap;
}
.week-dots-inline{
  gap:6px;
  flex-wrap:nowrap;
}
.week-dots-inline .week-dot{
  width:28px;
  height:28px;
  font-size:12px;
  box-shadow:none;
}
@media(max-width:760px){
  .accordion-title-line{
    align-items:flex-start;
    gap:10px;
  }
  .week-progress-inline{
    width:100%;
    justify-content:space-between;
    border-radius:18px;
    padding:10px 12px;
  }
  .week-dots-inline .week-dot{
    width:34px;
    height:34px;
    font-size:13px;
  }
}

/* Logos de cadena en reportes y mantenimiento */
.chain-logo{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  vertical-align:middle;
}
.chain-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
  display:block;
}
.chain-logo-empty{
  background:linear-gradient(135deg,#eef2ff,#f8fafc);
  color:#334155;
  font-weight:900;
  font-size:18px;
}
.store-heading-logo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.store-heading-logo h3{
  margin:3px 0 0;
}
.current-logo-preview{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.form-actions-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:760px){
  .chain-logo{ width:42px; height:42px; min-width:42px; border-radius:13px; }
  .store-heading-logo{ gap:10px; }
}

/* Filtros de Mis reportes en una sola línea */





/* Contador de reportes alineado al avance semanal */
.accordion-progress-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.report-count-inline{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color:#64748b;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}

@media(max-width:980px){
  
  
}
@media(max-width:760px){
  
  
  
  .accordion-progress-line{width:100%; gap:8px;}
  .report-count-inline{width:100%; justify-content:center; border-radius:18px; min-height:40px;}
}
/* Botón volver en detalle de reporte */
.detail-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.detail-title-row h1{margin:0}.btn-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:14px;background:#f3f4f6;color:#111827;text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap;border:1px solid #e5e7eb}.btn-back:hover{background:#e5e7eb}@media (max-width:640px){.detail-title-row{align-items:flex-start;gap:12px}.detail-title-row h1{font-size:24px;line-height:1.15}.btn-back{min-height:42px;padding:9px 14px;border-radius:12px;font-size:14px}}


/* =========================================================
   AJUSTE CONFIRMADO - FILTROS MÓVIL EN ACORDEÓN + SEMANAS GRIS
   ========================================================= */
.mobile-filter-accordion{
  display:block;
}
.mobile-filter-summary{
  display:none;
}
.mobile-filter-content{
  display:block;
}

/* Las filas internas de semanas dentro del acordeón se diferencian del título */
.report-accordion .accordion-body{
  background:#f7f8fa;
}
.report-accordion .grouped-report-item{
  background:#f1f3f5;
  border-color:#e3e7ee;
  box-shadow:none;
}
.report-accordion .grouped-report-item:hover{
  background:#eef1f5;
}

@media(max-width:760px){
  
  .mobile-filter-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px;
    list-style:none;
    cursor:pointer;
    font-size:18px;
    font-weight:900;
    color:#111827;
    background:#fff;
  }
  .mobile-filter-summary::-webkit-details-marker{display:none;}
  .mobile-filter-summary::after{
    content:'+';
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f3f4f6;
    color:#111827;
    font-size:22px;
    line-height:1;
    font-weight:900;
  }
  .mobile-filter-accordion[open] .mobile-filter-summary::after{
    content:'−';
  }
  .mobile-filter-summary span{
    display:block;
    line-height:1.1;
  }
  .mobile-filter-summary small{
    display:block;
    color:#6b7280;
    font-size:12px;
    font-weight:800;
    margin-left:auto;
    text-align:right;
  }
  .mobile-filter-accordion:not([open]) .mobile-filter-content{
    display:none!important;
  }
  .mobile-filter-content{
    padding:0 16px 18px;
    border-top:1px solid rgba(17,24,39,.08);
    background:#fff;
  }
  .mobile-filter-content 
  .report-accordion .accordion-body{
    background:#f7f8fa;
  }
  .report-accordion .grouped-report-list{
    gap:10px;
  }
  .report-accordion .grouped-report-item{
    background:#f2f4f7!important;
    border:1px solid #e3e7ee!important;
  }
}


/* =========================================================
   FIX FINAL SOLICITADO: Logo Legovic + filtros Mis reportes
   ========================================================= */

/* Elimina el recuadro/rombo negro anterior del menú */
.brand::before,
.brand:before,
.logo-icon,
.logo-box,
.sidebar-logo-box,
.menu-logo-box,
.login-lock {
  content: none !important;
  display: none !important;
}

/* Header con logo real */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
}
.brand .brand-logo {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  max-width: 145px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.brand span {
  display: inline-block !important;
}

/* Login con logo real */
.login-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.login-logo img {
  display: block !important;
  width: 190px !important;
  max-width: 74% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Filtros de Mis reportes: visibles en web */

.mobile-filter-accordion {
  display: block !important;
}
.mobile-filter-summary {
  display: none !important;
}
.mobile-filter-content {
  display: block !important;
}
.mobile-filter-accordion[open] .mobile-filter-content {
  display: block !important;
}





/* Botón Ver alineado en login */
.password-field {
  position: relative !important;
}
.password-field input {
  padding-right: 96px !important;
}
.password-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 64px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 14px !important;
}
.password-toggle:hover {
  transform: translateY(-50%) !important;
}

@media (max-width: 980px) {
  
  
}

@media (max-width: 760px) {
  .brand {
    display: none !important;
  }

  .login-logo {
    margin-bottom: 22px !important;
  }
  .login-logo img {
    width: 155px !important;
    max-width: 72% !important;
  }

  .password-field input {
    padding-right: 92px !important;
  }
  .password-toggle {
    right: 9px !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 62px !important;
  }

  /* En móvil, filtros de Mis reportes como acordeón cerrado por defecto */
  
  .mobile-filter-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    cursor: pointer !important;
    list-style: none !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    background: #fff !important;
  }
  .mobile-filter-summary::-webkit-details-marker {
    display: none !important;
  }
  .mobile-filter-summary::after {
    content: '+' !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }
  .mobile-filter-accordion[open] .mobile-filter-summary::after {
    content: '−' !important;
  }
  .mobile-filter-accordion:not([open]) .mobile-filter-content {
    display: none !important;
  }
  .mobile-filter-accordion[open] .mobile-filter-content {
    display: block !important;
    padding: 0 16px 18px !important;
    border-top: 1px solid rgba(17,24,39,.08) !important;
    background: #fff !important;
  }
  
  
  
}


/* =========================================================
   FIX REAL: Nuevo reporte - separadores y numeración de pasos
   ========================================================= */

/* Separación real para las líneas divisorias punteadas del formulario */
.report-card .section-title {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    padding-top: 34px !important;
    padding-bottom: 18px !important;
    border-top: 1px dashed rgba(17, 24, 39, 0.18) !important;
}

/* El primer paso no debe tener línea superior, pero sí respirar */
.report-card .section-title:first-of-type {
    border-top: 0 !important;
    margin-top: 8px !important;
    padding-top: 18px !important;
}

/* Numeración de cada paso: fondo rojo y número blanco */
.report-card .section-title > span {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
    background: #d71920 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(215, 25, 32, 0.24) !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 950 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Ajuste de respiración entre el título del paso y los bloques siguientes */
.report-card .section-title + .form-grid,
.report-card .section-title + .field-soft,
.report-card .section-title + .products-list,
.report-card .section-title + .upload-card {
    margin-top: 8px !important;
}

/* Móvil: más aire sin hacer el formulario pesado */
@media (max-width: 760px) {
    .report-card .section-title {
        grid-template-columns: 46px 1fr !important;
        gap: 14px !important;
        margin-top: 28px !important;
        margin-bottom: 18px !important;
        padding-top: 30px !important;
        padding-bottom: 16px !important;
    }

    .report-card .section-title:first-of-type {
        margin-top: 6px !important;
        padding-top: 16px !important;
    }

    .report-card .section-title > span {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 18px !important;
    }
}



/* =========================================================
   FIX MÓVIL: filtros no se cierran al deslizar + menos margen formulario
   ========================================================= */

@media (max-width: 760px) {
    /* El acordeón solo debe cambiar al tocar el encabezado, no por scroll interno */
    .mobile-filter-accordion {
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    .mobile-filter-content {
        touch-action: pan-y !important;
    }

    /* Reducir margen lateral en Nuevo reporte de mercaderismo */
    body:has(.report-card) .container {
        width: calc(100% - 18px) !important;
        margin-left: 9px !important;
        margin-right: 9px !important;
    }

    .report-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 420px) {
    body:has(.report-card) .container {
        width: calc(100% - 12px) !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

    .report-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}



/* =========================================================
   FIX REAL: Acordeón filtros móvil sin <details> + margen título reporte
   ========================================================= */

/* Web: filtros siempre visibles */
.mobile-filter-accordion {
    display: block !important;
}
.mobile-filter-summary {
    display: none !important;
}
.mobile-filter-content {
    display: block !important;
}


/* Margen izquierdo solo en el bloque de título de Nuevo reporte */
.page-head .eyebrow,
.page-head h1,
.page-head .muted {
    margin-left: 0 !important;
}

@media (max-width: 760px) {
    /* El acordeón ya no es <details>; solo abre/cierra por clic al botón */
    

    .mobile-filter-summary {
        display: flex !important;
        width: 100% !important;
        border: 0 !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 18px 20px !important;
        cursor: pointer !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: left !important;
        color: inherit !important;
        touch-action: manipulation !important;
    }

    .mobile-filter-summary::after {
        content: '+' !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .mobile-filter-accordion.is-open .mobile-filter-summary::after {
        content: '−' !important;
    }

    .mobile-filter-accordion .mobile-filter-content {
        display: none !important;
    }

    .mobile-filter-accordion.is-open .mobile-filter-content {
        display: block !important;
        padding: 0 16px 18px !important;
        border-top: 1px solid rgba(17,24,39,.08) !important;
        background: #fff !important;
    }

    

    

    

    /* Solo dar aire al texto introductorio del formulario Nuevo reporte */
    .page-head .eyebrow,
    .page-head h1,
    .page-head .muted {
        margin-left: 10px !important;
        margin-right: 6px !important;
    }
}


/* =========================================================
   FIX DEFINITIVO: filtro móvil no se cierra con scroll + margen encabezado
   ========================================================= */

/* Filtros web visibles y en línea */


.mobile-filter-accordion {
    display: block !important;
}

.mobile-filter-summary {
    display: none !important;
}

.mobile-filter-content {
    display: block !important;
}



/* Margen solicitado para el encabezado real del formulario Nuevo reporte */
body:has(.report-card) .page-head {
    padding-left: 0 !important;
}

@media (max-width: 760px) {
    /* Margen izquierdo visible para:
       Carga en campo / Nuevo reporte de mercaderismo / texto descriptivo */
    body:has(.report-card) .page-head {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    body:has(.report-card) .page-head .eyebrow,
    body:has(.report-card) .page-head h1,
    body:has(.report-card) .page-head .muted {
        margin-left: 0 !important;
    }

    /* Acordeón móvil propio, sin <details> */
    

    .mobile-filter-summary {
        display: flex !important;
        width: 100% !important;
        min-height: 66px !important;
        border: 0 !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 18px 20px !important;
        cursor: pointer !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: left !important;
        color: inherit !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    .mobile-filter-summary::after {
        content: '+' !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .mobile-filter-accordion.is-open .mobile-filter-summary::after {
        content: '−' !important;
    }

    .mobile-filter-accordion .mobile-filter-content {
        display: none !important;
    }

    .mobile-filter-accordion.is-open .mobile-filter-content {
        display: block !important;
        padding: 0 16px 18px !important;
        border-top: 1px solid rgba(17,24,39,.08) !important;
        background: #fff !important;
    }

    

    

    
}

/* fallback si el navegador no soporta :has */
@media (max-width: 760px) {
    .page-head {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   FIX iOS Safari: filtro no se cierra al hacer scroll
   ========================================================= */

@media (max-width: 760px) {
    .mobile-filter-accordion {
        overflow: visible !important;
    }

    .mobile-filter-accordion .mobile-filter-content {
        display: none !important;
    }

    .mobile-filter-accordion.is-open .mobile-filter-content {
        display: block !important;
    }

    .mobile-filter-summary {
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }
}


/* =========================================================
   PRODUCTOS CON FOTO + VISUAL EN FRENTES
   ========================================================= */
.product-admin-form {
    align-items: start !important;
}

.product-form-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
}

.product-current-photo {
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}

.product-current-photo img,
.product-thumb img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    
}

.product-thumb {
    width: 62px !important;
    min-width: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-thumb span {
    font-size: 12px !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
}

/* Nuevo reporte: foto al costado izquierdo del producto */
.product-row-visual {
    grid-template-columns: 1fr 120px !important;
    gap: 16px !important;
    align-items: center !important;
}

.product-row-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.product-row-photo {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 24px rgba(35,35,35,.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
}

.product-row-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    
}

.product-row-photo span {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: #f4f4f2 !important;
    color: #777 !important;
    font-weight: 900 !important;
    font-size: 22px !important;
}

@media (max-width: 760px) {
    .product-row-visual {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .product-row-info {
        gap: 12px !important;
    }

    .product-row-photo {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        border-radius: 16px !important;
    }

    .product-row-visual input[type="number"] {
        width: 100% !important;
    }

    .product-form-actions {
        width: 100% !important;
    }

    .product-form-actions button,
    .product-form-actions .btn {
        width: 100% !important;
    }

    .product-thumb img {
        width: 48px !important;
        height: 48px !important;
    }
}


/* ===== FOOTER ===== */
.app-footer {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 18px 10px;
    margin-top: 30px;
}

@media (max-width: 760px){
    .app-footer {
        font-size: 11px;
        padding-bottom: 20px;
    }
}


/* =========================================================
   COPYRIGHT FOOTER FINAL
   ========================================================= */
.app-footer {
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #8a8a8a !important;
    padding: 22px 14px 26px !important;
    margin: 34px auto 0 !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
}

/* En login: queda abajo, sin subirse encima del bloque */
.login-page,
.login-body,
body.login {
    min-height: 100vh !important;
}

.login-page .app-footer,
.login-body .app-footer,
body.login .app-footer {
    margin-top: 18px !important;
    padding-bottom: 18px !important;
}

@media (max-width: 760px) {
    .app-footer {
        font-size: 11px !important;
        padding: 18px 12px 22px !important;
        margin-top: 24px !important;
    }
}

/* FOOTER ÚNICO */
.app-footer{
  width:100%!important;
  text-align:center!important;
  font-size:12px!important;
  color:#8a8a8a!important;
  padding:22px 14px 26px!important;
  margin:34px auto 0!important;
  display:block!important;
  clear:both!important;
}
@media(max-width:760px){
  .app-footer{font-size:11px!important;padding:18px 12px 22px!important;margin-top:24px!important;}
}


/* ===== FIX REAL: Tipografía de reportes agrupados ===== */
.grouped-report-item .report-period-title,
.grouped-report-item .week-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #262626 !important;
}

.grouped-report-item .report-date,
.grouped-report-item .week-range {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #8a8a8a !important;
    font-weight: 650 !important;
}

.report-count-inline {
    white-space: nowrap !important;
}


/* ===== FIX REAL ESPACIADO EXACTO ===== */
.grouped-report-item {
    column-gap: 20px !important;
}

.grouped-week,
.grouped-info {
    gap: 4px !important;
}

.grouped-info strong,
.grouped-week strong {
    margin-bottom: 4px !important;
}

/* evitar separación exagerada */
.grouped-info,
.grouped-week {
    line-height: 1.2 !important;
}


/* ===== FIX LOGIN BOTON VER ===== */
@media (max-width: 760px){
    .password-field {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    .password-field input {
        width: 100% !important;
        padding-right: 90px !important;
    }

    .password-field .toggle-password {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}


/* ===== FIX REAL DEFINITIVO LOGIN MÓVIL - BOTÓN VER ===== */
@media (max-width: 760px) {
  .auth-form .password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  .auth-form .password-field input#loginPassword {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    line-height: 58px !important;
    padding: 0 88px 0 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .auth-form .password-field .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    min-width: 64px !important;
    width: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .auth-form .password-field .password-toggle:hover,
  .auth-form .password-field .password-toggle:focus,
  .auth-form .password-field .password-toggle:active {
    transform: translateY(-50%) !important;
  }
}


/* =========================================================
   USUARIOS: editar/eliminar + asignación de cadenas
   ========================================================= */
.user-admin-form {
    align-items: start !important;
}

.user-chain-field {
    grid-column: 1 / -1 !important;
}

.chain-checkbox-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.chain-check {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    cursor: pointer !important;
}

.chain-check input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #d71920 !important;
}

.chain-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.chain-tags-list span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #f4f4f2 !important;
    color: #333 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.user-form-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
}

.table-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

button:disabled,
.btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

@media (max-width: 760px) {
    .chain-checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    .user-form-actions button,
    .user-form-actions .btn {
        width: 100% !important;
    }

    .table-actions {
        justify-content: flex-start !important;
    }
}


/* ===== FIX CHECKBOX CADENAS UI ===== */
.chain-check {
    min-height: 52px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.chain-check input {
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
}

.chain-check span {
    display: flex !important;
    align-items: center !important;
    font-weight: 700 !important;
}

/* reducir altura general del contenedor */
.chain-checkbox-grid {
    gap: 8px !important;
}


/* =========================================================
   PRODUCTOS: cadenas disponibles + acciones en línea
   ========================================================= */
.product-chain-field {
    grid-column: 1 / -1 !important;
}

.compact-chain-grid .chain-check {
    min-height: 52px !important;
    padding: 10px 14px !important;
}

.product-actions-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    
    white-space: nowrap !important;
}

.product-actions-line form {
    margin: 0 !important;
    display: inline-flex !important;
}

.product-actions-line .btn,
.product-actions-line button {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
}

@media (max-width: 900px) {
    .product-actions-line {
        flex-wrap: wrap !important;
    }
}


/* ===== BOTÓN CERRAR FORMULARIO ===== */
.form-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.form-close-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f4f4f2 !important;
    color: #333 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: all .2s ease !important;
}

.form-close-btn:hover {
    background: #e5e5e2 !important;
}

@media (max-width: 760px){
    .form-close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}


/* ===== FIX REAL BOTÓN CERRAR NUEVO REPORTE ===== */
.form-title-row {
    display: contents !important;
}

.form-title-row .form-close-btn {
    display: none !important;
}

.form-header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: start !important;
    gap: 18px !important;
    width: 100% !important;
}

.form-header-row h1 {
    margin: 0 !important;
}

.form-header-row .form-close-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
    margin: 4px 0 0 auto !important;
    padding: 0 !important;
}

.form-header-row .form-close-btn:hover {
    background: #2b2b2b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Ajuste específico del header del formulario */
.page-head .form-header-row {
    margin-bottom: 18px !important;
}

@media (max-width: 760px) {
    .form-header-row {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .form-header-row .form-close-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 19px !important;
        margin-top: 6px !important;
        margin-right: 0 !important;
    }

    .form-header-row h1 {
        max-width: 100% !important;
    }
}


/* ===== FIX FINAL: botón cerrar con SVG y alineación web ===== */
.form-header-row {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 22px !important;
    width: 100% !important;
}

.form-header-row h1 {
    margin: 0 !important;
    padding-right: 76px !important;
}

.form-header-row .form-close-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.18) !important;
    margin: 8px 0 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.form-header-row .form-close-btn svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.form-header-row .form-close-btn svg path {
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    fill: none !important;
}

.form-header-row .form-close-btn:hover {
    background: #2b2b2b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* En web, llevar el botón más a la derecha del encabezado */
@media (min-width: 761px) {
    .page-head:has(.form-header-row) {
        position: relative !important;
        padding-right: 86px !important;
    }

    .page-head:has(.form-header-row) .form-header-row .form-close-btn {
        position: absolute !important;
        right: 0 !important;
        top: 10px !important;
        margin: 0 !important;
    }
}

@media (max-width: 760px) {
    .form-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .form-header-row h1 {
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .form-header-row .form-close-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 6px 0 0 auto !important;
    }

    .form-header-row .form-close-btn svg {
        width: 19px !important;
        height: 19px !important;
    }
}


/* ===== FIX DEFINITIVO BOTÓN CERRAR: web derecha + SVG visible ===== */
.page-head-report {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: start !important;
    gap: 24px !important;
    width: 100% !important;
    margin-bottom: 34px !important;
}

.page-head-report .report-title-copy {
    min-width: 0 !important;
}

.page-head-report .report-title-copy h1 {
    margin: 0 0 18px !important;
}

.page-head-report .form-close-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 92px 0 0 auto !important; /* alinea visualmente a la derecha del header, debajo del nav */
    box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
}

.page-head-report .form-close-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    color: #ffffff !important;
    stroke: currentColor !important;
    fill: none !important;
    overflow: visible !important;
}

.page-head-report .form-close-btn svg path {
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    fill: none !important;
}

.page-head-report .form-close-btn:hover {
    background: #2b2b2b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

@media (min-width: 761px) {
    .page-head-report {
        grid-template-columns: minmax(0, 1fr) 58px !important;
    }

    .page-head-report .form-close-btn {
        justify-self: end !important;
        align-self: start !important;
    }
}

@media (max-width: 760px) {
    .page-head-report {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        gap: 12px !important;
        margin-bottom: 28px !important;
        align-items: start !important;
    }

    .page-head-report .report-title-copy h1 {
        margin: 0 0 16px !important;
    }

    .page-head-report .form-close-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 42px 0 0 auto !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.16) !important;
    }

    .page-head-report .form-close-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}


/* =========================================================
   EQUIPOS DE MERCADERISTAS
   ========================================================= */
.user-team-field {
    grid-column: 1 / -1 !important;
}

.team-checkbox-grid .chain-check {
    min-height: 52px !important;
    padding: 10px 14px !important;
}

.team-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.team-tags-list span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.team-form-actions,
.team-actions-line {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.team-actions-line form {
    margin: 0 !important;
}

.report-owner {
    display: block !important;
    font-size: 12px !important;
    color: #777 !important;
    margin-top: 3px !important;
    font-weight: 700 !important;
}

@media (max-width: 760px) {
    .team-form-actions button,
    .team-form-actions .btn {
        width: 100% !important;
    }
}


/* ===== FIX ESPACIADO 'CREADO POR' ===== */
.report-owner {
    margin-left: 12px !important;
    display: inline-block !important;
}


/* ===== IGUALAR TIPOGRAFÍA REGISTRADO / CREADO POR ===== */
.report-owner {
    margin-left: 12px !important;
    display: inline-block !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}


/* ===== FIX REAL: 'Creado por' igual a 'Registrado' ===== */
.grouped-report-item .report-date,
.grouped-report-item .report-owner {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #8a8a8a !important;
    font-weight: 650 !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
}

.grouped-report-item .report-owner {
    display: inline-block !important;
    margin-left: 18px !important;
    margin-top: 0 !important;
    vertical-align: baseline !important;
}

/* Contenedor de info para que Registrado y Creado por se comporten como una misma línea */
.grouped-report-item .grouped-info {
    display: block !important;
}

.grouped-report-item .grouped-info .report-period-title {
    display: block !important;
    margin-bottom: 8px !important;
}

/* Móvil: si no entra, baja ordenado a una segunda línea */
@media (max-width: 760px) {
    .grouped-report-item .report-owner {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
}


/* ===== FIX ALIGNMENT REGISTRADO / CREADO POR ===== */
.grouped-report-item .report-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.grouped-report-item .report-date,
.grouped-report-item .report-owner {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* móvil */
@media (max-width: 760px){
    .grouped-report-item .report-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}


/* ===== FIX DEFINITIVO WEB: alineación real de fecha y creador ===== */
.grouped-report-item .grouped-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.grouped-report-item .report-meta-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 18px !important;
    
    white-space: nowrap !important;
    margin-top: 6px !important;
}

.grouped-report-item .report-date,
.grouped-report-item .report-owner {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #8a8a8a !important;
    font-weight: 650 !important;
    font-family: inherit !important;
    vertical-align: baseline !important;
}

@media (max-width: 760px) {
    .grouped-report-item .report-meta-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        white-space: normal !important;
    }
}


/* ===== FIX FINAL PROFESIONAL: alineación tipo columnas ===== */
.grouped-report-item .report-meta-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
}

.grouped-report-item .report-date {
    justify-self: start !important;
}

.grouped-report-item .report-owner {
    justify-self: end !important;
    text-align: right !important;
}

/* Esto asegura alineación perfecta entre filas */
.grouped-report-item .grouped-info {
    width: 100% !important;
}

/* móvil */
@media (max-width: 760px){
    .grouped-report-item .report-meta-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .grouped-report-item .report-owner {
        text-align: left !important;
    }
}


/* ===== FIX DEFINITIVO: alineación de filas en reportes ===== */
/* Cada reporte se organiza en columnas: semana | periodo/meta | estado | botón */
.grouped-report-item {
    display: grid !important;
    grid-template-columns: 320px minmax(520px, 1fr) auto auto !important;
    align-items: start !important;
    column-gap: 28px !important;
}

/* Semana y periodo usan la misma estructura vertical */
.grouped-report-item .grouped-week,
.grouped-report-item .grouped-info {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    justify-content: start !important;
    row-gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* El helper de semana tiene un div interno */
.grouped-report-item .grouped-week .week-cell {
    display: grid !important;
    grid-template-rows: auto auto !important;
    row-gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Primera línea: Semana 1 y Abril 2026 */
.grouped-report-item .week-title,
.grouped-report-item .report-period-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #262626 !important;
}

/* Segunda línea: rango, registrado y creado por */
.grouped-report-item .week-range,
.grouped-report-item .report-date,
.grouped-report-item .report-owner {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    color: #8a8a8a !important;
    font-family: inherit !important;
    vertical-align: baseline !important;
}

/* Registrado y Creado por van en una sola línea, alineados con el rango */
.grouped-report-item .report-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Anula alineaciones previas que empujaban Creado por a la derecha */
.grouped-report-item .report-owner {
    justify-self: auto !important;
    text-align: left !important;
}

/* Estado y botón centrados verticalmente respecto al bloque */
.grouped-report-item .status-badge,
.grouped-report-item > .btn {
    align-self: center !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .grouped-report-item {
        grid-template-columns: 240px minmax(360px, 1fr) auto auto !important;
        column-gap: 20px !important;
    }
}

@media (max-width: 760px) {
    .grouped-report-item {
        grid-template-columns: 1fr !important;
        row-gap: 14px !important;
    }

    .grouped-report-item .grouped-week,
    .grouped-report-item .grouped-info,
    .grouped-report-item .grouped-week .week-cell {
        row-gap: 6px !important;
    }

    .grouped-report-item .report-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        white-space: normal !important;
    }

    .grouped-report-item .status-badge,
    .grouped-report-item > .btn {
        align-self: stretch !important;
    }
}


/* ===== FORCE ALIGNMENT (SOBRESCRIBE TODO) ===== */
.grouped-report-item {
    display: grid !important;
    grid-template-columns: 260px 1fr auto auto !important;
    align-items: center !important;
}

.grouped-report-item .grouped-week {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.grouped-report-item .grouped-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.grouped-report-item .grouped-info .report-meta-row {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.grouped-report-item .week-title,
.grouped-report-item .report-period-title {
    font-weight: 800 !important;
}

.grouped-report-item .week-range,
.grouped-report-item .report-date,
.grouped-report-item .report-owner {
    font-size: 13px !important;
    color: #8a8a8a !important;
    margin: 0 !important;
}


/* =========================================================
   ALINEACIÓN REAL DE REPORTES - ESTRUCTURA 2 FILAS
   ========================================================= */
.report-item-aligned {
    display: block !important;
    padding: 22px 28px !important;
}

/* Ambas filas usan exactamente las mismas columnas */
.report-item-aligned .report-row {
    display: grid !important;
    grid-template-columns: 260px minmax(360px, 1fr) auto auto !important;
    column-gap: 28px !important;
    align-items: center !important;
    width: 100% !important;
}

.report-item-aligned .report-row-top {
    margin-bottom: 8px !important;
}

.report-item-aligned .report-col {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Columna 1: Semana + rango */
.report-item-aligned .report-col-week {
    justify-self: start !important;
}

/* Columna 2: Periodo + metadatos */
.report-item-aligned .report-col-period,
.report-item-aligned .report-col-meta {
    justify-self: start !important;
}

/* Columna 3: Estado */
.report-item-aligned .report-col-status {
    justify-self: end !important;
}

/* Columna 4: Acción */
.report-item-aligned .report-col-action {
    justify-self: end !important;
}

/* Textos primera fila */
.report-item-aligned .week-title,
.report-item-aligned .report-period-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #262626 !important;
}

/* Textos segunda fila */
.report-item-aligned .week-range,
.report-item-aligned .report-date,
.report-item-aligned .report-owner {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    color: #8a8a8a !important;
    font-family: inherit !important;
}

/* Registrado + creado por, alineados en la misma segunda fila */
.report-item-aligned .report-col-meta {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    white-space: nowrap !important;
}

/* Evitar estilos anteriores */
.report-item-aligned .grouped-week,
.report-item-aligned .grouped-info,
.report-item-aligned .report-meta-row {
    all: unset !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .report-item-aligned .report-row {
        grid-template-columns: 220px minmax(300px, 1fr) auto auto !important;
        column-gap: 20px !important;
    }
}

@media (max-width: 760px) {
    .report-item-aligned {
        padding: 18px !important;
    }

    .report-item-aligned .report-row {
        grid-template-columns: 1fr !important;
        row-gap: 8px !important;
    }

    .report-item-aligned .report-row-top {
        margin-bottom: 8px !important;
    }

    .report-item-aligned .report-col-status,
    .report-item-aligned .report-col-action,
    .report-item-aligned .report-col-period,
    .report-item-aligned .report-col-meta,
    .report-item-aligned .report-col-week {
        justify-self: stretch !important;
    }

    .report-item-aligned .report-col-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        white-space: normal !important;
    }

    .report-item-aligned .report-col-action .btn {
        width: 100% !important;
    }
}


/* ===== REDUCIR ESPACIADO ENTRE TEXTOS ===== */
.report-item-aligned {
    padding: 14px 20px !important;
}

.report-item-aligned .report-row-top {
    margin-bottom: 2px !important;
}

.report-item-aligned .report-row {
    row-gap: 2px !important;
}

.report-item-aligned .week-title,
.report-item-aligned .report-period-title {
    margin-bottom: 2px !important;
}

.report-item-aligned .report-col-meta {
    gap: 14px !important;
}

.report-item-aligned .week-range,
.report-item-aligned .report-date,
.report-item-aligned .report-owner {
    line-height: 1.2 !important;
}

/* móvil */
@media (max-width: 760px){
    .report-item-aligned .report-col-meta {
        gap: 2px !important;
    }
}


/* ===== ULTRA COMPACTO ===== */
.report-item-aligned {
    padding: 10px 16px !important;
}

.report-item-aligned .report-row-top {
    margin-bottom: 0px !important;
}

.report-item-aligned .report-row {
    row-gap: 0px !important;
}

.report-item-aligned .week-title,
.report-item-aligned .report-period-title {
    margin-bottom: 0px !important;
}

.report-item-aligned .report-col-meta {
    gap: 8px !important;
}

.report-item-aligned .week-range,
.report-item-aligned .report-date,
.report-item-aligned .report-owner {
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* móvil aún más compacto */
@media (max-width: 760px){
    .report-item-aligned {
        padding: 8px 12px !important;
    }
    .report-item-aligned .report-col-meta {
        gap: 2px !important;
    }
}


/* ===== ESPACIADO EXTREMO (ALTURA MINIMA) ===== */
.report-item-aligned {
    padding: 8px 14px !important;
}

.report-item-aligned .report-row {
    row-gap: 0px !important;
}

.report-item-aligned .week-title,
.report-item-aligned .report-period-title {
    line-height: 1.05 !important;
    margin: 0 !important;
}

.report-item-aligned .week-range,
.report-item-aligned .report-date,
.report-item-aligned .report-owner {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.report-item-aligned .report-col-meta {
    gap: 6px !important;
}

/* elimina cualquier margen heredado */
.report-item-aligned span,
.report-item-aligned strong {
    margin: 0 !important;
    padding: 0 !important;
}

/* móvil */
@media (max-width: 760px){
    .report-item-aligned {
        padding: 6px 10px !important;
    }
}


/* ===== AJUSTE FINO: REDUCIR ESPACIO ENTRE FILAS ===== */
.report-item-aligned .report-row-top {
    margin-bottom: -4px !important;
}

.report-item-aligned .report-row-bottom {
    margin-top: -4px !important;
}

/* Asegurar que los textos no generen altura extra */
.report-item-aligned .week-title,
.report-item-aligned .report-period-title {
    line-height: 1 !important;
}

.report-item-aligned .week-range,
.report-item-aligned .report-date,
.report-item-aligned .report-owner {
    line-height: 1 !important;
}

/* Elimina padding interno oculto */
.report-item-aligned .report-col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   ADMIN REPORTES: EDITAR / ELIMINAR
   ========================================================= */
.report-actions-admin,
.report-detail-admin-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.report-actions-admin form,
.report-detail-admin-actions form {
    margin: 0 !important;
    display: inline-flex !important;
}

.report-actions-admin .btn,
.report-actions-admin button,
.report-detail-admin-actions .btn,
.report-detail-admin-actions button,
.report-detail-admin-actions .btn-back {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.admin-report-edit-form h2 {
    margin-top: 24px !important;
}

.edit-products-list {
    margin-bottom: 22px !important;
}

.report-edit-summary {
    display: grid !important;
    gap: 6px !important;
}

@media (max-width: 760px) {
    .report-actions-admin,
    .report-detail-admin-actions {
        justify-content: stretch !important;
    }

    .report-actions-admin .btn,
    .report-actions-admin button,
    .report-detail-admin-actions .btn,
    .report-detail-admin-actions button,
    .report-detail-admin-actions .btn-back {
        width: 100% !important;
    }
}


/* =========================================================
   TOOLTIP CÍRCULOS SEMANALES
   ========================================================= */
.week-dot {
    position: relative !important;
    overflow: visible !important;
}

.week-dot[data-tooltip]::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(4px) !important;
    background: #111111 !important;
    color: #ffffff !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}

.week-dot[data-tooltip]::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 4px) !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-top-color: #111111 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

.week-dot[data-tooltip]:hover::after,
.week-dot[data-tooltip]:hover::before,
.week-dot[data-tooltip]:focus::after,
.week-dot[data-tooltip]:focus::before,
.week-dot[data-tooltip]:active::after,
.week-dot[data-tooltip]:active::before {
    opacity: 1 !important;
    visibility: visible !important;
}

.week-dot[data-tooltip]:hover::after,
.week-dot[data-tooltip]:focus::after,
.week-dot[data-tooltip]:active::after {
    transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 760px) {
    .week-dot[data-tooltip]::after {
        font-size: 11px !important;
        max-width: 220px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}


/* ===== MEJORA BADGE ESTADO (PENDIENTE, ETC) ===== */
.badge,
.status-badge,
.report-status {
    padding: 6px 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    line-height: 1 !important;
}



/* ===== BADGE MÁS AIRE (MEJORADO) ===== */
.badge,
.status-badge,
.report-status {
    padding: 6px 18px !important; /* más aire horizontal */
    letter-spacing: 0.2px !important;
}



/* ===== FIX REAL BADGE ESTADO EN MIS REPORTES ===== */
.report-accordion-list .status-badge,
.grouped-report-list .status-badge,
.report-item-aligned .status-badge,
.grouped-report-item .status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 112px !important;
    width: auto !important;
    min-height: 42px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Asegura que la columna del estado tenga espacio suficiente */
.report-item-aligned .report-col-status,
.grouped-report-item .report-col-status,
.grouped-report-item > .status-badge {
    min-width: 120px !important;
}

/* Móvil */
@media (max-width: 760px) {
    .report-accordion-list .status-badge,
    .grouped-report-list .status-badge,
    .report-item-aligned .status-badge,
    .grouped-report-item .status-badge {
        min-width: 100% !important;
        min-height: 44px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* ===== AJUSTE EXACTO SOLICITADO ===== */
@media (max-width: 760px) {

    /* primer texto */
    .report-item-aligned .week-range {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    /* texto del medio sin cambios */
    .report-item-aligned .report-date {
        margin: 0 !important;
    }

    /* ultimo texto */
    .report-item-aligned .report-owner {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }

}


/* ===== AJUSTE CORRECTO SOLICITADO ===== */
@media (max-width: 760px) {

    /* separación botón "Ver" con el texto */
    .report-item-aligned .report-col-action .btn {
        margin-bottom: 5px !important;
    }

    /* alinear "Pendiente" a la izquierda */
    .report-item-aligned .status-badge {
        justify-content: flex-start !important;
        text-align: left !important;
    }

}


/* ===== ALINEACION VERTICAL PENDIENTE CON ABRIL ===== */
@media (max-width: 760px) {

    .report-item-aligned .report-row-top {
        align-items: center !important;
    }

    .report-item-aligned .status-badge {
        align-self: center !important;
        margin-top: 0 !important;
    }

}


/* ===== BADGE PENDIENTE FINAL (MÓVIL) ===== */
@media (max-width: 760px) {

    .report-item-aligned .status-badge {
        justify-content: center !important;
        text-align: center !important;
        background: #FFD54F !important; /* amarillo */
        color: #000 !important;
        margin-top: 5px !important;
        margin-bottom: 50px !important;
    }

}


/* ===== AJUSTE FINO MARGEN BADGE (MÓVIL) ===== */
@media (max-width: 760px) {
    .report-item-aligned .status-badge {
        margin-top: 5px !important;
        margin-bottom: 16px !important; /* reducido desde 50px */
    }
}


/* ===== AJUSTE FINAL EXACTO ===== */
@media (max-width: 760px) {

    /* Badge pendiente */
    .report-item-aligned .status-badge {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Botón Ver */
    .report-item-aligned .report-col-action .btn {
        margin-bottom: 10px !important;
    }

}


/* ===== COLORES POR ESTADO ===== */

/* Pendiente */
.status-pendiente {
    background: #FFD54F !important;
    color: #000 !important;
}

/* Aprobado */
.status-aprobado {
    background: #4CAF50 !important;
    color: #fff !important;
}

/* Rechazado */
.status-rechazado {
    background: #F44336 !important;
    color: #fff !important;
}



/* =========================================================
   EDICIÓN DE REPORTES PARA MERCADERISTAS
   ========================================================= */
.user-report-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}

.user-report-actions .btn {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

.current-photos {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 160px)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.current-photos a {
    display: block !important;
    border-radius: 18px !important;
    
    border: 1px solid var(--line) !important;
    background: #fff !important;
    box-shadow: var(--shadow-soft) !important;
}

.current-photos img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    display: block !important;
}

@media (max-width: 760px) {
    .user-report-actions {
        justify-content: stretch !important;
    }

    .user-report-actions .btn {
        width: 100% !important;
    }

    .current-photos {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   EDICIÓN REPORTE: ELIMINAR FOTOS
   ========================================================= */
.current-photos-edit {
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px)) !important;
}

.current-photo-item {
    display: block !important;
    margin: 0 !important;
}

.current-photo-item a {
    display: block !important;
}

.delete-photo-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: #fff7f4 !important;
    color: #b42318 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.delete-photo-option input {
    width: 16px !important;
    height: 16px !important;
    accent-color: #d71920 !important;
}

/* ===== EDIT PHOTO: OVERLAY DELETE BUTTON ===== */
.photo-edit-wrap{
  position: relative !important;
  border-radius: 18px !important;
  
  border: 1px solid var(--line) !important;
  background:#fff !important;
  box-shadow: var(--shadow-soft) !important;
}
.photo-edit-wrap img{
  width:100% !important;
  height:120px !important;
  object-fit:cover !important;
  display:block !important;
}
.photo-delete-input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.photo-delete-btn{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  width:32px !important;
  height:32px !important;
  border-radius:999px !important;
  background:#111 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px rgba(0,0,0,.2) !important;
}
.photo-delete-btn svg{ display:block; }

.photo-delete-input:checked + .photo-delete-btn{
  background:#d71920 !important;
}
.photo-delete-input:checked ~ a img{
  filter: grayscale(0.8) brightness(0.6) !important;
}


/* ===== FOTO: ELIMINAR SIN ENCOGER ===== */
.photo-edit-wrap {
  aspect-ratio: auto !important;
  min-height: 120px !important;
}

.photo-edit-wrap a {
  display: block !important;
  width: 100% !important;
  height: 120px !important;
}

.photo-edit-wrap img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  transform: none !important;
}

.photo-delete-btn {
  border: 0 !important;
  padding: 0 !important;
  min-height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  transform: none !important;
}

.photo-delete-btn:hover,
.photo-delete-btn:focus,
.photo-delete-btn:active {
  transform: none !important;
  background: #d71920 !important;
}

.photo-marked-delete {
  opacity: 0 !important;
  transform: scale(.96) !important;
  transition: opacity .12s ease, transform .12s ease !important;
}


/* ===== ELIMINACIÓN REAL DE FOTO ===== */
.photo-delete-btn.is-loading {
  opacity: .65 !important;
  cursor: wait !important;
}

.photo-marked-delete {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity .16s ease !important;
}

.photo-edit-wrap img {
  transform: none !important;
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
}


/* ===== FIX BOTONES CENTRADOS VERSION WEB ===== */
.report-item-aligned .report-col-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    gap: 8px !important;
}

.report-item-aligned {
    display: flex !important;
    align-items: stretch !important;
}



/* ===== FIX FINAL LAYOUT (NO DESCALIBRAR) ===== */

/* NO tocar estructura principal */
.report-item-aligned {
    display: block !important; /* vuelve a su flujo normal */
}

/* Solo alinear los botones */
.report-item-aligned .report-col-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: auto !important;
}

/* Asegurar que no floten encima */
.report-item-aligned .btn {
    position: relative !important;
    top: auto !important;
}



/* ===== MARGEN SUPERIOR BOTONES VER / EDITAR ===== */
.report-item-aligned .report-col-action .btn {
    margin-top: 10px !important;
}



/* ===== MARGEN SUPERIOR BOTONES VER / EDITAR (14px) ===== */
.report-item-aligned .report-col-action .btn {
    margin-top: 14px !important;
}



/* ===== AJUSTE FINAL 16px ===== */

/* Botones */
.report-item-aligned .report-col-action .btn {
    margin-top: 16px !important;
}

/* Badge pendiente */
.report-item-aligned .status-badge {
    margin-top: 16px !important;
}



/* ===== AJUSTE FINAL 18px ===== */

/* Botones */
.report-item-aligned .report-col-action .btn {
    margin-top: 18px !important;
}

/* Badge pendiente */
.report-item-aligned .status-badge {
    margin-top: 18px !important;
}



/* ===== REVERTIR BOTONES EN MOVIL ===== */
@media (max-width: 760px) {

    .report-item-aligned .report-col-action .btn {
        margin-top: 0 !important; /* volver a estado original */
    }

    .report-item-aligned .status-badge {
        margin-top: 0 !important; /* restaurar badge */
    }

}



/* ===== FIX FINAL BOTONES VER / EDITAR EN MÓVIL ===== */
@media (max-width: 760px) {

    .report-item-aligned .report-col-action {
        width: 100% !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        display: block !important;
        margin-top: 10px !important;
    }

    .report-item-aligned .user-report-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .report-item-aligned .user-report-actions .btn,
    .report-item-aligned .report-col-action .btn {
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .report-item-aligned .status-badge {
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}


/* ===== MARGEN INFERIOR BOTÓN EDITAR (MÓVIL) ===== */
@media (max-width: 760px) {
    .report-item-aligned .user-report-actions .btn:last-child {
        margin-bottom: 5px !important;
    }
}



/* ===== MARGEN INFERIOR BOTÓN EDITAR (MÓVIL 10px) ===== */
@media (max-width: 760px) {
    .report-item-aligned .user-report-actions .btn:last-child {
        margin-bottom: 10px !important;
    }
}



/* =========================================================
   ALERTAS INTELIGENTES
   ========================================================= */
.nav-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    margin-left: 6px !important;
    border-radius: 999px !important;
    background: #d71920 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.alert-kpi-grid .card {
    margin-bottom: 0 !important;
}

.alerts-config-form {
    display: grid !important;
    gap: 14px !important;
}

.alert-config-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    background: #fff !important;
}

.alert-switch {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 17px !important;
}

.alert-switch input {
    width: 20px !important;
    height: 20px !important;
    accent-color: #d71920 !important;
}

.config-no-value {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    width: 100% !important;
    border: 1px dashed var(--line) !important;
    border-radius: 16px !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
}

.alerts-list {
    display: grid !important;
    gap: 14px !important;
}

.alert-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: #fff !important;
}

.alert-item strong {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}

.alert-item p {
    margin: 0 !important;
    color: var(--muted) !important;
}

.alert-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    color: #fff !important;
}

.alert-level-critical {
    border-color: #ffd0d0 !important;
    background: #fff6f6 !important;
}
.alert-level-critical .alert-icon {
    background: #f44336 !important;
}

.alert-level-warning {
    border-color: #ffe9a8 !important;
    background: #fffaf0 !important;
}
.alert-level-warning .alert-icon {
    background: #ffd54f !important;
    color: #111 !important;
}

.alert-level-info {
    border-color: #cfe1ff !important;
    background: #f4f8ff !important;
}
.alert-level-info .alert-icon {
    background: #2f7df6 !important;
}

.alert-item.is-seen {
    opacity: .65 !important;
}

.alert-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.alert-meta span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.8) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #555 !important;
}

.alert-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.alert-actions form {
    margin: 0 !important;
}

@media (max-width: 760px) {
    .alert-config-row {
        grid-template-columns: 1fr !important;
    }

    .alert-item {
        grid-template-columns: 1fr !important;
    }

    .alert-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .alert-actions,
    .alert-actions .btn,
    .alert-actions button,
    .alert-item > .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ===== X ELIMINA FOTO REAL ===== */
.photo-delete-btn {
  border: 0 !important;
  padding: 0 !important;
  min-width: 32px !important;
  width: 32px !important;
  min-height: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
  transform: none !important;
  z-index: 5 !important;
}

.photo-delete-btn:hover,
.photo-delete-btn:focus,
.photo-delete-btn:active {
  transform: none !important;
  background: #d71920 !important;
}

.photo-delete-btn.is-loading {
  opacity: .7 !important;
  cursor: wait !important;
}

.photo-is-deleting {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity .16s ease !important;
}

.photo-edit-wrap img {
  transform: none !important;
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
}

.photo-edit-wrap a {
  display: block !important;
  width: 100% !important;
  height: 120px !important;
}


/* Ocultar Nuevo Reporte en móvil */
@media (max-width: 768px) {
  .menu-new-report {
    display: none !important;
  }
}


/* ===== RESTORE ALERTAS VISUALES ===== */
.alerts-list {
    display: grid !important;
    gap: 14px !important;
}

.alert-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    transition: opacity .2s ease, filter .2s ease, background .2s ease !important;
}

.alert-item strong {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}

.alert-item p {
    margin: 0 !important;
    color: var(--muted) !important;
}

.alert-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    color: #fff !important;
}

.alert-level-critical {
    border-color: #ffd0d0 !important;
    background: #fff6f6 !important;
}
.alert-level-critical .alert-icon {
    background: #f44336 !important;
}

.alert-level-warning {
    border-color: #ffe9a8 !important;
    background: #fffaf0 !important;
}
.alert-level-warning .alert-icon {
    background: #ffd54f !important;
    color: #111 !important;
}

.alert-level-info {
    border-color: #cfe1ff !important;
    background: #f4f8ff !important;
}
.alert-level-info .alert-icon {
    background: #2f7df6 !important;
}

.alert-item.is-seen {
    opacity: .45 !important;
    filter: grayscale(.45) !important;
    background: #f3f3f3 !important;
}

.alert-item.is-seen .alert-actions {
    display: none !important;
}

.alert-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.alert-meta span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.8) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #555 !important;
}

.alert-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

@media (max-width: 760px) {
    .alert-item {
        grid-template-columns: 1fr !important;
    }

    .alert-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .alert-actions,
    .alert-actions .btn,
    .alert-item > .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ===== FIX ALERTAS PHP CLEAN FINAL ===== */
.alerts-list {
    display: grid !important;
    gap: 14px !important;
}

.alert-item {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    transition: opacity .2s ease, filter .2s ease, background .2s ease !important;
}

.alert-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
}

.alert-level-critical {
    border-color: #ffd0d0 !important;
    background: #fff6f6 !important;
}
.alert-level-critical .alert-icon {
    background: #f44336 !important;
    color: #fff !important;
}

.alert-level-warning {
    border-color: #ffe9a8 !important;
    background: #fffaf0 !important;
}
.alert-level-warning .alert-icon {
    background: #ffd54f !important;
    color: #111 !important;
}

.alert-level-info {
    border-color: #cfe1ff !important;
    background: #f4f8ff !important;
}
.alert-level-info .alert-icon {
    background: #2f7df6 !important;
    color: #fff !important;
}

.alert-item.is-seen {
    opacity: .45 !important;
    filter: grayscale(.45) !important;
    background: #f3f3f3 !important;
}

.alert-item.is-seen .alert-actions {
    display: none !important;
}

.alert-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.alert-meta span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.8) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #555 !important;
}

.alert-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

@media (max-width: 760px) {
    .alert-item {
        grid-template-columns: 1fr !important;
    }

    .alert-actions,
    .alert-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ===== ALERTAS VER OCULTAS ===== */
.alert-view-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

@media (max-width: 760px) {
    .alert-view-toggle,
    .alert-view-toggle .btn {
        width: 100% !important;
    }
}


/* ===== FIX TOGGLE ALERTAS OCULTAS / ACTIVAS ===== */
.alert-view-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.alert-item.is-seen {
    opacity: 0.48 !important;
    filter: grayscale(0.4) !important;
}

.alert-item.is-seen .alert-actions {
    display: flex !important;
}

@media (max-width: 760px) {
    .alert-view-toggle,
    .alert-view-toggle .btn {
        width: 100% !important;
    }

    .alert-actions,
    .alert-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* =========================================================
   DASHBOARD ADMIN PRO FINAL
   ========================================================= */
.dashboard-pro {
    display: grid !important;
    gap: 22px !important;
}

.dash-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: end !important;
}

.dash-hero h1 {
    margin-bottom: 6px !important;
}

.dash-filters {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    padding: 12px !important;
    box-shadow: var(--shadow-soft) !important;
}

.dash-filters select {
    min-width: 150px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
}

.dash-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.dash-kpi {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8fb 100%) !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    padding: 22px !important;
    box-shadow: var(--shadow-soft) !important;
    position: relative !important;
    
}

.dash-kpi::after {
    content: "" !important;
    position: absolute !important;
    right: -30px !important;
    top: -30px !important;
    width: 92px !important;
    height: 92px !important;
    border-radius: 999px !important;
    background: rgba(215,25,32,.08) !important;
}

.dash-kpi span {
    display: block !important;
    color: var(--muted) !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.dash-kpi strong {
    display: block !important;
    font-size: 38px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}

.dash-kpi small {
    display: block !important;
    margin-top: 9px !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
}

.dash-kpi-alert {
    border-left: 6px solid #d71920 !important;
}

.dash-grid-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr) !important;
    gap: 18px !important;
}

.dash-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.dash-card {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    padding: 22px !important;
    box-shadow: var(--shadow-soft) !important;
}

.dash-card h2 {
    margin-bottom: 5px !important;
}

.dash-card p {
    margin-top: 0 !important;
    color: var(--muted) !important;
}

.dash-card canvas {
    max-height: 340px !important;
}

.dash-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

.dash-list-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    background: #fafafa !important;
}

.dash-list-row strong {
    display: block !important;
    line-height: 1.2 !important;
}

.dash-list-row span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
}

.dash-list-row b {
    min-width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #111 !important;
    color: #fff !important;
}

.dash-empty {
    padding: 18px !important;
    border: 1px dashed var(--line) !important;
    border-radius: 18px !important;
    color: var(--muted) !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.dash-table-wrap {
    overflow-x: auto !important;
}

.dash-table th,
.dash-table td {
    white-space: nowrap !important;
}

@media (max-width: 1000px) {
    .dash-hero,
    .dash-grid-main,
    .dash-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dash-filters {
        justify-content: stretch !important;
    }

    .dash-filters select,
    .dash-filters .btn,
    .dash-filters button {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .dash-kpis {
        grid-template-columns: 1fr !important;
    }

    .dash-kpi strong {
        font-size: 34px !important;
    }
}


/* =========================================================
   DASHBOARD PRO - FILTROS MÁS SUTILES
   ========================================================= */
.dashboard-pro .dash-hero {
    align-items: center !important;
}

.dashboard-pro .dash-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 760px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.04) !important;
}

.dashboard-pro .dash-filters select {
    min-width: 120px !important;
    width: auto !important;
    max-width: 180px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 34px 0 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background-size: 12px !important;
}

.dashboard-pro .dash-filters select[name="cadena_id"],
.dashboard-pro .dash-filters select[name="usuario_id"] {
    min-width: 160px !important;
    max-width: 210px !important;
}

.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 42px !important;
}

@media (max-width: 1000px) {
    .dashboard-pro .dash-filters {
        width: 100% !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }

    .dashboard-pro .dash-filters select {
        flex: 1 1 160px !important;
        max-width: none !important;
    }

    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-filters .btn {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 640px) {
    .dashboard-pro .dash-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .dashboard-pro .dash-filters select,
    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-filters .btn {
        width: 100% !important;
        max-width: none !important;
    }

    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-filters .btn {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   FIX DROPDOWN ARROW (SIN BLOQUES GRISES)
   ========================================================= */
.dashboard-pro .dash-filters select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background-color: #fff !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;

    padding-right: 36px !important;
}


/* =========================================================
   DUPLICATE PHOTO EVIDENCE MODAL
   ========================================================= */
.duplicate-photo-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

.duplicate-photo-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.48) !important;
    backdrop-filter: blur(4px) !important;
}

.duplicate-photo-dialog {
    position: relative !important;
    z-index: 2 !important;
    width: min(980px, 100%) !important;
    max-height: 92vh !important;
    overflow: auto !important;
    background: #fff !important;
    border-radius: 28px !important;
    padding: 24px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.25) !important;
}

.duplicate-photo-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.duplicate-photo-head h2 {
    margin: 0 !important;
}

.duplicate-photo-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: #111 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.duplicate-photo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.duplicate-photo-grid figure {
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    
    background: #fafafa !important;
}

.duplicate-photo-grid img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    display: block !important;
}

.duplicate-photo-grid figcaption {
    padding: 14px 16px !important;
    display: grid !important;
    gap: 5px !important;
}

.duplicate-photo-grid figcaption strong {
    font-size: 16px !important;
}

.duplicate-photo-grid figcaption span {
    color: var(--muted) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    .duplicate-photo-dialog {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .duplicate-photo-grid {
        grid-template-columns: 1fr !important;
    }

    .duplicate-photo-grid img {
        height: 260px !important;
    }
}


/* =========================================================
   DASHBOARD PRO V2 - GRÁFICAS Y MÉTRICAS AVANZADAS
   ========================================================= */
.dash-kpis-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.dash-grid-3 {
    display: grid !important;
    grid-template-columns: .8fr 1fr .9fr !important;
    gap: 18px !important;
}

.dashboard-pro .dash-card canvas {
    width: 100% !important;
    min-height: 280px !important;
}

.dashboard-pro #chartAlertas,
.dashboard-pro #chartCalidad {
    max-height: 300px !important;
}

.dashboard-pro #chartTiendasCriticas,
.dashboard-pro #chartUsuarios {
    min-height: 330px !important;
}

.dash-insights {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.dash-insights div {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: #fafafa !important;
}

.dash-insights strong {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.dash-insights span {
    color: var(--muted) !important;
    font-weight: 850 !important;
    font-size: 12px !important;
}

@media (max-width: 1200px) {
    .dash-kpis-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .dash-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .dash-kpis-6 {
        grid-template-columns: 1fr !important;
    }

    .dash-insights {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD EXPECTED VS REAL STABLE
   ========================================================= */
.dashboard-pro #chartSemanas {
    min-height: 360px !important;
}

.dashboard-pro .dash-card-large {
    min-height: 460px !important;
}


/* =========================================================
   DASHBOARD - ALINEACIÓN FINAL DE FILTROS
   ========================================================= */
.dashboard-pro .dash-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    
    gap: 10px !important;
}

.dashboard-pro .dash-filters select {
    height: 54px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 54px !important;
    margin: 0 !important;
}

.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    height: 54px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

@media (max-width: 1000px) {
    .dashboard-pro .dash-filters {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .dashboard-pro .dash-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-filters .btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}


/* =========================================================
   DASHBOARD DELAY ANALYTICS PRO
   ========================================================= */
.dash-delay-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.dash-delay-card {
    background: #111 !important;
    color: #fff !important;
    border-radius: 24px !important;
    padding: 22px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.14) !important;
}

.dash-delay-card span {
    display: block !important;
    opacity: .72 !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.dash-delay-card strong {
    display: block !important;
    font-size: 34px !important;
    line-height: 1 !important;
}

.dash-delay-card small {
    display: block !important;
    margin-top: 9px !important;
    opacity: .72 !important;
    font-weight: 800 !important;
}

.dash-delay-chart-card {
    min-height: 560px !important;
}

.dashboard-pro #chartTardanzaUsuarios {
    min-height: 340px !important;
    max-height: 380px !important;
}

.dash-delay-table-wrap {
    margin-top: 18px !important;
    overflow-x: auto !important;
}

.dash-delay-table th,
.dash-delay-table td {
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .dash-delay-summary {
        grid-template-columns: 1fr !important;
    }

    .dash-delay-chart-card {
        min-height: auto !important;
    }
}


/* =========================================================
   PDF DASHBOARD EXECUTIVE PRO
   ========================================================= */
.pdf-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.pdf-report {
    background: #f3f4f6 !important;
    padding: 24px !important;
    border-radius: 28px !important;
}

.pdf-cover {
    min-height: 190px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    background: linear-gradient(135deg, #111 0%, #2c2c2c 100%) !important;
    color: #fff !important;
    border-radius: 28px !important;
    padding: 34px !important;
    margin-bottom: 18px !important;
}

.pdf-cover h1 {
    color: #fff !important;
    font-size: 38px !important;
    margin: 6px 0 !important;
}

.pdf-cover .eyebrow,
.pdf-cover p,
.pdf-cover span {
    color: rgba(255,255,255,.75) !important;
}

.pdf-cover-meta {
    text-align: right !important;
    display: grid !important;
    gap: 6px !important;
}

.pdf-section {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    margin-bottom: 18px !important;
    break-inside: avoid !important;
}

.pdf-section h2 {
    margin-top: 0 !important;
}

.pdf-kpis {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    gap: 10px !important;
}

.pdf-kpis-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    margin-bottom: 16px !important;
}

.pdf-kpis div {
    background: #f7f7f8 !important;
    border-radius: 16px !important;
    padding: 14px !important;
}

.pdf-kpis span {
    display: block !important;
    color: var(--muted) !important;
    font-weight: 850 !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

.pdf-kpis strong {
    font-size: 24px !important;
}

.pdf-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
}

.pdf-report canvas {
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    margin: 10px 0 16px !important;
}

.pdf-report table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
}

.pdf-report th,
.pdf-report td {
    border-bottom: 1px solid #eee !important;
    padding: 8px !important;
    text-align: left !important;
}

.pdf-report th {
    color: #555 !important;
    font-weight: 900 !important;
    background: #fafafa !important;
}

@media print {
    .topbar,
    .pdf-toolbar {
        display: none !important;
    }

    .container {
        max-width: none !important;
        padding: 0 !important;
    }

    .pdf-report {
        padding: 0 !important;
        background: #fff !important;
    }
}


/* FIX DROPDOWN OVERFLOW DASHBOARD */
.dashboard-pro .dash-hero {
    
}

.dashboard-pro .dash-filters {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    
    border-radius: 999px !important;
    
}

.dashboard-pro .dash-filters select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.dashboard-pro .dash-filters > *:first-child {
    margin-left: 0 !important;
}


/* FIX LIMPIO: separación izquierda dropdown Abril */
.dashboard-pro .dash-filters > *:first-child {
    margin-left: 14px !important;
}


/* RESET + FIX LIMPIO FILTROS DASHBOARD */
.dashboard-pro .dash-hero{
    overflow: visible !important;
}

.dashboard-pro .dash-filters{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 12px !important; /* 👈 margen izquierdo real */
    flex-wrap:wrap !important;
}

/* evitar hacks anteriores */
.dashboard-pro .dash-filters > *:first-child{
    margin-left:0 !important;
}

/* alinear botón PDF a la derecha correctamente */
.dashboard-pro .dash-pdf-btn{
    margin-left:auto !important;
}


/* =========================================================
   DASHBOARD FILTROS - MATCH REFERENCIA FINAL
   ========================================================= */
.dashboard-pro .dash-hero {
    overflow: visible !important;
}

.dashboard-pro .dash-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 18px !important;
    border-radius: 34px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.dashboard-pro .dash-filters > *:first-child {
    margin-left: 0 !important;
}

.dashboard-pro .dash-filters select {
    height: 64px !important;
    min-height: 64px !important;
    line-height: 1 !important;
    margin: 0 !important;
    border-radius: 22px !important;
    padding-left: 26px !important;
    padding-right: 46px !important;
    flex: 0 1 auto !important;
    box-sizing: border-box !important;
}

.dashboard-pro .dash-filters select[name="mes"] {
    width: 190px !important;
    min-width: 190px !important;
}

.dashboard-pro .dash-filters select[name="anio"] {
    width: 190px !important;
    min-width: 190px !important;
}

.dashboard-pro .dash-filters select[name="cadena_id"] {
    width: 260px !important;
    min-width: 260px !important;
}

.dashboard-pro .dash-filters select[name="usuario_id"] {
    width: 260px !important;
    min-width: 260px !important;
}

.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.dashboard-pro .dash-filters button {
    width: 122px !important;
    min-width: 122px !important;
}

.dashboard-pro .dash-pdf-btn {
    margin-left: 0 !important;
    width: 104px !important;
    min-width: 104px !important;
}

@media (max-width: 1200px) {
    .dashboard-pro .dash-filters {
        flex-wrap: wrap !important;
    }

    .dashboard-pro .dash-filters select,
    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-pdf-btn {
        flex: 1 1 180px !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .dashboard-pro .dash-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 26px !important;
    }

    .dashboard-pro .dash-filters select,
    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-pdf-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-pdf-btn {
        grid-column: auto !important;
    }
}


/* =========================================================
   DASHBOARD FILTROS ADAPTATIVOS - FIX FINAL
   Evita que el bloque de filtros invada el texto del título.
   ========================================================= */
.dashboard-pro .dash-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
    overflow: visible !important;
}

.dashboard-pro .dash-hero > div:first-child {
    max-width: 680px !important;
}

.dashboard-pro .dash-hero > div:first-child .muted {
    max-width: 620px !important;
}

.dashboard-pro .dash-filters {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 0.75fr) minmax(120px, 0.75fr) minmax(190px, 1.2fr) minmax(190px, 1.2fr) auto auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    border-radius: 34px !important;
    overflow: visible !important;
}

.dashboard-pro .dash-filters select,
.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.dashboard-pro .dash-filters select {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 22px !important;
    padding-left: 24px !important;
    padding-right: 44px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dashboard-pro .dash-filters button,
.dashboard-pro .dash-pdf-btn {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.dashboard-pro .dash-filters button {
    min-width: 124px !important;
}

.dashboard-pro .dash-pdf-btn {
    min-width: 104px !important;
    margin-left: 0 !important;
}

@media (max-width: 1100px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 28px !important;
    }

    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-pdf-btn {
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .dashboard-pro .dash-filters select,
    .dashboard-pro .dash-filters button,
    .dashboard-pro .dash-pdf-btn {
        height: 54px !important;
        min-height: 54px !important;
        border-radius: 18px !important;
    }
}


/* =========================================================
   DASHBOARD KPI - CÍRCULOS DENTRO DE TARJETAS
   ========================================================= */
.dashboard-pro .dash-kpi {
    overflow: hidden !important;
    position: relative !important;
}

.dashboard-pro .dash-kpi::after {
    right: -18px !important;
    top: -18px !important;
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
    pointer-events: none !important;
}

.dashboard-pro .dash-kpi > * {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================================
   DASHBOARD FILTRO EQUIPO POR USUARIOS
   ========================================================= */
.dashboard-pro .dash-filters {
    display: grid !important;
    grid-template-columns: minmax(110px,.65fr) minmax(110px,.65fr) minmax(170px,1fr) minmax(170px,1fr) minmax(170px,1fr) auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.dashboard-pro .dash-filters select,
.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1280px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: 1fr !important;
    }
}


/* FIX ANCHO DROPDOWNS DASHBOARD */
.dashboard-pro .dash-filters {
    display: grid !important;
    grid-template-columns: 
        140px
        120px
        220px
        200px
        220px
        130px
        90px;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
}

.dashboard-pro .dash-filters select,
.dashboard-pro .dash-filters button,
.dashboard-pro .dash-filters .btn {
    width: 100% !important;
    min-width: 0 !important;
}

/* Tablet */
@media (max-width: 1200px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .dashboard-pro .dash-filters {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   FIX DEFINITIVO ANCHOS FILTROS DASHBOARD
   Este bloque debe quedar al FINAL del CSS.
   ========================================================= */
body .dashboard-pro form.dash-filters {
    display: grid !important;
    grid-template-columns: 140px 120px minmax(190px, 1fr) minmax(180px, .9fr) minmax(210px, 1fr) 124px 92px !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
}

body .dashboard-pro form.dash-filters select[name="mes"] {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}

body .dashboard-pro form.dash-filters select[name="anio"] {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

body .dashboard-pro form.dash-filters select[name="cadena_id"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body .dashboard-pro form.dash-filters select[name="equipo_id"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body .dashboard-pro form.dash-filters select[name="usuario_id"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body .dashboard-pro form.dash-filters button {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
}

body .dashboard-pro form.dash-filters .dash-pdf-btn {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
}

body .dashboard-pro form.dash-filters select,
body .dashboard-pro form.dash-filters button,
body .dashboard-pro form.dash-filters .btn {
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

@media (max-width: 1280px) {
    body .dashboard-pro form.dash-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body .dashboard-pro form.dash-filters select[name="mes"],
    body .dashboard-pro form.dash-filters select[name="anio"],
    body .dashboard-pro form.dash-filters select[name="cadena_id"],
    body .dashboard-pro form.dash-filters select[name="equipo_id"],
    body .dashboard-pro form.dash-filters select[name="usuario_id"],
    body .dashboard-pro form.dash-filters button,
    body .dashboard-pro form.dash-filters .dash-pdf-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 700px) {
    body .dashboard-pro form.dash-filters {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DASHBOARD PRO - FALTANTES, BAJA PRESENCIA E INSIGHTS
   ========================================================= */
.dash-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.dash-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
}

.dash-table th,
.dash-table td {
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: left !important;
    vertical-align: top !important;
}

.dash-table th {
    color: var(--muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    font-weight: 950 !important;
    background: #fafafa !important;
}

.dash-insight-pro-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

.dash-pro-recommendation {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: #111 !important;
    color: #fff !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}


/* =========================================================
   DASHBOARD PRO ADVANCED SECTION FINAL
   ========================================================= */
.dash-section-pro {
    margin-top: 28px !important;
    display: grid !important;
    gap: 20px !important;
}

.dash-section-head-pro {
    background: #111 !important;
    color: #fff !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.12) !important;
}

.dash-section-head-pro h2 {
    color: #fff !important;
    margin: 0 0 6px !important;
    font-size: 26px !important;
}

.dash-section-head-pro p {
    margin: 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-weight: 800 !important;
}

.dash-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.dash-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
}

.dash-table th,
.dash-table td {
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: left !important;
    vertical-align: top !important;
}

.dash-table th {
    color: var(--muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    font-weight: 950 !important;
    background: #fafafa !important;
}

.dash-insight-pro-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

.dash-pro-recommendation {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: #111 !important;
    color: #fff !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}


/* =========================================================
   REPORT SUCCESS MODAL
   ========================================================= */
body.modal-open {
    overflow: hidden !important;
}

.report-success-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
}

.report-success-modal {
    width: min(460px, 100%) !important;
    background: #fff !important;
    border-radius: 28px !important;
    padding: 32px !important;
    text-align: center !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    animation: reportSuccessIn .22s ease-out !important;
}

.report-success-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 999px !important;
    margin: 0 auto 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.report-success-icon svg {
    width: 36px !important;
    height: 36px !important;
}

.report-success-modal h2 {
    margin: 0 0 10px !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
    color: #111827 !important;
}

.report-success-modal p {
    margin: 0 !important;
    color: #6b7280 !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

.report-success-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.report-success-actions .btn,
.report-success-actions .btn.secondary {
    min-width: 132px !important;
    justify-content: center !important;
}

@keyframes reportSuccessIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 560px) {
    .report-success-overlay {
        align-items: flex-end !important;
        padding: 14px !important;
    }

    .report-success-modal {
        border-radius: 24px !important;
        padding: 26px 20px !important;
    }

    .report-success-actions {
        flex-direction: column !important;
    }

    .report-success-actions .btn,
    .report-success-actions .btn.secondary {
        width: 100% !important;
    }
}





.filter-action{margin-left:auto}
@media(max-width:768px){

.filter-action{margin-left:0}
}




/* =========================================================
   ADMIN REPORTES - FILTROS MISMO ESTILO DASHBOARD, COMPACTO
   Scopeado para no afectar Dashboard ni Mis reportes
   ========================================================= */
.reports-admin-dash-filters {
    width: 100% !important;
    margin: 14px 0 20px !important;
    padding: 12px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(232,230,225,.9) !important;
    box-shadow: var(--shadow-soft) !important;
    display: grid !important;
    grid-template-columns: 120px 105px minmax(190px,1fr) minmax(190px,1fr) minmax(160px,.85fr) 120px !important;
    gap: 10px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.reports-admin-dash-filters input[type="hidden"] {
    display: none !important;
}

.reports-admin-dash-filters select {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 38px 0 16px !important;
    border-radius: 16px !important;
    border: 1px solid var(--line) !important;
    background-color: #fff !important;
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
      linear-gradient(45deg, transparent 50%, #777 50%),
      linear-gradient(135deg, #777 50%, transparent 50%) !important;
    background-position:
      calc(100% - 22px) 50%,
      calc(100% - 16px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

.reports-admin-dash-filters .btn,
.reports-admin-dash-filters button {
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(30,30,30,.14) !important;
}

.reports-group-toolbar {
    margin-top: 8px !important;
    clear: both !important;
}

@media (max-width: 1180px) {
    .reports-admin-dash-filters {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

@media (max-width: 760px) {
    .reports-admin-dash-filters {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .reports-admin-dash-filters select,
    .reports-admin-dash-filters .btn,
    .reports-admin-dash-filters button {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
    }
}





/* =========================================================
   FIX FINAL: MIS REPORTES WEB FLECHAS + 0 GRUPOS + MOBILE SPACING
   ========================================================= */

/* Reportes administrador: "0 grupos" en posición original/correcta */
.reports-group-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 18px 0 18px !important;
    clear: both !important;
}

.reports-group-toolbar > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.reports-group-toolbar .group-count {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: center !important;
    float: none !important;
}

/* Mis reportes versión web: flechas centradas como dashboard */


/* Mis reportes móvil: restaurar aire interno sin cambiar estructura móvil */
@media (max-width: 760px) {
    .filters-card-mobile-accordion .mobile-filter-content {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    .filters-card-mobile-accordion .reports-filter-form > div:first-of-type label {
        margin-top: 6px !important;
    }

    .filters-card-mobile-accordion .reports-filter-form label {
        margin-bottom: 12px !important;
    }

    .filters-card-mobile-accordion .reports-filter-form select {
        margin-bottom: 22px !important;
    }

    .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-top: 4px !important;
    }

    .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

















/* solo para que el menú fijo no tape el último bloque */
        margin-bottom: 0 !important;
    }

    body.app .app-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.app::after,
    body.app main.container::after,
    body.app .container::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    /* Mis reportes móvil: espaciado visual manteniendo el bloque original */
    body.page-user_dashboard .page-title-row + .filters-card-mobile-accordion {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-content {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div:first-of-type {
        padding-top: 12px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form label {
        margin-bottom: 14px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form select {
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-top: 8px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}








/* Mis reportes web: filtros lineales como estaban */
@media (min-width: 761px) {
    body.page-user_dashboard .page-title-row + .filters-card-mobile-accordion {
        margin-top: 22px !important;
        margin-bottom: 22px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion {
        padding: 18px !important;
        border-radius: 30px !important;
        background: rgba(255,255,255,.90) !important;
        border: 1px solid rgba(232,230,225,.9) !important;
        box-shadow: var(--shadow) !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-summary {
        display: none !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-content {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        align-items: flex-end !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div {
        margin: 0 !important;
        min-width: 150px !important;
        flex: 1 1 180px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div:first-of-type {
        flex: 1.35 1 260px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        margin: 0 0 8px !important;
        color: #555 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form select {
        width: 100% !important;
        min-height: 54px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 42px 0 16px !important;
        border-radius: 18px !important;
        border: 1px solid var(--line) !important;
        background-color: #fff !important;
        font-size: 15px !important;
        font-weight: 850 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image:
          linear-gradient(45deg, transparent 50%, #777 50%),
          linear-gradient(135deg, #777 50%, transparent 50%) !important;
        background-position:
          calc(100% - 23px) 50%,
          calc(100% - 16px) 50% !important;
        background-size: 7px 7px, 7px 7px !important;
        background-repeat: no-repeat !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: flex-end !important;
        margin: 0 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        padding: 0 18px !important;
        width: auto !important;
        white-space: nowrap !important;
        font-size: 15px !important;
    }
}

/* Móvil global: el scroll termina en el fondo gris, sin espacio blanco extra */
@media (max-width: 760px) {
    html {
        background: #eeeeeb !important;
        overscroll-behavior-y: none !important;
    }

    body,
    body.app {
        background: radial-gradient(circle at 18% 0%, #fff 0, #f7f7f5 35%, #eeeeeb 100%) !important;
        min-height: 100dvh !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: none !important;
    }

    body.app main.container,
    body.app .container {
        margin-bottom: 0 !important;
        padding-bottom: 96px !important;
        background: transparent !important;
    }

    body.app .app-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.app::after,
    body.app main.container::after,
    body.app .container::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    /* Menú móvil como estaba: fijo abajo */
    body.app .topbar {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    /* Mis reportes móvil: solo aire visual del bloque original */
    body.page-user_dashboard .page-title-row + .filters-card-mobile-accordion {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-content {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div:first-of-type {
        padding-top: 12px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form label {
        margin-bottom: 14px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form select {
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-top: 8px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}


/* WEB: Mis reportes con filtros horizontales/lineales */
@media (min-width: 761px) {
    body.page-user_dashboard .filters-card-mobile-accordion {
        display: block !important;
        width: 100% !important;
        margin: 24px 0 24px !important;
        padding: 18px !important;
        border-radius: 30px !important;
        background: rgba(255,255,255,.90) !important;
        border: 1px solid rgba(232,230,225,.9) !important;
        box-shadow: var(--shadow) !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-summary {
        display: none !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-content {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div:first-of-type {
        flex: 1.8 1 0 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form label {
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        color: #555 !important;
        line-height: 1.2 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form select {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 42px 0 16px !important;
        border-radius: 18px !important;
        border: 1px solid var(--line) !important;
        background-color: #fff !important;
        font-size: 15px !important;
        font-weight: 850 !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image:
          linear-gradient(45deg, transparent 50%, #777 50%),
          linear-gradient(135deg, #777 50%, transparent 50%) !important;
        background-position:
          calc(100% - 23px) 50%,
          calc(100% - 16px) 50% !important;
        background-size: 7px 7px, 7px 7px !important;
        background-repeat: no-repeat !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        width: auto !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 18px !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }
}

/* MOBILE: el scroll termina unos px debajo del copyright, no más */
@media (max-width: 760px) {
    html {
        background: #eeeeeb !important;
        overscroll-behavior-y: none !important;
    }

    body,
    body.app {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: radial-gradient(circle at 18% 0%, #fff 0, #f7f7f5 35%, #eeeeeb 100%) !important;
        overscroll-behavior-y: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.app main.container,
    body.app .container {
        margin-bottom: 0 !important;
        padding-bottom: 18px !important;
        background: transparent !important;
    }

    body.app .app-footer {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 18px auto 82px !important; /* copyright visible + pocos px antes del menú */
        padding: 0 12px 8px !important;
        background: transparent !important;
        overflow: visible !important;
    }

    body.app::after,
    body.app main.container::after,
    body.app .container::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    body.app .topbar {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    /* Mantener ajustes de aire solo en móvil */
    body.page-user_dashboard .page-title-row + .filters-card-mobile-accordion {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .mobile-filter-content {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form > div:first-of-type {
        padding-top: 12px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form label {
        margin-bottom: 14px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form select {
        margin-bottom: 24px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-top: 8px !important;
    }

    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions button,
    body.page-user_dashboard .filters-card-mobile-accordion .reports-filter-form .filter-actions .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}





/* =========================================================
   FIX DEFINITIVO: EN MÓVIL SOLO SCROLLEA EL CONTENIDO
   No toca filtros ni estructura. El body ya no genera cola blanca.
   ========================================================= */
@media (max-width: 760px) {
    html,
    body {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        background: #eeeeeb !important;
        overscroll-behavior: none !important;
    }

    body.app {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #eeeeeb !important;
        overscroll-behavior: none !important;
    }

    body.app main.container,
    body.app .container {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        margin: 0 !important;
        padding-top: 18px !important;
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    body.app .topbar {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
        transform: none !important;
    }

    body.app .app-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    body.app::after,
    body.app main.container::after,
    body.app .container::after,
    body.app .app-footer::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* =========================================================
   AJUSTE MÓVIL MODAL CONFIRMACIÓN REPORTE
   Sube la ventana para que el menú inferior no tape el botón OK.
   ========================================================= */
@media (max-width: 760px) {
    .report-success-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 18px 18px calc(132px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    .report-success-modal {
        margin-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 170px) !important;
        overflow-y: auto !important;
    }

    .report-success-actions {
        padding-bottom: 4px !important;
    }
}


/* =========================================================
   COLORES DE ESTADO - MIS REPORTES MÓVIL (AJUSTE PUNTUAL)
   ========================================================= */

.status-aprobado,
.estado-aprobado {
    color: #2ecc71 !important;
    font-weight: 900;
}

.status-pendiente,
.estado-pendiente {
    color: #f39c12 !important;
    font-weight: 900;
}

.status-rechazado,
.estado-rechazado {
    color: #e74c3c !important;
    font-weight: 900;
}


/* =========================================================
   FIX BACKGROUND ESTADOS - MIS REPORTES (MÓVIL)
   ========================================================= */

.status-aprobado,
.estado-aprobado {
    background-color: #2ecc71 !important;
    color: #fff !important;
}

.status-pendiente,
.estado-pendiente {
    background-color: #f39c12 !important;
    color: #fff !important;
}

.status-rechazado,
.estado-rechazado {
    background-color: #e74c3c !important;
    color: #fff !important;
}


/* =========================================================
   FIX REAL BACKGROUND BADGE ESTADOS - MIS REPORTES MÓVIL
   Sobrescribe el amarillo genérico según la clase real del estado.
   ========================================================= */
@media (max-width: 760px) {
    .report-accordion-list .report-item-aligned .status-badge.status-aprobado,
    .grouped-report-list .report-item-aligned .status-badge.status-aprobado,
    .report-item-aligned .report-col-status .status-badge.status-aprobado {
        background: #16a34a !important;
        background-color: #16a34a !important;
        color: #ffffff !important;
    }

    .report-accordion-list .report-item-aligned .status-badge.status-pendiente,
    .grouped-report-list .report-item-aligned .status-badge.status-pendiente,
    .report-item-aligned .report-col-status .status-badge.status-pendiente {
        background: #f59e0b !important;
        background-color: #f59e0b !important;
        color: #111827 !important;
    }

    .report-accordion-list .report-item-aligned .status-badge.status-revisado,
    .grouped-report-list .report-item-aligned .status-badge.status-revisado,
    .report-item-aligned .report-col-status .status-badge.status-revisado {
        background: #3b82f6 !important;
        background-color: #3b82f6 !important;
        color: #ffffff !important;
    }

    .report-accordion-list .report-item-aligned .status-badge.status-observado,
    .grouped-report-list .report-item-aligned .status-badge.status-observado,
    .report-item-aligned .report-col-status .status-badge.status-observado {
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
    }

    .report-accordion-list .report-item-aligned .status-badge.status-rechazado,
    .grouped-report-list .report-item-aligned .status-badge.status-rechazado,
    .report-item-aligned .report-col-status .status-badge.status-rechazado {
        background: #dc2626 !important;
        background-color: #dc2626 !important;
        color: #ffffff !important;
    }
}