/* =====================================================================
   GENERA · Control de Clientes — hoja de estilos principal
   Responsive · modo claro/oscuro · sin dependencias externas
   ===================================================================== */

/* --------------------------- Tokens -------------------------------- */
:root{
  --c-fondo:        #f4f6fb;
  --c-superficie:   #ffffff;
  --c-superficie-2: #f8fafc;
  --c-borde:        #e3e8f0;
  --c-texto:        #16202f;
  --c-texto-suave:  #64748b;

  --c-primario:      #2563eb;
  --c-primario-osc:  #1d4ed8;
  --c-primario-suave:#e8efff;

  --c-exito:   #16a34a;  --c-exito-suave:   #e6f7ed;
  --c-peligro: #dc2626;  --c-peligro-suave: #fdeaea;
  --c-aviso:   #d97706;  --c-aviso-suave:   #fef3e2;
  --c-info:    #0891b2;  --c-info-suave:    #e0f5fa;
  --c-neutro:  #64748b;  --c-neutro-suave:  #eef1f6;

  --menu-fondo:  #101a2c;
  --menu-fondo-2:#0b1322;
  --menu-texto:  #a7b4c9;
  --menu-activo: #ffffff;

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;
  --sombra-sm: 0 1px 2px rgba(15,23,42,.06);
  --sombra:    0 2px 10px rgba(15,23,42,.07);
  --sombra-lg: 0 18px 40px rgba(15,23,42,.16);

  --ancho-menu: 262px;
  --ancho-menu-min: 78px;
  --alto-barra: 64px;

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --trans: .22s cubic-bezier(.4,0,.2,1);
}

html[data-tema="oscuro"]{
  --c-fondo:        #0d1420;
  --c-superficie:   #151e2e;
  --c-superficie-2: #1b2536;
  --c-borde:        #26324a;
  --c-texto:        #e6ecf6;
  --c-texto-suave:  #93a3bd;

  --c-primario-suave:#1c2c4d;
  --c-exito-suave:   #102c1e;
  --c-peligro-suave: #33161a;
  --c-aviso-suave:   #33260f;
  --c-info-suave:    #0d2c33;
  --c-neutro-suave:  #202b3f;

  --menu-fondo:  #0a111d;
  --menu-fondo-2:#070d17;
  --sombra:    0 2px 10px rgba(0,0,0,.4);
  --sombra-lg: 0 18px 40px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; font-family:var(--fuente); font-size:15px; line-height:1.55;
  background:var(--c-fondo); color:var(--c-texto);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--c-primario); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ margin:0 0 .5rem; font-weight:650; line-height:1.25; }
h1{ font-size:1.5rem; } h2{ font-size:1.2rem; } h3{ font-size:1.02rem; }
img{ max-width:100%; }

/* Tamaño por defecto de los iconos SVG en línea (los que llevan clase
   propia — botones, menú, KPIs, gráficos — definen el suyo más abajo). */
svg:not([class]){ width:18px; height:18px; vertical-align:-3px; flex-shrink:0; }
h1 svg:not([class]), h2 svg:not([class]){ width:20px; height:20px; }

/* ========================= ESTRUCTURA ============================== */
.app{ min-height:100vh; }

/* ---------------------------- MENÚ --------------------------------- */
.menu{
  position:fixed; inset:0 auto 0 0; width:var(--ancho-menu); z-index:60;
  background:linear-gradient(178deg,var(--menu-fondo) 0%,var(--menu-fondo-2) 100%);
  display:flex; flex-direction:column; transition:width var(--trans),transform var(--trans);
  box-shadow:4px 0 24px rgba(2,8,23,.18);
}
.menu__marca{
  display:flex; align-items:center; gap:.7rem; height:var(--alto-barra);
  padding:0 1.1rem; color:#fff; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.menu__logo{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:grid; place-items:center; font-weight:800; font-size:1rem; letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(59,130,246,.45);
}
.menu__marca-txt{ display:flex; flex-direction:column; overflow:hidden; }
.menu__marca-txt strong{ font-size:.98rem; letter-spacing:.3px; }
.menu__marca-txt span{ font-size:.68rem; color:var(--menu-texto); letter-spacing:.14em; text-transform:uppercase; }

