/* ============================================================
   ELECTIONSOFT — Hoja de estilos
   Identidad: azul #2E4A9E, rojo #E8323C
   Enfoque movil primero: el sistema se usa en la calle, desde el celular.
   ============================================================ */
@layer base, componentes, layout, utilidades;

:root{
  --azul:#2E4A9E; --azul-osc:#22376F; --azul-claro:#EDF1FB; --azul-vivo:#3B5CC0;
  --rojo:#E8323C; --rojo-osc:#C21F2C;
  --tinta:#26324D; --gris:#6B7590; --gris-claro:#8A93A8;
  --linea:#E2E6F0; --fondo:#F4F6FB; --blanco:#fff;
  --ok:#1D9E5F; --alerta:#E9A23B;
  --sombra:0 1px 3px rgb(38 50 77 / .08), 0 4px 12px rgb(38 50 77 / .06);
  --sombra-alta:0 10px 40px rgb(38 50 77 / .18);
  --radio:14px; --radio-chico:9px;
  --nav-alto:3.5rem;
  --tap:2.75rem;              /* area tactil comoda */
}

@layer base{
  *,*::before,*::after{ box-sizing:border-box }
  *{ margin:0; padding:0 }

  html{ -webkit-text-size-adjust:100% }
  body{
    font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    background:var(--fondo); color:var(--tinta);
    font-size:clamp(.95rem, .9rem + .2vw, 1rem);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:var(--azul); text-decoration:none }
  a:hover{ text-decoration:underline }
  h1,h2,h3{ line-height:1.25; text-wrap:balance }
  img{ max-width:100%; height:auto }

  /* Foco visible y consistente para teclado */
  :focus-visible{ outline:3px solid var(--azul-vivo); outline-offset:2px; border-radius:4px }

  /* Areas tactiles comodas en pantallas tactiles */
  @media (pointer:coarse){
    :where(button,.btn,a.btn,select,input[type=checkbox],input[type=radio]){
      min-block-size:var(--tap);
    }
  }
  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  }
}

/* ============================================================
   PORTADA DE INGRESO
   Fuera de @layer a proposito: son paginas independientes y asi
   sus estilos siempre ganan, pase lo que pase con el resto.
   ============================================================ */
.login-wrap{
  min-block-size:100dvh; display:grid; grid-template-columns:1fr;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgb(59 92 192 / .55), transparent 60%),
    radial-gradient(900px 500px at 85% 90%, rgb(232 50 60 / .30), transparent 55%),
    linear-gradient(140deg, var(--azul-osc) 0%, var(--azul) 55%, #1B2C5C 100%);
}
/* patron sutil de puntos sobre el degradado */
.login-wrap::before{
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image:radial-gradient(rgb(255 255 255 / .10) 1px, transparent 1px);
  background-size:26px 26px;
}

