/* ============================================================================
   VITALIX - CAPA RESPONSIVE Y MULTIPLATAFORMA
   ============================================================================

   QUE ES ESTO
   Una hoja que se carga en las TRES familias de pantallas del proyecto (sitio
   publico, autenticacion y panel de administracion) y que resuelve lo que en
   CSS no depende del diseno sino del DISPOSITIVO:

     - iOS (Safari, instalado como app, iPad)
     - Android (Chrome, WebView, tablets)
     - Escritorio (Windows/macOS/Linux)
     - Pantallas plegables y ventanas muy estrechas

   POR QUE UNA CAPA Y NO TOCAR LAS 60 HOJAS
   Igual que vitalix-tokens.css: hay ~38.000 lineas de CSS escritas en momentos
   distintos. Reescribirlas para anadir un safe-area o un objetivo tactil seria
   lento y arriesgado. Esta hoja NO cambia nombres de clase, no cambia la
   paleta y no cambia ningun color: solo corrige comportamiento de plataforma.

   REGLAS DE ORO DE ESTE ARCHIVO
   1. Ningun color nuevo. Se usan las variables --vx-* que ya existen.
   2. Ningun cambio de logica: no se oculta nada que el usuario necesite.
   3. Todo lo que se activa solo en tactil va dentro de @media (pointer:coarse)
      o (hover:none), asi que el escritorio no cambia ni un pixel.
   ========================================================================== */


/* ============================================================================
   0. VARIABLES DE PLATAFORMA
   ----------------------------------------------------------------------------
   Los "safe area insets" son las franjas que ocupan la muesca (notch), la isla
   dinamica y la barra de gestos del iPhone/iPad, y los bordes curvos de Android.
   env() vale 0px en un dispositivo sin recorte, asi que usarlas siempre no
   rompe nada: en un portatil simplemente no hacen nada.
   ========================================================================== */

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

    /* Altura real de la ventana.

       POR QUE NO 100vh A SECAS
       En iOS y Android, 100vh incluye la barra de direcciones que se esconde al
       desplazar. El resultado clasico es que el pie de pagina queda cortado o
       que aparece un salto al hacer scroll. 100dvh es la altura dinamica real;
       donde no existe (navegadores antiguos) el JS de esta capa escribe el
       valor medido en --vx-vh-px. */
    --vx-vh: 100vh;
    --vx-vh-px: 100vh;

    /* Alto de la barra fija, para que un ancla no quede debajo de ella. */
    --vx-anchor-offset: 6rem;
}

@supports (height: 100dvh) {
    :root {
        --vx-vh: 100dvh;
        --vx-vh-px: 100dvh;
    }
}

/* El JS marca <html class="vx-dvh"> cuando ha medido la ventana. Solo entonces
   el valor medido gana, porque es mas fiable que cualquier calculo en CSS. */
html.vx-dvh {
    --vx-vh-px: var(--vx-window-height, 100vh);
}


/* ============================================================================
   1. NORMALIZACION BASE
   ----------------------------------------------------------------------------
   Todo lo de aqui son correcciones de comportamiento, no de estilo.
   ========================================================================== */

/* Sin esto, iOS y Android agrandan el texto por su cuenta al girar el movil y
   el diseno salta de linea. El usuario sigue pudiendo hacer zoom con los dedos:
   lo que se desactiva es el reescalado automatico del navegador. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fuerza a los controles nativos (select, checkbox, scrollbar, fecha) a
   dibujarse en claro.

   POR QUE HACE FALTA
   Si el sistema operativo esta en modo oscuro, iOS y Android pintan
   automaticamente los <select> y los <input type="date"> con fondo negro. En un
   diseno de fondo blanco eso se ve como un parche. Declarar el esquema evita
   ese pintado automatico. */
:root {
    color-scheme: light;
}

body {
    min-height: var(--vx-vh-px);
}

/* En el PANEL, el gesto de "tirar hacia abajo para recargar" de Android y el
   rebote de iOS son un estorbo: el panel se usa con formularios largos (una
   historia clinica) y una recarga accidental borra lo escrito.

   NO se aplica al sitio publico, donde recargar deslizando es lo que el usuario
   espera. Por eso va ligado a una clase del body que solo pone el layout del
   panel, y no a `body` a secas. */
