/* COMPONENTES DE POLARA — el CSS ORIGINAL del design system.
   No está reescrito ni reconstruido: son las mismas reglas que el paquete de
   React inyectaba en la página, extraídas de los bloques <style> que dejó al
   renderizar y puestas en un archivo propio. Ventaja sobre reconstruirlas a
   mano: es exacto por construcción, no "parecido". Y ahora es cacheable y se
   lee, en vez de vivir escondido dentro de un paquete de 196 KB.
   El orden de los bloques se conserva tal cual: en CSS el orden decide. */

.pol-bdg{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:var(--fuente-nucleo);font-size:var(--txt-meta);font-weight:var(--peso-semi);line-height:1;border-radius:var(--radio-pill);border:var(--linea) solid transparent;padding:4px 8px;min-width:20px}
.pol-bdg--conteo{padding:0;width:22px;height:22px;font-size:var(--txt-meta)}
.pol-bdg--neutro{background:var(--superficie-alterna);color:var(--texto-secundario);border-color:var(--borde)}
.pol-bdg--acento{background:var(--acento-tenue);color:var(--acento);border-color:var(--acento-borde)}
.pol-bdg--exito{background:var(--exito-tenue);color:var(--exito);border-color:var(--exito-borde)}
.pol-bdg--alerta{background:var(--alerta-tenue);color:var(--alerta);border-color:var(--alerta-borde)}
.pol-bdg--aviso{background:var(--aviso-tenue);color:var(--aviso);border-color:var(--aviso-borde)}
.pol-bdg--solido{background:var(--alerta);color:var(--texto-sobre-alerta)}

.pol-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);border:var(--linea) solid transparent;border-radius:var(--radio-md);font-family:var(--fuente-nucleo);font-weight:var(--peso-semi);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background-color var(--dur-rapida) var(--ease-estandar),color var(--dur-rapida) var(--ease-estandar),border-color var(--dur-rapida) var(--ease-estandar),transform var(--dur-rapida) var(--ease-estandar);white-space:nowrap}
.pol-btn:active{transform:translateY(1px)}
.pol-btn--lg{min-height:var(--tap-min);padding:0 var(--e-6);font-size:var(--txt-cuerpo)}
.pol-btn--md{min-height:44px;padding:0 var(--e-5);font-size:var(--txt-ui)}
.pol-btn--sm{min-height:36px;padding:0 var(--e-3);font-size:var(--txt-meta)}
.pol-btn--primario{background:var(--acento);color:var(--texto-sobre-acento)}
.pol-btn--primario:hover{background:var(--acento-hover)}
.pol-btn--primario:active{background:var(--acento-press)}
.pol-btn--secundario{background:var(--superficie);color:var(--texto-principal);border-color:var(--borde-fuerte)}
.pol-btn--secundario:hover{background:var(--superficie-alterna)}
.pol-btn--secundario:active{background:var(--papel-200)}
.pol-btn--fantasma{background:transparent;color:var(--acento)}
.pol-btn--fantasma:hover{background:var(--acento-tenue)}
.pol-btn--peligro{background:var(--alerta);color:var(--texto-sobre-alerta)}
.pol-btn--peligro:hover{background:var(--alerta-hover)}
.pol-btn--papel{background:var(--texto-sobre-aurora);color:var(--contra-aurora)}
/* La regla del hover · era `filter:brightness(1.06)`, y eso NO era "cambiar el fondo": el
   filtro se aplica al elemento COMPLETO, así que le subía el brillo al texto
   también — un viraje de color por la puerta de atrás. Ahora responde con el
   movimiento que esa regla nombra, que no puede tocar ningún contraste.
   (En las páginas esto ya venía apagado por pagina.css, que sustituye el filtro
   por relleno; aquí se arregla el original, que es de donde saldrá la próxima.) */
