/* Estilos móviles compartidos de la unificación web+webm (T-211).
   Da a los formularios de la web responsive el look que tenía /webm en pantalla chica
   (inputs/botón tipo píldora, labels compactos). Apunta a las clases de los formularios
   de autenticación, no a todos los form-control, para no afectar otros inputs.
   Solo aplica en ≤767px → desktop intacto. */
/* Guarda global anti-scroll-horizontal en móvil. Varias vistas heredan `.row` de
   Bootstrap (márgenes negativos -15px) sin un `.container` que los absorba, lo que
   produce overflow lateral (zoom-out / tarjetas cortadas). Ningún contenido del
   paciente necesita scroll horizontal en móvil. */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .input-lg-login {
        border-radius: 50px !important;
        font-size: 16px !important;
        height: auto;
        padding: 12px 22px;
    }
    .btn-login {
        border-radius: 50px !important;
        border-bottom: 0 !important;
    }
    /* labels grandes de los formularios ("Ingresa tu correo...") compactos para no dominar */
    #text-login,
    #text-password,
    #text_third_validator,
    #ins-login-text {
        font-size: 15px !important;
        margin-bottom: 6px !important;
        margin-top: 0 !important;
    }

    /* En móvil ocultamos el aviso de "navegadores compatibles" + recomendación de apps
       (#browserValidator contiene #msgBrowserText y #msgMovilText). webm no los mostraba;
       en móvil la detección de navegador da falsos positivos y el aviso confunde. El
       !important gana sobre el display:block que jQuery .show() pone inline. Desktop intacto. */
    #browserValidator,
    #movilValidator {
        display: none !important;
    }

    /* ============================================================
       Login app-like inmersivo (rediseño app, móvil ≤767px).
       Scope: body.app-immersive (solo el login lo lleva por ahora).
       El color de marca lo aporta la clase .corporate del body (cada
       marca define su color en su main.css). Aquí va la ESTRUCTURA app:
       pantalla de marca + logo + formulario como tarjeta clara elevada.
       ============================================================ */

    /* Pantalla de marca a sangre completa, sin el ruido web */
    body.app-immersive {
        min-height: 100dvh;
    }
    body.app-immersive #download-recommendation {
        display: none !important;        /* la barra "Descarga la app" sobra dentro del móvil */
    }

    /* Logo centrado sobre el color de marca, con aire */
    body.app-immersive #brand-header {
        padding: 40px 0 20px !important;
        margin: 0 !important;
    }
    body.app-immersive #brand-header #logo {
        max-height: 60px;
        width: auto;
    }

    /* El formulario se convierte en una tarjeta clara elevada y centrada */
    body.app-immersive .login-content {
        background: #ffffff;
        border-radius: 24px;
        margin: 8px 16px 24px;
        padding: 18px 22px 28px;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.20);
        animation: appCardIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ---- Floating labels (sin labels fijos; el placeholder es el campo y la
       etiqueta "flota" arriba al enfocar o escribir) ---- */
    /* etiqueta oculta cuando el campo está vacío y sin foco → solo placeholder */
    body.app-immersive #login-div > .fg-line:first-child,
    body.app-immersive #password_div > .fg-line:first-child,
    body.app-immersive #third_validator_div > .fg-line:first-child {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.22s ease, opacity 0.22s ease;
    }
    /* etiqueta visible (flota) al enfocar o cuando el input tiene contenido */
    body.app-immersive #login-div:focus-within > .fg-line:first-child,
    body.app-immersive #login-div:has(input:not(:placeholder-shown)) > .fg-line:first-child,
    body.app-immersive #password_div:focus-within > .fg-line:first-child,
    body.app-immersive #password_div:has(input:not(:placeholder-shown)) > .fg-line:first-child,
    body.app-immersive #third_validator_div:focus-within > .fg-line:first-child,
    body.app-immersive #third_validator_div:has(input:not(:placeholder-shown)) > .fg-line:first-child {
        max-height: 2.5em;
        opacity: 1;
    }
    /* la etiqueta flotante: pequeña, alineada al input, sobria */
    body.app-immersive #text-login,
    body.app-immersive #text-password,
    body.app-immersive #text_third_validator {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin: 0 0 4px 16px !important;
        color: #6b7280 !important;
        letter-spacing: 0.02em;
    }

    /* tamaño de fuente app (no el 20px+ de escritorio; override del inline 35px) */
    body.app-immersive .input-lg-login,
    body.app-immersive #third_validator_input {
        font-size: 15px !important;
    }
    body.app-immersive .input-lg-login::placeholder {
        color: #9aa0a6;
    }
    /* foco animado: el placeholder se desvanece y el campo se eleva sutilmente */
    body.app-immersive .input-lg-login {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    body.app-immersive .input-lg-login:focus {
        border-color: #b8b8b8 !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
        outline: none;
    }
    body.app-immersive .input-lg-login:focus::placeholder {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    /* el grid de Bootstrap (col-3/col-6) no debe encajonar la tarjeta en móvil */
    body.app-immersive .login-content,
    body.app-immersive [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* botones secundarios (olvidé contraseña / idioma) sobre el color de marca: legibles */
    body.app-immersive .login-content ~ * a,
    body.app-immersive #forgotPassword,
    body.app-immersive #langSelector {
        color: #ffffff;
    }

    @keyframes appCardIn {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Reduced motion: sin animación de entrada */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.app-immersive .login-content,
    body.register-lp .login-content { animation: none; }
}

/* El botón flotante de ayuda (fixed bottom:20px) se solaparía con el bottom
   tab bar (74px) en móvil cuando un corporate lo activa → se eleva por encima. */
@media (max-width: 767px) {
    .help-button {
        bottom: 86px !important;
    }
}

/* ============================================================
   Calendario legacy (fullCalendar) en móvil: toolbar compacto y legible
   (la fecha no gigante, alineada), tarjeta limpia, eventos contenidos.
   El Calendar 2.0 (iframe booking widget) lo reemplaza donde está activo.
   Validado con captura de Luis (la fecha "14/6/2026" salía grande/suelta).
   ============================================================ */
@media (max-width: 767px) {
    /* el header decorativo de 300px (cal-header.jpg) no aporta en móvil */
    #content #calendar .fc-toolbar {
        height: auto !important;
        background-image: none !important;
        padding: 10px 8px !important;
    }
    #content #calendar .fc-toolbar:before {
        display: none !important;
    }
    #content #calendar .fc-toolbar .fc-center {
        margin-top: 0 !important;
    }
    /* el título de fecha: tamaño app, color oscuro (sobre fondo blanco), sin caps */
    #content .fc-toolbar h2 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1f2430 !important;
        text-transform: none !important;
        margin-top: 0 !important;
        line-height: 1.8 !important;
    }
    /* botones < > Hoy con radio app y separación cómoda */
    #content .fc-toolbar .ui-button,
    #content .fc-toolbar .fc-button {
        border-radius: 10px !important;
    }
    /* la tarjeta del calendario, limpia (sin la altura forzada que deja hueco) */
    #content .center-calendar .card.card-primary {
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
    }
    /* eventos ("Horario fuera de atención") con texto contenido */
    #content .fc-event,
    #content .fc-time-grid-event,
    #content .fc-day-grid-event {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