body.vx-admin {
    overscroll-behavior-y: none;
}

/* El foco por teclado ya esta definido en vitalix-tokens.css. Aqui solo se
   cubre el caso de los dispositivos sin teclado fisico, donde un anillo de foco
   permanente tras un toque se ve como un error. */
@media (hover: none) {
    :focus:not(:focus-visible) {
        outline: none;
    }
}

/* Texto que solo existe para los lectores de pantalla.

   POR QUE HACE FALTA
   Hay informacion que es imprescindible al oirla y molesta al verla: el
   encabezado de la columna de acciones de una tabla, o el nombre del paciente
   dentro de un boton que solo dice "Ver". No se puede usar `display:none` ni
   `visibility:hidden` porque eso tambien lo oculta al lector de pantalla.

   La tecnica es sacarlo del flujo visual manteniendolo en el arbol de
   accesibilidad: un cuadrado de 1px, recortado y sin margen. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================================
   2. CONTROLES DE FORMULARIO: EL ZOOM AUTOMATICO DE iOS
   ----------------------------------------------------------------------------
   QUE PASA
   Safari en iOS hace zoom sobre el campo cuando recibe el foco si su texto mide
   menos de 16px. El formulario del panel usa 0.8rem-0.9rem (13-14px), asi que
   al tocar cualquier campo la pagina se agranda y el usuario tiene que
   deshacerlo con los dedos. Es el fallo de usabilidad movil mas reportado en
   paneles de administracion.

   LA SOLUCION
   Garantizar 16px REALES. max(16px, 1em) respeta el tamano heredado si ya es
   mayor, y solo sube al minimo los campos que estan por debajo. No se toca
   ningun otro aspecto del campo (borde, color, radio, relleno).

   ALCANCE
   Solo punteros tactiles. Con raton, los campos siguen a 13px como siempre. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* En iOS, un campo dentro de un contenedor con scroll hace que el teclado tape
   el campo activo. scroll-margin da aire cuando el navegador centra el campo. */
input,
select,
textarea {
    scroll-margin-block: 5rem;
}

/* El boton nativo de "limpiar" del input de busqueda en Safari rompe la caja
   porque se superpone al icono de la derecha. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}


/* ============================================================================
   3. OBJETIVOS TACTILES
   ----------------------------------------------------------------------------
   Guia de interfaz de Apple (44pt) y de Material Design (48dp): un control que
   se toca con el dedo necesita 44px de alto. Los botones pequenos del proyecto
   miden entre 28 y 36px, asi que en movil se quedan cortos.

   IMPORTANTE: solo se sube la ALTURA MINIMA. No se cambia el relleno ni el
   ancho, asi que los botones con icono siguen cuadrados y las barras de
   herramientas no se estiran.
   ========================================================================== */
@media (pointer: coarse) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-submit,
    .btn-cancel,
    .btn-action,
    .btn-filter,
    .action-btn,
    .ip-btn,
    .page-btn,
    .page-link,
    .dropdown-item,
    .logout-btn,
    .back-to-top {
        min-height: 44px;
    }

    /* Los botones que son solo un icono deben seguir siendo un cuadrado, no un
       rectangulo: se fija tambien el ancho minimo. */
    .btn-icon,
    .icon-btn,
    .hamburger-btn,
    .notif-btn,
    .modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Un separador de 1px entre dos enlaces de una lista es imposible de acertar
       con el dedo. En movil se separan. */
    .footer-link,
    .footer-links a,
    .mobile-link {
        min-height: 44px;
        align-items: center;
    }
}

/* Los enlaces dentro del texto no deben volverse bloques de 44px: ahi el alto
   lo da la linea. Solo se les da area de toque con relleno vertical minimo. */
@media (pointer: coarse) {
    main p a,
    .footer-description a {
        min-height: 0;
        padding-block: 2px;
    }
}