.pol-btn--papel:hover{transform:translateY(-2px)}
.pol-btn--contorno-papel{background:transparent;color:var(--texto-sobre-aurora);border-color:color-mix(in srgb,var(--texto-sobre-aurora) 55%,transparent)}
.pol-btn--contorno-papel:hover{background:color-mix(in srgb,var(--texto-sobre-aurora) 14%,transparent);border-color:var(--texto-sobre-aurora)}
.pol-btn[disabled],.pol-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.pol-btn--ancho{width:100%}

.pol-ibtn{display:inline-flex;align-items:center;justify-content:center;border:var(--linea) solid transparent;background:transparent;color:var(--texto-secundario);border-radius:var(--radio-md);cursor:pointer;transition:background-color var(--dur-rapida) var(--ease-estandar),color var(--dur-rapida) var(--ease-estandar)}
/* La regla del hover · el `color:var(--texto-principal)` que iba aquí sí cambiaba el texto
   (de --texto-secundario a --texto-principal). Se va: responde el fondo, que
   además es lo único que la transición de arriba sabe animar. */
.pol-ibtn:hover{background:var(--superficie-alterna)}
.pol-ibtn:active{transform:translateY(1px)}
.pol-ibtn--md{width:44px;height:44px}
.pol-ibtn--sm{width:36px;height:36px}
.pol-ibtn--lg{width:var(--tap-min);height:var(--tap-min)}
.pol-ibtn--contorno{border-color:var(--borde);background:var(--superficie)}
.pol-ibtn--solido{background:var(--acento);color:var(--texto-sobre-acento)}
/* NO ROMPE LA REGLA DEL HOVER Y NO SE "LIMPIA": el color es EL MISMO que en
   reposo. Repetirlo es lo que le gana a `a:hover` si el botón resulta ser un
   <a>, que es exactamente el defecto que el 7-ago dejó 22 botones con el texto
   invisible al pasar el ratón. La redundancia carga peso. */
.pol-ibtn--solido:hover{background:var(--acento-hover);color:var(--texto-sobre-acento)}
.pol-ibtn[disabled]{opacity:.45;pointer-events:none}

.pol-lnk{color:var(--acento);font-weight:var(--peso-medio);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-rapida) var(--ease-estandar)}
.pol-lnk:hover{color:var(--acento-hover);text-decoration-thickness:2px}
.pol-lnk--flecha{text-decoration:none}
.pol-lnk--flecha:hover{text-decoration:none}
.pol-lnk--flecha svg{transition:transform var(--dur-media) var(--ease-salida)}
.pol-lnk--flecha:hover svg{transform:translateX(3px)}
.pol-lnk--quieto{color:var(--texto-secundario);text-decoration-color:var(--borde-fuerte)}
.pol-lnk--quieto:hover{color:var(--texto-principal)}

.pol-tag{display:inline-flex;align-items:center;font-family:var(--fuente-nucleo);font-size:var(--txt-meta);font-weight:var(--peso-semi);letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-terciario);line-height:1}
.pol-tag--acento{color:var(--acento)}
.pol-tag--papel{color:#FFF3EA}
.pol-tag--aurora{color:currentColor;opacity:.9}
.pol-tag--regla{padding-left:var(--e-3);border-left:var(--linea-gruesa) solid currentColor}

.pol-wm{font-family:var(--fuente-display);font-weight:600;text-transform:uppercase;line-height:.82;letter-spacing:-.045em;display:inline-block;white-space:nowrap;color:inherit}
.pol-wm--mega{font-size:var(--txt-wordmark)}
.pol-wm--display{font-size:var(--txt-display)}
.pol-wm--header{font-size:1.375rem;letter-spacing:-.03em}
.pol-wm--pie{font-size:1rem;letter-spacing:-.02em}
.pol-wm--recorte{background-image:var(--acorde-amanecer);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent}

.pol-ban{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-3) var(--e-4);border:var(--linea) solid;border-radius:var(--radio-md);font-size:var(--txt-ui);line-height:1.45}
.pol-ban__c{flex:1;display:flex;flex-direction:column;gap:2px}
.pol-ban__t{font-weight:var(--peso-semi)}
.pol-ban>svg{margin-top:1px}
.pol-ban--info{background:var(--superficie-alterna);border-color:var(--borde);color:var(--texto-principal)}
.pol-ban--info>svg{color:var(--texto-terciario)}
.pol-ban--exito{background:var(--exito-tenue);border-color:var(--exito-borde);color:var(--texto-principal)}
.pol-ban--exito>svg{color:var(--exito)}
.pol-ban--alerta{background:var(--alerta-tenue);border-color:var(--alerta-borde);color:var(--texto-principal)}
.pol-ban--alerta>svg{color:var(--alerta)}
.pol-ban--aviso{background:var(--aviso-tenue);border-color:var(--aviso-borde);color:var(--texto-principal)}
.pol-ban--aviso>svg{color:var(--aviso)}
.pol-ban__acc{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;margin-top:var(--e-2)}

