/* App del colaborador en el portal de Güria (`app/vistas/portal.py` y `portal.js`):
   activar, entrar, la app (turnos, horas y marcas) y las páginas de aviso.

   Re-pintado R2-d (`docs/DISENO_R2_REPINTADO.md`, §3.17), solo con CSS: ninguna
   estructura cambia (las pruebas fijan el <form> y varios `id`). El portal es otra
   aplicación, con su lista cerrada de estáticos y su CSP (`app/portal_app.py`,
   `app/rutas_portal.py`), así que no carga `sistema.css` ni sus fuentes: esta hoja
   copia los VALORES de los tokens `--rc-*` en su propio `:root` (cada copia dice de
   qué token viene) y usa la letra del sistema del teléfono. Hay una segunda copia en
   `kiosco.css`; un cambio en `sistema.css` hay que repetirlo en las dos.

   Las piezas imitan a las primitivas de `sistema.css` con el prefijo del portal:
   `.portal-tarjeta` es una `.rc-tarjeta`, `.portal-campo` un `.rc-campo`,
   `.portal-boton` un `.rc-boton--primario`, `.portal-pestanas` unas `.rc-pestanas`,
   `.portal-selector` un `.rc-segmentado`, los `li` de `.portal-lista` son `.rc-fila`
   y `.portal-aviso-flotante` un `.rc-toast`. Pensada primero para el teléfono; en el
   escritorio la columna se centra a 480 px. */

:root {
  --fondo: #F5F6F8;            /* --rc-fondo */
  --superficie: #FFFFFF;       /* --rc-superficie */
  --lateral: #FAFAFB;          /* --rc-lateral */
  --borde: #E7E8EC;            /* --rc-borde */
  --borde-fuerte: #D6D9E0;     /* --rc-borde-fuerte */
  --borde-pildora: #E1E3E8;    /* --rc-borde-pildora */
  --separador: #EEF0F3;        /* --rc-separador */
  --texto: #1D2230;            /* --rc-texto */
  --texto-secundario: #3A4150; /* --rc-texto-secundario */
  --texto-tenue: #5B6272;      /* --rc-texto-tenue */
  --acento: #0B6E79;           /* --rc-acento (el petróleo por omisión: el portal no lee ALEX_UI_ACENTO) */
  --acento-suave: #E8F0F1;     /* --rc-acento-suave */
  --acento-hover: #085C65;     /* --rc-acento-hover */
  --revisar-fondo: #FFF1DC;    /* --rc-revisar-fondo */
  --revisar-texto: #7A4100;    /* --rc-revisar-texto */
  --vencida-fondo: #FDECEC;    /* --rc-vencida-fondo */
  --vencida-texto: #9B1C1C;    /* --rc-vencida-texto */
  --pagada-fondo: #E8F5EE;     /* --rc-pagada-fondo */
  --pagada-texto: #1C6B3F;     /* --rc-pagada-texto */
  --radio: 8px;                /* --rc-radio */
  --radio-control: 9px;        /* --rc-radio-control */
  --radio-tarjeta: 12px;       /* --rc-radio-tarjeta */
  --alto-tactil: 44px;         /* --rc-alto-tactil */
  --alto-primario: 48px;       /* --rc-alto-primario-movil */
  --sombra-flotante: 0 12px 32px rgb(29 34 48 / 14%), 0 2px 6px rgb(29 34 48 / 8%); /* --rc-sombra-flotante */
  /* Sin Geist: el portal no sirve archivos de fuentes (pendiente en DISENO_R1_PUENTE.md). */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[hidden] { display: none !important; }

body.portal {
  min-height: 100vh;
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.45 var(--fuente);
}

button,
input { font: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ── Cabecera: blanca, pegada arriba ────────────────────────────────────── */
.portal-cabecera {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

.portal-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.portal-marca strong {
  color: var(--texto);
  font: 600 16px/1.2 var(--fuente);
}

.portal-marca img {
  width: auto;
  height: 20px;
}

/* «Salir», como un `.rc-boton--texto` de 44 px. */
.portal-salir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-tactil);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: none;
  color: var(--acento);
  font: 500 14px/1.2 var(--fuente);
}

.portal-salir:hover { background: var(--acento-suave); }

/* «← Volver a mi app»: un enlace con el aspecto de `.rc-volver` (un `.rc-boton--texto` de
   44 px con la flecha a la izquierda). Se corre 8 px, lo que vale su relleno, para que la
   flecha quede alineada con el borde del contenido. */
.portal-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--alto-tactil);
  margin-left: -8px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  color: var(--acento);
  font: 500 14px/1.2 var(--fuente);
  text-decoration: none;
}

.portal-volver:hover { background: var(--acento-suave); }
.portal-volver:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.portal-volver-fila { margin: 0 0 8px; }

/* ── Contenido ──────────────────────────────────────────────────────────── */
.portal-main {
  width: min(100%, 512px);
  margin: 0 auto;
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px));
}

