/* =====================================================================
   DriCloud — ajustes de diseño para MÓVIL y TABLETA.

   Esta hoja se carga la última (ver _HeadComun.cshtml) y TODO lo que
   contiene está dentro de @media (max-width: 991px): en escritorio
   (>= 992 px) no cambia absolutamente nada, el aspecto de siempre.

   Objetivos:
     1. Que ninguna pantalla se salga a lo ancho (nada de scroll
        horizontal de la página): las tablas anchas se desplazan
        dentro de su propia caja.
     2. Que la barra superior de iconos se pueda usar (iconos en
        varias filas, logo de la clínica y usuario visibles).
     3. Que la columna izquierda (calendario y filtros) quede plegada
        y se abra con el botón hamburguesa (#btnMenuToggle).
   ===================================================================== */

@media (max-width: 991px) {

    /* ---------------------------------------------------------------
       1. NADA SE SALE A LO ANCHO
       --------------------------------------------------------------- */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    /*  P542 (Enrique, 26-09-2026, en el móvil: «miro un poco y de repente ya no veo la parte de arriba de
        los menús»). Al bajar por la página la cabecera se iba con el contenido y no había forma de verla
        sin volver hasta arriba del todo. Ahora se queda pegada arriba: se esconde al bajar (para dejar
        sitio) y vuelve en cuanto se sube un poco (dricloud-comun.js, «Cabecera del móvil»).
        «clip» en vez de «hidden»: recorta igual lo que se sale a lo ancho, pero sin convertir html/body en
        cajas de desplazamiento, que es lo que impide que algo se quede pegado («sticky»). Los navegadores
        que no lo entienden se quedan con «hidden» y la cabecera, como antes. */
    @supports (overflow-x: clip) {
        html, body { overflow-x: clip; }
    }
    /*  P972 (Enrique, 06-10-2026, iPhone: «los botones de arriba no se ven… cuesta hacer scroll, se queda
        pegado y da saltos»). La cabecera pegada de P542 se ponía ENCIMA de las barras que ya van pegadas
        arriba (la del paciente en la historia clínica, .hc-cabecera, top 0) y tapaba sus botones; y el
        esconder/enseñar al hacer scroll, con el rebote del iPhone, hacía saltar la página. Vuelve a ir con
        el contenido, como antes de P542; para los menús basta con subir. */
    #cabeceraApp {
        position: relative;
        background-color: #edeff6;
    }

    /* Hueco para el pie fijo, que si no tapa el final del contenido. */
    body {
        padding-bottom: 45px;
    }

    /* Las filas de Bootstrap 3 llevan márgenes negativos de 15 px que,
       sin un .container que los compense, sacan el contenido de la
       pantalla. En móvil se anulan. */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    header > .container-fluid,
    footer > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ninguna imagen, gráfica o incrustación más ancha que la pantalla. */
    img, canvas, svg, video, iframe, embed, object {
        max-width: 100%;
    }

    img, canvas {
        height: auto;
    }

    /* El contenido principal ocupa todo el ancho disponible. */
    .main,
    .main > [class*="col-"],
    .main #divMain,
    .topBar > [class*="col-"] {
        float: none;
        width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .topBar {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    /* Textos largos (nombres, correos, URLs) que no rompen línea. */
    .topBar h1, .topBar h4,
    .panel-heading h2, .panel-heading h3,
    .panel-body p, .alert p, .alert h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ---------------------------------------------------------------
       2. TABLAS ANCHAS: SE DESPLAZAN ELLAS, NO LA PÁGINA
       --------------------------------------------------------------- */
    .dt-container,
    .dataTables_wrapper,
    .dri-tabla-caja,
    .table-responsive,
    .tablaScrollMovil,
    #dietario_content,
    .panel-body:has(> table),
    .panel-body:has(> .dt-container),
    .panel-body:has(> form > table),
    .panel-body:has(> div > table),
    .boxForm .myForm:has(table),
    div[id^="divCuerpo_"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* La tabla puede ser más ancha que la caja: es la caja la que
       lleva el scroll. */
    .dt-container > table,
    .dri-tabla-caja > table,
    .table-responsive > table {
        max-width: none;
    }

    /* Restos de jqGrid: que la rejilla no fuerce 1200 px de página. */
    .ui-jqgrid {
        max-width: 100%;
    }

    /* ---------------------------------------------------------------
       3. BARRA SUPERIOR DE ICONOS

       En la v1 esta barra en móvil quedaba inservible: las clases
       hidden-sm/hidden-xs de Bootstrap 3 escondían los iconos y dejaban
       solo el texto, el logotipo de la clínica desaparecía y la fila de
       la derecha (usuario, fichaje, soporte, salir) se partía en dos
       líneas. Aquí se recompone en dos filas, manteniendo los MISMOS
       iconos, colores y orden que en escritorio:

         Fila 1 : logotipo de la clínica · nombre de la clínica · fila
                  de usuario (nombre, fichaje, señal, soporte, salir)
         Fila 2 : el menú de iconos y el logotipo de DriCloud a su derecha
                  (en el móvil, desde P289, cabecera compacta y módulos en
                  una sola línea desplazable: ver el bloque de 767 px)

       El salto entre las dos filas lo da .separador-header, que ya
       ocupaba el 100 % del ancho en el diseño de siempre.
       --------------------------------------------------------------- */
    header .row.margin-0 {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin: 0;
        padding: 4px 8px 6px 8px;
    }

    /* Logotipo de la clínica: la v1 lo ocultaba en móvil (hidden-xs
       hidden-sm). Aquí se ve, pequeño, a la izquierda. */
    header .row.margin-0 > .headerEdit {
        display: block !important;
        flex: 0 0 auto;
        width: auto;
        max-width: 26%;
        padding: 2px 8px 0 0;
    }

    header .headerEdit .logo,
    header img.logo {
        width: auto;
        height: 34px;
        max-height: 34px;
        max-width: 100%;
        margin-left: 0;
    }

    /* Todo lo demás (nombre, usuario, menú y logotipo de DriCloud) va en
       una caja flexible que se parte en las dos filas descritas arriba. */
    header .row.margin-0 > .col-xs-12 {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* --- Fila 1 ---------------------------------------------------- */

    /* Nombre de la clínica: una sola línea; si no cabe, se recorta con
       puntos suspensivos (el nombre completo queda en el "title"). */
    header p.claim {
        order: 2;
        flex: 0 0 100%;
        min-width: 0;
        font-size: 15px;
        line-height: 1.2;
        padding: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* El eslogan no cabe en el móvil; en tableta se enseña recortado. */
    header .row.margin-0 > .col-xs-12 > p:not(.claim) {
        order: 3;
        flex: 0 0 100%;
        font-size: 12px;
        line-height: 1.2;
        margin: 0;
        padding: 0;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Fila de la derecha: en una sola línea, sin partirse nunca. Lo que
       cede sitio es el nombre del usuario, que se recorta. */
    header ul.menu-aux {
        order: 1;
        flex: 0 0 100%;
        float: none !important;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

        header ul.menu-aux > li {
            padding: 0;
            display: flex;
            align-items: center;
            min-width: 0;
        }

            /* Zona de pulsación cómoda para el dedo en todos los iconos. */
            header ul.menu-aux > li > a,
            header ul.menu-aux > li > img {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 36px;
                min-height: 36px;
                padding: 0;
            }

    header .titleUser {
        display: inline-block;
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        vertical-align: middle;
    }

    header .LandbotImg {
        height: 22px !important;
        width: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    header .imagenRedondeada {
        height: 24px;
        width: 24px;
        margin-bottom: 0;
    }

    /* --- Salto de fila --------------------------------------------- */
    header .separador-header {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        margin: 4px 0 0 0;
        background: none;
    }

    /* --- Fila 2 ---------------------------------------------------- */
    header nav.principal {
        order: 5;
        flex: 1 1 200px;
        min-width: 0;
        align-self: flex-start;
        margin: 0;
        min-height: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Logotipo de DriCloud: a la derecha del menú, pequeño y en su sitio. */
    header img.logo-header {
        order: 6;
        flex: 0 0 auto;
        align-self: flex-start;
        height: 20px;
        width: auto;
        float: none !important;
        margin: 6px 0 0 8px;
    }

    header .navbar-header {
        margin: 0;
        float: none;
    }

    header .navbar-collapse,
    header .navbar-collapse.collapse {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0;
        margin: 0;
        border-top: 0;
        box-shadow: none;
        width: 100%;
    }

    header ul.menu-principal {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        float: none;
        width: 100%;
        margin: 2px 0 2px 0;
        padding: 0;
    }

        header ul.menu-principal > li {
            position: relative;
            float: none;
            text-align: center;
            padding: 0 2px;
            margin: 0;
        }

            /* Zona de pulsación de 46 px de alto: cómoda con el dedo. */
            header ul.menu-principal > li > a {
                display: block;
                position: relative;
                min-height: 46px;
                padding: 4px 2px 3px 2px;
            }

        header ul.menu-principal li p {
            margin: 0;
            padding: 0;
            font-size: 10px;
            line-height: 1.1;
        }

            header ul.menu-principal li p span {
                display: block;
                margin: 0;
                font-size: 10px;
                line-height: 1.1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    /* Los iconos se ven también en móvil (la v1 los ocultaba con
       hidden-xs / hidden-sm y dejaba solo el texto), en tamaño reducido
       pero con los mismos colores y el mismo orden. */
    header ul.menu-principal img.iconoMenuSuperior {
        display: inline-block !important;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        padding: 0;
    }

    /* Los globos de aviso van pegados al icono, no a la esquina de la
       celda (que en tableta queda a más de 60 px de distancia). */
    header ul.menu-principal .badge-top,
    header ul.menu-principal .badge-bottom {
        right: 50%;
        margin-right: -21px;
        font-size: 9px;
        line-height: 1;
        padding: 2px 4px;
    }

    header ul.menu-principal .badge-top {
        top: 0;
    }

    header ul.menu-principal .badge-bottom {
        top: 20px;
    }

    /* --- Tableta (768-991 px): el menú se ve entero, seis por fila --- */
    @media (min-width: 768px) {

        header .navbar-toggle {
            display: none !important;
        }

        header .navbar-collapse,
        header .navbar-collapse.collapse {
            display: block !important;
        }

        header ul.menu-principal > li {
            flex: 0 0 16.666%;
            width: 16.666%;
            max-width: 16.666%;
        }
    }

    /* --- Móvil (menos de 768 px): cabecera compacta y módulos en UNA línea ---
       P289 (Enrique, 20-09-2026): el menú de iconos plegado tras una
       hamburguesa y, abierto, los once módulos en tres filas ocupaban media
       pantalla. Ahora es como en el panel de control (panel.css,
       .pnl-modulos):

         Fila 1 : logotipo pequeño · nombre de la clínica (una línea,
                  recortado) · iconos (perfil, fichaje, soporte, salir)
         Fila 2 : los módulos en una sola línea que se desplaza de lado con
                  el dedo, sin barra visible; al cargar, el módulo en el que
                  se está queda a la vista (lo centra el script del final de
                  ctlVistaMenuSuperior.cshtml).

       Ya no hay botón de hamburguesa en la cabecera (no hace falta: los
       módulos siempre se ven). El botón redondo de debajo de la franja
       blanca (#btnMenuToggle) sigue: abre el menú lateral de la sección
       (calendario, filtros), que es otra cosa. Los globos de avisos van
       dentro de cada módulo y se siguen viendo. */
    @media (max-width: 767px) {

        /* La caja de la derecha se deshace (display: contents) para que el
           logotipo, el nombre, los iconos y la línea de módulos se coloquen
           todos en la misma fila flexible de la cabecera: así los módulos
           ocupan TODO el ancho, también el de debajo del logotipo. */
        header .container-fluid > .row.margin-0 {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            padding: 4px 8px 0 8px !important;
            column-gap: 6px;
        }

            header .container-fluid > .row.margin-0 > .col-xs-12 {
                display: contents;
            }

            header .container-fluid > .row.margin-0 > .headerEdit {
                order: 1;
                display: flex !important;
                align-items: center;
                flex: 0 0 auto;
                width: auto;
                max-width: 22%;
                height: 32px;
                padding: 0 !important;
            }

                header .container-fluid > .row.margin-0 > .headerEdit > .logo,
                header .container-fluid > .row.margin-0 > .headerEdit img {
                    height: 28px !important;
                    max-height: 28px !important;
                    width: auto !important;
                    max-width: 100% !important;
                    object-fit: contain;
                    margin: 0 !important;
                }

        header .container-fluid > .row.margin-0 p.claim {
            order: 2;
            flex: 1 1 0;
            min-width: 0;
            font-size: 14px;
            line-height: 32px;
            height: 32px;
            margin: 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* El eslogan no cabe: en el móvil se quita. */
        header .container-fluid > .row.margin-0 > .col-xs-12 > p:not(.claim) {
            display: none;
        }

        header .container-fluid > .row.margin-0 ul.menu-aux {
            order: 3;
            flex: 0 0 auto;
            width: auto;
            max-width: 58%;
            margin: 0 !important;
        }

            /* El nombre del usuario no cabe al lado del de la clínica: queda
               su foto (o el icono de usuario), que lleva a su perfil. */
            header ul.menu-aux .titleUser {
                display: none;
            }

            header ul.menu-aux > li > a,
            header ul.menu-aux > li > img {
                min-width: 34px;
                min-height: 34px;
            }

            header ul.menu-aux > li:first-child img.LandbotImg {
                margin-bottom: 0;
            }

        /* El logotipo de DriCloud no cabe en esta cabecera: fuera. */
        header .container-fluid > .row.margin-0 img.logo-header {
            display: none !important;
        }

        header .container-fluid > .row.margin-0 .separador-header {
            order: 4;
            flex: 0 0 100%;
            height: 0;
            margin: 0;
        }

        header .container-fluid > .row.margin-0 nav.principal {
            order: 5;
            flex: 0 0 100%;
            width: 100%;
            min-width: 0;
            margin: 0;
        }

        /* Sin hamburguesa: los módulos se ven siempre. */
        header nav.principal .navbar-header,
        header nav.principal .navbar-toggle {
            display: none !important;
        }

        header nav.principal .navbar-collapse,
        header nav.principal .navbar-collapse.collapse {
            display: block !important;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        /* La línea de módulos: se desplaza de lado dentro de su caja, sin
           barra de desplazamiento a la vista. */
        header ul.menu-principal {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 2px;
            width: 100%;
            margin: 0;
            padding: 2px 0 4px 0;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
        }

            header ul.menu-principal::-webkit-scrollbar {
                display: none;
            }

            header ul.menu-principal > li {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                padding: 0;
            }

                header ul.menu-principal > li > a {
                    min-width: 56px;
                    min-height: 50px;
                    padding: 4px 6px 3px 6px;
                    border-radius: 10px;
                }

            header ul.menu-principal li p span {
                font-size: 10.5px;
                overflow: visible;
                text-overflow: clip;
            }

            header ul.menu-principal img.iconoMenuSuperior {
                width: 30px;
                height: 30px;
            }

            /* El módulo en el que se está: se aclara el fondo, como en el panel. */
            header ul.menu-principal > li > a:has(img.iconoMenuSuperior.active),
            header ul.menu-impago > li.active > a {
                background: rgba(255,255,255,.18);
            }

            /* Globos de avisos: arriba a la derecha del icono, dentro de la
               caja del módulo (si no, la línea desplazable los cortaría). */
            header ul.menu-principal .badge-top {
                top: 1px;
                right: 50%;
                margin-right: -24px;
            }

            header ul.menu-principal .badge-bottom {
                top: 19px;
                right: 50%;
                margin-right: -24px;
            }
    }


    /* ---------------------------------------------------------------
       4. COLUMNA IZQUIERDA PLEGABLE (calendario y filtros)
       --------------------------------------------------------------- */
    .btn-menu-toggle,
    .menu-close-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .menu-lateral {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        max-width: 85%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #edeff6;
        z-index: 1045;
        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 3px 0 15px rgba(0,0,0,0.2);
        padding-top: 60px;
        padding-bottom: 30px;
    }

        .menu-lateral.active {
            left: 0;
        }

        .menu-lateral #divMenuLateral {
            float: none;
            width: 100% !important;
            padding: 0 12px;
        }

            .menu-lateral #divMenuLateral > * {
                margin-bottom: 24px;
            }

    /* Las flechas de plegar/desplegar de escritorio no pintan nada aquí. */
    #openbtn,
    #closebtn {
        display: none !important;
    }

    /* ---------------------------------------------------------------
       5. FORMULARIOS, BOTONERAS Y PESTAÑAS
       --------------------------------------------------------------- */
    /* En la franja blanca del título nada flota: el título arriba y la
       botonera debajo, en varias filas si hace falta. */
    .topBar .text-right,
    .topBar .pull-left,
    .topBar .pull-right,
    .topBar button,
    .topBar .btn {
        float: none !important;
    }

    .topBar h1, .topBar h4 {
        display: block;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .topBar .text-right {
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 6px;
    }

        .topBar .text-right > .btn,
        .topBar .text-right > .btn-group {
            float: none !important;
            margin-right: 0;
        }

    /* Pestañas y menús de navegación que no caben: scroll propio. */
    .nav-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    /* Los desplegables no se salen por la derecha. */
    .dropdown-menu {
        max-width: 90vw;
    }

    /* ---------------------------------------------------------------
       6. AGENDA, PLANNING Y DIETARIO
       --------------------------------------------------------------- */
    /* FullCalendar: la rejilla se desplaza dentro de su propio marco. */
    .fc, .fc-view-harness, .fc-scroller, .fc-view {
        max-width: 100%;
    }

        .fc .fc-toolbar {
            flex-wrap: wrap;
            gap: 6px;
        }

        .fc .fc-toolbar-title {
            font-size: 16px;
        }

    /* Barra de filtros de la agenda / dietario / planning: en varias filas. */
    .topBar #ddlTipos,
    .topBar #ddlVistas,
    .topBar #ddlClinicas,
    .topBar #ddlAgendaDuracionVista,
    .topBar #txt-fecha {
        float: none !important;
        max-width: 100%;
    }

    /* Tarjetas del planning: una debajo de otra, sin salirse. */
    .planningDietM.despacho {
        width: 100% !important;
        float: none;
        max-width: 100%;
    }

    /* Panel de soporte lateral: a pantalla completa en móvil. */
    .panel-soporte-derecha {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        right: -100%;
    }

    /* Modales a ancho de pantalla. */
    .modal-dialog {
        width: auto;
        max-width: 100%;
        margin: 10px;
    }
}

/* ------------------------------------------------------------------------
   Desplegables: en la v1 los combos los pintaba el plugin Chosen, que dibuja
   su propia flecha. En la v2 se usa el <select> nativo, y la hoja heredada le
   quita la apariencia del sistema (appearance: none), así que se quedaba con
   pinta de caja de texto. Aquí se le devuelve la flecha para que se vea que es
   un desplegable, manteniendo el resto del estilo de la v1.
   ------------------------------------------------------------------------ */
select.form-control,
select.combo-textbox-input,
select.form-textbox-input {
    /* IMPRESCINDIBLE: sin esto el navegador dibuja ADEMÁS su propia flecha y se ven dos
       (07-09-2026). La hoja heredada de la v1 solo quita la apariencia en algunos combos,
       así que hay que quitarla aquí, en el mismo sitio donde se pone nuestra flecha. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 30px !important;
    cursor: pointer;
}

    /* Sin flecha si el combo está deshabilitado: allí no hay nada que desplegar. */
    select.form-control[disabled],
    select.form-control[readonly],
    select.combo-textbox-input[disabled],
    select.form-textbox-input[disabled] {
        background-image: none;
        padding-right: 10px !important;
    }

/* Combos que no llevan clase de formulario: también una sola flecha, la del navegador.
   Si alguna hoja heredada les quitó la apariencia, se les devuelve. */
select:not(.form-control):not(.combo-textbox-input):not(.form-textbox-input) {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    background-image: none;
}

/* ------------------------------------------------------------------------
   Ficha de cita: la hoja heredada de la v1 ocultaba #lblPacienteCtlEditEventoCita
   porque allí era una etiqueta suelta del formulario. En la v2 ese elemento es la
   cabecera "NOMBRE - ASEGURADORA - NHC: n" de la ficha, así que tiene que verse.
   ------------------------------------------------------------------------ */
#mNuevaCita #lblPacienteCtlEditEventoCita {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #14263e;
}

@media (max-width: 991px) {
    /* Filtros del visor de registros: en móvil, cada campo a ancho completo.
       Con el ancho mínimo de escritorio (130 px) la fila se salía de la pantalla. */
    .filtros-logs .form-group {
        display: block;
        margin-right: 0;
        width: 100%;
    }

        .filtros-logs input,
        .filtros-logs select {
            min-width: 0;
            width: 100%;
        }
}

/* ------------------------------------------------------------------------
   MÓDULO FORMULARIO (menú Configuración): formularios de historia clínica,
   formulario y encuesta del portal del paciente, y plantillas Word de informe.

   En móvil se salían a lo ancho tres cosas: la tabla de campos a medida, las
   etiquetas de plantilla (son una sola palabra larguísima, tipo
   [PAC_DATOS_EMBARAZO_FECHA_CALCULADA_PARTO], que no puede partirse sola) y
   la fila "bloque + posición" del constructor.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {

    /* Tabla de campos a medida: se desplaza ella, no la página. */
    .dri-campos-tabla {
        min-width: 640px;
    }

    /* Buscador y filtros del listado de formularios: a ancho completo. */
    .dri-form-buscador {
        max-width: 100%;
        width: 100%;
    }

        .dri-form-buscador input {
            width: 100%;
        }

    /* Constructor: el bloque y su posición, uno debajo del otro. */
    .dri-bloque label {
        display: block;
    }

    .dri-bloque .dri-pos {
        display: block;
        width: 84px;
        margin: 4px 0 0 20px;
    }

    /* Etiquetas de plantilla: una etiqueta larga tiene que poder partirse. */
    .dri-etq {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Contestaciones del portal en la ficha y en Marketing: en móvil, el nombre
       del campo encima del valor (dl-horizontal de Bootstrap deja 160 px fijos). */
    #divDatosPrevisitaFormularioPersonalizado .dl-horizontal dt,
    #divDatosPrevisitaFormularioPersonalizado .dl-horizontal dd {
        float: none;
        width: auto;
        text-align: left;
        margin-left: 0;
    }

    /* Ventana de edición de un campo: a ancho de pantalla. */
    #modalEditarCampo .modal-dialog {
        width: auto;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   BARRA SUPERIOR DE AGENDA / PLANNING / DIETARIO / TURNOS

   Dos diferencias con la v1 que se veían en las capturas del 07-09-2026:

   1. Las flechas de día anterior / siguiente salían como dos botones
      redondos grandes y grises, porque heredan el aspecto de .form-control.
      En la v1 son dos flechas planas sin fondo ni borde. Se deja así, que
      además es lo que dice el CSS de la v1 (.topBar .littleArrow).

   2. Los desplegables salían con el texto cortado ("Clínicas: T", "10 n")
      porque la flecha que les pintamos se come 30 px por la derecha. Se les
      devuelve ese ancho.
   --------------------------------------------------------------------- */
.topBar .calBx .littleArrow,
.topBar .calBx .littleArrow.form-control {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 6px !important;
    height: auto;
    line-height: 34px;
    font-size: 1.3em;
    color: #666;
}

    .topBar .calBx .littleArrow:hover {
        color: #14263e;
    }

/* 15-09-2026 (Enrique: "estaba mejor en la v1 con todos los desplegables del mismo tamano").
   Aqui se habian ensanchado a 150-220 px y cada uno acababa con un ancho distinto, ademas de
   engordar la franja blanca. Se vuelve a las medidas de la v1 (css.css): 125 px, y 90 el de la
   duracion de la franja horaria. */
.topBar select.form-control,
.topBar select.combo-textbox-input {
    width: auto;
    min-width: 0;
    max-width: 125px;
}

.topBar #ddlAgendaDuracionVista,
.topBar select#ddlAgendaDuracionVista {
    max-width: 90px;
}

/* ---------------------------------------------------------------------
   Listas de filtros del menú lateral (despachos, profesionales,
   especialidades): en la v1 la caja tiene un alto máximo y se desplaza por
   dentro. En la v2 crecía sin límite y en clínicas con muchos despachos la
   lista ocupaba toda la pantalla (07-09-2026, pantalla de Planning).
   --------------------------------------------------------------------- */
/*  P814 (Enrique, 05-10-2026, con una captura de la v1 de 2021): en la v1 la lista de profesionales
    (y las de despachos y especialidades) se veía ENTERA, sin barra para desplazarse; la clínica quiere
    verlos todos a la vez sin hacer scroll. Se quita el alto máximo del 07-09-2026. */
.multiFilter {
    max-height: none;
    overflow-y: visible;
}

/* ---------------------------------------------------------------------
   La barra superior se desbordaba por la derecha en pantallas menos
   anchas y se perdian los ultimos botones (07-09-2026: en Cita Proxima
   desaparecian "Hoy" y el de imprimir). Ahora la barra parte en varias
   lineas en vez de cortar.
   --------------------------------------------------------------------- */
.topBar > .row,
.topBar .text-right {
    max-width: 100%;
}

    .topBar .text-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        float: right;
    }

        /* Dentro del contenedor flexible los "float" ya no hacen falta y descuadran. */
        .topBar .text-right > *,
        .topBar .text-right .btn-group > * {
            float: none !important;
            margin-right: 0 !important;
        }

    .topBar .btn-group {
        display: inline-flex;
        gap: 4px;
    }

/* ---------------------------------------------------------------------
   VENTANA DE CITA DE LA AGENDA (#mNuevaCita)

   En la v1 la ventana es mas ancha y los campos caben en su fila; en la v2
   se quedaba estrecha y se partian en dos lineas "Color de la cita",
   "Cobrada aseguradora" y "Recordar WhatsApp" (07-09-2026).
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    #mNuevaCita .modal-dialog { width: 680px; max-width: 94vw; }
}
/* P853 (CBC Surgery, 05-10-2026): la cita de QUIRÓFANO, igual de ancha que la de consultas (860px), para
   leer bien el diagnóstico, la técnica y las observaciones del cirujano. */
@media (min-width: 768px) {
    #mNuevaCita.cita-quirofano .modal-dialog { width: 860px; max-width: calc(100% - 24px); }
}

/* Fila de iconos de la cabecera: videollamada, copiar/pegar y la X, en ese orden y la X pegada a la
   derecha (con "float: right" salian descolocados). */
#mNuevaCita .cabeceraIconosCita {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 26px;
}

    /* El boton de copiar / pegar, pegado a la X (Enrique, 14-09-2026: se quedaba muy separado). */
    #mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas + .botonCerrarCita { margin-left: -4px; }
    #mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas button { padding: 2px 2px; }

#mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas {
    display: flex;
    align-items: center;
    gap: 6px;
}

#mNuevaCita .cabeceraIconosCita button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

#mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas img { height: 20px; }

/* Copiar / pegar los datos de la cita (11-09-2026, T6): antes los dos botones llevaban la misma
   imagen y no habia manera de distinguirlos. Ahora cada uno lleva su icono y su palabra. */
#mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas button {
    color: #fff;
    opacity: .75;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
}

#mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .15);
}

#mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas [class^="icon-"] { font-size: 15px; }

/* En pantallas estrechas se queda solo el icono, que ahi el sitio manda. */
@media (max-width: 767px) {
    #mNuevaCita .cabeceraIconosCita #divCopiarPegarCitas .textoCopiarPegar { display: none; }
}

#mNuevaCita .cabeceraIconosCita .botonCerrarCita { opacity: .5; }
#mNuevaCita .cabeceraIconosCita .botonCerrarCita:hover { opacity: 1; }
#mNuevaCita .cabeceraIconosCita .botonCerrarCita img { height: 18px; }

/* El cuadradito de color va a la altura del combo de tipo de cita, sin etiqueta. Sin el
   "appearance: none" el navegador dibuja dentro un rectangulo pequeno que no llena la caja. */
#mNuevaCita .muestraColorCita {
    height: 45px;
    width: 100%;
    padding: 0;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid #d2d2d7;
}

#mNuevaCita .muestraColorCita::-webkit-color-swatch-wrapper { padding: 0; }
#mNuevaCita .muestraColorCita::-webkit-color-swatch { border: none; border-radius: 11px; display: block; height: 100%; width: 100%; }
#mNuevaCita .muestraColorCita::-moz-color-swatch { border: none; border-radius: 11px; }

/* Fila de fecha y horas (14-09-2026). Ya no son seis columnas iguales de Bootstrap:
     - la FECHA necesita mas ancho, que antes se comia el año ("14/09/202...");
     - hora y minutos van pegados por parejas (inicio juntos, fin juntos);
     - la duracion ("Minutos") cabe dentro de la ventana y ya no se sale por la derecha. */
#mNuevaCita .filaFechaHoraCita {
    /* 15-09-2026, segunda vuelta (Enrique: "otra vez el campo de minutos se sale del cuadro").
       Con flex, los huecos se reparten a partir de un ancho BASE en pixeles y, si la suma de bases
       mas los separadores pasa del ancho de la ventana, el ultimo se sale. Con rejilla y columnas en
       fracciones eso no puede pasar: las cuatro columnas se reparten SIEMPRE el ancho que hay, ni un
       pixel mas. El minmax(0, ...) es imprescindible: sin el, una columna se niega a bajar del ancho
       de su contenido y volveria el desbordamiento. */
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.75fr) minmax(0, 1.75fr) minmax(0, 1.25fr);
    gap: 10px;
    align-items: start;
    margin: 0 0 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#mNuevaCita .filaFechaHoraCita > *,
