/* ================================================================
   app.css — Hoja única de Oryon Secure.

   ARMAZÓN FIJO. La pantalla se reparte en tres franjas:

       ┌──────────────────────┐
       │  .app-header         │  fija — solo cambia el rótulo
       ├──────────────────────┤
       │  .hoja               │  única que rueda y única que
       │   (contenido)        │  se reemplaza al navegar
       ├──────────────────────┤
       │  .barra              │  fija — siempre a la vista
       └──────────────────────┘

   El documento no se desplaza (body en overflow:hidden); lo hace la
   lámina de en medio. Por eso la barra ya no necesita position:fixed
   ni reservar hueco con padding: es una franja más del armazón.

   Fallos de móvil que se corrigieron por el camino:
     · height:100vh — en iOS y Android la barra de direcciones no cuenta
       dentro de 100vh, así que el contenido quedaba por debajo del
       borde visible y la barra inferior tapada. Se usa 100dvh.
     · inputs a 14px — Safari hace zoom automático al enfocar cualquier
       campo con menos de 16px, y la página quedaba descuadrada.
     · desbordes a lo ancho — un solo elemento ancho hacía que el
       navegador encogiera la página entera.
   ================================================================ */

:root {
    --negro:      #000000;
    --carbon:     #111111;
    --carbon-2:   #1c1c1c;
    --blanco:     #ffffff;
    --tinta:      #14171c;
    --tinta-2:    #555c66;
    --gris:       #8b93a1;
    --linea:      #e4e6ea;
    --superficie: #f5f6f8;
    --acento:     #ce1126;
    --ok:         #2f7d52;

    --barra:      64px;   /* alto de la barra inferior */
    --radio:      10px;
    --sombra:     0 6px 24px rgba(0, 0, 0, .18);

    /* Ancho útil y tamaño base. Antes el ancho estaba clavado en 480px:
       en una tablet o en el navegador de escritorio la app quedaba como
       una tira estrecha en medio de la pantalla, que es justo la
       sensación de "no se adapta, se ve muy lejos". Ahora ambos crecen
       con la ventana (ver los cortes al final del archivo). */
    --ancho:      480px;
    --texto:      16px;

    /* Respiro para el indicador de inicio del iPhone y equivalentes */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

/* Si un solo elemento se sale a lo ancho, el navegador del teléfono encoge
   la página entera para que quepa: se ve todo lejos, como con zoom hacia
   fuera. Estos cortes impiden que eso arrastre a toda la pantalla. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Nada con ancho propio debe empujar el documento */
img, svg, video, canvas, table, iframe { max-width: 100%; }

/* Dentro de flex y grid el mínimo por defecto es el contenido: una fecha
   larga o un campo de texto no ceden y desbordan el renglón. */
.fila > *, .clima > *, .avance > *, .registro .arriba > * { min-width: 0; }

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

/* El documento no se desplaza: el armazón ocupa la pantalla y lo único
   que rueda es la lámina de contenido. Así la cabecera y la barra no se
   mueven nunca ni parpadean al cambiar de pantalla. */
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--negro);
    color: var(--blanco);
    font-size: var(--texto);
    height: 100vh;
    height: 100dvh;              /* la que de verdad respeta el navegador móvil */
    overflow: hidden;
    overscroll-behavior-y: none; /* sin rebote elástico al final de la lista */
    -webkit-tap-highlight-color: transparent;
}

/* ── Armazón de página ───────────────────────────────────────── */

/* Armazón: tres franjas. Arriba y abajo son fijas; la de en medio es la
   única que se reemplaza al navegar. */
.app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

/* Cabecera: altura por contenido, no por porcentaje. Antes era 15% y en
   una pantalla corta se comía el formulario. */