.portal-tarjeta {
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.portal-main h1 {
  margin: 0 0 8px;
  color: var(--texto);
  font: 600 22px/1.25 var(--fuente);
  letter-spacing: -0.01em;
}

.portal-saludo {
  margin: 0 0 4px;
  color: var(--texto-tenue);
  font-size: 14px;
}

.portal-ayuda {
  margin: 0 0 16px;
  color: var(--texto-secundario);
  font-size: 14px;
  line-height: 1.5;
}

.portal-nota {
  margin: 14px 0 0;
  color: var(--texto-tenue);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Formularios: activar y entrar ──────────────────────────────────────── */
.portal-form {
  display: grid;
  gap: 16px;
}

.portal-campo {
  display: grid;
  gap: 4px;
}

.portal-campo > span {
  color: var(--texto-tenue);
  font: 500 12px/1.2 var(--fuente);
}

/* El PIN: letra de ancho fijo del sistema, espaciada y centrada, de 48 px de alto. */
.portal-campo input {
  width: 100%;
  min-height: var(--alto-primario);
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
  font: 500 20px/1.2 var(--fuente-mono);
  letter-spacing: .3em;
  text-align: center;
}

.portal-campo input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.portal-campo input:disabled {
  background: var(--lateral);
  color: var(--texto-tenue);
}

.portal-consentimiento {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--lateral);
}

.portal-consentimiento legend {
  padding: 0 6px;
  color: var(--texto);
  font: 600 14px/1.3 var(--fuente);
}

.portal-consentimiento p {
  margin: 4px 0 8px;
  color: var(--texto-secundario);
  font-size: 14px;
  line-height: 1.5;
}

/* Cada opción es una fila de 48 px con el botón de radio a la izquierda. */
.portal-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-primario);
  padding: 4px 2px;
  font-size: 15px;
  cursor: pointer;
}

.portal-opcion + .portal-opcion { border-top: 1px solid var(--separador); }

.portal-opcion input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--acento);
}

/* El error, con los valores de `.rc-aviso--alerta`. */
.portal-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--vencida-texto);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--vencida-fondo);
  color: var(--vencida-texto);
  font: 600 14px/1.45 var(--fuente);
}

/* La acción: `.rc-boton--primario` de 48 px a lo ancho; la secundaria, blanca. */
.portal-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--alto-primario);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: var(--acento);
  color: var(--superficie);
  font: 600 16px/1.2 var(--fuente);
}

.portal-boton:hover { background: var(--acento-hover); }

.portal-boton:disabled {
  opacity: .55;
  cursor: wait;
}

.portal-boton--secundario {
  border-color: var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font-weight: 500;
}

.portal-boton--secundario:hover { background: var(--fondo); }

/* ── Pestañas y paneles de la app ───────────────────────────────────────── */
/* Tres pestañas iguales a lo ancho; la activa (`aria-selected`) con la línea del
   acento. */
.portal-pestanas {
  display: flex;
  margin: 8px 0 16px;
  border-bottom: 1px solid var(--borde-pildora);
}

.portal-pestanas button {
  flex: 1;
  min-height: var(--alto-tactil);
  margin-bottom: -1px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-tenue);
  font: 500 15px/1.2 var(--fuente);
}

.portal-pestanas button[aria-selected="true"] {
  border-bottom-color: var(--acento);
  color: var(--texto);
  font-weight: 600;
}

.portal-pestanas button:focus-visible { outline-offset: -3px; }

.portal-panel__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.portal-panel__cabecera h1 {
  margin: 0;
  font-size: 18px;
}

/* La semana o el mes, como un `.rc-segmentado`: ‹ valor ›. */
.portal-selector {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
}

.portal-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-secundario);
  font: 500 18px/1 var(--fuente);
}

.portal-flecha:first-child { border-right: 1px solid var(--borde); }
.portal-flecha:last-child { border-left: 1px solid var(--borde); }
.portal-flecha:hover { background: var(--fondo); }
.portal-flecha:focus-visible { outline-offset: -3px; }

.portal-selector strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5em;
  padding: 0 12px;
  color: var(--texto);
  font: 600 14px/1.2 var(--fuente-mono);
}

/* «Extras por aprobar», con los valores de `.rc-aviso--revisar`. */
.portal-resumen {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--revisar-texto);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--revisar-fondo);
  color: var(--revisar-texto);
  font: 600 14px/1.45 var(--fuente);
}

.portal-panel .portal-nota { margin: 0 0 12px; }

/* ── Listas: turnos, horas del día y marcas ─────────────────────────────── */
/* Una tarjeta con filas de 56 px: el día a la izquierda y la hora o la marca a la
   derecha, en letra de ancho fijo; el detalle y los avisos debajo. */
.portal-lista {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  list-style: none;
}

.portal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--separador);
}

.portal-item:last-child { border-bottom: 0; }

.portal-item > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.portal-item__fecha {
  grid-column: 1;
  grid-row: 1;
  color: var(--texto);
  font: 600 13px/1.4 var(--fuente-mono);
  text-transform: capitalize;
}