#mNuevaCita .filaFechaHoraCita .campoHora,
#mNuevaCita .filaFechaHoraCita .floating-label-group { min-width: 0; }

    /* Las parejas de hora y minuto ya no son dos columnas de la rejilla: desde el 16-09-2026 son un
       solo campo con etiqueta encima y las dos cajas separadas por ":" dentro, igual que la ventana
       de turnos ("puedes usar los tamanos de la ventana de turnos que ahi si se ve bien"). */
    #mNuevaCita .filaFechaHoraCita .parejaHora { display: block; min-width: 0; }

    #mNuevaCita .filaFechaHoraCita .turno-hora input { flex: 1 1 0; min-width: 0; }

#mNuevaCita .filaFechaHoraCita .floating-label { font-size: 11px; max-width: 100%; }

#mNuevaCita .filaFechaHoraCita .form-textbox-input {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    font-size: 13px;
    width: 100%;
}

    /* El desplegable de duracion necesita hueco para su flecha; sin esto el "40" se montaba con ella. */
    #mNuevaCita .filaFechaHoraCita .campoDuracion select.form-textbox-input {
        padding-right: 28px !important;
    }

/* Doctor, tipo de cita y color en una sola fila, para ahorrar una linea (Enrique, 14-09-2026). */
#mNuevaCita .filaDoctorTipoCita {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

    #mNuevaCita .filaDoctorTipoCita .campoDoctor { flex: 2 1 260px; min-width: 0; }
    #mNuevaCita .filaDoctorTipoCita .campoTipoCita { flex: 1 1 180px; min-width: 0; }
    #mNuevaCita .filaDoctorTipoCita .campoColorCita { flex: 0 0 70px; }