.pol-vac{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e-3);padding:var(--e-10) var(--e-6);border:var(--linea) dashed var(--borde-fuerte);border-radius:var(--radio-lg);background:var(--superficie)}
.pol-vac__aro{width:56px;height:56px;border-radius:var(--radio-pill);display:grid;place-items:center;background:var(--acento-tenue);color:var(--acento);border:var(--linea) solid var(--acento-borde)}
.pol-vac__t{font-size:var(--txt-titulo-3);font-weight:var(--peso-semi);color:var(--texto-principal);margin:0}
.pol-vac__d{font-size:var(--txt-ui);color:var(--texto-secundario);max-width:44ch;margin:0;text-wrap:pretty}
.pol-vac__acc{margin-top:var(--e-2);display:flex;gap:var(--e-2);flex-wrap:wrap;justify-content:center}
.pol-vac--compacto{padding:var(--e-6) var(--e-4)}

@keyframes pol-pulso{0%,100%{opacity:1}50%{opacity:.45}}
.pol-skel{background:var(--superficie-alterna);border-radius:var(--radio-sm);animation:pol-pulso 1.4s var(--ease-estandar) infinite}
.pol-skel--texto{height:12px}
.pol-skel--titulo{height:20px;border-radius:var(--radio-xs)}
.pol-skel--bloque{border-radius:var(--radio-lg)}
.pol-skel--circulo{border-radius:var(--radio-pill)}
.pol-skel-grupo{display:flex;flex-direction:column;gap:10px}

.pol-chk{display:flex;align-items:flex-start;gap:var(--e-3);cursor:pointer;min-height:44px;padding:10px 0}
.pol-chk input{position:absolute;opacity:0;width:1px;height:1px}
.pol-chk__caja{flex:none;width:22px;height:22px;margin-top:1px;border:var(--linea-gruesa) solid var(--borde-fuerte);border-radius:var(--radio-sm);background:var(--superficie);display:grid;place-items:center;color:transparent;transition:background-color var(--dur-rapida) var(--ease-estandar),border-color var(--dur-rapida) var(--ease-estandar)}
.pol-chk:hover .pol-chk__caja{border-color:var(--acento)}
.pol-chk input:checked+.pol-chk__caja{background:var(--acento);border-color:var(--acento);color:var(--texto-sobre-acento)}
.pol-chk input:focus-visible+.pol-chk__caja{box-shadow:var(--sombra-foco)}
.pol-chk__et{font-size:var(--txt-ui);line-height:1.45;color:var(--texto-principal)}
.pol-chk--redonda .pol-chk__caja{border-radius:var(--radio-pill)}
.pol-chk[data-disabled="true"]{opacity:.45;pointer-events:none}

