/* Portal del trabajador — hoja aparte, y a propósito.
 *
 * `lcr.css` viste una aplicación de escritorio con menú lateral, tablas
 * anchas y densidad alta. El portal es otra cosa: un teléfono, una mano, y a
 * veces mala luz. Se carga DESPUÉS de `lcr.css` para heredar la paleta y los
 * tokens —los colores, los contrastes ya medidos contra WCAG AA— y redefinir
 * solo lo que cambia.
 *
 * Tres reglas que gobiernan todo lo de abajo:
 *
 * 1. **Nada por debajo de 44 píxeles de alto tocable.** Es el mínimo que se
 *    acierta con el pulgar sin mirar. Los botones grandes van a 56.
 * 2. **Nada por debajo de 16 píxeles de texto en un campo.** Por debajo de
 *    eso, iOS hace zoom al enfocar y descoloca la página entera.
 * 3. **Lo que se pulsa, abajo.** La parte superior de un teléfono grande no
 *    se alcanza con la mano que lo sostiene.
 */

/* ------------------------------------------------------------- estructura */
body.portal {
  background: var(--lcr-hueso);
  color: var(--navy-900);
  margin: 0;
  /* Espacio para la barra inferior fija, más el área segura del teléfono
     (la franja del gesto de inicio en los que no tienen botón). */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  font-size: 1rem;
  line-height: 1.5;
}

.portal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--lcr-navy);
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
}

/* Cuadrada desde el cambio de marca. Con `width:auto` la baldosa quedaba de
   24 px; y sola, en navy sobre una barra navy, desaparecía: de ahí el aro
   tenue y el nombre al lado. */
.portal-marca-caja { display: flex; align-items: center; gap: 0.5rem; }
.portal-marca {
  height: 2.25rem; width: 2.25rem; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.portal-marca-nombre {
  color: var(--blanco); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.portal-salir {
  color: var(--teal-300);
  text-decoration: none;
  font-size: 0.95rem;
  /* Área tocable, aunque el texto sea corto. */
  padding: 0.6rem 0.5rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.portal-salir:hover, .portal-salir:focus { text-decoration: underline; }

.portal-lienzo {
  max-width: 34rem;   /* En una tableta no se estira hasta ser ilegible. */
  margin: 0 auto;
  padding: 1rem;
}

.portal-puerta { padding-top: 2rem; }

/* ---------------------------------------------------------------- textos */
.portal-titulo {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--navy-900);
}

.portal-subtitulo {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--teal-700);
}

.portal-guia { color: var(--navy-700); margin: 0 0 1.25rem; }
.portal-ayuda { display: block; color: var(--navy-600); font-size: 0.9rem; }
.portal-vacio { color: var(--navy-600); font-style: italic; }
.portal-pie {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--navy-600);
  text-align: center;
}

.portal-enlace {
  display: inline-block;
  color: var(--teal-700);
  padding: 0.6rem 0;
  min-height: 44px;
}

/* -------------------------------------------------------------- formulario */
.portal-formulario { display: flex; flex-direction: column; gap: 1.1rem; }
.portal-formulario--secundario { margin-top: 0.75rem; }

.portal-campo { display: flex; flex-direction: column; gap: 0.35rem; }
.portal-campo > span, .portal-campo > legend {
  font-weight: 600;
  color: var(--navy-800);
}

/* La casilla de «reportarlo sin mi nombre». En un teléfono, una casilla del
   tamaño por omisión se falla al tocarla: 1.25rem y con sitio a los lados.
   La etiqueta del campo la pinta la plantilla encima, como en los demás. */
.portal-casilla {
  width: 1.25rem; height: 1.25rem;
  margin: 0.15rem 0;
  accent-color: var(--navy-800);
}

