@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&display=swap');
:root{
    --verde:#25482f;
    --rojo:#a30200;
    --beige:#fbf7e6;
    --naranja:#f4962a;
    --negro:#242223;
    --blanco:#ffffff;
    --gris:#dddddd;
    --grisclaro:#f4f1e6;
    --guindilla:#3f3e3a;
    --mantequilla:#f0e0a8;
    --anil:#252F47;
    --grismedio:#6e6b62;
    --grissuave:#a39d8f;
    --grisniebla:#c2bcae;
    --grisarena:#ddd7c8;
    --naranjafuerte:#ff6a17;
    --mostazaapagado:#d98525;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--beige);
    color:var(--negro);
    font-family:'Work Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1320px;margin:0 auto;padding:28px 24px 60px;}

  /* HEADER */
  header.top{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:0;margin-bottom:90px;gap:16px;flex-wrap:wrap;
  }
  header.top img{height:60px;width:auto;max-width:250px;object-fit:contain;}
  header.top img.agency-logo{height:auto;width:180px;max-width:180px;}

  /* TITLE BLOCK */
  .title-wrap{text-align:center;margin-bottom:90px;}
  .title-wrap .client-logo-top{
    width:300px;max-width:300px;height:auto;display:block;margin:0 auto 24px;
  }
  .title-wrap .client-name-top{
    font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.02em;
    color:var(--verde);margin:0 0 20px;text-transform:uppercase;
  }
  .title-wrap h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:54px;
    letter-spacing:-0.01em;
    color:var(--rojo);
    margin:0 0 2px 0;
    line-height:0.95;
  }
  .title-wrap .eyebrow{
    margin:0;
    font-family:'Work Sans',sans-serif;
    font-weight:500;
    color:#9a9a94;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .title-wrap .updated{
    font-size:12px;color:#b3ada0;margin:8px 0 0;text-align:center;
  }

  /* SECTION BAND */
  .band{
    background:var(--verde);
    color:var(--beige);
    font-family:'Work Sans',sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:10px 16px;
    border-radius:0;
    margin:34px 0 16px;
  }
  .band.small{margin-top:0;}

  /* FILTERS */
  .filters{
    display:flex;flex-wrap:nowrap;gap:8px;align-items:end;
    background:var(--blanco);
    border:1px solid var(--gris);
    border-radius:0;
    padding:12px 14px;
    margin-bottom:6px;
    overflow-x:auto;
  }
  .filters .field{display:flex;flex-direction:column;gap:3px;min-width:96px;flex:1 1 96px;}
  .filters label{font-size:9.5px;font-weight:700;color:var(--verde);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
  .filters select, .filters input{
    font-family:'Work Sans',sans-serif;
    padding:6px 7px;border:1px solid var(--gris);border-radius:0;
    font-size:11.5px;color:var(--negro);background:var(--blanco);width:100%;
  }
  .filters button{
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:11.5px;
    background:var(--rojo);color:var(--blanco);border:none;border-radius:0;
    padding:8px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  }
  .filters button:hover{opacity:.88;}
  .filters input.date-text, .compare-fields-row input.date-text{
    font-variant-numeric:tabular-nums;
  }
  .filters input.date-text.invalid, .compare-fields-row input.date-text.invalid{
    border-color:var(--rojo);
    background:#fdf2f2;
  }

  /* COMPARE BAR — pill centrada, acordeón */
  .compare-bar{
    display:flex;flex-direction:column;align-items:center;
    margin:10px 0 40px;
  }
  .compare-toggle-btn{
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:10.5px;
    background:transparent;color:var(--verde);border:1px solid var(--verde);
    border-radius:999px;
    padding:5px 14px;cursor:pointer;white-space:nowrap;
  }
  .compare-fields{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .3s ease, opacity .25s ease, margin .3s ease;
    margin-top:0;
  }
  .compare-fields.show{
    max-height:130px;opacity:1;margin-top:16px;
  }
  .compare-fields-label{
    font-size:10.5px;font-weight:700;color:var(--verde);
    text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  }
  .compare-fields-row{
    display:flex;align-items:center;gap:9px;
  }
  .compare-fields-row span{
    font-size:12.5px;color:var(--negro);font-weight:500;
  }
  .compare-fields-row input{
    font-family:'Work Sans',sans-serif;padding:7px 10px;border:1px solid var(--gris);
    border-radius:6px;font-size:12px;color:var(--negro);background:var(--blanco);
    width:112px;text-align:center;
  }
  .compare-section{display:none;}
  .compare-section.show{display:block;}
  table.compare{width:100%;border-collapse:collapse;font-size:13px;}
  table.compare thead th{
    background:var(--anil);color:var(--beige);font-weight:700;
    text-align:left;padding:9px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;
  }
  table.compare thead th.num{text-align:right;}
  table.compare tbody td{padding:9px 12px;border-bottom:1px solid var(--grisclaro);}
  table.compare tbody tr:last-child td{border-bottom:none;}
  table.compare td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
  table.compare .delta-up{color:#16a34a;font-weight:700;}
  table.compare .delta-down{color:var(--rojo);font-weight:700;}

  /* KPIs */
  .kpis-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
  .kpis{display:grid;gap:10px;}
  .kpis-row1{grid-template-columns:repeat(5,1fr);}
  .kpis-row2{grid-template-columns:repeat(4,1fr);}
  .kpi{
    background:var(--naranja);border:1px solid var(--naranja);border-radius:0;
    padding:16px 12px;text-align:left;
  }
  .kpis-row2 .kpi{
    background:var(--mostazaapagado);border-color:var(--mostazaapagado);
  }
  .kpi .val{font-family:'Bebas Neue',sans-serif;font-size:36px;font-weight:700;color:var(--beige);line-height:1;}
  .kpi .lbl{font-size:11px;color:var(--beige);font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:7px;}
  .kpi .sub{font-size:10.5px;color:var(--beige);opacity:.75;margin-top:2px;}

  /* GRID CHARTS */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .card{
    background:var(--blanco);border:1px solid var(--gris);border-radius:0;
    padding:18px;
  }
  .card h3{
    margin:0 0 14px;font-size:13px;font-weight:700;color:var(--verde);
    text-transform:uppercase;letter-spacing:.03em;
    display:flex;justify-content:space-between;align-items:center;
  }
  .card h3.with-toggle{margin-bottom:28px;}
  .evo-controls{
    display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:0 0 14px;
  }
  .toggle-group{display:flex;align-items:center;gap:7px;}
  .toggle{
    display:flex;gap:6px;
  }
  .toggle button{
    font-family:'Work Sans',sans-serif;font-size:10.5px;font-weight:700;
    border:1px solid var(--verde);background:var(--blanco);color:var(--verde);
    padding:4px 9px;border-radius:14px;cursor:pointer;text-transform:none;
  }
  .toggle button.active{background:var(--naranja);color:var(--beige);border-color:var(--naranja);font-weight:800;text-decoration:none;}
  .chart-note{
    margin:10px 0 0;padding:8px 10px;
    background:var(--grisclaro);border-left:3px solid var(--naranja);
    font-size:11px;color:#5c5c58;line-height:1.5;
  }
  .chart-note.bg-blanco{background:var(--blanco);}
  .chartbox{position:relative;height:260px;}
  .chartbox.tall{height:320px;}
  .evo-placeholder{
    display:none;position:absolute;inset:0;
    align-items:center;justify-content:center;text-align:center;
    color:#9a9a94;font-family:'Work Sans',sans-serif;font-weight:500;
    font-size:14px;line-height:1.6;padding:0 60px;
  }
  .evo-placeholder.show{display:flex;}

  /* PRESCRIPTORES */
  .presc-highlight{
    border:1px solid var(--gris);
  }
  table.rank{width:100%;border-collapse:collapse;font-size:13px;}
  table.rank thead th{
    background:var(--anil);color:var(--beige);font-weight:700;
    text-align:left;padding:8px 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;
  }
  table.rank thead th.num{text-align:right;}
  table.rank tbody td{padding:8px 10px;border-bottom:1px solid var(--grisclaro);}
  table.rank tbody tr:last-child td{border-bottom:none;}
  table.rank tbody tr:hover{background:var(--grisclaro);}
  table.rank td.num{text-align:right;font-variant-numeric:tabular-nums;}
  .bar-mini{height:6px;background:var(--grisclaro);border-radius:0;overflow:hidden;margin-top:4px;}
  .bar-mini span{display:block;height:100%;background:var(--naranja);}

  footer{
    margin-top:40px;padding-top:16px;border-top:1px solid var(--gris);
    font-size:11.5px;color:#8a8a86;display:flex;justify-content:flex-end;
  }

  /* ACCIONES: exportar / subir nueva fuente de datos (en el header) */
  .dash-actions{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  }
  .dash-btn-wrap{position:relative;}
  .action-btn{
    display:flex;align-items:center;gap:7px;
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:12px;
    padding:9px 16px;border-radius:0;cursor:pointer;white-space:nowrap;
    border:1px solid var(--verde);background:var(--beige);color:var(--verde);
  }
  .action-btn:hover{background:var(--grisclaro);}
  .action-btn svg{width:14px;height:14px;flex:0 0 auto;}
  .export-menu{
    position:absolute;top:100%;right:0;
    margin-top:6px;background:var(--blanco);border:1px solid var(--gris);
    min-width:190px;box-shadow:0 6px 18px rgba(0,0,0,.12);display:none;z-index:30;
  }
  .export-menu.show{display:block;}
  .export-menu button{
    display:block;width:100%;text-align:left;padding:10px 14px;border:none;background:none;
    font-family:'Work Sans',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--negro);
  }
  .export-menu button:hover{background:var(--grisclaro);}

  /* Botones del modal (Cancelar / Actualizar dashboard) */
  .dash-btn{
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:12.5px;
    padding:10px 22px;border-radius:0;cursor:pointer;
    border:1px solid var(--verde);background:var(--verde);color:var(--beige);
  }
  .dash-btn:hover{opacity:.9;}
  .dash-btn.outline{background:var(--blanco);color:var(--verde);}

  /* MODAL: subir nueva fuente de datos */
  .modal-overlay{
    display:none;position:fixed;inset:0;background:rgba(36,34,35,.55);
    align-items:center;justify-content:center;z-index:60;padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    background:var(--blanco);padding:26px;max-width:440px;width:100%;
    border-radius:0;max-height:90vh;overflow-y:auto;
  }
  .modal-box h4{
    margin:0 0 8px;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--verde);letter-spacing:.02em;
  }
  .modal-hint{font-size:11.5px;color:#6b6b66;line-height:1.5;margin:0 0 18px;}
  .modal-field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
  .modal-field label{font-size:10.5px;font-weight:700;color:var(--verde);text-transform:uppercase;letter-spacing:.03em;}
  .modal-field input{
    font-family:'Work Sans',sans-serif;padding:8px 10px;border:1px solid var(--gris);
    border-radius:0;font-size:12.5px;color:var(--negro);background:var(--blanco);
  }
  .modal-dates{display:flex;gap:10px;}
  .modal-dates .modal-field{flex:1;}
  .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}
  .modal-status{font-size:11.5px;margin-top:12px;line-height:1.5;color:var(--verde);}
  .modal-status.error{color:var(--rojo);}
  .modal-download{
    margin-top:10px;display:none;font-family:'Work Sans',sans-serif;font-weight:700;font-size:11.5px;
    color:var(--verde);text-decoration:underline;background:none;border:none;cursor:pointer;padding:0;
  }
  .modal-download.show{display:inline-block;}

  @media print{
    .filters, .compare-bar, .dash-actions, .modal-overlay{display:none !important;}
  }

  @media (max-width:1100px){
    .kpis-row1{grid-template-columns:repeat(3,1fr);}
    .kpis-row2{grid-template-columns:repeat(2,1fr);}
    .grid2{grid-template-columns:1fr;}
    .grid3{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .kpis-row1{grid-template-columns:repeat(2,1fr);}
    .kpis-row2{grid-template-columns:repeat(2,1fr);}
    .title-wrap .client-logo-top{width:200px;max-width:200px;}
    .title-wrap h1{font-size:32px;}
    .title-wrap .eyebrow{font-size:12px;}
  }
/* =====================================================================
   PORTAL: login, admin y estados (mismo sistema visual que el dashboard)
   ===================================================================== */
.cargando{
  min-height:60vh;display:flex;align-items:center;justify-content:center;
  color:var(--grismedio);font-size:15px;letter-spacing:.02em;
}

/* ---- Login ---- */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.login-box{
  background:var(--blanco);border:1px solid var(--grisarena);
  padding:48px 44px;width:100%;max-width:400px;text-align:center;
}
.login-box .agency-logo{width:170px;margin:0 auto 30px;display:block;}
.login-box .client-logo{max-width:220px;max-height:80px;object-fit:contain;margin:0 auto 10px;display:block;}
.login-box h1{
  font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--verde);
  margin:0 0 6px;text-transform:uppercase;letter-spacing:.02em;
}
.login-box p.sub{color:var(--grismedio);font-size:14px;margin:0 0 28px;}
.login-box input[type=password], .login-box input[type=text]{
  width:100%;padding:12px 14px;font-family:'Work Sans',sans-serif;font-size:15px;
  border:1px solid var(--grisniebla);background:var(--beige);color:var(--negro);
  margin-bottom:14px;outline:none;
}
.login-box input:focus{border-color:var(--verde);}
.login-box .dash-btn{width:100%;justify-content:center;}
.login-error{color:var(--rojo);font-size:13px;min-height:18px;margin:10px 0 0;}