.portal-item__hora {
  grid-column: 2;
  grid-row: 1;
  color: var(--texto);
  font: 600 15px/1.35 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.portal-item__detalle {
  color: var(--texto-tenue);
  font-size: 14px;
  line-height: 1.4;
}

/* Un aviso del día: con el punto de «por revisar». */
.portal-item__aviso {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--revisar-texto);
  font-size: 13px;
  line-height: 1.4;
}

.portal-item__aviso::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.portal-vacio {
  padding: 24px 16px;
  color: var(--texto-tenue);
  text-align: center;
}

/* Estado de las extras o de una marca: una píldora chica. */
.portal-etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--separador);
  color: var(--texto-secundario);
  font: 600 12px/1.2 var(--fuente);
  letter-spacing: normal;
  vertical-align: 1px;
  white-space: nowrap;
}

.portal-etiqueta--pendiente {
  background: var(--revisar-fondo);
  color: var(--revisar-texto);
}

.portal-etiqueta--aprobada,
.portal-etiqueta--parcial {
  background: var(--pagada-fondo);
  color: var(--pagada-texto);
}

.portal-etiqueta--rechazada,
.portal-etiqueta--anulada {
  background: var(--vencida-fondo);
  color: var(--vencida-texto);
}

/* ── Horas: los totales del mes, como una `.rc-lista-datos` en tarjeta ──── */
.portal-totales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.portal-totales:empty { display: none; }

.portal-totales div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-totales dt {
  color: var(--texto-tenue);
  font: 500 12px/1.3 var(--fuente);
}

.portal-totales dd {
  margin: 0;
  color: var(--texto);
  font: 600 20px/1.2 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.portal-totales .es-pendiente dd { color: var(--revisar-texto); }

/* ── Foto al marcar y correo de los comprobantes ───────────────────────── */
.portal-foto,
.portal-correo {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
}

.portal-foto h2,
.portal-correo h2 {
  margin: 0;
  color: var(--texto);
  font: 600 16px/1.3 var(--fuente);
}

.portal-foto p,
.portal-correo p { margin: 0; }

.portal-correo .portal-nota { color: var(--texto-secundario); font-size: 14px; }

#foto-estado,
#correo-estado {
  color: var(--texto-secundario);
  font-size: 14px;
}

.portal-foto details {
  color: var(--texto-secundario);
  font-size: 14px;
  line-height: 1.5;
}

.portal-foto summary {
  display: flex;
  align-items: center;
  min-height: var(--alto-tactil);
  color: var(--acento);
  font-weight: 600;
  cursor: pointer;
}

.portal-foto details p { margin: 4px 0 0; }

/* ── Correcciones, «No estoy de acuerdo» e historial (ASOF-D) ───────────── */
.portal-correcciones,
.portal-historial {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.portal-correcciones h2,
.portal-historial h2 {
  margin: 0;
  color: var(--texto);
  font: 600 16px/1.3 var(--fuente);
}

.portal-correcciones .portal-nota,
.portal-historial p { margin: 0; color: var(--texto-secundario); font-size: 14px; }

.portal-historial__acciones { display: grid; gap: 8px; }

/* Los enlaces «Descargar» e «Imprimir» son botones por fuera: sin subrayado y a lo ancho. */
a.portal-boton { text-decoration: none; }

.portal-objecion { margin-top: 8px; }
.portal-objecion .portal-form { gap: 10px; }

.portal-campo textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
  font: 400 16px/1.4 var(--fuente);
  resize: vertical;
}

.portal-campo textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
  outline: 2px solid transparent;
  outline-offset: 1px;
}

/* El historial para imprimir: tablas anchas que se desplazan en el teléfono y se ven enteras en papel. */
.portal-tabla {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.portal-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.portal-tabla th,
.portal-tabla td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--separador);
  text-align: left;
  vertical-align: top;
}

.portal-tabla th {
  color: var(--texto-tenue);
  font-weight: 600;
}

@media print {
  body.portal { background: #fff; }
  .portal-cabecera,
  .portal-no-imprimir,
  .portal-aviso-flotante { display: none !important; }
  .portal-tarjeta { border: 0; box-shadow: none; padding: 0 0 12px; }
  .portal-tabla { overflow: visible; }
}

/* ── Aviso flotante, como un `.rc-toast`: visible salvo `[hidden]` ──────── */
.portal-aviso-flotante {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 30;
  max-width: min(480px, calc(100% - 32px));
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radio-control);
  background: var(--texto);
  box-shadow: var(--sombra-flotante);
  color: var(--superficie);
  font: 500 14px/1.4 var(--fuente);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-boton,
  .portal-salir,
  .portal-pestanas button { transition: background-color .15s ease, opacity .15s ease; }
}

/* Alto contraste de Windows: el punto de los avisos se pinta con el texto. */
@media (forced-colors: active) {
  .portal-item__aviso::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}