.login-marca{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  gap:1.5rem; padding:clamp(1.75rem, 5vw, 4rem); color:#fff;
}
.login-marca h1{
  font-size:clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem); font-weight:800; letter-spacing:-.5px;
}
.login-marca h1 span{ color:#FF8A90 }
.login-marca .lema{
  font-size:clamp(1rem, .95rem + .5vw, 1.35rem); opacity:.94; max-inline-size:34ch; text-wrap:pretty;
}
.login-puntos{ display:grid; gap:.85rem; margin-block-start:.5rem }
.login-puntos li{ display:flex; gap:.7rem; align-items:flex-start; list-style:none; font-size:.98rem; opacity:.95 }
.login-puntos .ico{
  flex:0 0 auto; inline-size:1.75rem; block-size:1.75rem; border-radius:50%;
  background:rgb(255 255 255 / .16); display:grid; place-items:center; font-size:.95rem;
}
.login-cifras{ display:flex; gap:clamp(1rem,4vw,2.5rem); flex-wrap:wrap; margin-block-start:.5rem }
.login-cifras b{ display:block; font-size:clamp(1.35rem,1rem + 1.6vw,2rem); line-height:1.1 }
.login-cifras small{ opacity:.8; font-size:.82rem }
/* Bloque de soporte: es hijo directo de .login-wrap para poder quedar
   abajo a la izquierda en escritorio y al final de todo en movil. */
.login-soporte{
  position:relative; color:#fff; font-size:.9rem; opacity:.92;
  padding:1.1rem clamp(1.75rem,5vw,4rem) clamp(1.5rem,4vw,3rem);
  border-block-start:1px solid rgb(255 255 255 / .18);
}
.login-soporte a{ color:#fff; text-decoration:underline }
.login-soporte .marca-sitio{ font-weight:700; letter-spacing:.3px }
.login-soporte .marca-sitio a{ text-decoration:none }
.login-soporte .marca-sitio a:hover{ text-decoration:underline }
.pie-legal{ margin-block-start:.5rem; font-size:.82rem; opacity:.85 }

.login-panel{ position:relative; display:grid; place-items:center; padding:clamp(1rem,4vw,2.5rem) }
.login-caja{
  inline-size:min(26rem, 100%); background:var(--blanco); border-radius:18px;
  box-shadow:var(--sombra-alta); padding:clamp(1.5rem, 1rem + 2vw, 2.4rem); text-align:center;
}
.login-caja img{
  display:block; margin-inline:auto; margin-block-end:1.1rem;
  inline-size:min(11rem,70%); block-size:auto;
}
.login-caja h2{ font-size:1.15rem; font-weight:700 }
.login-caja h2 .rojo{ color:var(--rojo) }
.login-caja .sub{ color:var(--gris); font-size:.85rem; margin-block-start:.15rem }
.login-caja form{ margin-block-start:1.4rem }
.login-pie{ margin-block-start:1.1rem; font-size:.88rem; display:grid; gap:.55rem }

/* --- Escritorio: dos columnas, soporte anclado abajo a la izquierda --- */
@media (min-width:60rem){
  .login-wrap{ grid-template-columns:1.15fr 1fr; grid-template-rows:1fr auto }
  .login-marca{ grid-column:1; grid-row:1 }
  .login-panel{ grid-column:2; grid-row:1 / -1; background:rgb(255 255 255 / .06); backdrop-filter:blur(2px) }
  .login-soporte{ grid-column:1; grid-row:2 }
}

/* --- Movil: logo arriba, tarjeta centrada y soporte al final --- */
@media (max-width:59.99rem){
  /* la fila del formulario absorbe el espacio sobrante: la tarjeta queda
     centrada y el soporte siempre al pie de la pantalla */
  .login-wrap{ grid-template-rows:auto 1fr auto }
  .login-marca{
    padding:1.75rem 1.25rem .75rem; gap:.85rem; text-align:center; justify-content:flex-start;
  }
  .login-marca h1{ font-size:clamp(1.3rem, 1rem + 2.6vw, 1.85rem); line-height:1.2 }
  .login-marca h1 br{ display:none }
  .login-marca .lema{ font-size:.95rem; max-inline-size:42ch; margin-inline:auto }
  .login-puntos{ display:none }
  .login-cifras{ display:none }
  .login-panel{ padding:1rem 1rem 1.5rem }
  /* el logo vive sobre el blanco de la tarjeta, nunca sobre el azul */
  .login-caja img{ inline-size:min(8rem,48%); margin-block-end:.85rem }
  .login-caja h2{ font-size:1.1rem }
  .login-soporte{ text-align:center; padding-block:1rem 1.5rem }
}
/* Pantallas muy bajas o muy angostas: se quita el lema para que el
   formulario quede visible sin desplazar. */
@media (max-width:59.99rem) and (max-height:44rem){
  .login-marca .lema{ display:none }
  .login-marca{ padding-block:1.1rem .25rem }
}

/* ============================================================
   PANTALLA DE BIENVENIDA (inscripcion de lideres)
   Fuera de @layer: es una pagina publica independiente.
   ============================================================ */
.sin-scroll{ overflow:hidden }

.bienvenida{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(900px 600px at 20% 15%, rgb(29 158 95 / .55), transparent 62%),
    radial-gradient(800px 600px at 85% 85%, rgb(46 74 158 / .65), transparent 60%),
    linear-gradient(150deg, #16794A 0%, #22376F 55%, #1B2C5C 100%);
  opacity:0; transition:opacity .5s ease;
  cursor:pointer;
}
.bienvenida.visible{ opacity:1 }
.bienvenida.saliendo{ opacity:0; transition:opacity .65s ease }

.bienvenida-caja{
  text-align:center; color:#fff; max-inline-size:34rem;
  transform:translateY(1.5rem) scale(.96);
  transition:transform .6s cubic-bezier(.2,.9,.3,1.2);
}
.bienvenida.visible .bienvenida-caja{ transform:none }
.bienvenida.saliendo .bienvenida-caja{ transform:translateY(-1rem) scale(.98) }

.bienvenida-check{
  inline-size:5rem; block-size:5rem; margin-inline:auto; margin-block-end:1.5rem;
  border-radius:50%; display:grid; place-items:center;
  background:rgb(255 255 255 / .15); border:3px solid rgb(255 255 255 / .55);
  font-size:2.4rem; line-height:1; color:#fff;
  animation:bv-latido 2.2s ease-in-out infinite;
}
@keyframes bv-latido{
  0%,100%{ transform:scale(1);   box-shadow:0 0 0 0 rgb(255 255 255 / .30) }
  50%    { transform:scale(1.06); box-shadow:0 0 0 1.1rem rgb(255 255 255 / 0) }
}

.bienvenida h1{
  font-size:clamp(2.6rem, 1.6rem + 6vw, 5rem);
  font-weight:800; line-height:1.02; letter-spacing:-1px;
  margin-block-end:1.1rem; text-wrap:balance;
}
.bienvenida p{
  font-size:clamp(1.05rem, .95rem + .7vw, 1.4rem);
  opacity:.95; line-height:1.55; text-wrap:pretty;
}
.bienvenida p b{ color:#8FF0BE }

.bienvenida-barra{
  inline-size:min(20rem, 80%); block-size:.4rem; margin-inline:auto; margin-block-start:2.2rem;
  background:rgb(255 255 255 / .22); border-radius:999px; overflow:hidden;
}
.bienvenida-barra span{
  display:block; block-size:100%; inline-size:0;
  background:linear-gradient(90deg,#8FF0BE,#fff);
  border-radius:999px;
  animation:bv-carga 4s linear forwards;
}
@keyframes bv-carga{ from{ inline-size:0 } to{ inline-size:100% } }

@media (prefers-reduced-motion:reduce){
  .bienvenida-check{ animation:none }
  .bienvenida-barra span{ animation-duration:4s }
  .bienvenida-caja{ transition:none; transform:none }
}

/* Aviso de correo ya registrado */
.aviso-correo{
  background:#FDF3F4; border:1px solid #F5C2C7; border-radius:var(--radio);
  padding:1.2rem; text-align:center; margin-block:1rem;
}
.aviso-correo .icono{ font-size:2rem; line-height:1; margin-block-end:.4rem }
.aviso-correo b{ display:block; color:#8E1620; font-size:1.05rem; margin-block-end:.4rem }
.aviso-correo p{ color:var(--gris); font-size:.92rem; margin-block-end:1rem; text-wrap:pretty }

/* ============================================================
   DOCUMENTOS LEGALES PUBLICOS
   ============================================================ */
.doc-body{ background:#F4F6FB; color:var(--tinta) }
.doc-cabecera{
  background:var(--azul-osc); color:#fff; padding:1rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.doc-logo{ display:block; background:#fff; border-radius:10px; padding:.4rem .6rem; line-height:0 }
.doc-logo img{ inline-size:7rem; block-size:auto; display:block }
.doc-nav{ display:flex; gap:.35rem; flex-wrap:wrap; flex:1 }
.doc-nav a{
  color:#D6DEF5; text-decoration:none; font-size:.85rem; padding:.4rem .7rem;
  border-radius:999px; border:1px solid rgb(255 255 255 / .18);
}
.doc-nav a:hover{ background:rgb(255 255 255 / .12) }
.doc-nav a.activo{ background:#fff; color:var(--azul-osc); font-weight:600; border-color:#fff }

.doc{
  max-inline-size:52rem; margin-inline:auto; background:#fff;
  padding:clamp(1.25rem,4vw,3rem); margin-block:clamp(1rem,3vw,2rem);
  border-radius:14px; box-shadow:var(--sombra); line-height:1.65;
}
.doc h1{ font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem); color:var(--azul-osc); margin-block-end:.4rem }
.doc h2{
  font-size:1.12rem; color:var(--azul); margin-block:2rem .6rem;
  padding-block-end:.35rem; border-block-end:2px solid var(--linea);
}
.doc p{ margin-block:.7rem }
.doc .doc-lema{ color:var(--gris); font-size:1rem; margin-block-end:1.5rem }
.doc-lista{ margin-block:.7rem; padding-inline-start:1.4rem; display:grid; gap:.5rem }
.doc-lista li{ text-wrap:pretty }
.doc-aviso{
  background:#FFF6E5; border-inline-start:4px solid var(--alerta);
  padding:1rem 1.1rem; border-radius:0 10px 10px 0; margin-block:1.2rem;
}
.doc-cita{
  margin:1rem 0; padding:1rem 1.2rem; background:#F4F6FB;
  border-inline-start:4px solid var(--azul); border-radius:0 10px 10px 0;
}
.doc-cita p{ margin-block:.6rem }
.doc-tabla{ overflow-x:auto; margin-block:1rem }
.doc-firma{
  margin-block-start:2.5rem; padding-block-start:1.25rem;
  border-block-start:1px solid var(--linea); font-size:.9rem; color:var(--gris);
}
.doc-version{ font-size:.82rem }
.doc-volver{ margin-block-start:1.5rem }
.doc a{ color:var(--azul) }

/* Casilla de aceptacion de la politica de datos */
.campo.acepto label{
  display:flex; gap:.6rem; align-items:flex-start;
  font-weight:400; font-size:.88rem; line-height:1.5; cursor:pointer;
}
.campo.acepto input[type=checkbox]{
  inline-size:1.15rem; block-size:1.15rem; min-block-size:auto;
  flex:0 0 auto; margin-block-start:.15rem; accent-color:var(--azul);
}
.campo.acepto .ayuda{ margin-block-start:.5rem }

/* Enlaces legales bajo la tarjeta de ingreso */
.login-legal{ margin-block-start:.9rem; font-size:.8rem; color:var(--gris); line-height:1.6 }
.login-legal a{ color:var(--gris); text-decoration:underline }

/* ============================================================
   ESTRUCTURA DE LA APLICACION
   ============================================================ */
@layer layout{
  .app{ display:flex; min-block-size:100dvh }

  .sidebar{
    inline-size:15rem; flex-shrink:0; background:var(--azul-osc); color:#C9D3F0;
    display:flex; flex-direction:column;
  }
  .sidebar .marca{
    display:flex; align-items:center; gap:.65rem; padding:1.1rem;
    border-block-end:1px solid rgb(255 255 255 / .08);
  }
  .sidebar .marca img{
    inline-size:2.4rem; block-size:2.4rem; object-fit:contain;
    background:#fff; border-radius:8px; padding:3px;
  }
  .sidebar .marca b{ color:#fff; font-size:.95rem }
  .sidebar .marca b span{ color:#FF8A90 }
  .sidebar nav{ flex:1; padding-block:.75rem; overflow-y:auto }
  .sidebar nav a{
    display:flex; align-items:center; gap:.65rem; color:#C9D3F0;
    padding:.7rem 1.1rem; font-size:.9rem; border-inline-start:3px solid transparent;
    min-block-size:var(--tap);
  }
  .sidebar nav a:hover{ background:rgb(255 255 255 / .07); color:#fff; text-decoration:none }
  .sidebar nav a.activo{
    background:rgb(232 50 60 / .16); border-inline-start-color:var(--rojo);
    color:#fff; font-weight:600;
  }
  .sidebar nav .sep{
    padding:1rem 1.1rem .4rem; font-size:.7rem; text-transform:uppercase;
    letter-spacing:.9px; color:#7C89B3;
  }
  .sidebar .pie{
    padding:.9rem 1.1rem; font-size:.78rem; color:#7C89B3;
    border-block-start:1px solid rgb(255 255 255 / .08);
  }
  .sidebar .pie-legal{ margin-block-start:.4rem; font-size:.72rem; line-height:1.6 }
  .sidebar .pie-legal a{ color:#7C89B3; text-decoration:underline }

  .principal{ flex:1; display:flex; flex-direction:column; min-inline-size:0 }

  .topbar{
    background:var(--blanco); border-block-end:1px solid var(--linea);
    padding-inline:clamp(.85rem,3vw,1.6rem); min-block-size:var(--nav-alto);
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    position:sticky; inset-block-start:0; z-index:50;
  }
  .topbar h2{ font-size:clamp(1rem,.9rem + .5vw,1.15rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .topbar .der{ display:flex; align-items:center; gap:.75rem; flex-shrink:0 }

  .btn-menu{
    display:none; background:none; border:0; color:var(--azul-osc);
    font-size:1.5rem; line-height:1; cursor:pointer; padding:.35rem .5rem;
    min-inline-size:var(--tap); min-block-size:var(--tap);
  }

  .contenido{ padding:clamp(.85rem,3vw,1.6rem); flex:1 }

  /* ---- Movil: menu lateral deslizable ---- */
  @media (max-width:56.25rem){
    .btn-menu{ display:block }
    .sidebar{
      position:fixed; inset-block:0; inset-inline-start:0; z-index:100;
      inline-size:min(17rem,82vw); transform:translateX(-102%);
      transition:transform .22s ease; box-shadow:var(--sombra-alta);
    }
    .app.menu-abierto .sidebar{ transform:translateX(0) }
    .velo{
      position:fixed; inset:0; background:rgb(20 28 48 / .5); z-index:99;
      opacity:0; visibility:hidden; transition:opacity .22s ease;
    }
    .app.menu-abierto .velo{ opacity:1; visibility:visible }
    .chip-usuario .datos{ display:none }
  }
}

/* ============================================================
   COMPONENTES
   ============================================================ */
@layer componentes{
  .tarjeta{
    background:var(--blanco); border-radius:var(--radio); box-shadow:var(--sombra);
    padding:clamp(1rem,.8rem + 1vw,1.4rem); margin-block-end:1.1rem;
  }
  .tarjeta h3{ font-size:.98rem; margin-block-end:.9rem; color:var(--azul-osc) }

  .grid{ display:grid; gap:1.1rem }
  .grid.c2{ grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)) }
  .grid.c3{ grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)) }
  .grid.c4{ grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)) }

  .kpi{
    background:var(--blanco); border-radius:var(--radio); box-shadow:var(--sombra);
    padding:1rem 1.1rem; position:relative; overflow:hidden;
  }
  .kpi::before{ content:''; position:absolute; inset-block:0; inset-inline-start:0; inline-size:4px; background:var(--azul) }
  .kpi.rojo::before{ background:var(--rojo) }
  .kpi.ok::before{ background:var(--ok) }
  .kpi.alerta::before{ background:var(--alerta) }
  .kpi .titulo{ font-size:.72rem; color:var(--gris); text-transform:uppercase; letter-spacing:.5px }
  .kpi .valor{ font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); font-weight:800; color:var(--azul-osc); margin-block-start:.15rem; line-height:1.15 }
  .kpi .detalle{ font-size:.78rem; color:var(--gris); margin-block-start:.15rem }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    background:var(--azul); color:#fff; border:0; border-radius:var(--radio-chico);
    padding:.6rem 1.1rem; font-size:.9rem; font-weight:600; cursor:pointer;
    transition:background .15s ease; text-align:center; min-block-size:2.5rem;
  }
  .btn:hover:not(:disabled){ background:var(--azul-osc); text-decoration:none; color:#fff }
  .btn.rojo{ background:var(--rojo) } .btn.rojo:hover:not(:disabled){ background:var(--rojo-osc) }
  .btn.claro{ background:var(--azul-claro); color:var(--azul) }
  .btn.claro:hover:not(:disabled){ background:#DDE5F8; color:var(--azul-osc) }
  .btn.ok{ background:var(--ok) } .btn.ok:hover:not(:disabled){ background:#157A48 }
  .btn.chico{ padding:.4rem .75rem; font-size:.8rem; min-block-size:2.1rem }
  .btn:disabled{ opacity:.5; cursor:not-allowed }
  .btn.ancho{ inline-size:100% }

  form .campo{ margin-block-end:.9rem; text-align:start }
  label{ display:block; font-size:.85rem; font-weight:600; margin-block-end:.3rem }
  :where(input[type=text],input[type=email],input[type=password],input[type=number],
         input[type=date],input[type=tel],select,textarea){
    inline-size:100%; border:1.5px solid var(--linea); border-radius:var(--radio-chico);
    padding:.6rem .75rem; font-size:1rem;   /* 1rem evita el zoom automatico en iOS */
    background:#fff; color:var(--tinta); font-family:inherit; min-block-size:2.6rem;
  }
  :where(input,select,textarea):focus{ outline:none; border-color:var(--azul) }
  textarea{ min-block-size:5rem; resize:vertical }
  .ayuda{ font-size:.78rem; color:var(--gris); margin-block-start:.25rem; text-wrap:pretty }

  /* ---- Tablas: en movil se convierten en tarjetas ---- */
  table.tabla{
    inline-size:100%; border-collapse:collapse; background:#fff;
    border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
  }
  table.tabla th{
    background:var(--azul-claro); color:var(--azul-osc); text-align:start;
    padding:.65rem .8rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  }
  table.tabla td{ padding:.65rem .8rem; border-block-start:1px solid var(--linea); font-size:.9rem }
  table.tabla tr:hover td{ background:#FAFBFE }

  @media (max-width:48rem){
    table.tabla{ display:block; background:transparent; box-shadow:none }
    table.tabla thead{ display:none }
    table.tabla tbody,table.tabla tr,table.tabla td{ display:block; inline-size:100% }
    table.tabla tr{
      background:#fff; border-radius:var(--radio); box-shadow:var(--sombra);
      margin-block-end:.75rem; padding:.5rem .25rem; border:0;
    }
    table.tabla tr:hover td{ background:transparent }
    table.tabla td{
      border:0; border-block-end:1px solid var(--linea); padding:.55rem .85rem;
      display:flex; justify-content:space-between; gap:1rem; align-items:center;
    }
    table.tabla td:last-child{ border-block-end:0 }
    table.tabla td::before{
      content:attr(data-col); font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
      color:var(--gris); font-weight:700; flex:0 0 auto;
    }
    table.tabla td:not([data-col])::before{ content:none }
    table.tabla td > *{ text-align:end }
    .acciones-fila{ justify-content:flex-end }
  }

  .badge{
    display:inline-block; padding:.15rem .6rem; border-radius:20px;
    font-size:.72rem; font-weight:700; white-space:nowrap;
  }
  .badge.azul{ background:var(--azul-claro); color:var(--azul) }
  .badge.verde{ background:#E3F6EC; color:#136B41 }
  .badge.rojo{ background:#FDE8EA; color:#8E1620 }
  .badge.gris{ background:#EEF0F5; color:var(--gris) }
  .badge.ambar{ background:#FCF3E3; color:#8A5A0B }

  .flash{
    padding:.75rem 1rem; border-radius:var(--radio-chico); margin-block-end:1rem;
    font-size:.9rem; text-wrap:pretty;
  }
  .flash.ok{ background:#E3F6EC; color:#136B41; border:1px solid #BDE8D2 }
  .flash.error{ background:#FDE8EA; color:#8E1620; border:1px solid #F5C2C7 }
  .flash.info{ background:var(--azul-claro); color:var(--azul-osc); border:1px solid #C9D6F2 }
  .flash.aviso{ background:#FCF3E3; color:#8A5A0B; border:1px solid #F0DDB8 }

  /* --- Asistente --- */
  .ia-cupo{
    display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
    background:var(--azul-claro); color:var(--azul-osc);
    border-radius:var(--radio); padding:.8rem 1.1rem; margin-block-end:1rem;
  }
  .ia-cupo b{ font-size:1.35rem }
  .ia-cupo.pocas{ background:#FFF6E5; color:#8A5A0B }
  .ia-conversa{
    max-block-size:26rem; overflow-y:auto; display:grid; gap:.7rem;
    padding:.9rem; background:var(--fondo); border-radius:var(--radio);
  }
  .ia-msg{ padding:.7rem .9rem; border-radius:14px; font-size:.94rem; line-height:1.55; max-inline-size:85%; text-wrap:pretty }
  .ia-msg.yo{ background:var(--azul); color:#fff; justify-self:end; border-end-end-radius:4px }
  .ia-msg.bot{ background:var(--blanco); border:1px solid var(--linea); justify-self:start; border-end-start-radius:4px }
  .ia-msg.error{ background:#FDE8EA; color:#8E1620; border:1px solid #F5C2C7; justify-self:start }
  .ia-msg.pensando{ color:var(--gris); font-style:italic }
  .ia-sugeridas{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-block-start:.9rem }
  .ia-chip{
    background:var(--blanco); border:1px solid var(--linea); border-radius:999px;
    padding:.4rem .8rem; font-size:.82rem; cursor:pointer; color:var(--tinta); font-family:inherit;
    min-block-size:auto;
  }
  .ia-chip:hover{ border-color:var(--azul); color:var(--azul) }

  /* --- Fuera de zona --- */
  .sidebar nav a.alerta{ color:#FFC9CC; font-weight:600 }
  .sidebar nav a.alerta .num{
    margin-inline-start:auto; background:var(--rojo); color:#fff;
    border-radius:999px; padding:.05rem .45rem; font-size:.72rem; font-weight:700;
  }
  .zona-alerta{ border-inline-start:5px solid var(--rojo); background:#FDF3F4 }
  .zona-alerta h3{ color:var(--rojo-osc) }
  .zona-alerta p{ text-wrap:pretty }
  .zona-cabecera{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:1rem; flex-wrap:wrap;
  }

  /* --- Estacion de validacion --- */
  .val-estacion{ max-inline-size:46rem }
  .val-cabecera{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap }
  .val-contador{
    text-align:center; font-size:1.9rem; font-weight:800; color:var(--azul); line-height:1;
  }
  .val-contador span{ display:block; font-size:.72rem; font-weight:400; color:var(--gris); margin-block-start:.2rem }
  .val-cedula{
    background:var(--azul-claro); border-radius:var(--radio); padding:1rem 1.2rem;
    margin-block:1rem; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  }
  .val-cedula .etiqueta{ color:var(--azul); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em }
  .val-cedula b{
    font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem); letter-spacing:.08em; color:var(--azul-osc);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; user-select:all;
  }
  .val-pasos{ margin:0 0 1.2rem 1.1rem; padding:0; display:grid; gap:.7rem; font-size:.92rem }
  .val-pasos li{ padding-inline-start:.2rem }
  .val-pasos .btn.ancho{ max-inline-size:24rem }
  .val-otras{
    display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
    margin-block-start:1rem; padding-block-start:1rem; border-block-start:1px solid var(--linea);
  }

  /* --- Seguimientos --- */
  .filtros-seg{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:end }
  .filtros-seg .campo{ margin:0; min-inline-size:10rem }
  .atajos-fecha{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-block-start:.9rem }
  .tipos-seg{ display:flex; gap:.6rem; flex-wrap:wrap; margin-block-start:.7rem }
  .tipo-chip{
    display:flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--tinta);
    background:var(--fondo); border:1px solid var(--linea); border-radius:999px; padding:.5rem .9rem;
  }
  .tipo-chip:hover{ border-color:var(--azul) }
  .tipo-chip.activo{ background:var(--azul); color:#fff; border-color:var(--azul) }
  .tipo-chip span{ font-size:.85rem }
  .paginacion{ display:flex; gap:.6rem; align-items:center; justify-content:center; margin-block-start:1rem }

  /* --- Buscador instantaneo sobre una tabla --- */
  .buscador-tabla{ margin-block:.6rem .9rem }
  .buscador-tabla input{
    inline-size:min(28rem,100%); padding-inline-start:2.2rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7590' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:left .6rem center; background-size:1.05rem;
  }
  .filtro-sin-resultados{ padding:1rem; text-align:center; color:var(--gris); font-size:.9rem }

  /* --- Desplegables con buscador --- */
  .buscable-caja{ position:relative }
  .buscable-oculto{
    position:absolute; opacity:0; pointer-events:none;
    inline-size:1px; block-size:1px; margin:0; padding:0; border:0;
  }
  .buscable-campo{ inline-size:100%; padding-inline-end:2.2rem !important }
  .buscable-limpiar{
    position:absolute; inset-inline-end:.5rem; inset-block-start:50%; transform:translateY(-50%);
    background:none; border:0; color:var(--gris-claro); font-size:1.35rem; line-height:1;
    cursor:pointer; padding:0 .25rem; min-block-size:auto;
  }
  .buscable-limpiar:hover{ color:var(--rojo) }
  .buscable-lista{
    position:absolute; inset-inline:0; inset-block-start:calc(100% + .2rem); z-index:60;
    background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-chico);
    box-shadow:var(--sombra-alta); max-block-size:16rem; overflow-y:auto;
    margin:0; padding:.25rem; list-style:none;
  }
  .buscable-lista li{
    padding:.55rem .7rem; border-radius:6px; cursor:pointer; font-size:.92rem;
    display:flex; justify-content:space-between; gap:.6rem; align-items:baseline;
  }
  .buscable-lista li:hover, .buscable-lista li.activa{ background:var(--azul-claro); color:var(--azul-osc) }
  .buscable-lista li.elegida{ font-weight:700 }
  .buscable-lista li.buscable-mas{
    cursor:default; color:var(--gris); font-size:.8rem; font-style:italic; justify-content:center;
  }
  .buscable-lista li.buscable-mas:hover{ background:none }
  .buscable-grupo{ color:var(--gris-claro); font-size:.75rem; white-space:nowrap; flex-shrink:0 }
  .buscable-vacio{
    position:absolute; inset-inline:0; inset-block-start:calc(100% + .2rem); z-index:60;
    background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-chico);
    box-shadow:var(--sombra-alta); padding:.7rem; font-size:.85rem; color:var(--gris);
    display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  }
  /* En pantallas tactiles la lista se hace mas alta y comoda */
  @media (pointer:coarse){
    .buscable-lista{ max-block-size:60vh }
    .buscable-lista li{ padding:.75rem .7rem; font-size:1rem }
  }

  /* --- Enlaces de inscripcion --- */
  .enlace-copiar{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-block-start:.45rem }
  .enlace-copiar input{
    flex:1; min-inline-size:12rem; max-inline-size:26rem; font-size:.78rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:.4rem .55rem;
    min-block-size:auto; background:var(--fondo);
  }
  tr.apagado{ opacity:.55 }

  /* --- Verificacion en dos pasos --- */
  .campo-codigo{
    font-size:1.6rem; letter-spacing:.55rem; text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
  }
  .clave-manual{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.05rem;
    background:var(--azul-claro); color:var(--azul-osc); font-weight:700;
    padding:.7rem .9rem; border-radius:var(--radio-chico); word-break:break-all; letter-spacing:.05rem;
  }
  .codigos-respaldo{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.5rem;
  }
  .codigos-respaldo span{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem; font-weight:700;
    background:var(--fondo); border:1px dashed var(--linea); border-radius:var(--radio-chico);
    padding:.55rem; text-align:center; letter-spacing:.04rem;
  }
  @media print{
    .codigos-respaldo span{ border-color:#999 }
  }

  /* --- Cumpleanos --- */
  .btn.verde{ background:#1D9E5F } .btn.verde:hover:not(:disabled){ background:#16794A }
  .cumple-filtros{ display:flex; gap:.6rem; flex-wrap:wrap; margin-block-end:1rem }
  .cumple-filtros .filtro{
    display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
    background:var(--blanco); color:var(--tinta); border:1px solid var(--linea);
    padding:.55rem .9rem; border-radius:999px; font-size:.88rem; box-shadow:var(--sombra);
  }
  .cumple-filtros .filtro:hover{ border-color:var(--azul) }
  .cumple-filtros .filtro.activo{ background:var(--azul); color:#fff; border-color:var(--azul) }
  .cumple-filtros .num{
    background:var(--azul-claro); color:var(--azul); border-radius:999px;
    padding:.1rem .5rem; font-weight:700; font-size:.8rem; min-inline-size:1.5rem; text-align:center;
  }
  .cumple-filtros .filtro.activo .num{ background:rgb(255 255 255 / .22); color:#fff }
  .cumple-acciones{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center }
  .cumple-estado{ display:flex; gap:.35rem; flex-wrap:wrap; margin-block-start:.4rem }
  .cumple-estado:empty{ display:none }
  tr.es-hoy{ background:#FFFBEF }
  tr.es-hoy td{ border-block-end-color:#F0DDB8 }

  .barra-prog{ background:#EEF0F5; border-radius:20px; block-size:.6rem; overflow:hidden }
  .barra-prog > div{ block-size:100%; border-radius:20px; background:linear-gradient(90deg,var(--azul),var(--azul-vivo)) }
  .barra-prog > div.rojo{ background:linear-gradient(90deg,var(--rojo),#F2606A) }
  .barra-prog > div.ok{ background:linear-gradient(90deg,#169356,#2BC47C) }

  .filtros{ display:flex; gap:.65rem; flex-wrap:wrap; align-items:end; margin-block-end:1rem }
  .filtros .campo{ margin:0 }
  .acciones-fila{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center }
  .paginacion{ display:flex; gap:.35rem; margin-block-start:1rem; flex-wrap:wrap }
  .paginacion :where(a,span){
    padding:.45rem .8rem; border-radius:var(--radio-chico); background:#fff;
    border:1px solid var(--linea); font-size:.85rem; min-inline-size:2.4rem; text-align:center;
  }
  .paginacion .actual{ background:var(--azul); color:#fff; border-color:var(--azul) }

  .vacio{ text-align:center; color:var(--gris); padding:2.2rem 1rem; text-wrap:pretty }
  .vacio .icono{ font-size:2.4rem; margin-block-end:.5rem }

  .chip-usuario{ display:flex; align-items:center; gap:.5rem; font-size:.85rem }
  .chip-usuario .avatar{
    inline-size:2.1rem; block-size:2.1rem; border-radius:50%; background:var(--azul);
    color:#fff; display:grid; place-items:center; font-weight:700; flex-shrink:0;
  }
  .chip-usuario .rol{ color:var(--gris); font-size:.72rem; text-transform:capitalize }

  .campanita{ position:relative; cursor:pointer; font-size:1.2rem; background:none; border:0; padding:.3rem }
  .campanita .num{
    position:absolute; inset-block-start:-2px; inset-inline-end:-4px; background:var(--rojo);
    color:#fff; font-size:.62rem; border-radius:10px; padding:1px 5px; font-weight:700;
  }
  .menu-notif{
    position:absolute; inset-inline-end:clamp(.5rem,3vw,4.5rem); inset-block-start:var(--nav-alto);
    inline-size:min(22rem,92vw); max-block-size:min(26rem,60dvh); overflow-y:auto;
    background:#fff; border-radius:var(--radio); box-shadow:var(--sombra-alta); z-index:100; display:none;
  }
  .menu-notif .item{ padding:.75rem 1rem; border-block-end:1px solid var(--linea); font-size:.85rem }
  .menu-notif .item.nueva{ background:var(--azul-claro) }
  .menu-notif .item b{ display:block; color:var(--azul-osc) }
  .menu-notif .item small{ color:var(--gris) }

  #mapa{ block-size:min(60dvh,34rem); border-radius:var(--radio); box-shadow:var(--sombra) }
  .leyenda-mapa{ display:flex; gap:1rem; font-size:.8rem; color:var(--gris); margin-block-start:.6rem; flex-wrap:wrap }

  details > summary{ cursor:pointer; min-block-size:var(--tap); display:flex; align-items:center }
}

@layer utilidades{
  @media print{
    .sidebar,.topbar,.btn,.filtros,.velo,.menu-notif{ display:none !important }
    .contenido{ padding:0 }
    .tarjeta,table.tabla{ box-shadow:none; border:1px solid var(--linea) }
  }
}