.pol-campo{display:flex;flex-direction:column;gap:6px}
.pol-campo__et{font-size:var(--txt-ui);font-weight:var(--peso-medio);color:var(--texto-secundario)}
.pol-campo__req{color:var(--alerta)}
.pol-campo__ayuda{font-size:var(--txt-meta);color:var(--texto-terciario)}
.pol-campo__error{font-size:var(--txt-meta);font-weight:var(--peso-medio);color:var(--alerta)}
.pol-ctrl{width:100%;background:var(--superficie);color:var(--texto-principal);border:var(--linea) solid var(--borde-fuerte);border-radius:var(--radio-md);padding:0 var(--e-3);min-height:48px;font-size:max(16px,var(--txt-campo));transition:border-color var(--dur-rapida) var(--ease-estandar),box-shadow var(--dur-rapida) var(--ease-estandar)}
.pol-ctrl::placeholder{color:var(--texto-terciario)}
.pol-ctrl:hover{border-color:var(--texto-terciario)}
.pol-ctrl:focus{outline:none;border-color:var(--acento);box-shadow:var(--sombra-foco)}
.pol-ctrl[aria-invalid="true"]{border-color:var(--alerta)}
.pol-ctrl[disabled]{background:var(--superficie-alterna);color:var(--texto-terciario);cursor:not-allowed}
.pol-ctrl--area{min-height:112px;padding:var(--e-3);line-height:var(--alto-cuerpo);resize:vertical}

.pol-input-wrap{position:relative;display:flex;align-items:center}
.pol-input-wrap>svg{position:absolute;left:var(--e-3);color:var(--texto-terciario);pointer-events:none}
.pol-input-wrap--icono .pol-ctrl{padding-left:42px}

.pol-sel-wrap{position:relative;display:flex;align-items:center}
.pol-sel-wrap>svg{position:absolute;right:var(--e-3);color:var(--texto-terciario);pointer-events:none}
.pol-sel-wrap .pol-ctrl{appearance:none;padding-right:40px;cursor:pointer}

.pol-sw{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);cursor:pointer;min-height:var(--tap-min);width:100%}
.pol-sw input{position:absolute;opacity:0;width:1px;height:1px}
.pol-sw__txt{display:flex;flex-direction:column;gap:2px}
.pol-sw__et{font-size:var(--txt-ui);font-weight:var(--peso-medio);color:var(--texto-principal)}
.pol-sw__ay{font-size:var(--txt-meta);color:var(--texto-terciario)}
.pol-sw__riel{flex:none;width:46px;height:28px;border-radius:var(--radio-pill);background:var(--papel-400);position:relative;transition:background-color var(--dur-media) var(--ease-estandar)}
.pol-sw__bolita{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--sombra-sutil);transition:transform var(--dur-media) var(--ease-salida)}
.pol-sw input:checked+.pol-sw__riel{background:var(--acento)}
.pol-sw input:checked+.pol-sw__riel .pol-sw__bolita{transform:translateX(18px)}
.pol-sw input:focus-visible+.pol-sw__riel{box-shadow:var(--sombra-foco)}
.pol-sw[data-disabled="true"]{opacity:.45;pointer-events:none}

.pol-hdr{position:sticky;top:0;z-index:var(--z-pegajoso);display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);height:var(--alto-header);padding:0 var(--e-4);background:var(--lienzo);border-bottom:var(--linea) solid var(--borde-sutil)}
.pol-hdr__izq{display:flex;align-items:baseline;gap:var(--e-2);min-width:0}
.pol-hdr__app{font-size:var(--txt-meta);font-weight:var(--peso-semi);letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--acento)}
.pol-hdr__der{display:flex;align-items:center;gap:var(--e-1)}

.pol-fab{position:fixed;right:var(--e-4);bottom:calc(var(--tap-min) + var(--e-4) + env(safe-area-inset-bottom,0px));z-index:var(--z-flotante);width:var(--tap-min);height:var(--tap-min);border-radius:var(--radio-pill);border:0;background:var(--acento);color:var(--texto-sobre-acento);box-shadow:var(--sombra-flotante);cursor:pointer;display:grid;place-items:center;transition:background-color var(--dur-rapida) var(--ease-estandar),transform var(--dur-rapida) var(--ease-estandar)}
.pol-fab:hover{background:var(--acento-hover)}
.pol-fab:active{transform:scale(.94)}
@media (min-width:1024px){.pol-fab{bottom:var(--e-6);right:var(--e-6)}}

