/**
 * Reglas responsive compartidas por toda la aplicacion.
 *
 * Se carga DESPUES del <style> propio de cada vista (justo antes de
 * </head>) a proposito: en CSS, entre dos reglas con la misma
 * especificidad, gana la que aparece despues en el documento. Como
 * casi todas las vistas repiten los mismos nombres de clase (header,
 * .fila, table, etc.), cargar esto al final permite que estas reglas
 * ganen en pantallas chicas sin tener que tocar el <style> de cada
 * vista una por una.
 *
 * No reemplaza el diseno de escritorio -- solo ajusta lo minimo para
 * que sea usable en un telefono. Los nombres de clase coinciden con
 * los que ya se usan en todas las vistas del proyecto.
 */

/* Evita que cualquier elemento angosto (una tabla ancha, un input
   con padding) empuje la pagina entera a hacer scroll horizontal. */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Pie de pagina, en las 41 vistas del proyecto (inyectado justo
   antes de </body> en cada una). Se define aqui para no repetir el
   estilo en el <style> de cada vista una por una.
   Va al final del flujo normal de la pagina (no fijo al fondo del
   navegador): espacio amplio respecto al contenido, una linea
   horizontal, y el texto pequeno y discreto debajo. */
.pie-app {
    margin-top: 3rem;
    padding: 0 1rem;
}

.pie-app hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 1rem;
}

.footer-copyright {
    font-size: 0.75rem;   /* Tamano pequeno y discreto */
    color: #6c757d;       /* Un tono grisaceo para reducir el contraste y el brillo */
    opacity: 0.8;         /* Sutil transparencia opcional */
    text-align: center;
    margin: 0 0 1.5rem;
}

@media (max-width: 640px) {
    body {
        margin: 1rem !important;
    }

    /* Encabezados: titulo + navegacion en una sola fila con
       justify-content:space-between se aprietan mucho en un telefono
       (sobre todo si el titulo es largo o la nav tiene varios
       enlaces). Se apilan en columna. */
    header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
    }

    header nav,
    nav.menu,
    nav {
        display: flex;
        flex-wrap: wrap !important;
        gap: .75rem !important;
        width: 100%;
    }

    /* Filas de formulario (nombre/apellido, ciudad/pais, etc.): se
       apilan en vez de quedar comprimidas lado a lado. */
    .fila {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .fila > div {
        width: 100%;
    }

    /* Formularios rapidos de "agregar" (notas, diagnosticos, recetas,
       opciones de listas desplegables): tambien se apilan. */
    form.agregar {
        flex-direction: column !important;
    }

    form.agregar > div {
        width: 100%;
    }

    /* Tablas: en vez de romper el diseno, se dejan scrollear
       horizontalmente sin afectar el resto de la pagina. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Tarjetas y fichas (paciente, personal, clinica): la columna fija
       de 140px/160px para las etiquetas (dt) se come media pantalla en
       un telefono angosto -- se apilan en una sola columna. */
    dl {
        grid-template-columns: 1fr !important;
        row-gap: .25rem !important;
    }

    dl dt {
        margin-top: .6rem;
        font-weight: 600;
    }

    dl dt:first-child {
        margin-top: 0;
    }

    /* Inputs/selects/textareas a 16px minimo: por debajo de eso,
       Safari en iOS hace zoom automatico al tocar el campo, lo cual
       es una mala experiencia y desalinea el resto de la pagina. */
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    /* Listas de servicios/opciones con precio + cantidad al lado
       (factura nueva, checklist de servicios de una cita): se
       permiten partir en dos lineas en vez de desbordar. */
    .servicio {
        flex-wrap: wrap;
    }

    /* Botones de accion que suelen ir en linea junto a un enlace
       (Editar / Cancelar / Reenviar invitacion, etc.): con menos
       espacio disponible, se separan con salto de linea entre ellos
       en vez de quedar pegados. */
    .barra {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem;
    }

    .barra input[type="search"] {
        width: 100% !important;
    }
}