.menu__nav{ flex:1; overflow-y:auto; padding:.85rem .7rem 1.5rem; }
.menu__nav::-webkit-scrollbar{ width:6px; }
.menu__nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }

.menu__grupo{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:#5b6b85; padding:1rem .85rem .4rem; font-weight:700; white-space:nowrap;
}
.menu__item{
  display:flex; align-items:center; gap:.8rem; padding:.62rem .85rem; margin-bottom:2px;
  color:var(--menu-texto); border-radius:var(--r-sm); font-size:.905rem; font-weight:500;
  white-space:nowrap; position:relative; transition:background var(--trans),color var(--trans);
}
.menu__item:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.menu__item.activo{
  background:linear-gradient(90deg,rgba(59,130,246,.28),rgba(59,130,246,.05));
  color:var(--menu-activo); font-weight:600;
}
.menu__item.activo::before{
  content:""; position:absolute; left:-.7rem; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:0 4px 4px 0; background:#60a5fa;
}
.menu__item svg{ width:19px; height:19px; flex-shrink:0; stroke-width:1.7; }
.menu__item .pastilla{
  margin-left:auto; background:var(--c-peligro); color:#fff; font-size:.68rem;
  font-weight:700; padding:.05rem .42rem; border-radius:999px;
}
.menu__pie{ padding:.9rem 1rem; border-top:1px solid rgba(255,255,255,.07); font-size:.72rem; color:#5b6b85; white-space:nowrap; }

/* Menú compacto (escritorio) */
.app.compacto .menu{ width:var(--ancho-menu-min); }
.app.compacto .menu__marca-txt,
.app.compacto .menu__grupo,
.app.compacto .menu__item span,
.app.compacto .menu__pie{ display:none; }
.app.compacto .menu__item{ justify-content:center; padding:.68rem 0; }
.app.compacto .menu__item .pastilla{
  position:absolute; top:4px; right:10px; margin:0; padding:0 .3rem; font-size:.6rem;
}
.app.compacto .contenido{ margin-left:var(--ancho-menu-min); }
.app.compacto .barra{ left:var(--ancho-menu-min); }

/* --------------------------- BARRA --------------------------------- */
.barra{
  position:fixed; top:0; left:var(--ancho-menu); right:0; height:var(--alto-barra); z-index:50;
  display:flex; align-items:center; gap:.75rem; padding:0 1.3rem;
  background:color-mix(in srgb,var(--c-superficie) 88%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--c-borde); transition:left var(--trans);
}
.barra__titulo{ font-size:1.05rem; font-weight:650; margin:0; }
.barra__esp{ flex:1; }

.icono-btn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--c-texto-suave);
  cursor:pointer; transition:var(--trans);
}
.icono-btn:hover{ background:var(--c-superficie-2); color:var(--c-texto); border-color:var(--c-borde); }
.icono-btn svg{ width:20px; height:20px; }

.buscador-rapido{ position:relative; display:none; }
@media(min-width:900px){ .buscador-rapido{ display:block; width:270px; } }
.buscador-rapido input{
  width:100%; padding:.5rem .8rem .5rem 2.2rem; border-radius:999px;
  border:1px solid var(--c-borde); background:var(--c-superficie-2); color:var(--c-texto);
  font-size:.86rem; font-family:inherit;
}
.buscador-rapido input:focus{ outline:2px solid var(--c-primario); outline-offset:-1px; }
.buscador-rapido svg{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--c-texto-suave); }
.buscador-rapido__res{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--c-superficie);
  border:1px solid var(--c-borde); border-radius:var(--r-md); box-shadow:var(--sombra-lg);
  max-height:320px; overflow-y:auto; display:none; z-index:70;
}
.buscador-rapido__res a{ display:block; padding:.55rem .8rem; color:var(--c-texto); font-size:.86rem; }
.buscador-rapido__res a:hover{ background:var(--c-superficie-2); text-decoration:none; }
.buscador-rapido__res small{ color:var(--c-texto-suave); }