/* ============================================================================
   4. PUNTEROS SIN HOVER
   ----------------------------------------------------------------------------
   En tactil no existe :hover, pero el navegador lo dispara al tocar y lo deja
   "pegado" hasta que se toca otra cosa. Eso hace que una tarjeta quede elevada
   o desplazada de forma permanente y parece un fallo.

   Aqui se neutralizan SOLO los efectos de movimiento que ya existian. El color
   de :hover se mantiene, porque un cambio de color pegado no molesta y ayuda a
   confirmar el toque. */
@media (hover: none) {
    .vx-card:hover,
    .vx-lift:hover,
    .feature-item:hover,
    .illustration-card:hover,
    .stat-card:hover,
    .logout-btn:hover,
    .notif-btn:hover,
    .user-btn:hover,
    .social-link:hover,
    .back-to-top:hover,
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .action-btn:hover {
        transform: none;
    }
}

/* Feedback inmediato al tocar.

   En iOS y Android, entre el toque y la navegacion pasan ~300ms. Con :active
   el usuario ve que su toque ha entrado. Se aplica a los botones de accion
   principales, no a todo. */
@media (hover: none) {
    .btn:active,
    .action-btn:active,
    .stat-card:active,
    .nav-link:active,
    .dropdown-item:active {
        opacity: 0.78;
    }
}


/* ============================================================================
   5. CONTENIDO QUE NO DEBE DESBORDAR
   ----------------------------------------------------------------------------
   El desbordamiento horizontal accidental es el otro gran fallo en movil: la
   pagina entera se desplaza de lado porque un elemento es mas ancho que la
   pantalla. Se corrige en el elemento, nunca con overflow:hidden en <body>,
   porque eso romperia las barras fijas (position:sticky).
   ========================================================================== */

/* Imagenes, video, canvas e iframes nunca deben ser mas anchos que su caja. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

/* Las tablas anchas se desplazan dentro de su tarjeta, no arrastran la pagina.
   El JS de esta capa envuelve automaticamente las tablas del panel en
   .vx-table-scroll; esta regla es la que hace el trabajo.

   NOTA: el contenedor no se decora con sombras ni degradados a proposito. Un
   borde pintado dentro de un contenedor con scroll se queda fijo y se ve como
   una mancha cuando la tabla ya no tiene mas columnas que mostrar. */
.vx-table-scroll,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Al llegar al borde de la tabla, el gesto no debe propagarse al navegador
       (que en iOS interpreta el arrastre lateral como "volver atras"). */
    overscroll-behavior-x: contain;
}

