/* ══════════════════════════════════════════════════════════════════════════════
   ÁREA SEGURA — ANDROID 16 (PANTALLA COMPLETA FORZADA) · 16/09/2026

   POR QUÉ EXISTE ESTE FICHERO
   La app de Android es una TWA: una ventana de Chrome sin bordes que enseña esta
   web. Desde targetSdk 36 (Android 16) el sistema YA NO reserva hueco para sus
   barras: la página se dibuja de borde a borde y es ELLA quien debe apartarse de
   la barra de estado (arriba) y de la barra de gestos (abajo).

   DUEÑO ÚNICO: toda la corrección vive AQUÍ. Ninguna pantalla calcula márgenes
   por su cuenta. Si esto hay que revertirlo, se quita el <link> y ya está.

   LA REGLA DE ORO DE ESTE FICHERO: en escritorio y en un móvil antiguo, todas las
   env(safe-area-inset-*) valen 0, así que TODO lo de abajo se convierte en el
   valor que ya había. El aspecto no cambia en ningún sitio donde no haya barras.
   Por eso cada regla usa calc()/max() sobre el valor original, nunca lo sustituye.

   LO QUE ESTE FICHERO NO HACE: no toca colores, ni tipografías, ni tamaños de
   texto, ni el <meta name="theme-color">, que sigue siendo #6FC1B6 en las mismas
   pantallas que antes. Solo aparta contenido de las barras del sistema.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ─── 1 · EL HUECO DE LAS BARRAS, EN TODAS LAS PANTALLAS ──────────────────────
   Se pone en <html> y no en <body> a propósito: varias pantallas ya tienen su
   propio padding en el body (el login, por ejemplo, tiene 24px 16px). Si lo
   pusiéramos ahí se lo comeríamos. En <html> se SUMA al que ya hay. */
html {
    box-sizing: border-box;
    padding-top:    env(safe-area-inset-top,    0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left,   0px);
    padding-right:  env(safe-area-inset-right,  0px);
}

/* Sin esto aparecería un desplazamiento vertical de más: las pantallas piden
   100vh (la altura ENTERA, barras incluidas) dentro de un <html> que ya está
   encogido por el hueco. En escritorio esto es exactamente 100vh. */
body {
    min-height: calc(100vh
        - env(safe-area-inset-top,    0px)
        - env(safe-area-inset-bottom, 0px));
}


/* ─── 2 · EXCEPCIÓN: EL PANEL DEL CLIENTE ─────────────────────────────────────
   Su cabecera es turquesa y DEBE seguir pintando por debajo de la barra de
   estado: es el mismo #6FC1B6 del theme-color, y así la barra se ve del color de
   Solveo en vez de dejar una franja gris. Por eso aquí el hueco no lo pone el
   <html>: lo pone la cabecera por dentro, y el color llega hasta arriba del todo.

   Se reconoce por .app, que solo existe en esta pantalla. Si un navegador muy
   antiguo no entendiera :has(), estas cuatro reglas se ignoran y el panel se
   comporta como el resto: con una franja arriba en vez de turquesa. Feo, pero
   nada queda tapado ni deja de funcionar. */
html:has(.app) {
    padding-top: 0;
}
html:has(.app) body {
    min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
}
html:has(.app) .header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
/* La franja inferior del panel: que la última tarjeta no muera bajo la barra
   de gestos. El hueco de <html> ya lo cubre, esto es el margen de respiro. */
html:has(.app) .app {
    min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ─── 3 · PANEL DE CONTACTO (los WhatsApp por departamento) ───────────────────
   OJO: es position:fixed, así que el hueco del <html> NO le afecta — un elemento
   fijo se coloca respecto a la PANTALLA, no respecto a la página. Su bottom:0 es
   el borde real del cristal, justo donde vive la barra de gestos. Necesita su
   propio margen o los botones de WhatsApp quedan debajo de ella. */
.contact-sheet {
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
}


/* ─── 4 · VISOR DE PDF A PANTALLA COMPLETA ────────────────────────────────────
   Lo más delicado de toda la tarea. El visor tapa la pantalla entera (inset:0) y
   su ÚNICA salida es la ✕ de arriba a la izquierda. Si esa ✕ queda debajo de la
   barra de estado, el cliente se queda encerrado en el visor y solo sale matando
   la app: eso es un callejón sin salida y motivo de rechazo en las tiendas. */
.pdf-modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pdf-modal-header {
    padding-top:   calc(12px + env(safe-area-inset-top,   0px));
    padding-left:  calc(16px + env(safe-area-inset-left,  0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
}


/* ─── 5 · LOS DOS BOTONES DE CERRAR, A MEDIDA DE UN DEDO ──────────────────────
   Estándar de diseño de MGH: zona táctil mínima 44×44px. Las dos ✕ se quedaban
   por debajo, y ahora que pueden acabar pegadas al borde de la pantalla fallarlas
   es mucho más fácil. No cambia cómo se ven (el aspa sigue igual de grande):
   crece la zona que responde al dedo, centrando el símbolo dentro. */
.pdf-modal-close,
.contact-sheet-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}