/* =====================================================================
   APP-AGUAS — hoja de estilo única, escrita a mano (sin build).

   Objetivo: que se sienta una app del teléfono y no una página web.
   Lo que hace la diferencia, en orden:
     - listas agrupadas con separador interior, no una tarjeta por fila
     - iconos SVG, no emoji
     - barra de pestañas fija con desenfoque
     - hojas que suben desde abajo en vez de confirm() del navegador
     - avisos flotantes que no empujan el contenido

   Restricciones que no cambian: se usa de pie, con sol directo, una mano
   ocupada y a veces guantes. Objetivo táctil real de 48 px, contraste alto,
   acciones frecuentes al alcance del pulgar.
   ===================================================================== */

:root {
    /* Marca */
    --azul:        #0b3d5c;
    --azul-vivo:   #1573a8;
    --azul-tenue:  #e8f1f7;

    /* Semáforo */
    --verde:       #0d6e39;
    --verde-tenue: #e4f4ea;
    --rojo:        #b3261e;
    --rojo-tenue:  #fdecea;
    --ambar:       #96560a;
    --ambar-tenue: #fdf1dc;

    /* Superficies y texto */
    --fondo:       #eef1f4;
    --superficie:  #ffffff;
    --texto:       #10161c;
    --texto-2:     #5a6672;
    --texto-3:     #8a949e;
    --separador:   rgba(16, 22, 28, .10);
    --borde:       rgba(16, 22, 28, .16);

    /* Forma */
    --r-tarjeta:   14px;
    --r-control:   12px;
    --r-pildora:   999px;

    /* Medidas del armazón */
    --alto-appbar: 52px;
    --alto-tabbar: 58px;
    --seguro-arriba: env(safe-area-inset-top, 0px);
    --seguro-abajo:  env(safe-area-inset-bottom, 0px);

    /* Tipografía */
    --t-titulo:  17px;
    --t-grande:  28px;
    --t-cuerpo:  17px;
    --t-medio:   15px;
    --t-chico:   13px;
    --t-mini:    11px;
}

* { box-sizing: border-box; }