/* Los datos de contacto del paciente salian demasiado claritos y no se leian (Enrique, 14-09-2026). */
#mNuevaCita #div_FichaPacSel a,
#mNuevaCita #div_FichaPacSel .form-control-applestyle {
    color: #29457d;
    font-weight: 500;
}

/* Bloque de facturas de la cita: pequeno y dentro de su caja, como en la v1. Antes crecia hasta
   sacar la ventana de la pantalla (Enrique, 14-09-2026). */
#mNuevaCita #div_PacienteInfoFacturas_Contenido {
    max-height: 170px;
    overflow: auto;
    border: 1px solid #e3e7f0;
    border-radius: 10px;
    padding: 6px 10px;
}

    #mNuevaCita #div_PacienteInfoFacturas_Contenido table { font-size: 12px; margin: 0; width: 100%; }
    #mNuevaCita #div_PacienteInfoFacturas_Contenido table > thead { display: none; }
    #mNuevaCita #div_PacienteInfoFacturas_Contenido table > tbody > tr > td { padding: 2px 6px; border: none; }

/* "Mostrar facturas" y "Crear factura nueva": se leian casi en blanco. */
#mNuevaCita #div_PacienteInfoFacturas_ContenidoVacio a { color: #29457d; font-weight: 500; }

/* Las tres casillas de recordatorio, en una sola linea y sin partirse. */
#mNuevaCita #divEnviarRecordatoriosCita label { white-space: nowrap; font-weight: normal; }