.app-header {
    background: var(--negro);
    color: var(--blanco);
    padding: calc(14px + var(--safe-t)) 20px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.app-header .marca { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.app-header img { width: 52px; height: auto; }
.app-header h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.app-header .sub {
    font-size: 12.5px;
    color: var(--gris);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.app-header .sub b { color: #cfd4dc; font-weight: 600; }

/* Botón de retroceso: 44px de lado, el mínimo táctil cómodo */
.btn-atras {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: -6px 0 0 -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gris);
    cursor: pointer;
    border-radius: 50%;
    transition: background .18s, color .18s;
}
.btn-atras:active { background: rgba(255, 255, 255, .1); color: var(--blanco); }
/* Se dibuja siempre aunque no haya a dónde volver: con visibility, no con
   display, para que la cabecera no dé un salto al cambiar de pantalla. */
.btn-atras.oculto { visibility: hidden; pointer-events: none; }

/* Lámina de contenido: lo único que se desplaza y lo único que cambia
   al navegar. Ya no necesita reservar hueco para la barra, porque la
   barra es una franja del armazón y no flota encima. */
.hoja {
    background: var(--blanco);
    color: var(--tinta);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 14px 14px 0 0;
    padding: 22px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hoja.oscura { background: var(--carbon); color: var(--blanco); }

/* Cambio de pantalla: solo se anima esta lámina */
.hoja.entra-der { animation: hoja-entra-der .26s cubic-bezier(.22, .8, .3, 1) both; }
.hoja.entra-izq { animation: hoja-entra-izq .26s cubic-bezier(.22, .8, .3, 1) both; }
.hoja.sale-izq  { animation: hoja-sale-izq  .17s ease both; }
.hoja.sale-der  { animation: hoja-sale-der  .17s ease both; }

@keyframes hoja-entra-der { from { opacity: 0; transform: translateX(24px);  } }
@keyframes hoja-entra-izq { from { opacity: 0; transform: translateX(-24px); } }
@keyframes hoja-sale-izq  { to   { opacity: 0; transform: translateX(-24px); } }
@keyframes hoja-sale-der  { to   { opacity: 0; transform: translateX(24px);  } }

/* Mientras carga el trozo nuevo, la lámina se apaga un poco */
.hoja.cargando { opacity: .55; pointer-events: none; }

/* ── Tarjetas seleccionables ─────────────────────────────────── */

.tarjeta {
    width: 100%;
    text-align: left;
    font-family: inherit;
    padding: 18px;
    background: var(--superficie);
    border: 1px solid transparent;
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    transition: background .18s, border-color .18s, transform .12s;
}
.tarjeta:active { transform: scale(.985); background: #eaecef; }
.tarjeta[aria-pressed="true"] {
    background: #fff;
    border-color: var(--acento);
    box-shadow: inset 0 0 0 1px var(--acento);
}
.tarjeta .flecha { color: var(--gris); flex-shrink: 0; }

.tarjeta-dron { flex-direction: column; align-items: stretch; gap: 6px; font-weight: 400; }
.tarjeta-dron .titulo { font-size: 16px; font-weight: 700; }
.tarjeta-dron .dato { font-size: 13.5px; color: var(--tinta-2); }
.tarjeta-dron .dato b { color: var(--tinta); font-weight: 600; }
.tarjeta-dron .fecha { font-size: 12px; color: var(--gris); }

/* ── Formularios ─────────────────────────────────────────────── */

label { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); margin-bottom: 6px; }
.hoja.oscura label { color: #dfe3e8; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    /* 16px exactos: por debajo de eso Safari hace zoom al enfocar */
    font-size: 16px;
    font-family: inherit;
    color: var(--tinta);
    background: var(--blanco);
    -webkit-appearance: none;
    appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b93a1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .tarjeta:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.campo { display: flex; flex-direction: column; }
.fila { display: flex; gap: 10px; align-items: flex-end; }
.fila > .campo { flex: 1; min-width: 0; }

/* ── Botones ─────────────────────────────────────────────────── */

.btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    background: var(--negro);
    color: var(--blanco);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .12s, opacity .18s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-sec { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }
.btn-icono {
    width: 50px;
    min-height: 50px;
    flex-shrink: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Bloques auxiliares ──────────────────────────────────────── */

.seccion-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 8px 0 0;
}
.hoja > .seccion-titulo:first-child { margin-top: 0; }

.vacio {
    padding: 36px 16px;
    text-align: center;
    color: var(--gris);
    font-size: 14.5px;
    line-height: 1.6;
}

.aviso {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    background: #fdecee;
    color: #8c1020;
    border: 1px solid #f4c4ca;
}
.aviso[hidden] { display: none; }

/* Casilla de verificación grande, cómoda con el dedo */
.check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    font-size: 15px;
    line-height: 1.45;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f0f1f3;
}
.check:last-of-type { border-bottom: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .caja {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 2px solid #c8ccd3;
    border-radius: 6px;
    position: relative;
    transition: background .16s, border-color .16s;
}
.check .caja::after {
    content: '';
    position: absolute;
    left: 7px; top: 2px;
    width: 6px; height: 12px;
    border: solid var(--blanco);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .16s cubic-bezier(.2, .8, .3, 1);
}
.check input:checked ~ .caja { background: var(--negro); border-color: var(--negro); }
.check input:checked ~ .caja::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible ~ .caja { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── Barra inferior ──────────────────────────────────────────── */

/* Ya no flota: es la tercera franja del armazón, así que se queda a la
   vista siempre y sin necesidad de centrarla a mano. */
.barra {
    flex-shrink: 0;
    width: 100%;
    height: calc(var(--barra) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: var(--carbon);
    border-top: 1px solid #262626;
    display: flex;
    align-items: stretch;
    z-index: 60;
}
.barra a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #7c828c;
    text-decoration: none;
    font-size: 10.5px;
    letter-spacing: .02em;
    transition: color .18s;
    position: relative;
}
.barra a svg { width: 22px; height: 22px; }
.barra a:active { color: var(--blanco); }
.barra a[aria-current="page"] { color: var(--blanco); }
/* Filete que marca la sección abierta */
.barra a[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: var(--acento);
    border-radius: 0 0 2px 2px;
}

/* ── Modal ───────────────────────────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fundido .2s ease both;
}
.modal[hidden] { display: none; }

/* Hoja que sube desde abajo: es el gesto que espera un teléfono */
.modal-hoja {
    width: 100%;
    max-width: var(--ancho);
    background: var(--blanco);
    color: var(--tinta);
    border-radius: 16px 16px 0 0;
    padding: 24px 20px calc(20px + var(--safe-b));
    box-shadow: var(--sombra);
    animation: sube .28s cubic-bezier(.22, .8, .3, 1) both;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
}
.modal.cerrando { animation: fundido .18s ease reverse both; }
.modal.cerrando .modal-hoja { animation: sube .18s ease reverse both; }

/* Asa decorativa, señala que la hoja se puede descartar */
.modal-hoja::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #d8dbe0;
    margin: -8px auto 18px;
}

.modal-hoja h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.modal-hoja p  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.modal-hoja .detalle {
    margin-top: 16px;
    padding: 14px;
    background: var(--superficie);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tinta-2);
}
.modal-hoja .detalle b { color: var(--tinta); font-weight: 600; }
.modal-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* Marca de estado del modal */
.modal-marca {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.modal-marca.ok   { background: #e7f4ec; color: var(--ok); }
.modal-marca.mal  { background: #fdecee; color: var(--acento); }
.modal-marca.duda { background: var(--superficie); color: var(--tinta); }

@keyframes fundido { from { opacity: 0 } to { opacity: 1 } }
@keyframes sube    { from { transform: translateY(100%) } to { transform: none } }

/* ── Pantallas cortas y accesibilidad ────────────────────────── */

/* ── Cómo crece con la ventana ───────────────────────────────────
   La app nació para el teléfono, pero abrirla en una tablet o en el
   navegador de escritorio dejaba una tira de 480px en medio de la
   pantalla, con la letra de un móvil: se lee como si estuviera lejos.
   A partir de aquí el ancho y el tamaño base suben por escalones. */

@media (min-width: 600px) {
    :root { --ancho: 560px; --texto: 16.5px; }
    .hoja { padding: 26px 24px 32px; border-radius: 16px 16px 0 0; }
    .app-header { padding: 22px 24px 18px; }
    .app-header img { width: 58px; }
    .app-header h1 { font-size: 21px; }
    .app-header .sub { font-size: 13.5px; }
}

@media (min-width: 900px) {
    :root { --ancho: 680px; --texto: 17px; --barra: 68px; }
    .app-header h1 { font-size: 23px; }
    .tarjeta { font-size: 17px; padding: 20px; min-height: 62px; }
    .check { font-size: 16px; padding: 13px 0; }
    /* Con este ancho ya caben dos columnas de clima y de tarjetas */
    .clima { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
    :root { --ancho: 760px; }
}

/* Con ratón, el estado de reposo puede reaccionar al pasar por encima */
@media (hover: hover) {
    .tarjeta:hover  { background: #eaecef; }
    .registro:hover { background: #232323; }
    .btn:hover      { background: var(--carbon-2); }
    .btn-sec:hover  { background: #eaecef; }
    .barra a:hover  { color: var(--blanco); }
}

@media (max-width: 360px) {
    .app-header h1 { font-size: 17.5px; }
    .barra a { font-size: 10px; }
}

/* En horizontal la lámina no debe forzar el alto de una pantalla baja */
@media (max-height: 460px) {
    .app-header { padding-top: calc(10px + var(--safe-t)); padding-bottom: 10px; }
    .app-header img { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .hoja, .modal, .modal-hoja,
    .modal.cerrando, .modal.cerrando .modal-hoja { animation: none !important; }
    .tarjeta, .btn, .check .caja::after { transition: none !important; }
}