/* ---- Admin ---- */
.admin-wrap{max-width:1000px;margin:0 auto;padding:36px 24px 80px;}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;flex-wrap:wrap;gap:12px;}
.admin-head img{width:170px;}
.admin-head h1{
  font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--verde);
  margin:0;text-transform:uppercase;
}
.admin-card{
  background:var(--blanco);border:1px solid var(--grisarena);
  padding:28px;margin-bottom:26px;
}
.admin-card h2{
  font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--rojo);
  margin:0 0 18px;text-transform:uppercase;letter-spacing:.02em;
}
.admin-card label{display:block;font-size:13px;font-weight:600;color:var(--guindilla);margin:12px 0 5px;}
.admin-card input[type=text], .admin-card input[type=password],
.admin-card select, .admin-card input[type=file]{
  width:100%;padding:10px 12px;font-family:'Work Sans',sans-serif;font-size:14px;
  border:1px solid var(--grisniebla);background:var(--beige);color:var(--negro);outline:none;
}
.admin-card input:focus, .admin-card select:focus{border-color:var(--verde);}
.admin-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
@media (max-width:640px){.admin-grid2{grid-template-columns:1fr;}}
.admin-card .dash-btn{margin-top:20px;}
.admin-status{font-size:13px;margin:14px 0 0;min-height:18px;color:var(--verde);white-space:pre-line;}
.admin-status.error{color:var(--rojo);}