/* ---------------------------------------------------------------------
   FICHA DEL PACIENTE (alta completa y edicion)

   La v1 tiene a la izquierda una columna con la foto, el numero de
   historial, el estado, el usuario del portal y los consentimientos. En la
   v2 no estaba y los tres consentimientos quedaban al final del todo
   (07-09-2026).
   --------------------------------------------------------------------- */
/* Subtitulo dentro de un panel de la ficha (por ejemplo "Direccion", que ya no va en su propia
   banda azul sino dentro de "Datos personales", para aprovechar el hueco de al lado de la foto). */
.subtituloFiliacion {
    font-size: 15px;
    font-weight: 600;
    color: #29457d;
    margin: 6px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e3e7f0;
}

.columnaFotoPaciente .fotoPacienteFiliacion {
    margin-bottom: 12px;
}

    .columnaFotoPaciente .fotoPacienteFiliacion img {
        width: 100%;
        max-width: 190px;
        border-radius: 12px;
    }

.columnaFotoPaciente .cajaCpnPaciente {
    background: #f2f2f5;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 6px 0 12px;
    font-size: 13px;
    word-break: break-word;
}

.columnaFotoPaciente .checkbox {
    margin: 4px 0;
}
/* P971 (Enrique, 06-10-2026, iPhone): otra hoja las deja flotando a la izquierda y, en el móvil, el rótulo
   «Nombre» de la columna de al lado se montaba encima de «Acepta tratamiento de datos». Solo en el móvil. */