/* Los campos del portal: altos, con borde visible y texto de 16px. */
body.portal .campo-texto,
body.portal input[type="text"],
body.portal input[type="password"],
body.portal input[type="email"],
body.portal input[type="date"],
body.portal textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.75rem;
  font-size: 1rem;          /* nunca menos: iOS haría zoom */
  font-family: inherit;
  border: 2px solid var(--navy-600);
  border-radius: 0.5rem;
  background: var(--lcr-blanco);
  color: var(--navy-900);
}
body.portal textarea { min-height: 6rem; resize: vertical; }

body.portal .campo-texto:focus,
body.portal input:focus,
body.portal textarea:focus {
  outline: 3px solid var(--teal-500);
  outline-offset: 1px;
  border-color: var(--teal-700);
}

/* El código de un solo uso: separado y grande, se teclea sin mirar. */
.portal-codigo {
  font-size: 1.6rem !important;
  letter-spacing: 0.4em;
  text-align: center;
}

.portal-opciones { border: 0; padding: 0; margin: 0; }
.portal-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;          /* toda la fila es tocable, no solo el círculo */
  padding: 0.25rem 0;
  font-size: 1.05rem;
}
.portal-opcion input { width: 1.4rem; height: 1.4rem; }

.portal-error { display: block; color: var(--rojo-700, #9b1c1c); font-weight: 600; }

/* Los adjuntos de un reporte. Cada campo de archivo en su recuadro, alto y
   tocable entero: el campo nativo se queda a la vista porque es él quien
   dice «2 archivos», y la app no tiene guiones para decirlo de otra forma. */
.portal-adjuntos { border: 0; padding: 0; margin: 0; gap: 0.6rem; }
.portal-ayuda--linea { display: inline; font-weight: 400; }
.portal-adjuntar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  border: 2px dashed var(--navy-600);
  border-radius: 0.5rem;
  background: var(--lcr-blanco);
}
.portal-adjuntar > span { font-weight: 600; color: var(--navy-800); }
body.portal .portal-adjuntar input[type="file"] {
  width: 100%;
  min-height: 2.75rem;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ botones */
.portal-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: var(--teal-700);
  color: var(--lcr-blanco);
  text-decoration: none;
  cursor: pointer;
}
.portal-boton:hover, .portal-boton:focus { background: var(--teal-600); }
.portal-boton:focus-visible { outline: 3px solid var(--oro-400, #e8b13b); outline-offset: 2px; }

.portal-boton--grande { min-height: 3.5rem; font-size: 1.1rem; width: 100%; }

.portal-boton--tenue {
  background: var(--lcr-blanco);
  color: var(--teal-700);
  border-color: var(--teal-700);
}
.portal-boton--tenue:hover, .portal-boton--tenue:focus {
  background: var(--teal-50);
}

.portal-acciones { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }

/* -------------------------------------------------------------- contenido */
.portal-bloque {
  background: var(--lcr-blanco);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--navy-200, #d7dee8);
}

.portal-lista { list-style: none; margin: 0 0 0.75rem; padding: 0; }

.portal-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--navy-100, #e8edf4);
}
.portal-fila:last-child { border-bottom: 0; }

.portal-tarjeta {
  background: var(--lcr-blanco);
  border: 1px solid var(--navy-200, #d7dee8);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.portal-tarjeta-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.portal-fila-titulo { font-weight: 600; }
.portal-fila-fecha { color: var(--navy-600); font-size: 0.9rem; margin: 0.25rem 0; }
.portal-detalle { margin: 0.5rem 0; }
.portal-dato { font-size: 1.05rem; }

.portal-resolucion {
  margin: 0.75rem 0 0.25rem;
  padding: 0.75rem;
  background: var(--teal-50);
  border-left: 4px solid var(--teal-600);
  border-radius: 0.25rem;
}

.portal-referencia-menor {
  margin: 0.5rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--navy-600);
}

/* Un aviso del tablón, leído entero dentro del inicio. Separación clara
 * entre uno y otro: sin ella, dos avisos seguidos se leen como uno solo. */
.portal-aviso-tablon {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--navy-100, #e8edf4);
}
.portal-aviso-tablon:last-child { border-bottom: 0; padding-bottom: 0; }
.portal-aviso-tablon:first-of-type { padding-top: 0; }

.portal-imagen {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.75rem;
  border-radius: 0.5rem;
}

/* Estados. El color NUNCA va solo: cada uno lleva su palabra al lado, que es
 * lo que lee quien no distingue el verde del rojo. */
.portal-estado {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.portal-estado--pendiente { background: var(--oro-100, #fdf3dc); color: var(--oro-700, #8a6416); }
.portal-estado--aprobada  { background: var(--teal-50);          color: var(--teal-700); }
.portal-estado--rechazada { background: #fbe9e9;                 color: #9b1c1c; }

/* --------------------------------------------------------------- el acuse */
.portal-acuse {
  text-align: center;
  background: var(--lcr-blanco);
  border: 2px solid var(--teal-600);
  border-radius: 0.75rem;
  padding: 2rem 1.25rem;
}
.portal-acuse-marca {
  font-size: 3rem;
  line-height: 1;
  margin: 0 0 0.5rem;
  color: var(--teal-600);
}
.portal-acuse-etiqueta {
  margin: 1.25rem 0 0.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-600);
}
.portal-acuse-referencia {
  margin: 0 0 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy-900);
  /* Que se pueda seleccionar de un toque para copiarlo o dictarlo. */
  user-select: all;
  word-break: break-all;
}

/* -------------------------------------------------------------- los avisos */
.portal-aviso {
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--navy-600);
  background: var(--lcr-blanco);
}
.portal-aviso--error { border-left-color: #9b1c1c; background: #fbe9e9; color: #7a1616; }
.portal-aviso--success { border-left-color: var(--teal-600); background: var(--teal-50); }

/* ------------------------------------------------------- barra de abajo */
.portal-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--lcr-navy);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--navy-800);
}
.portal-barra a {
  flex: 1;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-300);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.5rem 0.25rem;
}
.portal-barra a:hover, .portal-barra a:focus { background: var(--navy-850); color: var(--lcr-blanco); }
.portal-barra a:focus-visible { outline: 2px solid var(--oro-400, #e8b13b); outline-offset: -2px; }

/* ------------------------------------------------ la frontera del tablón */
/* Se usa en las pantallas de la EMPRESA (`base.html`), no en el portal.
 * Vive aquí porque es del mismo asunto, y porque `lcr.css` es la copia del
 * prototipo aprobado y no se toca. */
.frontera {
  border: 2px solid var(--oro-700, #8a6416);
  background: var(--oro-50, #fdf9ef);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.frontera-titulo { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--oro-700, #8a6416); }
.frontera-lista-titulo { margin-bottom: 0.35rem; }
.frontera-lista { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.frontera-lista li { margin-bottom: 0.25rem; }

/* ------------------------------------------------------ preferencias del sistema */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  body.portal .campo-texto, body.portal input, body.portal textarea {
    border-width: 3px;
  }
}

/* ------------------------------------------------------- avisos al teléfono */
/* El botón de activar avisos, al pie del inicio. Nace oculto y sólo el guion
 * del portal lo enseña: ver plantillas/portal/inicio.html. */
.portal-avisos-telefono { margin-top: 1.75rem; }

/* ---------------------------------------------------------- instalar la app */
/* En la puerta y dentro de un <details>: se abre y se cierra sin guion. */
.portal-instalar {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--teal-300);
  border-radius: 12px;
  background: var(--lcr-blanco);
  color: var(--navy-700);
}
.portal-instalar summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--teal-700);
}
.portal-instalar ol { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }
.portal-instalar li { margin: 0.25rem 0; }
.portal-instalar__sistema {
  font-size: 1rem;
  margin: 1rem 0 0.25rem;
  color: var(--navy-900);
}
/* Ya instalada, la app se abre en modo «standalone». Explicar dentro de ella
 * cómo instalarla sería ruido. Ver portal.tests_enlace_instalar. */
@media (display-mode: standalone) {
  .portal-instalar { display: none; }
}