.pol-nav{background:var(--superficie);border-color:var(--borde-sutil);z-index:var(--z-nav)}
.pol-nav__lista{display:flex;list-style:none;margin:0;padding:0}
.pol-nav__b{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tap-min);background:none;border:0;cursor:pointer;color:var(--texto-terciario);font-family:var(--fuente-nucleo);font-size:var(--txt-meta);font-weight:var(--peso-medio);padding:6px 2px;transition:color var(--dur-rapida) var(--ease-estandar),background-color var(--dur-rapida) var(--ease-estandar)}
/* La regla del hover · iba `color:var(--texto-secundario)`, que cambiaba el texto desde
   --texto-terciario. Ahora responde el fondo, EN TODOS LOS ANCHOS: el mismo
   recurso que ya usaba la barra lateral de escritorio (y que por eso se quita
   de su media query, dos veces la misma regla no aporta). Borrarlo sin más
   habría dejado sin ninguna respuesta al hover por debajo de 1024px. */
.pol-nav__b:hover{background:var(--superficie-alterna)}
.pol-nav__b[aria-current="page"]{color:var(--acento)}
.pol-nav__b-badge{position:absolute;top:3px;right:calc(50% - 23px)}
/* Teléfono: barra fija abajo. UN SOLO markup — cambia por CSS, nunca se duplica. */
.pol-nav{position:fixed;inset:auto 0 0 0;border-top:var(--linea) solid var(--borde-sutil);padding-bottom:env(safe-area-inset-bottom,0px)}
.pol-nav__pista{display:none}
@media (min-width:1024px){
  .pol-nav{position:sticky;top:var(--alto-header);inset:auto;align-self:start;width:var(--nav-lateral);flex:none;height:calc(100dvh - var(--alto-header));border-top:0;border-right:var(--linea) solid var(--borde-sutil);padding:var(--e-4) var(--e-3);display:flex;flex-direction:column;justify-content:space-between;background:var(--lienzo)}
  .pol-nav__lista{flex-direction:column;gap:2px}
  .pol-nav__b{flex-direction:row;justify-content:flex-start;gap:var(--e-3);font-size:var(--txt-ui);border-radius:var(--radio-md);padding:0 var(--e-3);min-height:44px}
  .pol-nav__b[aria-current="page"]{background:var(--acento-tenue)}
  .pol-nav__b-badge{position:static;margin-left:auto}
  .pol-nav__pista{display:block;font-size:var(--txt-meta);color:var(--texto-terciario);padding:var(--e-3);border-top:var(--linea) solid var(--borde-sutil);line-height:1.6}
}

