/* =====================================================================
   GUIA DE ESTILOS DRICLOUD v2 (10-09-2026)

   Aplica la guia que entrego Enrique (guia-estilos-dricloud-v2.html):
     1. Una sola familia tipografica en todo el software (Segoe UI + pila
        del sistema), con la escala de tamanos de la guia (pasada de
        legibilidad: cuerpo y tablas 15 px, etiquetas 13-13,5 px,
        minimo 12 px; subida el 16-09-2026 a peticion de Enrique).
     2. Colores semanticos: un significado, un color. El rojo queda para
        destruir y para "no asistio".
     3. Botones: seis familias con un papel fijo. Los botones existentes
        (clases de Bootstrap 3) se MAPEAN a esas familias desde aqui, sin
        tocar las vistas: .btn-success -> primario, .btn-primary y
        .btn-default -> secundario, .btn-warning -> neutro,
        .btn-danger -> peligro.
     4. Campos: mismo borde, radio 8 px y foco en todo el software.

   Se carga LA ULTIMA de todas las hojas para que gane a lo heredado. No
   mueve nada de sitio: solo tipografia, colores y aspecto de botones y
   campos. Los estados de cita (verde por llegar, amarillo en espera, rojo
   en consulta, azul finalizada, gris no asistencia) NO cambian de color:
   es lo que los clientes conocen; solo van en pastel con texto oscuro.
   ===================================================================== */

:root {
    /* Paleta base (la actual del software, no cambia) */
    --header-1: #4d80bd;
    --header-2: #1c4c86;
    --bg: #ededf5;
    --card: #ffffff;
    --borde: #e3e6f0;
    --titulo: #14213d;
    --seccion: #2b5aa6;
    --link: #356fb0;
    --texto: #333f52;
    --gris: #636f83;

    /* Semanticos */
    --exito: #0e9f6e;   --exito-bg: #e8f8ef;
    --aviso: #a16207;   --aviso-bg: #fff7e0;
    --peligro: #d64545; --peligro-osc: #b93838; --peligro-bg: #fdecec;
    --info: #1e4e8c;    --info-bg: #eaf2fd;
    --whatsapp: #25d366;
    --ia-chispa: #ffd166;

    /* Botones */
    --btn-pri-1: #3568a8;
    --btn-pri-2: #24518c;
    --btn-sec-borde: #b9cbe4;
    --btn-sec-texto: #24518c;
    --btn-neutro-bg: #eef1f6;
    --btn-neutro-texto: #475569;
    --btn-neutro-borde: #d7dde8;

    --fuente: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
}

/* ---------------------------------------------------------------------
   1. TIPOGRAFIA
   --------------------------------------------------------------------- */
html, body,
input, select, textarea, button, .btn,
table, .form-control, .dropdown-menu, .modal, .popover, .tooltip,
h1, h2, h3, h4, h5, h6, p, label, a, span, div, li, td, th {
    font-family: var(--fuente) !important;
}

/* Las fuentes de iconos tienen que seguir siendo las suyas. */
.glyphicon { font-family: 'Glyphicons Halflings' !important; }
[class^="flaticon-"], [class*=" flaticon-"], .flaticon { font-family: flaticon !important; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; }
.ui-icon, .ui-datepicker .ui-icon { font-family: inherit; }
code, pre, kbd, samp { font-family: ui-monospace, Menlo, Consolas, monospace !important; }

body {
    color: var(--texto);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* Escala (SUBIDA 1,5 px el 16-09-2026: Enrique lo ha pedido tres veces —los
   clientes son medicos de 40 a 65 anos y la v1 se veia mas grande):
   23 titulo de pagina · 19 tarjeta · 15 seccion, cuerpo y tablas ·
   14 secundario · 13 chips. Nada por debajo de 12 px en ninguna parte. */
h1 { font-size: 23px; font-weight: 800; color: var(--titulo); letter-spacing: -.4px; }
h2 { font-size: 19px; font-weight: 700; }
h3, h4 { font-size: 15.5px; font-weight: 700; }

table, .table, .dataTable, .dietario-tabla td, .dietario-tabla th, td, th { font-size: 15px; }
label, .floating-label-group .floating-label { font-size: 13.5px; }
.badge, .label, .estado { font-size: 13px; }
small, .small, .help-block, .info-small, .text-muted { font-size: 14px; }

/* Nada por debajo de 12 px en ninguna parte. */
.dt-container, .dt-info, .dt-length, .fc, .fc .fc-event, .citaCabecera, .citaEstado,
.panel-footer, .breadcrumb { font-size: 12.5px; }
.fc .fc-col-header-cell-cushion, .fc .fc-timegrid-slot-label-cushion { font-size: 13.5px; }

/* Colores de texto y enlaces con contraste AA. */
a, .btn-link { color: var(--link); }
a:hover, .btn-link:hover { color: #24518c; }
.text-muted, .colorGris, .dt-info, .dt-length label { color: var(--gris) !important; }

/* Titulos de seccion de las tarjetas (los azules). */
.panel-heading h2, .panel-heading h3, .panel-heading h4, .pTitleForm, .titulo-seccion { color: var(--seccion); }

/* ---------------------------------------------------------------------
   2. BOTONES — seis familias, un papel cada una
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-shadow: none;
    background-image: none;
    transition: filter .12s ease, background-color .12s ease;
}

.btn.btn-xs, .btn.btn-sm, .btn.sm { font-size: 14px; padding: 6px 12px; }
.btn.btn-lg { font-size: 16.5px; padding: 11px 20px; }
.btn .glyphicon { top: 0; margin-right: 0; }

/* Primario: la accion que consuma algo (Guardar, Añadir cita, Crear factura, Confirmar). */
.btn-primario, .btn-success, .btn.btn-success {
    background: linear-gradient(180deg, var(--btn-pri-1), var(--btn-pri-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 5px rgba(30, 78, 140, .3);
}
.btn-primario:hover, .btn-success:hover, .btn-primario:focus, .btn-success:focus { filter: brightness(1.07); color: #fff !important; }

/* Secundario: acciones frecuentes que no destruyen ni consuman (Editar, Imprimir, Exportar, Paciente, H. Clinica...). */
.btn-secundario, .btn-primary, .btn-default, .btn-info,
.btn.btn-primary, .btn.btn-default, .btn.btn-info {
    background: #fff !important;
    color: var(--btn-sec-texto) !important;
    border-color: var(--btn-sec-borde) !important;
    box-shadow: none;
}
.btn-secundario:hover, .btn-primary:hover, .btn-default:hover, .btn-info:hover,
.btn-secundario:focus, .btn-primary:focus, .btn-default:focus, .btn-info:focus { background: #f4f8fd !important; color: var(--btn-sec-texto) !important; }

/* Neutro: salir sin guardar (Cancelar, Cerrar, Volver). Nunca rojo ni naranja. */
.btn-neutro, .btn-warning, .btn.btn-warning {
    background: var(--btn-neutro-bg) !important;
    color: var(--btn-neutro-texto) !important;
    border-color: var(--btn-neutro-borde) !important;
    box-shadow: none;
}
.btn-neutro:hover, .btn-warning:hover, .btn-neutro:focus, .btn-warning:focus { background: #e3e8f0 !important; color: var(--btn-neutro-texto) !important; }

/* Peligro: solo destruir, y siempre con confirmacion. */
.btn-peligro, .btn-danger, .btn.btn-danger {
    background: linear-gradient(180deg, #e05555, var(--peligro-osc)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none;
}
.btn-peligro:hover, .btn-danger:hover { filter: brightness(1.06); color: #fff !important; }

.btn-peligro-suave {
    background: #fff !important;
    color: var(--peligro) !important;
    border-color: #eebcbc !important;
}
.btn-peligro-suave:hover { background: var(--peligro-bg) !important; }

/* Ghost: solo texto azul, para navegar e informarse. */
.btn-ghost, .btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--link) !important;
    padding: 9px 6px;
    box-shadow: none;
}

/* IA: SIEMPRE con la chispa dorada delante. P925 (06-10-2026, Enrique): «me gustan más así, como se ven
   cuando no he pasado el paciente todavía, más light que tanto azul tan oscuro, pero que sean cliqueables y
   un poquito más de contraste»: fondo azul muy claro, borde suave y texto azul oscuro (antes azul primario
   relleno). Apagados (sin pasar al paciente) se distinguen por la transparencia. */
.btn-ia {
    background: #edf3fc !important;
    color: #1d4a85 !important;
    border: 1px solid #bfd0ea !important;
    box-shadow: 0 1px 2px rgba(30, 78, 140, .12);
    font-weight: 600;
}
.btn-ia:hover, .btn-ia:focus { background: #dfeafa !important; border-color: #9fb9e0 !important; color: #163d70 !important; }
.btn-ia:active { background: #d3e2f7 !important; }
.btn-ia.disabled, .btn-ia[disabled] { opacity: .55; box-shadow: none; }
.btn-ia::before { color: #e0a100 !important; }
.btn-ia::before, .chispa-ia::before { content: "\2726"; color: var(--ia-chispa); font-size: 16px; margin-right: 2px; }

/* WhatsApp: solo lo que envia por WhatsApp. */
.btn-whatsapp {
    background: linear-gradient(180deg, #3ddf77, #1eb958) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Deshabilitado, sea de la familia que sea. */
.btn:disabled, .btn.disabled, .btn.off, .btn[disabled] {
    background: #e9edf3 !important;
    color: #8c96a6 !important;
    border-color: #e9edf3 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
    filter: none;
}

/* UN solo primario por ventana: en la ventana de cita, "…e imprimir" pasa a secundario. */
#BtnAddCitaeImprimir, #btnGuardareImprimir {
    background: #fff !important;
    color: var(--btn-sec-texto) !important;
    border-color: var(--btn-sec-borde) !important;
    box-shadow: none;
}

/* Separacion entre botones contiguos. */
.btn + .btn, .btn + a.btn { margin-left: 10px; }
.btn-group .btn + .btn, .btn-group > .btn + .btn, .input-group-btn .btn + .btn { margin-left: -1px; }

/* ---------------------------------------------------------------------
   3. CHIPS DE ESTADO (pastel + texto oscuro; misma semantica de siempre)
   --------------------------------------------------------------------- */
.estado {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.e-lleg { background: var(--info-bg); color: var(--info); }
.e-esp { background: var(--aviso-bg); color: var(--aviso); }
.e-fin { background: var(--exito-bg); color: #0e7a48; }
.e-no { background: var(--peligro-bg); color: #c03030; }

/* ---------------------------------------------------------------------
   4. CAMPOS DE FORMULARIO — borde, radio y foco unificados
   --------------------------------------------------------------------- */
.form-control, .form-textbox-input, .campo,
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="date"], input[type="time"], select, textarea {
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    box-shadow: none;
    font-size: 15px;
}

.form-control:focus, .form-textbox-input:focus, .campo:focus,
input:focus, select:focus, textarea:focus {
    outline: 2px solid #bcd2ef;
    outline-offset: 0;
    border-color: var(--seccion);
    box-shadow: none;
}

/* Las cajas con etiqueta flotante mantienen su alto; solo cambia el radio. */
.floating-label-group .form-textbox-input { border-radius: 8px; }
.floating-label-group .floating-label { color: var(--gris); }

/* Campos de solo lectura, un punto mas apagados. */
.form-control[readonly], .form-textbox-input[readonly] { background: #f5f7fb; color: var(--gris); }

/* ---------------------------------------------------------------------
   5. TARJETAS, CABECERAS DE PANEL Y TABLAS
   --------------------------------------------------------------------- */
.panel { border: 1px solid var(--borde); border-radius: 12px; box-shadow: none; }
.panel > .panel-heading { background: #fff; border-bottom: 1px solid var(--borde); border-radius: 12px 12px 0 0; }
.panel-footer { background: #f7f8fc; border-top: 1px solid var(--borde); border-radius: 0 0 12px 12px; }

.table > thead > tr > th, .dataTable thead th, .dietario-tabla th {
    background: #f5f7fb;
    color: var(--gris);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--borde);
}
.table > tbody > tr > td, .dataTable tbody td { border-top: 1px solid #eef1f7; vertical-align: middle; }

/* Alertas con los colores semanticos. */
.alert-info, .alert-info2 { background: var(--info-bg); border-color: #cfe0f7; color: var(--info); }
.alert-success { background: var(--exito-bg); border-color: #bfe8d2; color: #0e7a48; }
.alert-warning { background: var(--aviso-bg); border-color: #f2dea3; color: var(--aviso); }
.alert-danger { background: var(--peligro-bg); border-color: #f0c4c4; color: #c03030; }

/* Globos de aviso sobre los iconos (siguen rojos: son novedades pendientes). */
.badge { font-weight: 700; }

/* ---------------------------------------------------------------------
   6. DASHBOARD (mockup C de la guia): banda de hoy, indicadores y avisos
   --------------------------------------------------------------------- */
#div_Dashboard .banner-hoy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--info-bg);
    border: 1px solid #cfe0f7;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 15.5px;
    color: var(--info);
    margin-bottom: 14px;
}

    #div_Dashboard .banner-hoy b { font-weight: 700; }
    #div_Dashboard .banner-hoy .bannerIcono { font-size: 19.5px; color: var(--seccion); }
    #div_Dashboard .banner-hoy .btn { margin-left: auto; font-size: 14px; padding: 6px 12px; }

#div_Dashboard .kpis, #divCaja .kpis {
    display: grid;
    /* auto-fit: si el usuario no tiene permiso de facturacion son 3 tarjetas y siguen llenando el ancho */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}


#div_Dashboard .kpi, #divCaja .kpi {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 13px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
    min-width: 0;
}

    /* P524 (26-09-2026, móvil): el "min-width: 0" de arriba solo evita que la TARJETA .kpi empuje
       la página; no evita que el <div> de dentro (el que envuelve .lbl/.val/.sub, hermano flex del
       icono) se quede en su "min-width: auto" de fábrica, que es el ancho del texto sin partir. Con
       eso el div nunca encoge, el "white-space:nowrap; text-overflow:ellipsis" de .lbl no llega a
       activarse nunca, y en el móvil el texto largo ("Pacientes nuevos (septiembre)") se salía de la
       tarjeta y de la pantalla. Mismo arreglo que ya tienen `.rejillaDashboard > *`/`.columnaAvisos > *`
       más abajo, aplicado aquí al hijo de .kpi. */
    #div_Dashboard .kpi > div, #divCaja .kpi > div {
        min-width: 0;
    }

    /* El dibujo se veia pegado abajo a la izquierda del cuadradito de color. SEGUNDO INTENTO
       (12-09-2026): el primero no bastó y conviene dejar escrito por qué, porque es de los que
       engañan.

       El icono es un `<span class="glyphicon">` VACÍO: el dibujo lo pinta la hoja de Bootstrap en
       un `::before`. Y ahí se juntan dos cosas:
         · `.glyphicon:empty { width: 1em }` — la caja mide 17 px de ancho, no los 40 del cuadrado;
         · con `line-height: 1`, el dibujo se apoya en la LÍNEA BASE de la fuente, que no está en
           el centro de la caja sino cerca del 80 % de su alto. Por eso salía bajo.

       Centrar el `<span>` no arregla nada, porque lo que hay que centrar es el `::before` que va
       dentro. La forma que sí funciona: convertir el propio `<span>` en una caja flexible que
       ocupe TODO el cuadrado. Así el dibujo pasa a ser su contenido y se centra de verdad, a lo
       ancho y a lo alto, sin depender de la línea base. */
    #div_Dashboard .kpi .kpiIcono, #divCaja .kpi .kpiIcono {
        width: 40px; height: 40px; flex: none;
        border-radius: 11px;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 18.5px;
        box-shadow: 0 2px 4px rgba(20,33,61,.18);
        overflow: hidden;
    }

        #div_Dashboard .kpi .kpiIcono > .glyphicon, #divCaja .kpi .kpiIcono > .glyphicon {
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            /* 15-09-2026 (Enrique: "los iconos, el dibujo sigue sin estar centrado"). Centrar con
               flex centra la CAJA de la letra, no el dibujo: la fuente Glyphicons deja un hueco a la
               derecha de cada simbolo, asi que el dibujo queda unos 2,4 px a la izquierda del medio
               (medido sobre la captura de Enrique, x2). Se compensa con este desplazamiento. */
            transform: translate(2.4px, -0.5px);
        }

    #div_Dashboard .kpi .kpiAzul, #divCaja .kpi .kpiAzul { background: linear-gradient(180deg, #4d80bd, #1c4c86); }
    #div_Dashboard .kpi .kpiVerde, #divCaja .kpi .kpiVerde { background: linear-gradient(180deg, #4ecf74, #16873c); }
    #div_Dashboard .kpi .kpiNaranja, #divCaja .kpi .kpiNaranja { background: linear-gradient(180deg, #f7b84a, #c07908); }
    #div_Dashboard .kpi .kpiRojo, #divCaja .kpi .kpiRojo { background: linear-gradient(180deg, #f96d6d, #c02626); }
    /* Ocupación de la agenda: color propio, ni el naranja de facturación ni el rojo de no asistencia. */
    #div_Dashboard .kpi .kpiMorado, #divCaja .kpi .kpiMorado { background: linear-gradient(180deg, #8f7ae0, #5b3fb5); }

    #div_Dashboard .kpi .lbl, #divCaja .kpi .lbl { font-size: 14px; color: var(--gris); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #div_Dashboard .kpi .val, #divCaja .kpi .val { font-size: 22.5px; font-weight: 800; color: var(--titulo); letter-spacing: -.4px; line-height: 1.2; }
    #div_Dashboard .kpi .sub, #divCaja .kpi .sub { font-size: 13.5px; color: var(--gris); }
    #div_Dashboard .kpi .sub b, #divCaja .kpi .sub b { color: var(--exito); }
    #div_Dashboard .kpi .sub b.mal, #divCaja .kpi .sub b.mal { color: var(--peligro); }

/* Mensajes de DriCloud: tarjetas de aviso azules en vez de texto rojo. */
.aviso-dc {
    background: #f4f8ff;
    border: 1px solid #d7e4f8;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.55;
    color: #31445f;
    margin-bottom: 8px;
    text-align: left;
}

    .aviso-dc .cab { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--info); margin-bottom: 5px; font-size: 15px; }
    .aviso-dc .cab .nuevo { background: var(--seccion); color: #fff; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
    .aviso-dc a { color: var(--link); font-weight: 600; text-decoration: none; }
    /* El HTML del mensaje viene de la BD con colores propios (rojo): se neutralizan. */
    .aviso-dc font, .aviso-dc span, .aviso-dc p, .aviso-dc div, .aviso-dc b, .aviso-dc strong, .aviso-dc h4, .aviso-dc h3 { color: inherit !important; }
    .aviso-dc h3, .aviso-dc h4 { font-size: 15px; font-weight: 700; color: var(--info) !important; margin: 0 0 5px; }
    .aviso-dc p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   7. HISTORIA CLINICA (mockup historia-clinica.html)
   --------------------------------------------------------------------- */
/* Chips de estado de cita en pastel (mismos colores de siempre, texto oscuro). */
.estado { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.estado.e-lleg { background: #cbf8cc; color: #1d6b2a; }
.estado.e-esp  { background: #fffece; color: #8a6d00; }
.estado.e-cons { background: #faaead; color: #8f2424; }
.estado.e-fin  { background: #d6e8f7; color: #1e4e8c; }
.estado.e-no   { background: #e2e2e2; color: #555; }

/* Banner del paciente en la cita: foto, datos en una fila y alergias siempre visibles en rojo. */
.bannerPacienteCita.detalleBar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
    margin-bottom: 14px;
}

    .bannerPacienteCita .bpac-av {
        width: 48px; height: 48px; flex: none;
        border-radius: 12px;
        background: linear-gradient(180deg, #4d80bd, #1c4c86);
        color: #fff; font-weight: 700; font-size: 17.5px;
        display: inline-flex; align-items: center; justify-content: center;
        overflow: hidden;
    }

        .bannerPacienteCita .bpac-av img { width: 100%; height: 100%; object-fit: cover; }

    .bannerPacienteCita .bpac-datos {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 22px;
        flex: 1 1 400px;
        font-size: 15px;
        color: var(--texto);
        text-align: left;
    }

        .bannerPacienteCita .bpac-datos > div { white-space: nowrap; }
        .bannerPacienteCita .bpac-datos b {
            display: block;
            font-size: 12.5px;
            color: var(--gris);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .2px;
        }
        .bannerPacienteCita .bpac-suave { color: var(--gris); }

    .bannerPacienteCita .bpac-alergias {
        flex: 1 1 100%;
        background: var(--peligro-bg);
        border: 1px solid #f3c1c1;
        color: #b42323;
        font-weight: 700;
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 14.5px;
        text-align: left;
    }

/* Los botones de IA que iban en rosa pasan a la familia azul con la chispa ✦. */
.backgroundRosa, .btn.backgroundRosa, #btnAsistenteIAIniciarGrabacion {
    background: linear-gradient(180deg, var(--btn-pri-1), var(--btn-pri-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 5px rgba(30, 78, 140, .3);
}
.backgroundRosa::before, #btnAsistenteIAIniciarGrabacion::before { content: "\2726"; color: var(--ia-chispa); font-size: 14.5px; margin-right: 2px; }
.backgroundRosa:hover, #btnAsistenteIAIniciarGrabacion:hover { filter: brightness(1.07); color: #fff !important; }

/* Los atajos de antecedentes/alergias/diagnosticos son chips, no botones azules pequeños. */
.btn.backgroundAzurClaro, .btn.btn-xs.backgroundAzurClaro {
    background: #fff !important;
    color: var(--btn-sec-texto) !important;
    border: 1px solid var(--btn-sec-borde) !important;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
}
.btn.backgroundAzurClaro:hover { background: var(--info-bg) !important; }

/* Tira de acciones de la ficha del paciente: los desplegables se abren hacia la izquierda y con el
   texto alineado a la izquierda (la tira va con text-right y se salian de la pantalla). */
.barraAccionesPaciente { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.barraAccionesPaciente .btn-group { float: none; }
.barraAccionesPaciente .dropdown-menu { right: 0 !important; left: auto !important; text-align: left; min-width: 200px; }
.barraAccionesPaciente .dropdown-menu > li > a { padding: 7px 14px; }
.barraAccionesPaciente .dropdown-menu > li > a .glyphicon { margin-right: 6px; color: var(--gris); }
.barraAccionesPaciente .dropdown-menu > li > a.opcionPeligro { color: var(--peligro); }
.barraAccionesPaciente .dropdown-menu > li > a.opcionPeligro .glyphicon { color: var(--peligro); }

/* ---------------------------------------------------------------------
   8. TARJETAS Y TITULOS DE SECCION (guia v2, para TODO el software)

   La hoja antigua pinta el titulo de panel con "#29457d !important" y un
   borde azul claro; la guia usa el azul de seccion y el borde gris de las
   tarjetas. Aqui se corrige de una vez para todas las pantallas, sin tocar
   ninguna vista.
   --------------------------------------------------------------------- */
.panel, .panel-primary {
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
    background: var(--card);
}

    /* La hoja antigua le mete un degradado a los paneles sin pie: la guia los quiere planos. */
    .panel-primary:not(:has(.panel-footer)) { background: var(--card); }

    .panel-primary > .panel-heading {
        background: var(--card) !important;
        border: 0;
        border-bottom: 1px solid var(--borde) !important;
        border-radius: 10px 10px 0 0;
        padding: 12px 16px 10px;
        min-height: 0;
        height: auto !important;
    }

    .panel-primary > .panel-heading,
    .panel-primary > .panel-heading h2,
    .panel-primary > .panel-heading h3,
    .panel-primary > .panel-heading h4,
    .panel-primary > .panel-heading > span,
    .panel-heading h2.color-FFF,
    .panel-heading h3.color-FFF {
        color: var(--seccion) !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        margin: 0;
        line-height: 1.3;
    }

        /* Los enlaces de la banda del titulo ("Ver mas estadisticas", "Ver agenda") van en azul de enlace. */
        .panel-primary > .panel-heading a,
        .panel-primary > .panel-heading a.color-FFF {
            color: var(--link) !important;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
        }

        .panel-primary > .panel-heading .glyphicon { color: var(--seccion); font-size: 14.5px; }
        .panel-primary > .panel-heading .close { color: var(--gris); opacity: .8; }

    .panel-footer {
        background: #fafbfe;
        border-top: 1px solid var(--borde);
        border-radius: 0 0 10px 10px;
    }

/* Base de las tablas de datos. Hasta el 12-09-2026 estas reglas solo pintaban la cabecera y daban
   por hecho que DataTables ponia el ancho y el relleno de las celdas. Cuando una tabla NO pasa por
   DataTables (una tabla pequena dentro de una ventana, o una tabla que todavia esta vacia) se
   quedaba sin ancho y sin separacion, y las columnas salian pegadas unas a otras: eso es lo que
   pasaba en la ventana de configurar cajas ("Nombre Sede Acciones" todo junto). */
.dri-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.dri-tabla > thead > tr > th,
.dri-tabla > tbody > tr > td {
    padding: 8px 12px;
    vertical-align: middle;
}

/* Cabeceras de tabla como en la guia. */
.dri-tabla thead th, table.dataTable thead th, #tblTareas.dataTable thead th {
    background: #f5f7fb !important;
    color: var(--gris) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--borde) !important;
}

.dri-tabla tbody td, table.dataTable tbody td { border-bottom: 1px solid #eef1f7; color: var(--texto); }
.dri-tabla tbody tr:hover td { background: #f8fafd; }

.sinDatosPanel { color: var(--gris); margin: 6px 0; }

/* ---------------------------------------------------------------------
   9. REJILLA DEL DASHBOARD (mockup C)
   --------------------------------------------------------------------- */
#div_Dashboard .rejillaDashboard {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

@media (max-width: 1100px) { #div_Dashboard .rejillaDashboard { grid-template-columns: 1fr; } }

#div_Dashboard .rejillaDashboard > .panel { margin-bottom: 0; }

/* P679 (Enrique, 30-09-2026): con muchas citas hoy, «Próximas citas de hoy» crecía sin fin y descolocaba el
   Dashboard. En dos columnas mide lo MISMO que «Consultas semanal» (la fila la marca la gráfica: el cuerpo
   de la tarjeta lleva «contain: size», así su contenido no empuja) y la lista se desplaza dentro, con la fila de títulos fija arriba.
   En una columna (tableta y móvil), como mucho 420 px de lista y el resto con la barra. */
#div_Dashboard .panelCitasHoy .tablaCitasHoy thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -2px 0 #dfe3ec; }
@media (min-width: 1101px) {
    #div_Dashboard .rejillaCitas { align-items: stretch; }
    #div_Dashboard .panelCitasHoy { display: flex; flex-direction: column; }
    #div_Dashboard .panelCitasHoy > .panel-body { flex: 1 1 auto; min-height: 180px; contain: size; display: flex; flex-direction: column; }
    #div_Dashboard .panelCitasHoy > .panel-body::before, #div_Dashboard .panelCitasHoy > .panel-body::after { display: none; }
    #div_Dashboard .panelCitasHoy .citasHoyScroll { flex: 1 1 0; min-height: 0; overflow: auto; }
}
@media (max-width: 1100px) {
    #div_Dashboard .panelCitasHoy .citasHoyScroll { max-height: 420px; overflow: auto; }
}
@media print {
    #div_Dashboard .panelCitasHoy > .panel-body { contain: none !important; }
    #div_Dashboard .panelCitasHoy .citasHoyScroll { max-height: none !important; overflow: visible !important; }
}
#div_Dashboard .columnaAvisos { display: flex; flex-direction: column; gap: 14px; }
#div_Dashboard .columnaAvisos .panel { margin-bottom: 0; }
#div_Dashboard .columnaAvisos .panel-body p { margin: 0; }

#div_Dashboard .banner-hoy .bannerBotones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
#div_Dashboard .banner-hoy .btn { font-size: 14px; padding: 6px 12px; }

/* ---------------------------------------------------------------------
   CABECERA DE LOS PANELES DEL DASHBOARD (12-09-2026)

   Los enlaces de la derecha ("Ver agenda", "Ver más estadísticas") y los
   botones de Tareas iban con `pull-right`, o sea flotando. Un elemento
   flotante se coloca DESPUÉS del título, que es un bloque de ancho
   completo, así que caía más abajo: se veía pegado a la línea inferior de
   la cabecera, y en Tareas los botones se montaban encima de la tabla y la
   partían.

   Con la cabecera en flex, el título y lo de la derecha van en la MISMA
   línea y centrados entre sí, pase lo que pase con el alto.
   --------------------------------------------------------------------- */
#div_Dashboard .panel-heading, #divCaja .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

    #div_Dashboard .panel-heading > h2, #divCaja .panel-heading > h2 {
        margin: 0;
        min-width: 0;
    }

    /* Ya no flota nada: lo coloca el flex. */
    #div_Dashboard .panel-heading > .pull-right, #divCaja .panel-heading > .pull-right {
        float: none;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

/* La tabla de tareas tiene muchas columnas y la columna derecha es estrecha: se desplaza a lo
   ancho dentro de su tarjeta en vez de salirse de la pantalla. */
#div_Dashboard #div_TareasTabla { overflow-x: auto; clear: both; }

#div_Dashboard .panel-heading .cabeceraTareas, #divCaja .panel-heading .cabeceraTareas { display: flex; gap: 6px; align-items: center; }
#div_Dashboard #txtTareasBusqueda { float: none; width: 150px; margin-right: 0; height: 28px; }

/* En pantallas estrechas la cabecera de Tareas se parte en dos líneas en vez de comprimirse. */
@media (max-width: 1400px) {
    #div_Dashboard .panel-heading > .pull-right.cabeceraTareas, #divCaja .panel-heading > .pull-right.cabeceraTareas { width: 100%; justify-content: flex-end; }
}

/* Avisos de DriCloud recortados: el texto se corta y "Leer mas" abre la ventana entera. */
.avisoRecortado { position: relative; }
    .avisoRecortado .avisoContenido { max-height: 108px; overflow: hidden; }
    .avisoRecortado.conMas .avisoContenido { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
    .avisoRecortado .verAvisoCompleto { display: none; margin-top: 6px; font-weight: 600; }
    .avisoRecortado .avisoContenido img { max-width: 100%; height: auto; }

/* La hoja antigua limitaba la caja de mensajes a 250 px con barra de scroll; ahora cada aviso se
   recorta por su cuenta y el enlace abre la ventana, asi que la caja crece con su contenido. */
#divMensajesDashboard { max-height: none !important; overflow: visible !important; padding-right: 0 !important; }

/* Rejilla: sin esto una columna se ensancha con el texto largo y se come a la otra. */
#div_Dashboard .rejillaDashboard > *, #div_Dashboard .columnaAvisos > * { min-width: 0; }

#divAvisoDriCloudCuerpo { max-height: 60vh; overflow: auto; text-align: left; }
    #divAvisoDriCloudCuerpo img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   10. HISTORIA CLINICA: bloques con titulo, constantes y barra de acciones
   --------------------------------------------------------------------- */
.bloqueHC {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
}

.tituloHC {
    font-size: 15.5px;
    color: var(--seccion);
    font-weight: 700;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tituloHC .btn-ghost { margin-left: auto; font-size: 14px; padding: 0 2px; }

/* Cabecera del bloque: el titulo a la izquierda y el boton de IA a la derecha, arriba
   del todo del campo (11-09-2026). */
.cabeceraHC {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .cabeceraHC .tituloHC { margin: 0; }

    /*  El botón de IA va PEGADO al título, no empujado al otro extremo de la línea (Enrique,
        17-09-2026: "¿puedes ponerlo a la izquierda, detrás del título del campo?"). */
    .cabeceraHC .btn-ia { margin-left: 0; }

/* Constantes: una tarjeta pequeña por constante, etiqueta arriba y valor grande. */
.constantesHC {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 9px;
}

@media (max-width: 1200px) { .constantesHC { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px)  { .constantesHC { grid-template-columns: repeat(3, 1fr); } }

.constantesHC .cte {
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 0;
}

    .constantesHC .cte b { display: block; margin: 0; }
    .constantesHC .cte label {
        font-size: 12.5px;
        color: var(--gris);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .3px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .constantesHC .cte input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 15.5px;
        font-weight: 700;
        color: var(--titulo);
        background: transparent;
        padding: 0;
        height: auto;
        box-shadow: none;
    }

    .constantesHC .cteCalculada { background: #f7f9fc; }
    .constantesHC .cteCalculada input { color: var(--gris); }

/* Barra de acciones fija abajo: Cancelar a la izquierda, un solo primario a la derecha. */
.barraAccionesHC {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--borde);
    padding: 10px 16px;
}

    .barraAccionesHC .espacioBarraHC { flex: 1; }
    .barraAccionesHC .btn { font-size: 14px; padding: 7px 14px; }

/* P397: la fila de Cancelar y los informes va al final de la pantalla y NO flota. */
/* P411: el pie de una tarjeta de una lista (cada visita del historial) nunca flota. */
.panel > .panel-footer.pieNoFlotante {
    position: static;
    bottom: auto;
    box-shadow: none;
}

.accionesHCFin {
    /* P397: pase lo que pase, esta barra NO flota (el marcado automatico de pies la cogia). */
    position: static;
    bottom: auto;
    box-shadow: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--borde);
    padding: 10px 16px;
}

    .accionesHCFin .espacioBarraHC { flex: 1; }
    .accionesHCFin .btn { font-size: 14px; padding: 7px 14px; }

/* En los bloques con titulo propio, el cuadro de texto es plano (sin la etiqueta flotante). */
.bloqueHC > div > textarea.form-control,
.bloqueHC > div > input.form-control,
.bloqueHC textarea.form-control {
    min-height: 74px;
    padding: 9px 12px;
}

/* Un bloque dentro de una columna de Bootstrap no debe llevar el padding de la columna. */
.form-group.col-sm-12.bloqueHC { padding-left: 16px; padding-right: 16px; }

/* El formulario configurable de la clinica tambien va en tarjeta. */
#div_Formulario .bs-callout {
    background: var(--card);
    border: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 12px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
}

    #div_Formulario .bs-callout > label {
        font-size: 15.5px;
        color: var(--seccion);
        font-weight: 700;
        margin-bottom: 10px;
        display: block;
    }

/* ---------------------------------------------------------------------
   11. MENU LATERAL DE LA FICHA DEL PACIENTE (mockup ficha-paciente.html)

   Item gris azulado, activo en pastel azul con la letra en negrita, sin la
   linea gris de la izquierda ni el gris "#f2f2f2" de la hoja antigua.
   --------------------------------------------------------------------- */
ul.nav-aside {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
    overflow: hidden;
}

    ul.nav-aside li a {
        color: #33466a !important;
        font-size: 15px !important;
        letter-spacing: 0 !important;
        font-weight: 500;
        border-radius: 8px !important;
        padding: 8px 10px;
    }

        ul.nav-aside li a [class^="flaticon-"], ul.nav-aside li a [class*=" flaticon-"],
        ul.nav-aside li a .glyphicon { color: var(--gris); }

        ul.nav-aside li a:hover { background: #f5f7fb !important; color: #33466a !important; }

    ul.nav-aside li.active a,
    ul.nav-aside li.active > a:hover,
    ul.nav-aside li.active span:not(.badge) {
        background: var(--info-bg) !important;
        color: var(--info) !important;
        font-weight: 700;
    }

        ul.nav-aside li.active a .glyphicon,
        ul.nav-aside li.active a [class^="flaticon-"] { color: var(--info) !important; }

    ul.nav-aside li.active, ul.nav-aside li:not(.list-heading):hover { border-left: 0 !important; }
    ul.nav-aside li:hover span:not(.badge) { background: transparent !important; }

/* P553 (Enrique, 27-09-2026): "Integraciones" del menú Sistemas destacada igual que la verde de
   Suscripción (a.menuVerde), pero con el degradado azul oscuro de los títulos (el de la cabecera de
   Integraciones) y letra e icono en blanco. Gana también al hover y al "activo" del menú. */
#divMenuLateral ul.nav-aside li a.menuAzul,
#divMenuLateral ul.nav-aside li:not(.active):hover a.menuAzul,
#divMenuLateral ul.nav-aside li.active a.menuAzul,
#divMenuLateral ul.nav-aside li.active > a.menuAzul:hover {
    background: linear-gradient(135deg, #1d3566 0%, #29457d 45%, #3b6fd1 100%) !important;
    border-color: #1d3566 !important;
    color: #fff !important;
    font-weight: 600 !important;
}
#divMenuLateral ul.nav-aside li:not(.active):hover a.menuAzul { filter: brightness(1.08); }
#divMenuLateral ul.nav-aside li.active a.menuAzul { font-weight: 700 !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
    #divMenuLateral ul.nav-aside li:not(.list-heading) a.menuAzul .glyphicon,
    #divMenuLateral ul.nav-aside li:not(.list-heading):hover a.menuAzul .glyphicon,
    #divMenuLateral ul.nav-aside li:not(.list-heading) a.menuAzul span:not(.badge) {
        color: #fff !important;
        background: transparent !important;
    }

/* =====================================================================
   12. EL RESTO DEL SOFTWARE (11-09-2026)

   Lo de arriba ya llega a todas las pantallas; aqui van las piezas que
   faltaban por mapear a la guia: botones sin familia, barra de titulo,
   avisos, etiquetas, modales, pestanas y los cuadros de filtros.
   ===================================================================== */

/* --- Botones que no tenian familia -----------------------------------
   .btn-forms es la clase de la v1 para los botones "de formulario" (Hoy,
   Imprimir, Exportar, Email...). No estaba mapeada y salia transparente:
   parecia texto suelto, no un boton (se veia en el dietario). Es un boton
   secundario de la guia. */
.btn-forms, .btn.btn-forms {
    background: #fff !important;
    color: var(--btn-sec-texto) !important;
    border: 1px solid var(--btn-sec-borde) !important;
    border-radius: 8px !important;
    box-shadow: none;
}

    .btn-forms:hover, .btn.btn-forms:hover { background: #f4f8fd !important; }

    .btn-forms .glyphicon { color: var(--btn-sec-texto); }

/* El grupo de botones pegados mantiene las esquinas de la guia. */
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* --- Barra de titulo de la pantalla ---------------------------------- */
.topBar {
    background: var(--card);
    border-bottom: 1px solid var(--borde);
    box-shadow: none;
    padding: 9px 0;
}

    .topBar h1 {
        font-size: 19px;
        font-weight: 700;
        color: var(--titulo);
        margin: 0;
        line-height: 32px;
    }

    .topBar h4 { font-size: 15.5px; color: var(--texto); }

/* --- Avisos ---------------------------------------------------------- */
.alert {
    border-radius: 10px;
    border-width: 1px;
    font-size: 15px;
    padding: 11px 14px;
}

.alert-info    { background: var(--info-bg) !important;    border-color: #cfe0f7 !important; color: var(--info) !important; }
.alert-success { background: var(--exito-bg) !important;   border-color: #bfe8d2 !important; color: #0e7a48 !important; }
.alert-warning { background: var(--aviso-bg) !important;   border-color: #f3dfa6 !important; color: var(--aviso) !important; }
.alert-danger  { background: var(--peligro-bg) !important; border-color: #f3c1c1 !important; color: #b42323 !important; }
/* El rosa de la v1 no esta en la guia: pasa a tarjeta neutra. */
.alert-pink    { background: var(--card) !important;       border-color: var(--borde) !important; color: var(--texto) !important; }

    .alert h4 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: inherit; }
    .alert a { color: inherit; font-weight: 600; text-decoration: underline; }

/* --- Etiquetas y contadores ------------------------------------------ */
.badge {
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--seccion);
}

/* Los contadores de aviso de los iconos del menu de arriba (citas pendientes,
   mensajes sin leer, stock bajo...) van en ROJO, como en la v1. La regla
   generica de .badge de aqui arriba los pintaba del azul de seccion y, sobre
   el azul de la cabecera, no se veian (Enrique, 16-09-2026). Se pone el rojo
   fuerte con borde blanco fino para que despegue del fondo. */
.badge.badge-top, .badge.badge-bottom, .badge.badge-top-right,
.homeMenu .badge, .navbar .badge-top, .navbar .badge-bottom {
    background: #e02020 !important;
    color: #fff !important;
    /* Sin halo blanco: el aro que se le puso para que despegara del azul se veia como una sombra
       blanca fea debajo del icono (Enrique, 13-09-2026). El rojo ya destaca de sobra. */
    box-shadow: none;
    /* Del tamano de los de la v1: la primera version quedo demasiado gorda y se comia el icono
       (Enrique, 16-09-2026). */
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    text-align: center;
}

/* La raya blanca bajo el logotipo se intentó arreglar estirando la fila de la cabecera con flex
   (16-09-2026). Aquello descolocó la cabecera entera: la caja del logotipo se montaba encima y el
   primer icono salía cortado (Enrique, 13-09-2026). Se quita: mejor una raya fina que una cabecera
   rota. Cuando se retome, hay que hacerlo sin tocar la rejilla de Bootstrap de esa fila. */


.label { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.label-success { background: var(--exito-bg); color: #0e7a48; }
.label-warning { background: var(--aviso-bg); color: var(--aviso); }
.label-danger  { background: var(--peligro-bg); color: #b42323; }
.label-info, .label-primary { background: var(--info-bg); color: var(--info); }
.label-default { background: var(--btn-neutro-bg); color: var(--btn-neutro-texto); }

/* --- Modales --------------------------------------------------------- */
.modal-content, .modal-dialog .panel { border-radius: 10px; }
.modal-header { border-bottom: 1px solid var(--borde); }
.modal-footer { border-top: 1px solid var(--borde); }
.modal-title { font-size: 16.5px; font-weight: 700; color: var(--seccion); }
.modal-dialog .panel-primary { box-shadow: 0 18px 48px rgba(20,33,61,.28); }
.modal .close { font-size: 23px; color: var(--gris); opacity: .7; text-shadow: none; }
.modal .close:hover { opacity: 1; }

/* --- Pestanas -------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--borde); }

    .nav-tabs > li > a {
        border: 1px solid transparent !important;
        border-radius: 999px !important;
        color: #33466a !important;
        font-size: 15px;
        font-weight: 600;
        padding: 7px 15px;
        margin-right: 6px;
    }

        .nav-tabs > li > a:hover { background: #f5f7fb !important; }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background: var(--card) !important;
        border-color: var(--seccion) !important;
        color: var(--seccion) !important;
        box-shadow: inset 0 0 0 1px var(--seccion);
    }

/* --- Cuadros de filtros de la izquierda ------------------------------- */
ul li.list-heading {
    background: transparent !important;
    margin-bottom: 0;
}

    ul li.list-heading h4 {
        color: var(--gris) !important;
        border-bottom: 1px solid var(--borde) !important;
        font-size: 13px !important;
        letter-spacing: .5px;
        padding: 10px 10px 8px !important;
    }

/* --- Bloques destacados de la v1 (bs-callout) ------------------------- */
.bs-callout {
    background: var(--card);
    border: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px 16px;
}

    .bs-callout h4 { font-size: 15.5px; color: var(--seccion); font-weight: 700; margin: 0 0 8px; }

.bs-callout-info { border-color: var(--borde); }

/* --- Tablas sueltas (las que no pasan por .dri-tabla) ----------------- */
.table > thead > tr > th {
    background: #f5f7fb;
    color: var(--gris);
    font-weight: 600;
    border-bottom: 1px solid var(--borde);
}

.table > tbody > tr > td { border-top: 1px solid #eef1f7; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--borde); }
.table-hover > tbody > tr:hover { background: #f8fafd; }

/* --- Complementos de campo (la lupa, el calendario...) ---------------- */
.input-group-addon {
    background: #f5f7fb;
    border: 1px solid var(--borde);
    color: var(--gris);
    border-radius: 8px;
}

/* --- Paginacion ------------------------------------------------------- */
.pagination > li > a, .pagination > li > span { color: var(--link); border-color: var(--borde); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--seccion);
    border-color: var(--seccion);
}

/* --- Titulos de bloque dentro de un panel ----------------------------
   El <h4> es el titulo de seccion de toda la v1 (Datos personales, Recetas
   electronicas...). Va en el azul de seccion de la guia, como los de la
   historia clinica. Los <h4> de avisos y modales conservan su color. */
.panel-body h4, .box-form h4, .boxForm h4 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--seccion);
    margin: 4px 0 10px;
}

    .panel-body .alert h4, .modal .modal-header h4 { color: inherit; }

/* La banda azul clara de la v1 para destacar una fila de campos: en la guia
   es un bloque neutro con borde, no un rectangulo de color. */
.FichaB {
    background: #f7f9fc !important;
    border: 1px solid var(--borde) !important;
    border-radius: 10px;
    padding: 10px 12px 2px !important;
    margin-bottom: 12px;
}

/* Selector de fichero: el control del navegador desentona con el resto. */
input[type="file"] {
    font-size: 14px;
    padding: 7px 10px;
    border: 1px dashed var(--borde);
    border-radius: 8px;
    background: #fafbfe;
    width: 100%;
}

/* --- Aviso de borrador recuperado y "Guardado a las ..." --------------
   Ver wwwroot/Scripts/borrador-dricloud.js: lo escrito se copia en la propia
   pestaña mientras no esta guardado, para que no se pierda si caduca la sesion. */
.aviso-borrador {
    background: var(--aviso-bg);
    border: 1px solid #f3dfa6;
    color: var(--aviso);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

    .aviso-borrador a { color: var(--aviso); text-decoration: underline; margin-left: 6px; }

.estadoGuardadoHC {
    font-size: 14px;
    color: var(--gris);
    margin-left: 10px;
    white-space: nowrap;
}

/* --- Foto del usuario (Sistemas > Usuarios y Mi perfil) ---------------
   En la ficha de usuario la foto va en un .imgProfile SIN el .fotoProfile de
   alrededor, y las hojas antiguas solo limitan el tamano cuando estan los dos:
   por eso una foto grande se salia de su columna (11-09-2026). Aqui se limita
   siempre, y el hueco se queda redondeado como en el resto del programa. */
.imgProfile {
    max-width: 100%;
    overflow: hidden;
}

    .imgProfile img {
        max-width: 100%;
        max-height: 150px;
        height: auto;
        border-radius: 12px;
    }

/* --- Ventana de turno (agenda y turnos) ------------------------------
   La ventana de turno se abre desde las dos pantallas, asi que sus estilos
   viven aqui y no dentro de una sola vista (11-09-2026). Hora y minuto van
   en dos desplegables, uno al lado del otro, dentro del ancho de su columna. */
.turno-hora {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .turno-hora select {
        flex: 1 1 0;
        min-width: 0;
    }

.turno-hora-sep {
    font-weight: 600;
    color: var(--gris);
}

/* Etiqueta ENCIMA del campo, no flotante: la flotante se pintaba sobre los
   desplegables de hora y no dejaba desplegarlos (Enrique, 16-09-2026). */
.turno-campo-hora { margin-bottom: 14px; }

.turno-etiqueta {
    display: block;
    font-weight: 600;
    color: var(--gris);
    margin-bottom: 4px;
}

/* Los campos de la ventana de turno heredan de la hoja de 2021 un
   `padding: 1.9rem 1rem 0 !important`, que está pensado para los campos con
   etiqueta flotante (deja hueco arriba para la etiqueta). En esta ventana la
   mayoría de campos llevan la etiqueta ENCIMA, no flotante, así que ese hueco
   sobraba: el texto se pegaba abajo ("Consulta Estándar" descentrado) y, en
   los desplegables de hora, se comía tanto ancho que la caja de los minutos se
   quedaba sin sitio y su "00" se salía encima de la columna de al lado
   (Enrique, 14-09-2026). Aquí se les devuelve un relleno normal.
   Los que SÍ llevan etiqueta flotante (.floating-label-group) se quedan como
   están, que ahí el hueco de arriba hace falta. */
#formTurno .form-textbox-input:not(.floating-label-group .form-textbox-input) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
}

#formTurno select.form-textbox-input:not(.floating-label-group select.form-textbox-input) {
    padding-right: 30px !important;
}

/* EL MISMO CASO EN LA VENTANA DE TAREA (Enrique, 22-09-2026: "vigila que los
   textos de dentro de los campos aparezcan bien centrados en el medio, no asi
   en la parte de abajo"). Es exactamente el mismo `padding: 1.9rem 1rem 0` de
   la hoja de 2021: pensado para etiqueta flotante, y aqui las etiquetas van
   ENCIMA del campo, asi que el hueco de arriba empuja el texto contra el
   suelo de la caja. Se corrige igual que en la ventana de turno.

   Se hace por ventana y no de golpe para toda la aplicacion a proposito: hay
   pantallas que SI usan la etiqueta flotante y ahi ese hueco hace falta.
   Cuando esten todas repasadas se puede dar la vuelta a la regla (que el
   relleno normal sea el de serie y el hueco lo pida .floating-label-group). */
#formularioAddTarea .form-textbox-input:not(.floating-label-group .form-textbox-input) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
}

#formularioAddTarea select.form-textbox-input:not(.floating-label-group select.form-textbox-input) {
    padding-right: 30px !important;
}

/* Hora y minuto: cada caja con un ancho mínimo propio, y si no caben en su
   columna se bajan a la línea siguiente en vez de pisarse. */
.turno-hora { flex-wrap: wrap; }

    .turno-hora select {
        flex: 1 1 70px;
        min-width: 70px;
    }

/* --- Aseguradoras del turno: fichas con buscador, como en la v1 ------- */
.turno-fichas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 5px 8px;
}

/* Con etiqueta flotante encima, la caja de fichas necesita hueco arriba: si no,
   el "Aceptar aseguradoras + privados" se montaba sobre el "Buscar" y sobre las
   aseguradoras que se iban escribiendo (Enrique, 14-09-2026). */
.floating-label-group .turno-fichas {
    padding-top: 26px;
    min-height: 58px;
}

.turno-fichas {
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    cursor: text;
}

.turno-ficha {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--btn-neutro-bg);
    border: 1px solid var(--btn-neutro-borde);
    color: var(--btn-neutro-texto);
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    font-size: 13px;
    font-weight: 600;
}

.turno-ficha-x {
    border: 0;
    background: transparent;
    color: var(--gris);
    font-size: 16px;
    line-height: 1;
    padding: 0 5px;
    cursor: pointer;
}

    .turno-ficha-x:hover { color: var(--peligro); }

.turno-fichas-buscar {
    flex: 1 1 120px;
    min-width: 120px;
    border: 0;
    outline: 0;
    padding: 4px 2px;
    font-size: 14px;
    background: transparent;
}

.turno-fichas-lista {
    position: relative;
    z-index: 5;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(20,33,61,.14);
}

.turno-fichas-opcion {
    padding: 7px 11px;
    cursor: pointer;
    font-size: 14px;
}

    .turno-fichas-opcion:hover { background: var(--info-bg); }

/* --- Color por tipo de agenda ----------------------------------------
   Consulta azul, quirofano naranja, pruebas verde (11-09-2026). Lo pinta
   wwwroot/Scripts/dricloud-comun.js sobre el desplegable de tipo de agenda. */
#ddlTipos.agendaTipo-consulta {
    border-left: 5px solid #3a87ad;
    background: #eef5fb;
}

#ddlTipos.agendaTipo-quirofano {
    border-left: 5px solid #d98330;
    background: #fdf3e8;
}

#ddlTipos.agendaTipo-pruebas {
    border-left: 5px solid #3f9160;
    background: #edf7f1;
}

/* --- Tirador para alargar una cita o un turno -------------------------
   FullCalendar deja el tirador de abajo transparente y habia que adivinar
   donde estaba (11-09-2026). Ahora se ve una rayita centrada, como el "="
   que pedia Enrique, y se marca al pasar por encima. */
.fc-timegrid-event .fc-event-resizer-end,
.fc-timegrid-event .fc-event-resizer-start {
    height: 8px;
    cursor: ns-resize;
}

.fc-timegrid-event .fc-event-resizer-end::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 22px;
    margin-left: -11px;
    height: 0;
    border-top: 2px solid rgba(20, 33, 61, .45);
    border-bottom: 2px solid rgba(20, 33, 61, .45);
    padding-top: 2px;
    border-radius: 2px;
}

.fc-timegrid-event:hover .fc-event-resizer-end::after {
    border-top-color: rgba(20, 33, 61, .85);
    border-bottom-color: rgba(20, 33, 61, .85);
}

/* --- Tarjetas de la ficha del paciente --------------------------------
   Guia v2 (mockup ficha-paciente.html): cada tarjeta lleva su titulo a la
   izquierda y su enlace o boton a la derecha, en la misma linea de la
   cabecera azul (11-09-2026). */
.cabeceraTarjetaPac {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .cabeceraTarjetaPac > h2 { margin: 0; flex: 1 1 auto; }

.cabeceraTarjetaPacAcciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

    /* El desplegable del año, pequeño y a juego con la cabecera. */
    .cabeceraTarjetaPacAcciones select.form-control {
        width: auto;
        min-width: 92px;
        height: 28px;
        padding: 2px 8px;
        font-size: 14px;
    }

    /* El enlace "Historial clínico →" va sobre el azul de la cabecera. */
    .cabeceraTarjetaPacAcciones .btn-ghost.color-FFF {
        color: #fff;
        opacity: .9;
        text-decoration: none;
    }

        .cabeceraTarjetaPacAcciones .btn-ghost.color-FFF:hover { opacity: 1; text-decoration: underline; }

/* Las notas del paciente: caja pequeña que se puede estirar, no un cuadro enorme. */
.notasPaciente {
    min-height: 76px;
    resize: vertical;
}

/* --- Casilla alineada con el campo de al lado -------------------------
   Una casilla suelta al lado de un campo con etiqueta flotante se queda
   pegada arriba y no alinea con el (11-09-2026). Esto la baja a la altura
   de la linea del campo. */
.casillaAlineada {
    display: flex;
    align-items: center;
    min-height: 46px;
}

    .casillaAlineada label {
        font-weight: normal;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .casillaAlineada input[type="checkbox"] { margin: 0; }

/* --- Iconos de adjuntos y visor de documentos -------------------------
   Los usan el dietario (informes / fotos / facturas de cada cita) y las
   visitas de la ficha del paciente (11-09-2026). Encendido = hay algo que
   ver y se puede pulsar; apagado = no hay nada y no se pulsa. */
/* Los iconos de informes, fotografias y facturas: ENCENDIDO cuando hay algo que ver (azul, se
   pulsa y abre el visor) y APAGADO cuando no hay nada (gris claro, no se puede pulsar).
   Antes los dos se podian pulsar y los dos llevaban a otra pantalla (11-09-2026). */
.noHasDocuments { color: #c3c9d6; cursor: default; }
.sinDocumentos { pointer-events: none; }

.hasDocuments {
    color: #2f6fb5;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(47,111,181,.25);
}

    .hasDocuments:hover { color: #14213d; }

/* ---- Visor de documentos de la cita (ventana que abren esos iconos) ---- */
.visorCita { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }

.visorCitaLista {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 0 0 240px;
    max-height: 460px;
    overflow: auto;
}

    .visorCitaLista li {
        padding: 6px 8px;
        border-bottom: 1px solid #edf0f6;
        font-size: 14px;
    }

    .visorCitaLista small { display: block; color: #8f9bb5; }

.visorCitaEnlace.activo { font-weight: 700; }
.visorCitaDescargar { float: right; }

.visorCitaMarco {
    flex: 1 1 380px;
    min-height: 460px;
    border: 1px solid #e2e7f1;
    border-radius: 8px;
    background: #f7f8fb;
    overflow: auto;
}

    .visorCitaMarco iframe { width: 100%; height: 460px; border: 0; }
    .visorCitaMarco img { max-width: 100%; display: block; margin: 0 auto; }

@media (max-width: 767px) {
    .visorCitaLista { flex: 1 1 100%; max-height: 180px; }
}
/* ------------------------------------------------------------------
   MOVIL Y TABLETA: el dietario (11-09-2026, A26 del PDF de arreglos;
   rehecho el 19-09-2026, P252).

   A26 escondia en el movil las columnas de aseguradora, telefono,
   contactar, informes, fotografias, facturas (y tipo de visita por
   debajo de 600 px) para que no hubiera barra de desplazamiento. Con
   los porcentajes fijos de la tabla el nombre del paciente acababa en
   una columna de 60 px partido letra a letra. Desde P252 el dietario
   hace lo mismo que todas las tablas: se ven las columnas marcadas en
   el selector de columnas y es la caja de la tabla la que se desplaza
   (ver el bloque P252 al final de esta hoja).
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .dietario-select-soc, .dietario-select-estado, .dietario-acciones { max-width: 100%; }

    /* El resumen del dia y las cabeceras, sin salirse tampoco. */
    .dietario-resumen { font-size: 13.5px; }
    .dietario-cabecera { font-size: 15.5px; }
}

/* Referido del paciente (11-09-2026, P14): el "+" que abre el alta de un doctor o de una clinica
   nueva dentro del propio desplegable, y el bloque que se despliega debajo. */
.dri-mas { cursor: pointer; }
.dri-mas:hover { background: #eef2f7; }
.dri-bloque-nuevo { margin-top: 4px; }

/* Barra de acciones en bloque de las tablas de visitas (11-09-2026, P18): aparece cuando hay
   filas marcadas, pegada encima de las tablas. */
.barraSeleccion {
    display: flex; align-items: center; gap: 10px;
    background: #eef4fb; border: 1px solid #c9dcf2; border-radius: 6px;
    padding: 7px 12px; margin-bottom: 10px;
}
.barraSeleccionTexto { font-weight: 600; color: #1f4e79; }
td.col-selec, th.col-selec { width: 30px; }

/* ------------------------------------------------------------------ Mensajes a usuarios (11-09-2026, M10)
   Estas clases se usaban en la vista pero no tenian NINGUNA regla de estilo, asi que la lista de
   conversaciones y el hilo se apilaban a todo lo ancho, sin separacion ni columnas. Dos columnas:
   la lista a la izquierda con ancho fijo y el hilo ocupando el resto. */
.com-conver {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.com-conver-lista {
    flex: 0 0 320px;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
}
.com-conver-hilo {
    flex: 1 1 auto;
    min-width: 0;            /* sin esto un mensaje largo estira la caja y descuadra la pantalla */
    max-height: 60vh;
    overflow-y: auto;
    border-left: 1px solid #e3e8f0;
    padding-left: 16px;
}
.com-conver-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
}
.com-conver-item:hover { background: #f4f7fb; }
.com-conver-item.activa { background: #eef4fb; border-color: #c9dcf2; }
.com-conver-fecha { float: right; color: #7b8798; font-size: 12.5px; }
.com-ayuda { color: #7b8798; }

/* En pantallas estrechas no caben dos columnas: la lista arriba y el hilo debajo. */
@media (max-width: 991px) {
    .com-conver { display: block; }
    .com-conver-lista { max-width: none; max-height: 240px; }
    .com-conver-hilo { border-left: 0; padding-left: 0; border-top: 1px solid #e3e8f0; padding-top: 12px; }
}

/* Dibujo del odontograma (11-09-2026, P22). Va aqui y no en la vista porque el parcial que lo pinta
   se carga tambien desde la cita, donde el <style> de la pantalla del paciente no existe.
   Un <object> con height:auto se queda en 0 de alto en muchos navegadores y el dibujo no se ve
   aunque el fichero cargue bien: se le da la proporcion real del SVG (1914 x 1221). */
#objEstadio {
    width: 100%;
    aspect-ratio: 1914 / 1221;
    min-height: 320px;
    height: auto;
}

/* Filtrado en cascada del stock (11-09-2026, S3): las opciones que ya no llevan a ningun articulo
   se dejan apagadas en vez de quitarlas, para que no desaparezcan de golpe delante del usuario. */
option.stk-sin-datos { color: #a9b2c1; }

/* ------------------------------------------------------------------ Interruptor (11-09-2026, Y8)
   Interruptor de encendido/apagado para los servicios contratados. Es una casilla de verificacion de
   verdad por debajo (se envia y se lee igual, y el teclado y los lectores de pantalla la entienden),
   solo que pintada como palanca. */
.dri-interruptor-fila { padding: 10px 0; border-bottom: 1px solid #eef1f6; }
.dri-interruptor-fila:last-child { border-bottom: 0; }

.dri-interruptor { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 600; }
.dri-interruptor input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.dri-interruptor-palanca {
    flex: 0 0 auto;
    width: 42px; height: 24px;
    background: #c9cfda;
    border-radius: 12px;
    position: relative;
    transition: background .15s ease-in-out;
}
.dri-interruptor-palanca::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .15s ease-in-out;
}
.dri-interruptor input:checked + .dri-interruptor-palanca { background: #2e7d32; }
.dri-interruptor input:checked + .dri-interruptor-palanca::after { transform: translateX(18px); }
/* El foco del teclado tiene que verse: si no, quien navegue con tabulador no sabe donde esta. */
.dri-interruptor input:focus-visible + .dri-interruptor-palanca { outline: 2px solid #1f4e79; outline-offset: 2px; }

.dri-interruptor-ayuda { margin: 4px 0 0 52px; color: #7b8798; font-size: 13.5px; }

/* ==========================================================================
   Barra superior del Dietario (16-09-2026)
   Todo en una línea: a la izquierda clínica, tipo de agenda, vista y "Nueva cita";
   a la derecha fecha, buscador, "Hoy" y los botones. Parte en dos líneas solo
   cuando de verdad no cabe, y entonces la parte derecha se queda alineada a la
   derecha en vez de descolgarse a media altura.
   ========================================================================== */
.dietario-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    width: 100%;
}

.dietario-barra-izq,
.dietario-barra-der {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dietario-barra-der {
    margin-left: auto;
    justify-content: flex-end;
}

    /* Dentro de la barra mandan el flex y el gap, no los márgenes sueltos de cada botón. */
    .dietario-barra .btn-group,
    .dietario-barra .form-control,
    .dietario-barra .btn { margin-left: 0; margin-right: 0; float: none; }

    .dietario-barra .calBx { display: flex; align-items: center; gap: 4px; }

/* ==========================================================================
   Tablero por estados del dietario (11-09-2026, P11)
   Una columna por estado de cita, con las citas del dia como tarjetas dentro.
   Los colores de cabecera son los mismos de siempre (est-op-N), para que quien
   conoce la agenda reconozca la columna de un vistazo.
   ========================================================================== */
.tableroEstados {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.tableroColumna {
    flex: 1 1 0;
    min-width: 200px;
    background: #f5f6f8;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

/* OJO: la cabecera NO puede llevar las clases Leyenda* de la agenda. Esas clases son el PUNTITO de
   color de la leyenda: miden 14x14 px y son redondas, así que al ponérselas a la cabecera la
   convertían en un cuadradito de 14 px con el título desbordado por fuera y el contador descolocado
   (Enrique, 16-09-2026). Aquí van clases propias, con los colores de siempre de cada estado. */
.tableroCabecera {
    padding: 9px 12px;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    background: #e7e9ee;
    color: #1f2937;
}

.tableroTitulo {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    /* Dos líneas como mucho, y si no cabe se corta con puntos suspensivos: "No asistencia" partido
       en dos líneas sin sitio era lo que se veía cortado. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El contador: círculo de tamaño fijo y el número centrado de verdad (antes heredaba el alto de la
   línea del título y se iba hacia arriba). */
.tableroCabecera .tableroContador {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(0, 0, 0, .18);
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
}

/* Los colores de siempre de cada estado, en pastel y con el texto oscuro, como manda la guía. */
.tablero-est-1 { background: #cbf8cc; }
.tablero-est-3 { background: #fffece; }
.tablero-est-4 { background: #faaead; }
.tablero-est-5 { background: #cfe3f2; }
.tablero-est-6 { background: #dcdcdc; }

.tableroCuerpo {
    padding: 8px;
    min-height: 120px;
    max-height: 65vh;
    overflow-y: auto;
}

.tableroCuerpo.tableroSobre { background: #e8f1fb; box-shadow: inset 0 0 0 2px #7aa9d6; }

.tableroTarjeta {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    padding: 7px 9px;
    margin-bottom: 7px;
    font-size: 14.5px;
    cursor: grab;
}

.tableroTarjeta:active { cursor: grabbing; }
.tableroTarjeta.tableroArrastrando { opacity: .5; }
.tableroTarjeta[draggable="false"] { cursor: default; }

.tableroHora { font-weight: 700; color: #1f2937; }
/* P396: el tiempo que lleva el paciente esperando o en consulta, al lado de la hora de la cita. */
.tableroContadorEstado { font-weight: 600; color: #6b7280; margin-left: 4px; }
.tableroPaciente { margin: 2px 0; }
/* El nombre salia casi blanco sobre blanco: en una tarjeta pequeña es lo unico que se lee de lejos. */
.tableroPaciente a { color: #29457d; font-weight: 600; }
.tableroPaciente a:hover { color: #1b2f57; text-decoration: underline; }
.tableroTipo, .tableroTelefono, .tableroDoctor { color: #6b7280; font-size: 13.5px; }
/* El profesional al que esta citado el paciente: va entre el tipo de cita y el telefono y se
   distingue un poco, que es lo que se busca de un vistazo cuando hay varios medicos. */
.tableroDoctor { font-weight: 600; color: #475569; }
/* P598: en quirófano, el diagnóstico debajo de la técnica, un punto más pequeño. */
.tableroDiagnostico { font-size: 12.5px; }
.tableroVacia { text-align: center; color: #9aa1ab; margin: 10px 0 0; }

@media (max-width: 768px) {
    .tableroColumna { min-width: 78vw; }
}

/* ==========================================================================
   Fila de totales del día (A27). Estaba solo en el dietario, escrita dentro
   de su propia pantalla; se sube aquí porque ahora la usan también la agenda
   y el planning, y así las tres se ven exactamente igual.
   ========================================================================== */
.dietario-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e7f1;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    font-size: 14.5px;
    color: #5b6b8c;
}

.dietario-resumen b { color: #29457d; font-size: 17.5px; margin-right: 4px; }

/* ==========================================================================
   CAJA (12-09-2026, punto U2)
   Cabecera con el saldo grande, listado de movimientos y cierre en dos
   columnas. La disposición sale del estudio de docs/CAJA.md: es la que
   repiten Gesden, Clinic Cloud, Dentalink y los TPV.
   ========================================================================== */
.cajaCabecera {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(20, 33, 61, .05);
}

.cajaSelector { display: flex; align-items: center; gap: 6px; }
.cajaSelector select { width: auto; min-width: 170px; }

.cajaEstado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
}

.cajaPunto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.cajaAbierta { background: #e7f7ed; color: #16873c; }
.cajaAbierta .cajaPunto { background: #16873c; }

.cajaCerrada { background: #f0f1f4; color: #5b6b8c; }
.cajaCerrada .cajaPunto { background: #9aa1ab; }

/* El saldo es lo primero que se mira al entrar: va grande. */
.cajaSaldo .lbl { font-size: 14px; color: var(--gris); font-weight: 600; }
.cajaSaldo .val { font-size: 27px; font-weight: 800; color: var(--titulo); letter-spacing: -.5px; line-height: 1.1; }

/* Lo que no es efectivo va al lado, pequeño: es informativo, no se arquea. */
.cajaOtrosPagos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--gris); }
.cajaOtrosPagos b { color: var(--titulo); }

.cajaAcciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Etiquetas de tipo de movimiento --- */
.etiqIngreso, .etiqGasto, .etiqTraspaso, .etiqAjuste {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.etiqIngreso  { background: #e7f7ed; color: #16873c; }
.etiqGasto    { background: #fdecec; color: #c02626; }
.etiqTraspaso { background: #eaf0fb; color: #29457d; }
.etiqAjuste   { background: #fdf6e3; color: #8a6400; }

.importeNegativo { color: #c02626; }

/* Un movimiento anulado no se esconde: se tacha. En una caja, lo que pasó tiene que verse. */
#tblMovimientosCaja tbody tr.movAnulado td { text-decoration: line-through; color: #9aa1ab; }
#tblMovimientosCaja tbody tr.movEsAnulacion td { background: #fffaf4; }

/* --- Cierre --- */
.cierreTeorico, .cierreDescuadre {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--borde);
    padding-top: 8px;
    margin-top: 8px;
    font-size: 15.5px;
}

/* La cifra y su simbolo de moneda van JUNTOS, en un solo trozo. Antes el simbolo estaba suelto
   detras del <b> y, como en una caja flexible cada trozo de texto suelto cuenta como un elemento
   mas, `space-between` repartia TRES elementos a lo ancho: la etiqueta a la izquierda, la cifra
   en el centro y el simbolo al final. Eso es lo que se veia como "los numeros salen fuera de su
   columna" (12-09-2026). */
.cierreTeorico .cifra, .cierreDescuadre .cifra { white-space: nowrap; }
.cierreTeorico b, .cierreDescuadre b { font-size: 21px; font-weight: 800; color: var(--titulo); }
.cierreDescuadre.descuadreMal b { color: #c02626; }

/* --- Pantalla vacia: la primera vez que alguien entra en Caja ---------------
   Una pantalla en blanco con un desplegable vacio no explica nada y no invita a usarla. En su
   lugar se explica en tres pasos para que sirve, con un ejemplo de como se vera, y un solo boton. */
.cajaBienvenida {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 28px 26px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(20, 33, 61, .05);
    text-align: center;
}

.cajaBienvenida h3 { margin: 0 0 6px; font-size: 23px; font-weight: 800; color: var(--titulo); }
.cajaBienvenida .subtitulo { color: var(--gris); font-size: 16px; margin-bottom: 22px; }

.cajaPasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
    text-align: left;
}

.cajaPaso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f8fafd;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px;
}

.cajaPaso .pasoIcono {
    width: 38px; height: 38px; flex: none;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17.5px;
    background: linear-gradient(180deg, #4d80bd, #1c4c86);
}

    .cajaPaso .pasoIcono > .glyphicon {
        top: 0; width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center; line-height: 1;
    }

.cajaPaso .pasoTitulo { font-weight: 700; color: var(--titulo); margin-bottom: 2px; }
.cajaPaso .pasoTexto { font-size: 14px; color: var(--gris); line-height: 1.45; }

/* El ejemplo se ve, pero se ve que es un ejemplo: apagado y sin poder tocarlo. */
.cajaEjemplo { position: relative; opacity: .55; pointer-events: none; user-select: none; }
.cajaEjemplo .etiquetaEjemplo {
    position: absolute; top: 8px; right: 12px;
    background: #fdf6e3; color: #8a6400;
    font-size: 13px; font-weight: 700;
    padding: 2px 10px; border-radius: 20px;
}

/* Los botones de exportar y el texto de "mostrando N de N" salian pegados a la linea de la
   cabecera del panel, y encima el panel no tiene relleno (padding:0) porque la tabla va a ras.
   Se les da su propio aire aqui, sin tocar el de la tabla. */
#divCaja .panel-body > .dt-container > .dt-layout-row:first-child,
#divCaja .panel-body > .dataTables_wrapper > .row:first-child {
    padding: 10px 14px 4px;
}

/* --- Alta rapida de movimiento, dentro de la pantalla ----------------------
   Antes cada apunte abria una ventana. Al abrirse la ventana se pierde de vista el listado y el
   saldo, que es justo lo que hace falta mirar al apuntar algo. Ahora la fila de alta vive encima
   del listado y no tapa nada. */
.cajaAltaRapida {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #f8fafd;
    border-bottom: 1px solid var(--borde);
}

.cajaAltaRapida .campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cajaAltaRapida .campo > label { margin: 0; font-size: 13px; font-weight: 600; color: var(--gris); }
.cajaAltaRapida .campoConcepto { flex: 1 1 260px; }
.cajaAltaRapida .campoImporte { width: 130px; }
.cajaAltaRapida .campoTipo { width: 150px; }
.cajaAltaRapida .campoForma { width: 175px; }
.cajaAltaRapida .btn { height: 34px; }

/* --- P605: «¿Cómo funciona la caja?» ---------------------------------------
   Plegable, con el mismo aspecto de tarjeta que la cabecera. Abierta mientras la caja está cerrada o
   vacía; el resto del tiempo solo se ve la línea del título. */
.cajaAyuda {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(20, 33, 61, .05);
}
.cajaAyuda > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--titulo);
    font-size: 15px;
}
.cajaAyuda > summary .glyphicon { color: #4d80bd; margin-right: 4px; }
.cajaAyuda ol { margin: 10px 0 2px; padding-left: 22px; }
.cajaAyuda li { font-size: 14px; color: var(--gris); line-height: 1.5; margin-bottom: 4px; }

@media (max-width: 768px) {
    .cajaAltaRapida .campo, .cajaAltaRapida .btn { width: 100%; }
}

.cierreRecuento { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 10px; }

.recuentoRejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.recuentoFila { display: flex; align-items: center; gap: 6px; }
.recuentoFila label { margin: 0; font-size: 14px; width: 46px; text-align: right; color: var(--gris); }
.recuentoFila input { height: 28px; padding: 2px 6px; }

@media (max-width: 768px) {
    .cajaAcciones { margin-left: 0; width: 100%; }
    .cajaCabecera { gap: 12px; }
}

/* ==========================================================================
   RECALLS (12-09-2026, punto K4): el buscador de paciente del alta.
   ========================================================================== */
.listaResultadosRecall {
    position: absolute;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20, 33, 61, .12);
    max-height: 240px;
    overflow-y: auto;
    width: calc(100% - 30px);
    margin-top: 2px;
}

.listaResultadosRecall:empty { display: none; }

.resultadoRecall {
    padding: 7px 11px;
    font-size: 14.5px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f7;
}

.resultadoRecall:last-child { border-bottom: none; }
.resultadoRecall:hover { background: #eaf0fb; }

.resultadoRecallVacio { padding: 7px 11px; font-size: 14.5px; color: var(--gris); }

/* ==========================================================================
   HISTORIA CLÍNICA — arreglos del 13-09-2026
   ========================================================================== */

/* --- "Ver la visita completa" en el historial previo ----------------------
   El texto del botón cambia solo, mirando la clase del dibujo que lleva dentro. Se hace aquí y no
   en JavaScript porque la función que abre y cierra la visita (CollapseContent) está repetida en
   cuatro pantallas y no conviene tocarlas todas para un texto. */
.btnVerVisita .txtOcultar { display: none; }
.btnVerVisita .glyphicon-collapse-up ~ .txtVer { display: none; }
.btnVerVisita .glyphicon-collapse-up ~ .txtOcultar { display: inline; }

/* --- Grupos de medicación: una sola línea --------------------------------
   El nombre se queda con el ancho que sobra y se recorta con puntos suspensivos; el lápiz y la
   papelera son dos cuadraditos estrechos que nunca bajan al renglón siguiente. */
.grupoMedicacion {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.grupoMedicacion .gmTitulo {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.grupoMedicacion .gmIcono {
    flex: 0 0 auto;
    width: 34px;
    padding-left: 0;
    padding-right: 0;
    margin-left: -1px;
    border-radius: 0;
}

    .grupoMedicacion .gmIcono:last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

/* El único botón de "Añadir grupo" no lleva nada al lado: redondea por los dos lados. */
.grupoMedicacion .gmAnadir {
    border-radius: 8px;
    text-align: center;
    color: var(--gris);
    border-style: dashed;
}

/* --- Botones del historial previo, en su propia fila --------------------- */
#divBotonesHistorialPaciente.buttonHist {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 0;
}

/* --- Aviso de borrador recuperado ----------------------------------------
   Lo importante es quedarse con lo escrito, así que el botón verde manda y "Descartar" queda
   como un enlace discreto al lado. */
.aviso-borrador {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .aviso-borrador .enlaceDescartar { margin-left: 0; font-weight: 600; }

/* ==========================================================================
   PORTAL DEL PACIENTE — el recuadro de acceso en la ficha (13-09-2026)
   ========================================================================== */
.portalAcceso { font-size: 14.5px; }

.portalEstado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.portalPunto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.portalSi { background: #16873c; }
.portalNunca { background: #9aa1ab; }
.portalTexto { font-weight: 600; color: var(--titulo); }
.portalSecundario { color: var(--gris); margin-left: auto; }

.portalBotones { display: flex; gap: 8px; flex-wrap: wrap; }

/* El código se dicta por teléfono: grande, monoespaciado y muy separado, para no confundir
   caracteres al leerlo en voz alta. */
.portalCodigoCaja {
    margin-top: 12px;
    background: #f8fafd;
    border: 1px dashed var(--borde);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.portalCodigo {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--titulo);
}

/* --- La chuleta del mostrador: las cuatro formas de entrar (13-09-2026) ---
   Va plegada, para no estorbar los días en que nadie pregunta, y se abre de un clic el día que
   alguien llama diciendo que no puede entrar. */
.portalAyudaBloque { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.portalAyudaAbrir { font-size: 14px; font-weight: 600; }

.portalComoEntra { margin-top: 10px; font-size: 14px; color: var(--gris); }
.portalComoEntra ol { padding-left: 20px; margin: 0; }
.portalComoEntra li { margin-bottom: 9px; }
.portalComoEntra li b { color: var(--titulo); }
.portalComoEntra li div { line-height: 1.45; }

.portalAvisoClave {
    background: #f5f7fb;
    border-radius: 8px;
    padding: 8px 11px;
    margin: 10px 0 0;
    color: #29457d;
    font-weight: 600;
}

/* La dirección del portal, en Sistemas: se lee y se dicta, así que grande y sin adornos. */
#divPortalPaciente .portalDireccion {
    font-size: 19.5px;
    color: var(--titulo);
    background: #f5f7fb;
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 10px 14px;
    margin: 0;
    word-break: break-all;
}

    #divPortalPaciente .portalDireccion b { color: #16873c; }

/* ==========================================================================
   MARKETING → Aspecto de la cita online (13-09-2026)
   Mandos a la izquierda, la pantalla de verdad a la derecha dentro de un móvil de mentira.
   ========================================================================== */
.aspectoCita { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.aspectoMandos { flex: 1 1 420px; min-width: 0; }
.aspectoVista { flex: 0 0 360px; position: sticky; top: 14px; }
/* Con aspecto de pagina web la vista previa necesita todo el ancho: pasa a ocupar la fila entera. */
.aspectoVista:has(.aspectoWeb) { flex: 1 1 100%; position: static; }

#divAspectoCita .colorCampo { height: 40px; padding: 3px; cursor: pointer; }

/* El móvil de mentira: se ve enseguida que lo que hay dentro es lo que verá el paciente. */
.aspectoMovil {
    padding: 16px;
    display: flex;
    justify-content: center;
}

    .aspectoMovil iframe {
        width: 320px;
        height: 620px;
        border: 8px solid #14213d;
        border-radius: 26px;
        background: #fff;
    }

/* La otra vista previa: una ventana de navegador, para cuando la clinica elige aspecto de pagina
   web (15-09-2026). El marco es mas ancho que la columna de la derecha, asi que la vista previa se
   pone debajo de los mandos en vez de al lado. */
.aspectoWeb {
    padding: 12px;
}

    .aspectoWeb iframe {
        width: 100%;
        height: 620px;
        border: 1px solid #cfd6e4;
        border-radius: 8px;
        background: #fff;
    }

@media (max-width: 1100px) {
    .aspectoVista { flex: 1 1 100%; position: static; }
}

/* ================================================================= Árbol de hospitalización
   (14-09-2026, Y11). Hospital → planta → habitación. Las camas NO son un nivel: la habitación es
   la última rama, que es lo que pidió Enrique y lo que hay en la base de datos. */
.hospArbol { font-size: 15.5px; }
.hospNodo { margin: 2px 0; }
.hospNodo.hospPlanta { margin-left: 22px; }
.hospNodo.hospHabitacion { margin-left: 44px; padding: 3px 8px; border-radius: 5px; display: inline-block; margin-right: 6px; }
.hospRama {
    background: none; border: 0; padding: 3px 6px; border-radius: 5px;
    color: var(--texto, #1f242b); font-weight: 600; cursor: pointer; text-align: left;
}
.hospRama:hover { background: #eef2f7; }
.hospHospital > .hospRama { font-size: 16.5px; }
.hospPlanta > .hospRama { font-weight: 500; }
/* Libre y ocupada se distinguen de un vistazo: es lo que se mira al buscar dónde meter a alguien. */
.hospNodo.hospHabitacion.libre { background: #eef4ee; color: #2c6b3f; }
.hospNodo.hospHabitacion.ocupada { background: #fdeeee; color: #8a3535; }
.hospSeccion { opacity: .7; font-size: 13.5px; }
/* P282: leyenda del árbol (mismos colores que las habitaciones). */
.hospLeyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 4px 0; font-size: 13.5px; color: #1f242b; }
.hospLeyendaItem { display: inline-flex; align-items: center; gap: 6px; }
.hospMuestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.hospMuestra.libre { background: #eef4ee; border: 1px solid #2c6b3f; }
.hospMuestra.ocupada { background: #fdeeee; border: 1px solid #8a3535; }
.hospLeyendaNota { color: #5b6b8c; font-size: 12.5px; margin: 0 0 10px 0; }

/* Vista previa del QR del monedero (14-09-2026, Y17). */
.qrMonederoCaja { padding: 10px; border: 1px solid var(--linea, #d9dde2); border-radius: 8px;
                  display: inline-block; background: #fff; }
.qrMonederoCaja img { width: 200px; height: 200px; display: block; }

/* --- Acciones de fila del historial de visitas (16-09-2026, P16) ------
   Adjuntar documento, crear factura e informe de esa visita: iconos
   pulsables, del color de seccion, como los de informes y fotos. */
.accionVisita {
    color: var(--seccion);
    cursor: pointer;
    font-size: 15px;
}

    .accionVisita:hover { color: var(--btn-pri-2); }

/* ------------------------------------------------------------------ Barra de aviso roja (M13)
   Se usa para lo que el cliente TIENE que ver sí o sí, no para un detalle: hoy, que no se le ha
   podido cobrar la recarga de SMS y por tanto han dejado de salir los recordatorios de cita.
   Va pegada arriba del todo y empuja el contenido, no lo tapa. */
.dri-barra-aviso-roja {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: #b42323;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    padding: 9px 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.dri-barra-aviso-roja .glyphicon { margin-right: 6px; }

/* ------------------------------------------------------------------ Botones de "Exportar a Excel"
   Enrique, 14-09-2026: "se ven super feos y grandes, mira la v1 es mas bonito y mas discreto, un poco
   bordes algo circulares". Los de las tablas (DataTables) se estilan en Views/Paciente/_TablasDatos;
   esta clase es para los DOS que no son de DataTables (el de facturas de una cita y el del CRM), para
   que los tres se vean igual.

   Es una accion secundaria: pastilla blanca, borde finito, letra pequena y sin icono. */
.btn.dri-boton-exportar,
.btn.dri-boton-exportar:focus {
    background: #fff;
    border: 1px solid #dfe3ec;
    border-radius: 999px;
    color: #5b6b8c;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    padding: 3px 11px;
    box-shadow: none;
    text-shadow: none;
}
.btn.dri-boton-exportar:hover {
    background: #fff;
    border-color: #b9c6dd;
    color: #29457d;
}

/* Icono de descargar la factura en PDF, ultima columna del historico de Sistemas -> Suscripcion
   (Enrique, 14-09-2026: en la v1 estaba y en la v2 se habia quedado sin el). */
.dri-col-pdf { width: 46px; }
.dri-descargar-pdf { color: #c0392b; font-size: 15px; text-decoration: none; }
.dri-descargar-pdf:hover, .dri-descargar-pdf:focus { color: #922b21; text-decoration: none; }

/* ---------------------------------------------------------------------------
   IMPAGO (docs/IMPAGO.md)
   La línea roja va JUSTO ENCIMA del pie de página, no encima del contenido: el
   pie está fijo y mide 34px, así que la línea se apoya ahí.
   --------------------------------------------------------------------------- */
.dri-impago {
    position: fixed;
    bottom: 34px;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #b3132b;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.dri-impago-txt { padding: 9px 16px; }

.dri-impago a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 6px;
}

.dri-impago a:hover, .dri-impago a:focus { color: #fff; }

/* Acceso bloqueado por impago: se le quitan los menús que no puede usar. El bloqueo real lo hace el
   servidor (Security/FiltroImpago.cs); esto solo evita enseñarle puertas cerradas. */
body.dri-bloqueado .menu-principal,
body.dri-bloqueado .btn-menu-toggle,
body.dri-bloqueado #menuLateral { display: none !important; }

/* ---------------------------------------------------------------------
   PANELES PLEGABLES POR EL TITULO (15-09-2026, Enrique, alta de factura:
   "los datos de la clinica y los datos del cliente ya vienen preestablecidos,
    monta un acordeon y muestralo siempre contraido; luego, si lo quieren
    cambiar, que lo expandan").
   --------------------------------------------------------------------- */
.tituloPlegable {
    cursor: pointer;
    user-select: none;
}

    .tituloPlegable .flechaPlegable {
        font-size: 11px;
        margin-right: 6px;
        transition: transform .15s ease;
        display: inline-block;
    }

    .tituloPlegable[aria-expanded="true"] .flechaPlegable {
        transform: rotate(90deg);
    }

/* ---------------------------------------------------------------------
   ALTA DE FACTURA: todos los campos con el mismo alto y el texto centrado
   verticalmente dentro de la caja (Enrique, 15-09-2026: "centra todos los
   textos en cada uno de los campos que aparecen en la parte inferior").
   Los bloques de abajo llevan la etiqueta ENCIMA del campo, asi que el texto
   tiene que ir en el medio de la caja, no pegado a un borde.
   --------------------------------------------------------------------- */
#divContenidoGeneralFactura .form-control,
#divContenidoGeneralFactura select.form-control,
#divContenidoGeneralFactura input[type="text"],
#divContenidoGeneralFactura input[type="number"],
#divContenidoGeneralFactura input[type="email"] {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 38px;
}


#divContenidoGeneralFactura textarea.form-control {
    height: auto;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Recuadro de "Conceptos favoritos" del alta de factura: la casilla de guardar
   como favorito va DENTRO del recuadro, junto al desplegable (Enrique, 15-09-2026). */
.cajaConceptosFavoritos {
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 8px 12px 10px;
    background: #fbfcfe;
}

    .cajaConceptosFavoritos > .checkbox-inline {
        display: block;
        margin-bottom: 6px;
        margin-left: 0;
    }

/* ---------------------------------------------------------------------
   CAMPOS CON ETIQUETA FLOTANTE (15-09-2026, Enrique).

   Dos quejas seguidas sobre lo mismo: "los textos se cortan" y "el campo de
   minutos es mas gordo que el resto y se sale fuera de la ventana".

   De donde venia: la hoja heredada de la v1 le pone a estos campos 45 px de
   alto y 1,9rem (30 px) de relleno arriba para dejar sitio al rotulo. Con la
   tipografia de la v2 en esos 13 px que quedan no cabe una linea, y ademas
   varias hojas se pelean por el relleno de los desplegables (cada una con su
   !important), asi que el <select> acababa con otro alto y otro ancho que los
   <input> de al lado y se salia de su hueco.

   Como se arregla de una vez: se fija TODO aqui, en el ultimo sitio que se
   carga, y con !important, para que ninguna hoja anterior pueda cambiar el
   alto, el relleno ni la caja. box-sizing: border-box es lo que impide que el
   relleno se sume al ancho y desborde.
   --------------------------------------------------------------------- */
.floating-label-group .form-textbox-input:not(textarea),
.floating-label-group input.form-control,
.floating-label-group select,
.floating-label-group select.form-textbox-input,
.floating-label-group select.combo-textbox-input {
    box-sizing: border-box !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 19px 11px 4px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

    /* Hueco para la flecha del desplegable. */
    .floating-label-group select,
    .floating-label-group select.form-textbox-input,
    .floating-label-group select.combo-textbox-input {
        padding-right: 30px !important;
    }

/* El area de texto es la excepcion: crece con su contenido.
   P1324 (Elena Sánchez, 15-10-2026: «la ventana de notas no me deja ampliarla pese a que indica que se
   puede»). El alto NO va con !important: al estirar el tirador, el navegador pone el alto en el propio
   campo y un !important aquí lo anulaba, así que el tirador no hacía nada. */
.floating-label-group textarea,
.floating-label-group textarea.form-textbox-input {
    box-sizing: border-box !important;
    height: auto;
    resize: vertical;
    margin: 0 !important;
    min-height: 45px !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 19px 11px 6px !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------------------
   Ventana de cita: "Precio" y la caja de facturas, del mismo tamano y a la
   misma altura (Enrique, 15-09-2026).
   --------------------------------------------------------------------- */
#mNuevaCita #div_PacienteInfoFacturas_ContenidoVacio {
    box-sizing: border-box;
    /* 40 px: exactamente lo que miden "Precio" y el boton de la aseguradora que tiene al lado
       (Enrique, 16-09-2026: "que sea del mismo tamano que precio y alineado con esa fila"). */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    background: hsla(0, 0%, 100%, .8);
    padding: 0 12px;
}

/* La columna de "Precio" empieza con su rotulo encima, asi que la caja de facturas tiene que bajar
   justo eso para quedar a la misma altura que el campo, no 10 px a ojo: rotulo de 12 px con
   interlineado 1.35 (~16 px) mas los 3 px que lleva debajo. */
#mNuevaCita #div_PacienteInfoFacturas.margin-top-10 { margin-top: 19px; }

/* El rotulo flotante: arriba del todo, como en la v1, para que el campo entero
   mida lo mismo que alli (45 px) y la ventana no se vea enorme.

   PERO SE TIENE QUE LEER (16-09-2026, Enrique: "los nombres de los campos son
   demasiado pequenos, esto pense que ya estaba arreglado en todo el software").
   Estaba en 11 px y en gris claro: en una pantalla normal no se lee de quien es
   cada casilla, que es justo lo unico que tiene que hacer un rotulo. Se sube a
   12,5 px y se le da color y peso de texto de verdad. El alto del campo no
   cambia, asi que no descoloca ninguna pantalla. */
.floating-label-group .floating-label {
    top: 4px;
    left: 11px;
    font-size: 12.5px;
    line-height: 1.1;
    color: #5a6b85;
    font-weight: 600;
    opacity: 1;
}

/* La caja de buscar paciente lleva un texto de ayuda largo: se deja mas fina
   para que quepa de una linea. */
#mNuevaCita #txtBusqueda { font-size: 14px !important; }
#mNuevaCita #txtBusqueda::placeholder { font-size: 13px; }

/* Cita cancelada o anulada en la agenda: rayada, como en la v1 (punto 53).
   El texto se mantiene legible sobre la trama. */
.fc-event.citaCancelada .fc-event-main-frame,
.fc-event.citaCancelada .citaCabecera, .fc-event.citaCancelada .citaDetalle {
    color: #3a3f47;
    text-decoration: line-through;
    text-decoration-color: rgba(58, 63, 71, .45);
}

/* ---------------------------------------------------------------------
   LA FRANJA BLANCA DE LA AGENDA (15-09-2026, cuarta vez que Enrique la pide:
   "la linea blanca sigue demasiado gorda; estaba mejor en la v1 con todos los
   desplegables del mismo tamano").

   Por que no bastaba con arreglarlo en la hoja de siempre: hay CUATRO hojas que
   tocan .topBar y las que se cargan despues volvian a poner sus medidas. Esta es
   la ultima que se carga, asi que las medidas se fijan aqui, y con !important,
   para que no haya una quinta vuelta.

   Medidas: las de la v1. Titulo pequeno, campos de 32 px y desplegables de 125 px
   (90 el de la duracion), todos iguales.
   --------------------------------------------------------------------- */
.topBar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

    .topBar h1 {
        font-size: 19px !important;
        line-height: 28px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 2px 0 !important;
    }

    /* TODO lo que va en la franja mide lo mismo y se centra en ella: los desplegables de la izquierda
       y tambien la fecha, "Hoy", "Ver 5 Dias", "Enviar SMS" y los iconos de la derecha (Enrique,
       15-09-2026: "los de la derecha, mismo tamano que Clinicas: todas, consulta etc, mismo alto y en
       medio de la linea blanca"). */
    .topBar .form-control,
    .topBar select,
    .topBar input[type="text"],
    .topBar .btn,
    .topBar .btn-group > .btn,
    .topBar button {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 14px !important;
        line-height: 30px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Los botones llevan el texto centrado dentro de esos 32 px.

       ⚠️ EL FALLO QUE COSTO MEDIA TARDE (16-09-2026). Esto decia solo ".topBar .btn", y las VENTANAS
       de la agenda (la de cita, la de turno) estan escritas DENTRO de esa barra en el HTML. Asi que
       este "display: inline-flex !important" ganaba al "display: none" que pone el JavaScript al
       esconder un boton: se escondian de verdad en el codigo, y el CSS los volvia a ensenar. De ahi
       que Enrique viera una y otra vez botones que ya estaban quitados ("van 10 veces que te lo
       digo"). Ahora la regla se limita a los botones que estan DIRECTAMENTE en la barra, no a los de
       las ventanas que cuelgan de ella, y respeta a quien se ha escondido a mano. */
    .topBar > .btn,
    .topBar > button,
    .topBar > * > .btn,
    .topBar > * > button,
    .topBar > * > * > .btn,
    .topBar > * > * > button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    /* Todo lo de la franja se apoya en la misma linea de 32 px: asi queda centrado en ella sin
       tocar la colocacion de columnas de la v1 (que va con floats y es facil de romper). */
    .topBar h1,
    .topBar .form-control,
    .topBar select,
    .topBar input[type="text"],
    .topBar .btn,
    .topBar button {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*  UN POCO MÁS ANCHOS (19-09-2026, Enrique: "parecen las palabras cortadas en todas las
        agendas, de consulta, de cirugías y de pruebas"). Con 125 px se cortaban "Clínicas: Todas",
        "Agenda por máquinas" o "Lista de espera", y con 90 px "5 min. Agenda". Siguen siendo
        "auto": cada uno ocupa lo que necesita su texto, solo que ahora el tope deja leerlo entero. */
    .topBar select.form-control,
    .topBar select.combo-textbox-input {
        width: auto !important;
        min-width: 0 !important;
        max-width: 190px !important;
    }

    .topBar #ddlAgendaDuracionVista,
    .topBar #ddlFranjaMaquinas {
        max-width: 135px !important;
    }

    /* Ni los campos ni los botones dejan hueco por debajo: ese hueco era parte de lo que engordaba
       la franja. */
    .topBar select,
    .topBar input[type="text"],
    .topBar .btn,
    .topBar .form-control,
    .topBar .form-group,
    .topBar .row {
        margin-bottom: 0 !important;
    }

/* ---------------------------------------------------------------------
   VENTANA DE CITA: MISMAS DIMENSIONES QUE LA v1 (15-09-2026, Enrique:
   "esta muy fea, muy grande, todo muy grotesco y anticuado; manten las
   mismas dimensiones, todo mas organizado y recogido").

   No es un campo suelto: era TODO el aire de la ventana. Aqui se recogen los
   huecos entre filas, el alto de la cabecera del paciente y el de los botones,
   para que la ventana ocupe lo que ocupaba en la v1.
   --------------------------------------------------------------------- */
#mNuevaCita .floating-label-group { margin-top: 6px; margin-bottom: 0; }
#mNuevaCita .form-group { margin-bottom: 6px; }
#mNuevaCita .panel-body { padding: 10px 14px; }
#mNuevaCita .row { margin-bottom: 0; }
#mNuevaCita .checkbox { margin-top: 4px; margin-bottom: 4px; }
#mNuevaCita .filaFechaHoraCita { margin-bottom: 2px; }
#mNuevaCita .filaDoctorTipoCita { margin-bottom: 2px; }

    /* Botones de la ventana: los de la v1, no los grandes de la guia nueva. */
    #mNuevaCita .btn {
        font-size: 14px;
        padding: 6px 14px;
    }

    #mNuevaCita .panel-footer { padding: 8px 14px; }

/* La cabecera del paciente (foto + datos) tambien iba muy suelta. */
#mNuevaCita #div_FichaPacSel .myForm { padding: 4px 0; }
#mNuevaCita #div_FichaPacSel p { margin-bottom: 2px; }

/* ------------------------------------------------------------------ VENTANA DE CITA: FECHA Y HORAS
   Enrique, 16-09-2026: "que mal estan ahora los campos de la ventana de citas, cada vez peor, ya no
   se lee nada, todo campos de diferentes tamanos. Puedes usar los tamanos de la ventana de turnos
   que ahi si se ve bien".

   La fila de fecha y horas pasa al montaje de la ventana de turnos: etiqueta ENCIMA del campo y
   campos con relleno normal. La hoja de 2021 le mete a TODO `.form-textbox-input` un
   `padding: 1.9rem 1rem 0 !important` pensado para la etiqueta flotante (deja hueco arriba); con la
   etiqueta ya fuera, ese hueco empujaba el texto abajo y la etiqueta se pintaba encima del valor.
   Es la misma correccion que ya lleva #formTurno unas lineas mas arriba. */
#mNuevaCita .turno-campo-hora .form-textbox-input {
    /* box-sizing y max-width son imprescindibles: otras hojas dejan estos campos en `content-box`, y
       entonces el relleno SE SUMA al ancho y el campo se sale de su columna. Es lo que hacia que
       "Minutos" acabara pintado encima de la columna de al lado, una vez tras otra. */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    line-height: 38px !important;
    font-size: 14px !important;
}

#mNuevaCita .turno-campo-hora select.form-textbox-input {
    padding-right: 28px !important;
    line-height: normal !important;
}

/* Las horas y los minutos, centrados: son dos numeros de dos cifras y asi se leen de un vistazo. */
#mNuevaCita .turno-hora input.form-textbox-input {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

#mNuevaCita .turno-campo-hora { margin-bottom: 8px; }
#mNuevaCita .turno-etiqueta { font-size: 12px; margin-bottom: 3px; }

/* ------------------------------------------------ VENTANA DE CITA: DOCTOR, TIPO, COLOR Y PRECIO
   Enrique, 16-09-2026, con el dibujo delante: "estira los campos de doctor, tipo de cita y el color
   para que queden como te marco en rojo, todos mismo alto. Y el campo de precio mismo alto que el
   resto, y cobrado a aseguradora pásalo a la derecha de precio y mejor como un botón".

   Los desplegables salían estrechos dentro de una caja ancha: la caja ocupaba su sitio, pero el campo
   de dentro no crecía con ella. Aquí se les dice que ocupen su caja entera, y todos con el mismo alto
   que la fila de fecha y horas (40 px), que es la referencia de la ventana. */
#mNuevaCita .filaDoctorTipoCita .form-textbox-input,
#mNuevaCita .filaDoctorTipoCita select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* El cuadrado del color, del mismo alto que sus vecinos y ocupando su caja. */
#mNuevaCita .filaDoctorTipoCita .muestraColorCita {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 2px !important;
}

/* PRECIO y COBRADO A LA ASEGURADORA, uno al lado del otro y de la misma altura. */
#mNuevaCita .filaPrecioCita {
    display: flex;
    align-items: center;
    gap: 8px;
}

    #mNuevaCita .filaPrecioCita .form-textbox-input {
        box-sizing: border-box !important;
        flex: 1 1 auto;
        min-width: 0;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* El botón dice por su color si está cobrado (verde) o no (rojo), y además lo dice con palabras:
   el color nunca es lo único que informa. */
.btnCobradaAseguradora {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .12s;
    white-space: nowrap;
}

    .btnCobradaAseguradora.cobrado {
        background: #e7f5ee;
        border-color: #2f9e6b;
        color: #1c6b48;
    }

    .btnCobradaAseguradora.noCobrado {
        background: #fbe7e7;
        border-color: #b42323;
        color: #8d1c1c;
    }

    .btnCobradaAseguradora:hover { filter: brightness(.97); }

/* El nombre del paciente, con su etiqueta encima y sin que nada la tape. */
#mNuevaCita #txtBusqueda {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    /* P970 (06-10-2026): el buscador lleva ya el rótulo DENTRO (.floating-label-group), como el resto de
       campos de la ventana: 45 px y 19 px arriba (docs/GUIA_CAMPOS.md), para que el rótulo no pise el texto. */
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding-top: 19px !important;
    padding-bottom: 4px !important;
    padding-left: 11px !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------------------
   VENTANA DE TURNO: LOS DESPLEGABLES, A TODO EL ANCHO (16-09-2026, Enrique:
   "ajustar la ventana de nuevo turno o turno existente", con los cuatro
   desplegables marcados en rojo).

   Es el mismo caso que ya se arreglo en la ventana de cita: la caja de cada
   campo ocupa toda su columna, pero el <select> de dentro se quedaba con su
   ancho natural (el del texto mas largo), asi que se veia un desplegable
   estrecho flotando en un hueco ancho y los nombres salian cortados
   ("Washington,", "Consulta Est", "Aceptar citas").

   Se fija aqui, que es la ultima hoja que se carga, y con box-sizing:
   border-box para que el relleno NO se sume al ancho y se salga de su columna
   (la leccion de las veces anteriores).
   --------------------------------------------------------------------- */
#formTurno select,
#formTurno select.form-control,
#formTurno select.form-textbox-input,
#formTurno select.combo-textbox-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.2 !important;
}

/* Las horas van de dos en dos (hora y minutos) dentro de su columna: ahi el
   100% es el de SU caja, no el de la fila, y por eso siguen cuadrando. */
#formTurno input.form-control,
#formTurno input.form-textbox-input {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* ---------------------------------------------------------------------
   CITA MAS PROXIMA: LOS HUECOS SON ENLACES Y TIENEN QUE PARECERLO
   (16-09-2026, Enrique: "esos textos que son hipervinculos con la fecha y
   especialidad casi no se ven; usar el mismo azul del dashboard para saber
   que ese azul se puede hacer clic").

   La tabla los pintaba con el color del texto normal, asi que nada decia que
   se pudiera pinchar en ellos. Se usa --link, el mismo azul de enlace que el
   resto de la v2, y se subrayan al pasar por encima.
   --------------------------------------------------------------------- */
#tblCitaProxima a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

    #tblCitaProxima a:hover,
    #tblCitaProxima a:focus {
        color: var(--header-2);
        text-decoration: underline;
    }

/* ---------------------------------------------------------------------
   "FECHA HASTA" DE LA CITA / TURNO REPETIDO (16-09-2026, Enrique: "este
   campo de fecha hasta no se ve entero" y "sigue pequeño, no se lee lo
   escrito").

   Iba con etiqueta flotante: el rotulo se pintaba ENCIMA de la fecha y la
   tapaba. Ya se le ha puesto la etiqueta arriba; aqui se remata el tamano,
   que es lo otro que fallaba: la caja se quedaba con el ancho de un campo
   pequeno y la fecha no cabia entera.
   --------------------------------------------------------------------- */
#txtFechaHastaCitasRepetidas,
#TURNO_REPETIDO_FECHA_HASTA {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 150px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 10px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
}


/* ---------------------------------------------------------------------
   UN BOTON ESCONDIDO A MANO SE QUEDA ESCONDIDO (16-09-2026).

   Red de seguridad general: si el JavaScript esconde un boton con
   style="display: none", ninguna hoja de estilo puede volver a ensenarlo.
   Sin esto, cualquier regla con !important que le pille por encima lo
   resucita, que es justo lo que pasaba en las ventanas de la agenda.
   --------------------------------------------------------------------- */
.topBar [style*="display: none"],
.topBar [style*="display:none"],
.modal [style*="display: none"],
.modal [style*="display:none"],
[style*="display: none"],
[style*="display:none"] {
    display: none !important;
}

/* ---------------------------------------------------------------------
   DIETARIO: LA TABLA CABE ENTERA, SIN DESPLAZAR A UN LADO (16-09-2026,
   Enrique: "en un ordenador un poco mas pequeno tiene que salir entera,
   sin hacer scroll horizontal; la columna pacientes es demasiado ancha").

   El problema: el navegador repartia el ancho segun el contenido, y el
   nombre del paciente es lo mas largo, asi que "Paciente" se llevaba 647
   de 1591 px -el 40% de la tabla- y empujaba al resto fuera de la
   pantalla. Los anchos estaban puestos solo para movil.

   Se reparte a proporciones fijas: cada columna sabe lo que ocupa y un
   nombre largo parte de linea en vez de ensanchar la tabla. Medido en la
   pantalla de Enrique: de 1591 px a 1361, y "Paciente" de 647 a 299.
   La hora va en una sola linea: partida ("08:3 0") no se lee.
   --------------------------------------------------------------------- */
.dietario-tabla {
    table-layout: auto;
    width: 100%;
}

/* ---------------------------------------------------------------------
   P609 / P611 (29-09-2026, capturas de Enrique y de un cliente): EL NOMBRE
   DEL PACIENTE MANDA.

   Con los anchos fijos de arriba (18 % el paciente, 72 px la hora...) salían
   tres fallos: con pocas columnas marcadas la Hora se quedaba enorme y el
   nombre cortado; en un portátil las columnas no cabían y se montaban unas
   encima de otras (el teléfono encima de los iconos de Contactar, las
   cabeceras «AseguradoTipo VisitaEstado»); y en pantalla grande el nombre
   salía cortado aunque sobrara sitio.

   Ahora:
     · Cada columna que no es el nombre mide LO QUE NECESITA y nada más
       (width: 1 % + sin partir línea): la hora justo «10:30», la «C» su
       circulito, el teléfono su número, los iconos sus iconos.
     · Los desplegables tienen un ancho fijo razonable, así no le roban
       sitio al nombre (en pantallas medianas, algo más estrechos).
     · El nombre se lleva TODO el sitio que sobra y su columna nunca es más
       estrecha que el propio nombre (hasta 310 px con sus iconos): sale
       entero siempre que quepa y solo un nombre larguísimo se corta con «…»,
       y solo si de verdad no hay sitio.
     · Si aun así la tabla no cabe, se desplaza de lado DENTRO de su
       recuadro; nunca se montan unas columnas encima de otras.
     · Móvil y tableta (bloque P252 más abajo): el nombre, entero y en una
       línea; la tabla se desplaza de lado dentro de su recuadro.
   Vale igual para consulta, pruebas y quirófano (es la misma tabla).
   --------------------------------------------------------------------- */
    .dietario-tabla > thead > tr > th,
    .dietario-tabla > tbody > tr > td {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .dietario-tabla .col-hora,
    .dietario-tabla .col-conf,
    .dietario-tabla .col-aseguradora,
    .dietario-tabla .col-tipo,
    .dietario-tabla .col-estado,
    .dietario-tabla .col-telefono,
    .dietario-tabla .col-contactar,
    .dietario-tabla .col-informes,
    .dietario-tabla .col-fotos,
    .dietario-tabla .col-facturas,
    .dietario-tabla .col-acciones {
        width: 1%;
    }

    .dietario-tabla .col-paciente { width: auto; }

    /* El nombre: la columna pide, como poco, lo que mida el nombre ENTERO con sus iconos, hasta 310 px (max-width); y
       si la celda tiene más sitio, la fila lo ocupa entero (min-width 100 %, que manda sobre el tope),
       así que un nombre muy largo solo se corta con «…» cuando de verdad no hay sitio. Si aun así la
       tabla no cabe, se desplaza de lado dentro de su recuadro: el nombre no se corta para ganar un
       sitio que igualmente no alcanza. */
    .dietario-tabla td.dietario-paciente .dietario-pac-fila {
        max-width: 310px;
        min-width: 100%;
    }

    /* Horas cerradas / asuntos propios: una línea con «…» (entero al pasar el ratón). El texto largo NO
       ensancha la columna (width 0) pero ocupa toda la celda (min-width 100 %, y como poco 180 px). */
    .dietario-tabla td.dietario-paciente .dietario-bloqueada {
        width: 0;
        min-width: max(180px, 100%);
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Relleno lateral de las celdas algo más corto (8 px; 6 px en las de iconos): con doce columnas
       son casi 100 px más para el nombre. Va con la misma fuerza que la regla de DataTables. */
    table.dri-tabla.dataTable.dietario-tabla > thead > tr > th,
    table.dri-tabla.dataTable.dietario-tabla > tbody > tr > td,
    .dietario-tabla > thead > tr > th,
    .dietario-tabla > tbody > tr > td {
        padding-left: 8px;
        padding-right: 8px;
    }

    table.dri-tabla.dataTable.dietario-tabla > * > tr > .col-conf,
    table.dri-tabla.dataTable.dietario-tabla > * > tr > .col-contactar,
    table.dri-tabla.dataTable.dietario-tabla > * > tr > .col-informes,
    table.dri-tabla.dataTable.dietario-tabla > * > tr > .col-fotos,
    table.dri-tabla.dataTable.dietario-tabla > * > tr > .col-facturas {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Los desplegables: ancho fijo, el mismo en todas las filas. */
    .dietario-tabla .dietario-select-soc { width: 120px; max-width: none; }
    .dietario-tabla .dietario-select-tipo { width: 150px; max-width: none; }
    .dietario-tabla .dietario-etiq-tipo { max-width: 150px; }
    /* P418: el estado lleva su contador; 178 px es lo justo para «En consulta 12h05». */
    .dietario-tabla .dietario-select-estado { width: 178px; max-width: none; min-width: 0; }
    .dietario-tabla td.col-acciones select.dietario-acciones { width: 110px !important; }

    /* P737 (02-10-2026, Enrique): un día SIN citas las columnas (ancho 1 %) se encogían hasta su título
       y se iban todas juntas a la derecha. La cabecera pide ya el ancho de lo que va dentro en un día con
       citas (el desplegable + 16 px de relleno), así la tabla se ve igual con citas que sin ellas. */
    .dietario-tabla > thead > tr > th.col-aseguradora { min-width: 136px; }
    .dietario-tabla > thead > tr > th.col-tipo { min-width: 166px; }
    .dietario-tabla > thead > tr > th.col-estado { min-width: 194px; }
    .dietario-tabla > thead > tr > th.col-telefono { min-width: 105px; }
    .dietario-tabla > thead > tr > th.col-acciones { min-width: 126px; }

/* Pantallas medianas (portátiles): los desplegables, algo más estrechos, para que quepa todo. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
    /* P861 (Cuidarte, 05-10-2026: «en los portátiles no se ve la parte derecha»). Si aun así la tabla no
       cabe, se desplaza de lado dentro de su recuadro (como la rejilla de la v1) en vez de quedar cortada. */
    #dietario_content .dri-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dietario-tabla .dietario-select-soc { width: 100px; }
    .dietario-tabla .dietario-select-tipo { width: 120px; }
    .dietario-tabla .dietario-etiq-tipo { max-width: 120px; }
    .dietario-tabla .dietario-select-estado { width: 165px; }
    .dietario-tabla td.col-acciones select.dietario-acciones { width: 108px !important; }
    .dietario-tabla > thead > tr > th.col-aseguradora { min-width: 116px; }
    .dietario-tabla > thead > tr > th.col-tipo { min-width: 136px; }
    .dietario-tabla > thead > tr > th.col-estado { min-width: 181px; }
    .dietario-tabla > thead > tr > th.col-acciones { min-width: 124px; }
}

/* ---------------------------------------------------------------------
   VENTANA DE CITA: SE VE EN QUE MODO SE ESTA TRABAJANDO (16-09-2026,
   Enrique: "que aparezca en azul sombreado con el estilo del software el
   boton donde estamos trabajando... cerrar horas y asuntos propios con
   fondo rojizo estilo dricloud").

   Los cuatro botones de arriba ya llevaban la clase "active", pero se
   veian igual que los demas, asi que no habia forma de saber si se
   estaba citando a un paciente o cerrando horas. Ahora el activo se
   pinta: azul para las dos formas de citar, rojizo para las dos que
   BLOQUEAN agenda (cerrar horas y asuntos propios), que es justo la
   diferencia que importa de un vistazo.
   --------------------------------------------------------------------- */
#div_CrearCerrarhorasContent .btn {
    border: 1px solid var(--btn-sec-borde) !important;
    background: #fff !important;
    color: var(--btn-sec-texto) !important;
    font-weight: 600;
    /* SIN TRANSICION, y esto es lo que costo encontrarlo (16-09-2026).
       .btn lleva "transition: background-color .12s". Estos cuatro botones viven dentro de una
       ventana que se abre y se cierra, y la transicion se quedaba COLGADA: mientras una transicion
       esta en curso manda ella, por encima incluso de un !important escrito a mano, asi que el boton
       se quedaba blanco aunque el CSS dijera azul. Se veia igual de "sin marcar" al pulsar en
       cualquier campo de abajo (Enrique: "ese boton debe seguir marcado en azul"). Sin transicion,
       el color es el que dice el CSS y punto. */
    transition: none !important;
}

    /* Citar a un paciente (nuevo o existente): azul de la casa. */
    #div_CrearCerrarhorasContent #rdPacNuevo.active,
    #div_CrearCerrarhorasContent #rdPacExistente.active {
        background: var(--btn-pri-1) !important;
        border-color: var(--btn-pri-2) !important;
        color: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    /* Cerrar horas y asuntos propios: rojizo, porque no citan a nadie, bloquean hueco. */
    #div_CrearCerrarhorasContent #rdCerrarHoras.active,
    #div_CrearCerrarhorasContent #rdCerrarHorasAsuntosPropios.active {
        background: var(--peligro) !important;
        border-color: var(--peligro-osc) !important;
        color: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

/* ---------------------------------------------------------------------
   TELEFONO CON BANDERA (16-09-2026, Enrique: "telefono no centrado y no
   correcto y se juntan los numeros y el +", "hay campos sin nombre").

   intl-tel-input envuelve el campo en un <div class="iti"> y pone la
   bandera ENCIMA, por la izquierda. El rotulo flotante de la v2 va
   tambien a la izquierda: se pisaban, la bandera tapaba el rotulo (de
   ahi el "campo sin nombre") y el prefijo quedaba pegado a ella.

   Aqui el <div class="iti"> pasa a ocupar el campo entero, y el rotulo y
   el texto se corren a la derecha de la bandera. El grupo lo marca el
   propio componente al arrancar (clase "con-bandera").
   --------------------------------------------------------------------- */
.floating-label-group .iti {
    display: block !important;
    width: 100% !important;
}

.floating-label-group.con-bandera > .floating-label {
    left: 62px;
    z-index: 3;
}

.floating-label-group .iti > input.form-control,
.floating-label-group .iti > input[type="tel"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 62px !important;
}

.floating-label-group .iti .iti__flag-container {
    top: 14px;
    bottom: auto;
    height: 28px;
}

.floating-label-group .iti .iti__selected-flag {
    height: 28px;
    padding: 0 6px 0 10px;
}

/* ---------------------------------------------------------------------
   LISTADO DE PACIENTES: EL NOMBRE ES UN ENLACE Y SE TIENE QUE NOTAR
   (16-09-2026, Enrique: "muestra los nombres en azul muy claro, usa el
   azul de siempre para identificar que es un hipervinculo").

   Iban en un azul palido que no se distinguia del texto normal. Se usa
   --link, el mismo azul de enlace del resto de la v2, y se subrayan al
   pasar por encima. Y abren la ficha en una pestana nueva, para no
   perder la busqueda que se acaba de hacer.
   --------------------------------------------------------------------- */
a.enlacePaciente,
a.enlacePaciente:visited {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

    a.enlacePaciente:hover,
    a.enlacePaciente:focus {
        color: var(--header-2);
        text-decoration: underline;
    }

/* ---------------------------------------------------------------------
   VENTANA DE CITA: TODOS LOS CAMPOS DEL MISMO TAMANO (16-09-2026,
   Enrique: "cada uno tiene tamano diferente y algunos son demasiado
   pequenos y no cabe el texto dentro... utiliza los mismos tamanos y
   formatos que en agenda-consultas porque ha quedado bien").

   Medido en su pantalla antes de arreglarlo, en la cita de quirofano:
   Baremo 125x45, Sitio quirurgico 190x32, Dias de ingreso 190x45,
   Implantes 300x32, Tipo de intervencion 122x45... cada campo de su
   padre y de su madre, y varios con el texto sin caber.

   La causa es la de siempre en esta aplicacion: los <select> se quedan
   con su ancho natural en vez del de su columna, y el alto lo pone una
   hoja distinta segun el campo. Se fija aqui, en la ultima hoja que se
   carga, con box-sizing border-box para que el relleno NO se sume al
   ancho y se salga de su hueco.
   --------------------------------------------------------------------- */
/*  ⚠️ EL ALTO DEPENDE DE DONDE VAYA EL ROTULO, y esto lo aprendi rompiendolo
    (16-09-2026: "algunos campos son poco altos y no se ve el texto").

    · Rotulo ENCIMA del campo (.turno-campo-hora, como las horas): el campo
      son 40 px limpios de texto.
    · Rotulo DENTRO del campo (.floating-label-group, que es como esta casi
      toda la ventana de cita): el rotulo ocupa la franja de arriba, asi que
      el campo necesita 45 px y 19 px de relleno superior. Forzandolo a 40 el
      rotulo se comia el texto y se veian los dos pisados.

    Asi que el ancho se fija para todos -que era el problema de verdad, los
    desplegables se quedaban con su ancho natural- y el alto se respeta
    segun el tipo de campo. */
#formCita .floating-label-group > select,
#formCita .floating-label-group > input.form-control,
#formCita .floating-label-group > input.form-textbox-input,
#formCita .form-group > select.form-control,
#formCita .form-group > input.form-control,
#formulario .floating-label-group > select,
#formulario .floating-label-group > input.form-control,
#formulario .floating-label-group > input.form-textbox-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Rotulo dentro: 45 px y sitio arriba para el rotulo.

   Vale para la ventana de cita y para el alta de factura (#formulario), que
   tenia los rotulos FUERA del campo, textos que no cabian y textos pegados al
   suelo de la caja (Enrique, 16-09-2026: "tu mala decision; hazlo siempre con
   el titulo dentro del campo, la misma estructura y ancho que en la creacion de
   cita, porque ahi cabe todo bien"). */
#formCita .floating-label-group > select,
#formCita .floating-label-group > input.form-control,
#formCita .floating-label-group > input.form-textbox-input,
#formulario .floating-label-group > select,
#formulario .floating-label-group > input.form-control,
#formulario .floating-label-group > input.form-textbox-input {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding-top: 19px !important;
    padding-bottom: 4px !important;
    line-height: 1.2 !important;
}

/* Rotulo encima: 40 px, todo para el texto. */
#formCita .turno-campo-hora > select,
#formCita .turno-campo-hora > input.form-control,
#formCita .form-group > select.form-control,
#formCita .form-group > input.form-control {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/*  El rotulo va DENTRO del campo, asi que tiene que caber en UNA linea: en dos
    se mete por encima de lo que el usuario ha escrito y lo tapa (le paso a
    "Sitio quirurgico y lateralidad"). Los rotulos largos se acortan en el texto
    y llevan el nombre entero en el aviso emergente. */
#formCita .floating-label-group > .floating-label,
#formulario .floating-label-group > .floating-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 22px);
}

/* Las areas de texto son la excepcion: crecen con lo que se escribe. */
#formCita .floating-label-group > textarea,
#formulario .floating-label-group > textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto;   /* P1324: sin !important, para que el tirador de ampliar funcione */
    max-height: none !important;
}

/* El telefono con bandera manda sobre lo anterior: ahi el <div class="iti">
   es quien ocupa el campo entero. */
#formCita .floating-label-group > .iti {
    display: block !important;
    width: 100% !important;
}

/* El desplegable de la columna de acciones, dentro de su hueco y sin desbordar. */
.dietario-tabla td.col-acciones select,
.dietario-tabla td.col-acciones .form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ---------------------------------------------------------------------
   ALTA DE FACTURA: EL BLOQUE DE CONCEPTOS (16-09-2026, Enrique).

   · La casilla de "guardar concepto como favorito" va DENTRO del recuadro
     y su texto se lee entero (antes se salía por abajo y se cortaba).
   · La papelera, separada del desplegable, para no darle sin querer.
   · El botón "Añadir" va el primero de su fila: es la acción de la fila y
     estaba escondido al final, detrás de cinco campos.
   --------------------------------------------------------------------- */
.cajaConceptosFavoritos .casillaFavorito {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin-bottom: 8px;
    white-space: normal;
    line-height: 1.25;
}

    .cajaConceptosFavoritos .casillaFavorito input[type="checkbox"] {
        position: static;
        margin: 0;
        flex: 0 0 auto;
    }

.filaConceptoFavorito {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filaConceptoFavorito > select {
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    .filaConceptoFavorito > .botonQuitarFavorito {
        flex: 0 0 auto;
    }

/* El botón "Añadir" a la misma altura que los campos de su fila. */
.filaNuevoConcepto #btnAnadirConcepto {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/*  En la tabla de conceptos hay números que no caben ("precio" e "importe"
    se comían las cifras enteras). Se les da aire. */
#tablaConceptos th.colPrecio, #tablaConceptos td.colPrecio,
#tablaConceptos th.colImporte, #tablaConceptos td.colImporte {
    min-width: 110px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   FICHA DEL PACIENTE, 16-09-2026 (Enrique).
   --------------------------------------------------------------------- */

/* "ICE (en caso de emergencia)" sigue siendo un <textarea> porque la columna puede traer varias
   lineas escritas, pero mide lo mismo que los campos de al lado: 45 px, como manda docs/GUIA_CAMPOS.md
   para el rotulo dentro del campo. */
.floating-label-group > textarea.campoUnaLinea {
    box-sizing: border-box !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding-top: 19px !important;
    padding-bottom: 4px !important;
    resize: none;
    overflow-x: hidden;
    white-space: nowrap;
}

/* La lista de paises del telefono va colgada del <body> (ver _TelefonoInternacional). Por encima de
   los paneles, y tambien por encima de las ventanas modales, que en Bootstrap 3 van a 1050. */
.iti--container { z-index: 2000 !important; }
.iti__country-list { z-index: 2000 !important; }

/* ---------------------------------------------------------------------
   FICHA DEL PACIENTE, DASHBOARD (Enrique, 16-09-2026).
   --------------------------------------------------------------------- */

/* EL CORREO SE TIENE QUE LEER (Enrique, 16-09-2026: "el email aparece demasiado clarito").
   Mirado en su pantalla: el enlace heredaba font-weight 100, o sea el grosor mas fino que existe,
   y ademas en un azul claro. A 13,5 px eso se queda en un gris palido. Va en el azul oscuro de
   cabecera y con el mismo grosor que el resto de la ficha. */
.fPaciente .dato a[href^="mailto:"] {
    color: var(--header-2) !important;
    font-weight: 600 !important;
    text-decoration: none;
}

    .fPaciente .dato a[href^="mailto:"]:hover { text-decoration: underline; }

/* "Todavia no se ha puesto la contrasena" iba empujado al extremo derecho (margin-left:auto) y
   quedaba descolgado. Va detras de "Ultimo acceso", en su misma linea y a su misma altura.
   Con align-items:baseline se apoya en la MISMA linea de texto que "Ultimo acceso", no en el centro
   del bloque, que es lo que lo dejaba flotando cuando la fecha se parte en dos lineas. */
.portalEstado {
    align-items: baseline !important;
    row-gap: 2px;
}

.portalPunto { align-self: center; }

.portalSecundario { margin-left: 0 !important; }

/* Y los dos botones, pegados a la izquierda. El segundo se iba 10 px a la derecha porque Bootstrap
   separa un boton del siguiente con ".btn + .btn { margin-left: 10px }", y al partirse en dos lineas
   ese margen quedaba como una sangria. */
.portalBotones { justify-content: flex-start !important; margin-top: 8px; }

    .portalBotones .btn + .btn { margin-left: 0 !important; }

/* ---------------------------------------------------------------------
   RESUMEN DE VALORACIONES (Estadisticas → Encuestas de satisfaccion).
   --------------------------------------------------------------------- */
.resumenValoraciones { margin-bottom: 18px; }

.tarjetaValoracion {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    min-height: 96px;
}

    .tarjetaValoracion .etiqueta {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--gris);
        margin-bottom: 6px;
    }

    .tarjetaValoracion .cifra { font-size: 30px; font-weight: 700; color: var(--titulo); line-height: 1.1; }
    .tarjetaValoracion .pie { font-size: 12px; color: var(--gris); }

.tablaValoracion { margin: 0; font-size: 13px; }
    .tablaValoracion td { border-top: 1px solid var(--borde); padding: 6px 4px; vertical-align: middle; }
    .tablaValoracion tr:first-child td { border-top: none; }
    .tablaValoracion td.nota { font-weight: 700; color: var(--titulo); white-space: nowrap; }

/* Iconos del desplegable "Enviar mensaje" de la ficha del paciente: los tres del mismo tamaño y
   alineados, para que el texto empiece a la misma altura en las tres lineas. */
.iconoEnviar {
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-right: 6px;
    color: var(--gris);
}

.iconoEnviarWhatsApp {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 8px;
    margin-left: 1px;
    vertical-align: -3px;
}

/*  LA BANDERA DEL TELEFONO, CENTRADA (Enrique, 16-09-2026: "sigue con las banderas descentradas").

    Medido en su pantalla: la caja de la bandera venia con top:14px y bottom:3px, y el bloque de
    dentro con 16 px de relleno arriba. Las dos cosas la empujaban hacia abajo, asi que en un campo
    de 45 px la bandera quedaba pegada al borde inferior. Aqui se le dice que ocupe el alto entero
    del campo y que se centre dentro, que es lo unico que tiene que hacer.  */
.floating-label-group.con-bandera .iti__flag-container {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.floating-label-group.con-bandera .iti__selected-flag {
    height: 100% !important;
    padding: 0 6px 0 10px !important;
    display: flex !important;
    align-items: center !important;
}

/*  FOTO DEL DOCUMENTO DE IDENTIDAD (Enrique, 16-09-2026: "debe dejar arrastrar una imagen aqui
    dentro... y la imagen debe ser rectangular, no cuadrada").

    Proporcion de carne (85,6 x 54 mm, la de un DNI o una tarjeta): asi el hueco vacio ya dice que
    lo que va ahi es un documento, y la imagen subida no se recorta ni se estira. */
.marcoFotoDni {
    position: relative;
    width: 100%;
    max-width: 210px;
    aspect-ratio: 85.6 / 54;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafd;
}

    .marcoFotoDni img {
        width: 100%;
        height: 100%;
        object-fit: contain;      /* el documento entero, sin recortarle las esquinas */
        border-radius: 10px;
        background: #fff;
        display: block;
    }

.fotoDniPaciente .sinFotoDni {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.3;
    color: #8f9bb5;
    border: 2px dashed #d6dae6;
    border-radius: 10px;
    box-sizing: border-box;
}

    .fotoDniPaciente .sinFotoDni .glyphicon { font-size: 20px; color: #b3bdd1; }

/* Mientras se arrastra un fichero por encima. */
.fotoDniPaciente.encima .marcoFotoDni { background: #eaf2fd; }
.fotoDniPaciente.encima .sinFotoDni { border-color: #29457d; color: #29457d; }

/* ---------------------------------------------------------------------
   TABLAS DE VISITAS DEL PACIENTE, TODO EN UNA LINEA (Enrique, 16-09-2026:
   "la tabla de ultimas visitas sale muy mal, en dos lineas... el historial
   de consultas en cuatro o cinco... pasalo a una sola linea, mismo tamaño
   y estructura que la tabla de Proximas visitas").

   Dos causas y dos arreglos:
     1. La cabecera se partia porque el historial lleva seis columnas de
        iconos con rotulos largos. Esos rotulos ya son un icono (ver
        CabeceraIcono en Asistencia.cshtml).
     2. El contenido se partia porque los nombres de clinica y de medico son
        largos. Ahora cada celda va en una linea y, si no cabe, se corta con
        puntos suspensivos y el texto entero queda en el tooltip del titulo.
   --------------------------------------------------------------------- */
#tblProximasVisitas, #tblUltimasVisitas,
#tblHistorialConsultas, #tblHistorialPruebas, #tblHistorialCirugias {
    table-layout: fixed;
    width: 100% !important;
}

    #tblProximasVisitas > thead > tr > th, #tblUltimasVisitas > thead > tr > th,
    #tblHistorialConsultas > thead > tr > th, #tblHistorialPruebas > thead > tr > th,
    #tblHistorialCirugias > thead > tr > th,
    #tblProximasVisitas > tbody > tr > td, #tblUltimasVisitas > tbody > tr > td,
    #tblHistorialConsultas > tbody > tr > td, #tblHistorialPruebas > tbody > tr > td,
    #tblHistorialCirugias > tbody > tr > td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

/* Las columnas de icono, estrechas y centradas: ahi solo hay un simbolo. */
#tblHistorialConsultas th:nth-child(n+8):nth-child(-n+13),
#tblHistorialConsultas td:nth-child(n+8):nth-child(-n+13),
#tblHistorialPruebas th:nth-child(n+8):nth-child(-n+13),
#tblHistorialPruebas td:nth-child(n+8):nth-child(-n+13),
#tblHistorialCirugias th:nth-child(n+8):nth-child(-n+13),
#tblHistorialCirugias td:nth-child(n+8):nth-child(-n+13) {
    width: 42px;
    text-align: center;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.cabeceraIcono { color: #7b88a0; font-size: 13px; }

/* P1024 (Enrique, 07-10-2026, Pacientes → Visitas): la columna del informe lleva DOS iconos (ojo y flecha) y
   medía 42 px como las de un solo icono: la flecha salía cortada. Más ancha, y todos los iconos de fila al
   mismo tamaño y a la misma altura (el ojo y la flecha quedaban unos píxeles más bajos que los demás). */
/* P1034: con el mismo peso que la regla de 42px de arriba (n+8 / -n+13); si no, aquella gana y el
   icono de descargar se corta. */
#tblHistorialConsultas th:nth-child(13):nth-child(n+13), #tblHistorialConsultas td:nth-child(13):nth-child(n+13),
#tblHistorialPruebas th:nth-child(13):nth-child(n+13), #tblHistorialPruebas td:nth-child(13):nth-child(n+13),
#tblHistorialCirugias th:nth-child(13):nth-child(n+13), #tblHistorialCirugias td:nth-child(13):nth-child(n+13) { width: 64px; }
#tblHistorialConsultas td:nth-child(n+8) .glyphicon,
#tblHistorialPruebas td:nth-child(n+8) .glyphicon,
#tblHistorialCirugias td:nth-child(n+8) .glyphicon { font-size: 15px; line-height: 1; top: 0; vertical-align: middle; }
#tblHistorialConsultas td .dri-pdf-acc, #tblHistorialPruebas td .dri-pdf-acc, #tblHistorialCirugias td .dri-pdf-acc { gap: 12px; }

/*  OJO CON LAS POSICIONES: "Proximas visitas" se pinta desde el servidor y NO lleva la columna de la
    casilla, asi que su fecha es la PRIMERA columna. Las otras cuatro las monta DataTables con la
    casilla delante, y ahi la fecha es la segunda. Poner la misma regla para todas dejaba la fecha de
    "Proximas visitas" en 34 px y salia "1..." (visto en el Chrome de Enrique, 16-09-2026). */
/*  P447 (24-09-2026): en Pacientes → Dashboard, "Ultimas visitas" tampoco lleva casilla —la monta
    DataTables con la fecha la primera— y esta regla le dejaba la fecha en 34 px ("2…"). Los 34 px se
    aplican SOLO cuando la primera columna es de verdad la casilla de marcar. */
#tblUltimasVisitas th:first-child:has(input[type="checkbox"]),
#tblHistorialConsultas th:first-child:has(input[type="checkbox"]), #tblHistorialPruebas th:first-child:has(input[type="checkbox"]),
#tblHistorialCirugias th:first-child:has(input[type="checkbox"]) { width: 34px; text-align: center; }
#tblProximasVisitas th:first-child, #tblUltimasVisitas th:first-child:not(:has(input[type="checkbox"])) { width: 138px; }

#tblProximasVisitas th:last-child, #tblUltimasVisitas th:last-child,
#tblHistorialConsultas th:last-child, #tblHistorialPruebas th:last-child,
#tblHistorialCirugias th:last-child { width: 46px; text-align: center; }

/*  IQTRA (13-10-2026): «antes nos dejaba eliminar citas desde el paciente en Dashboard, ahora solo las
    realizadas y no las futuras». En «Próximas visitas» la última columna lleva DOS iconos desde que se
    añadió «Imprimir recordatorio» (INSUAS, 13-10-2026): impresora + X no caben en 46 px, y como la celda
    corta lo que sobra (overflow: hidden) la X de eliminar quedaba fuera de la vista. Más ancha. */
#tblProximasVisitas th:last-child { width: 76px; }

/*  P1204 (13-10-2026, Clínica Dra. Teresa): en la ficha del paciente → Dashboard el «Tipo de cita» se cortaba
    con «…» y no se sabía si era online o presencial. En Próximas y Últimas visitas esa columna (la 5.ª) se
    muestra entera, en varias líneas si hace falta; el resto sigue en una línea con el texto en el tooltip. */
#tblProximasVisitas > tbody > tr > td:nth-child(5),
#tblUltimasVisitas > tbody > tr:not(:has(input[type="checkbox"])) > td:nth-child(5) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Y la fecha de "Proximas visitas" se alinea a la izquierda como el resto, no centrada. */
#tblProximasVisitas th:first-child { text-align: left; }

/* La fecha no se corta nunca: es lo que se busca con la vista. */
#tblProximasVisitas th:nth-child(1) { width: 152px; }

#tblUltimasVisitas th:nth-child(2),
#tblHistorialConsultas th:nth-child(2), #tblHistorialPruebas th:nth-child(2),
#tblHistorialCirugias th:nth-child(2) { width: 152px; }

/*  CANCELACIONES DE CITA, TODO A LA IZQUIERDA (Enrique, 16-09-2026: "las dos primeras columnas, el
    texto justificado a la izquierda"). Las dos primeras son fechas y DataTables las reconoce como
    tales y las centra; aqui van alineadas como el resto de la tabla, que es lo que se lee de un
    barrido con la vista. */
#tblCancelaciones > thead > tr > th,
#tblCancelaciones > tbody > tr > td {
    text-align: left !important;
    white-space: nowrap;
}

    #tblCancelaciones > tbody > tr > td:last-child { white-space: normal; }

/*  COMPARADOR DE IMAGENES del paciente (Enrique, 16-09-2026, P55: "se abren las dos imagenes una al
    lado de la otra para poderlas ver a la vez, antes y despues"). Todas del mismo ancho y con la misma
    altura: comparar dos fotos de distinto tamaño no sirve de nada. */
.cuerpoComparador { display: flex; gap: 10px; align-items: stretch; }

/* P1040: la ventana de comparar de Documentos, casi a pantalla completa, como la de Fotos. */
#modalComparador .modal-dialog { width: min(1400px, 96vw); max-width: 96vw; margin: 2vh auto; }
.imagenComparada {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .imagenComparada img {
        width: 100%;
        height: 72vh;
        object-fit: contain;
        background: #f4f7fb;
        border: 1px solid var(--borde);
        border-radius: 8px;
    }

    .imagenComparada .pie {
        font-size: 12px;
        color: var(--gris);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* P895: más de dos fotos → dos por fila, como la v1 (col-md-6), un poco más bajas para ver varias. */
.cuerpoComparador.variasFilas { flex-wrap: wrap; }
    .cuerpoComparador.variasFilas .imagenComparada { flex: 0 0 calc(50% - 5px); }
    .cuerpoComparador.variasFilas .imagenComparada img { height: 50vh; }   /* P1040: antes 40vh */

@media (max-width: 800px) {
    .cuerpoComparador { flex-direction: column; }
    .imagenComparada img { height: 40vh; }
    .cuerpoComparador.variasFilas .imagenComparada { flex: 0 0 auto; }
}

/* Celdas de fecha que DataTables centra por reconocerlas como fecha, y aqui se quieren a la izquierda
   (Enrique, 16-09-2026). */
.dri-tabla th.celdaIzquierda, .dri-tabla td.celdaIzquierda { text-align: left !important; white-space: nowrap; }

/*  EL MENU DE LA CAMARA DE LA FOTO DEL PACIENTE (Enrique, 16-09-2026, P62: "el icono esta muy bien
    donde esta, pero el menu que abre no se ve").

    Se abria hacia la derecha y se salia de la tarjeta, que recorta lo que sobresale: se veian "Nu..."
    y "Su..." cortados por el borde. Ahora se abre HACIA DENTRO (pegado por su lado derecho al boton y
    creciendo hacia la izquierda) y la tarjeta deja salir lo que haga falta. */
#div_ficha_Paciente,
#div_ficha_Paciente .fotoFicha { overflow: visible !important; }

#div_ficha_Paciente .fotoFicha .btn-group { z-index: 20; }

    #div_ficha_Paciente .fotoFicha .btn-group .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 190px;
        white-space: nowrap;
    }

        #div_ficha_Paciente .fotoFicha .btn-group .dropdown-menu > li > a {
            padding: 7px 14px;
            font-size: 13.5px;
        }

/* Campo obligatorio que se ha dejado vacio: se marca en rojo al intentar guardar (hoja de quirofano,
   16-09-2026). No es un color de alarma: es donde hay que escribir. */
.campoObligatorioVacio {
    border-color: var(--peligro) !important;
    box-shadow: 0 0 0 2px rgba(214, 69, 69, .12) !important;
}

/* ---------------------------------------------------------------------
   HOJA DE QUIROFANO (Enrique, 16-09-2026, P14: "hay algunos campos que tienen
   diferentes tamaños o estan descentrados").

   Las mismas medidas que docs/GUIA_CAMPOS.md y que el resto del programa: con el
   rotulo DENTRO del campo, 45 px de alto y 19 px de relleno arriba; los textos
   largos crecen hacia abajo pero nunca por debajo de eso. Ancho siempre el de su
   columna, para que dos campos de la misma fila midan lo mismo.
   --------------------------------------------------------------------- */
#formularioDatosQuirofano .floating-label-group > input,
#formularioDatosQuirofano .floating-label-group > select,
#formularioDatosQuirofano .floating-label-group > .chosen-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    padding-top: 19px !important;
    padding-bottom: 4px !important;
    line-height: 1.2 !important;
}

#formularioDatosQuirofano .floating-label-group > textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px;
    height: auto;
    padding-top: 19px !important;
    padding-bottom: 6px !important;
}

/* El rotulo, en una sola linea: dos lineas tapan lo que se escribe. */
#formularioDatosQuirofano .floating-label-group > .floating-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 22px);
}

/* Las filas de campos, todas a la misma altura arriba. */
#formularioDatosQuirofano .row { display: flex; flex-wrap: wrap; align-items: flex-start; }

    #formularioDatosQuirofano .row > [class*="col-"] { float: none; }

/* Los campos con etiquetas (tag-it) y los desplegables con buscador heredan alturas raras de sus
   propias hojas: aqui se les dice que ocupen su caja entera. */
#formularioDatosQuirofano .tagit,
#formularioDatosQuirofano .chosen-container { width: 100% !important; box-sizing: border-box !important; }

/* El visor de facturas (P20) es el mismo que el de documentos. Dentro de la ventana de la cita, que es
   estrecha, se pone uno encima del otro en vez de al lado, y sin el marco de la vista previa: ahi lo
   que se quiere es la lista. */
#mNuevaCita .visorCita { display: block; }
#mNuevaCita .visorCitaMarco { display: none; }
#mNuevaCita .visorCitaLista { max-height: 170px; overflow-y: auto; }

/* ---------------------------------------------------------------------
   HISTORIAL CLINICO DEL PACIENTE: LOS FILTROS, EN UNA SOLA LINEA
   (Enrique, 16-09-2026, P61: "en la linea donde estan todos los desplegables que
   son los filtros, deja todo en una sola linea, porque a la derecha esa zona con
   el boton de imprimir informe completo y los de contraer y desplegar ha quedado
   todo bastante mal").

   Que pasaba: los filtros iban en una caja de 9 columnas de Bootstrap y dentro
   sumaban 12, asi que se apretaban y se partian; y los botones, en las otras 3,
   se amontonaban en dos alturas. Aqui se deja de usar la rejilla para esta linea:
   los filtros se reparten el sitio que haya y los botones se quedan a la derecha.
   --------------------------------------------------------------------- */
#divHistorialClinicoPadre > .row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

    #divHistorialClinicoPadre > .row:first-child > #divFiltrosHistorialClinico {
        flex: 1 1 520px;
        width: auto;
        float: none;
        padding: 0;
    }

    #divHistorialClinicoPadre > .row:first-child > .col-md-3 {
        flex: 0 0 auto;
        width: auto;
        float: none;
        padding: 0;
    }

#divFiltrosHistorialClinico > .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}

    #divFiltrosHistorialClinico > .row > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;          /* sin esto un desplegable largo estira su columna */
        float: none;
        padding: 0;
        margin-bottom: 0;
    }

/* Los botones, en una fila y a la altura de los filtros. */
#divBotonesHistorialPaciente {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    margin-top: 0 !important;
}

/* P524 (móvil, 26-09-2026): a 390 px la columna de los tres botones medía lo que sus botones en una
   sola línea (465 px) y el último se salía de la pantalla. En el móvil ocupa el ancho y los botones
   bajan de línea. */
@media (max-width: 767px) {
    .colBotonesHist { flex: 1 1 100% !important; max-width: 100%; min-width: 0; }
    #divBotonesHistorialPaciente { flex-wrap: wrap; white-space: normal; }
}

/* En pantallas estrechas los filtros pueden partirse: ahi mandan las dos columnas. */
@media (max-width: 1100px) {
    #divFiltrosHistorialClinico > .row { flex-wrap: wrap; }
    #divFiltrosHistorialClinico > .row > [class*="col-"] { flex: 1 1 200px; }
}

/* Los tres iconos de cada visita, juntos y del mismo tamaño. */
.accionVisitaHist { margin-left: 4px; }

/*  PETICIONES A LABORATORIOS (Enrique, 16-09-2026, P60: "esta mal maqueado; aparece el titulo sobre
    una linea, exportar a Excel tambien sobre la linea, y la tabla no se muestra completa").

    La cabecera llevaba el titulo con float:left y los botones con pull-right: cuando los botones no
    cabian se montaban encima del titulo. Aqui la cabecera es una fila con el titulo a la izquierda y
    los botones a la derecha, y si no caben bajan enteros en vez de pisarse. Y la caja de la tabla
    puede deslizarse a lo ancho para que no se corten columnas.  */
#divBodyTablaPeticionLaboratorio { overflow-x: auto; }

    #divBodyTablaPeticionLaboratorio .dri-tabla { width: 100% !important; }

/* Nada de :has(): no esta en todos los navegadores que usan las clinicas. La cabecera lleva su propia
   clase, puesta en la vista. */
.cabeceraPeticionesLab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .cabeceraPeticionesLab > h2 {
        float: none !important;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cabeceraPeticionesLab > .pull-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

/* ---------------------------------------------------------------------
   DATOS PREVISITA: lo que contesto el paciente en su portal (P58).
   Solo se pinta lo que marco: una lista de veinte "No" no la lee nadie, y lo que
   importa antes de una consulta es ver de un vistazo lo que SI tiene.
   --------------------------------------------------------------------- */
.detallePrevisita { display: flex; flex-wrap: wrap; gap: 14px; }

.bloquePrevisita {
    flex: 1 1 300px;
    min-width: 0;
    background: #f8fafd;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 12px 14px;
}

    .bloquePrevisita h4 {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--seccion);
    }

/* Las alergias, destacadas: es el dato que de verdad puede cambiar lo que pasa en la consulta. */
.bloqueAlergias { background: var(--peligro-bg); border-color: var(--peligro); }
    .bloqueAlergias h4 { color: var(--peligro); }

.listaPrevisita { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--texto); }
    .listaPrevisita > li { padding: 2px 0; }

.textoPrevisita { font-size: 13.5px; color: var(--texto); white-space: pre-line; margin: 0; }

.detallePrevisita .info-small { flex: 1 1 100%; }

/* Formulario personalizado de la clinica (25-09-2026): a todo lo ancho, pregunta en negrita y la
   respuesta respetando los saltos de linea de las respuestas largas. */
.bloquePrevisitaAncho { flex: 1 1 100%; }
.listaFormularioPersonalizado > li { padding: 3px 0; }
    .listaFormularioPersonalizado strong { font-weight: 600; color: var(--texto); }
.respuestaFormulario { white-space: pre-line; }

/* ---------------------------------------------------------------------
   ALTA DE FACTURA: QUE LOS TEXTOS QUEPAN (Enrique, 16-09-2026, P11: "los textos
   que no caben en los campos").

   Los rotulos de este bloque son largos ("Numero de pagos financiados",
   "Pendiente de pagar") y, con el rotulo DENTRO del campo, si no caben se montan
   sobre lo escrito. Se les dice que vayan en una linea y, si no caben, se corten
   con puntos suspensivos; el texto entero queda en el title del propio campo.
   Y los importes con su simbolo de moneda tienen un ancho minimo para que no se
   corte la cifra.
   --------------------------------------------------------------------- */
#formulario .floating-label-group > .floating-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 22px);
}

#formulario .input-group { width: 100%; }

    #formulario .input-group > .form-textbox-input { min-width: 110px; }

    /* El simbolo de moneda, pegado y sin robarle sitio a la cifra. */
    #formulario .input-group > .input-group-addon { width: 1%; white-space: nowrap; }

/* Los desplegables largos (estado de pago, numero de pagos) no estiran su columna. */
#formulario .combo-textbox-input { min-width: 0; }

/* =====================================================================
   AGENDA POR MÁQUINAS (17-09-2026, docs/AGENDA_MAQUINAS.md)

   Rejilla a mano: una columna por máquina y las horas a la izquierda. No
   se usa el calendario de siempre porque ése sólo sabe de profesionales
   y de salas, y aquí manda la máquina.
   ===================================================================== */
.agendaMaquinas { width: 100%; overflow-x: auto; }

.agendaMaquinasCabecera,
.agendaMaquinasCuerpo { display: flex; min-width: 100%; }

.agendaMaquinasCabecera { border-bottom: 1px solid #d9d9d9; }

.agendaMaquinasCabecera .agendaMaquinasColumna {
    /* Mismo reparto que las columnas del cuerpo: si no, con una sola máquina la cabecera
       salía estrecha y el nombre no quedaba encima de su columna (17-09-2026). */
    flex: 1 1 0; min-width: 150px;
    padding: 6px 8px; text-align: center; line-height: 1.2;
}

.agendaMaquinasCabecera .agendaMaquinasColumna small { display: block; color: #777; }

.agendaMaquinasHoras {
    position: relative; flex: 0 0 56px; width: 56px;
    border-right: 1px solid #e6e6e6;
}

.agendaMaquinasHora {
    position: absolute; left: 0; right: 4px; text-align: right;
    font-size: 11px; color: #888; border-top: 1px solid #f0f0f0;
}

.agendaMaquinasCuerpo { position: relative; }

.agendaMaquinasCuerpo .agendaMaquinasColumna {
    position: relative; flex: 1 1 0; min-width: 150px;
    border-right: 1px solid #ececec;
}

/* El hueco libre: no se ve, pero se pincha para citar. */
.agendaMaquinasHueco { position: absolute; left: 0; right: 0; cursor: pointer; }
.agendaMaquinasHueco:hover { background-color: #eef6fd; }

.agendaMaquinasSesion {
    position: absolute; left: 2px; right: 2px; overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .15); border-radius: 3px;
    padding: 2px 4px; font-size: 11px; line-height: 1.25; cursor: pointer;
    box-sizing: border-box;
}

.agendaMaquinasSesion small { display: block; color: #555; }

/* Máquina parada: rayado gris, como las citas anuladas del planning. */
.agendaMaquinasParada {
    position: absolute; left: 2px; right: 2px; box-sizing: border-box;
    border: 1px solid #c9c9c9; border-radius: 3px;
    font-size: 11px; color: #666; text-align: center; padding-top: 2px;
    background-color: #f2f2f2;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .06) 6px, transparent 6px, transparent 12px);
}

/* Arrastrar y estirar las sesiones de la agenda por máquinas (17-09-2026). */
.agendaMaquinasSesion { cursor: grab; user-select: none; }
.agendaMaquinasSesion:active { cursor: grabbing; }

/* Tirador de abajo: se estira para alargar la sesión. */
.agendaMaquinasTirador {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    cursor: ns-resize; background-color: rgba(0, 0, 0, .08);
}

.agendaMaquinasParar { float: right; color: #999; }
.agendaMaquinasParar:hover { color: #c9302c; }
.agendaMaquinasParada { cursor: pointer; }

/* --------------------------------------------------- Agenda por máquinas (17-09-2026, segunda vuelta)
   Lo que pidió Enrique: que la cita se lea sin pulsarla (paciente, tratamiento, doctor, despacho y
   el circulito del estado) y los filtros del lado izquierdo. */
.agendaMaquinasSesion b { display: block; font-size: 11.5px; line-height: 1.3; }
.agendaMaquinasSesion b .LeyendaPorLlegar,
.agendaMaquinasSesion b .LeyendaEnEspera,
.agendaMaquinasSesion b .LeyendaEnConsulta,
.agendaMaquinasSesion b .LeyendaTerminado,
.agendaMaquinasSesion b .LeyendaNoAsistencia {
    width: 9px; height: 9px; margin-right: 3px; border: 1px solid rgba(0, 0, 0, .2);
}

/* Las líneas de dentro no se parten: si no cabe, se corta con puntos suspensivos. */
.agendaMaquinasSesion small,
.agendaMaquinasSesion b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.listadoFiltroMaquinas { list-style: none; padding-left: 0; margin-bottom: 0; }
.listadoFiltroMaquinas li { padding: 2px 0; }
.listadoFiltroMaquinas label { font-weight: normal; margin-bottom: 0; cursor: pointer; }
.listadoFiltroMaquinas input[type="checkbox"] { margin-right: 6px; }

#calendarioMaquinas .ui-datepicker { width: 100%; }

/* El desplegable de la franja, igual que los de la barra de la agenda. */
#ddlFranjaMaquinas { max-width: 190px; }

/* La leyenda de estados del lado izquierdo: una por línea, como en la agenda de consulta. */
#leyendaAgendaMaquinas .listadoLeyenda { list-style: none; padding-left: 0; margin-bottom: 0; }
#leyendaAgendaMaquinas .listadoLeyenda li { display: block; padding: 3px 0; white-space: nowrap; }
#leyendaAgendaMaquinas .listadoLeyenda li span { margin-right: 6px; vertical-align: middle; }

/* =====================================================================
   AGENDA EN COLUMNAS (movido aquí el 17-09-2026)

   Estaba escrito dentro de Views/Agenda/Index.cshtml. Se saca a la hoja
   común porque la AGENDA POR MÁQUINAS usa exactamente la misma pinta —
   los mismos paneles blancos, las mismas líneas de horas y el mismo
   aspecto de la cita— y Enrique lo pidió así: "que copies los mismos
   estilos, no que inventes todo nuevo".

   No se ha cambiado ni una regla: es el mismo texto que había.
   ===================================================================== */

    /* ------------------------------------------------------------------
       VISTA DE DIA CON VARIOS PROFESIONALES, EN COLUMNAS (11-09-2026)

       Cada profesional en su columna, uno al lado del otro, para poder
       comparar el dia de un vistazo y arrastrar citas de uno a otro.
       Las columnas se reparten solas: con dos salen anchas, con siete
       estrechas, y por debajo de 1200 px vuelven a apilarse (en un movil
       siete columnas no se leen).
       ------------------------------------------------------------------ */
    @media (min-width: 1200px) {
        #calendar.agendaColumnas {
            display: flex;
            flex-wrap: nowrap;
            gap: 10px;
            align-items: flex-start;
            overflow-x: auto;
        }

            #calendar.agendaColumnas > .agendaColumna {
                flex: 1 1 0;
                /* Por debajo de esto no se lee el nombre del paciente: si no caben, la fila
                   se desplaza a lo ancho en vez de espachurrar las columnas. */
                min-width: 240px;
            }

            /* Con muchas columnas, la letra y los huecos se ajustan solos. */
            #calendar.agendaColumnas .panel-heading h2 { font-size: 13px; }
            #calendar.agendaColumnas .fc { font-size: 11px; }
            #calendar.agendaColumnas .fc .fc-timegrid-slot-label-cushion { font-size: 10px; }
    }

    /* Aspecto de la agenda: mismo resultado visual que el fullCalendar 2.2.6 antiguo. */
    #calendar .panel { overflow: hidden; }
    #calendar .fc { border-radius: 0 0 4px 4px; font-size: 12px; }
    #calendar .panel-heading h2 { font-size: 16px; margin: 0; }

    .fc .fc-toolbar { display: none; }
    .fc .fc-col-header-cell-cushion { padding: 6px 4px; color: #2b3a67; font-weight: normal; }
    .fc .fc-timegrid-slot-label-cushion { font-size: 11px; color: #555; }
    /* P823 (Fisioterapia Getafe Norte, 05-10-2026: «el turno que creamos de 10:00 a 13:00 parece de 9:30 a
       12:30»). La hora de cada franja iba centrada en su fila, así que el borde de arriba de un turno de las
       10:00 quedaba por encima del rótulo «10:00» y se leía como media hora antes. Como en la v1: la hora,
       pegada a la línea donde empieza esa franja. */
    .fc .fc-timegrid-slot-label { vertical-align: top; }
    .fc .fc-timegrid-slot-label-cushion { padding-top: 0; line-height: 1.1; }
    .fc .fc-timegrid-slot-label-frame { line-height: 1; }
    /* Altura de cada franja: la misma que en producción (~20 px por franja de 5 minutos, para que quepan
       varias horas en pantalla sin necesidad de desplazarse nada más abrir la agenda). */
    .fc .fc-timegrid-slot { height: 20px; }
    .fc .fc-scrollgrid { border-color: #dde3ee; }
    /* El calendario tiene altura acotada (se le pasa en la opción height) y se desplaza por dentro:
       nunca una página de miles de píxeles. Este tope es la red de seguridad por si algo falla. */
    #calendar [id^="calendario"] { max-height: 720px; overflow: auto; }

    /* Las citas van con texto oscuro sobre el color de su tipo/estado, como en producción. El borde es el
       color de la propia cita (así lo pintaba el fullCalendar 2.2.6) más la barra oscura de la izquierda,
       el redondeo y la sombra que da el CSS heredado (#calendar .fc-event de DriCloud2021.css). */
    #calendar .fc-event {
        border-radius: 5px;
        border-left: 4px solid rgba(0, 0, 0, 0.25);
        box-shadow: 3px 3px 3px rgba(0, 0, 0, .05);
        color: #222;
        font-size: 12px;
    }
    .fc .fc-event-main { color: #222; padding: 1px 3px; overflow: hidden; }
    /* P369: cita con fondo oscuro (color del tipo de cita): el texto en blanco para que se lea. */
    #calendar .fc-event.citaFondoOscuro,
    .fc .citaFondoOscuro .fc-event-main,
    .fc .citaFondoOscuro .fc-event-main * { color: #fff !important; }
    /* El dia de hoy: FullCalendar lo pinta de amarillo fuerte de serie; se deja un tinte frio
       apenas perceptible, del color de la propia aplicacion. */
    /* P913 (Enrique, 05-10-2026): como el calendario de Apple, la columna de hoy va en blanco y solo
       se marca arriba el número del día en un círculo rojo (antes: tinte azul en toda la columna). */
    #calendar { --fc-today-bg-color: transparent; }
    #calendar .cabeceraHoy,
    #calendar .fc-day-today .fc-daygrid-day-number {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
        background: #e8453c; color: #fff !important; font-weight: 600; line-height: 1;
    }
    #calendar .fc-day-today .fc-daygrid-day-number { margin: 2px; text-decoration: none; }

    /* Texto de la cita. El estado va arriba a la derecha, FUERA del flujo, para que no empuje al
       nombre del paciente: en una cita estrecha (dos o tres a la misma hora) antes se comia el
       texto entero y solo quedaba "Por llegar". */
    .fc .fc-event-main-frame { position: relative; }
    /* Se reserva a la derecha el hueco del estado para que no caiga encima del texto. */
    /* P819 (IQTRA, 05-10-2026): letra un poco mayor y líneas más juntas, como la v1: en una cita de 30 min
       caben tres líneas (hora y estado; nombre completo y tipo; aseguradora y despacho). */
    /* P934 (Enrique, 06-10-2026): con 12 px y las líneas tan juntas la letra se veía «tosca, demasiado negrita».
       Como antes de P819 (11 px, líneas de 15 px, seminegrita y suavizada), con medio punto más. */
    .citaCabecera { font-size: 11.5px; line-height: 14px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: normal; overflow-wrap: anywhere; }
    .citaDetalle { font-size: 11.5px; line-height: 14px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; white-space: normal; overflow-wrap: anywhere; clear: none; }
    /* P819: la cita corta, en una sola línea que corta al final (lo primero es la hora y el nombre). */
    .citaCabecera.citaCorta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* El estado va flotado a la derecha DENTRO del texto: solo acorta la primera linea y el texto
       nunca se mete debajo (con el padding fijo de antes "Finalizada" + circulo se salia del hueco). */
    .citaEstado {
        float: right;
        margin-left: 4px;
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        opacity: .85;
        pointer-events: none;
    }
    .citaEstado .LeyendaPorLlegar, .citaEstado .LeyendaEnEspera, .citaEstado .LeyendaEnConsulta,
    .citaEstado .LeyendaTerminado, .citaEstado .LeyendaNoAsistencia { vertical-align: middle; }

    /* En bloques estrechos (varias citas a la misma hora y, sobre todo, en el MÓVIL) el texto del
       estado estorba: se quita el texto y se deja SOLO el circulito de color (P527, Enrique
       26-09-2026: «en el móvil deja de verse el circulito del estado; no hace falta texto, solo el
       circulito con el color»). Antes se quitaba todo el estado. Lo marca eventDidMount midiendo
       el ancho de verdad. */
    .fc-event.citaEstrecha .citaEstadoTexto { display: none; }
    .fc-event.citaEstrecha .citaEstado { max-width: none; margin-left: 2px; opacity: 1; line-height: 0; }
    .fc-event.citaEstrecha .citaEstado > span:last-child { width: 10px; height: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }

    /* Las citas van un poco translucidas: cuando dos o tres se solapan a la misma hora se
       adivina la de debajo en vez de quedar tapada del todo. */
    #calendar .fc-timegrid-event { opacity: .92; }
    #calendar .fc-timegrid-event:hover { opacity: 1; }

    /* Turnos: fondo muy claro donde se pueden crear citas (equivale al "background" del antiguo).
       OJO con el color: el fondo del turno se pinta en una capa POR ENCIMA de las lineas de la
       rejilla, asi que si es opaco las tapa y la columna se queda sin las lineas de las horas
       (07-09-2026: no se veian las separaciones donde habia turno abierto). Se deja translucido
       para que las lineas se sigan viendo por debajo, como en la v1. */
    /*  P807 (Emma, 05-10-2026): «al final del último turno quedan huecos vacíos y parece que se puede
        citar». Esa media hora de después del último turno estaba también en la v1 (se pinta para ver bien
        dónde acaba), pero allí el turno era de un azul claramente visible (#bdc9e8) y lo de fuera, blanco:
        se veía de un vistazo que ahí no había turno. Aquí el azul era tan pálido (0.45 sobre #d6e6ff) que
        turno y no-turno parecían iguales. Vuelve el azul de la v1, translúcido para que las líneas de las
        horas se sigan viendo. */
    /*  P913 (Enrique, 05-10-2026): ese azul «agobia, demasiado oscuro». El turno pasa al azul muy
        claro con el que antes se marcaba el día de hoy (y hoy ya no lleva fondo, así que no se confunden). */
    /*  P927 (Enrique, 06-10-2026): «un poquito más oscuro, más parecido al azul de fondo del software, para
        que se distinga cuando hay un turno abierto, pero que no agobie». El azul de la casa (#3568a8) al 10 %:
        queda como el fondo gris azulado de las pantallas, un punto por encima del de antes (5 %). */
    .fc .fc-bg-event {
        background: rgba(58, 135, 173, 0.05);   /* P933 (Enrique, 06-10-2026): vuelve el tono de antes (P913) */
        opacity: 1;
    }

    /* Y las lineas de las horas, un poco mas marcadas: en punto mas oscura que las intermedias,
       igual que en la v1. */
    .fc .fc-timegrid-slot { border-bottom: 1px solid #eef1f7; }
    .fc .fc-timegrid-slot.fc-timegrid-slot-label,
    .fc .fc-timegrid-slot-minor { border-bottom-style: solid; }
    .fc .fc-timegrid-slot:not(.fc-timegrid-slot-minor) { border-bottom-color: #dde3ee; }


/* Cabecera de cada columna de la agenda por máquinas: el nombre y, debajo, dónde está. */
/* La cabecera del panel es blanca con el texto azul (como la del profesional en la agenda), así que
   el subtítulo va en gris y el botón de parar en el azul de la casa (17-09-2026: iban en blanco y no
   se veían). */
#calendar .maquinaSubtitulo { display: block; font-size: 11px; color: #7b8aa3; font-weight: normal; }

/*  El botón de parar la máquina va en la cabecera de SU columna. Antes se colocaba respecto al
    contenedor de todas y sólo se veía en la última (Enrique, 17-09-2026); por eso la cabecera pasa a
    ser el punto de referencia. Y va en rojo, con su borde, para que se vea que es el de parar. */
#calendar .panel-heading { position: relative; }

/*  Centrado a la ALTURA de la cabecera, a la derecha (19-09-2026, Enrique: "no esta centrado,
    esta como un poco alto"). Con top fijo quedaba pegado arriba porque la cabecera tiene dos líneas
    (nombre y despacho). */
#calendar .maquinaAcciones { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

#calendar .maquinaAcciones .btn-parar-maquina {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    border: 1px solid #e3b7b6; background-color: #fdf3f3; color: #c9302c;
    font-size: 12px; line-height: 18px; text-decoration: none;
}

/*  Al pasar el ratón: fondo rojo y TODO en blanco, letra e icono (19-09-2026: la letra se quedaba
    en el azul de los enlaces de la cabecera y sobre el rojo no se leía). Por eso lleva !important:
    la regla de los enlaces de .panel-heading pesa más que ésta. */
#calendar .maquinaAcciones .btn-parar-maquina:hover,
#calendar .maquinaAcciones .btn-parar-maquina:focus { background-color: #c9302c; color: #fff !important; border-color: #c9302c; text-decoration: none; }
#calendar .maquinaAcciones .btn-parar-maquina:hover .glyphicon,
#calendar .maquinaAcciones .btn-parar-maquina:focus .glyphicon { color: #fff !important; }
#calendar .maquinaAcciones .btn-parar-maquina .glyphicon { margin-right: 4px; }

/*  El hueco de limpieza: dentro de su columna, con su nombre escrito y sin taparlo todo.

    El margen de la derecha es el mismo hueco que FullCalendar deja a las citas: sin él, la banda gris
    sobresalía por la derecha y quedaba mal (Enrique, 17-09-2026). */
/* 17px: es lo que hace falta para que la banda gris acabe justo donde acaba la cita (medido). */
#calendar .fc-timegrid-bg-harness { right: 17px; }
#calendar .fc-bg-event { margin: 0 2px; border-radius: 3px; }
#calendar .textoLimpieza {
    font-size: 10px; color: #5f5f5f; padding: 0 4px; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* La ventana de los tratamientos de una máquina se desplaza por dentro: con 170 el botón Guardar
   se iba al final de la página y no se veía (17-09-2026). */
.cuerpoTratamientosMaquina { max-height: 60vh; overflow-y: auto; }

/*  El botón "Clínica" de la vista de clínica del dietario: bajito, para que la fila del paciente
    citado mida lo mismo que las demás (17-09-2026). Los botones de la v2 miden 34 px de alto y en una
    rejilla de 22 px eso hincha la fila entera. */
.botonClinicaDietario {
    padding: 1px 8px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 18px !important;
    font-size: 12px !important;
}

.botonClinicaDietario img { vertical-align: text-bottom; margin-right: 3px; }

/* =====================================================================
   REPASO DE LA VENTANA DE FACTURA (17-09-2026, Enrique)
   ===================================================================== */

/*  El desplegable de conceptos favoritos: el texto de la opción elegida se salía por debajo del
    recuadro y no se leía. Pasaba porque heredaba el relleno de arriba de los campos con rótulo
    dentro (19 px), y aquí el rótulo no va dentro: va la casilla encima. */
.filaConceptoFavorito > select.form-textbox-input {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.4;
}

/*  Firma digital y Timbrado: las casillas y su explicación salían una al lado de otra y torcidas.
    Cada cosa en su línea y a lo ancho del panel. */
.panelFirmaTimbrado .checkbox { display: block; width: 100%; margin: 0 0 6px; }
.panelFirmaTimbrado .checkbox + .checkbox { margin-top: 2px; }

.panelFirmaTimbrado .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: normal;
    padding-left: 0;
    white-space: normal;
    line-height: 1.3;
}

.panelFirmaTimbrado .checkbox label input[type="checkbox"] { position: static; margin: 2px 0 0; flex: 0 0 auto; }

.panelFirmaTimbrado .ayudaFirmaTimbrado {
    display: block;
    width: 100%;
    clear: both;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

/*  La flecha de descargar del visor de facturas: iba pegada a la línea que separa una factura de la
    siguiente y parecía de la de abajo. Sube a la altura del número de factura. */
.visorCitaLista li { position: relative; }

.visorCitaDescargar {
    position: absolute;
    right: 6px;
    top: 6px;
    float: none;
}
/* P331: la X de borrar, a la izquierda de la flecha de descargar; el título deja sitio a las dos. */
.visorCitaLista li:has(.visorDocBorrar) { padding-right: 52px; }
.visorCitaLista .visorDocBorrar { position: absolute; right: 28px; top: 6px; }
/* P613: en el visor de facturas la fila entera elige la vista previa; la elegida queda marcada. */
.visorCitaLista li.facturaCitaFila { cursor: pointer; border-left: 3px solid transparent; transition: background-color .12s; }
.visorCitaLista li.facturaCitaFila:hover { background: #f6f8fc; }
.visorCitaLista li.facturaCitaFila.seleccionada { background: #eaf0fa; border-left-color: #29457d; }
.visorCitaLista li.facturaCitaFila:focus-visible { outline: 2px solid #29457d; outline-offset: -2px; }

/* ---------------------------------------------------------------------
   "Programar cirugia" (ventana de asignar intervencion), 17-09-2026.
   Enrique: "el formulario que abre esta muy feo y raro... utiliza los
   parametros que usamos siempre".

   La ventana ya usa el formato de campos de siempre; aqui solo va la
   separacion entre filas y la linea de cabecera con el paciente y el
   doctor, para que ni los rotulos ni lo escrito se peguen ni se corten.
   --------------------------------------------------------------------- */
#mAsignarIntervencion .modal-body .row { margin-bottom: 10px; }
#mAsignarIntervencion .floating-label-group { margin-bottom: 0; }

#mAsignarIntervencion .cabeceraIntervencion {
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #e3e6ef;
    color: #5a6b85;
    font-size: 13.5px;
}

    #mAsignarIntervencion .cabeceraIntervencion > span { margin-right: 18px; }

/* Las tres areas de texto crecen con lo escrito, pero que se vean dos lineas
   de entrada (es donde mas se escribe en esta ventana). */
#mAsignarIntervencion .floating-label-group textarea.form-textbox-input {
    min-height: 64px !important;
}

/* ---------------------------------------------------------------------
   El rotulo de dentro del campo, SIEMPRE en una linea (17-09-2026).

   Enrique, del campo "Formulario de Historia Clinica" de la historia
   clinica: "es demasiado pequeño y el texto se sale fuera del campo". Lo
   que se salia era el rotulo: en dos lineas se mete encima de lo escrito
   y desborda el cuadro. Es la regla 1 de docs/GUIA_CAMPOS.md, asi que se
   pone para todos: una linea, y lo que no cabe se corta con puntos
   suspensivos (el nombre entero sigue en el title).
   --------------------------------------------------------------------- */
.floating-label-group .floating-label {
    display: block;
    max-width: calc(100% - 22px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Y lo elegido en un desplegable tampoco se sale: se corta donde acaba el
   campo, dejando su hueco a la flecha. */
.floating-label-group select.form-textbox-input,
.floating-label-group select.combo-textbox-input {
    text-overflow: ellipsis;
}

/* La lista de medicamentos favoritos de la receta: alta y con su buscador
   encima (Enrique, 17-09-2026: "se abren todos en una lista pequeña y no hay
   un buscador"). */
.listaFavoritosReceta {
    height: auto !important;
    min-height: 160px;
    padding: 4px 6px !important;
}

/* =====================================================================
   REPASO DEL 17-09-2026 (tarde), sobre lo que Enrique volvió a ver mal
   ===================================================================== */

/*  Conceptos favoritos de la factura: el texto de la opción elegida seguía
    saliéndose por debajo del recuadro. La regla de antes no llevaba
    !important y la hoja heredada de la v1 (45 px de alto con 1,9rem de
    relleno arriba) le ganaba. Aquí se fija de una vez. */
.filaConceptoFavorito > select.form-textbox-input,
.filaConceptoFavorito > select.combo-textbox-input,
#ddlConceptosFavoritos {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 30px 4px 11px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

/*  Ventana de cita: "Canal", "CRM Estado" y "Estado de cita" se montaban
    unos encima de otros. Iban con .height20 (20 px fijos) y dentro llevan
    un <p> y un desplegable, que no caben. Se les deja el alto que pidan y
    un poco de aire entre líneas. */
#div_Canal.height20,
#div_Estado.height20,
#div_EstadoCita.height20,
#div_FichaPacSel .form-group.height20 {
    height: auto !important;
    min-height: 22px;
    margin-bottom: 6px;
    line-height: 1.5;
}

    #div_FichaPacSel .form-group.height20 > p {
        display: inline;
        margin: 0;
    }

    #div_FichaPacSel .form-group.height20 select.form-control-applestyle {
        line-height: 1.4;
        vertical-align: baseline;
    }

/*  Filtro de hospitales de la columna izquierda: la casilla y el nombre, en
    línea y alineados (17-09-2026). */
.lineaFiltroHospital { margin: 0 0 4px; padding: 0; }
    .lineaFiltroHospital > label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 0;
        margin: 0;
        font-weight: normal;
        line-height: 1.3;
    }
    .lineaFiltroHospital > label > input[type="checkbox"] {
        position: static;
        margin: 0;
        flex: 0 0 auto;
    }

/*  Asignaciones de camas: UNA línea por paciente ingresado, como en la v1
    (Enrique, 17-09-2026: "ahora hay 3 líneas o más y no me gusta"). */
#tblHospitalizacion tbody td { white-space: nowrap; }

/* =====================================================================
   TODAS LAS TABLAS, A RAYAS (17-09-2026)

   Enrique: "en la V1 todas las tablas se muestran con una línea un poco
   sombreada y la siguiente blanca... un color bonito un poco azul claro.
   ¿Puedes cambiar todas las tablas de la V2, todas, en todos los sitios,
   a este estilo?".

   Se hace aquí, en la hoja que se carga la última, para que valga en
   TODAS las pantallas de una vez: las tablas de v2 (.dri-tabla), las que
   pinta DataTables y las tablas normales de Bootstrap. El azul es muy
   claro (#f5f8fd) para que no moleste y se siga leyendo todo.
   ===================================================================== */
/*  Va con !important porque las hojas de DataTables que se meten dentro de
    la propia página ponen las filas "transparent" y, al ir después, ganaban. */
table.dri-tabla tbody > tr:nth-of-type(odd) > td,
table.dri-tabla.dataTable tbody > tr:nth-of-type(odd) > td,
table.dataTable tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > td,
table.table tbody > tr:nth-of-type(odd) > td {
    background-color: #f5f8fd !important;
}

table.dri-tabla tbody > tr:nth-of-type(even) > td,
table.dri-tabla.dataTable tbody > tr:nth-of-type(even) > td,
table.dataTable tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > td,
table.table tbody > tr:nth-of-type(even) > td {
    background-color: #fff !important;
}

/*  Lo que tiene color propio manda sobre las rayas: la fila marcada y las
    filas que traen su color puesto a mano (estados, horas cerradas). */
table.dri-tabla tbody > tr.selected > td,
table.dataTable tbody > tr.selected > td {
    background-color: #eaf1fb !important;
}

table.dri-tabla tbody > tr[style*="background"] > td,
table.dataTable tbody > tr[style*="background"] > td {
    background-color: transparent !important;
}

/*  Asignaciones de camas: filas compactas, de una línea (17-09-2026). */
#tblHospitalizacion tbody td { padding-top: 6px !important; padding-bottom: 6px !important; vertical-align: middle; }
#tblHospitalizacion tbody select.editable { max-width: 150px; }

/*  Hospitalización: los botones de la última columna se apilaban (el .btn-group de Bootstrap flota
    sus botones y la columna es estrecha), y por eso la fila medía 121 px en vez de una línea.
    Con flex en una sola línea y un ancho mínimo para esa columna, cada paciente ocupa una línea. */
#tblHospitalizacion tbody .btn-group { display: inline-flex; flex-wrap: nowrap; float: none; }
#tblHospitalizacion tbody .btn-group > .btn { float: none; flex: 0 0 auto; }

/*  La columna de acciones es ahora un desplegable (como la v1), no cuatro botones: asi la tabla
    cabe en la pantalla y no hay que desplazarse de lado (Enrique, 17-09-2026). Los desplegables de
    dentro de la tabla se ajustan para que no se coman el ancho. */
#tblHospitalizacion tbody select.accionesCama { width: 100%; min-width: 120px; }
#tblHospitalizacion tbody select.editable { max-width: 130px; }
#tblHospitalizacion tbody td, #tblHospitalizacion thead th { padding-left: 8px !important; padding-right: 8px !important; }

/*  El desplegable de tipo de agenda, un poco mas ancho: no cabia "Hospitalizacion". */
select#ddlTipos.comboTipoAgenda { min-width: 170px; }
/*  La tabla de camas es más ancha que la pantalla (13 columnas): sin esto las tres últimas
    —alertas, estado y botones— quedaban fuera y no había forma de llegar a ellas. */
#divListHospitalizacion .dt-layout-cell.dt-layout-full { overflow-x: auto; }

/*  ---------------- Alta de factura (17-09-2026, repaso de Enrique) ----------------
    1) El botón "Añadir" quedaba 10 px más alto que el campo "Concepto" porque los campos con
       rótulo dentro empiezan más abajo. Se baja para que las dos cajas queden a la misma altura.
    2) El rótulo "Estado Pago" llevaba fondo blanco: sobre el campo de color (rojo si no está
       pagada, verde si sí) parecía una pegatina. Se deja transparente y el texto va directo. */
.botonAnadirConcepto { margin-top: 10px; }
.floating-label-group > label.floating-label[for="cmbxEstadoPagado"] { background: transparent; }

/*  Historia clínica: "Tipo de cita", "Formulario de historia clínica" y "Estado de cita" ocupan un
    tercio de la línea cada uno (Enrique, 17-09-2026). Las columnas ya eran de un tercio, pero las
    reglas de .topBar / .form-inline dejaban los desplegables en 125 px dentro de 620. */
.topBar.detMed > .form-group { padding-left: 8px; padding-right: 8px; }
.topBar.detMed .floating-label-group { width: 100%; }
.topBar.detMed .floating-label-group > select.form-control { width: 100% !important; min-width: 0; max-width: none !important; }

/*  Stock → Nuevo artículo: la explicación del pedido automático empieza debajo de la casilla y
    alineada con su texto, no a su derecha (Enrique, 17-09-2026). La casilla de Bootstrap va flotada. */
.bloquePedidoAutomatico .checkbox { float: none; }
.bloquePedidoAutomatico .ayudaPedidoAutomatico { display: block; clear: both; margin-left: 20px; text-align: left; }

/*  ------- Asistente IA: la conversación guardada, leída como una conversación (17-09-2026) ------- */
.chatbot-cabecera {
    background: #f4f6fa; border: 1px solid #e3e6ef; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; color: #3c4a66;
}
.chatbot-cabecera .chatbot-dato { margin-right: 16px; white-space: nowrap; }
.chatbot-hilo { max-height: 60vh; overflow-y: auto; padding: 2px; }
.chatbot-linea { display: flex; margin-bottom: 12px; }
.chatbot-linea.es-asistente { justify-content: flex-start; }
.chatbot-linea.es-paciente { justify-content: flex-end; }
.chatbot-burbuja { max-width: 78%; padding: 10px 14px; border-radius: 10px; }
.chatbot-linea.es-asistente .chatbot-burbuja { background: #eaf2fd; }
.chatbot-linea.es-paciente .chatbot-burbuja { background: #e6f4ea; }
.chatbot-quien { display: block; font-size: 12.5px; color: #6b7a94; margin-bottom: 3px; }
.chatbot-texto { color: #23303f; font-size: 14.5px; line-height: 1.45; }
.chatbot-pie { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e3e6ef; font-size: 13px; color: #5a6b85; }

/*  ---------------- Asistente IA: ajustes (17-09-2026, repaso de Enrique) ---------------- */
.iconosChatbot { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

/*  Los emojis necesitan la tipografía de emojis del sistema: con la del programa salían como
    cuadraditos sin color (17-09-2026). El campo del icono y la frase de ayuda, igual. */
/*  SÓLO en los botones de emoji y en el propio campo: puesta en un párrafo entero, la tipografía de
    emojis desmaquetaba el texto normal (visto el 17-09-2026). */
.iconosChatbot .btn.btn-default,
.iconosChatbot .btn,
input#txtBotIcono.form-control {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
}
.iconosChatbot .btn { font-size: 18px; line-height: 1; padding: 4px 10px; }

/*  Las dos casillas de "dónde contesta", a la misma altura. */
#divAsistenteIAConfiguracion .checkbox-inline { vertical-align: middle; }

.etiquetaMargenBot { display: block; font-size: 12.5px; color: #5a6b85; margin-bottom: 6px; }
.barraMargenBot input[type="range"] { width: 100%; }
.extremosMargenBot { display: flex; justify-content: space-between; font-size: 12px; color: #6b7a94; margin-top: 2px; }
.extremosMargenBot strong { color: #29457d; }

/*  Acordeón de ayuda (las instrucciones de Meta para WhatsApp): plegado por defecto, que son
    siete pasos y no hacen falta todos los días. */
.acordeonAyuda { margin: 8px 0 12px; }
.acordeonAyuda .botonAcordeonAyuda { padding: 0; font-weight: 600; color: #29457d; text-decoration: none; }
.acordeonAyuda .cuerpoAcordeonAyuda {
    margin-top: 8px; padding: 12px 14px; background: #f4f6fa;
    border: 1px solid #e3e6ef; border-radius: 6px; font-size: 13.5px; color: #3c4a66; line-height: 1.55;
}

/*  ---------------- Cita online: pantalla de ajustes (17-09-2026, repaso de Enrique) ----------------
    Casi todo lo que estaba "apelmazado" venía de lo mismo: las casillas y los radios de Bootstrap
    van flotados, así que se montaban unos encima de otros y encima de los títulos. */
.mk-casillas-citaonline .checkbox { float: none; display: block; margin: 0 0 6px; }
.mk-fila-propia { float: none; clear: both; display: block; margin: 10px 0 4px; }
.mk-fila-propia .radio-inline { float: none; margin-right: 22px; }

/*  El bloque de los médicos empieza en su propia línea, con el nombre encima del cuadro de texto. */
.mk-doctor-citaonline { clear: both; }
.mk-doctor-citaonline .mk-nombre-doctor { float: none; display: block; margin: 0 0 6px; }
.mk-doctor-citaonline .mk-etiqueta-info { display: block; font-size: 12.5px; color: #5a6b85; margin-bottom: 4px; }

/*  Las dos casillas de cada aseguradora, en línea y a la misma altura. */
.mk-aseguradora .checkbox { float: left; margin: 0 16px 0 0; }
.mk-aseguradora h4 { clear: both; margin-bottom: 6px; }
.mk-aseguradora::after { content: ""; display: block; clear: both; }

/*  El código a insertar se ve entero: se parte en líneas en vez de cortarse. */
.mk-codigo-entero { white-space: pre-wrap; word-break: break-all; margin-bottom: 8px; }
.mk-preseleccion { margin-top: 14px; }

/*  El selector de color, al lado de su hexadecimal. */
.mk-color-fila { display: block; margin-top: 6px; }
.mk-color-fila .mk-ayuda { display: block; margin-top: 4px; }
.mk-selector-color { width: 100%; height: 38px; padding: 2px; border: 1px solid #e3e6ef; border-radius: 6px; background: #fff; cursor: pointer; }

/*  El título de los médicos, separado de la línea de los radios de arriba. */
.mk-bloque-citaonline .mk-titulo { margin-top: 18px; }

/*  Las letras pequeñas de esta pantalla eran demasiado pequeñas. */
#cuerpoCitasOnline .mk-ayuda { font-size: 13.5px; }
#cuerpoCitasOnline label, #cuerpoCitasOnline .checkbox label, #cuerpoCitasOnline .radio-inline { font-size: 14px; }

/*  ---------------- Consulta online: la tabla (17-09-2026, repaso de Enrique) ---------------- */
/*  Los nombres de paciente, en el azul de enlace de siempre: salían casi del color del texto y no
    se veía que se pudieran pulsar. */
a.enlacePacienteTabla { color: #2b6cb0; font-weight: 600; }
a.enlacePacienteTabla:hover, a.enlacePacienteTabla:focus { color: #1f4f85; text-decoration: underline; }

/*  El ojo y el icono de documentos, sin el recuadro del botón: sólo el símbolo. */
a.ojoTabla { color: #4a6b9a; font-size: 15px; margin-right: 6px; text-decoration: none; }
a.ojoTabla:hover { color: #29457d; }

/*  La papelera de cada documento, dentro del visor, en la misma línea que la flecha de descargar. */
#cuerpoDocumentosConsulta .visorCitaLista li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 8px; }
#cuerpoDocumentosConsulta .visorCitaLista li .visorCitaEnlace { grid-column: 1; }
#cuerpoDocumentosConsulta .visorCitaLista li .text-muted { grid-column: 1; font-size: 12px; }
#cuerpoDocumentosConsulta .visorCitaLista li .visorCitaDescargar { grid-column: 2; grid-row: 1 / span 2; }
#cuerpoDocumentosConsulta .visorCitaLista li .visorCitaBorrar { grid-column: 3; grid-row: 1 / span 2; }
.visorCitaLista .visorCitaBorrar { color: #b64b4b; }
.visorCitaLista .visorCitaBorrar:hover { color: #8d3636; }

/*  La ventana de "ver descripción": los campos, separados y legibles. */
.ventanaDescripcionConsulta { font-size: 14.5px; line-height: 1.6; color: #23303f; text-align: left; }
.ventanaDescripcionConsulta .row { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eef1f6; }
.ventanaDescripcionConsulta .row:last-child { border-bottom: 0; }
.ventanaDescripcionConsulta label,
.ventanaDescripcionConsulta strong { display: block; font-size: 12.5px; color: #5a6b85; font-weight: 600; margin-bottom: 2px; }
.ventanaDescripcionConsulta br + br { line-height: 2.2; }

/*  ---------------- Telemedicina / Marketing: legibilidad (17-09-2026) ----------------
    Enrique: "en todos estos menús tienes que revisar la letra, no la de los títulos sino la de la
    EXPLICACIÓN, porque es demasiado pequeña". Las frases de ayuda iban a 12 px. */
.mk-ayuda, .mk-bloque-citaonline .mk-ayuda { font-size: 14px; line-height: 1.55; color: #55637d; }
.mk-titulo { font-size: 15.5px; }

/*  El desplegable del profesional de cada servicio: sin un ancho mínimo, el nombre salía cortado
    por la mitad (Enrique, 17-09-2026). */
/*  Ancho suficiente para el nombre, y alto coherente con la línea: con 30 px de alto y 30 px de
    interlineado el nombre se cortaba por abajo (17-09-2026). */
select.mk-doctor {
    min-width: 190px;
    width: 100%;
    height: 34px;
    line-height: normal;
    padding: 4px 8px;
    font-size: 14px;
}
#tblServiciosConsulta td, #tblServiciosPago td { vertical-align: middle; }

/*  Consulta online: la fila de servicio marcada, con el azul claro de siempre (17-09-2026). */
#tblServiciosConsulta tbody tr { cursor: pointer; }
#tblServiciosConsulta tbody tr.dri-fila-marcada > td { background: #eaf1fb !important; color: #23303f !important; }
#divCamposFormularioConsulta { margin-top: 4px; }

/* ===========================================================================
   CITA ONLINE · CONFIGURACIÓN: EL AIRE DE LA V1 (18-09-2026)

   Enrique, con la pantalla de la v1 delante: "dejar un poco de espacio entre cada campo como en la
   V1". En la v1 cada casilla y cada campo respiran; aquí iban pegados y la pantalla parecía un
   formulario apretado. Son solo márgenes: no cambia ningún campo ni ningún dato.
   =========================================================================== */
.mk-casillas-citaonline .checkbox {
    margin: 0 0 18px 0;          /* en la v1 hay un renglón entero entre casilla y casilla */
}
.mk-casillas-citaonline {
    margin-bottom: 30px;
}
.mk-bloque-citaonline .row {
    margin-bottom: 4px;
}
.mk-bloque-citaonline .row + .row {
    margin-top: 18px;
}
.mk-bloque-citaonline .floating-label-group {
    margin-bottom: 14px;
}
.mk-colores-citaonline {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e3e6ef;
}

/* --- Pantalla de videollamadas (18-09-2026): es una explicación, no un formulario --- */
.videollamadasInfo .vcEntrada { font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.videollamadasInfo .vcTarjeta {
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    padding: 18px;
    height: 100%;
    background: #fbfcfe;
}
.videollamadasInfo .vcTarjeta h4 { margin: 10px 0 8px; font-size: 16px; }
.videollamadasInfo .vcTarjeta p { font-size: 14px; line-height: 1.55; margin: 0; }
/*  El icono de la primera tarjeta "no salía" (Enrique, 18-09-2026). El carácter estaba bien, pero
    a 22 px y en un azul fino se perdía contra el fondo claro. Ahora los tres van dentro de una
    chapa redonda, que además los iguala. */
.videollamadasInfo .vcIcono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e7eefb;
    color: #29457d;
    font-size: 20px;
}
.videollamadasInfo .vcTitulo { margin-top: 28px; margin-bottom: 12px; }
.videollamadasInfo .vcPasos { font-size: 14px; line-height: 1.7; padding-left: 20px; }
.videollamadasInfo .vcPasos li { margin-bottom: 8px; }
.videollamadasInfo .vcRequisitos { margin-top: 22px; font-size: 14px; line-height: 1.6; }
.videollamadasInfo .vcRequisitos ul { margin-bottom: 0; }
/* P503: lo que la clínica tiene de verdad (SMS, WhatsApp, pasarela) y las llamadas abiertas. */
.videollamadasInfo .vcEstado { list-style: none; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.9; }
.videollamadasInfo .vcEstado li.ok { color: var(--exito); }
.videollamadasInfo .vcEstado li.ko { color: var(--peligro); }
.videollamadasInfo .vcEstado li.no { color: var(--gris); }
.videollamadasInfo .vcEstadoMotivo { color: var(--texto); font-size: 13.5px; }
.videollamadasInfo .vcAbiertas td { vertical-align: middle; }

/* ===========================================================================
   EL PIE DE GUARDAR, SIEMPRE A LA VISTA (18-09-2026)

   La clase la pone dricloud-comun.js solo en los pies que llevan botones y que no están dentro de
   una ventana modal. Es el mismo pie de siempre: se queda pegado al borde de abajo mientras el
   panel sigue por debajo de la pantalla, y se suelta al llegar a su sitio. En pantallas cortas no
   cambia nada.
   =========================================================================== */
/*  bottom: 44px, NO 0 (19-09-2026, Enrique: "casi no se ve porque queda detrás de la barra azul que
    pone copyright; súbelo a la misma posición donde estaba en la versión uno"). La barra del
    copyright es fija abajo del todo y mide unos 44 px: pegado a 0 quedaba justo debajo de ella. La v1
    ponía su botón flotante a 40 px del borde por lo mismo (.floating-save-btn { bottom: 40px }). */
.panel > .panel-footer.pieFlotante {
    position: -webkit-sticky;
    position: sticky;
    bottom: 44px;
    z-index: 20;
    background: #f7f9fc;
    border-top: 1px solid #e3e6ef;
    box-shadow: 0 -3px 12px rgba(20, 33, 61, .10);
}

/* Al imprimir no tiene sentido: el papel no hace scroll. */
@media print {
    .panel > .panel-footer.pieFlotante { position: static; box-shadow: none; }
}

/* --- Aspecto de la cita online: casillas alineadas y "quitar la imagen" visible (18-09-2026) --- */
.aspectoCasillas { margin-top: 10px; }
.aspectoCasillas .checkbox {
    display: block;
    float: none;
    margin: 0 0 10px 0;
    padding-left: 20px;
}
.aspectoCasillas .checkbox label { padding-left: 0; }
.aspectoCasillas .checkbox input[type="checkbox"] { margin-left: -20px; }
.aspectoQuitarImagen { margin-top: 8px; }

/* Los dos radios de "con / sin botón de cita online", en la misma línea (18-09-2026). */
.mk-radios-boton {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
}
.mk-radios-boton .radio-inline {
    float: none;          /* Bootstrap los flota y se descolocaban */
    margin: 0;
    padding-left: 22px;
}

/* --- Asistente IA: las casillas de "dónde contesta", alineadas (18-09-2026) --- */
.ia-casillas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-bottom: 6px;
}
.ia-casillas label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
.ia-casillas label input[type="checkbox"] {
    position: static;      /* Bootstrap lo saca del flujo y por eso se descolocaba */
    margin: 0;
}

/* ===========================================================================
   LAS BARRAS DE BOTONES DE ARRIBA, TODAS IGUALES  (Enrique, 18-09-2026)

   *"los dos botones de arriba veo que son diferentes a los demás menús; revisa bien el software y
   elige una combinación para que todos esos botones sean siempre los mismos, que tengan el mismo
   estilo"*.

   Revisado: cinco pantallas usan esta barra —cita online, consulta online, asistente IA, registro de
   envíos y la web del cliente— y las cinco ya escribían el MISMO html (`.mk-sub` con
   `btn btn-sm btn-default` y `active` en el elegido). Lo que pasaba es que `.mk-sub` no tenía ni una
   línea de estilo: cada barra se veía como Bootstrap quisiera, y el botón marcado quedaba como un
   botón "hundido", que no se entiende.

   Aquí se define UNA vez, y con eso quedan iguales las cinco y las que vengan: un grupo de pestañas
   en forma de botón, con el elegido en el azul de la casa.
   =========================================================================== */
.mk-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.mk-sub > .btn {
    border: 1px solid #d7dded;
    border-radius: 18px;
    background: #fff;
    color: #3b4a68;
    padding: 6px 16px;
    font-weight: 600;
    box-shadow: none;
}
.mk-sub > .btn .glyphicon { margin-right: 6px; opacity: .85; }
.mk-sub > .btn:hover,
.mk-sub > .btn:focus {
    background: #eef3fc;
    border-color: #c3cfe6;
    color: #29457d;
}
.mk-sub > .btn.active,
.mk-sub > .btn.active:hover,
.mk-sub > .btn.active:focus {
    background: #29457d;
    border-color: #29457d;
    color: #fff;
    box-shadow: none;
}
.mk-sub > .btn.active .glyphicon { opacity: 1; }
/* P1043 (Enrique, 07-10-2026, Marketing → Reseñas: «debe marcarse más azul para saber que estamos en esa
   pestaña»). Las reglas generales de .btn-default (botón secundario) llevan !important y tapaban el azul de la
   pestaña elegida: aquí se le da el mismo peso, para las seis barras que usan .mk-sub. */
.mk-sub > .btn.active,
.mk-sub > .btn.active:hover,
.mk-sub > .btn.active:focus {
    background: #29457d !important;
    border-color: #29457d !important;
    color: #fff !important;
}
.mk-sub > .btn.active .glyphicon { color: #fff !important; }

/* =====================================================================================================
   P252 (19-09-2026) — TODAS LAS TABLAS, BIEN EN EL MÓVIL (Enrique: "que se vean con desplazamiento
   horizontal dentro de su caja, con columnas de un ancho razonable, y que la página no se mueva de lado").

   Es el MISMO criterio de las tablas del panel que ya se veían bien (panel.css, P251): la tabla puede
   ser más ancha que la pantalla y es SU CAJA la que se desplaza, nunca la página. Va aquí porque esta
   hoja la cargan las dos partes (clínica y panel), así que vale para todas las tablas de una vez:
     · DriTabla (DataTables 2): la celda que lleva la tabla se desplaza, y la tabla recibe un ancho
       mínimo de "columnas que se ven × 85 px" (la función DriColumnasVisibles de
       Views/Paciente/_TablasDatos.cshtml apunta el número en la variable --dri-cols).
     · Tablas Bootstrap (.table) y las que se pintan a mano: cabeceras en una línea y cada celda con
       texto de, como poco, 5,5 letras de ancho; sin partir palabras letra a letra.
     · jqGrid (lo que queda del CRM): en pantallas estrechas ya se pinta a 1200 px; aquí su caja se
       desplaza en vez de salirse por la derecha.
   Todo va dentro de "screen and (max-width: …)": en escritorio (≥ 1101 px) y al imprimir, nada cambia.
   ===================================================================================================== */
@media screen and (max-width: 1100px) {
    /* Las cajas que llevan una tabla se desplazan ellas (solo se nota si la tabla no cabe). */
    .dt-layout-cell:has(> table),
    .table-responsive,
    .dri-tabla-caja,
    .modal-body:has(> table),
    .panel-v2 .pnl-caja:has(> table),
    .panel-v2 .pnl-lista-clinicas:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* jqGrid del CRM: la rejilla (1200 px en pantallas estrechas) se desplaza dentro de su caja. */
    .ui-jqgrid {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 767px) {
    /* DriTabla: ancho mínimo según las columnas que se ven. Con table-layout:fixed o anchos en % (las
       visitas del paciente, las facturas...) las columnas se reparten ese ancho y no se aplastan. */
    table.dri-tabla {
        min-width: calc(var(--dri-cols, 0) * 85px);
    }

    /* Cabeceras en una línea: así cada columna mide, como poco, lo que su título. */
    table.table > thead > tr > th,
    table.table > tbody > tr > th,
    table.dataTable > thead > tr > th,
    table.dri-tabla > thead > tr > th {
        white-space: nowrap;
    }

    /* Celdas con un ancho mínimo que se lee y sin partir palabras letra a letra. */
    table.table > tbody > tr > td,
    table.dri-tabla:not(.dataTable) > tbody > tr > td,
    table.dri-tabla-simple > tbody > tr > td {
        min-width: 5.5em;
        overflow-wrap: normal;
        word-break: normal;
    }
    /* …salvo las vacías y las que solo llevan una casilla de marcar. */
    table.table > tbody > tr > td:empty,
    table.dri-tabla > tbody > tr > td:empty,
    table.table > tbody > tr > td:has(> input[type="checkbox"]:only-child),
    table.table > tbody > tr > td:has(> input[type="radio"]:only-child),
    table.dri-tabla > tbody > tr > td:has(> input[type="checkbox"]:only-child) {
        min-width: 0;
    }

    /* Una celda que SÍ puede partirse (textos largos) no baja de un ancho que se lea. */
    table.dri-tabla > tbody > tr > td.dri-multilinea {
        min-width: 180px;
    }
}

/* DIETARIO (Agenda → Dietario) en móvil y tableta. Antes (A26, 11-09-2026) escondía seis columnas y
   repartía el resto a porcentajes fijos: en un móvil el nombre del paciente quedaba en una columna de
   60 px y se partía letra a letra (Enrique, 19-09-2026). Ahora, como todas las tablas: se ven las
   columnas que el usuario tenga marcadas en el selector de columnas, cada una con su ancho natural en
   una línea, y la caja de la tabla se desplaza de lado. */
@media screen and (max-width: 991px) {
    #dietario_content .dri-tabla-caja {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* P609/P611: en el móvil y la tableta el nombre del paciente sale ENTERO y en una línea (sin «…»):
       su columna mide lo que mida el nombre y es la tabla la que se desplaza de lado dentro de su
       recuadro. La tabla nunca es más estrecha que su recuadro. */
    table.dri-tabla.dietario-tabla,
    table.dri-tabla.dataTable.dietario-tabla {
        table-layout: auto;
        width: auto !important;
        min-width: 100%;
    }

    .dietario-tabla td.dietario-paciente .dietario-pac-fila {
        max-width: none;
    }

    .dietario-tabla td.dietario-paciente a.dietario-nombre {
        overflow: visible;
        text-overflow: clip;
    }

    /* Los desplegables, con un ancho fijo que se lee (P418: el estado lleva su contador). */
    .dietario-tabla .dietario-select-tipo { width: 140px; }
    .dietario-tabla .dietario-etiq-tipo { max-width: 140px; }
    .dietario-tabla .dietario-select-estado { width: 178px; }
    .dietario-tabla .dietario-select-soc { width: 120px; }
    .dietario-tabla td.col-acciones select.dietario-acciones { width: 108px !important; }
}

/* ------------------------------------------------------------------ P254: Fiskaly (Sistemas → Suscripción)
   Los cuatro «circuitos» de la conexión: un piloto verde o rojo por paso y, en los rojos, un enlace que
   despliega por qué no se ha encendido y qué hay que hacer. Campos según docs/GUIA_CAMPOS.md. */
.fsk-empresa { margin-bottom: 14px; }
.fsk-activar { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 10px; cursor: pointer; }
.fsk-datos { margin-bottom: 10px; }
.fsk-datos .floating-label-group { margin-bottom: 8px; }
.fsk-datos select.form-control { width: 100% !important; box-sizing: border-box; }
.fsk-guardar { width: 100%; height: 45px; box-sizing: border-box; }
.fsk-ayuda { margin-left: 6px; color: var(--btn-pri-1, #2f6fd6); }
.fsk-circuitos { border: 1px solid #e3e7ec; border-radius: 10px; padding: 10px 14px; margin: 10px 0; background: #fff; }
.fsk-titulo { font-size: 12.5px; font-weight: 600; color: #5a6b85; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.fsk-circuito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f2f5; }
.fsk-circuito:first-of-type { border-top: 0; }
.fsk-luz { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.fsk-circuito.verde .fsk-luz { background: var(--exito); box-shadow: 0 0 0 3px var(--exito-bg); }
.fsk-circuito.rojo .fsk-luz { background: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-bg); }
.fsk-nombre { font-weight: 600; }
.fsk-estado { font-size: 12.5px; color: #5a6b85; }
.fsk-circuito.verde .fsk-estado { color: #0e7a48; }
.fsk-circuito.rojo .fsk-estado { color: #c03030; }
.fsk-porque { margin-left: auto; font-size: 12.5px; }
.fsk-motivo { flex-basis: 100%; background: #fafbfc; border-left: 3px solid var(--peligro); border-radius: 6px; padding: 8px 12px; margin: 4px 0 2px 22px; }
.fsk-motivo ul { margin: 0 0 6px 0; padding-left: 18px; }
.fsk-completa { color: #0e7a48; margin: 8px 0 0; }
.fsk-error { color: #c03030; margin: 8px 0 0; font-size: 12.5px; }
.fsk-botones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) { .fsk-porque { margin-left: 22px; } .fsk-motivo { margin-left: 0; } }
/* Estado de Hacienda en la columna del listado de facturas. */
.fsk-lst { font-size: 16px; cursor: pointer; }
.fsk-lst.ok { color: var(--exito); cursor: default; }
.fsk-lst.ko { color: var(--peligro); }

/* =====================================================================
   P289 (Enrique, 20-09-2026) — BARRA DE LA AGENDA EN EL MÓVIL (≤ 767 px)

   En el móvil la barra de Agenda / Planning / Turnos / Dietario / Cita más
   próxima / Listas de espera / Hospitalización / Agenda por máquinas salía
   desordenada: desplegables de anchos distintos, las flechas del día encima
   y debajo de la fecha y los botones sueltos a la derecha. Ahora, siempre
   en el mismo orden:

     1. los desplegables (clínica, tipo, vista, franja) de dos en dos en una
        rejilla, todos del mismo ancho; si queda uno suelto, a ancho entero;
     2. la navegación: «←  [fecha]  →   Hoy» (en el Dietario, la fecha y el
        buscador de paciente);
     3. «Ver 5 días · Enviar SMS · imprimir» y los demás botones de la
        pantalla (exportar, columnas, nuevo turno…).

   Mismo alto que en escritorio (32 px, la franja de siempre): aquí solo se
   cambia la colocación. En escritorio y tableta no cambia nada.
   ===================================================================== */
@media screen and (max-width: 767px) {

    .topBar .divMenuSupAgenda.dietario-barra > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* 1. Desplegables en rejilla de dos columnas. */
    .topBar .divMenuSupAgenda > .divMenuSupAgenda,
    .topBar .divMenuSupAgenda > .dietario-barra-izq {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 0 6px 0 !important;
    }

        .topBar .divMenuSupAgenda > .divMenuSupAgenda > select,
        .topBar .divMenuSupAgenda > .dietario-barra-izq > select,
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > .btn,
        .topBar .divMenuSupAgenda > .dietario-barra-izq > .btn,
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > select#ddlAgendaDuracionVista,
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > select#ddlFranjaMaquinas {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            float: none !important;
        }

        /* Un botón («Nueva cita») va a ancho entero… */
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > .btn,
        .topBar .divMenuSupAgenda > .dietario-barra-izq > .btn {
            grid-column: 1 / -1;
        }

        /* …salvo que haya quedado un desplegable suelto: entonces van juntos. */
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > select:last-of-type:nth-of-type(odd) ~ .btn,
        .topBar .divMenuSupAgenda > .dietario-barra-izq > select:last-of-type:nth-of-type(odd) ~ .btn {
            grid-column: auto;
        }

        /* Un desplegable suelto al final, sin botón al lado: a ancho entero. */
        .topBar .divMenuSupAgenda > .divMenuSupAgenda > select:last-of-type:nth-of-type(odd):not(:has(~ .btn)),
        .topBar .divMenuSupAgenda > .dietario-barra-izq > select:last-of-type:nth-of-type(odd):not(:has(~ .btn)) {
            grid-column: 1 / -1;
        }

    /* 2 y 3. Navegación y botones. El primer grupo (fecha, Hoy y «Ver…») se
       deshace para poder colocar cada pieza en su fila. */
    .topBar .divMenuSupAgenda > .text-right {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 0 2px 0 !important;
        text-align: left;
    }

        .topBar .divMenuSupAgenda > .text-right > * {
            order: 6;
            margin: 0 !important;
        }

        .topBar .divMenuSupAgenda > .text-right > .btn-group:first-child {
            display: contents !important;
        }

        /* «←  [fecha]  →»: una sola línea, la fecha se lleva el sitio que sobra. */
        .topBar .divMenuSupAgenda > .text-right > .btn-group:first-child > .calBx {
            order: 1;
            flex: 1 1 0;
            min-width: 0;
            display: flex !important;
            flex-wrap: nowrap;
            align-items: center;
            gap: 4px;
            margin: 0 !important;
            overflow: visible;
        }

            .topBar .divMenuSupAgenda .calBx > .littleArrow {
                flex: 0 0 32px;
                width: 32px !important;
                margin: 0 !important;
                padding: 0 !important;
                text-align: center;
            }

            .topBar .divMenuSupAgenda .calBx > #txt-fecha {
                flex: 1 1 0;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                margin: 0 !important;
                text-align: center;
            }

            /* Dietario: la fecha y, a su lado, el buscador de paciente. */
            .topBar .divMenuSupAgenda .calBx > #txtBuscadorPacienteDietario {
                flex: 1.4 1 0;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                margin: 0 !important;
            }

        /* «Hoy», a la derecha de la fecha. */
        .topBar .divMenuSupAgenda > .text-right > .btn-group:first-child > .btn {
            order: 2;
            flex: 0 0 auto;
            margin: 0 !important;
        }

        /* Salto de fila entre la navegación y los botones (solo si hay botones). */
        .topBar .divMenuSupAgenda > .text-right:has(> :nth-child(2))::after,
        .topBar .divMenuSupAgenda > .text-right:has(#divAgendaVistasAgrupacion)::after {
            content: "";
            order: 3;
            flex: 0 0 100%;
            height: 0;
        }

        /* «Ver 5 días» y «Enviar SMS» se reparten la fila; los iconos, a su tamaño. */
        .topBar .divMenuSupAgenda #divAgendaVistasAgrupacion {
            order: 4;
            flex: 1 1 0;
            min-width: 0;
            position: relative;
            margin: 0 !important;
        }

            .topBar .divMenuSupAgenda #divAgendaVistasAgrupacion > .btn {
                width: 100% !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        .topBar .divMenuSupAgenda > .text-right > #btnEnviarSMS {
            order: 5;
            flex: 1 1 0;
            min-width: 0;
        }

        .topBar .divMenuSupAgenda > .text-right > .btn:not(#btnEnviarSMS) {
            flex: 0 1 auto;
            min-width: 0;
        }
}

/* ---------------------------------------------------------------------
   P289 — FILTROS DE CUENTAS Y ESTADÍSTICAS EN EL MÓVIL (≤ 767 px)

   Las filas de filtros (.dri-filtros de Estadísticas y Cuentas, .ing-filtros
   de Cuentas) se partían en el móvil con cada campo de un ancho (150 px uno,
   130 px las fechas, 160 px los desplegables) y los botones sueltos. Ahora:
   campos de dos en dos, todos del mismo ancho; los botones en su propia fila
   repartiéndose el ancho. El alto de cada campo no cambia (el de su
   pantalla, según docs/GUIA_CAMPOS.md). Solo en la clínica (el panel lleva
   sus propias reglas, colgadas de .panel-v2).
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    body:not(.panel-v2) .dri-filtros,
    body:not(.panel-v2) .ing-filtros {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px 10px;
    }

        body:not(.panel-v2) .dri-filtros > .dri-campo,
        body:not(.panel-v2) .ing-filtros > .ing-campo-f,
        body:not(.panel-v2) .ing-filtros > .ing-campo {
            flex: 1 1 calc(50% - 5px);
            min-width: 0 !important;
            max-width: 100%;
        }

            body:not(.panel-v2) .dri-filtros > .dri-campo > .form-control,
            body:not(.panel-v2) .dri-filtros > .dri-campo > select,
            body:not(.panel-v2) .dri-filtros > .dri-campo > .btn-group,
            body:not(.panel-v2) .ing-filtros > .ing-campo-f > .form-control,
            body:not(.panel-v2) .ing-filtros > .ing-campo > .form-control {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
            }

        body:not(.panel-v2) .dri-filtros > .dri-acciones,
        body:not(.panel-v2) .dri-filtros > .dri-derecha {
            flex: 1 1 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-left: 0;
        }

            /* El primero (Buscar) se lleva el ancho; los iconos, a su tamaño. */
            body:not(.panel-v2) .dri-filtros > .dri-acciones > .btn:first-child {
                flex: 1 1 auto;
            }

        body:not(.panel-v2) .dri-filtros > .btn,
        body:not(.panel-v2) .ing-filtros > .btn {
            flex: 1 1 auto;
        }
}

/* ------------------------------------------------------------------
   MÓVIL (22-09-2026, P343): "algunas páginas se ven muy estrechas".
   Cada nivel de Bootstrap (columna, panel, columna dentro del panel,
   otro panel...) sumaba 15 px por lado, y en el iPhone el contenido
   acababa con casi 50 px de margen a cada lado. Se estrechan los
   márgenes en el teléfono; en ordenador no cambia nada.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .main [class*="col-"] { padding-left: 5px; padding-right: 5px; }
    .main .row { margin-left: -5px; margin-right: -5px; }
    .main .panel-body { padding: 10px 8px; }
    .main .panel-heading { padding-left: 10px; padding-right: 10px; }
    .main .panel { margin-bottom: 14px; }
    .main .well { padding: 10px; }
}

/* =====================================================================
   P374 (22-09-2026, Enrique): VENTANAS DE TURNO (nuevo y modificar) con el
   mismo ancho y el mismo estilo que la ventana de la cita: 860 px, rótulos
   pequeños en mayúsculas encima del campo, campos de 42 px con esquinas de
   9 px y los obligatorios con el borde ámbar (P372).
   ===================================================================== */
#mNuevoTurno .modal-dialog, #mEditarTurno .modal-dialog { width: 860px; max-width: calc(100% - 24px); }
#mNuevoTurno .panel, #mEditarTurno .panel { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(10,25,55,.35); }
#mNuevoTurno .panel-body, #mEditarTurno .panel-body { padding: 14px 22px 6px; }
#mNuevoTurno .panel-footer, #mEditarTurno .panel-footer { background: #f7f9fc; border-top: 1px solid #e3e6f0; padding: 14px 22px; }
#formTurno.tv3 .turno-etiqueta { font-size: 11.5px; color: #636f83; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 5px; }
#formTurno.tv3 .turno-campo-hora, #formTurno.tv3 .form-group { margin-bottom: 10px; }
#formTurno.tv3 .form-textbox-input { border: 1px solid #e3e6f0; border-radius: 9px; min-height: 42px; height: 42px; box-shadow: none; }
#formTurno.tv3 .turno-fichas { border: 1px solid #e3e6f0; border-radius: 9px; padding-top: 5px; min-height: 42px; }
#formTurno.tv3 .turno-seccion { font-size: 14px; color: #2b5aa6; font-weight: 700; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e3e6f0; }
#formTurno.tv3 .turno-resumen { border: 1px solid #e3e6f0; border-radius: 12px; background: #fbfcfe; padding: 10px 14px; margin-bottom: 12px; }
#formTurno.tv3 .help-block { font-size: 12.5px; margin: 4px 0 0; }
#formTurno.tv3 [data-oblig="1"] { border-color: #f0b35a !important; box-shadow: 0 0 0 1px rgba(240,179,90,.25); }
#formTurno.tv3 [data-oblig="1"]:focus { border-color: #e08a00 !important; box-shadow: 0 0 0 3px rgba(240,160,40,.2); }
@media (max-width: 760px) {
    #mNuevoTurno .modal-dialog, #mEditarTurno .modal-dialog { width: auto; max-width: none; margin: 8px; }
    #mNuevoTurno .panel-body, #mEditarTurno .panel-body { padding: 12px 14px 4px; }
}

/* =====================================================================
   P382 (22-09-2026) · Barra de acciones de la historia clinica en movil.

   La barra (.barraAccionesHC) era un flex de una sola linea SIN wrap con
   cinco botones: Cancelar, DriCloud AI, Generar informe, Enviar informe y
   el desplegable "Guardar visita". En un iPhone (375-430 px) no caben, y
   como los elementos flex no encogen por debajo de su contenido, el ultimo
   -justo el de guardar- se salia por la derecha y no habia manera de
   llegar a el. En un iPad (>=768 px) si caben, por eso alli se veia.

   Debajo de 768 px la barra se apila: "Guardar visita" primero y a todo lo
   ancho, y debajo Cancelar y los tres botones de informes repartidos.
   ===================================================================== */
@media (max-width: 767px) {
    .barraAccionesHC {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    /* El muelle que empujaba el boton primario a la derecha sobra al apilar. */
    .barraAccionesHC .espacioBarraHC { display: none; }
    .accionesHCFin { flex-direction: column; align-items: stretch; }
    .accionesHCFin .espacioBarraHC { display: none; }

    /* Guardar visita: primera fila, a todo lo ancho y siempre visible. */
    .barraAccionesHC .btn-group {
        flex: 1 1 100%;
        order: -1;
    }

        .barraAccionesHC .btn-group > .btn {
            width: 100%;
            font-size: 15px;
            padding: 10px 14px;
        }

    /* Su desplegable, tambien a lo ancho (si no, se sale por la derecha). */
    .barraAccionesHC .btn-group .dropdown-menu {
        left: 0;
        right: 0;
        width: auto;
    }

        .barraAccionesHC .btn-group .dropdown-menu > li > a { padding: 10px 16px; }

    /* El aviso de "guardado" en su propia linea, encima de todo. */
    .barraAccionesHC .estadoGuardadoHC {
        flex: 1 1 100%;
        order: -2;
        text-align: center;
    }

        .barraAccionesHC .estadoGuardadoHC:empty { display: none; }

    /* Cancelar y los tres botones de informes se reparten y pueden bajar
       de linea; nunca se salen de la pantalla. */
    .barraAccionesHC > .btn,
    .barraAccionesHC > a.btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        padding: 7px 10px;
        white-space: normal;
    }
}

/* ======================================================================
   P401 (Enrique, 23-09-2026). La cabecera se descuadraba en las clínicas
   cuyo logotipo es ALTO (el de la Dra. Erika Brand mide más de 280 px):
   la columna del logotipo se estira hasta abajo (align-items: stretch) y
   el logotipo lleva height: 100%, así que entre los dos no había nada que
   pusiera un tope y era la propia imagen la que decidía el alto de toda
   la cabecera. Resultado: el nombre de la clínica salía cortado por
   arriba y el menú bajaba.

   El tope son 130 px, medidos en el navegador: con ese valor la cabecera
   de una clínica normal se queda igual que antes (134 px medidos, 130 con
   el tope: cuatro píxeles) y una con logotipo alto pasa de 765 px a esos
   mismos 130. object-fit lo mete dentro sin deformarlo. Un logotipo ancho
   y bajo se sigue viendo exactamente igual que hasta ahora.
   ====================================================================== */
header .container-fluid > .row.margin-0 > .headerEdit > .logo {
    max-height: 130px;
    object-fit: contain;
}

/* =====================================================================================
   P412 · VISITAS PREVIAS DEL HISTORIAL CLÍNICO (Enrique, 24-09-2026)
   Diseño de docs/guia-estilos/visitas-historial.html: línea de tiempo con la fecha a la
   izquierda, el diagnóstico en una píldora y el detalle repartido en bloques.
   Lo pinta ~/Views/Paciente/_HistorialCitas.cshtml y lo rellena _HistorialDetalleCita.cshtml.
   ===================================================================================== */
.vhist-visita { position: relative; padding-left: 78px; margin-bottom: 14px; }
.vhist-visita::before { content: ""; position: absolute; left: 31px; top: 0; bottom: -14px; width: 2px;
                        background: linear-gradient(180deg, #cfdcef, #e6ecf6); }
.vhist-fecha { position: absolute; left: 0; top: 6px; z-index: 2; width: 62px; text-align: center; background: #fff;
               border: 1px solid #e3e6f0; border-radius: 12px; padding: 7px 0 6px; box-shadow: 0 2px 6px rgba(20,33,61,.06); }
.vhist-fecha b { display: block; font-size: 20px; font-weight: 800; color: #14213d; line-height: 1.05; }
.vhist-fecha span { display: block; font-size: 11px; font-weight: 700; color: #636f83; text-transform: uppercase; letter-spacing: .5px; }
.vhist-fecha em { display: block; font-style: normal; font-size: 11px; color: #636f83; margin-top: 2px; }
.vhist-punto { position: absolute; left: 28px; top: 28px; width: 12px; height: 12px; border-radius: 50%;
               background: #2b5aa6; border: 3px solid #fff; box-shadow: 0 0 0 2px #cfdcef; }
.vhist-punto-t2 { background: #a16207; }            /* prueba */
.vhist-punto-t3 { background: #6d3bd4; }            /* quirófano */
.vhist-punto-hosp { background: #29457d; }

.vhist-card { background: #fff; border: 1px solid #e3e6f0; border-radius: 14px;
              box-shadow: 0 2px 8px rgba(20,33,61,.06); overflow: hidden; }
.vhist-card:has(.vhist-detalle:not(:empty)) { box-shadow: 0 8px 24px rgba(20,33,61,.10); border-color: #cfdcef; }
.vhist-h { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; cursor: pointer; }
.vhist-h:hover { background: #fafbfe; }
.vhist-dx { flex: 1; min-width: 0; }
.vhist-pill { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, #eaf2fd, #dce9fb);
              border: 1px solid #bcd3f0; color: #1e4e8c; border-radius: 999px; padding: 7px 14px 7px 10px;
              font-size: 14.5px; font-weight: 700; max-width: 100%; }
.vhist-pill-vacia { background: #f5f7fb; border-color: #dde4ee; color: #33466a; padding-left: 14px; }
.vhist-pill-hosp { background: linear-gradient(135deg, #e8edf7, #dbe4f3); border-color: #b6c4de; color: #29457d; }
.vhist-cie { background: #1e4e8c; color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; flex: none; }
.vhist-pill-hosp .vhist-cie { background: #29457d; }
.vhist-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vhist-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 12.5px; color: #636f83; flex-wrap: wrap; }
.vhist-meta b { color: #14213d; font-weight: 600; }
.vhist-it { display: flex; align-items: center; }
.vhist-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, #9fb6d6, #5d7ba6); color: #fff;
            font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; }
.vhist-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.vhist-tag { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.vhist-tag.t-alerta { background: #fdecec; color: #b52a2a; border: 1px solid #f3c3c3; }
.vhist-tag.t-med { background: #e8f8ef; color: #0e7a48; border: 1px solid #bde8d0; }
.vhist-tag.t-prueba { background: #fff7e0; color: #a16207; border: 1px solid #f1dfae; }
.vhist-tag.t-ia { background: #f3eefe; color: #6d3bd4; border: 1px solid #ddcffb; }
.vhist-chev { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
              color: #636f83; flex: none; border: 1px solid #e3e6f0; background: #fff; }

/* El detalle que llega por AJAX al desplegar la visita */
.vhist-detalle:empty { display: none; }
/*  P449 (Enrique, 24-09-2026): los datos cortos no van "flotando" a la derecha. Dos MITADES iguales,
    separadas por una línea fina, y cada fila alineada (la rejilla iguala las alturas). Los textos
    largos siguen ocupando las dos mitades. */
.vhist-detalle .vhist-b { padding: 2px 16px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; }
.vhist-detalle .vhist-sec { padding: 8px 0; border-bottom: 1px dashed #edf0f5; min-width: 0; }
.vhist-detalle .vhist-izq { padding-right: 14px; border-right: 1px solid #edf0f5; }
.vhist-detalle .vhist-hueco { border-bottom: 0; }
.vhist-detalle .vhist-lbl { font-size: 11.5px; color: #636f83; font-weight: 700; text-transform: uppercase;
                            letter-spacing: .5px; margin-bottom: 5px; }
.vhist-detalle .vhist-txt { font-size: 14px; line-height: 1.55; color: #333f52; }
.vhist-detalle .vhist-caja { border: 1px solid #e3e6f0; border-radius: 11px; padding: 11px 13px; background: #fbfcfe; }
.vhist-detalle .vhist-ancho { grid-column: 1 / -1; }
.vhist-esp { height: 4px; }

/* Pie de cada visita: los tres iconos de la v1 y el botón de ver / ocultar */
.vhist-f { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #e3e6f0; background: #f8fafd; }
.vhist-f .vhist-sp { flex: 1; }
.vhist-ib { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #b9cbe4; background: #fff; color: #24518c; cursor: pointer; }
.vhist-ib:hover, .vhist-ib:focus { background: #f0f6fd; color: #24518c; text-decoration: none; }
.vhist-ib .glyphicon { top: 0; }
.vhist-btn { white-space: nowrap; font: 600 13px/1 inherit; padding: 8px 14px; border-radius: 9px; cursor: pointer;
             background: #fff; color: #24518c; border: 1px solid #b9cbe4; }
.vhist-btn:hover { background: #f0f6fd; }
/* El texto del botón cambia solo: mientras el detalle esté vacío pone "ver", y si no, "ocultar" */
.vhist-card .txtOcultar { display: none; }
.vhist-detalle:not(:empty) ~ .vhist-f .txtVer { display: none; }
.vhist-detalle:not(:empty) ~ .vhist-f .txtOcultar { display: inline; }

.vhist-asociada .vhist-f { background: #f1f2f5; }

/*  P804 (Enrique, 05-10-2026): como en la v1, la cirugía se ve naranja y la prueba diagnóstica verde,
    para distinguirlas de las consultas de un vistazo (franja a la izquierda y cabecera teñida). */
.vhist-punto-t2 { background: #1e8e3e; }
.vhist-punto-t3 { background: #e07b00; }
.pruebaHist .vhist-card { border-left: 4px solid #1e8e3e; }
.pruebaHist .vhist-h { background: #eef8f0; }
.pruebaHist .vhist-h:hover { background: #e3f3e7; }
.pruebaHist .vhist-pill-vacia { background: #dff1e4; border-color: #b9e0c3; color: #17602b; }
.quirofanoHist .vhist-card { border-left: 4px solid #e07b00; }
.quirofanoHist .vhist-h { background: #fff5e8; }
.quirofanoHist .vhist-h:hover { background: #ffedd6; }
.quirofanoHist .vhist-pill-vacia { background: #ffe8cc; border-color: #f6cf9e; color: #8a4b00; }
#div_Historial.hist-dashboard .quirofanoHist .vhist-fecha { border-left-color: #e07b00; }
#div_Historial.hist-dashboard .pruebaHist .vhist-fecha { border-left-color: #1e8e3e; }

/*  P804: iconos de informes, fotografías y facturas de la visita. Encendido = hay algo (con su número);
    apagado = no hay nada y no se puede pulsar. */
.vhist-adj-sep { width: 1px; height: 22px; background: #dde4ee; margin: 0 4px; }
.vhist-adj { position: relative; }
.vhist-adj-no { color: #b8c2d1; border-color: #e3e6f0; cursor: default; pointer-events: none; }
.vhist-adj-si { color: #fff; background: #2b5aa6; border-color: #2b5aa6; }
.vhist-adj-si:hover, .vhist-adj-si:focus { color: #fff; background: #24518c; }
.vhist-adj-n { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
               background: #e07b00; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
/*  NADA se sale por la derecha (Enrique, 24-09-2026: "en responsive se van algunos textos por el
    lateral derecho"). Las tarjetas no desbordan y los textos largos parten. */
.vhist-visita, .vhist-card { max-width: 100%; }
.vhist-card { overflow-wrap: break-word; word-wrap: break-word; }
.vhist-detalle .vhist-txt { overflow-wrap: break-word; }
@media (max-width: 860px) {
    .vhist-detalle .vhist-b { grid-template-columns: 1fr; }
    .vhist-detalle .vhist-izq { padding-right: 0; border-right: 0; }
    .vhist-detalle .vhist-hueco { display: none; }
    .vhist-h { flex-wrap: wrap; }
    .vhist-tags { margin-left: 0; width: 100%; }
    .vhist-visita { padding-left: 62px; }
    .vhist-fecha { width: 50px; }
    .vhist-punto { left: 22px; }
    .vhist-visita::before { left: 25px; }
    .vhist-f { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    /* Con el diagnóstico partido en varias líneas, la píldora redonda se volvía un óvalo enorme
       (visto en el navegador a 390 px): en el móvil es un rectángulo de esquinas suaves. */
    .vhist-pill { white-space: normal; border-radius: 14px; align-items: flex-start; font-size: 13.5px; }
    .vhist-t { white-space: normal; }
    .vhist-meta { gap: 6px 10px; }
    /* La flecha de abrir / cerrar va arriba a la derecha, no sola en una línea. */
    .vhist-h { position: relative; padding-right: 50px; }
    .vhist-chev { position: absolute; top: 12px; right: 12px; }
}

/* =====================================================================================
   INTERRUPTOR COMÚN (P412). El mismo que la ventana de citar (.cv3-sw), pero para
   cualquier pantalla: pestaña de Seguimiento, etc. El interruptor solo PINTA; lo que
   viaja al servidor sigue siendo la casilla de siempre, escondida detrás.
   ===================================================================================== */
.drSwitch { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600;
            color: #14213d; cursor: pointer; margin: 0 18px 0 0; user-select: none; }
.drSwitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.drSw { width: 38px; height: 22px; border-radius: 999px; background: #cfd6e2; position: relative; flex: none; transition: background .15s; }
.drSw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
               background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.drSw.on { background: #2b5aa6; }
.drSw.on::after { left: 19px; }
.drSw.amb.on { background: #d98e0b; }
.drSwitches { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }

/*  P411 (a) (Enrique, 24-09-2026): "en el campo de antecedentes y alergias el texto sale un poco
    bajo, como si hubiera saltado una línea". Estos dos cuadros NO llevan etiqueta flotante —el
    rótulo es el título del bloque—, así que no necesitan el hueco de arriba de 19 px que se reserva
    para ella. Se fija aquí el relleno para que ninguna regla heredada lo vuelva a bajar. */
#divAntecedentes textarea.form-control,
#divAlergias textarea.form-control,
#txtAntecedentes, #txtAlergias {
    padding: 9px 12px !important;
    line-height: 1.45 !important;
}

/* =====================================================================================
   P416 · LOS MENÚS QUE NO SE PUEDEN USAR SE VEN, PERO APAGADOS (Enrique, 24-09-2026)
   "En todos los perfiles, siempre muestra todos los menús arriba del menú principal, y en
   el mismo orden, solamente que los muestres sombreados y no funciona el hipervínculo. No
   hacen nada, pero que sepan que están ahí todos esos menús."
   Vale para la barra de arriba (.menuSinPermiso) y para la pantalla de bienvenida (.noClicable).
   ===================================================================================== */
.menu-principal > li.menuSinPermiso > a { cursor: default; pointer-events: none; }
.menu-principal > li.menuSinPermiso img,
.menu-principal > li.menuSinPermiso span { opacity: .38; filter: grayscale(100%); }
.menu-principal > li.menuSinPermiso .badge { display: none !important; }

.homeMenuLista .noClicable,
.homeMenuLista .noClicable + span { opacity: .38; filter: grayscale(100%); cursor: default; }
.homeMenuLista li > p:only-child { cursor: default; }

/*  P417 (Enrique, 24-09-2026): la cita que está puesta FUERA de la franja del turno —antes de que
    empiece, después de que acabe, o un día sin turno— antes no se pintaba y se perdía. Ahora sale,
    con una raya ámbar a la izquierda para que se note que está fuera de horario. */
.dietario-tabla tr.dietario-fuera-turno > td:first-child { box-shadow: inset 3px 0 0 #d98e0b; }
.dietario-tabla tr.dietario-fuera-turno > td { background-color: #fffaf0; }

/*  P595 (28-09-2026): las HORAS CERRADAS y los asuntos propios del dietario, rayados en gris (la
    misma trama que usa el Planning para lo anulado), para que no se confundan con un hueco libre.
    El botón «Abrir» de la fila abre la ventana del cierre, desde la que se eliminan. */
.dietario-tabla tr.dietario-cerrada > td {
    background: repeating-linear-gradient(135deg, #f3f3f3 0, #f3f3f3 6px, #e2e2e2 6px, #e2e2e2 9px) !important;
}
.dietario-tabla tr.dietario-cerrada .dietario-bloqueada { color: #555; font-style: italic; }
.dietario-tabla .dietario-abrir-cierre { white-space: nowrap; }

/*  P425 (Enrique, 25-09-2026, foto del iPhone): en Configuración → Datos de empresa, el botón
    «Geolocalizar a partir de la dirección de la clínica» tenía alto fijo y no podía partir la línea,
    así que en el móvil se salía por la derecha de su cuadro. Ahora ocupa como mucho el ancho de su
    columna, parte el texto si no cabe y crece en alto lo que haga falta. */
/* border-box: sin él, el 100 % de ancho más el relleno del botón volvía a salirse 34 px (medido en el
   navegador a 390 px de ancho, 24-09-2026). */
.dri-emp-geo { box-sizing: border-box; max-width: 100%; min-height: 38px; height: auto; white-space: normal; text-align: left;
               line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; }
.dri-emp-geo .glyphicon { flex: none; top: 0; }
@media (max-width: 991px) { .dri-emp-geo { width: 100%; } }

/*  P418 / P462: el ancho del desplegable de estado (lo justo para «En consulta 12h05», 178 px) y el de
    su columna están ahora en el bloque P609 (buscar «P609 / P611»): con la tabla a anchos automáticos la
    columna mide lo que su desplegable y ya no hace falta fijarla en píxeles ni cortar lo que se salga. */

/* =====================================================================
   P448 (24-09-2026) · ESCRIBIR LA HISTORIA CLÍNICA (mockup historia-escribir.html)

   Cabecera del paciente fija, barra de IA arriba, índice lateral con el avance, tarjetas de dos en
   dos, diagnóstico destacado y SOLO el botón de guardar flotando (sin barra). Todo bajo .hcEscribir.
   ===================================================================== */
.hcEscribir .hc-cabecera { position: -webkit-sticky; position: sticky; top: 0; z-index: 25; }
.hcEscribir .hc-cabecera .bannerPacienteCita.detalleBar { margin-bottom: 0; box-shadow: 0 4px 14px rgba(20,33,61,.10); }
/* Cuando la barra de datos va compartida arriba (vista Dashboard), la pestaña esconde la suya. */

.hc-ia {
    margin: 12px 0 14px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
    border-radius: 14px; padding: 14px 18px; color: #fff;
    background: linear-gradient(120deg, #24518c 0%, #3568a8 55%, #5b46b8 100%);
    box-shadow: 0 8px 22px rgba(30,60,140,.28);
}
    .hc-ia .hc-ia-mic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
    .hc-ia .hc-ia-txt { flex: 1 1 260px; min-width: 0; }
    .hc-ia .hc-ia-txt b { font-size: 15px; display: block; }
    .hc-ia .hc-ia-txt p { font-size: 12.5px; opacity: .88; margin: 2px 0 0; line-height: 1.4; }
    .hc-ia #divAsistenteIA { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
    .hc-ia #divAsistenteIA .btn,
    .hc-ia #btnAsistenteIAIniciarGrabacion {
        background: #fff !important; color: #24518c !important; border-color: #fff !important;
        font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 9px; box-shadow: none;
    }
    .hc-ia #divAsistenteIA .btn-warning { background: #fff3cd !important; color: #7a4b00 !important; }
    .hc-ia #divAsistenteIA .escriba-no-contratado { opacity: .8; }
    .hc-ia #spnAsistenteIAindicadorGrabando { color: #ffd9d9 !important; }
    .hc-ia #divAsistenteIAestadoGrabacion { flex: 1 1 100%; margin-top: 0 !important; }
    .hc-ia #divAsistenteIAestadoGrabacion:empty { display: none; }
    .hc-ia #divAsistenteIAestadoGrabacion .alert { margin: 0; }

.hc-cols { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 16px; align-items: start; }

.hc-rail {
    position: -webkit-sticky; position: sticky; top: 92px;
    background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 10px;
    box-shadow: 0 2px 6px rgba(20,33,61,.05);
}
    .hc-rail h6 { font-size: 11px; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 8px 8px; margin: 0; }
    .hc-rail nav a {
        display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
        font-size: 13.5px; color: #33466a; text-decoration: none; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hc-rail nav a span { overflow: hidden; text-overflow: ellipsis; }
    .hc-rail nav a:hover { background: #f5f8fc; }
    .hc-rail nav a.act { background: var(--info-bg); color: var(--info); }
    .hc-rail nav a i { width: 9px; height: 9px; border-radius: 50%; background: #d7dde8; flex: none; }
    .hc-rail nav a.ok i { background: var(--exito); }
    .hc-rail nav a.act i { background: var(--info); }
    .hc-rail .hc-prog { margin: 8px 8px 4px; font-size: 12px; color: var(--gris); }
    .hc-rail .hc-barra-prog { height: 6px; border-radius: 99px; background: #eef1f6; margin: 6px 8px 4px; overflow: hidden; }
    .hc-rail .hc-barra-prog span { display: block; height: 100%; background: linear-gradient(90deg, #3568a8, #5b9bd4); border-radius: 99px; transition: width .3s; }

.hc-main { min-width: 0; }

.hc-sec {
    background: var(--card); border: 1px solid var(--borde); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(20,33,61,.05);
    min-width: 0; scroll-margin-top: 104px;
}
    .hc-sec.hc-foco { border-color: #9dbdea; box-shadow: 0 0 0 3px #e6eefb, 0 2px 6px rgba(20,33,61,.05); }
.hc-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
    .hc-sh h3 { font-size: 14.5px; color: var(--seccion); font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
    .hc-sh h3 svg { width: 15px; height: 15px; flex: none; stroke: var(--seccion); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .hc-sh .hc-sp { flex: 1; }
    .hc-sh .btn-xs { padding: 4px 10px; font-size: 12px; }

.hc-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hc-dos > .hc-sec { margin-bottom: 0; }
.hc-dos { margin-bottom: 12px; }
.hc-dos-campos { margin-bottom: 0; }
.hc-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.hc-cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hc-tres .floating-label-group, .hc-cuatro .floating-label-group, .hc-dos-campos .floating-label-group { margin-bottom: 8px; }

/* El formulario de la clínica: rejilla de dos columnas; las tarjetas anchas ocupan la fila. */
#div_Formulario.hc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
/*  P481 (25-09-2026): con Odontograma u Oftalmología en el formulario, esos bloques guardan su contenido en
    columnas flotantes que no se cierran (el bloque mide 0 de alto) y la rejilla de los campos a medida se
    quedaba al lado, con 0 px de ancho: los campos salían en una tira estrecha a la derecha. Cada bloque se
    cierra sobre sí mismo y los campos a medida empiezan debajo. */
#hcMain > #divOdontograma, #hcMain > #divTabsOdontograma, #hcMain > [id^=divOftalmologia] { display: flow-root; }
#hcMain > #div_Formulario { clear: both; }
/*  P482: en los campos con dibujo, las leyendas (colores, Borrar, Limpiar) iban en línea con el lienzo:
    con pocas leyendas se quedaban abajo a la izquierda, pegadas a la imagen. Siempre en su fila, encima. */
#div_Formulario .listadoLeyenda { display: block; padding-left: 0; margin: 0 0 8px; text-align: center; }
#div_Formulario .listadoLeyenda li { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 4px 0; font-size: 13px; }
    #div_Formulario.hc-grid:empty { display: none; }
    #div_Formulario.hc-grid > .hc-sec { margin: 0; }
    #div_Formulario.hc-grid > .hc-ancho, #div_Formulario.hc-grid > .clearfix, #div_Formulario.hc-grid > br, #div_Formulario.hc-grid > input[type=hidden] { grid-column: 1 / -1; }
    #div_Formulario.hc-grid > .clearfix, #div_Formulario.hc-grid > br { display: none; }

/* Cuadros de texto planos dentro de las tarjetas. */
.hc-sec textarea.hc-txt, .hc-sec input.hc-inp, .hc-sec select.hc-inp {
    width: 100%; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
    font-size: 14px; line-height: 1.5; color: var(--texto); background: #fff; box-shadow: none; height: auto;
}
    .hc-sec textarea.hc-txt { min-height: 76px; resize: vertical; }
    /* P876: la Historia clínica, más alta (8 líneas, como la v1). */
    .hc-sec textarea.hc-txt.hc-txt-hc { min-height: 196px; }
    .hc-sec select.hc-inp { height: 42px; }
    .hc-sec textarea.hc-txt:focus, .hc-sec input.hc-inp:focus, .hc-sec select.hc-inp:focus { outline: 2px solid #bcd2ef; border-color: var(--seccion); box-shadow: none; }
    .hc-sec textarea::placeholder, .hc-sec input::placeholder { color: #97a2b3; }
.hc-sec .hc-buscador { margin-bottom: 8px; }
    .hc-sec .hc-buscador .input-group-addon { border-radius: 10px 0 0 10px; background: #fff; border-color: var(--borde); color: var(--gris); }
    .hc-sec .hc-buscador .form-control { border-radius: 0 10px 10px 0; border-color: var(--borde); height: 42px; box-shadow: none; }

/* Palabras rápidas: pastillas; encendidas las que ya están escritas. */
.hc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.hc-chip {
    font-size: 12.5px; font-weight: 600; color: #33466a; background: #f5f7fb; border: 1px solid #dde4ee;
    border-radius: 999px; padding: 5px 12px; cursor: pointer; line-height: 1.25; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
    .hc-chip:hover { background: var(--info-bg); border-color: #a9c4ea; color: var(--info); }
    .hc-chip.on { background: var(--info); border-color: var(--info); color: #fff; }
    .hc-chip.on::after { content: " ✓"; }
.hc-mas { font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; padding: 5px 4px; background: none; border: 0; }
.hc-previo { margin-top: 8px; font-size: 12.5px; color: var(--gris); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .hc-previo .hc-previo-txt { flex: 1 1 100%; color: var(--texto); white-space: pre-line; }

/* Diagnóstico destacado: buscador con las etiquetas dentro. */
.hc-dx { border-color: #bcd3f0; background: linear-gradient(180deg, #f7fafe, #fff); }
    .hc-dx ul.tagit {
        border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; background: #fff;
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; margin: 0;
    }
    .hc-dx ul.tagit li.tagit-choice {
        background: linear-gradient(135deg, #eaf2fd, #dce9fb); border: 1px solid #bcd3f0; color: var(--info);
        border-radius: 999px; padding: 5px 28px 5px 12px; font-size: 13.5px; font-weight: 700; margin: 0; line-height: 1.3;
    }
    .hc-dx ul.tagit li.tagit-choice .tagit-close { right: 6px; top: 50%; margin-top: -8px; }
    .hc-dx ul.tagit li.tagit-choice .tagit-close .ui-icon { opacity: .6; }
    .hc-dx ul.tagit li.tagit-new { flex: 1 1 180px; margin: 0; padding: 0; }
    .hc-dx ul.tagit input.ui-widget-content { width: 100% !important; font-size: 14px; border: 0; outline: 0; padding: 4px 2px; background: transparent; box-shadow: none; }

/* Sí/No y selección múltiple como pastillas (mockup: "Diabético · Sin indicar / Sí / No"). */
.hc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.hc-pill {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borde); border-radius: 9px;
    padding: 7px 13px; font-size: 13.5px; font-weight: 600; color: #33466a; cursor: pointer; background: #fff; margin: 0;
}
    .hc-pill input { margin: 0; }
    .hc-pill.on { background: var(--info-bg); border-color: #a9c4ea; color: var(--info); }

/* Actuaciones en consulta: el desplegable y el botón en una línea, las etiquetas debajo. */
.hc-actuaciones { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
    .hc-actuaciones .floating-label-group { flex: 1 1 260px; margin-bottom: 8px; }
    .hc-actuaciones #divAnadirActuacionesConsulta .btn { height: 45px; padding: 0 18px; line-height: 43px; }
.hc-tags ul.tagit { border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; min-height: 44px; background: #fff; }
.hc-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* El título de la tarjeta de Medicación: DriCloud2021.css lo escondía (#divLabelFCMID3) porque en el
   diseño viejo sobraba; en las tarjetas nuevas cada sección lleva su título. */
.hcEscribir #divLabelFCMID3 { display: flex; }
/* La receta dentro de Medicación: los grupos del profesional como pastillas. */
.hc-receta { margin-bottom: 10px; }
    .hc-receta #divUsuarioRecetasContenido .divUsuarioRecetaContenido { width: auto; float: left; padding: 0 6px 6px 0; margin: 0; }
    .hc-receta .grupoMedicacion .btn { border-radius: 999px; font-size: 13px; }
    .hc-receta .grupoMedicacion .gmTitulo { border-radius: 999px 0 0 999px; }
    .hc-receta .grupoMedicacion .gmIcono:last-child { border-radius: 0 999px 999px 0; }

/* Lo único que flota: el aviso de guardado y «Guardar visita». Va a 58 px del borde para no quedar
   detrás de la barra fija del copyright (44 px), como el pie flotante del resto del programa. */
.hc-guardar-flotante {
    position: fixed; right: 22px; bottom: 58px; z-index: 1035;
    display: flex; align-items: center; gap: 10px;
}
    .hc-guardar-flotante .estadoGuardadoHC {
        margin: 0; background: rgba(255,255,255,.96); border: 1px solid var(--borde); border-radius: 999px;
        padding: 6px 12px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(20,33,61,.12);
    }
    .hc-guardar-flotante .estadoGuardadoHC:empty { display: none; }
    .hc-guardar-flotante .btn-group > .btn {
        font-size: 14.5px; padding: 11px 22px; border-radius: 999px;
        box-shadow: 0 6px 18px rgba(30,78,140,.35);
    }
    .hc-guardar-flotante .dropdown-menu { margin-bottom: 8px; border-radius: 10px; }
    .hc-guardar-flotante .dropdown-menu > li > a { padding: 9px 16px; }

/* Con dos columnas (vista Dashboard) y en pantallas estrechas, todo en una columna y sin índice. */
@media (max-width: 980px) {
    .hc-cols { grid-template-columns: minmax(0, 1fr); }
    .hc-rail { display: none; }
    .hc-dos, #div_Formulario.hc-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .hc-tres { grid-template-columns: minmax(0, 1fr); }
    .hc-cuatro { grid-template-columns: minmax(0, 1fr); }
    .hc-ia { padding: 12px 14px; }
    .hc-ia #divAsistenteIA { margin-left: 0; flex: 1 1 100%; }
    .hc-ia #divAsistenteIA .btn { width: 100%; }
    /* En móvil los botones de IA no caben en una línea: se parten (visto en el navegador, P453). */
    .hcEscribir .btn-ia, .hc-ia #divAsistenteIA .btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; }
    .hc-guardar-flotante { right: 10px; bottom: 52px; }
    .hc-guardar-flotante .estadoGuardadoHC { display: none; }
    .hc-sec { padding: 12px 12px; border-radius: 12px; }
}
.col-md-6 .hc-cols { grid-template-columns: minmax(0, 1fr); }
.col-md-6 .hc-rail { display: none; }
.col-md-6 .hc-dos, .col-md-6 #div_Formulario.hc-grid, .col-md-6 .hc-tres { grid-template-columns: minmax(0, 1fr); }
.col-md-6 .hc-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media print { .hc-guardar-flotante, .hc-rail, .hc-ia { display: none !important; } .hc-cols { grid-template-columns: 1fr; } }

/* =====================================================================
   P450 (24-09-2026) · PESTAÑA DE SEGUIMIENTO (mockup seguimiento.html)
   ===================================================================== */
.segEscribir .hc-cabecera { position: -webkit-sticky; position: sticky; top: 0; z-index: 25; }
.segEscribir .hc-cabecera .bannerPacienteCita.detalleBar { margin-bottom: 0; }
.seg-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.seg-form, .seg-lado { min-width: 0; }
.seg-activar { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: normal; }
    .seg-activar .seg-activar-txt b { font-size: 14.5px; color: var(--titulo); display: block; }
    .seg-activar .seg-activar-txt small { font-size: 12.5px; color: var(--gris); display: block; margin-top: 2px; }
.seg-fecha { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; }
    .seg-fecha .floating-label-group { margin: 0; }
.seg-res { font-size: 12.5px; color: var(--gris); margin-top: 7px; display: flex; gap: 14px; flex-wrap: wrap; }
    .seg-res b { color: var(--titulo); }
.seg-canales { display: flex; gap: 9px; flex-wrap: wrap; }
.seg-canal {
    flex: 1 1 140px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--borde); border-radius: 11px;
    padding: 11px 12px; background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gris); margin: 0;
}
    .seg-canal input { position: absolute; opacity: 0; width: 0; height: 0; }
    .seg-canal .ck { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid #b9c2d0; display: grid; place-items: center; font-size: 11px; color: #fff; flex: none; }
    .seg-canal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
    .seg-canal.on { border-color: #a9c4ea; background: var(--info-bg); color: var(--info); }
    .seg-canal.on .ck { background: var(--info); border-color: var(--info); }
    .seg-canal.on .ck::after { content: "✓"; }
    .seg-canal.wa.on { border-color: #9fdcb8; background: #eafaf1; color: #0e7a48; }
    .seg-canal.wa.on .ck { background: #1eb958; border-color: #1eb958; }
    .seg-canal.sin { opacity: .55; }
.seg-mensaje { margin-top: 10px; min-height: 110px; }
.seg-pie { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
    .seg-pie .hc-sp { flex: 1; }
/* Vista previa como en el móvil del paciente */
.seg-movil { background: linear-gradient(160deg, #f4f7fc, #e9eff8); border: 1px solid var(--borde); border-radius: 18px; padding: 14px; }
    .seg-movil-top { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid #dde5f0; margin-bottom: 12px; }
    .seg-movil-top .ic { width: 28px; height: 28px; border-radius: 8px; background: #1eb958; display: grid; place-items: center; flex: none; }
    .seg-movil[data-canal="sms"] .seg-movil-top .ic { background: #3568a8; }
    .seg-movil[data-canal="mail"] .seg-movil-top .ic { background: #5b46b8; }
    .seg-movil-top b { font-size: 13.5px; color: var(--titulo); display: block; }
    .seg-movil-top span { font-size: 11.5px; color: var(--gris); display: block; }
    .seg-burbuja { background: #dcf8c6; border-radius: 12px 12px 12px 4px; padding: 11px 13px; font-size: 13.5px; line-height: 1.55; color: #123; box-shadow: 0 1px 2px rgba(0,0,0,.08); white-space: pre-line; overflow-wrap: break-word; min-height: 44px; }
    .seg-movil[data-canal="sms"] .seg-burbuja { background: #e5efff; }
    .seg-movil[data-canal="mail"] .seg-burbuja { background: #fff; border: 1px solid #e3e6f0; }
    .seg-burbuja .seg-asunto { display: block; margin-bottom: 4px; }
    .seg-burbuja .hora { display: block; text-align: right; font-size: 10.5px; color: #5c7a5c; margin-top: 5px; }
    .seg-nota { font-size: 12px; color: var(--gris); margin-top: 10px; line-height: 1.5; }
    .seg-nota:empty { display: none; }
.seg-guardado .vhist-lbl { font-size: 11.5px; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 4px; }
.seg-guardado .seg-guardado-txt { font-size: 13.5px; color: var(--texto); white-space: pre-line; overflow-wrap: break-word; max-height: 160px; overflow: auto; }
/* Seguimientos ya programados del paciente */
.seg-prog { display: flex; align-items: center; gap: 11px; border: 1px solid var(--borde); border-radius: 11px; padding: 10px 12px; margin-top: 9px; background: #fbfcfe; }
    .seg-prog.actual { border-color: #a9c4ea; background: var(--info-bg); }
    .seg-prog .fch { width: 50px; text-align: center; flex: none; }
    .seg-prog .fch b { display: block; font-size: 16px; font-weight: 800; color: var(--titulo); line-height: 1; }
    .seg-prog .fch span { font-size: 10.5px; font-weight: 700; color: var(--gris); text-transform: uppercase; }
    .seg-prog .txt { min-width: 0; flex: 1; }
    .seg-prog .txt b { font-size: 13.5px; color: var(--titulo); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .seg-prog .txt span { font-size: 12.5px; color: var(--gris); }
    .seg-prog .est { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
    .seg-prog .e-ok { background: var(--exito-bg); color: #0e7a48; border: 1px solid #bde8d0; }
    .seg-prog .e-pdte { background: var(--aviso-bg); color: var(--aviso); border: 1px solid #f1dfae; }
    .seg-prog .e-err { background: var(--peligro-bg); color: #b52a2a; border: 1px solid #f3c3c3; }
@media (max-width: 940px) {
    .seg-cols { grid-template-columns: minmax(0, 1fr); }
    .seg-fecha { grid-template-columns: minmax(0, 1fr); }
}
.col-md-6 .seg-cols { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   P451 (24-09-2026) · FACTURAS Y DOCUMENTOS DEL PACIENTE (mockup facturas-lista.html)
   En Pacientes → Contabilidad y en la pestaña Facturación de la historia clínica.
   ===================================================================== */
.fl-top { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
    .fl-top .fl-titulo { font-size: 19px; color: var(--titulo); font-weight: 700; margin: 0; white-space: nowrap; }
.fl-sp { flex: 1; }
.fl-est { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; display: inline-block; line-height: 1.3; }
.fl-est.e-pag { background: var(--exito-bg); color: #0e7a48; border: 1px solid #bde8d0; }
.fl-est.e-pdte { background: var(--aviso-bg); color: var(--aviso); border: 1px solid #f1dfae; }
.fl-est.e-venc { background: var(--peligro-bg); color: #b52a2a; border: 1px solid #f3c3c3; }
.fl-est.e-parc { background: var(--info-bg); color: var(--info); border: 1px solid #bcd3f0; }
.fl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.fl-kpi { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 15px; box-shadow: 0 2px 6px rgba(20,33,61,.05); position: relative; overflow: hidden; min-width: 0; }
    .fl-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
    .fl-kpi.a::before { background: linear-gradient(180deg, #5b9bd4, #24518c); }
    .fl-kpi.b::before { background: linear-gradient(180deg, #48d08a, #0e7a48); }
    .fl-kpi.c::before { background: linear-gradient(180deg, #f7c65a, #a16207); }
    .fl-kpi.d::before { background: linear-gradient(180deg, #f08a8a, #b52a2a); }
    .fl-kpi .l { font-size: 12px; color: var(--gris); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fl-kpi .v { font-size: 22px; font-weight: 800; color: var(--titulo); letter-spacing: -.5px; margin-top: 4px; white-space: nowrap; }
    .fl-kpi .s { font-size: 12px; color: var(--gris); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.fl-barra { height: 7px; border-radius: 99px; background: #eef1f6; overflow: hidden; margin-top: 7px; }
    .fl-barra span { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.fl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-tb { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #33466a; background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; text-decoration: none; }
    .fl-tb:hover, .fl-tb:focus { text-decoration: none; background: #f5f8fc; color: #33466a; }
    .fl-tb .c { font-size: 11px; font-weight: 700; background: #eef2f8; color: var(--gris); border-radius: 999px; padding: 1px 7px; }
    .fl-tb .c:empty { display: none; }
    .fl-tb.on { background: var(--info); border-color: var(--info); color: #fff; }
    .fl-tb.on .c { background: rgba(255,255,255,.25); color: #fff; }
.fl-filtros { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(20,33,61,.05); }
.fl-busc { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; background: #fff; }
    .fl-busc .glyphicon { color: var(--gris); }
    .fl-busc input { border: 0; outline: 0; flex: 1; font-size: 14px; color: var(--titulo); background: none; min-width: 0; }
.fl-chip { font-size: 12.5px; font-weight: 600; color: #33466a; background: #f5f7fb; border: 1px solid #dde4ee; border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
    .fl-chip.on { background: var(--info); border-color: var(--info); color: #fff; }
.fl-bloque { background: #fff; border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,33,61,.05); scroll-margin-top: 16px; }
.fl-bh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
    .fl-bh h3 { font-size: 14.5px; color: var(--seccion); font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
    .fl-bh h3 svg { width: 15px; height: 15px; stroke: var(--seccion); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
    .fl-bh .fl-tot { font-size: 13px; color: var(--gris); white-space: nowrap; }
.fl-bloque .dri-tabla-caja { padding: 6px 12px 10px; }
.fl-tabla td.fl-nf { font-weight: 700; color: var(--titulo); white-space: nowrap; }
.fl-tabla td.fl-n { text-align: right; white-space: nowrap; font-weight: 700; color: var(--titulo); }
.fl-tabla th.fl-col-acc { text-align: right; }
.fl-tabla td.fl-col-acc { text-align: right; white-space: nowrap; }
.fl-tabla .fl-col-check { width: 34px; text-align: center; }
.fl-acc { display: inline-flex; gap: 5px; justify-content: flex-end; }
.fl-ib { width: 29px; height: 29px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b9cbe4; background: #fff; color: #24518c; }
    .fl-ib:hover, .fl-ib:focus { background: #f0f6fd; color: #24518c; text-decoration: none; }
    .fl-ib .glyphicon { top: 0; font-size: 13px; }
    .fl-ib-borrar { border-color: #f3c3c3; color: #b52a2a; }
    .fl-ib-borrar:hover { background: var(--peligro-bg); color: #b52a2a; }
@media (max-width: 1200px) { .fl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fl-kpis { grid-template-columns: minmax(0, 1fr); } .fl-kpi .v { font-size: 20px; } }
.col-md-6 .fl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =====================================================================
   P424 (24-09-2026) · ALTA Y EDICIÓN DE FACTURA (mockup factura-nueva.html)
   Cabecera con el tipo de documento en pastillas, dos columnas (cliente y conceptos a la
   izquierda; resumen, cobro y «al guardar» a la derecha, pegadas al hacer scroll) y un pie que
   se queda a la vista con el total y los botones. Los campos son los de siempre (GUIA_CAMPOS).
   ===================================================================== */
/* P546 (Enrique, 26-09-2026): «mismos márgenes que las otras pantallas»: ya no se centra a 1240 px, ocupa todo el ancho. */
.fxAlta .fx-wrap { max-width: none; margin: 0; padding-bottom: 8px; }
/* P552 (Enrique, 27-09-2026): el formulario va suelto dentro del .row del layout (margen -15 px), así que
   tocaba el borde derecho del navegador. Lleva el mismo relleno que la columna col-lg-12 de la lista de
   pacientes (15 px; 5 px en el móvil, como .main [class*="col-"]) y nada de él puede ser más ancho que
   la pantalla: todo encoge (min-width: 0) en lugar de salirse por la derecha. */
.fxAlta { display: block; padding-left: 15px; padding-right: 15px; min-width: 0; max-width: 100%; box-sizing: border-box; }
    .fxAlta .fx-wrap, .fxAlta .fx-cols, .fxAlta .fx-izq, .fxAlta .fx-lado, .fxAlta .fx-card, .fxAlta .fx-top, .fxAlta .fx-pie { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .fxAlta .fx-g > * { min-width: 0; }
    .fxAlta .fx-top .fx-tipos { min-width: 0; }
    .fxAlta .fx-sh .btn, .fxAlta .fx-acciones .btn, .fxAlta .fx-cli .btn { max-width: 100%; white-space: normal; }
@media (max-width: 767px) { .fxAlta { padding-left: 5px; padding-right: 5px; } }
.fx-card { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(20,33,61,.05); min-width: 0; }
.fx-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .fx-sh h3 { font-size: 14.5px; color: var(--seccion); font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
    .fx-sh .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.fx-sp { flex: 1; }
.fx-lbl { display: block; font-size: 11.5px; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.fx-plegado { font-size: 12.5px; color: var(--gris); font-weight: 600; cursor: pointer; white-space: nowrap; }
.fx-ayuda { font-size: 12.5px; color: var(--gris); margin-top: 8px; }
.fx-ayuda:empty { display: none; }

/* Cabecera: título, pastillas de tipo y número. */
.fx-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 13px 16px; margin: 4px 0 14px; box-shadow: 0 2px 6px rgba(20,33,61,.05); }
    .fx-top .fx-h1 { font-size: 18px; color: var(--titulo); font-weight: 700; white-space: nowrap; margin: 0; }
.fx-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-tipo { font-size: 13px; font-weight: 600; color: #33466a; background: #f5f7fb; border: 1px solid #dde4ee; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; user-select: none; }
    .fx-tipo.on { background: var(--info); border-color: var(--info); color: #fff; }
.fx-num { margin-left: auto; text-align: right; white-space: nowrap; }
    .fx-num b { font-size: 16px; color: var(--titulo); display: block; }
    .fx-num b:empty::before { content: "—"; color: var(--gris); }
    .fx-num > span { display: block; font-size: 12px; color: var(--gris); }

/* Dos columnas: la derecha se queda pegada al hacer scroll. */
.fx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
    .fx-cols > * { min-width: 0; }
.fx-lado { position: -webkit-sticky; position: sticky; top: 12px; }
.fx-g { display: grid; gap: 11px; }
.fx-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-span2 { grid-column: span 2; }
    .fx-g .floating-label-group { margin: 0; min-width: 0; }
    .fx-g .floating-label-group .form-control, .fx-alta .floating-label-group .form-control { width: 100%; }
    .fx-g .input-group { width: 100%; display: flex; }
        .fx-g .input-group .form-control { flex: 1; width: auto; }
        .fx-g .input-group-addon, .fx-alta .input-group-addon { width: auto; }
/* Los desplegables de siempre siguen en la página (los lee el JavaScript), pero en escritorio mandan las pastillas. */
.fx-oculto-escritorio { display: none; }

/* ¿A quién se factura? */
.fx-cli { display: flex; align-items: center; gap: 12px; border: 1px solid #cfdcef; background: linear-gradient(135deg, #f6faff, #eef4fd); border-radius: 12px; padding: 12px 14px; flex-wrap: wrap; }
    .fx-cli .fx-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; background: linear-gradient(145deg, #6d9bd4, #2b5aa6); }
    .fx-cli .fx-cli-txt { min-width: 0; flex: 1; }
    .fx-cli b { font-size: 15px; color: var(--titulo); display: block; overflow: hidden; text-overflow: ellipsis; }
    .fx-cli span { font-size: 12.5px; color: var(--gris); display: block; overflow: hidden; text-overflow: ellipsis; }
    .fx-cli .fx-cli-cambiar { margin-left: auto; }
.fx-destino { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.fx-dst { flex: 1 1 150px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--gris); background: #fff; cursor: pointer; user-select: none; white-space: nowrap; }
    .fx-dst i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c3cad6; flex: none; }
    .fx-dst.on { border-color: #a9c4ea; background: var(--info-bg); color: var(--info); }
    .fx-dst.on i { border-color: var(--info); background: var(--info); box-shadow: inset 0 0 0 3px #fff; }
.fx-fiscal { border-top: 1px dashed var(--borde); margin-top: 12px; padding-top: 12px; }
.fx-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* Conceptos: favoritos, la línea nueva y la tabla que pinta el servidor. */
.fx-fav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; }
    .fx-fav .fx-fav-sel { width: auto; min-width: 220px; max-width: 100%; height: 36px; padding: 4px 10px; border-radius: 999px; flex: 1 1 220px; }
    .fx-fav .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 999px; }
/* La línea nueva: el concepto a todo lo ancho y debajo unidades, precio, descuento, impuesto y el botón
   (en una sola fila las cajitas del € y del % no cabían). */
.fx-alta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 7px; align-items: end; background: #f8fafd; border: 1px solid var(--borde); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; }
    .fx-alta > .floating-label-group:first-child { grid-column: 1 / -1; }
    .fx-alta .floating-label-group { margin: 0; min-width: 0; }
    .fx-alta .input-group { width: 100%; display: flex; }
        .fx-alta .input-group .form-control { flex: 1; width: auto; min-width: 0; }
    .fx-alta-btn .btn { height: 45px; line-height: 43px; padding: 0 16px; white-space: nowrap; }
.fx-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #33466a; cursor: pointer; margin: 0 0 12px; }
    .fx-chk input { margin: 0; }
.fx-tw { width: 100%; overflow-x: auto; }
    .fx-tw > .table { margin-bottom: 0; min-width: 560px; }
    .fx-tw > .table.table-bordered { border: 0; }
    .fx-tw > .table > thead > tr > th { font-size: 10.5px; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: #f6f8fc; border: 0; border-bottom: 1px solid var(--borde); white-space: nowrap; padding: 8px 6px; }
    .fx-tw > .table > tbody > tr > td, .fx-tw > .table > tfoot > tr > td { border: 0; border-bottom: 1px solid #eef1f7; padding: 9px 6px; font-size: 13.5px; vertical-align: middle; }
    .fx-tw > .table > tbody > tr:hover > td { background: #fafcff; }
    .fx-tw .highrow { font-weight: 700; color: var(--titulo); }
    /* La tabla de conceptos tiene diez columnas: compacta para que quepa sin scroll en la columna izquierda. */
    .fx-tw > .table > thead > tr > th.w60px, .fx-tw > .table > thead > tr > th.w90px, .fx-tw > .table > thead > tr > th.w120px { width: auto; }
    /* !important: DriCloud2021.css pone 6px 15px !important a las celdas de las tablas con borde. */
    .fx-tw > .table > tbody > tr > td { padding: 5px 3px !important; font-size: 12.5px; }
    .fx-tw > .table > thead > tr > th { font-size: 9.5px; padding: 6px 3px; white-space: normal; line-height: 1.2; vertical-align: bottom; overflow: hidden; }
    .fx-tw .table .form-control, .fx-tw .table .form-control.input-sm { width: 100%; min-width: 0; height: 32px; padding: 4px 5px; font-size: 12.5px; border-radius: 8px; }
    .fx-tw .table .input-group { display: flex; width: 100%; }
        .fx-tw .table .input-group .form-control { flex: 1 1 0; width: 0; min-width: 0; }
    .fx-tw .table .input-group-addon { padding: 4px 4px; font-size: 11px; width: auto; flex: none; }
    /* Anchos fijos por columna (colgroup del parcial): así los campos no la ensanchan. */
    /* P602 (un cliente de Bolivia, 28-09-2026: «la pantalla sale cortada, no sale toda la información»): el
       concepto se quedaba en 3 letras («IPL.») porque las demás columnas son fijas y a él le tocaba lo que
       sobraba. Ahora la tabla no baja de 780 px (el concepto tiene al menos ~200 px) y, si no cabe, se
       desplaza a lo ancho con su barra, en vez de aplastar el concepto. */
    /* P621 (29-09-2026, el mismo cliente: «sigue igual y no nos deja mover la pantalla a los lados»): en
       Firefox (y Safari antiguo) el min-width NO vale en una <table>: la tabla se encogía igual, el concepto
       volvía a «IPL.» y, como ya no sobresalía, tampoco salía la barra para desplazarla. Además Bootstrap le
       pone max-width: 100%, que en esos navegadores manda. Se quita el max-width y el ancho mínimo se pone
       con width: max(), que sí respetan todos (comprobado simulándolo en Chrome: 780 px y barra a los lados). */
    .fx-tw > .table { table-layout: fixed; max-width: none; width: 100%; width: max(100%, 780px); min-width: 780px; }
        .fx-tw > .table col.fxc-und { width: 48px; }
        .fx-tw > .table col.fxc-precio { width: 88px; }
        .fx-tw > .table col.fxc-dto { width: 72px; }
        .fx-tw > .table col.fxc-imp { width: 64px; }
        .fx-tw > .table col.fxc-valor { width: 72px; }
        .fx-tw > .table col.fxc-importe { width: 84px; }
        .fx-tw > .table col.fxc-ii { width: 30px; }
        .fx-tw > .table col.fxc-subtotal { width: 86px; }
        .fx-tw > .table col.fxc-borrar { width: 30px; }
        .fx-tw > .table > tbody > tr > td[style*="text-align:right"] { white-space: nowrap; }
        .fx-tw > .table > tbody > tr > td { overflow: hidden; }

/* Columna derecha: resumen, estado del pago y «al guardar». */
.fx-res { background: linear-gradient(160deg, #fff, #f7faff); border-color: #cfdcef; }
.fx-lin { display: flex; align-items: center; font-size: 13.5px; padding: 6px 0; color: var(--texto); }
    .fx-lin span { margin-left: auto; font-weight: 600; color: var(--titulo); white-space: nowrap; }
.fx-total { display: flex; align-items: baseline; padding: 10px 12px; border-radius: 11px; background: linear-gradient(135deg, #24518c, #3568a8); color: #fff; margin-top: 8px; }
    .fx-total b { font-size: 14px; font-weight: 600; opacity: .9; }
    .fx-total span { margin-left: auto; font-size: 24px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; }
.fx-pagos { display: flex; gap: 8px; }
.fx-pg { flex: 1; min-width: 0; text-align: center; border: 1px solid var(--borde); border-radius: 11px; padding: 10px 4px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--gris); cursor: pointer; background: #fff; user-select: none; }
    .fx-pg.on.no { background: var(--peligro-bg); border-color: #f3c3c3; color: #b52a2a; }
    .fx-pg.on.si { background: var(--exito-bg); border-color: #bde8d0; color: #0e7a48; }
    .fx-pg.on.pa { background: var(--aviso-bg); border-color: #f1dfae; color: var(--aviso); }
.fx-lado .alert { margin: 10px 0 0; padding: 9px 12px; font-size: 12.5px; border-radius: 10px; }
/* Las formas de pago (ctlFacturaFormasPago) están pensadas a lo ancho: aquí, en la columna estrecha,
   cada dato va en su fila. */
.fx-lado #divFacturaFormasPago { margin: 10px 0 0; }
    .fx-lado #divFacturaFormasPago > .form-group { padding: 0; margin-bottom: 10px; }
    .fx-lado #divFacturaFormasPago .panel { margin-bottom: 0; }
    .fx-lado #divFacturaFormasPago .panel-body { padding: 10px 10px 0; }
    .fx-lado #divFacturaFormasPago .row { margin: 0; }
    .fx-lado #divFacturaFormasPago .row > .form-group { width: 100%; float: none; padding: 0; margin-bottom: 10px; }
    .fx-lado #divFacturaFormasPago .input-group { width: 100%; display: flex; }
        .fx-lado #divFacturaFormasPago .input-group .form-control { flex: 1; width: auto; }
.fx-lado .panelFirmaTimbrado .checkbox { margin: 6px 0; }
.fx-lado .panelFirmaTimbrado .ayudaFirmaTimbrado { font-size: 12px; margin: 4px 0 8px; }
.fx-lado .panelFirmaTimbrado .alert { margin-top: 8px; }

/* Pie: se queda a la vista (encima de la barra del copyright, como el resto de pies del programa). */
.fx-pie { position: -webkit-sticky; position: sticky; bottom: 44px; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 14px; margin-top: 6px; box-shadow: 0 -6px 18px rgba(20,33,61,.10); }
    .fx-pie .btn { white-space: nowrap; }
    .fx-pie .fx-pie-total { font-size: 13px; color: var(--gris); margin-left: 6px; white-space: nowrap; }
        .fx-pie .fx-pie-total b { font-size: 19px; font-weight: 800; color: var(--titulo); margin-left: 4px; }
        .fx-pie .fx-pie-pdte { margin-left: 8px; font-size: 12.5px; font-weight: 700; color: #b52a2a; }
        .fx-pie .fx-pie-pdte:empty { display: none; }
    .fx-pie .fx-pie-guardar { display: inline-flex; gap: 10px; }
    .fx-pie .fx-mas .dropdown-menu { border-radius: 10px; margin-bottom: 8px; }
        .fx-pie .fx-mas .dropdown-menu > li > a { padding: 8px 16px; cursor: pointer; }

/* P552: la columna derecha (resumen, total y estado del pago) pasa debajo antes: con el menú lateral
   abierto, a 1100-1200 px la columna izquierda se quedaba en ~500 px y las tarjetas no cabían. */
@media (max-width: 1199px) {
    .fx-cols { grid-template-columns: minmax(0, 1fr); }
    .fx-lado { position: static; }
}
/* P602: con la pantalla escalada (125 %) o el menú lateral abierto, entre 1200 y 1400 px la columna izquierda
   se quedaba en ~750 px y la tabla de conceptos no cabía: el resumen de la derecha pasa debajo también ahí. */
@media (max-width: 1399px) {
    .fx-cols { grid-template-columns: minmax(0, 1fr); }
    .fx-lado { position: static; }
}
/* P602: que se vea que la tabla se puede desplazar a lo ancho. */
.fx-tw { scrollbar-width: thin; }
    .fx-tw::-webkit-scrollbar { height: 8px; }
    .fx-tw::-webkit-scrollbar-thumb { background: #c9d3e3; border-radius: 4px; }
@media (max-width: 1100px) {
    .fx-cols { grid-template-columns: minmax(0, 1fr); }
    .fx-lado { position: static; }
    .fx-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .fx-g4, .fx-g2 { grid-template-columns: minmax(0, 1fr); }
    .fx-span2 { grid-column: auto; }
    .fx-alta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .fx-alta > .floating-label-group:first-child { grid-column: 1 / -1; }
        .fx-alta-btn { grid-column: 1 / -1; }
        .fx-alta-btn .btn { width: 100%; text-align: center; }
    .fx-dst { flex: 1 1 100%; }
    .fx-top { gap: 9px; }
    .fx-num { margin-left: 0; text-align: left; width: 100%; }
    .fx-sh .btn-sm { flex: 1 1 auto; text-align: center; }
    .fx-card { padding: 12px; border-radius: 12px; }
    .fx-pie { padding: 8px 10px; gap: 6px; justify-content: flex-end; bottom: 0; border-radius: 12px 12px 0 0; }
        .fx-pie .fx-pie-total { width: 100%; margin: 0 0 4px; }
        .fx-pie .btn { padding: 8px 10px; font-size: 12.5px; flex: 1 1 auto; text-align: center; }
        .fx-pie .fx-mas { flex: 1 1 auto; display: flex; }
        .fx-pie .fx-mas > .btn { flex: 1; }
        .fx-pie .fx-pie-guardar { display: flex; gap: 6px; flex: 1 1 100%; }
        .fx-pie .fx-pie-guardar .btn { flex: 1; }
    .fx-pagos { flex-wrap: wrap; }
    .fx-pg { flex: 1 1 30%; }
}
@media print { .fx-pie { display: none; } .fx-cols { grid-template-columns: 1fr; } .fx-lado { position: static; } }

/* P552 (27-09-2026): PANEL "CENTRO DE SOPORTE" (#panelSoporteDerecha, ctlVistaMenuSuperior) ASOMANDO POR
   LA DERECHA. Cerrado se escondía con right: -34%, pero el panel mide como mínimo 420 px: por debajo de
   ~1260 px de ventana el 34% es menos que su ancho y se quedaba una franja (40-80 px) del panel encima
   del contenido de TODAS las pantallas ("Centro d… Todo lo que… ayudas vis…"), tapando campos y botones
   del borde derecho. Ahora se esconde desplazándolo su propio ancho (translateX(100%)) y además con
   visibility: hidden, que quita también la sombra y el foco del teclado. Abierto, igual que antes. */
.panel-soporte-derecha {
    right: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
    .panel-soporte-derecha.open {
        right: 0;
        transform: none;
        visibility: visible;
        transition: transform .25s ease, visibility 0s linear 0s;
    }

/* ---------------------------------------------------------------------
   P503 (25-09-2026): LA VIDEOLLAMADA (Views/Shared/_Videollamada.cshtml)
   Recuadro flotante abajo a la derecha, por encima de todo (también de la
   ventana de cita, que es un modal de z-index 1050). Se amplía a media
   pantalla (.dri-video-grande) o a pantalla completa (.dri-video-completa).
   --------------------------------------------------------------------- */
.dri-video {
    position: fixed; right: 16px; bottom: 16px; z-index: 1055;
    width: 380px; max-width: calc(100vw - 32px);
    background: var(--card); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(20,33,61,.28);
    display: flex; flex-direction: column; overflow: hidden;
}
.dri-video-cabecera {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 8px 14px; color: #fff; font-weight: 600; font-size: 14px;
    background: linear-gradient(180deg, var(--header-1), var(--header-2));
}
.dri-video-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dri-video-icono { background: transparent; border: 0; color: #fff; padding: 2px 6px; cursor: pointer; opacity: .85; }
    .dri-video-icono:hover { opacity: 1; }
.dri-video-pantalla { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #0f1a2b; }
    .dri-video-pantalla #subscriber { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
    .dri-video-pantalla #publisher {
        position: absolute; left: 8px; bottom: 52px; width: 30%; aspect-ratio: 4 / 3; object-fit: cover; z-index: 3;
        border: 2px solid #fff; border-radius: 6px; background: #222;
    }
.dri-video-esperando { position: absolute; top: 38%; left: 0; right: 0; text-align: center; color: #dce6f5; font-size: 14px; z-index: 2; padding: 0 16px; }
.dri-video-botones { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 10px; z-index: 4; }
.dri-video-boton {
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.2); color: #fff; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
}
    .dri-video-boton:hover { background: rgba(255,255,255,.32); }
    .dri-video-boton.dri-video-apagado { background: #fff; color: var(--titulo); }
    .dri-video-boton.dri-video-colgar { background: var(--peligro); }
        .dri-video-boton.dri-video-colgar:hover { background: var(--peligro-osc); }
        .dri-video-boton.dri-video-colgar img { width: 22px; height: auto; }
.dri-video-pie { padding: 8px 12px 10px; font-size: 13px; }
    .dri-video-pie label { font-size: 12.5px; color: var(--gris); font-weight: 600; margin: 0 0 3px; }
.dri-video-enlace { display: flex; gap: 6px; }
    .dri-video-enlace .form-control { flex: 1; min-width: 0; height: 32px; font-size: 12.5px; }
    .dri-video-enlace .btn { white-space: nowrap; }
.dri-video-envios { list-style: none; margin: 6px 0 0; padding: 0; }
    .dri-video-envios li { padding: 2px 0; overflow-wrap: anywhere; }
    .dri-video-envios li.ok { color: var(--exito); }
    .dri-video-envios li.ko { color: var(--peligro); }
    .dri-video-envios li.precio { color: var(--texto); }
.dri-video-error { background: var(--peligro-bg); color: var(--peligro-osc); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }

/* Media pantalla a la derecha y pantalla completa (la v1 hacía lo mismo con .screenBig). */
.dri-video.dri-video-grande { width: 50vw; top: 60px; bottom: 16px; }
    .dri-video.dri-video-grande .dri-video-pantalla { flex: 1; aspect-ratio: auto; }
.dri-video.dri-video-completa { width: auto; left: 16px; top: 16px; }

/* La ventana de elegir servicio y los botones que lanzan la llamada. */
.dri-video-ventana label { font-weight: 600; }
.dri-video-importe { max-width: 220px; }
.dri-video-destino { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--gris); margin-bottom: 6px; }
.dri-video-aviso { background: var(--aviso-bg); color: var(--aviso); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.dri-video-lanzar img { width: 18px; height: auto; vertical-align: -3px; }
.bannerPacienteCita .dri-video-lanzar { flex: none; align-self: center; }
#div_ficha_Paciente .fotoFicha .dri-video-lanzar-foto { position: absolute; left: 10px; top: 10px; padding: 5px 7px; border-radius: 8px; }

@media (max-width: 760px) {
    .dri-video, .dri-video.dri-video-grande { left: 8px; right: 8px; width: auto; max-width: none; bottom: 8px; }
    .dri-video.dri-video-grande { top: 8px; }
}
/* P498: tabla que no ha podido cargar sus datos (dricloud-comun.js). Una línea discreta dentro de la
   tabla, en gris y centrada como la de «sin datos», en vez de la ventana del navegador. */
table.dataTable td.dri-tabla-error { color: var(--gris); font-style: italic; text-align: center; padding: 14px 10px; }
    table.dataTable td.dri-tabla-error .dri-tabla-reintentar { color: var(--link); font-style: normal; font-weight: 600; margin-left: 6px; }

/* P560 (Enrique, 27-09-2026): el «Ver tabla» de las gráficas (.dri-grafica-acciones) iba con float:right
   DETRÁS del h2, así que caía una línea por debajo del título, fuera de la cabecera, y se montaba sobre
   la primera raya de la rejilla de la gráfica («tachado»). Ahora el título y la acción comparten la
   misma línea de la cabecera. Vale para todas las pantallas que usan esa barra (Analítica, Estadísticas,
   Cuentas, Reseñas...). */
.panel-heading:has(> .dri-grafica-acciones) { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
    .panel-heading:has(> .dri-grafica-acciones) > h2 { flex: 1 1 auto; min-width: 0; }
.panel-heading > .dri-grafica-acciones { float: none; margin-left: auto; line-height: 1.3; }
    .panel-heading > .dri-grafica-acciones .btn-link { padding: 0 4px; line-height: 1.3; vertical-align: baseline; }
/* Por si algún navegador no entiende :has(): la acción va arriba a la derecha, dentro de la cabecera. */
@supports not selector(:has(*)) {
    .panel-primary > .panel-heading { position: relative; }
    .panel-heading > .dri-grafica-acciones { position: absolute; right: 16px; top: 11px; margin: 0; }
}

/* =====================================================================
   P568-P573 (Enrique, 27-09-2026) · HISTORIA CLÍNICA
   ===================================================================== */
/* P568: Diagnóstico obligatorio. Asterisco en el título y, si se intenta guardar sin él, la tarjeta en
   rojo con el aviso debajo. */
.hc-oblig { color: #c62828; font-weight: 700; margin-left: 2px; }
.hc-dx-aviso { display: none; color: #b42323; font-weight: 600; font-size: 13.5px; margin-top: 6px; }
.hc-sec.hc-dx.hc-dx-error { border-color: #e57373 !important; box-shadow: 0 0 0 3px rgba(229,115,115,.25) !important; }
.hc-sec.hc-dx.hc-dx-error .hc-dx-aviso { display: block; }

/* P569: el cuadro de la historia clínica por voz, plegado en una sola línea. El aviso y la casilla de
   consentimiento se despliegan debajo al pulsar el botón. */
.hc-ia { padding: 8px 14px; margin: 8px 0 12px; gap: 8px 12px; border-radius: 12px; }
    .hc-ia .hc-ia-mic { width: 32px; height: 32px; border-radius: 9px; }
    .hc-ia .hc-ia-txt { flex: 1 1 200px; }
    .hc-ia .hc-ia-txt b { font-size: 14.5px; }
    .hc-ia #divAsistenteIA .btn,
    .hc-ia #btnAsistenteIAIniciarGrabacion { padding: 7px 14px; font-size: 13px; }
    .hc-ia .hc-ia-detalle { display: none; flex: 1 1 100%; border-top: 1px solid rgba(255,255,255,.25); padding-top: 10px; }
    .hc-ia.abierta .hc-ia-detalle { display: block; }
    .hc-ia .hc-ia-detalle p { font-size: 13px; line-height: 1.45; margin: 0 0 10px; opacity: .95; }
    .hc-ia .hc-ia-detalle input[type=checkbox] { width: 17px; height: 17px; vertical-align: -3px; accent-color: #fff; cursor: pointer; }
    .hc-ia .hc-ia-detalle-btns { display: flex; flex-wrap: wrap; gap: 8px; }
    .hc-ia .hc-ia-iniciar { background: #fff !important; color: #24518c !important; border: 0; font-weight: 700; font-size: 13.5px; padding: 8px 18px; border-radius: 9px; }
    .hc-ia .hc-ia-cerrar { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55); font-size: 13px; padding: 7px 14px; border-radius: 9px; }

/* P570: el botón flotante «Guardar visita» tapaba el último botón de abajo («Enviar por email»): se
   deja sitio debajo de la barra final para que, al llegar abajo del todo, quede por encima. */
.hcEscribir .accionesHCFin { margin-bottom: 78px; }

/* P573: la foto del paciente un poco más grande. */
.bannerPacienteCita .bpac-av { width: 62px; height: 62px; border-radius: 14px; font-size: 21px; }

/* P572: en el móvil la cabecera del paciente era enorme y, al ir fija, tapaba media pantalla. En el
   móvil deja de ir fija (se va al bajar), y los datos van en dos columnas con letra más pequeña. */
@media (max-width: 767px) {
    .hcEscribir .hc-cabecera, .segEscribir .hc-cabecera { position: static; }
    .bannerPacienteCita.detalleBar { position: relative; padding: 10px 12px; gap: 8px 10px; align-items: flex-start; }
    .bannerPacienteCita .bpac-av { width: 48px; height: 48px; font-size: 17px; border-radius: 12px; }
    /* Foto y datos en la misma fila; los datos en dos columnas. */
    .bannerPacienteCita .bpac-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; flex: 1 1 0; min-width: 0; font-size: 12.5px; }
    .bannerPacienteCita .bpac-datos > div { white-space: normal; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
    .bannerPacienteCita .bpac-datos > div:first-child { grid-column: 1 / -1; font-size: 14px; padding-right: 38px; }
    .bannerPacienteCita .bpac-datos b { font-size: 10px; }
    /* La fecha de nacimiento sobra en el móvil: la edad ya va junto al nombre. */
    .bannerPacienteCita .bpac-datos > div:has(#lbl_FechaNacPaciente) { display: none; }
    .bannerPacienteCita .bpac-alergias { font-size: 12.5px; padding: 4px 10px; }
    /* Videollamada: solo el icono, arriba a la derecha. */
    .bannerPacienteCita .dri-video-lanzar { position: absolute; top: 8px; right: 8px; font-size: 0 !important; padding: 6px 7px !important; line-height: 1; min-width: 0; }
    .bannerPacienteCita .dri-video-lanzar img { width: 18px; vertical-align: middle; }
    /* P569 en el móvil: micro y botón en la misma línea; el título ya lo dice el botón. */
    .hc-ia .hc-ia-txt { display: none; }
    .hc-ia #divAsistenteIA { flex: 1 1 0; margin-left: 0; min-width: 0; }
    .hc-ia #divAsistenteIA .btn { width: 100%; max-width: 100%; box-sizing: border-box; }
    .hc-ia #divAsistenteIACita { width: 100%; min-width: 0; }
    .hcEscribir .accionesHCFin { margin-bottom: 84px; }
}


/* 28-09-2026 (Enrique): los iconos de arriba a la derecha, todos del mismo tamaño. El de la señal
   (goodSignal/mediumSignal/lowSignal.png) es una imagen apaisada y con «width: auto» salía el doble de
   ancho que los demás: se mete en la misma caja cuadrada. */
header ul.menu-aux img#imgSignal { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 991px) { header ul.menu-aux img#imgSignal { width: 22px !important; height: 22px !important; } }

/* P625 (Enrique, 29-09-2026): en los menús de la izquierda (Telemedicina → WhatsApp, Mensajes...) el número
   del contador salía descentrado dentro del círculo rojo: una regla antigua le ponía 3 px de relleno arriba
   con alto fijo de 18 px. Ahora el número va centrado y el círculo, a la derecha y a media altura de la fila. */
.nav-aside .badge.badge-top-right {
    padding: 0 5px !important;
    line-height: 18px !important;
    height: 18px !important;
    min-width: 18px;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%);
    text-align: center;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------
   P647 (30-09-2026, repaso de Enrique «buenos contrastes»): LAS LISTAS DE AUTOCOMPLETAR (jQuery UI).
   Salían con el gris de fábrica de jQuery UI: fondo gris, la opción marcada en azul clarito sobre gris
   (casi no se leía) y «No hay datos» gris sobre gris. Ahora: fondo blanco, texto oscuro, la opción
   marcada en el azul de la casa con texto blanco, y el aviso de «sin resultados» en cursiva gris legible.
   Vale para todos los buscadores (aseguradora, tratamientos, medicamentos, CRM...). */
ul.ui-autocomplete.ui-menu {
    background: #fff !important;
    border: 1px solid var(--borde, #e3e6f0) !important;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 33, 61, .14);
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--fuente);
    font-size: 14px;
}
ul.ui-autocomplete .ui-menu-item,
ul.ui-autocomplete .ui-menu-item > a,
ul.ui-autocomplete .ui-menu-item > div {
    background: #fff !important;
    color: var(--texto, #333f52) !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 8px 12px;
    line-height: 1.35;
    white-space: normal;
    cursor: pointer;
}
ul.ui-autocomplete .ui-menu-item > a,
ul.ui-autocomplete .ui-menu-item > div { padding: 0; background: transparent !important; }
ul.ui-autocomplete .ui-menu-item:hover,
ul.ui-autocomplete .ui-menu-item .ui-state-focus,
ul.ui-autocomplete .ui-menu-item .ui-state-active,
ul.ui-autocomplete .ui-menu-item.ui-state-focus {
    background: var(--seccion, #2b5aa6) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 0;
}
ul.ui-autocomplete .ui-menu-item:hover > a,
ul.ui-autocomplete .ui-menu-item:hover > div { color: #fff !important; }
ul.ui-autocomplete .ui-state-disabled,
ul.ui-autocomplete .ui-state-disabled > a,
ul.ui-autocomplete .ui-state-disabled > div {
    opacity: 1 !important;
    color: var(--gris, #636f83) !important;
    font-style: italic;
    cursor: default;
    background: #fff !important;
}
@media (max-width: 767px) {
    ul.ui-autocomplete.ui-menu { max-width: calc(100vw - 24px); font-size: 15px; }
    ul.ui-autocomplete .ui-menu-item { padding: 11px 14px; }   /* dedo: filas más altas */
}

/* P647: la pastilla «Configurado / Sin configurar» de las claves. Estaba definida solo en Datos de la
   empresa, así que en Telemedicina → Recordatorio por WhatsApp salía como texto pegado al rótulo. */
.dri-emp-estado { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.5; padding: 1px 8px;
                  border-radius: 10px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.dri-emp-estado.ok { background: var(--exito-bg, #e8f8ef); color: var(--exito, #0e9f6e); }
.dri-emp-estado.no { background: #f1f3f8; color: var(--gris, #636f83); }

/* P647 (30-09-2026, repaso en móvil): en el teléfono la barra fija del copyright (34 px, z-index 9999)
   tapaba la barra de acciones de abajo de las pantallas (p. ej. «Guardar» y el total del documento de
   pago) y no aporta nada. En el móvil deja de estar fija y se queda al final de la página; y Dri, el
   asistente, se hace más pequeño para no tapar lo que hay debajo. */
@media (max-width: 767px) {
    footer.navbar-fixed-bottom { position: static !important; }
    body { padding-bottom: 0 !important; }
    #asisFab { width: 56px !important; height: 56px !important; left: 6px !important; bottom: 8px !important; }
    #asisFab .asis-masc { width: 56px !important; height: 56px !important; }
    #asisHueco { height: 72px; }
}

/* P647: ficha del paciente en el móvil. La foto ocupaba el ancho entero (426×426) y había que bajar
   una pantalla entera para llegar a lo que se había abierto (bonos, contabilidad...). En el móvil la
   foto se queda en 96 px, centrada, como una tarjeta de contacto. */
@media (max-width: 767px) {
    #div_ficha_Paciente .fotoFicha { text-align: center; }
    #div_ficha_Paciente .fotoFicha img#imgPaient { width: 96px !important; height: 96px !important;
        max-width: 96px; object-fit: cover; border-radius: 50%; padding: 2px; display: block; margin: 0 auto; }
}

/* P652: tarjeta de la historia que se queda sola en su fila → ocupa todo el ancho (la marca dricloud-comun.js). */
.hc-dos > .hc-solo, #div_Formulario.hc-grid > .hc-solo { grid-column: 1 / -1; }

/* =====================================================================
   P681 (30-09-2026) · HISTORIA CLÍNICA EN EL DASHBOARD DE LA CITA
   1) Tarjeta «Cita»: Formulario de historia clínica, Tipo de cita y Estado de cita en UNA línea;
      Comentarios (chat secretaria) y Anotaciones en la segunda. Menos hueco entre campos (sin que
      se toquen). Se decide por el ANCHO DE LA TARJETA (container query), no por el de la ventana:
      en la columna del Dashboard la ventana es ancha pero la tarjeta no. Es el mismo parcial en la
      pestaña «Historia clínica», así que allí se ve igual.
   2) Historial previo, SOLO en el Dashboard (#div_Historial.hist-dashboard, lo pone DetalleCita al
      abrir la vista doble): la fecha va DENTRO de la cabecera de la visita, delante de la píldora del
      diagnóstico, y el texto usa todo el ancho. La pestaña «Historial previo» no cambia.
   3) «Documentos del paciente» debajo del historial, solo en el Dashboard.
   ===================================================================== */
#divDatosCitaHC { container-type: inline-size; container-name: hccita; }
.hc-cita-f1, .hc-cita-f2 { display: grid; gap: 8px 10px; }
.hc-cita-f1 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 8px; }
.hc-cita-f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-cita-f1 .floating-label-group, .hc-cita-f2 .floating-label-group { margin: 0; min-width: 0; }
/* Estrecha: el formulario ocupa su fila y tipo + estado van debajo, juntos; muy estrecha, uno por fila. */
@container hccita (max-width: 560px) {
    .hc-cita-f1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-cita-f1 > :first-child { grid-column: 1 / -1; }
}
@container hccita (max-width: 400px) {
    .hc-cita-f1, .hc-cita-f2 { grid-template-columns: minmax(0, 1fr); }
}
@supports not (container-type: inline-size) {
    @media (max-width: 767px) { .hc-cita-f1, .hc-cita-f2 { grid-template-columns: minmax(0, 1fr); } }
}

/* 2) La fecha dentro de la cabecera de la visita (solo Dashboard). La caja de la fecha sigue siendo
      el mismo elemento; aquí se coloca encima de la cabecera y la cabecera le deja su hueco. */
#div_Historial.hist-dashboard .vhist-visita { padding-left: 0; }
#div_Historial.hist-dashboard .vhist-visita::before,
#div_Historial.hist-dashboard .vhist-punto { display: none; }
#div_Historial.hist-dashboard .vhist-fecha {
    left: 13px; top: 13px; width: 52px; padding: 5px 0 4px; border-radius: 10px;
    background: #f5f8fc; border-color: #d9e2ef; box-shadow: none; pointer-events: none;
}
#div_Historial.hist-dashboard .vhist-fecha b { font-size: 18px; }
#div_Historial.hist-dashboard .vhist-fecha span,
#div_Historial.hist-dashboard .vhist-fecha em { font-size: 10.5px; }
#div_Historial.hist-dashboard .quirofanoHist .vhist-fecha { border-left: 3px solid #6d3bd4; }
#div_Historial.hist-dashboard .pruebaHist .vhist-fecha { border-left: 3px solid #a16207; }
#div_Historial.hist-dashboard .vhist-h { padding-left: 78px; min-height: 84px; }
#div_Historial.hist-dashboard .hospitalizacionHistDetalle { margin-left: 14px; }
/* En el móvil la caja de la fecha se come media cabecera: pasa a una línea («28 SEPT 2026») encima
   de la píldora y el diagnóstico vuelve a tener todo el ancho. */
@media (max-width: 560px) {
    #div_Historial.hist-dashboard .vhist-fecha { width: auto; display: flex; align-items: baseline; gap: 5px;
                                                  padding: 3px 9px; top: 12px; left: 14px; }
    #div_Historial.hist-dashboard .vhist-fecha b { font-size: 14px; display: inline; }
    #div_Historial.hist-dashboard .vhist-fecha span,
    #div_Historial.hist-dashboard .vhist-fecha em { display: inline; margin: 0; }
    #div_Historial.hist-dashboard .vhist-h { padding-left: 16px; padding-top: 46px; min-height: 0; }
}

/* 3) Documentos del paciente (solo Dashboard) */
#divDocsPacienteDash { display: none; }
#div_Historial.hist-dashboard #divDocsPacienteDash { display: block; }
.dash-docs {
    container-type: inline-size; container-name: dashdocs;
    margin: 8px 0 18px; background: #fff; border: 1px solid #e3e6f0; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20,33,61,.06); overflow: hidden;
}
.dash-docs-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e3e6f0;
               background: linear-gradient(180deg, #f8fafd, #fff); flex-wrap: wrap; }
.dash-docs-h h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--seccion, #2b5aa6);
                  display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash-docs-h h3 svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
                      stroke-linecap: round; stroke-linejoin: round; }
.dash-docs-n { background: #eaf2fd; color: #1e4e8c; border: 1px solid #bcd3f0; border-radius: 999px;
               font-size: 11.5px; font-weight: 700; padding: 1px 8px; }
.dash-docs-n:empty { display: none; }
.dash-docs-sp { flex: 1; }
.dash-docs-todos { white-space: nowrap; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 13px; border-radius: 9px; cursor: pointer;
                   background: #fff; color: #24518c; border: 1px solid #b9cbe4; }
.dash-docs-todos:hover { background: #f0f6fd; }
.dash-docs-lista { list-style: none; margin: 0; padding: 8px; display: grid;
                   grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.dash-docs-lista:empty { display: none; }
.dash-doc { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: 10px; min-width: 0;
            color: inherit; text-decoration: none; border: 1px solid transparent; }
.dash-doc:hover, .dash-doc:focus { background: #f5f8fc; border-color: #e3e9f3; text-decoration: none; color: inherit; }
.dash-doc-ico { width: 40px; height: 40px; border-radius: 9px; flex: none; display: flex; align-items: center;
                justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #fff;
                text-transform: uppercase; overflow: hidden; background: #7a879b; }
.dash-doc-ico.ext-pdf { background: #d64545; }
.dash-doc-ico.ext-doc { background: #2b5aa6; }
.dash-doc-ico.ext-xls { background: #1f8a5b; }
.dash-doc-ico.ext-img { background: #eef2f8; color: #5d7ba6; border: 1px solid #dde4ee; }
.dash-doc-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-doc-txt { flex: 1; min-width: 0; }
.dash-doc-tit { display: block; font-size: 13.5px; font-weight: 600; color: #14213d; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.dash-doc-meta { display: block; font-size: 12px; color: #636f83; margin-top: 2px; }
.dash-doc-acc { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #b9cbe4; color: #24518c;
                background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dash-doc-acc .glyphicon { top: 0; }
.dash-docs-vacio { padding: 16px; color: #636f83; font-size: 13px; text-align: center; }
.dash-docs-vacio:empty { display: none; }
@container dashdocs (max-width: 520px) {
    .dash-docs-lista { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   P684 (30-09-2026). CABECERA EN PORTÁTILES PEQUEÑOS (992–1399 px).
   Captura de un cliente en un portátil de ~1280 px (con la pantalla al
   125 %, el navegador trabaja a ~1024 px): el logotipo de DriCloud se
   iba a la izquierda y se montaba encima del nombre de la clínica, la
   fila de módulos bajaba de línea y la cabecera crecía, así que por
   debajo del logotipo de la clínica (que tiene un tope de 130 px, P401)
   asomaba el azul.

   Por qué: el logotipo de DriCloud flota a la derecha DESPUÉS de los
   iconos del usuario, que también flotan a la derecha. Si el hueco entre
   los dos es de un par de píxeles de menos (depende de la letra del
   eslogan), el navegador lo coloca A LA IZQUIERDA de los iconos del
   usuario, en mitad de la cabecera. Y los 11 módulos (80 px cada uno)
   más el logotipo (128 px) no caben en una fila por debajo de ~1230 px.

   Arreglo, solo en este tramo de anchos (el móvil, <992, y las pantallas
   grandes no cambian):
     1) el logotipo de DriCloud siempre DEBAJO de los iconos del usuario
        y pegado a la derecha (clear: right), y algo más pequeño;
     2) la fila de módulos ocupa el ancho que queda a su izquierda y los
        módulos se estrechan lo justo para caber (80 px como máximo);
     3) por debajo de 1100 px el logotipo de DriCloud no se enseña: no
        hay sitio para él y los módulos sin que se pisen.
   ====================================================================== */
@media (min-width: 992px) and (max-width: 1399px) {
    header img.logo-header {
        clear: right;
        height: 36px;
        width: auto;
        margin-top: 10px;
        margin-left: 10px;
    }
    header ul.menu-principal {
        float: none;
        display: flex;
        flex-wrap: nowrap;
    }
        header ul.menu-principal > li {
            float: none;
            flex: 0 1 80px;
            width: auto;
            min-width: 0;
        }
            header ul.menu-principal > li > a {
                padding-left: 0;
                padding-right: 0;
            }
            header ul.menu-principal li p span {
                white-space: nowrap;
                letter-spacing: -0.2px;
            }
}
@media (min-width: 992px) and (max-width: 1199px) {
    header ul.menu-principal li p span { font-size: 12px; }
}
@media (min-width: 992px) and (max-width: 1099px) {
    header img.logo-header { display: none; }
}
/* P889 (Enrique, 05-10-2026, captura de Ana Belén en Safari del Mac a 1486 px): el mismo fallo de P684
   pero en pantallas de 1400 px o más, que se habían quedado fuera de ese arreglo. El logotipo de
   DriCloud tiene margin-top: -12px y solo le sobran ~2 px por debajo de los iconos del usuario; en
   Safari esa fila sale unos píxeles más alta (o con el icono de instalar / el fichaje) y el logotipo
   se iba a la izquierda de los iconos, en mitad de la cabecera, encima de «Marketing». Con
   clear: right siempre queda debajo de los iconos y pegado a la derecha (probado de 1400 a 1920 px
   con la fila hasta 16 px más alta). */
@media (min-width: 1400px) {
    header img.logo-header { clear: right; }
}

/* P700b (Enrique, 01-10-2026): en las tablas, cada PDF lleva dos iconos juntos: el OJO (lo abre en una
   pestaña nueva) y la FLECHA (lo descarga). Compactos para que la columna no crezca. */
.dri-pdf-acc { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; vertical-align: middle; }
.dri-pdf-acc a { display: inline-flex; align-items: center; text-decoration: none; }
.dri-pdf-acc + a, a + .dri-pdf-acc { margin-left: 10px; }
/* En los visores de la cita (documentos y facturas) el par va donde iba la flecha, arriba a la derecha;
   el título y la X de borrar se apartan para dejarle sitio. */
.visorCitaLista li:has(.visorCitaDescargar.dri-pdf-acc) { padding-right: 58px; }
.visorCitaLista li:has(.visorCitaDescargar.dri-pdf-acc):has(.visorDocBorrar) { padding-right: 80px; }
.visorCitaLista li:has(.visorCitaDescargar.dri-pdf-acc) .visorDocBorrar { right: 56px; }
#cuerpoDocumentosConsulta .visorCitaLista li .visorCitaDescargar.dri-pdf-acc { position: static; }
/* Detalle cita → últimos documentos: el PDF lleva al lado de su fila (que lo abre) la flecha de descargar. */
.dash-docs-lista li:has(.dash-doc-bajar) { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dash-docs-lista li:has(.dash-doc-bajar) > .dash-doc { flex: 1; }
.dash-doc-bajar:hover, .dash-doc-bajar:focus { background: #f0f6fd; text-decoration: none; }

/* P905 (Enrique, 05-10-2026, captura de Ana Belén en Safari con la ventana a ~977 px): en tableta
   (768-991 px) los once módulos salían en dos filas de seis muy separadas y el logotipo de DriCloud
   flotando al lado de «Telemedicina»: la cabecera parecía descolocada. Ahora, como en los portátiles
   (P684), los once en UNA fila que ocupa el ancho y se reparte a partes iguales, y sin el logotipo de
   DriCloud (no hay sitio para los dos). Los textos largos se recortan con «…» si no caben. */
@media (min-width: 768px) and (max-width: 991px) {
    header ul.menu-principal {
        flex-wrap: nowrap;
    }
        header ul.menu-principal > li {
            flex: 1 1 0;
            width: auto;
            max-width: none;
            min-width: 0;
            padding: 0 1px;
        }
    header img.logo-header { display: none !important; }
}
@media (min-width: 768px) and (max-width: 879px) {
    header ul.menu-principal li p span { font-size: 9px; letter-spacing: -0.2px; }
}

/* P926 (06-10-2026, Enrique, capturas de la historia clínica): tres cosas sin alinear.
   1) Medicación: los grupos (Control del Dolor, Antibióticos…) empezaban 15 px más a la izquierda que el
      resto de la tarjeta: el contenedor es una .row de Bootstrap (márgenes negativos).
   2) Actuaciones en consulta: el botón «Añadir» quedaba más alto que el desplegable de al lado.
   3) Historia clínica y Tratamiento recomendado van en la misma fila: el cuadro de la Historia es más alto
      (P876) y el de Tratamiento dejaba un hueco en blanco debajo. Ahora el cuadro llena su tarjeta. */
.hc-receta #divUsuarioRecetasContenido { margin-left: 0; margin-right: 0; }
.hc-actuaciones { align-items: center; margin-bottom: 8px; }
    .hc-actuaciones .floating-label-group { margin-top: 0; margin-bottom: 0; }
    .hc-actuaciones #divAnadirActuacionesConsulta { margin: 0; }
    .hc-actuaciones #divAnadirActuacionesConsulta .btn { margin: 0; }
#div_Formulario.hc-grid > .hc-sec:not(.hc-ancho):has(> textarea.hc-txt) { display: flex; flex-direction: column; }
    #div_Formulario.hc-grid > .hc-sec:not(.hc-ancho):has(> textarea.hc-txt) > textarea.hc-txt { flex: 1 1 auto; }

/* P930 (Enrique, 06-10-2026): historial previo.
   1) Los seis iconos del pie de cada visita salían corridos a la izquierda: los .glyphicon del programa
      llevan margen a la derecha. Centrados en su cuadrado (el número de los encendidos va pegado).
   2) Lápiz apagado para quien no hizo la visita.
   3) Edición en línea de los textos de la visita. */
.vhist-ib .glyphicon { margin: 0 !important; top: 0; line-height: 1; }
.vhist-ib { padding: 0; text-align: center; gap: 3px; }
.vhist-ib-off { opacity: .4; cursor: not-allowed; background: #f4f6fa; border-color: #d7dde8; color: #8592a6; }
.vhist-ib-off:hover { background: #f4f6fa; color: #8592a6; }
.vhist-editando .vhist-sec[data-editar] { background: #f6f9fe; border-radius: 8px; }
.vhist-edit { width: 100%; margin-top: 4px; border: 1px solid #b9cbe4; border-radius: 8px; padding: 8px 10px; font-size: 14px; resize: vertical; }
.vhist-edit-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 4px; width: 100%; }

/* P931 (Enrique, 06-10-2026): cabecera de la tabla de conceptos del alta de factura. DriCloud2021.css pone
   «6px 15px !important» también a los th de las tablas con borde: los rótulos quedaban corridos 15 px a la
   derecha del campo que tienen debajo y, con las columnas estrechas, se cortaban («DESCUEN», «IMPUES 1»).
   Mismo relleno que las celdas (3 px), a la izquierda como el campo, y partiendo por palabras. */
.fx-tw > .table > thead > tr > th { padding: 6px 4px !important; text-align: left; font-size: 10px; letter-spacing: 0;
                                    overflow: visible; word-break: normal; overflow-wrap: normal; hyphens: none; }
.fx-tw > .table > thead > tr:first-child > th { padding-top: 8px !important; }

/* P937 (Dr. Jorge Aso, 06-10-2026, pantalla 1920x1080 con la escala de Windows): en el Dietario el botón
   «Clínica» (columna Acciones), el más usado, quedaba fuera a la derecha y había que desplazarse de lado.
   P861 solo dejaba desplazar la tabla dentro de su recuadro hasta 1439 px; con la escala de Windows al
   125 % una pantalla FHD mide 1536 px y la tabla se salía de la página. Ahora: en cualquier pantalla de
   escritorio la tabla se desplaza dentro de su recuadro y la columna Acciones va FIJA a la derecha, así el
   botón «Clínica» (y el desplegable de acciones) se ve siempre sin desplazar nada. */
@media screen and (min-width: 992px) {
    #dietario_content .dri-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #dietario_content .dietario-tabla > thead > tr > th.col-acciones,
    #dietario_content .dietario-tabla > tbody > tr > td.col-acciones {
        position: sticky; right: 0; z-index: 2;
        background-color: #fff; box-shadow: -6px 0 8px -6px rgba(20, 33, 61, .18);
    }
    #dietario_content .dietario-tabla > thead > tr > th.col-acciones { background-color: #f6f8fc; z-index: 3; }
    #dietario_content .dietario-tabla > tbody > tr:hover > td.col-acciones { background-color: #fafcff; }
}

/* P1064 (Dra. Alejandra Chamoun, 08-10-2026, otra vez: «siguen viéndose los números cortados» en la visita y en el
   historial previo). Los campos de oftalmología son .form-control.input-sm de Bootstrap 3: 30 px de alto con
   line-height: 30 px y 5 px de relleno arriba y abajo, así que la línea de texto (30 px) no cabía en los 20 px que
   quedaban y Chrome en Windows cortaba los números por abajo («0.9» se leía «n q»). Alto de 34 px y la línea normal,
   en la visita ([id^=divOftalmologia]) y en el historial (.vhist-oft, donde los parciales salen sin ids). */
[id^=divOftalmologia] select.form-control.input-sm,
[id^=divOftalmologia] input.form-control.input-sm,
.vhist-oft select.form-control.input-sm,
.vhist-oft input.form-control.input-sm {
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    line-height: 1.42857 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}
[id^=divOftalmologia] select.form-control.input-sm,
.vhist-oft select.form-control.input-sm {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
[id^=divOftalmologia] textarea.form-control.input-sm,
.vhist-oft textarea.form-control.input-sm {
    line-height: 1.42857 !important;
    font-size: 14px !important;
}

/* =====================================================================================
   HISTORIAL PREVIO v3 (Enrique, 11-10-2026) · diseño de historial-v3.html
   Quejas de varios clientes: "todo muy blanco, el historial previo muy largo, los colores de las
   etiquetas". Solo la pantalla de la visita (#div_Historial y la pestaña Historia clínica).
   - Cada visita con el color de su ESPECIALIDAD (--c / --cl / --bgc los pone _HistorialCitas.cshtml).
   - Compacto: etiqueta y texto en la misma línea, filtros en una barra con buscador.
   - Iconos de debajo agrupados en «Añadir» (izquierda) y «Ver» (derecha, con su número).
   ===================================================================================== */

/* ---- Etiquetas de la Historia clínica: azul claro; la elegida, un azul algo más oscuro y con ✓ ---- */
.hc-chip { color: #3a5d93; background: #eaf1fb; border-color: #d3e2f5; }
.hc-chip:hover { background: #dfeafa; border-color: #bcd3ef; color: #24518c; }
.hc-chip.on { background: #dceafa; border-color: #a9c7ec; color: #24518c; }
.hc-chip.on::after { content: " ✓"; font-size: 11px; color: #2f6bb0; }

/* ---- Cabecera y barra de filtros ---- */
.vh3-ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 10px; }
.vh3-ph h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #305088; display: flex; align-items: center; gap: 8px; }
.vh3-ph h3 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vh3-n { font-size: 12.5px; color: #8a95a6; }
.vh3-n:empty { display: none; }
.vh3-sp { flex: 1; }
.vh3-ph #divBotonesHistorialPaciente.buttonHist { display: flex; gap: 6px; flex-wrap: wrap; white-space: normal; margin: 0 !important; padding: 0; }
.vh3-ph .buttonHist .btn { font-family: inherit; font-size: 12px; font-weight: 600; color: #305088; background: #fff; border: 1px solid #c6d6ec; border-radius: 8px; padding: 7px 11px; box-shadow: none; }
.vh3-ph .buttonHist .btn:hover, .vh3-ph .buttonHist .btn:focus { background: #eef3fb; }
.vh3-fbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #e4e7ef; border-radius: 12px; background: #fbfcfe; }
.vh3-busca { display: flex; align-items: center; gap: 7px; margin: 0; border: 1px solid #e4e7ef; border-radius: 999px; padding: 0 12px; height: 32px; background: #fff; min-width: 150px; flex: 1 1 160px; max-width: 220px; }
.vh3-busca svg { width: 14px; height: 14px; stroke: #aab4c2; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.vh3-busca input { border: 0; outline: 0; flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: #1d2b43; background: none; box-shadow: none; padding: 0; height: 30px; }
.vh3-sel { display: inline-flex; align-items: center; gap: 6px; margin: 0; border: 1px solid #e4e7ef; border-radius: 999px; padding: 0 10px 0 12px; background: #fff; height: 32px; cursor: pointer; max-width: 100%; }
.vh3-sel:hover { border-color: #c6d6ec; }
.vh3-sel > span { font-size: 11.5px; color: #8a95a6; font-weight: 600; white-space: nowrap; }
.vh3-sel select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background-color: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #48587a; cursor: pointer;
                  padding: 0 14px 0 0; height: 30px; max-width: 170px; box-shadow: none;
                  background-image: linear-gradient(45deg, transparent 50%, #9aa4b2 50%), linear-gradient(135deg, #9aa4b2 50%, transparent 50%);
                  background-position: right 4px center, right 0 center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.vh3-sel select:disabled { opacity: .6; cursor: not-allowed; }
.vh3-limpia { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: #9aa4b2; cursor: pointer; padding: 0 6px; }
.vh3-limpia:hover { color: #c25b5b; }
.vh3-esps { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 2px 4px; }
.vh3-f { font-family: inherit; font-size: 12px; font-weight: 600; color: #64728a; background: #fff; border: 1px solid #e4e7ef; border-radius: 999px; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vh3-f i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vh3-f b { margin-left: 2px; }
.vh3-f.on { background: #eef3fb; border-color: #c6d6ec; color: #305088; }

/* ---- La visita: tarjeta con franja de color, cabecera blanca con raya del tono, cuerpo teñido ---- */
#div_Historial .vhist-visita { --c: #2f6bb0; --cl: #e7f0fb; --bgc: #f6fafe; margin-bottom: 12px; }
#div_Historial .vhist-card { border: 1px solid #e4e7ef; border-left: 4px solid var(--c); border-radius: 12px; box-shadow: none; }
#div_Historial .vhist-card:has(.vhist-detalle:not(:empty)) { box-shadow: 0 4px 14px rgba(20,33,61,.08); border-color: #e4e7ef; border-left-color: var(--c); }
#div_Historial .vhist-h { padding: 11px 13px 10px; gap: 12px; }
#div_Historial .vhist-h,
#div_Historial .pruebaHist .vhist-h,
#div_Historial .quirofanoHist .vhist-h { background: #fff; border-bottom: 2px solid var(--cl); }
#div_Historial .vhist-h:hover,
#div_Historial .pruebaHist .vhist-h:hover,
#div_Historial .quirofanoHist .vhist-h:hover { background: var(--bgc); }
#div_Historial .pruebaHist .vhist-card,
#div_Historial .quirofanoHist .vhist-card { border-left: 4px solid var(--c); }
#div_Historial .vhist-pill,
#div_Historial .vhist-pill-vacia,
#div_Historial .pruebaHist .vhist-pill-vacia,
#div_Historial .quirofanoHist .vhist-pill-vacia { display: flex; background: none; border: 0; padding: 0; border-radius: 0; gap: 8px; color: #1d2b43; font-size: 14.5px; }
#div_Historial .vhist-cie { background: var(--c); border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; }
#div_Historial .vhist-t { font-weight: 700; color: #1d2b43; line-height: 1.3; }
#div_Historial .vhist-meta { margin-top: 6px; font-size: 13px; color: #66728a; gap: 8px; }
#div_Historial .vhist-meta b { color: #44506a; font-weight: 600; }
#div_Historial .vhist-it + .vhist-it::before { content: "·"; color: #c6cedb; margin-right: 8px; }
#div_Historial .vhist-av { background: var(--cl); color: var(--c); width: 21px; height: 21px; font-size: 9px; }
.vhist-espc { font-size: 12px; font-weight: 700; color: var(--c); background: var(--cl); border-radius: 5px; padding: 2px 7px; }
#div_Historial .vhist-chev { border-color: transparent; background: none; color: #9aa4b2; width: 26px; height: 26px; }

/* La fecha: caja del tono de la especialidad (en la pestaña, fuera de la tarjeta, sobre la línea de tiempo) */
#div_Historial .vhist-fecha { background: var(--cl); border-color: transparent; box-shadow: none; }
#div_Historial .vhist-fecha b, #div_Historial .vhist-fecha span { color: var(--c); }
#div_Historial .vhist-fecha em { color: #8a95a6; }
#div_Historial .vhist-punto { background: var(--c); box-shadow: 0 0 0 2px var(--cl); }
#div_Historial.hist-dashboard .vhist-fecha { border-left: 0 !important; background: var(--cl); }
@media (min-width: 561px) { #div_Historial.hist-dashboard .vhist-h { min-height: 74px; } }

/* Cuerpo desplegado: fondo del tono, y la etiqueta en la misma línea que el texto */
#div_Historial .vhist-detalle { background: var(--bgc); }
#div_Historial .vhist-esp { display: none; }
#div_Historial .vhist-detalle .vhist-b { display: block; padding: 10px 14px 11px; }
#div_Historial .vhist-detalle .vhist-sec { padding: 0; border: 0; margin-bottom: 4px; }
#div_Historial .vhist-detalle .vhist-sec:last-child { margin-bottom: 0; }
#div_Historial .vhist-detalle .vhist-hueco { display: none; }
#div_Historial .vhist-detalle .vhist-izq { padding-right: 0; border-right: 0; }
#div_Historial .vhist-detalle .vhist-lbl { display: inline; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--c); margin: 0 5px 0 0; }
#div_Historial .vhist-detalle .vhist-lbl::after { content: ":"; }
#div_Historial .vhist-detalle .vhist-txt { display: inline; font-size: 14px; line-height: 1.5; color: #3f4a60; }
#div_Historial .vhist-detalle .vhist-caja { background: #fff; }

/* Iconos de debajo: «Añadir» a la izquierda, «Ver» (con su número) a la derecha del separador */
#div_Historial .vhist-f { gap: 6px; padding: 7px 11px; background: #f2f7fd; border-top: 1px solid #e3ecf8; }
/* (fuera de la visita, en la ficha del paciente, también salen: con el mismo aspecto discreto) */
.vhist-et { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #93a4bd; margin-right: 3px; }
#div_Historial .vhist-ib { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #5a7aa8; }
#div_Historial .vhist-ib:hover, #div_Historial .vhist-ib:focus { background: #e3edfa; border-color: #cfe0f5; color: #2b63a6; }
#div_Historial .vhist-ib .glyphicon { font-size: 14px; }
#div_Historial .vhist-ib-off { opacity: .4; background: transparent; border-color: transparent; }
#div_Historial .vhist-adj-sep { height: 20px; background: #d4e1f2; margin: 0 5px; }
#div_Historial .vhist-adj-no { color: #b8c3d4; border-color: transparent; background: transparent; }
#div_Historial .vhist-adj-si { color: #2b63a6; background: #dcebfb; border-color: #b6d2ef; }
#div_Historial .vhist-adj-si:hover, #div_Historial .vhist-adj-si:focus { color: #2b63a6; background: #cde2f9; }
#div_Historial .vhist-adj-n { background: #2f6bb0; top: -5px; right: -5px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding: 0 3px; box-shadow: 0 0 0 1.5px #fff; }
#div_Historial .vhist-btn { font-size: 12px; padding: 7px 11px; border-color: #c6d6ec; color: #305088; }

/* Estrecho: la flecha se queda en la línea del diagnóstico (las etiquetas, si hay, bajan a la siguiente). */
#div_Historial .vhist-dx { flex: 1 1 0; min-width: 0; }
@media (max-width: 860px) {
    #div_Historial .vhist-chev { order: 2; }
    #div_Historial .vhist-tags { order: 3; }
}
@media (max-width: 560px) {
    #div_Historial .vhist-et { display: none; }   /* sin «Añadir / Ver» caben los seis iconos en una línea */
    #div_Historial .vhist-it + .vhist-it::before { display: none; }   /* el «·» quedaba al principio de línea */
    .vh3-sel select { max-width: 120px; }
    .vh3-busca { max-width: none; flex-basis: 100%; }
}

/* =====================================================================================
   HISTORIAL PREVIO v3 · ajuste (Enrique, 11-10-2026, comparando con historial-v3.html): igual que la
   plantilla. Franja, fecha y «Diagnóstico» por tipo (azul consulta, verde prueba, naranja cirugía);
   la especialidad con su color (--ec/--ecl) y el fondo del texto con su tinte (--bgc).
   ===================================================================================== */
.vh3-ph h3 { font-size: 14px; }
.vh3-ph .buttonHist .btn { display: inline-flex; align-items: center; gap: 6px; line-height: 1; height: 30px; padding: 0 11px; }
.vh3-ph .buttonHist .btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vh3-ph .buttonHist .btn.vh3-ibtn { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; }
.vh3-ph .buttonHist .btn.vh3-ibtn svg { width: 15px; height: 15px; }
.vh3-oculto { display: none !important; }
.vh3-fbar { padding: 10px 16px; }
.vh3-busca { flex: 1 1 160px; max-width: 210px; }
.vh3-sel { flex: 0 0 auto; width: auto; }
.vh3-sel select { width: auto !important; min-width: 0; max-width: 190px; margin: 0; }
.vh3-sel.act { background: #eef3fb; border-color: #c6d6ec; }
.vh3-sel.act select { color: #305088; }
.vh3-sel.act > span { color: #5f80ad; }
.vh3-sw { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e4e7ef; border-radius: 999px; padding: 0 12px; height: 32px; background: #fff;
          cursor: pointer; font-size: 12.5px; font-weight: 600; color: #5a6679; user-select: none; white-space: nowrap; }
.vh3-sw i { width: 30px; height: 17px; border-radius: 999px; background: #d7dde8; position: relative; transition: .18s; flex: none; }
.vh3-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vh3-sw.on { background: #eef3fb; border-color: #c6d6ec; color: #305088; }
.vh3-sw.on i { background: #4a86d0; }
.vh3-sw.on i::after { left: 15px; }
.vh3-esps { padding: 12px 2px 6px; }
.vh3-f b { margin-left: 4px; }

/* La tarjeta */
#div_Historial .vhist-card { border-left: 4px solid var(--c) !important; overflow: hidden; }
#div_Historial .vhist-cie { background: var(--c) !important; color: #fff !important; }
#div_Historial .vhist-pill .vhist-t { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#div_Historial .vhist-meta b { font-weight: 400; color: inherit; }
.vhist-espc { color: var(--ec, var(--c)); background: var(--ecl, var(--cl)); }
#div_Historial .vhist-detalle { background: var(--bgc); }
#div_Historial .vhist-detalle .vhist-b { padding: 11px 14px 12px; }

/* Flecha de la derecha (como la plantilla): abierta hacia abajo, cerrada hacia la derecha */
#div_Historial .vhist-chev .glyphicon { width: 14px; height: 14px; top: 0; transition: transform .18s;
    background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
#div_Historial .vhist-chev .glyphicon::before { content: none; }
#div_Historial .vhist-chev .glyphicon-collapse-down { transform: rotate(-90deg); }

/* La fecha del Dashboard: separada de la raya de abajo, como la plantilla */
@media (min-width: 561px) {
    #div_Historial.hist-dashboard .vhist-fecha { left: 13px; top: 11px; width: 50px; padding: 5px 0 6px; border-radius: 9px; border: 0 !important; line-height: 1.05; }
    #div_Historial.hist-dashboard .vhist-fecha b { font-size: 20px; line-height: 1.05; }
    #div_Historial.hist-dashboard .vhist-fecha span { font-size: 9.5px; line-height: 1.05; letter-spacing: .6px; opacity: .85; }
    #div_Historial.hist-dashboard .vhist-fecha em { font-size: 9.5px; line-height: 1.05; margin-top: 1px; }
    #div_Historial.hist-dashboard .vhist-h { padding-left: 76px; min-height: 76px; }
}
@media (max-width: 560px) { #div_Historial.hist-dashboard .vhist-fecha { border: 0 !important; } }

/* Iconos de la plantilla (SVG): 30 px, dibujo de 15 px */
.vhist-ib svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#div_Historial .vhist-f { min-height: 44px; }
#div_Historial .vhist-ib { position: relative; }
#div_Historial .vhist-adj-n { position: absolute; display: grid; place-items: center; border-radius: 999px; color: #fff; font-weight: 800; }
#div_Historial .vhist-pill { min-width: 0; align-items: center; }
#div_Historial .vhist-cie { flex: none; }

/* =====================================================================================
   CLÍNICA / DIETARIO v3 (Enrique, 11-10-2026, clinica.html). Vale para Clínica y para el dietario
   de la agenda (consultas, pruebas y cirugías): es la misma tabla (_TablasDietario).
   ===================================================================================== */
#dietario_content .dk-resumen { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
#dietario_content .dk-kpi { background: #fff; border: 1px solid #e4e7ef; border-radius: 12px; padding: 11px 16px; display: flex; align-items: center; gap: 11px; min-width: 150px; }
#dietario_content .dk-kpi i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
#dietario_content .dk-kpi i svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#dietario_content .dk-kpi b { display: block; font-size: 19px; font-weight: 800; color: #1d2b43; line-height: 1.1; }
#dietario_content .dk-kpi span { font-size: 12px; color: #8a95a6; }
/* Recuadro «Cobrado» (13-10-2026): check gris sin citas, rojo por debajo del 100 %, verde al 100 %. */
#dietario_content .dk-kpi-cobrado i { background: #f1f3f8; }
#dietario_content .dk-kpi-cobrado i svg { stroke: #7b8699; }
#dietario_content .dk-kpi-cobrado.dk-kpi-cob-no i { background: #fdecec; }
#dietario_content .dk-kpi-cobrado.dk-kpi-cob-no i svg { stroke: #d64545; }
#dietario_content .dk-kpi-cobrado.dk-kpi-cob-ok i { background: #eaf6ee; }
#dietario_content .dk-kpi-cobrado.dk-kpi-cob-ok i svg { stroke: #2f7a58; }

/* La tarjeta del despacho */
#dietario_content .dk-panel { background: #fff; border: 1px solid #e4e7ef; border-radius: 14px; overflow: hidden; box-shadow: none; }
#dietario_content .dk-panel > .panel-heading { background: #fff; color: #1d2b43; border: 0; border-bottom: 1px solid #eef1f6; border-left: 4px solid #2f6bb0;
    padding: 13px 18px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; border-radius: 0; }
#dietario_content .dk-panel .dietario-cabecera { font-size: 15px; font-weight: 700; color: #1d2b43; flex: 1 1 auto; min-width: 0; }
#dietario_content .dk-panel .dietario-cabecera-iconos { position: static; transform: none; margin: 0; display: flex; align-items: center; gap: 8px; }
#dietario_content .dk-ibtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #c6d6ec; background: #fff; display: grid; place-items: center; cursor: pointer; }
#dietario_content .dk-ibtn svg { width: 15px; height: 15px; stroke: #305088; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#dietario_content .dk-ibtn:hover { background: #eef3fb; }
#dietario_content .dk-ibtn.on { background: #fdf5e4; border-color: #f0e0bb; }
#dietario_content .dk-ibtn.on svg { stroke: #a87c14; }
#dietario_content .dk-panel > .panel-body { padding: 0; border: 0; }

/* La tabla */
#dietario_content .dietario-tabla { border-collapse: collapse; width: 100%; }
#dietario_content .dietario-tabla thead th { font-size: 11px; font-weight: 700; color: #8a95a6; text-transform: uppercase; letter-spacing: .4px; text-align: left;
    padding: 11px 10px; background: #f8fafd; border: 0; border-bottom: 1px solid #e4e7ef; white-space: nowrap; }
#dietario_content .dietario-tabla tbody td { padding: 0 10px; height: 50px; border: 0; border-bottom: 1px solid #eef1f6; font-size: 13.5px; color: #4d5a74; white-space: nowrap; background: #fff; }
/* Enrique 13-10-2026 (Clínica Cuidarte): las filas otra vez en dos colores alternos, como antes. */
#dietario_content .dietario-tabla > tbody > tr:not(.dietario-fuera-turno):not([style*="background"]):nth-of-type(odd) > td { background: #f5f8fd; }   /* los mismos dos colores que antes del 12-10 (dri-tabla) */
#dietario_content .dietario-tabla > tbody > tr:not(.dietario-fuera-turno):not([style*="background"]):nth-of-type(even) > td { background: #fff; }
#dietario_content .dietario-tabla > tbody > tr.dk-cita:hover > td { background: #e8f0fb; }
#dietario_content .dietario-tabla tr.dk-cita:hover td { background: #f8fbff; }
#dietario_content .dietario-tabla td.dietario-hora { font-size: 13.5px; font-weight: 700; color: #1d2b43; }
#dietario_content .dietario-tabla .col-informes, #dietario_content .dietario-tabla .col-fotos, #dietario_content .dietario-tabla .col-facturas { text-align: center; }
#dietario_content .dietario-tabla .col-acciones { text-align: right; }

/* Confirmación de asistencia (el circulito de delante del nombre) */
#dietario_content .dietario-punto { width: 11px; height: 11px; }
#dietario_content .LeyendaVacia.dietario-punto { background: #d7dde8; }

/* Paciente: nombre, avisos, bocadillo de observaciones y ojo */
#dietario_content .dietario-pac-fila { display: flex; align-items: center; gap: 7px; }
#dietario_content td.dietario-paciente a.dietario-nombre { font-weight: 600; color: #1d2b43; font-size: 14px; }
#dietario_content .dk-alerta { width: 19px; height: 19px; border-radius: 50%; background: #fdecec; display: grid; place-items: center; flex: none; }
#dietario_content .dk-alerta svg { width: 12px; height: 12px; stroke: #d64545; fill: none; stroke-width: 2.2; stroke-linecap: round; }
#dietario_content .dk-nota { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; flex: none; border: 1px solid transparent; position: relative; }
#dietario_content .dk-nota svg { width: 14px; height: 14px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke: #b4becb; }
#dietario_content .dk-nota.con { background: #fdf5e4; border-color: #f0e0bb; }
#dietario_content .dk-nota.con svg { stroke: #b5880f; }
#dietario_content .dk-nota.con::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #e0a316; border: 1.5px solid #fff; }
#dietario_content .dk-nota.sin, #dietario_content .dk-mini { opacity: 0; transition: opacity .12s; }
#dietario_content tr.dk-cita:hover .dk-nota.sin, #dietario_content tr.dk-cita:hover .dk-mini,
#dietario_content .dk-nota.sin:focus, #dietario_content .dk-mini:focus { opacity: 1; }
#dietario_content .dk-nota:hover { background: #f1f4f9; border-color: #e1e7f0; }
#dietario_content .dk-mini { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; flex: none; }
#dietario_content .dk-mini svg { width: 13px; height: 13px; stroke: #8a95a6; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#dietario_content .dk-mini:hover { background: #eaf1fb; }
#dietario_content .dk-mini:hover svg { stroke: #305088; }
@media (hover: none) { #dietario_content .dk-nota.sin, #dietario_content .dk-mini { opacity: 1; } }

/* Aseguradora: sin fondo, con el puntito del cobro delante */
#dietario_content .dk-aseg { display: inline-flex; align-items: center; gap: 7px; max-width: 190px; }
#dietario_content .dk-cobro { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #aab4c2; cursor: help; }
#dietario_content .dk-cobro.ok { background: #3fae7a; }
#dietario_content .dk-cobro.no { background: #d64545; }
#dietario_content .dietario-tabla select.dietario-select-soc,
#dietario_content .dietario-tabla select.dietario-select-soc.dietario-soc-cobrada,
#dietario_content .dietario-tabla select.dietario-select-soc.dietario-soc-nocobrada {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none; padding: 0; height: 26px; width: auto; max-width: 170px;
    font-size: 13.5px; color: #4d5a74; cursor: pointer; text-overflow: ellipsis; }

/* Tipo de visita y estado: pastillas (el tipo con el color que eligió la clínica) */
#dietario_content .dietario-tabla select.dietario-select-tipo,
#dietario_content .dietario-tabla select.dietario-select-estado,
#dietario_content .dietario-tabla .dietario-etiq-tipo {
    appearance: none; -webkit-appearance: none; display: inline-block; width: auto; max-width: 190px; height: 28px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08);
    padding: 0 26px 0 11px; font-size: 12.5px; font-weight: 600; line-height: 26px; cursor: pointer; box-shadow: none; text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 13px center, right 9px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
#dietario_content .dietario-tabla .dietario-etiq-tipo { background-image: none; padding-right: 11px; cursor: default; }
#dietario_content .dietario-estado.est-1 .dietario-select-estado { background-color: #b6efb8; border-color: #8fd993; color: #14401a; }
#dietario_content .dietario-estado.est-3 .dietario-select-estado { background-color: #fdf6a8; border-color: #e8dc6a; color: #4a3f00; }
#dietario_content .dietario-estado.est-4 .dietario-select-estado { background-color: #f79a99; border-color: #e57574; color: #4a0f0e; }
#dietario_content .dietario-estado.est-5 .dietario-select-estado { background-color: #8fc0e2; border-color: #6aa6d2; color: #10293b; }
#dietario_content .dietario-estado.est-6 .dietario-select-estado { background-color: #c9c9c9; border-color: #aaaaaa; color: #2b2b2b; }
#dietario_content .dietario-tabla select option { background: #fff; color: #1f2430; font-weight: 400; }

/* Contactar */
#dietario_content .dietario-contactar { text-align: left; }
#dietario_content .dietario-contactar a { margin: 0 5px 0 0; display: inline-block; vertical-align: middle; }
#dietario_content .dk-cb { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; border: 1px solid #e4e7ef; }
#dietario_content .dk-cb svg { width: 14px; height: 14px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#dietario_content .dk-cb.sms { border-color: #cfe0f5; background: #f2f7fd; } #dietario_content .dk-cb.sms svg { stroke: #2f6bb0; }
#dietario_content .dk-cb.wa { border-color: #cbe9d4; background: #f1faf4; } #dietario_content .dk-cb.wa svg { stroke: #1f9d55; }
#dietario_content .dk-cb.em { border-color: #f3d7d7; background: #fdf4f4; } #dietario_content .dk-cb.em svg { stroke: #c25b5b; }
#dietario_content .dk-cb:hover { filter: brightness(.96); }

/* Informes, fotos y facturas: se encienden con su número */
#dietario_content .dk-doc { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; position: relative; border: 1px solid transparent; text-shadow: none; vertical-align: middle; }
#dietario_content .dk-doc svg { width: 15px; height: 15px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke: #c3cbd8; }
#dietario_content .dk-doc.on { background: #dcebfb; border-color: #b6d2ef; cursor: pointer; }
#dietario_content .dk-doc.on svg { stroke: #2b63a6; }
#dietario_content .dk-doc.on.conColor svg { stroke: var(--dc); }
#dietario_content .dk-doc .n { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 999px; background: #2f6bb0; border: 1.5px solid #fff;
    color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; padding: 0 3px; line-height: 1; }

/* El botón de entrar en la consulta, según el estado */
#dietario_content .dk-ir { display: inline-flex; align-items: center; gap: 9px; border-radius: 10px; padding: 9px 15px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: .16s; }
#dietario_content .dk-ir svg { width: 15px; height: 15px; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#dietario_content .dk-ir .fl { transition: .16s; }
#dietario_content .dk-ir:hover .fl { transform: translateX(3px); }
#dietario_content .dk-ir-abrir { background: linear-gradient(180deg, #4a86d0, #2f6bb0); color: #fff; box-shadow: 0 2px 6px rgba(47,107,176,.35); }
#dietario_content .dk-ir-abrir svg { stroke: #fff; }
#dietario_content .dk-ir-abrir:hover { background: linear-gradient(180deg, #5b93d8, #3775bb); box-shadow: 0 4px 12px rgba(47,107,176,.42); }
#dietario_content .dk-ir-seguir { background: linear-gradient(180deg, #f0a93c, #dd8f1c); color: #fff; box-shadow: 0 2px 6px rgba(200,130,20,.33); }
#dietario_content .dk-ir-seguir svg { stroke: #fff; }
#dietario_content .dk-ir-seguir .lat { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: dkLat 1.4s ease-in-out infinite; }
@keyframes dkLat { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
#dietario_content .dk-ir-ver { background: #fff; border-color: #c6d6ec; color: #305088; }
#dietario_content .dk-ir-ver svg { stroke: #305088; }
#dietario_content .dk-ir-ver:hover { background: #eef3fb; }
#dietario_content .dietario-acciones { height: 30px; border-radius: 8px; border: 1px solid #c6d6ec; color: #305088; font-weight: 600; background-color: #fff; width: auto; min-width: 130px; }

/* Huecos libres */
#dietario_content .dietario-tabla tr.dietario-libre td { height: 34px; color: #a9b2c1; font-size: 12.5px; background: #fcfdfe; }
#dietario_content .dietario-tabla tr.dietario-libre td.dietario-hora { color: #a9b2c1; font-weight: 600; }
#dietario_content .dietario-tabla tr.dietario-libre:hover td { background: #f4f9ff; }
#dietario_content .dk-libre { color: #a9b2c1; font-size: 12.5px; }
#dietario_content .dk-add { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #305088; background: transparent;
    border: 1px dashed #c6d6ec; border-radius: 8px; padding: 4px 11px; cursor: pointer; opacity: 0; transition: opacity .12s; }
#dietario_content tr.dietario-libre:hover .dk-add, #dietario_content .dk-add:focus { opacity: 1; }
#dietario_content .dk-add:hover { background: #eef3fb; }
#dietario_content .dk-add svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: none) { #dietario_content .dk-add { opacity: 1; } }
/* «Exportar a Excel» de la cabecera del despacho (DriTabla lo mueve allí), como el de la plantilla */
#dietario_content .dietario-cabecera-iconos .dt-buttons { margin: 0; }
#dietario_content .dietario-cabecera-iconos div.dt-buttons > .dt-button,
#dietario_content .dietario-cabecera-iconos div.dt-buttons > .dt-button:hover {
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: #305088; background: #fff no-repeat 11px center / 13px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23305088' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
    border: 1px solid #c6d6ec; border-radius: 8px; padding: 9px 11px 9px 30px; }
#dietario_content .dietario-cabecera-iconos div.dt-buttons > .dt-button:hover { background-color: #eef3fb; }
/* Sin rayado de filas alternas (la plantilla va en blanco) */
#dietario_content table.dietario-tabla > tbody > tr > td,
/* Enrique 13-10-2026: filas en dos colores (los de antes del 12-10). Estas reglas mandan sobre las de arriba. */
#dietario_content table.dietario-tabla > tbody > tr:nth-of-type(odd) > td { background-color: #f5f8fd !important; box-shadow: none; }
#dietario_content table.dietario-tabla > tbody > tr:nth-of-type(even) > td { background-color: #fff !important; box-shadow: none; }
#dietario_content table.dietario-tabla > tbody > tr.dietario-fuera-turno > td { background-color: #fffaf0 !important; }
#dietario_content table.dietario-tabla > tbody > tr.dk-cita:hover > td { background-color: #f8fbff !important; }

#dietario_content table.dietario-tabla > tbody > tr.dietario-libre:hover > td { background-color: #f4f9ff !important; }
/* Búsqueda con Enter: la fila encontrada se resalta por encima del rayado de filas alternas */
#dietario_content table.dietario-tabla > tbody > tr.item_found > td { background-color: #eef7ff !important; }
#dietario_content .dk-cb.em { margin-right: 0; }
#dietario_content .dk-panel > .panel-heading > h2.dietario-cabecera { color: #1d2b43 !important; font-size: 15px; font-weight: 700; margin: 0; }
#dietario_content .dietario-tabla thead th, #dietario_content .dietario-tabla tbody td { padding-left: 8px; padding-right: 8px; }
/* Enrique, 11-10-2026 (en la pantalla real): las pastillas salían con esquinas de 5 px (regla «select» con
   !important de DriCloud2021.css) y el botón de la derecha bajito (el .botonClinicaDietario de antes, con
   !important). Aquí manda la plantilla. */
#dietario_content .dietario-tabla select.dietario-select-tipo,
#dietario_content .dietario-tabla select.dietario-select-estado,
#dietario_content .dietario-tabla .dietario-etiq-tipo { border-radius: 999px !important; }
#dietario_content .dk-ir.botonClinicaDietario { padding: 9px 15px !important; font-size: 13px !important; line-height: 1 !important; height: auto !important; min-height: 0 !important; }
/* Enrique, 11-10-2026: en un portátil la tabla tiene que caber sin desplazarse de lado. Por debajo de
   1700 px todo más prieto (sin quitar columnas) y lo largo se corta con «…» (entero al pasar el ratón). */
@media (max-width: 1700px) {
    #dietario_content .dietario-tabla thead th, #dietario_content .dietario-tabla tbody td { padding-left: 5px; padding-right: 5px; }
    #dietario_content .dietario-tabla thead th { font-size: 10.5px; letter-spacing: .2px; }
    #dietario_content .dietario-tabla tbody td { font-size: 13px; }
    #dietario_content .dietario-tabla td.dietario-paciente .dietario-pac-fila { max-width: 210px; }
    #dietario_content .dk-aseg { max-width: 130px; }
    #dietario_content .dietario-tabla select.dietario-select-soc { max-width: 115px !important; font-size: 13px; }
    #dietario_content .dietario-tabla select.dietario-select-tipo,
    #dietario_content .dietario-tabla .dietario-etiq-tipo { max-width: 130px; }
    #dietario_content .dietario-tabla select.dietario-select-estado { max-width: 150px; }
    #dietario_content .dk-cb { width: 25px; height: 25px; }
    #dietario_content .dietario-contactar a { margin-right: 3px; }
    #dietario_content .dk-doc { width: 27px; height: 27px; }
    #dietario_content .dk-ir.botonClinicaDietario { padding: 8px 12px !important; gap: 7px; }
    #dietario_content .dietario-tabla td.col-acciones select.dietario-acciones { width: 108px !important; min-width: 0; }
}
@media (max-width: 1440px) {
    #dietario_content .dietario-tabla td.dietario-paciente .dietario-pac-fila { max-width: 170px; }
    #dietario_content .dk-aseg { max-width: 110px; }
    #dietario_content .dietario-tabla select.dietario-select-soc { max-width: 95px !important; }
    #dietario_content .dietario-tabla select.dietario-select-tipo,
    #dietario_content .dietario-tabla .dietario-etiq-tipo { max-width: 110px; }
    #dietario_content .dietario-tabla select.dietario-select-estado { max-width: 125px; }
    #dietario_content .dietario-tabla td.dietario-telefono { font-size: 12px; }
    #dietario_content .dk-cb { width: 23px; height: 23px; }
    #dietario_content .dk-cb svg { width: 12px; height: 12px; }
    #dietario_content .dk-doc { width: 25px; height: 25px; }
    #dietario_content .dk-doc svg { width: 13px; height: 13px; }
    #dietario_content .dk-ir.botonClinicaDietario { padding: 7px 10px !important; font-size: 12.5px !important; }
    #dietario_content .dk-ir .fl { display: none; }
}
/* Enrique, 11-10-2026 (foto del portátil): Aseguradora, Tipo y Estado eran muy anchas. Quedaban los anchos
   mínimos de columna y los anchos fijos de los desplegables de antes (P609); ahora cada pastilla mide lo
   que su texto, como en la plantilla. */
#dietario_content .dietario-tabla > thead > tr > th.col-aseguradora,
#dietario_content .dietario-tabla > thead > tr > th.col-tipo,
#dietario_content .dietario-tabla > thead > tr > th.col-estado { min-width: 0 !important; }
#dietario_content .dietario-tabla select.dietario-select-tipo,
#dietario_content .dietario-tabla select.dietario-select-estado,
#dietario_content .dietario-tabla select.dietario-select-soc { width: auto !important; min-width: 0 !important; }
/* Enrique, 11-10-2026: en un portátil la barra de arriba de la agenda (clínicas, consulta/quirófano, vista,
   nueva cita, fecha, buscar, hoy…) tiene que caber en UNA línea. El título («Dietario», «Agenda»…) ocupaba
   una columna fija de 2/12 aunque mide poco: ahora mide lo que su texto y la barra se lleva el resto; y por
   debajo de 1700 px los desplegables, el buscador y los botones son algo más estrechos. Solo escritorio. */
@media (min-width: 992px) {
    #topBar:has(.divMenuSupAgenda) { display: flex; align-items: center; flex-wrap: nowrap; }
    #topBar:has(.divMenuSupAgenda) > [class*="col-"]:first-child { width: auto; flex: 0 0 auto; padding-right: 10px; }
    #topBar:has(.divMenuSupAgenda) > [class*="col-"]:last-child { width: auto; flex: 1 1 0; min-width: 0; }
    #topBar .dietario-barra, #topBar .dietario-barra-izq, #topBar .dietario-barra-der { flex-wrap: nowrap; }
}
@media (min-width: 992px) and (max-width: 1700px) {
    #topBar .divMenuSupAgenda select { max-width: 150px !important; min-width: 0 !important; }
    #topBar .divMenuSupAgenda input[type="text"]:not([readonly]) { max-width: 110px !important; }
    #topBar .divMenuSupAgenda input#txt-fecha, #topBar .divMenuSupAgenda input[readonly] { max-width: 105px !important; }
    #topBar .divMenuSupAgenda .btn { padding-left: 10px !important; padding-right: 10px !important; }
    #topBar .dietario-barra { gap: 6px; }
    #topBar .dietario-barra-izq, #topBar .dietario-barra-der { gap: 5px; }
}
@media (min-width: 992px) and (max-width: 1400px) {
    #topBar .divMenuSupAgenda select { max-width: 125px !important; }
    #topBar .divMenuSupAgenda input[type="text"]:not([readonly]) { max-width: 90px !important; }
    #topBar .divMenuSupAgenda .btn { padding-left: 8px !important; padding-right: 8px !important; }
}
/* Enrique, 11-10-2026 (2.ª foto del portátil): todavía se salía un poco. «Acciones» a la izquierda y algo
   más prieto por debajo de 1700 px. */
#dietario_content .dietario-tabla .col-acciones,
#dietario_content .dietario-tabla > thead > tr > th.col-acciones { text-align: left; }
@media (max-width: 1700px) {
    #dietario_content .dietario-tabla thead th, #dietario_content .dietario-tabla tbody td { padding-left: 4px; padding-right: 4px; }
    #dietario_content .dietario-tabla thead th { letter-spacing: 0; }
    #dietario_content .dietario-tabla td.dietario-paciente .dietario-pac-fila { max-width: 190px; }
    #dietario_content .dk-aseg { max-width: 120px; }
    #dietario_content .dietario-tabla select.dietario-select-soc { max-width: 105px !important; }
    #dietario_content .dietario-tabla td.dietario-telefono { font-size: 12.5px; }
    #dietario_content .dk-cb { width: 23px; height: 23px; }
    #dietario_content .dk-cb svg { width: 12px; height: 12px; }
    #dietario_content .dk-doc { width: 25px; height: 25px; }
    #dietario_content .dietario-tabla td.col-acciones select.dietario-acciones { width: 100px !important; }
}
/* Menú «Imprimir» del dietario: a la izquierda y con icono de hoja vertical / horizontal (Enrique, 11-10-2026). */
#topBar .dropdown-menu a.dk-imprimir { display: flex; align-items: center; gap: 9px; text-align: left; padding: 7px 16px; }
#topBar .dropdown-menu a.dk-imprimir svg { flex: none; color: #305088; }
/* Enrique, 11-10-2026 (Clínica en el portátil): el botón de la consulta, del tamaño de las pastillas de tipo y
   estado (no cabía y era demasiado grande), y la columna Contactar con sitio para los tres iconos. */
#dietario_content .dk-ir.botonClinicaDietario,
#dietario_content .dk-ir.botonClinicaDietario.dk-ir-abrir,
#dietario_content .dk-ir.botonClinicaDietario.dk-ir-seguir,
#dietario_content .dk-ir.botonClinicaDietario.dk-ir-ver {
    height: 28px !important; padding: 0 12px !important; border-radius: 999px; font-size: 12.5px !important; font-weight: 600;
    line-height: 26px !important; gap: 6px; box-shadow: none; max-width: 100%; }
#dietario_content .dk-ir.botonClinicaDietario svg { width: 12px; height: 12px; }
#dietario_content .dk-ir.botonClinicaDietario .fl { display: none; }
#dietario_content .dk-ir.botonClinicaDietario .lat { width: 6px; height: 6px; }
#dietario_content .dk-ir-abrir:hover, #dietario_content .dk-ir-seguir:hover { box-shadow: none; filter: brightness(1.05); }
#dietario_content .dk-cb { width: 24px !important; height: 24px !important; }
#dietario_content .dk-cb svg { width: 12px !important; height: 12px !important; }
#dietario_content .dietario-contactar a { margin-right: 3px !important; }
/* Enrique, 13-10-2026 (portátil, ~1000-1100 px de tabla con el panel izquierdo abierto y las 8 columnas):
   el nombre salía «Álvarez, ...», el teléfono «+1 407-398-...», el tercer icono de Contactar quedaba debajo
   de Acciones y el desplegable de Acciones era enorme. La tabla de anchos fijos (11-10) cortaba con «…» todo
   lo que no cabía en su porcentaje. Ahora, en escritorio:
     · cada columna que no es el nombre mide LO QUE NECESITA (width 1 % y sin partir línea): la hora, la C,
       el teléfono ENTERO, los tres iconos de Contactar, los adjuntos; nada se corta ni se monta;
     · Aseguradora, Tipo y Estado tienen su tope en píxeles de antes (más bajo en portátil) y lo que pase
       se corta con «…» (entero al pasar el ratón);
     · Acciones, 130 px; el botón de Clínica, lo que mida;
     · el NOMBRE se lleva todo el sitio que sobra, puede partirse en dos líneas (nunca «…») y no baja de 170 px;
     · si con todo eso no cabe, la tabla se desplaza de lado DENTRO de su recuadro (no se corta nada);
     · las cabeceras tienen un ancho mínimo, así un día sin citas se ve igual que uno con citas (P737). */
@media (min-width: 992px) {
    #dietario_content .dri-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #dietario_content table.dietario-tabla { table-layout: auto; width: 100% !important; min-width: 0; }
    #dietario_content table.dietario-tabla > thead > tr > th,
    #dietario_content table.dietario-tabla > tbody > tr > td { width: 1%; white-space: nowrap; overflow: visible; text-overflow: clip; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-paciente,
    #dietario_content table.dietario-tabla > tbody > tr > td.col-paciente { width: auto; }
    /* P1163: sin columna Paciente, el sitio libre se lo lleva el Tipo de visita. */
    #dietario_content table.dietario-tabla:not(:has(> thead th.col-paciente)) > * > tr > .col-tipo { width: auto; }

    /* El nombre: en dos líneas si hace falta, nunca cortado. */
    #dietario_content table.dietario-tabla > tbody > tr > td.col-paciente { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
    #dietario_content .dietario-tabla td.dietario-paciente .dietario-pac-fila { max-width: none !important; min-width: 170px !important; }
    #dietario_content .dietario-tabla td.dietario-paciente a.dietario-nombre {
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.3; }

    /* Teléfono y Contactar: enteros, en una línea. */
    #dietario_content .dietario-tabla td.dietario-telefono,
    #dietario_content .dietario-tabla td.dietario-contactar { white-space: nowrap; overflow: visible; }

    /* Desplegables y botón: ancho en píxeles (un % dentro de una columna automática la deja en nada). */
    #dietario_content .dietario-tabla td.col-acciones select.dietario-acciones { width: 130px !important; max-width: none !important; min-width: 0 !important; }
    #dietario_content .dk-ir.botonClinicaDietario { max-width: none; overflow: visible; }

    /* Un día sin citas, las columnas en el mismo sitio que un día con citas. */
    #dietario_content table.dietario-tabla > thead > tr > th.col-aseguradora { min-width: 100px !important; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-tipo { min-width: 110px !important; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-estado { min-width: 120px !important; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-telefono { min-width: 105px !important; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-acciones { min-width: 140px !important; }
}
/* Enrique 13-10-2026: en pantallas anchas el nombre se llevaba todo el sitio y lo de la derecha quedaba muy lejos.
   Desde 1500 px el sitio sobrante se reparte entre todas las columnas y el nombre ocupa como mucho un 28 %. */
@media (min-width: 1500px) {
    #dietario_content table.dietario-tabla > thead > tr > th,
    #dietario_content table.dietario-tabla > tbody > tr > td { width: auto; }
    #dietario_content table.dietario-tabla > thead > tr > th.col-paciente,
    #dietario_content table.dietario-tabla > tbody > tr > td.col-paciente { width: 28%; }
}