/* Desktop (≥768px): el login NO usa fondo de marca; vuelve al look web */
@media (min-width: 768px) {
    body.login-lp.app-immersive.corporate {
        background-color: #f6f7f7 !important;
    }
}

/* ============================================================
   Bottom tab bar app-like (navegación nativa del paciente, móvil).
   Aditivo: no toca el header/drawer existentes. El color es el de
   marca (clase .text-corporate); el tab activo se distingue por opacidad.
   ============================================================ */
@media (max-width: 767px) {
    .app-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.07);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .app-tabbar .app-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 8px 4px;
        text-decoration: none !important;
        font-size: 11px;
        font-weight: 600;
        opacity: 0.45;                 /* inactivo: color de marca atenuado */
        transition: opacity 0.2s ease, transform 0.12s ease;
    }
    .app-tabbar .app-tab i {
        font-size: 23px;
        line-height: 1;
    }
    .app-tabbar .app-tab.app-tab-active {
        opacity: 1;                    /* activo: color de marca pleno */
    }
    .app-tabbar .app-tab:active {
        transform: scale(0.94);        /* press feedback */
    }
    /* el contenido no queda tapado por la barra */
    #main,
    #content.page-view {
        padding-bottom: 74px !important;
    }
}

/* el tab bar es solo móvil */
@media (min-width: 768px) {
    .app-tabbar { display: none !important; }
}

