/* ===== Capa nativa (solo runtime) =====================================
   La app de Claude Design se dibuja dentro de un "teléfono" CSS (.phone con
   bisel, notch y escalado fit()). En el dispositivo real la pantalla ES el
   teléfono, así que esta capa lo pliega a pantalla completa. Es 100% aditiva:
   el código del diseño no se toca; solo se anulan el marco y el escalado.
   Los !important vencen tanto a styles.css como a los estilos inline que
   pone fit() (transform) y el render de app.jsx (height:732px del .stage). */

html, body { height: 100%; overflow: hidden; }

.stage {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.phone {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;   /* anula el scale() de fit() */
  background: transparent !important;
}
.phone::after { display: none !important; }   /* botones laterales dibujados */

.screen { border-radius: 0 !important; }
.screen::after { display: none !important; }  /* anillo anti-aliasing del bisel */

/* ===== Pantalla completa de verdad (petición de Gerhard, 6 jul 2026) =====
   El contenido llega hasta los bordes físicos, exactamente como en el preview
   de Claude Design: el héroe del Home pasa por debajo del reloj (el diseño ya
   trae un degradado para que se lea) y la barra de pestañas toca el borde
   inferior. Las cabeceras de sección (Comunitat/Diari/Medicació) ya reservan
   45px propios en el diseño, así que NO se les añade ningún desplazamiento
   (hacerlo hundía los títulos detrás de la onda — bug corregido 6 jul 2026). */

.notch { display: none !important; }          /* notch falso: el real ya existe */

/* La tabbar del diseño trae padding 10px arriba / 26px abajo (colchón del
   indicador de inicio del preview), inflados además por el zoom 1.3. Petición
   de Gerhard (6 jul 2026): SIN márgenes arriba/abajo del footer, botones al
   mismo tamaño — solo se quita el aire (los .tab ya llevan 4px propios).

   🔴 UX28 (16 ago 2026) — ESTA LÍNEA TAPABA LAS PESTAÑAS EN ANDROID.
   Lo destapó la foto del teléfono de un amigo de Gerhard: la barra de
   navegación del sistema (3 botones, ~48 dp) se comía la barra de pestañas.
   Los 10px fijos son correctos para el aire del diseño, pero no reservan NADA
   para la barra del sistema, y este `!important` gana a los dos intentos que
   la webapp sí hacía bien (responsive.css:43 y styles.css:196).
   Por qué no bastaba con lo que ya había: dentro del WebView de Android
   `env(safe-area-inset-bottom)` vale 0 aunque el index.html declare
   `viewport-fit=cover` — la misma trampa que obligó a poner números fijos en
   las cabeceras de arriba. La medida BUENA la publica App.js en `--cf-sab`
   (useSafeAreaInsets, desde el 6 jul), y hasta hoy no la leía nadie.
   Se conserva la petición de Gerhard: 10px de aire y ni uno más; lo único que
   se añade es exactamente lo que mide la barra del sistema, que en un aparato
   sin barra vale 0 y deja la pantalla EXACTAMENTE como estaba.
   `env(...)` queda de reserva para el navegador de escritorio, donde sí vale. */
.tabbar { padding-top: 0 !important;
  padding-bottom: calc(10px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }

/* 🍏 EXCEPCIÓN PARA iPHONE (25 ago 2026) — la regla de arriba se hizo PARA
   ANDROID, donde la barra de 3 botones tapaba de verdad las pestañas. En iPhone
   no hay tal barra: solo el indicador de inicio, que se dibuja ENCIMA y no tapa
   nada — así que ese hueco se suma al que ya había y engorda la franja blanca.
   MEDIDO en Chromium a 393×852 (tools/verify-tabbar-ios.mjs), en px de pantalla:
       1.0.1 (build 32)   88,19      ← lo que Gerhard tenía y daba por bueno
       build 34           122,19     ← +34,00 exactos, sin que los iconos se movieran
       con esta regla     88,19      ← idéntica a la 1.0.1
   Android no se entera (mide 136,19 con y sin esta regla) y los otros seis
   sitios que leen --cf-sab (.sheet, .coop-sheet, .vc-share, .nc-body y los dos
   avisos flotantes) salen idénticos: ese es el motivo de tocar SOLO .tabbar y
   no la variable, que fue el primer arreglo propuesto y se descartó midiendo.
   La marca `data-cf-os` la planta native/App.js, que es el único que sabe en
   qué teléfono corre; en el navegador de escritorio no existe y aquí no pasa
   nada. Este valor —10px— es literalmente el que traía la 1.0.1. */
html[data-cf-os="ios"] .tabbar { padding-bottom: 10px !important; }

/* UX28 · lo mismo para todo lo que se pega al borde de abajo. Sus botones
   quedaban igual de tapados, solo que se ve menos porque son pantallas que no
   están siempre abiertas. El CSS del diseño ya lo intentaba con
   `env(safe-area-inset-bottom)`, que dentro del WebView de Android vale 0: aquí
   solo se le cambia la fuente del dato, conservando su colchón original. */
.sheet      { padding-bottom: calc(22px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }
.coop-sheet { padding-bottom: calc(18px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }
.vc-share   { padding-bottom: calc(20px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }
/* avisos flotantes: van medidos DESDE abajo, así que suben con la barra */
.cf-block-toast { bottom: calc(96px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }
.coop-toast     { bottom: calc(84px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }

/* UX28 · EL REMATE (23 ago 2026) — los dos sitios que quedaban.
   El barrido de hoy encontró que de los 7 sitios que la ficha listaba, cinco ya
   estaban tapados arriba (.sheet, .coop-sheet, .vc-share y los dos avisos
   flotantes) y quedaban estos dos:

   1) `.nc-body` (normalcomfort.css:40) — el cuerpo con scroll de la pantalla de
      confort. Reserva `26px + env(safe-area-inset-bottom)`, y dentro del WebView
      de Android ese `env()` vale 0: el final del texto queda debajo de la barra
      de 3 botones del sistema. Se le cambia solo la FUENTE del dato, conservando
      su colchón original de 26px, igual que se hizo con las hojas modales.

   2) `--safe-bottom` (responsive.css:19) — la variable que la webapp define como
      `env(safe-area-inset-bottom, 0px)`, es decir, 0 en Android. Hoy solo la lee
      `.tabbar` (responsive.css:43), que ya está resuelta con `!important` más
      arriba, así que ahora mismo no rompe nada visible. Se redefine igualmente
      para que cualquier hoja futura que use `var(--safe-bottom)` nazca midiendo
      la barra de verdad en vez de heredar el cero. native.css se carga la ÚLTIMA
      (index.html:26), después de responsive.css (:21), así que esta definición
      gana por orden sin necesidad de `!important`.

   En un aparato sin barra de botones `--cf-sab` vale 0 y las dos reglas dejan la
   pantalla EXACTAMENTE como estaba. */
.nc-body { padding-bottom: calc(26px + var(--cf-sab, env(safe-area-inset-bottom, 0px))) !important; }
:root    { --safe-bottom: var(--cf-sab, env(safe-area-inset-bottom, 0px)); }

/* ===== FLARE RADAR — reestructurado para pantalla real (6 jul 2026) =======
   Con el zoom global 1.3 el ancho útil baja a ~300px y el radar del diseño
   (pensado para 393px) desbordaba: chips de leyenda cortados, sparkline
   fuera de la tarjeta y texto en columna de una palabra. Junto a estos
   estilos van 4 parches JS en build/flareradar.js (re-aplicados por
   actualizar-desde-design.sh en cada update). */

/* leyenda: los 3 chips siempre caben — número arriba, etiqueta debajo si hace falta */
.fr-counts { gap: 6px; }
.fr-count { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: center;
  gap: 4px 6px; padding: 8px 5px; }
.fr-count-k { text-align: center; line-height: 1.15; }

/* tarjeta de señal enfocada: el bloque «% FLARE PUSH» no aplasta el título */
.mfr-fpctlab { max-width: 54px; }

/* subtítulo del encabezado: 2 líneas en vez de cortarse con «…» */
.fr-sub { white-space: normal; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* nombre del punto seleccionado en el radar: nunca más ancho que el propio radar */
.fr-dot-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* gauge del titular: un pelín menos de aire para que quepa la sparkline */
.mfr-gauge { gap: 11px; padding: 11px 12px; }

/* FIX device-only (WKWebView, 7 jul 2026): la columna central del titular
   (RISCHIO / Basso) se aplastaba a ~1 carácter y la regla global de word-break
   la partía letra a letra ("RIS/CHI/O", "B/a/ss/o"). En Chromium (preview de
   Claude Design) no se ve, por eso el diseño no lo arregla. Solución: darle
   ancho mínimo (así flex-wrap SÍ envuelve la gráfica si no cabe) y que esas
   dos etiquetas no rompan palabra. */
.mfr-gauge > div:has(> .mfr-gauge-lab) { min-width: 96px; flex: 1 1 96px; }
.mfr-gauge-eyebrow, .mfr-gauge-lab { overflow-wrap: normal; word-break: normal; }
.mfr-gauge-lab { white-space: nowrap; }

/* ===== ANDROID: que el sistema no reescale el texto (29 ago 2026) =========
   Lo destapó ver la app en un Android que no era el de Gerhard: «Registro»
   salía como «ro» y las frases caían en una columna de una palabra por línea.

   Son DOS mecanismos distintos y hacen falta los dos:
     · textZoom (native/App.js) — el ajuste «Tamaño de letra» del sistema. Se
       respeta hasta el 115 % y ahí se corta; es una app de salud y hay gente
       que agranda la letra porque la necesita.
     · text-size-adjust (aquí) — el «font boosting» del WebView de Chrome, que
       agranda por su cuenta el texto de los bloques anchos cuando cree que la
       página no es responsive. No lo pide nadie y no avisa.

   Solo Android: `data-cf-os` lo planta App.js y ya se usa arriba para iOS.
   En iPhone la app se ve BIEN hoy y no se toca (decisión de Gerhard, 29 ago). */
html[data-cf-os="android"] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}