@media (max-width: 991px) {
    .columnaFotoPaciente .checkbox { float: none; }
    .columnaFotoPaciente { display: flow-root; }
}

    .columnaFotoPaciente .checkbox label {
        font-weight: normal;
        font-size: 13px;
    }

/* ---------------------------------------------------------------------
   BOTONES FLOTANTES DE GUARDAR / CANCELAR

   La ficha del paciente es un formulario largo: en la v1 los botones se
   ven siempre abajo a la derecha, se desplace donde se desplace. En la v2
   estaban al final del formulario y habia que bajar hasta el fondo.
   --------------------------------------------------------------------- */
.botonesFlotantesFicha {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}

    .botonesFlotantesFicha .btn { margin: 0; }

/* Hueco al final del formulario para que los botones no tapen el ultimo campo. */
.pacBx { padding-bottom: 90px; }

@media (max-width: 600px) {
    .botonesFlotantesFicha { right: 12px; bottom: 12px; }
}

.columnaFotoPaciente .accionesFotoPaciente { margin-top: 8px; }

/* Foto del documento de identidad, debajo de la del paciente. */
.columnaFotoPaciente .fotoDniPaciente { margin-top: 16px; }

.columnaFotoPaciente .fotoDniPaciente .etiquetaDni {
    font-size: 12px;
    color: #5b6b8c;
    margin-bottom: 6px;
}