/* ============================================================
   Header app-like (móvil): compacto, logo proporcionado, menú "⋮" limpio.
   Conservador (no reestructura), solo dimensiones. Aplica a los headers del SPA.
   ============================================================ */
@media (max-width: 767px) {
    #header {
        min-height: 58px !important;
    }
    #header .pacient-corporate-logo,
    #header [id^="patient-logo"],
    #header [id^="doctor-logo"] {
        max-height: 38px !important;
        width: auto !important;
    }
    /* el ícono de menú "⋮" como botón táctil cómodo */
    #header #menu-icon .tm-icon,
    #header #menu-icon {
        font-size: 22px !important;
    }

    /* Título de pantalla (top app bar): centrado entre logo y menú, blanco sobre
       el color de marca, una línea con ellipsis. No interactivo (pasa el tap). */
    #header .header-inner {
        position: relative;
    }
    .app-header-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: calc(100% - 120px);   /* deja libre el ⋮ a la derecha; el logo se oculta */
        margin: 0;
        text-align: center;
        color: #ffffff;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        list-style: none;
        pointer-events: none;
    }
}

/* ============================================================
   Home del paciente app-like (móvil). Solo presentación: tipografía
   del saludo contenida (no "póster" web) y tarjetas de acción con
   look app (radio, sombra, press feedback). Selectores específicos
   de la home → no afectan otras vistas.
   ============================================================ */