/* Menú de usuario */
.usuario{ position:relative; }
.usuario__btn{
  display:flex; align-items:center; gap:.55rem; padding:.3rem .55rem .3rem .3rem;
  background:transparent; border:1px solid var(--c-borde); border-radius:999px;
  cursor:pointer; color:var(--c-texto); font-family:inherit;
}
.usuario__btn:hover{ background:var(--c-superficie-2); }
.avatar{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--c-primario),#7c3aed); color:#fff;
  font-size:.78rem; font-weight:700; flex-shrink:0;
}
.usuario__nom{ display:none; font-size:.85rem; font-weight:600; }
@media(min-width:768px){ .usuario__nom{ display:block; } }
.desplegable{
  position:absolute; right:0; top:calc(100% + 8px); min-width:212px; padding:.4rem;
  background:var(--c-superficie); border:1px solid var(--c-borde); border-radius:var(--r-md);
  box-shadow:var(--sombra-lg); display:none; z-index:80;
}
.desplegable.abierto{ display:block; }
.desplegable a,.desplegable button{
  display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem .7rem;
  border:0; background:none; border-radius:var(--r-sm); color:var(--c-texto);
  font-size:.87rem; font-family:inherit; text-align:left; cursor:pointer;
}
.desplegable a:hover,.desplegable button:hover{ background:var(--c-superficie-2); text-decoration:none; }
.desplegable svg{ width:17px; height:17px; color:var(--c-texto-suave); }
.desplegable hr{ border:0; border-top:1px solid var(--c-borde); margin:.35rem 0; }
.desplegable__cab{ padding:.55rem .7rem; border-bottom:1px solid var(--c-borde); margin-bottom:.35rem; }
.desplegable__cab strong{ display:block; font-size:.88rem; }
.desplegable__cab span{ font-size:.75rem; color:var(--c-texto-suave); }

/* ------------------------- CONTENIDO ------------------------------- */
.contenido{
  margin-left:var(--ancho-menu); padding:calc(var(--alto-barra) + 1.4rem) 1.4rem 2.5rem;
  transition:margin-left var(--trans); min-height:100vh;
}
.velo{
  position:fixed; inset:0; background:rgba(8,15,28,.55); z-index:55;
  opacity:0; pointer-events:none; transition:opacity var(--trans);
}
.velo.visible{ opacity:1; pointer-events:auto; }