.columnaFotoPaciente .fotoDniPaciente img {
    width: 100%;
    max-width: 190px;
    border-radius: 10px;
}

.columnaFotoPaciente .fotoDniPaciente .sinFotoDni {
    max-width: 190px;
    padding: 18px 10px;
    text-align: center;
    font-size: 12px;
    color: #8f9bb5;
    border: 1px dashed #d6dae6;
    border-radius: 10px;
}

/* ---------------------------------------------------------------------
   Lista de facturas dentro de la ventana de cita (15-09-2026, Enrique:
   "los textos de las facturas mira que grandes salen, mas pequeno como en
   la v1"). En la v1 es una cajita con letra pequena y barra de desplazamiento;
   aqui salia una tabla a tamano normal que estiraba la ventana entera.
   --------------------------------------------------------------------- */
.listaFacturasCita {
    max-height: 170px;
    overflow-y: auto;
    border: 1px solid #d2d2d7;
    border-radius: 11px;
    padding: 4px 8px;
}

    .listaFacturasCita table { margin-bottom: 0; }

    .listaFacturasCita th,
    .listaFacturasCita td {
        font-size: 12px;
        line-height: 1.35;
        padding: 2px 6px !important;
        border-top: none !important;
    }

    .listaFacturasCita thead th {
        font-weight: 600;
        color: #4a5670;
        border-bottom: 1px solid #e5e5e5 !important;
    }