/* =========================================================
   webapp.css — piezas comunes de la webapp instalable (skill webapp-instalable).
   Se carga DESPUÉS del CSS del sistema. Usa sus tokens si existen y trae valores de respaldo:
   ajusta solo el bloque :root de abajo para que combine con cada sistema.
   ========================================================= */
:root {
    --pwa-fondo: var(--surface, #1d1d21);
    --pwa-fondo-2: var(--surface-2, #26262b);
    --pwa-borde: var(--border, #33333a);
    --pwa-texto: var(--text, #ececec);
    --pwa-tenue: var(--muted, #9a9aa3);
    --pwa-acento: var(--gold, #c8a24a);
    --pwa-sobre-acento: var(--bg, #0f0f10);
    --pwa-aviso: var(--warn, #e0a23b);
    --pwa-radio: var(--radius, 10px);
    --pwa-tactil: 44px;
}

/* Con la app ya instalada no se ofrece instalarla */
html[data-pwa="instalada"] [data-instalar] { display: none !important; }

/* En el celular: campos de 16 px (iPhone no hace zoom al tocarlos) y sin demora del doble toque */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
    a, button, label, summary, [role="button"] { touch-action: manipulation; }
}

/* ---------- Cuadro "Instalar …" (pwa.js) ---------- */
.pwa-dialogo {
    width: min(420px, calc(100vw - 32px)); padding: 22px; border-radius: var(--pwa-radio);
    border: 1px solid var(--pwa-borde); background: var(--pwa-fondo); color: var(--pwa-texto);
}
.pwa-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.pwa-dialogo h2 { margin: 0 0 10px; font-size: 1.2rem; }
.pwa-dialogo p { margin: 0 0 18px; line-height: 1.5; }
.pwa-boton, .pwa-aviso button {
    min-height: var(--pwa-tactil); padding: 8px 18px; border: 0; border-radius: var(--pwa-radio);
    background: var(--pwa-acento); color: var(--pwa-sobre-acento); font: inherit; font-weight: 600; cursor: pointer;
}
.pwa-dialogo .pwa-boton { width: 100%; }
.pwa-boton:focus-visible, .pwa-aviso button:focus-visible { outline: 2px solid var(--pwa-texto); outline-offset: 2px; }

/* ---------- Avisos fijos: sin conexión / versión nueva ---------- */
.pwa-aviso {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
    transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
    display: flex; gap: 12px; align-items: center; padding: 10px 16px;
    border: 1px solid var(--pwa-borde); border-radius: var(--pwa-radio);
    background: var(--pwa-fondo-2); color: var(--pwa-texto); box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    font-size: 14px;
}
.pwa-aviso-sin-conexion { border-color: var(--pwa-aviso); }
.pwa-aviso-sin-conexion::before { content: '⚠'; color: var(--pwa-aviso); }
.pwa-aviso button { min-height: 36px; padding: 6px 14px; }

/* ---------- Fecha/hora escribibles (fechahora.js) ---------- */
.fh { position: relative; display: flex; gap: 8px; align-items: stretch; }
.fh .fh-texto { flex: 1 1 0; min-width: 0; font-variant-numeric: tabular-nums; }
.fh .fh-fecha { flex-grow: 1.4; min-width: 7.5em; }
.fh .fh-hora { min-width: 4.5em; }
.fh-boton {
    flex: none; display: grid; place-items: center; width: var(--pwa-tactil); min-height: var(--pwa-tactil);
    padding: 0; background: var(--pwa-fondo-2); color: var(--pwa-texto);
    border: 1px solid var(--pwa-borde); border-radius: var(--pwa-radio); cursor: pointer;
}
.fh-boton:hover { border-color: var(--pwa-acento); }
.fh-boton:focus-visible { outline: 2px solid var(--pwa-acento); outline-offset: 2px; }
.fh-boton svg { width: 20px; height: 20px; fill: currentColor; }
/* El input original queda debajo del botón: es la fuente del valor y el ancla del selector */
.fh .fh-nativo {
    position: absolute; right: 0; bottom: 0; width: var(--pwa-tactil); min-height: 0; height: 1px;
    padding: 0; border: 0; opacity: 0; pointer-events: none;
}
.fh .fh-texto:invalid:not(:placeholder-shown) { border-color: var(--bad, #e5604f); }

/* ---------- Página sin conexión (offline.html) ---------- */
.pwa-offline {
    min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center;
}
.pwa-offline-caja { max-width: 380px; }
.pwa-offline-caja img { width: 72px; height: 72px; margin-bottom: 12px; }
.pwa-offline-caja h1 { margin: 0 0 8px; }
.pwa-offline-caja p { color: var(--pwa-tenue); margin: 0 0 20px; }