/* Texto tecnico y bloques preformateados: se desplazan en su propio eje. */
pre,
code,
kbd,
samp {
    max-width: 100%;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Un correo, una URL o un identificador larguisimo sin espacios ensancha toda
   la columna. `.vx-break` y los campos de datos que ya se comportaban asi
   permiten partir solo esos casos. */
.vx-break,
.info-value,
.field-value,
.patient-email,
.patient-name {
    overflow-wrap: anywhere;
}

/* En el resto de celdas se usa break-word y NO anywhere.

   POR QUE LA DIFERENCIA
   `anywhere` cambia el calculo del ancho minimo de la columna: el navegador
   asume que puede partir por cualquier letra y COMPRIME la columna hasta dejar
   una palabra por linea. En una tabla de 8 columnas eso la convierte en una
   lista ilegible. `break-word` parte la palabra solo cuando de verdad no cabe,
   asi que las columnas conservan su ancho natural. */
td,
th {
    overflow-wrap: break-word;
}

/* Las cifras, fechas y estados no deben partirse nunca: al partirse dejan de
   leerse y el dato se vuelve ambiguo. */
td time,
td .date,
.stat-value,
.metric-value,
.stat-number,
.appointment-hour,
td .status-badge,
td .badge,
td .days-left {
    white-space: nowrap;
}


/* ============================================================================
   6. PANTALLAS EXTREMAS
   ----------------------------------------------------------------------------
   Dos casos que ninguna media query habitual cubre y que si ocurren:
     - telefonos muy estrechos (320px: iPhone SE 1a gen, Galaxy Fold cerrado)
     - ventanas de escritorio muy bajas (portatil con mucho zoom aplicado)
   ========================================================================== */

/* Movil muy estrecho: se reduce el aire lateral para no perder ancho util. */
@media (max-width: 360px) {
    :root {
        --vx-space-6: 1rem;
        --vx-space-8: 1.25rem;
        --vx-space-10: 1.5rem;
        --vx-space-12: 1.75rem;
    }

    /* Las cifras grandes dejan de romper su tarjeta. */
    .stat-value,
    .stat-number {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
}

/* Pantallas muy anchas: el contenido no debe estirarse hasta ser ilegible.
   Se limita la linea de texto, no el contenedor (el contenedor ya lo limita
   cada vista). */
@media (min-width: 1800px) {
    p,
    li,
    .hero-description,
    .section-description {
        max-width: 78ch;
    }
}

/* Telefono en horizontal: la altura util es de 320-400px. Todo lo que sea
   cabecera fija debe encogerse o el contenido no cabe. */
@media (max-height: 460px) and (orientation: landscape) {
    :root {
        --vx-anchor-offset: 3.5rem;
    }

    .admin-toolbar,
    .vitalix-navbar {
        /* Menos aire vertical para devolverle altura al contenido. */
        padding-block: 0.375rem;
    }
}


/* ============================================================================
   7. PREFERENCIAS DEL SISTEMA OPERATIVO
   ========================================================================== */

/* Menos movimiento: lo pide el usuario en Ajustes > Accesibilidad.
   Ademas de quitar las animaciones, se quita el desplazamiento suave, que es lo
   que provoca mareo a quien tiene sensibilidad vestibular. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mas contraste: se refuerzan los bordes y los textos secundarios, que son los
   que primero se pierden cuando hay poca vision o mucho brillo ambiental. */
@media (prefers-contrast: more) {
    :root {
        --vx-border: #94A3B8;
        --vx-text-soft: #334155;
    }

    .nav-hint,
    .page-description,
    .section-subtitle,
    .stat-label,
    .stat-footer,
    .field-hint {
        color: #334155;
    }
}

/* Modo oscuro del sistema.

   DECISION: este proyecto es de tema claro y no se va a invertir. Lo que si se
   corrige es lo que el sistema oscurece por su cuenta y queda mal: los
   controles nativos (ya resueltos con color-scheme) y el fondo del area de
   rebote, que en iOS se asoma al final de la pagina. */
@media (prefers-color-scheme: dark) {
    html {
        background-color: #FFFFFF;
    }
}


/* ============================================================================
   8. APP INSTALADA (PWA / pantalla completa)
   ----------------------------------------------------------------------------
   Cuando la web se abre desde el icono de la pantalla de inicio, iOS y Android
   la dibujan a pantalla completa: desaparece la barra del navegador y el
   contenido se mete debajo de la muesca y de la barra de gestos. Hay que
   devolver ese espacio a mano.
   ========================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        padding-bottom: var(--vx-safe-bottom);
    }

    /* El pie de pagina necesita aire extra para no quedar bajo la barra de
       gestos del iPhone. */
    .vitalix-footer,
    .admin-footer {
        padding-bottom: var(--vx-safe-bottom);
    }
}


/* ============================================================================
   9. IMPRESION
   ----------------------------------------------------------------------------
   Se conserva el comportamiento que ya existia y se anade lo que falta:
   las barras fijas no se imprimen, el contenido ocupa el ancho completo y los
   colores de marca se respetan en el papel (print-color-adjust).
   ========================================================================== */
@media print {
    .vitalix-navbar,
    .mobile-menu,
    .admin-sidebar,
    .admin-toolbar,
    .sidebar-overlay,
    .back-to-top,
    .notifications-dropdown,
    .user-dropdown {
        display: none !important;
    }

    html,
    body {
        background: #FFFFFF !important;
    }

    /* Los degradados de marca se imprimen como relleno solido: en papel el
       degradado se ve como una mancha. */
    .btn-primary,
    .welcome-card,
    .vx-text-grad,
    .text-gradient {
        background: none !important;
        color: #0B1120 !important;
        -webkit-text-fill-color: #0B1120 !important;
        box-shadow: none !important;
    }

    /* Los colores de marca se conservan en papel (insignias, cabeceras de
       tabla). Sin esto, la mayoria de navegadores los sustituye por blanco y
       negro y el documento pierde la jerarquia visual. */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}