/* =============================================================================
   Medifit — capa de pulido nativo
   =============================================================================
   NO redefine el diseño de Medifit: ni colores, ni tarjetas, ni tipografías de
   marca. Sólo corrige los detalles de plataforma que delatan que una pantalla
   es web dentro del wrapper nativo.

   Se carga ANTES del <style> de cada página, así que cualquier regla propia de
   la página sigue ganando. Las pocas reglas que necesitan imponerse usan
   `html body` a propósito, y están marcadas una a una.

   Qué arregla:
   1. Tipografía del sistema (SF Pro en iOS, Roboto en Android) en vez de una
      webfont descargada: es el cambio que más acerca la app a lo nativo.
   2. El :hover que en táctil se queda pegado tras el tap — y un :active real
      en su lugar.
   3. Ancho: 375px fijo dejaba franjas grises en iPhone de 390/402/430pt.
   4. Área segura (notch e indicador de inicio) con utilidades opt-in.
   5. Zoom automático de iOS al enfocar inputs de menos de 16px.
   6. Rebote de scroll, resaltado gris del tap, selección de texto accidental.

   Uso:
     <link rel="stylesheet" href="shared/native.css">
     <meta name="viewport" content="...,viewport-fit=cover">
   ============================================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Curva de animación de UIKit: entra rápido y frena suave */
  --native-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hairline: 0.5px;

  /* Tipografía del sistema. Las páginas pueden usarla como var() */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   1. Tipografía del sistema
   Impuesto con `html body` para que aplique sin tocar el CSS de cada página.
   Los tamaños, pesos y colores de Medifit se respetan tal cual.
   -------------------------------------------------------------------------- */
html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--font-system);
}
html {
  -webkit-text-size-adjust: 100%;   /* el WebView no reescala el texto solo */
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
   2. Ancho del lienzo
   En el dispositivo la pantalla es fluida, como cualquier app nativa.
   El marco móvil centrado se conserva sólo en escritorio.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  html body { max-width: none; }
}
@media (min-width: 480px) {
  html body {
    max-width: 390px;
    margin-inline: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 50px rgba(0, 0, 0, 0.12);
  }
}

/* -----------------------------------------------------------------------------
   3. Táctil: nada de hover pegado, sí feedback inmediato
   -------------------------------------------------------------------------- */
a, button, [role="button"], [onclick], .tappable {
  -webkit-tap-highlight-color: transparent;  /* fuera el flash gris de Android */
  touch-action: manipulation;                /* fuera el retardo de 300ms */
}

@media (hover: none) {
  /* En táctil el :hover se activa al tocar y se queda hasta el siguiente tap:
     un botón "levantado" para siempre. Se anula el efecto, no el estilo base. */
  *:hover {
    transform: none !important;
    box-shadow: inherit;
  }

  /* Y se sustituye por el feedback que sí usa iOS: atenuar mientras se pulsa */
  a:active,
  button:active,
  [role="button"]:active,
  [onclick]:active,
  .tappable:active {
    opacity: 0.6;
    transition: opacity 0.08s var(--native-ease);
  }
}

/* Mantener pulsado no debe ofrecer "Copiar" ni seleccionar la interfaz.
   El contenido que sí se lee y se copia lleva .selectable. */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable], .selectable, p.selectable, .selectable * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* -----------------------------------------------------------------------------
   4. Formularios: iOS hace zoom si el input mide menos de 16px
   -------------------------------------------------------------------------- */
@media (hover: none) {
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}
input, textarea { border-radius: inherit; }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* -----------------------------------------------------------------------------
   5. Scroll
   -------------------------------------------------------------------------- */
html body {
  overscroll-behavior-y: contain;  /* la página no rebota arrastrando el fondo */
}

/* -----------------------------------------------------------------------------
   6. Utilidades de área segura (opt-in, no alteran nada por sí solas)
   -------------------------------------------------------------------------- */
.safe-top    { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-x      { padding-left: var(--safe-left); padding-right: var(--safe-right); }

/* Hairline de 0.5px, el grosor real de los separadores de iOS */
.hairline-top    { border-top: var(--hairline) solid rgba(60, 60, 67, 0.29); }
.hairline-bottom { border-bottom: var(--hairline) solid rgba(60, 60, 67, 0.29); }

/* -----------------------------------------------------------------------------
   7. Accesibilidad
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}