table.admin-tabla{width:100%;border-collapse:collapse;font-size:14px;}
table.admin-tabla th{
  text-align:left;font-weight:600;color:var(--guindilla);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid var(--verde);padding:8px 10px;
}
table.admin-tabla td{border-bottom:1px solid var(--grisarena);padding:9px 10px;}
table.admin-tabla td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.admin-tabla .pill{
  display:inline-block;padding:2px 9px;font-size:11px;font-weight:600;
  background:var(--verde);color:var(--blanco);
}
table.admin-tabla .pill.off{background:var(--grissuave);}
.admin-link{color:var(--verde);font-weight:600;text-decoration:none;}
.admin-link:hover{text-decoration:underline;}

/* ---- Barra superior del dashboard (sesión) ---- */
.session-bar{
  display:flex;justify-content:flex-end;padding:10px 24px 0;
}
.session-bar button{
  background:none;border:none;color:var(--grismedio);font-family:'Work Sans',sans-serif;
  font-size:12px;cursor:pointer;text-decoration:underline;
}
.session-bar button:hover{color:var(--negro);}

/* ---- Landing raíz ---- */
.landing{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:24px;text-align:center;
}
.landing img{width:220px;}
.landing p{color:var(--grismedio);font-size:15px;max-width:420px;line-height:1.5;}