html {
    -webkit-text-size-adjust: 100%;
    /* Sin rebote de la página ni "tirar para recargar": en una app nativa
       no existen, y acá recargar sin querer en mitad de una venta molesta. */
    overscroll-behavior-y: contain;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
    font-size: var(--t-cuerpo);
    line-height: 1.35;
    color: var(--texto);
    background: var(--fondo);

    /* Elimina el retardo de 300 ms y el zoom por doble toque. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(var(--alto-tabbar) + var(--seguro-abajo));
}

/* La interfaz no se selecciona; el contenido de los campos sí. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, .seleccionable { -webkit-user-select: text; user-select: text; }

.ico { display: block; flex: none; }

/* Transición entre pantallas: quita el parpadeo blanco de la recarga.
   Donde no está soportado, simplemente no pasa nada. */
@view-transition { navigation: auto; }

/* --- Barra superior ------------------------------------------------- */

.appbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 4px;
    min-height: var(--alto-appbar);
    padding: 0 6px;
    padding-top: var(--seguro-arriba);
    background: var(--azul);
    color: #fff;
}
.appbar__titulo {
    flex: 1; min-width: 0;
    margin: 0; padding: 6px 6px;
    font-size: var(--t-titulo); font-weight: 650; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar__titulo span {
    display: block;
    font-size: var(--t-chico); font-weight: 400; opacity: .82;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar__accion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    color: #fff; text-decoration: none; background: none; border: 0; padding: 0;
    border-radius: var(--r-pildora);
}
.appbar__accion:active { background: rgba(255,255,255,.18); }

/* Título grande de la pantalla, debajo de la barra. */
.titulo-grande {
    margin: 4px 0 14px;
    font-size: var(--t-grande); font-weight: 750; letter-spacing: -.02em;
}
.titulo-grande small {
    display: block; margin-top: 2px;
    font-size: var(--t-medio); font-weight: 400; color: var(--texto-2);
}

main { padding: 14px 16px 24px; max-width: 720px; margin: 0 auto; }

h2 {
    margin: 22px 0 8px 4px;
    font-size: var(--t-chico); font-weight: 650; text-transform: uppercase;
    letter-spacing: .05em; color: var(--texto-2);
}
h2:first-child { margin-top: 4px; }
.h2-nota { margin: -4px 0 10px 4px; font-size: var(--t-chico); color: var(--texto-2); }

/* --- Lista agrupada -------------------------------------------------
   El patrón que más hace que se lea como app: un bloque con esquinas
   redondeadas y separadores interiores desplazados, en vez de una tarjeta
   suelta con borde por cada fila.                                      */

.lista {
    background: var(--superficie);
    border-radius: var(--r-tarjeta);
    overflow: hidden;
    margin-bottom: 14px;
}
.fila {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 60px;
    padding: 12px 14px;
    background: var(--superficie);
    color: var(--texto); text-align: left; text-decoration: none;
    border: 0; font: inherit;
}
.fila + .fila::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 0;
    height: 1px; background: var(--separador);
}
a.fila:active, button.fila:active { background: #e9edf1; }
.fila__cuerpo { flex: 1; min-width: 0; }
.fila__titulo { font-weight: 600; font-size: var(--t-cuerpo); letter-spacing: -.01em; }
.fila__sub {
    font-size: var(--t-medio); color: var(--texto-2); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Cuando el subtítulo es un dato y no un nombre —"Recarga · 3 unidades · 3
   envases de vuelta"— cortarlo con puntos suspensivos esconde información.
   Ahí baja de línea. */
.fila__sub--largo { white-space: normal; }
.fila__nota { font-size: var(--t-chico); color: var(--texto-3); margin-top: 3px; }
.fila__monto { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila__chevron { color: var(--texto-3); }
.fila--apilada { flex-wrap: wrap; }
/* Fila con nota al pie: el cuerpo y la etiqueta siguen en la misma línea, y
   la nota baja completa. Dentro del cuerpo la nota competiría con la
   etiqueta por el ancho y se partiría en dos. */
.fila--nota { flex-wrap: wrap; }
/* min-width:0 para que la dirección larga se corte con puntos suspensivos en
   vez de empujar la etiqueta a la línea de abajo, que descuadraba la fila. */
.fila--nota .fila__cuerpo { flex: 1 1 auto; min-width: 0; }
.fila__pie { flex: 1 1 100%; margin-top: 3px; }
.fila--apilada .fila__cuerpo { flex: 1 1 100%; }
.fila--apilada .fila__acciones { display: flex; gap: 8px; width: 100%; }
.fila--apilada .fila__acciones form { width: auto; }

/* --- Tarjeta suelta -------------------------------------------------- */

.tarjeta {
    background: var(--superficie);
    border-radius: var(--r-tarjeta);
    padding: 14px;
    margin-bottom: 14px;
}
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }

/* --- Botones --------------------------------------------------------- */

.boton {
    -webkit-appearance: none; appearance: none;
    font: inherit; font-weight: 650; letter-spacing: -.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; padding: 14px 18px;
    border: 0; border-radius: var(--r-control);
    background: var(--azul); color: #fff;
    text-decoration: none; cursor: pointer;
    transition: transform .06s ease, opacity .12s ease;
}
.boton:active { transform: scale(.975); }
.boton[disabled] { opacity: .42; }
.boton--secundario { background: var(--azul-tenue); color: var(--azul); }
/* Para el botón secundario que va SUELTO sobre el fondo de la pantalla, sin
   una tarjeta que lo contenga: ahí el relleno celeste solo no alcanza a
   leerse como botón y parece una franja apagada. El borde es el que hace el
   trabajo —esto se mira con sol y una sombra sola desaparecería—; la sombra
   solo lo despega del fondo. Al tocarlo se hunde: la sombra se achica junto
   con el `scale` que ya tienen todos los botones. */
.boton--realzado {
    box-shadow: inset 0 0 0 1.5px rgba(11,61,92,.28),
                0 1px 2px rgba(11,61,92,.08),
                0 6px 16px rgba(11,61,92,.10);
}
.boton--realzado:active {
    box-shadow: inset 0 0 0 1.5px rgba(11,61,92,.28),
                0 1px 2px rgba(11,61,92,.10);
}
.boton--sutil { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--borde); }
.boton--peligro { background: var(--rojo); color: #fff; }
.boton--chico { width: auto; min-height: 40px; padding: 8px 14px; font-size: var(--t-medio); border-radius: 10px; }
.boton--icono { width: 48px; min-height: 48px; padding: 0; }
/* Ancho completo pero más bajo: para las barras fijas, donde cada píxel de
   alto se le quita a la lista que hay detrás. */
.boton--compacto { min-height: 46px; padding: 10px 16px; }

/* --- Formularios ----------------------------------------------------- */

label { display: block; margin: 0 0 6px 4px; font-size: var(--t-medio); font-weight: 600; }
/* Aire entre un campo y el siguiente, venga o no con su pista en medio. Sin
   la segunda regla, el rótulo que sigue a una explicación queda pegado a
   ella y los dos se leen como un solo bloque. */
.campo + label, .pista + label { margin-top: 18px; }

input[type="text"], input[type="password"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
    -webkit-appearance: none; appearance: none;
    /* Solo el texto que se escribe va en mayúsculas; la interfaz no.
       Es text-transform y no mb_strtoupper en PHP: lo que se envía sigue
       siendo lo que la persona tecleó, así que el dato guardado no cambia. */
    text-transform: uppercase;
    font: inherit; width: 100%; min-height: 52px;
    padding: 13px 14px;
    border: 0; box-shadow: inset 0 0 0 1.5px var(--borde);
    border-radius: var(--r-control);
    background: var(--superficie); color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: none; box-shadow: inset 0 0 0 2px var(--azul-vivo);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
/* Las credenciales se escriben tal cual.
   La clave, porque en mayúsculas forzadas no se podría teclear una
   contraseña con minúsculas, y password_verify() sí distingue.
   El usuario, para que en pantalla se lea igual que como se lo dieron. El
   inicio de sesión en sí no distingue mayúsculas —la columna es
   utf8mb4_unicode_ci, así que MARCELR entra igual que marcelr—, y eso está
   bien: el teclado del teléfono capitaliza la primera letra solo y nadie
   debería quedarse afuera por eso. */
input[type="password"],
input[autocomplete="username"],
input[autocomplete="current-password"] { text-transform: none; }
/* El marcador de posición es texto de la app, no del usuario. */
::placeholder { text-transform: none; }
.pista { margin: 6px 0 0 4px; font-size: var(--t-chico); color: var(--texto-2); }

/* Buscador estilo app: fondo relleno, icono adentro, sin borde. */
.buscador { position: relative; margin-bottom: 14px; }
.buscador input {
    padding-left: 44px; box-shadow: none;
    background: rgba(16,22,28,.06);
}
.buscador input:focus { box-shadow: inset 0 0 0 2px var(--azul-vivo); background: var(--superficie); }
.buscador .ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--texto-3); pointer-events: none;
}

/* Control segmentado, como el nativo. */
.segmentado {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 3px; padding: 3px;
    background: rgba(16,22,28,.07); border-radius: var(--r-control);
}
.segmentado--dos-filas { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.segmentado input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.segmentado label {
    margin: 0; min-height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: var(--t-medio); font-weight: 600;
    color: var(--texto-2); cursor: pointer; text-align: center;
    transition: background .12s ease, color .12s ease;
}
.segmentado input:checked + label { background: var(--azul); color: #fff; }
.segmentado input:focus-visible + label { box-shadow: 0 0 0 2px var(--azul-vivo); }

/* --- Grilla de artículos --------------------------------------------- */

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.articulo {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 88px; padding: 14px 12px;
    border: 0; box-shadow: inset 0 0 0 1.5px var(--borde);
    border-radius: var(--r-tarjeta);
    background: var(--superficie); color: var(--texto);
    font: inherit; font-weight: 650; text-align: center; cursor: pointer;
    transition: transform .06s ease;
}
.articulo:active { transform: scale(.97); }
.articulo__precio { font-size: var(--t-medio); font-weight: 550; color: var(--texto-2); }
/* Precio convenido con el cliente: se distingue del de lista de un vistazo,
   porque es la diferencia entre cobrar bien y cobrar de menos. */
.articulo__precio--especial { color: var(--verde); font-weight: 700; }
.articulo.activo { box-shadow: inset 0 0 0 2.5px var(--azul); background: var(--azul-tenue); }
.articulo__cuenta {
    position: absolute; top: -9px; right: -9px;
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-pildora);
    background: var(--azul); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: var(--t-medio); font-weight: 750;
}
.articulo.activo .articulo__cuenta { display: flex; }

/* --- Contador +/- ---------------------------------------------------- */

.contador { display: flex; align-items: center; gap: 2px; }
.contador button {
    -webkit-appearance: none; appearance: none;
    width: 44px; height: 44px; padding: 0; border: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; background: rgba(16,22,28,.06); color: var(--azul);
    cursor: pointer;
}
.contador button:active { background: rgba(16,22,28,.13); }
.contador .n { min-width: 36px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Botón de corregir el precio, al pie de la línea del carrito. Va en su
   propia fila y a lo ancho: compartir línea con el contador dejaría dos
   objetivos táctiles pegados justo donde el pulgar hace +/− todo el día. */
.linea-precio { width: 100%; margin-top: 10px; justify-content: center; }
.precio-rebaja { color: var(--verde); font-weight: 600; }
.precio-alza   { color: var(--ambar); font-weight: 600; }

/* Interruptor recarga / venta dentro de una línea del carrito. */
.mini-seg { display: inline-flex; padding: 2px; gap: 2px; background: rgba(16,22,28,.07); border-radius: 10px; }
.mini-seg button {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; color: var(--texto-2);
    font: inherit; font-size: var(--t-chico); font-weight: 650;
    min-height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
}
.mini-seg button.activo { background: var(--superficie); color: var(--azul); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* --- Barra de acción inferior ---------------------------------------- */

.accion {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + var(--seguro-abajo));
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separador);
}
.accion__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px; font-size: var(--t-medio); color: var(--texto-2);
}
.accion__total b { font-size: 30px; font-weight: 750; color: var(--texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.con-accion { padding-bottom: 200px; }

/* --- Pie fijo de la pantalla de registro -----------------------------
   Cliente nuevo y el resumen del día viven pegados al fondo, encima de las
   pestañas. Son lo que más se toca y lo que más se mira, y la cartera puede
   tener cien filas: si van al final del documento hay que raspar la pantalla
   entera para llegar. El botón queda arriba de la tira de totales para que no
   comparta borde con la barra de pestañas y no se toque uno por el otro. */

.pie-fijo {
    position: fixed; left: 0; right: 0; z-index: 36;
    bottom: calc(var(--alto-tabbar) + var(--seguro-abajo));
    padding: 10px 16px 8px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separador);
}
.pie-fijo__interior { max-width: 720px; margin: 0 auto; }

/* La tira del día va en oscuro: es el único bloque de la pantalla que no se
   toca, solo se mira, y sobre blanco se perdía entre la lista y las
   pestañas. En el azul de la barra superior, además, la cabecera y el pie
   se leen como el mismo armazón, con el trabajo del día en medio. */
.tira-dia {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; margin-top: 10px;
    padding: 9px 6px;
    border-radius: var(--r-control);
    background: var(--azul);
    text-align: center;
}
.tira-dia > div { position: relative; min-width: 0; }
.tira-dia span {
    display: block;
    font-size: var(--t-mini); font-weight: 650; text-transform: uppercase;
    /* 78 % y no menos: sobre el azul da 7,6:1, contraste AAA. El rótulo mide
       11 px y esto se lee con sol directo en la pantalla; frente al blanco
       puro de las cifras (11,4:1) sigue leyéndose como texto secundario. */
    letter-spacing: .05em; color: rgba(255,255,255,.78);
}
.tira-dia b {
    display: block; margin-top: 2px;
    font-size: 19px; font-weight: 750; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hilo antes del total: separa los dos sumandos del resultado. */
.tira-dia__total::before {
    content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px;
    width: 1px; background: rgba(255,255,255,.20);
}

/* Alto reservado: botón 46 + separación 10 + tira ~40 + relleno 18. */
body.con-pie-fijo {
    padding-bottom: calc(var(--alto-tabbar) + var(--seguro-abajo) + 114px);
}

/* --- Barra de pestañas ----------------------------------------------- */

/* El borde es una línea entera y no el `0 -.5px 0` de antes: con la pantalla
   corta —Hoy sin entregas todavía— no había contenido detrás del desenfoque,
   el blanco al 92 % se confundía con el fondo y la barra se veía distinta a
   la de las demás pantallas, como si fuera texto suelto al pie. */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding-bottom: var(--seguro-abajo);
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separador);
}
.tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--alto-tabbar); padding: 8px 4px 6px;
    color: var(--texto-3); text-decoration: none;
    font-size: var(--t-mini); font-weight: 600; letter-spacing: -.01em;
}
.tabbar a.activo { color: var(--azul); }
.tabbar a:active { opacity: .55; }