@media (max-width: 767px) {
    /* saludo: "Bienvenido" discreto, nombre contenido (no gigante) */
    #welcomeMessageOrCancelMsg {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        opacity: 0.85;
    }
    #content.page-view h1 {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }
    #content.page-view h1 strong {
        font-size: 22px !important;
        font-weight: 700 !important;
    }
    /* el mensaje "Elige el tipo de orientación..." más contenido */
    #content.page-view .attention-text,
    #content.page-view h3.text-color-gray {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* tarjetas de acción (Videollamada / Chat / Agenda) con look app */
    .btn-action,
    .btn-action-touch {
        border-radius: 18px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.12s ease, box-shadow 0.2s ease !important;
    }
    .btn-action:active,
    .btn-action-touch:active {
        transform: scale(0.97) !important;
    }

    /* ----- Tarjetas interiores app-like (Mi Cuenta, Perfiles, settings, etc.) -----
       Scope #content = SPA interior (no login). Reemplaza el look "panel web"
       (header gris ch-alt + min-height fijo) por tarjeta app limpia. */
    #content .card {
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        min-height: 0 !important;          /* quita el espacio vacío (min-height:300px inline) */
        margin-bottom: 14px !important;
    }
    #content .card-header.ch-alt,
    #content .card-header {
        background: transparent !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    #content .card-header h2 {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    /* lista de datos (dl/dt/dd) como filas de "settings": label chico arriba, valor claro */
    #content .card-body dl dt {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        margin-bottom: 2px !important;
    }
    #content .card-body dl dd {
        font-size: 15px !important;
        margin-bottom: 14px !important;
        color: #1f2430 !important;
    }
    /* botones de acción interiores con radio app */
    .btn-action-sm {
        border-radius: 12px !important;
    }

    /* ----- Formularios interiores (perfil, agregar perfil, consulta) -----
       Inputs legibles (sin zoom iOS) y con respiro; mantiene el underline Material. */
    #content .form-control {
        font-size: 15px !important;
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #content .card-body {
        padding: 16px !important;
    }
    /* títulos de sección dentro de las vistas, contenidos */
    #content h3,
    #content h4 {
        font-size: 16px !important;
    }
    /* grupos de campos con separación cómoda para el dedo */
    #content .form-group,
    #content .fg-line {
        margin-bottom: 14px !important;
    }

    /* ----- Perfil paciente (ver / editar / agregar perfil) -----
       En móvil neutraliza los márgenes laterales gigantes (inline
       margin-left/right:80px en datos de póliza, antecedentes y consultas)
       que dejan el contenido en una columna estrechísima de ~210px.
       Y compacta los paddings "de escritorio" para look app. Solo presentación. */
    #content [style*="margin-left: 80px"],
    #content [style*="margin-right: 80px"] {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    /* cabecera del perfil: el bloque blanco con padding 30px 40px */
    #content #appointmentCard [style*="padding: 30px 40px"] {
        padding: 16px !important;
    }
    /* tarjetas internas (antecedentes / consultas anteriores) con padding cómodo */
    #content #appointmentCard [style*="padding: 20px 30px"] {
        padding: 14px 16px !important;
    }
    /* títulos de sección del perfil ("Antecedentes clínicos", lista de consultas) contenidos */
    #content #appointmentCard h2 {
        font-size: 16px !important;
    }
    /* En móvil, el header del perfil ya tiene Guardar/Cancelar → el set duplicado al
       final de la sección de antecedentes sobra (Luis: "sensación de duplicado").
       Se oculta solo en móvil; en desktop se conserva (desktop intacto). */
    #content #appointmentCard .profile-dup-actions {
        display: none !important;
    }
    /* Botones de acción del header del perfil (Regresar/Editar/Guardar/Cancelar/
       Attachments/Upload): tenían padding:4px 12px inline y anchos dispares → se veían
       desalineados. Uniformados: misma altura, padding y separación; alineados. */
    #content #appointmentCard .btn-action-sm,
    #content #appointmentCard .btn-action-sm-mirror,
    #content #appointmentCard .btn-cancel {
        padding: 9px 14px !important;
        min-height: 40px !important;
        margin: 0 0 8px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }

    /* ============================================================
       Flujo de consulta (especialidad → cita → confirmación chat/video).
       speciality.html. Solo presentación. Scope #content.
       ============================================================ */

    /* Grilla de especialidades 2-up por float (speciality.html, que vive en un
       .container que absorbe los márgenes negativos del .row). EXCLUYE el calendario
       (.cal-speciality-grid): ese usa CSS Grid y este width:50%+float lo rompía
       (se aplicaba a sus cards por mayor especificidad → desbordaban). */
    #content .row:not(.cal-speciality-grid) > .col-sm-3:has(.fa-user-md) {
        width: 50% !important;
        float: left !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    /* tarjeta de especialidad con look app */
    #content .col-sm-3 .card:has(.fa-user-md) {
        border-radius: 16px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 12px !important;
    }
    #content .btn-action:has(.fa-user-md) {
        padding: 18px 8px !important;
        white-space: normal !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    /* el icono gigante de especialidad (100px inline) a tamaño app */
    #content .btn-action .fa-user-md {
        font-size: 44px !important;
        padding: 0 0 6px 0 !important;
    }

    /* checkboxes de términos: el inline width:35%;margin-left:35% deja cajas
       estrechas y descentradas en móvil → a ancho completo, alineado a la izquierda */
    #content .checkbox[style*="width: 35%"] {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
    /* botones de confirmar consulta (inline width:50%;margin-left:25%) → ancho cómodo */
    #content .btn-action[style*="width: 50%"],
    #content button[style*="margin-left: 25%"] {
        width: 100% !important;
        margin-left: 0 !important;
    }
    /* tarjetas del resumen (chat/video) y "no disponible": radio app */
    #content .card.border {
        border-radius: 16px !important;
    }
    /* calendar.html especialidades — DEFINITIVO con clase propia + CSS Grid.
       La sección `.row.flex` NO está dentro de un `.container`, así que los márgenes
       negativos -15px del `.row` desbordaban (tarjeta derecha cortada/montada). CSS Grid
       2-up es inmune a floats/márgenes negativos/flex-shrink. Clase añadida en el markup. */
    /* La SECCIÓN es un bloque normal (los títulos h3 .text-center se centran solos).
       Mata los márgenes negativos del .row y cualquier overflow propio. */
    #content .cal-speciality-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    #content .cal-speciality-grid > h3 {
        margin: 0 0 6px 0 !important;
    }
    /* Las CARDS en su propio grid 2-up DEDICADO (aislado de .row/.flex/:has heredados) */
    /* UNA columna (tarjetas apiladas): tras 3h de pelea con el 2-up y un overflow
       fantasma del entorno, una sola columna es imposible de desbordar y es un patrón
       app válido. Cerrado así. */
    #content .cal-spec-cards {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #content .cal-spec-cards > .col-sm-3 {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
    }
    /* Guarda final: la vista del calendario nunca produce scroll horizontal */
    #content .view-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* ============================================================
       Pantallas secundarias (2FA legacy, suscripción, pagos, son,
       actualizar teléfono/email, etc.): botones con look app + tacto cómodo.
       Las tarjetas/inputs ya los cubren las reglas #content de arriba.
       NOTA: 2fa-p2/* tiene su propio estilo app (.twofa-p2-*) → no se toca.
       ============================================================ */
    #content .btn-default,
    #content .btn-success,
    #content .btn.bgm-gray,
    #content .btn-action-sm,
    #content .btn-action-sm-mirror,
    #content .btn-cancel {
        border-radius: 12px !important;
        min-height: 42px;
    }
    /* press feedback en cualquier botón interior (sin tocar su forma) */
    #content .btn:active {
        transform: scale(0.97);
    }

    /* ============================================================
       Register paciente (pre-login, patrón input-group propio). Scope
       body.register-lp. Da a sus inputs/botón el look app (pill cómodo)
       en móvil ≤767px. El inmersivo de marca completo queda pendiente
       (requiere wiring de marca como el login). Solo presentación.
       ============================================================ */
    /* Inmersivo de marca Doctor Online (register es mono-marca): pantalla verde
       de marca + tarjeta blanca elevada con el logo arriba, como un login de app.
       El verde va aquí directo (no se carga el brand main.css para evitar efectos
       colaterales en el layout de register). #26ad6e = MainColor Doctor Online. */
    body.register-lp {
        background-color: #26ad6e !important;
        min-height: 100dvh;
    }
    /* oculta el chrome web (nav superior); el link "Iniciar sesión" ya está en la tarjeta */
    body.register-lp header {
        display: none !important;
    }
    body.register-lp .complete-content {
        padding-top: 16px !important;
    }
    body.register-lp .login-content {
        background: #ffffff;
        border-radius: 22px;
        margin: 12px;
        padding: 22px 18px 26px;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.20);
        animation: appCardIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* logo Doctor Online centrado arriba de la tarjeta (color sobre blanco = contraste OK) */
    body.register-lp .register-app-logo {
        display: block;
        max-height: 44px;
        width: auto;
        margin: 4px auto 16px;
    }
    body.register-lp .login-content > p:first-of-type strong {
        font-size: 15px;
    }
    /* input-group como campo pill: addon + input forman una sola píldora */
    body.register-lp .input-group {
        border: 1px solid #e2e5ea !important;
        border-radius: 50px !important;
        background: #f7f8fa;
        overflow: hidden;
        align-items: center;
        display: flex !important;
    }
    body.register-lp .input-group .input-group-addon {
        background: transparent !important;
        border: none !important;
        padding-left: 18px !important;
        color: #9aa0a6 !important;
    }
    body.register-lp .input-group .fg-line,
    body.register-lp .input-group .form-control {
        flex: 1 1 auto;
        border: none !important;
        background: transparent !important;
    }
    body.register-lp .input-group .form-control {
        font-size: 15px !important;
        padding: 12px 18px 12px 8px !important;
        height: auto !important;
    }
    /* botón de registrarse tipo píldora app */
    body.register-lp .btn.bgm-green,
    body.register-lp button[type="submit"]#login {
        border-radius: 50px !important;
        min-height: 48px;
        width: 100%;
        border-bottom: 0 !important;
    }
    body.register-lp .btn:active {
        transform: scale(0.97);
    }
}