@keyframes pol-sube{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pol-aparece{from{opacity:0}to{opacity:1}}
.pol-hoja-fondo{position:fixed;inset:0;z-index:var(--z-hoja);background:var(--velo-oscuro);display:flex;align-items:flex-end;justify-content:center;animation:pol-aparece var(--dur-media) var(--ease-estandar)}
.pol-hoja{width:100%;max-width:560px;background:var(--superficie);border:var(--linea) solid var(--borde);border-bottom:0;border-radius:var(--radio-xl) var(--radio-xl) 0 0;box-shadow:var(--sombra-flotante);animation:pol-sube var(--dur-lenta) var(--ease-salida);max-height:88dvh;display:flex;flex-direction:column}
.pol-hoja__hdr{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:var(--e-4) var(--e-4) var(--e-2)}
.pol-hoja__t{font-size:var(--txt-titulo-3);font-weight:var(--peso-semi);margin:0}
.pol-hoja__cuerpo{padding:var(--e-2) var(--e-4) var(--e-4);overflow:auto;display:flex;flex-direction:column;gap:var(--e-4)}
.pol-hoja__pie{display:flex;gap:var(--e-2);padding:var(--e-3) var(--e-4);border-top:var(--linea) solid var(--borde-sutil);padding-bottom:calc(var(--e-3) + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){
  .pol-hoja-fondo{align-items:center}
  .pol-hoja{border-radius:var(--radio-xl);border-bottom:var(--linea) solid var(--borde);animation-name:pol-aparece}
}

.pol-card{background:var(--superficie);border:var(--linea) solid var(--borde);border-radius:var(--radio-lg);padding:var(--e-5);box-shadow:var(--sombra-nula);transition:border-color var(--dur-media) var(--ease-estandar),box-shadow var(--dur-media) var(--ease-estandar),transform var(--dur-media) var(--ease-estandar)}
.pol-card--alterna{background:var(--superficie-alterna);border-color:var(--borde-sutil)}
.pol-card--acento{background:var(--acento-tenue);border-color:var(--acento-borde)}
.pol-card--calada{background:transparent;border-style:dashed;border-color:var(--borde-fuerte)}
.pol-card--vidrio{background:color-mix(in srgb,color-mix(in srgb,var(--panel-base) 90%,var(--acorde-base)) calc(var(--panel-alfa) * 100%),transparent);backdrop-filter:blur(10px);border-color:var(--panel-borde);color:var(--panel-texto)}
.pol-card--vidrio.pol-card--interactiva:hover{border-color:color-mix(in srgb,var(--panel-texto) 34%,transparent);box-shadow:var(--sombra-flotante)}
.pol-card--interactiva{cursor:pointer;text-align:left;width:100%;display:block;font:inherit;color:inherit}
.pol-card--interactiva:hover{border-color:var(--acento);box-shadow:var(--sombra-elevada);transform:translateY(-2px)}
.pol-card--interactiva:active{transform:translateY(0)}
.pol-card--compacta{padding:var(--e-3) var(--e-4)}

.pol-sh{display:flex;flex-direction:column;gap:var(--e-3);max-width:var(--medida-lectura)}
.pol-sh__t{font-family:var(--fuente-nucleo);font-weight:var(--peso-bold);letter-spacing:var(--track-titulo);line-height:var(--alto-titulo);color:var(--texto-principal);text-wrap:balance;margin:0}
.pol-sh--display .pol-sh__t{font-size:var(--txt-display);line-height:var(--alto-display);letter-spacing:var(--track-display)}
.pol-sh--grande .pol-sh__t{font-size:var(--txt-titulo-1)}
.pol-sh--media .pol-sh__t{font-size:var(--txt-titulo-2)}
.pol-sh__lead{font-size:var(--txt-cuerpo-lg);line-height:var(--alto-cuerpo);color:var(--texto-secundario);margin:0;text-wrap:pretty}
.pol-sh--centrada{align-items:center;text-align:center;margin-inline:auto}
.pol-sh--papel .pol-sh__t{color:#FFF3EA}
.pol-sh--papel .pol-sh__lead{color:#F2E4D8}

.pol-stat{display:flex;flex-direction:column;gap:2px}
.pol-stat__v{font-family:var(--fuente-nucleo);font-weight:var(--peso-bold);letter-spacing:var(--track-display);line-height:1;color:var(--texto-principal);font-variant-numeric:tabular-nums}
.pol-stat--lg .pol-stat__v{font-size:var(--txt-titulo-1)}
.pol-stat--md .pol-stat__v{font-size:var(--txt-titulo-2)}
.pol-stat--sm .pol-stat__v{font-size:var(--txt-cuerpo-lg)}
.pol-stat__et{font-size:var(--txt-meta);font-weight:var(--peso-medio);color:var(--texto-terciario)}
.pol-stat__d{font-size:var(--txt-meta);font-weight:var(--peso-semi);display:inline-flex;align-items:center;gap:3px}
.pol-stat__d--sube{color:var(--exito)}
.pol-stat__d--baja{color:var(--alerta)}
.pol-stat--acento .pol-stat__v{color:var(--acento)}