/* --- Totales --------------------------------------------------------- */

.totales { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: var(--t-cuerpo); }
.totales .valor { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.totales .fuerte { font-size: 21px; font-weight: 750; }
.totales hr { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--separador); margin: 4px 0; }

/* --- Etiquetas ------------------------------------------------------- */

.etiqueta {
    display: inline-block; padding: 4px 10px; border-radius: var(--r-pildora);
    font-size: var(--t-mini); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.etiqueta--atrasado  { background: var(--rojo-tenue);  color: var(--rojo); }
.etiqueta--inminente { background: var(--ambar-tenue); color: var(--ambar); }
.etiqueta--info      { background: var(--azul-tenue);  color: var(--azul); }

/* --- Avisos ---------------------------------------------------------- */

.aviso { padding: 12px 14px; border-radius: var(--r-tarjeta); margin-bottom: 14px; font-size: var(--t-medio); font-weight: 550; }
.aviso--ok    { background: var(--verde-tenue); color: var(--verde); }
.aviso--error { background: var(--rojo-tenue);  color: var(--rojo); }
.aviso--info  { background: var(--azul-tenue);  color: var(--azul); }

/* Aviso flotante: confirma sin empujar el contenido ni mover los botones
   bajo el dedo. */
.brindis {
    position: fixed; left: 16px; right: 16px; z-index: 60;
    bottom: calc(var(--alto-tabbar) + var(--seguro-abajo) + 14px);
    margin: 0 auto; max-width: 480px;
    padding: 13px 16px; border-radius: var(--r-tarjeta);
    background: rgba(16,22,28,.94); color: #fff;
    font-size: var(--t-medio); font-weight: 550;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    animation: brindis-entra .22s cubic-bezier(.2,.8,.3,1);
}
.brindis--saliendo { animation: brindis-sale .2s ease forwards; }
@keyframes brindis-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes brindis-sale  { to   { opacity: 0; transform: translateY(14px); } }

/* --- Hoja inferior (reemplaza a confirm()) --------------------------- */

dialog.hoja {
    width: 100%; max-width: 480px;
    margin: auto auto 0; padding: 0;
    border: 0; border-radius: 18px 18px 0 0;
    background: var(--superficie); color: var(--texto);
    box-shadow: 0 -8px 40px rgba(0,0,0,.3);
}
dialog.hoja::backdrop { background: rgba(0,0,0,.42); }
dialog.hoja[open] { animation: hoja-sube .24s cubic-bezier(.2,.8,.3,1); }
@keyframes hoja-sube { from { transform: translateY(100%); } }
.hoja__cuerpo { padding: 20px 20px calc(16px + var(--seguro-abajo)); }
.hoja__asa { width: 38px; height: 4px; border-radius: 2px; background: var(--separador); margin: 8px auto 4px; }
.hoja__titulo { margin: 6px 0 6px; font-size: 19px; font-weight: 700; }
.hoja__texto { margin: 0 0 18px; font-size: var(--t-medio); color: var(--texto-2); }
.hoja__botones { display: grid; gap: 8px; }
/* Pasos numerados de la hoja de instalación. */
.pasos { margin: 0 0 18px; padding-left: 22px; }
.pasos li { margin-bottom: 10px; font-size: var(--t-medio); line-height: 1.4; }
.pasos li::marker { font-weight: 750; color: var(--azul); }

/* --- Varios ---------------------------------------------------------- */

/* --- Selector de día del historial ----------------------------------
   El <input type="date"> nativo dibuja "dd/mm/aaaa" y su propio iconito, y
   nada de eso se puede tocar con CSS: al lado del resto de la app se veía
   como un control prestado de otra parte. Así que el recuadro lo dibujamos
   nosotros —icono, texto y botón de quitar— y el input va invisible encima,
   ocupándolo entero. El teléfono sigue abriendo su selector nativo al
   tocarlo, que es el que de verdad sirve con una mano. */

.selector-fecha {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; margin-bottom: 14px; padding: 0 12px 0 14px;
    border-radius: var(--r-control);
    background: rgba(16,22,28,.06);
    color: var(--texto-2);
}
.selector-fecha .ico { color: var(--texto-3); }
.selector-fecha__texto {
    flex: 1; min-width: 0;
    font-size: var(--t-cuerpo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Con un día elegido el recuadro deja de ser un marcador de posición y pasa
   a ser un filtro activo: se pinta como tal. */
.selector-fecha--activo {
    background: var(--azul-tenue);
    box-shadow: inset 0 0 0 1.5px var(--azul-vivo);
}
.selector-fecha--activo .ico,
.selector-fecha--activo .selector-fecha__texto { color: var(--azul); }
.selector-fecha--activo .selector-fecha__texto { font-weight: 650; }

/* El botón de quitar va POR ENCIMA del input invisible (z-index), si no
   quedaría tapado y tocarlo abriría el calendario en vez de limpiar. */
.selector-fecha__quitar {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; margin-right: -6px;
    border-radius: var(--r-pildora);
    color: var(--azul); text-decoration: none;
}
.selector-fecha__quitar:active { background: rgba(11,61,92,.14); }

.selector-fecha input[type="date"] {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; min-height: 0;
    padding: 0; margin: 0; border: 0; box-shadow: none;
    background: transparent;
    /* Invisible pero presente: sigue recibiendo el toque y abriendo el
       selector del sistema. display:none o visibility:hidden lo dejarían
       fuera del alcance del dedo. */
    opacity: 0;
    -webkit-appearance: none; appearance: none;
}
/* El foco se pinta en el recuadro y no en el input: el input está a opacidad
   0, así que su propio anillo no se vería. */
.selector-fecha:focus-within { box-shadow: inset 0 0 0 2px var(--azul-vivo); }

/* Respaldo para un navegador sin showPicker(): sin esa función no hay manera
   de abrir el calendario desde código, así que se muestra el control nativo
   tal cual. Se ve peor, pero se puede usar. */
.selector-fecha--nativo { padding-left: 10px; }
.selector-fecha--nativo input[type="date"] {
    position: static; opacity: 1; padding: 0 4px;
}
.selector-fecha--nativo > .ico,
.selector-fecha--nativo .selector-fecha__texto { display: none; }

.vacio { text-align: center; color: var(--texto-2); padding: 34px 16px; font-size: var(--t-medio); }
.oculto { display: none !important; }
/* Etiqueta que necesita el lector de pantalla pero estorba en la pantalla. */
.oculto-visual {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.tachado { color: var(--rojo); text-decoration: line-through; }
.nuevo-valor { color: var(--verde); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    @view-transition { navigation: none; }
}