@media(max-width:600px){
  .barra{ padding:0 .8rem; gap:.35rem; }
  .barra__titulo{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pagina-cab .acc{ width:100%; margin-left:0; }
  .pagina-cab .acc .btn{ flex:1 1 auto; }
}

@media(max-width:991px){
  .menu{ transform:translateX(-100%); width:var(--ancho-menu); }
  .app.menu-abierto .menu{ transform:translateX(0); }
  .barra{ left:0; }
  .contenido{ margin-left:0; padding-left:1rem; padding-right:1rem; }
  .app.compacto .contenido{ margin-left:0; }
  .app.compacto .barra{ left:0; }
}

/* ========================= COMPONENTES ============================= */
.tarjeta{
  background:var(--c-superficie); border:1px solid var(--c-borde);
  border-radius:var(--r-lg); box-shadow:var(--sombra-sm);
}
.tarjeta__cab{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:1rem 1.2rem; border-bottom:1px solid var(--c-borde);
}
.tarjeta__cab h3{ margin:0; }
.tarjeta__cuerpo{ padding:1.2rem; }
.tarjeta__pie{ padding:.85rem 1.2rem; border-top:1px solid var(--c-borde); background:var(--c-superficie-2);
  border-radius:0 0 var(--r-lg) var(--r-lg); }

.rejilla{ display:grid; gap:1.1rem; }
.rejilla.c2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.rejilla.c3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.rejilla.c4{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }

/* KPI */
.kpi{
  position:relative; overflow:hidden; padding:1.15rem 1.25rem;
  background:var(--c-superficie); border:1px solid var(--c-borde);
  border-radius:var(--r-lg); box-shadow:var(--sombra-sm);
  transition:transform var(--trans),box-shadow var(--trans);
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--sombra); }
.kpi__icono{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.8rem;
}
.kpi__icono svg{ width:21px; height:21px; }
.kpi__etq{ font-size:.76rem; color:var(--c-texto-suave); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.kpi__val{ font-size:1.65rem; font-weight:700; letter-spacing:-.02em; margin:.15rem 0 .1rem; }
.kpi__nota{ font-size:.78rem; color:var(--c-texto-suave); }
.kpi--azul   .kpi__icono{ background:var(--c-primario-suave); color:var(--c-primario); }
.kpi--verde  .kpi__icono{ background:var(--c-exito-suave);    color:var(--c-exito); }
.kpi--rojo   .kpi__icono{ background:var(--c-peligro-suave);  color:var(--c-peligro); }
.kpi--ambar  .kpi__icono{ background:var(--c-aviso-suave);    color:var(--c-aviso); }
.kpi--cian   .kpi__icono{ background:var(--c-info-suave);     color:var(--c-info); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:10px; border:1px solid transparent;
  font-size:.88rem; font-weight:600; font-family:inherit; cursor:pointer;
  transition:var(--trans); white-space:nowrap; text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn svg{ width:17px; height:17px; }
.btn--primario{ background:var(--c-primario); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.3); }
.btn--primario:hover{ background:var(--c-primario-osc); color:#fff; }
.btn--exito{ background:var(--c-exito); color:#fff; }
.btn--peligro{ background:var(--c-peligro); color:#fff; }
.btn--aviso{ background:var(--c-aviso); color:#fff; }
.btn--wa{ background:#25D366; color:#fff; }
.btn--wa:hover{ background:#1da851; color:#fff; }
.btn--claro{ background:var(--c-superficie); border-color:var(--c-borde); color:var(--c-texto); }
.btn--claro:hover{ background:var(--c-superficie-2); color:var(--c-texto); }
.btn--fantasma{ background:transparent; color:var(--c-texto-suave); }
.btn--fantasma:hover{ background:var(--c-superficie-2); color:var(--c-texto); }
.btn--sm{ padding:.34rem .68rem; font-size:.79rem; border-radius:8px; }
.btn--bloque{ width:100%; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* Formularios */
.campo{ margin-bottom:1rem; }
.campo label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.32rem; color:var(--c-texto); }
.campo .obl{ color:var(--c-peligro); }
.control{
  width:100%; padding:.58rem .78rem; font-size:.9rem; font-family:inherit;
  color:var(--c-texto); background:var(--c-superficie);
  border:1px solid var(--c-borde); border-radius:10px; transition:var(--trans);
}
.control:focus{ outline:none; border-color:var(--c-primario); box-shadow:0 0 0 3px var(--c-primario-suave); }
.control[readonly]{ background:var(--c-superficie-2); color:var(--c-texto-suave); }
textarea.control{ min-height:92px; resize:vertical; }
select.control{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:16px; padding-right:2rem; }
.campo .ayuda{ font-size:.76rem; color:var(--c-texto-suave); margin-top:.25rem; }
.campo .error{ font-size:.78rem; color:var(--c-peligro); margin-top:.25rem; display:block; }
.control.mal{ border-color:var(--c-peligro); }
.fila{ display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.check{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; cursor:pointer; }
.check input{ width:17px; height:17px; accent-color:var(--c-primario); }

/* Tablas */
.tabla-env{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tabla{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:640px; }
table.tabla th{
  text-align:left; padding:.68rem .85rem; font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.055em; color:var(--c-texto-suave);
  background:var(--c-superficie-2); border-bottom:1px solid var(--c-borde); white-space:nowrap;
}
table.tabla td{ padding:.7rem .85rem; border-bottom:1px solid var(--c-borde); vertical-align:middle; }
table.tabla tbody tr:hover{ background:var(--c-superficie-2); }
table.tabla tbody tr:last-child td{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.acciones{ display:flex; gap:.3rem; justify-content:flex-end; }

/* Badges y píldoras */
.badge{
  display:inline-block; padding:.16rem .55rem; border-radius:999px;
  font-size:.73rem; font-weight:650; line-height:1.5; white-space:nowrap;
}
.badge--exito  { background:var(--c-exito-suave);   color:var(--c-exito); }
.badge--peligro{ background:var(--c-peligro-suave); color:var(--c-peligro); }
.badge--aviso  { background:var(--c-aviso-suave);   color:var(--c-aviso); }
.badge--info   { background:var(--c-info-suave);    color:var(--c-info); }
.badge--neutro { background:var(--c-neutro-suave);  color:var(--c-neutro); }

/* Alertas */
.alerta{
  display:flex; gap:.7rem; align-items:flex-start; padding:.8rem 1rem;
  border-radius:var(--r-md); font-size:.88rem; margin-bottom:1rem; border:1px solid transparent;
}
.alerta svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; }
.alerta--success{ background:var(--c-exito-suave);   color:var(--c-exito);   border-color:color-mix(in srgb,var(--c-exito) 25%,transparent); }
.alerta--danger { background:var(--c-peligro-suave); color:var(--c-peligro); border-color:color-mix(in srgb,var(--c-peligro) 25%,transparent); }
.alerta--warning{ background:var(--c-aviso-suave);   color:var(--c-aviso);   border-color:color-mix(in srgb,var(--c-aviso) 25%,transparent); }
.alerta--info   { background:var(--c-info-suave);    color:var(--c-info);    border-color:color-mix(in srgb,var(--c-info) 25%,transparent); }
.alerta__x{ margin-left:auto; background:none; border:0; cursor:pointer; color:inherit; opacity:.6; font-size:1.1rem; line-height:1; }

/* Encabezado de página */
.pagina-cab{
  display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem;
}
.pagina-cab h1{ margin:0; }
.pagina-cab p{ margin:.15rem 0 0; color:var(--c-texto-suave); font-size:.88rem; }
.pagina-cab .acc{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

/* Filtros */
.filtros{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.filtros .campo{ margin:0; min-width:150px; flex:1 1 150px; }
.filtros .campo label{ font-size:.74rem; }

/* Paginación */
.paginacion{ display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; }
.paginacion a,.paginacion span{
  min-width:34px; height:34px; padding:0 .5rem; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--c-borde); font-size:.83rem;
  color:var(--c-texto); background:var(--c-superficie);
}
.paginacion a:hover{ background:var(--c-superficie-2); text-decoration:none; }
.paginacion .actual{ background:var(--c-primario); border-color:var(--c-primario); color:#fff; font-weight:650; }
.paginacion .inerte{ opacity:.45; pointer-events:none; }

/* Vacío */
.vacio{ padding:2.6rem 1rem; text-align:center; color:var(--c-texto-suave); }
.vacio svg{ width:42px; height:42px; opacity:.35; margin-bottom:.6rem; }
.vacio p{ margin:.2rem 0; font-size:.9rem; }

/* Modal */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:1rem;
  background:rgba(8,15,28,.6); backdrop-filter:blur(3px);
}
.modal.abierto{ display:flex; }
.modal__caja{
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--c-superficie); border-radius:var(--r-lg); box-shadow:var(--sombra-lg);
  animation:aparece .18s ease-out;
}
@keyframes aparece{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
.modal__cab{ display:flex; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--c-borde); }
.modal__cab h3{ margin:0; }
.modal__cab button{ margin-left:auto; background:none; border:0; font-size:1.4rem; line-height:1;
  cursor:pointer; color:var(--c-texto-suave); }
.modal__cuerpo{ padding:1.2rem; }
.modal__pie{ display:flex; gap:.5rem; justify-content:flex-end; padding:1rem 1.2rem;
  border-top:1px solid var(--c-borde); background:var(--c-superficie-2);
  border-radius:0 0 var(--r-lg) var(--r-lg); }

/* Lista de datos */
.datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem 1.4rem; }
.dato__etq{ font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-texto-suave); font-weight:650; }
.dato__val{ font-size:.94rem; font-weight:550; word-break:break-word; }

/* Línea de tiempo / listas compactas */
.lista-compacta{ list-style:none; margin:0; padding:0; }
.lista-compacta li{
  display:flex; align-items:center; gap:.8rem; padding:.65rem 0;
  border-bottom:1px solid var(--c-borde); font-size:.87rem;
}
.lista-compacta li:last-child{ border-bottom:0; }
.lista-compacta .der{ margin-left:auto; text-align:right; }
.lista-compacta small{ display:block; color:var(--c-texto-suave); font-size:.76rem; }

/* Barra de progreso */
.progreso{ height:7px; border-radius:999px; background:var(--c-neutro-suave); overflow:hidden; }
.progreso span{ display:block; height:100%; border-radius:999px; background:var(--c-primario); }

/* Gráficos SVG */
.grafico{ width:100%; height:auto; aspect-ratio:800/260; }
.grafico text{ font-size:10px; fill:var(--c-texto-suave); font-family:var(--fuente); }
.grafico .malla{ stroke:var(--c-borde); stroke-width:1; }
.leyenda{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.79rem; color:var(--c-texto-suave); margin-top:.5rem; }
.leyenda i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.35rem; }

/* Pestañas */
.pestanas{ display:flex; gap:.25rem; border-bottom:1px solid var(--c-borde); margin-bottom:1.2rem; overflow-x:auto; }
.pestanas a{
  padding:.6rem .95rem; font-size:.88rem; font-weight:600; color:var(--c-texto-suave);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.pestanas a:hover{ color:var(--c-texto); text-decoration:none; }
.pestanas a.activo{ color:var(--c-primario); border-bottom-color:var(--c-primario); }

/* ------------------------- LOGIN ----------------------------------- */
.login{
  min-height:100vh; display:grid; place-items:center; padding:1.2rem;
  background:radial-gradient(1100px 600px at 12% -10%,#1e3a8a 0%,transparent 55%),
             radial-gradient(900px 500px at 100% 100%,#4c1d95 0%,transparent 55%),
             #0b1220;
}
.login__caja{
  width:100%; max-width:420px; background:var(--c-superficie);
  border-radius:20px; box-shadow:0 26px 60px rgba(2,8,23,.5); padding:2.1rem 1.9rem;
}
.login__logo{
  width:56px; height:56px; margin:0 auto .9rem; border-radius:17px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1.25rem; box-shadow:0 8px 22px rgba(59,130,246,.42);
}
.login h1{ text-align:center; font-size:1.32rem; margin-bottom:.2rem; }
.login__sub{ text-align:center; color:var(--c-texto-suave); font-size:.86rem; margin-bottom:1.5rem; }
.login__pie{ text-align:center; margin-top:1.4rem; font-size:.76rem; color:var(--c-texto-suave); }
.login .clave-env{ position:relative; }
.login .clave-env button{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:var(--c-texto-suave); padding:.2rem;
}

/* --------------------------- RECIBO -------------------------------- */
.recibo{ max-width:760px; margin:2rem auto; background:#fff; color:#111827;
  border-radius:var(--r-lg); box-shadow:var(--sombra); padding:2rem; }
.recibo__cab{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom:2px solid #111827; padding-bottom:1rem; margin-bottom:1.3rem; }
.recibo__tot{ font-size:1.5rem; font-weight:800; }
.recibo table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.recibo table th,.recibo table td{ padding:.55rem .3rem; border-bottom:1px solid #e5e7eb; text-align:left; }
.recibo__firma{ margin-top:3rem; display:flex; gap:3rem; justify-content:space-around; text-align:center; font-size:.8rem; }
.recibo__firma div{ border-top:1px solid #9ca3af; padding-top:.4rem; min-width:190px; }

@media print{
  .no-imprimir,.menu,.barra{ display:none !important; }
  body{ background:#fff; }
  .recibo{ box-shadow:none; margin:0; max-width:none; }
}

/* --------------------------- UTILIDADES ---------------------------- */
.txt-suave{ color:var(--c-texto-suave); }
.txt-exito{ color:var(--c-exito); }
.txt-peligro{ color:var(--c-peligro); }
.txt-aviso{ color:var(--c-aviso); }
.txt-c{ text-align:center; } .txt-d{ text-align:right; }
.pequeno{ font-size:.79rem; }
.negrita{ font-weight:700; }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:.5rem } .mb-2{ margin-bottom:1rem } .mb-3{ margin-bottom:1.5rem }
.flex{ display:flex; gap:.6rem; align-items:center; }
.flex-wrap{ flex-wrap:wrap; }
.ml-auto{ margin-left:auto; }
.oculto{ display:none !important; }
.nowrap{ white-space:nowrap; }
.cargando{ opacity:.55; pointer-events:none; }

/* Notificación emergente */
.toast-env{ position:fixed; right:1rem; bottom:1rem; z-index:200; display:flex;
  flex-direction:column; gap:.5rem; max-width:min(360px,92vw); }
.toast{
  padding:.75rem 1rem; border-radius:var(--r-md); font-size:.87rem;
  background:var(--c-superficie); border:1px solid var(--c-borde);
  box-shadow:var(--sombra-lg); animation:aparece .2s ease-out;
}
.toast--ok{ border-left:4px solid var(--c-exito); }
.toast--err{ border-left:4px solid var(--c-peligro); }