/* 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) sobre el color de marca: legibles */
    body.app-immersive .login-content ~ * a,
    body.app-immersive #forgotPassword {
        color: #ffffff;
    }

    /* El selector de idioma es un <select class="form-control"> con fondo blanco propio:
       el texto debe ser oscuro. Con color #fff quedaba invisible (texto blanco sobre la
       caja blanca del select). ODRO-2653 / pendiente "#langSelector caja vacía". */
    body.app-immersive #langSelector {
        color: #333333;
    }

    @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;
    }
    /* ODRO-2654 (F-Cal): la columna del calendario (.col-lg-6) vive en un .row
       flex (.center-calendar). En móvil ese col es un flex-item que NO crece →
       se encogía al ancho del contenido (peor con la fuente reducida de .fc-event
       de arriba) dejando el timegrid angosto y con mucho blanco a la derecha.
       Forzarla a ancho completo hace que fullcalendar use todo el ancho. */
    #content .center-calendar > .col-lg-6 {
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: 100% !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; }
}

/* ============================================================
   C-Preview (ODRO-2642 / 2645 / 2662): preview de cámara antes de la llamada.
   El <video> (react-webcam, montado en #root) recibía por jQuery
   width:100% + height:20% (patient.js), lo que -junto con #root{max-content}-
   daba tamaños inconsistentes por navegador (enorme en Safari, angosto/deformado
   en Chrome). Aquí se respeta el aspecto real del video con height:auto y se
   acota la altura, con !important para vencer esos estilos inline.
   `.videoPreview` la usa SOLO la preview (no el video de la videollamada). ============================================================ */
video.videoPreview,
#root .videoPreview {
    width: 100% !important;
    height: auto !important;
    max-height: 42vh;
    object-fit: cover;
    display: block;
    margin: 0 auto !important;
    border-radius: 8px;
}

/* ============================================================
   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;
    }

    /* ODRO-2670: logo de la corporación centrado (horizontal y vertical) dentro
       del header móvil, en TODAS las pantallas. Se posiciona absoluto respecto al
       #header (fixed) para centrarlo en la barra sin importar el alto del menú; el
       menú "⋮" sigue flotando a la derecha. Se deja margen a los lados para que un
       logo ancho no choque con el menú. */
    #header .logo.hidden-lg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        margin: 0;
        padding: 0;
        max-width: calc(100% - 120px);
    }
    #header .logo.hidden-lg a {
        display: flex;
        align-items: center;
        padding: 0;
    }
    #header .logo.hidden-lg img {
        max-width: 100% !important;
    }
}

/* ============================================================
   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):not(.spec-grid) > .col-sm-3:has(.fa-user-md) {
        width: 50% !important;
        float: left !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* ODRO-2641 (D-Cards): grilla de especialidades de speciality.html. El 2-up por
       float+:has (regla de arriba) se montaba/desbordaba en móvil (márgenes negativos
       del .row + box-sizing). Se usa el patrón bulletproof del calendario: bloque
       de UNA columna (tarjetas full-width apiladas), imposible de desbordar. Clase
       .spec-grid añadida en el markup; queda excluida de la regla float de arriba. */
    /* :not(.ng-hide) es CLAVE: sin él, este display:block (más específico que
       .ng-hide por el #content) le ganaría al display:none de Angular y el grid
       nunca se ocultaría → reaparecía en el paso de preview y en corps de 1 sola
       especialidad (que se auto-selecciona). Con :not(.ng-hide) respeta ng-show. */
    #content .spec-grid:not(.ng-hide) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    #content .spec-grid > .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;
    }
    #content .spec-grid .card {
        width: auto !important;
        margin: 0 !important;
    }
    /* Alerta de permisos (cámara/micrófono): texto contenido en móvil (era grande). */
    #content .alert-danger.corporate {
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding: 12px 14px !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);
    }
}