/*
 * bitacora - styles.css
 * Reglas de diseño. Todos los colores y fuentes provienen de las
 * variables definidas en default_theme.css (o el tema que corresponda).
 * Este fichero no declara ningún color ni fuente por su cuenta.
 */

/* -----------------------------------------------------------
   Reset básico y tipografía general
   ----------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fuente-texto);
    color: var(--color-texto);
    background: var(--color-fondo-alterno);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
    margin: 0 0 8px;
}
.cabecera-calendario-filtrado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.titulo-calendario-filtrado {
    color: var(--color-secundario);
    margin: 0;
}
.botonera-cabecera-calendario-filtrado {
    display: flex;
    gap: 8px;
}
.label-titulo-subtarjeta-documento-nuevo {
    display: block;
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
    font-size: 1.5rem;
    margin: 0 0 12px;
    font-weight:600;
}
h4 {
    font-family: var(--fuente-realce);
    color: var(--color-secundario);
    margin: 0 0 12px;
}
a {
    color: var(--color-primario);
    text-decoration: none;
}
a {
    color: var(--color-secundario);
    text-decoration: none;
}


p {
    line-height: 1.5;
    margin: 0 0 12px;
}

/* -----------------------------------------------------------
   Cabecera
   ----------------------------------------------------------- */
.cabecera {
    display: flex;
    width: 100%;
    gap:0;
    min-height: 160px;
    background: var(--color-fondo-alterno);
    border-bottom: 1px solid var(--color-bordes);
}

/* ===== Zona izquierda (30%) ===== */
/* En vez de margin-left:50px en el hijo, separas con gap o padding en el padre */
.cabecera__zona-izquierda {
    flex: 0 0 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-left: 48px;   /* sustituye al margin-left:50px, pero sin desbordar */
    min-width: 0;      /* añadir */
}

.cabecera__caja-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;   /* la imagen no se deforma, pero si hace falta cede espacio al hermano */
    /* sin margin-left */
}
.cabecera__caja-imagen a,
.cabecera__bloque-secundario a {
    display: inline-flex;
    line-height: 0;
}
/* El área de texto+botones: la dejamos estirarse normal, sin margin-left:auto,
   y cambiamos el padding-right fijo por algo relativo o por gap del padre */
.cabecera__area-superior-30 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* antes: center */
    justify-content: center;
    padding: 0 128px;          /* antes: 0 16px — margen de "respiro" al borde derecho */
    min-width: 0;
}
.cabecera__grupo-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;     /* centra texto y botones ENTRE SÍ, dentro del grupo */
    gap: 8px;
}
/* El menú: separamos con justify-content/padding del contenedor, no con margin-right fijo */
.cabecera__area-menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;   /* en vez de margin-right:36px */
    min-width: 0;
}

.cabecera__imagen-principal {
    width: 170px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* div 2: imagen + texto, alineados verticalmente uno encima del otro */
.cabecera__bloque-secundario {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    min-width: 0;   /* permite que el texto se encoja/rompa línea en vez de empujar */
    flex-shrink: 1;
}

.cabecera__imagen-secundaria {
    object-fit: cover;
}

.cabecera__texto-secundario {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-size: 0.85rem;
    color: var(--color-primario);
    letter-spacing:0.2rem;
    padding-top:20px;
}
.cabecera__columna-principal,
.cabecera__zona-derecha,
.cabecera__area-inferior-70 {
    min-width: 0;
}
/* ===================================================
   Zona derecha (70%): dos columnas, 50% / 50%
   =================================================== */
.cabecera__zona-derecha {
    flex: 0 0 70%;
    display: flex;
}

/* --- Columna principal (50% de la zona derecha) --- */
.cabecera__columna-principal {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap:0;
    margin:0;
    padding:0 0 0 92px;
}
.header-upper-title{
    font-size: 3rem;
    font-weight:600 !important;
}

.header-upper-title-blue{
    color: var(--color-primario);
    margin:0;
    padding:0;
}
.header-upper-title-green{
    color: var(--color-secundario);
    margin:0;
    padding:0;
}
/* área superior: libre, sin contenido especificado */
.cabecera__area-superior-70 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 0.8rem;
}
.header-text-for-icon{
    color: var(--color-primario);
    margin-left:12px;
    margin-right:12px;
    font-size: 1.2rem;
    font-family: var(--fuente-realce);
    font-weight:600;
    letter-spacing:0.03rem;
}
.header-icon{
    color: var(--color-secundario);
    margin-left:8px;
    margin-right:8px;
    font-size: 1rem;
}
/* área inferior: libre, pero sus elementos van alineados en línea */
.cabecera__area-inferior-70 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:0;
}

.cabecera__area-inferior-70 a:hover {
    text-decoration: underline;
}

/* --- Columna lateral (50% de la zona derecha) --- */
.cabecera__columna-lateral {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
}


.cabecera__contacto {
    margin: 0;
    font-family: var(--fuente-realce);
    font-size: 0.8rem;
    font-weight: 600;
    color:var(--color-primario);;
    padding:0;
    gap:0px;

}

.cabecera__botones {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:0;
    margin: 0;
    padding:0;
}
.cabecera__botones_contacto{
    background-color: var(--color-secundario);
    margin-left:4px;
    margin-right:4px;
    font-size: 1rem;
    border-radius:6px;
    color:var(--color-fondo-alterno);
    width:26px;
    height:26px;
    padding-top:5px;
    padding-left:0;
}
.cabecera__botones_contacto a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.cabecera__botones_contacto:hover{
    background-color: var(--color-secundario-hover);
}
.cabecera__botones_contacto svg {
    width: 16px;
    height: 16px;
}



.cabecera-marca a {
    font-family: var(--fuente-titulos);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-primario);
}

.cabecera-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    justify-content: center;
}
/* Separador exactamente en el límite entre enlaces */
.cabecera-menu-separador::after {
    content: "|";
    color: var(--color-bordes);
}


.cabecera-menu a:hover{
    margin-top:-2px;
    /*padding-bottom:6xp;*/
    border-bottom:2px solid var(--color-secundario);
}
.cabecera-menu a:active{
    margin-top:-2px;
    /*padding-bottom:6xp;*/
    border-bottom:2px solid var(--color-primario);
}
.cabecera_menu_activo{
    margin-top:-2px;
    border-bottom:2px solid var(--color-primario);
}
.cabecera-menu .menu-superadmin {
    color: var(--color-detalle-premium);
    font-weight: 600;
}
.cabecera-menu .menu-superadmin:hover {
    margin-top:-2px !important;
    border-bottom:2px solid var(--color-detalle-premium) !important;
}
.cabecera_menu_activo_superadmin {
    margin-top:-2px !important;
    border-bottom:2px solid var(--color-detalle-premium) !important;
}
.cabecera-menu .menu-salir {
    color: var(--color-error);
    font-weight: 600;
}

.form-menu-salir {
    margin: 0;
    display: inline-block;
}

.form-menu-salir button.menu-salir {
    background: none;
    border: none;
    cursor: pointer;
    /*font-family: var(--fuente-realce);
    font-size: 0.92rem;*/
    color: var(--color-error);
    padding: 0;
}

.form-menu-salir button.menu-salir:hover {
    background: none !important;
    border: none !important;
    /*margin-top:-2px !important;*/
    border-bottom:2px solid var(--color-error) !important;
    border-radius:0px !important;
    margin-bottom:-2px;
}
.form-menu-salir button.menu-salir:hover span{
    display: inline-block;
    transform: translateY(-1px);
}


.barra-idioma {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    text-align: right;
    padding: 6px 10px 0 0;
    font-size: 0.6rem;
}
.barra-idioma a {
    color: var(--color-detalle-premium);
    margin-left: 4px;
    text-decoration: none;
}
.barra-idioma a:hover,
.barra-idioma a.idioma-activo {
    color: var(--color-primario);
}
.barra-idioma a.idioma-activo {
    font-weight: 600;
}
/* -----------------------------------------------------------
   Contenido general
   ----------------------------------------------------------- */
.contenido {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 24px;
    flex: 1 0 auto;
    box-sizing: border-box;
}

.contenido.ancho-panel-datos {
    width: 85vw;
}
body.landing-sin-cabecera-pie .contenido {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}
.secciones-landing-publica-flexible {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.secciones-landing-publica-flexible > *:last-child {
    margin-top: auto;
    margin-bottom: 0;
}
/* -----------------------------------------------------------
   Tarjetas genéricas (login, formularios, bloques del panel)
   ----------------------------------------------------------- */
.tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom:1rem;
}
.tarjeta-botonera-calendario {
    padding: 8px 12px;
}
.tarjeta-formulario {
    max-width: 544px;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-formulario-intermedia {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-bienvenida-vacio {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-impaciente-nuevo {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-prescriptor-nuevo {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-catalogo-configuracion {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.tarjeta-configuracion-horario {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.tabla-catalogo-configuracion {
    table-layout: fixed;
}
.tabla-catalogo-configuracion th:nth-child(1),
.tabla-catalogo-configuracion td:nth-child(1) {
    width: 40%;
}
.tabla-catalogo-configuracion th:nth-child(2),
.tabla-catalogo-configuracion td:nth-child(2) {
    width: 15%;
}
.tabla-catalogo-configuracion th:nth-child(3),
.tabla-catalogo-configuracion td:nth-child(3) {
    width: 45%;
}
.fila-dia-horario-trabajo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bordes);
}
.fila-horario-trabajo-contenido {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fila-dia-horario-trabajo:last-child {
    border-bottom: none;
}
.titulo-dia-horario-trabajo {
    width: 110px;
    flex-shrink: 0;
    margin: 0;
}
.texto-dia-cerrado-horario-trabajo {
    margin: 0;
    flex: 1;
}
.lista-franjas-horario-trabajo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}
.lista-franjas-horario-trabajo li {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    padding: 4px 8px;
    font-variant-numeric: tabular-nums;
}
.modal-easter-egg-franjas .modal-cabecera h2 {
    color: var(--color-secundario);
    font-size: 1.5rem;
}
.modal-easter-egg-franjas #boton-aceptar-limite-franjas:hover {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.contenido-easter-egg-franjas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 0 20px;
}
.icono-easter-egg-franjas {
    font-size: 3.2rem;
    flex-shrink: 0;
    line-height: 1;
}
.contenido-easter-egg-franjas p {
    margin: 0;
    text-align: center;
    max-width: 260px;
}
.botonera-easter-egg-franjas {
    display: flex;
    justify-content: center;
}
.formulario-nueva-franja-horario-trabajo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.barra-horario-trabajo-dia {
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--color-bordes);
    border: 1px solid var(--color-bordes);
    border-radius: 3px;
    overflow: hidden;
    box-sizing: border-box;
}
.contenedor-scroll-franjas {
    position: relative;
    height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}
.lienzo-franjas {
    position: relative;
    height: 1440px;
}
.franja-hora-fondo {
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    border-top: 1px solid var(--color-bordes);
    box-sizing: border-box;
}
.franja-hora-trabajo {
    background: var(--color-horario-trabajo-fondo);
}
.franja-hora-fuera {
    background: var(--color-fuera-horario-fondo);
}
.etiqueta-hora-franja {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    pointer-events: none;
}
.bloque-franja {
    position: absolute;
    left: 48px;
    right: 8px;
    border-left: 4px solid;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: var(--color-texto);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    z-index: 1;
}
.bloque-franja-sesion {
    background: var(--color-fondo-destacado);
    border-left-color: var(--color-secundario);
}
.bloque-franja-bloqueo {
    background: var(--color-error-suave);
    border-left-color: var(--color-error);
}
.contenido-bloque-franja {
    white-space: nowrap;
    min-width: 0;
}
.badge-hora-bloque-franja {
    font-family: var(--fuente-realce);
    font-weight: 600;
    margin-right: 4px;
}
.boton-ver-bloque-franja {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--color-primario);
    background: var(--color-blanco);
    border: 1px solid var(--color-primario);
    border-radius: 12px;
    padding: 1px 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.boton-ver-bloque-franja:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
}
.grupo-acciones-bloque-sesion {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.grupo-acciones form {
    margin: 0;
}
.boton-mover-sesion {
    background: var(--color-aviso-inseguro) !important;
    border-color: var(--color-aviso-texto) !important;
    color: var(--color-aviso-texto) !important;
    cursor: grab;
}
.boton-mover-sesion:hover {
    background: var(--color-blanco) !important;
    color: var(--color-error) !important;
}
.bloque-franja.arrastrando-franja {
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 5;
    cursor: grabbing;
}
.aviso-confirmacion-arrastre {
    position: absolute;
    left: 48px;
    right: 8px;
    background: var(--color-blanco);
    border: 1px solid var(--color-aviso);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tarjeta-catalogo-servicios {
    margin-left: auto;
    margin-right: auto;
}
.logo-ficha-facturante {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
}
.imagen-logo-ficha-facturante {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.logo-ficha-facturante-vacio {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    text-align: center;
}
.fila-badges-ficha-facturante {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}
.campo-logo-facturante {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.previsualizacion-logo-facturante {
    position: relative;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-bordes);
    border-radius: 8px;
    overflow: visible;
}

.imagen-logo-previsualizacion-facturante {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.boton-quitar-logo-facturante {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 0;
}

.boton-quitar-logo-facturante:hover {
    filter: brightness(0.9);
}
/* Widget logo en ficha de edición de facturante */
.widget-logo-editar-facturante {
    margin-bottom: 16px;
}
.widget-logo-editar-facturante .fila-widget-logo-facturante {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.widget-logo-editar-facturante .grupo-logo-actual-facturante {
    display: flex;
    align-items: center;
    gap: 8px;
}
.icono-subir-archivo-facturante {
    display: inline-block;
    font-size: 0.9rem;
}

.icono-imagen-vacia-pago-servicio {
    font-size: 1.6rem;
    opacity: 0.4;
}

.tarjeta-seccion-pago-servicio {
    margin-top: 16px;
    padding: 16px;
}
.tarjeta-seccion-pago-servicio h3 {
    margin: 0;
    font-size: 0.95rem;
}
.cabecera-tarjeta-pago-servicio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.fila-columnas-pago-servicio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.columna-imagen-30-pago-servicio {
    flex: 0 0 30%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.columna-imagen-30-pago-servicio .etiqueta-campo-archivo-facturante {
    flex-basis: 100%;
    text-align: center;
    display: block;
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-bottom: 0;
}
.columna-imagen-30-pago-servicio .icono-subir-archivo-facturante {
    padding-right: 4px;
}
.widget-imagen-pago-servicio-arrastrando {
    outline: 2px dashed var(--color-secundario);
    outline-offset: 2px;
    background: var(--color-fondo-destacado);
    border-radius: 8px;
}
.textarea-script-pago-servicio {
    font-size: 0.85rem;
}
.boton-subir-centrado-pago-servicio {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.columna-contenido-70-pago-servicio {
    flex: 1;
    min-width: 0;
}

.previsualizacion-imagen-pago-servicio {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border: 1px dashed var(--color-bordes);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.imagen-previsualizacion-pago-servicio {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.boton-quitar-imagen-pago-servicio {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 0;
}
.boton-quitar-imagen-pago-servicio:hover {
    filter: brightness(0.9);
}

.tabla-catalogo-servicios {
    table-layout: fixed;
}

.tabla-catalogo-servicios th:nth-child(1),
.tabla-catalogo-servicios td:nth-child(1) {
    width: 30%;

}
.tabla-catalogo-servicios th:nth-child(2),
.tabla-catalogo-servicios td:nth-child(2) {
    width: 7%;
}
.tabla-catalogo-servicios td:nth-child(2) {
    text-align: right;
}
.tabla-catalogo-servicios th:nth-child(3),
.tabla-catalogo-servicios td:nth-child(3) {
    width: 7%;
}
.tabla-catalogo-servicios td:nth-child(3) {
    text-align: center;
}
.tabla-catalogo-servicios th:nth-child(4),
.tabla-catalogo-servicios td:nth-child(4) {
    width: 8%;
    text-align: right;
}
.tabla-catalogo-servicios th:nth-child(5),
.tabla-catalogo-servicios td:nth-child(5) {
    width: 6%;
    text-align: center;
}
.tabla-catalogo-servicios th:nth-child(6),
.tabla-catalogo-servicios td:nth-child(6) {
    width: 6%;
}
.tabla-catalogo-servicios th:nth-child(7),
.tabla-catalogo-servicios td:nth-child(7) {
    width: 4%;
}
.tabla-catalogo-servicios td:nth-child(7) {
    text-align: right;
    padding-right:8px;
}
.tabla-catalogo-servicios th:nth-child(8),
.tabla-catalogo-servicios td:nth-child(8) {
    width: 32%;
}
.tabla-catalogo-servicios th{
    text-align: center !important;
    border-left:1px solid var(--color-bordes)
}
.tabla-catalogo-servicios th:nth-child(1){
    border-left:0px;
}
.form-nueva-servicio {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.form-nueva-servicio > div {
    display: flex;
    flex-direction: column;
}
.form-nueva-servicio input[type="text"],
.form-nueva-servicio input[type="number"],
.form-nueva-servicio select {
    margin-bottom: 0;
}
.form-nueva-servicio .campo-nombre-servicio {
    flex: 1 1 auto;
}
.form-nueva-servicio .campo-numerico-servicio {
    flex: 0 0 130px;
}
.form-nueva-servicio button {
    margin-left: auto;
}
/* -----------------------------------------------------------
   Pantalla de login / arranque
   ----------------------------------------------------------- */
.pantalla-login {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.tarjeta-login {
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
}

.titulo-login {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.texto-intro {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
}

.texto-ayuda {
    color: var(--color-texto-secundario);
    font-size: 0.78rem;
    margin-top: -8px;
    margin-bottom: 16px;
}

/* -----------------------------------------------------------
   Mensajes de aviso / error
   ----------------------------------------------------------- */
.aviso-inseguro {
    background: var(--color-aviso-inseguro);
    border: 1px solid var(--color-aviso);
    color: var(--color-aviso-texto);
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.mensaje-error {
    background: var(--color-error-suave);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.aviso-actualizacion-externa-plan {
    background: var(--color-error-suave);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: 0.75rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 20px;
    text-align:center;
}

.mensaje-exito {
    background: var(--color-fondo-destacado);
    border: 1px solid var(--color-exito);
    color: var(--color-exito-texto);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.mensaje-info {
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.mensaje-aviso {
    background: var(--color-aviso-inseguro);
    border: 1px solid var(--color-aviso);
    color: var(--color-aviso-texto);
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.4;
}
.mensaje-exito,
.mensaje-error {
    position: relative;
    max-width: 50vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-right: 36px;
    transition: opacity 0.5s ease;
}
.mensaje-exito.mensaje-temporizado-desvanecer,
.mensaje-error.mensaje-temporizado-desvanecer {
    opacity: 0;
}
.boton-cerrar-mensaje-temporizado {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    padding: 4px;
}
.botonera-ficha-pago {
    max-width: 768px;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* -----------------------------------------------------------
   Formularios (uso general en toda la app)
   ----------------------------------------------------------- */
form label {
    display: block;
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-bottom: 6px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(20%) sepia(40%) saturate(1000%) hue-rotate(165deg);
    cursor: pointer;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="time"],
form input[type="datetime-local"],
form select,
form textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
    margin-bottom: 8px;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="time"],
form input[type="datetime-local"],
form select {
    max-width: 120%;
}
button[type="submit"].boton-inline {
    width: auto;
    padding: 12px 18px;
    border: 1px solid transparent;
    line-height: 1;
}
/* Marca visual de campo obligatorio: acento en el borde derecho */
form input:required,
form select:required,
form textarea:required {
    box-shadow: inset -3px 0 0 var(--color-primario);
}

/* Campo con error de validación o vacío tras un intento fallido */
form .campo-con-error {
    background-color: var(--color-error-suave);
    border-color: var(--color-error);
}

form .campo-con-error:required {
    box-shadow: inset -3px 0 0 var(--color-error);
}

form input[type="text"] {
    /* añade esta línea a la regla que ya tienes */
    line-height: 1rem;

}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--color-primario);
}
.campo-sin-margen-inferior{
    margin-top: 12px;
    margin-bottom: 0;
}
form textarea {
    min-height: 100px;
    resize: vertical;
}

/* Campo de contraseña con botón de mostrar/ocultar superpuesto */
.campo-password {
    position: relative;
}

.campo-password input {
    display: block;
    padding-right: 48px;
}

.boton-ojo {
    position: absolute;
    right: 4px;
    top: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background: none;
    border: none;
    border-left: 1px solid var(--color-bordes);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    border-radius: 0 8px 8px 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-ojo:hover {
    background: var(--color-bordes);
    color: var(--color-primario);
}

/* -----------------------------------------------------------
   Botones
   ----------------------------------------------------------- */
.boton-menu-invertido{
    display: inline-block;
    cursor: pointer;
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--color-fondo);
    color: var(--color-primario);
    font-family: var(--fuente-realce);
    border:1px solid var(--color-primario);
}

.boton-menu-invertido:hover,
.boton-menu-invertido:focus{
    background: var(--color-primario);
    color: var(--color-fondo);
    text-decoration: none;
    border-bottom: none !important;
    outline: none;
  }


.boton-primario,
button[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
    background: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-family: var(--fuente-realce);
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    border:1px solid var(--color-primario);
}
.boton-ancho-completo {
    display: block;
    width: 100%;
}

.boton-primario:hover,
button[type="submit"]:hover {
    background: var(--color-secundario-hover);
    border:1px solid var(--color-secundario-hover);
}

.boton-secundario {
    display: inline-block;
    padding: 10px 18px;
    background: transparent;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    border-radius: 8px;
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-secundario:hover {
    background: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: var(--color-blanco);
}

.boton-como-enlace {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--color-primario);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.boton-como-enlace:hover {
    color: var(--color-secundario-hover);
}

/* button[type="submit"] tiene más especificidad que .boton-secundario
   por sí sola (selector de elemento + atributo vs. una sola clase), así
   que sin esto cualquier <button type="submit" class="boton-secundario">
   se pintaba como botón primario relleno en vez de secundario. */
button[type="submit"].boton-secundario {
    background: transparent;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
}
button[type="submit"].boton-secundario:hover {
    background: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: var(--color-blanco);
}

.boton-peligro {
    display: inline-block;
    padding: 10px 18px;
    background: var(--color-error);
    color: var(--color-blanco);
    border: none;
    border-radius: 8px;
    font-family: var(--fuente-realce);
}

.boton-peligro:hover {
    opacity: 0.92;
}


/* -----------------------------------------------------------
   Índice público
   ----------------------------------------------------------- */
.seccion-hero {
    text-align: center;
    padding: 40px 0 20px;
}

.seccion-hero h1 {
    font-size: 2.2rem;
}
.hero-index-titulo-marketing{
    color:var(--color-secundario);;
}
.seccion-venta,
.seccion-impacientes,
.seccion-suscripcion {
    margin-bottom: 24px;
}

.lista-venta {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.lista-venta li {
    background: var(--color-fondo-destacado);
    color: var(--color-texto);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lista-venta li::before {
    content: "✓";
    color: var(--color-secundario);
    font-weight: bold;
    font-size: 1.1em;
    flex-shrink: 0;
}

.lista-estadistica {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lista-estadistica li {
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
}
.lista-estadistica-verde li {
    color: var(--color-exito);
    font-weight: 600;
}
.lista-estadistica-cobre li {
    color: var(--color-detalle-premium);
    font-weight: 600;
}
.subtarjeta > .aviso {
    margin: 16px 0 0;
}

.grafico-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 1024px) {
    .grafico-layout {
        grid-template-columns: 1fr;
    }
}
.grafico-controles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
    border-right: 1px solid var(--color-bordes);
}
@media (max-width: 1024px) {
    .grafico-controles {
        padding-right: 0;
        border-right: none;
    }
}
.grupo-opciones-grafico h4 {
    margin: 0 0 6px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    font-family: var(--fuente-realce);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grafico-visual {
    min-width: 0;
}
.form-linea {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.form-linea input {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

.texto-oferta {
    font-family: var(--fuente-realce);
    font-size: 1.15rem;
    color: var(--color-primario);
    font-weight: 600;
}

/* -----------------------------------------------------------
   Dashboard
   ----------------------------------------------------------- */
.fila-agenda {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bordes);
}

.fila-agenda:last-of-type {
    border-bottom: none;
}

.hora-agenda {
    font-family: var(--fuente-realce);
    color: var(--color-primario);
    font-weight: 600;
    min-width: 52px;
}

/* Layout de dos columnas: "hoy" + resúmenes */
.panel-dashboard-columnas {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1280px) {
    .panel-dashboard-columnas {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}
@media (max-width: 1024px) {
    .panel-dashboard-columnas {
        grid-template-columns: 1fr;
    }
}

/* Fila de agenda con botón de acceso directo */
.fila-agenda {
    justify-content: space-between;
    align-items: center;
}
.fila-agenda-info {
    display: flex;
    gap: 12px;
    align-items: baseline;
}
.boton-ir-sesion {
    font-family: var(--fuente-texto);
    font-size: 0.8rem;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    background: transparent;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.boton-ir-sesion:hover {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
    color: var(--color-fondo);
}

.proxima-sesion-destacada {
    text-align: center;
}

.proxima-sesion-destacada .dato-proxima {
    color: var(--color-secundario);
    font-weight: 700;
    font-size: 1.05rem;
}
.hora-proxima-sesion {
    color: var(--color-detalle-premium);
}

.proxima-sesion-destacada .boton-ir-sesion {
    display: inline-block;
    margin-top: 10px;
}

.fila-sesion-en-curso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bordes);
    flex-wrap: wrap;
}

.fila-sesion-en-curso:last-of-type {
    border-bottom: none;
}

.acciones-sesion-en-curso {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.estado-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.estado-punto.estado-en-curso {
    background: var(--color-secundario);
}

.estado-punto.estado-pausada {
    background: var(--color-aviso);
}

.punto-avance-externo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: none;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform 0.15s ease;
}

.punto-avance-externo:hover {
    transform: scale(1.3);
}

.punto-avance-externo-24h {
    background: var(--color-secundario);
}

.punto-avance-externo-semana {
    background: var(--color-aviso);
}
.punto-saldo-negativo {
    background: var(--color-error);
}
.estado-punto-badge {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    vertical-align: middle;
}
.resumen-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.resumen-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 80px;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 10px 6px;
}

.resumen-numero {
    font-family: var(--fuente-titulos);
    font-size: 1.6rem;
    color: var(--color-primario);
    font-weight: 700;
}

.resumen-etiqueta {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.acciones-sesion-en-curso form {
    display: inline-block;
    margin: 0;
}

.acciones-sesion-en-curso button {
    width: auto;
}

/* -----------------------------------------------------------
   Botón que combina icono de uatels_iconset + texto, centrado
   verticalmente (el icono trae vertical-align:top pensado para
   el submenú de configuración, aquí lo anulamos con flex)
   ----------------------------------------------------------- */
.boton-con-icono {
    display: inline-flex;
    align-items: center;
}

/* -----------------------------------------------------------
   Botones inline (usados junto a texto o en grupos de acciones)
   ----------------------------------------------------------- */
.boton-inline {
    display: inline-block;
    width: auto;
    padding: 10px 18px;
    text-decoration: none;
}

.grupo-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.grupo-acciones form {
    display: contents;
}
.grupo-acciones-centrado {
    justify-content: flex-end;
}
.grupo-acciones-centrado.confirmando {
    justify-content: center;
}
.celda-tip-contenido {
    max-height: 60px;
    overflow: hidden;
}
.grupo-acciones-saldo {
    justify-content: center;
}

.grupo-acciones input[type="date"] {
    width: auto;
    display: inline-block;
    margin: 0;
}

.boton-destacado-accion {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
    margin-top: 20px;
    text-decoration: none;
}

/* -----------------------------------------------------------
   Bloque de código destacado (claves de recuperación)
   ----------------------------------------------------------- */
.bloque-codigo {
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: block;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: monospace;
}
.contenedor-codigo {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    background: var(--color-fondo-alterno);
    overflow: hidden;
}

.contenedor-codigo .bloque-codigo {
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
}

.boton-copiar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: none;
    border: none;
    border-left: 1px solid var(--color-bordes);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-copiar:hover {
    background: var(--color-bordes);
    color: var(--color-primario);
}

.boton-copiar.copiado {
    color: var(--color-exito);
}
/* -----------------------------------------------------------
   Tabla de suscriptores (y tablas generales del panel)
   ----------------------------------------------------------- */
.tabla-panel {
    width: 100%;
    border-collapse: collapse;
}

.tabla-panel th,
.tabla-panel td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-bordes);
}

.tabla-panel thead th {
    font-family: var(--fuente-realce);
    color: var(--color-texto-secundario);
    font-size: 0.85rem;
}
.texto-exito { color: var(--color-exito); }

.fila-tarjetas-globales {
    display: grid;
    grid-template-columns: minmax(0, 65%) minmax(0, 35%);
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .fila-tarjetas-globales {
        grid-template-columns: 1fr;
    }
}
.rejilla-generales-globales {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 1024px) {
    .rejilla-generales-globales {
        grid-template-columns: 1fr;
    }
}
.columna-generales-globales {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.contenedor-tabla-fluida {
    width: 100%;
    min-width: 0;
}
.contenedor-tabla-fluida .tabla-panel {
    table-layout: fixed;
}
.contenedor-tabla-fluida .tabla-panel td {
    word-break: break-word;
}
/* -----------------------------------------------------------
   Utilidad genérica de ocultar (faltaba una regla base; antes
   sólo existían combinaciones específicas como .modal-overlay.oculto)
   ----------------------------------------------------------- */
.oculto {
    display: none !important;
}

/* -----------------------------------------------------------
   Utilidades de espaciado
   ----------------------------------------------------------- */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.mr-16 { margin-right: 16px; }



/* -----------------------------------------------------------
   Pie de página
   ----------------------------------------------------------- */
footer {
    overflow: hidden;
}
.pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 2px 50px;
    text-align: center;
    background-color: var(--color-primario);
    color: var(--color-fondo);
}

.pie-izquierdo,
.pie-derecho {
    text-align: center;
}

.pie-radar-activo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    margin: 0;
}

.pie-radar-punto {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 1;   /* evita que el propio tamaño grande añada alto de línea extra */
    color: var(--color-secundario);
    animation: radar-pulse 2s ease-in-out infinite;
}

.pie-aviso-legal {
    margin: 0;
    font-size: 0.75rem;
}
.tiempo-render {
    text-align: right;
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    margin: 8px 0 0;
    padding:12px 18px;
}
@keyframes radar-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.15); }
}

form input:disabled,
form input[readonly] {
    background: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
    cursor: not-allowed;
}

.enlace-anecdotico {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 0.78rem;
    margin: 0;
}

.enlace-anecdotico a {
    color: var(--color-secundario);
}

.enlace-anecdotico a:hover {
    color: var(--color-secundario-hover);
}

.subnav-configuracion {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid var(--color-bordes);
    margin-bottom: 20px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.subnav-configuracion a {
    padding: 10px 4px;
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    border-bottom: 2px solid transparent;
}

.subnav-configuracion a:hover {
    color: var(--color-primario);
    text-decoration: none;
    border-bottom-color: var(--color-primario);
}

.subnav-configuracion a.activo {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}
.subnav-configuracion a.admin{
    color: var(--color-detalle-premium);
    text-decoration: none;
}
.subnav-configuracion a.admin:hover {
    color: var(--color-aviso-texto);
    text-decoration: none;
    border-bottom-color: var(--color-aviso-texto);
}

.subnav-configuracion a.admin.activo {
    color: var(--color-detalle-premium);
    border-bottom-color: var(--color-detalle-premium);
}
.botonera-asistente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.botonera-asistente a.boton-secundario {
    text-decoration: none;
}

.botonera-asistente form {
    margin: 0;
}

.indicador-paso {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin-bottom: 12px;
}

input[type="date"] {
    color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(20%) sepia(40%) saturate(1000%) hue-rotate(165deg);
    cursor: pointer;
}


/* -----------------------------------------------------------
   Impacientes: layout maestro-detalle
   ----------------------------------------------------------- */
.layout-impacientes {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.layout-impacientes-columna-lista {
    flex: 1 1 70%;
    min-width: 0;
}

.layout-impacientes-columna-preview {
    flex: 1 1 30%;
    /*max-width: 570px;*/
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-impacientes {
        flex-direction: column;
    }

    .layout-impacientes-columna-preview {
        max-width: 100%;
        position: static;
    }
}

.layout-solicitudes {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.layout-solicitudes-columna-lista {
    flex: 1 1 70%;
    min-width: 0;
}
.layout-solicitudes-columna-preview {
    flex: 1 1 30%;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-solicitudes {
        flex-direction: column;
    }
    .layout-solicitudes-columna-preview {
        max-width: 100%;
        position: static;
    }
}
.contenedor-tabla-solicitudes {
    overflow-x: auto;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}
.tabla-solicitudes th:nth-child(1) { width: 30%; }
.tabla-solicitudes th:nth-child(2) { width: 13%; }
.tabla-solicitudes th:nth-child(3) { width: 26%; }
.tabla-solicitudes th:nth-child(4) { width: 13%; }
.tabla-solicitudes th:nth-child(5) { width: 18%; }

.tabla-solicitudes td:nth-child(1) {
    padding-left: 6px;
}
.tabla-solicitudes td:nth-child(5) {
    padding-right: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fila-solicitud-aceptada td {
    color: var(--color-primario);
}
.fila-solicitud-rechazada td {
    color: var(--color-error);
}

.badge-solicitud-pendiente,
.badge-solicitud-aceptada,
.badge-solicitud-rechazada {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
    border: 1px solid transparent;
}
.badge-solicitud-pendiente {
    background: var(--color-aviso-inseguro);
    color: var(--color-texto);
    border-color: var(--color-aviso-texto);
}
.badge-solicitud-aceptada {
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
    border-color: var(--color-secundario);
}
.badge-solicitud-rechazada {
    background: var(--color-error-suave);
    color: var(--color-error);
    border-color: var(--color-error);
}
.badge-tipo-solicitud-impaciente,
.badge-tipo-solicitud-prescriptor,
.badge-tipo-solicitud-suscriptor {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--color-fondo);
    font-family: var(--fuente-realce);
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-tipo-solicitud-impaciente {
    border-color: var(--color-secundario);
    color: var(--color-primario);
}
.badge-tipo-solicitud-prescriptor {
    border-color: var(--color-detalle-premium);
    color: var(--color-primario);
}
.badge-tipo-solicitud-suscriptor {
    border-color: var(--color-detalle-premium);
    color: var(--color-detalle-premium);
}
.circulo-ver-impaciente {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-exito);
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.circulo-ver-impaciente:hover {
    box-shadow: 0 0 0 3px var(--color-fondo-destacado);
}
.circulo-ver-prescriptor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primario);
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.circulo-ver-prescriptor:hover {
    box-shadow: 0 0 0 3px var(--color-fondo-destacado);
}
.circulo-ver-suscriptor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-detalle-premium);
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.circulo-ver-suscriptor:hover {
    box-shadow: 0 0 0 3px var(--color-fondo-destacado);
}
.boton-nueva-solicitud {
    font-size: 0.9rem;
}
#preview-solicitud .botonera-preview-impaciente-compacta {
    margin-top: 16px;
}
/* Estilos genéricos para dentro de la tarjeta de detalles*/
.listados-tarjeta-preview h3 {
    margin-bottom: 4px;
}

.listados-tarjeta-preview p {
    font-size: 0.9rem;
}
.botonera-preview-impaciente-compacta .boton-secundario,
.botonera-preview-impaciente-compacta .boton-primario,
.botonera-preview-impaciente-compacta .boton-deshabilitado {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.subficha-perspectiva {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.titulo-subficha-perspectiva {
    margin: 0;
}


/* -----------------------------------------------------------
   Barra de herramientas de la lista
   ----------------------------------------------------------- */
.barra-herramientas-lista {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}


.barra-herramientas-lista select {
    width: auto;
}
.barra-herramientas-lista input[type="text"],
.barra-herramientas-lista select {
    padding: 10px 12px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;
}

.barra-herramientas-lista input[type="text"]:focus,
.barra-herramientas-lista select:focus {
    outline: none;
    border-color: var(--color-primario);
}
.barra-herramientas-lista .campo-sin-margen-inferior {
    margin-top: 0;
}
#filtro-facturante-documento {
    width: auto;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* -----------------------------------------------------------
   Tabla ordenable
   ----------------------------------------------------------- */
.contenedor-tabla-impacientes {
    overflow-x: auto;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}
.tabla-ordenable thead tr {
    background: var(--color-primario);
    color: var(--color-detalle-premium);

}
.tabla-ordenable th {
    cursor: pointer;
    color: var(--color-fondo);
    user-select: none;
    white-space: nowrap;
    border-right: 1px solid var(--color-bordes);
}

.tabla-ordenable th:hover {
    color: var(--color-secundario);
}

.tabla-ordenable th:last-child {
    border-right: none;
}
.tabla-ordenable {
    width: 100%;
    table-layout: fixed;
}
.tabla-ordenable th {
    font-size: 1.05rem;
    padding:6px 0;
}
.tabla-ordenable td {
    font-size: 0.95rem;
    padding:6px 0;
}

/* Impacientes: nombre completo necesita más espacio */
.tabla-impacientes th:nth-child(1),
.tabla-impacientes td:nth-child(1) {
    width: 37%;
}
.tabla-impacientes th:nth-child(2),
.tabla-impacientes td:nth-child(2) {
    width: 14%;
}
.tabla-impacientes th:nth-child(3),
.tabla-impacientes td:nth-child(3) {
    width: 9%;
}
.tabla-impacientes th:nth-child(4),
.tabla-impacientes td:nth-child(4) {
    width: 24%;
}
.tabla-impacientes th:nth-child(5),
.tabla-impacientes td:nth-child(5) {
    width: 15%;
}

/* Suscriptores: usuario más comedido, caducidad con algo más de aire */
.tabla-suscriptores th:nth-child(1),
.tabla-suscriptores td:nth-child(1) {
    width: 40%;
}
.tabla-suscriptores th:nth-child(2),
.tabla-suscriptores td:nth-child(2) {
    width: 15%;
}
.tabla-suscriptores th:nth-child(3),
.tabla-suscriptores td:nth-child(3) {
    width: 25%;
}
.tabla-suscriptores th:nth-child(4),
.tabla-suscriptores td:nth-child(4) {
    width: 20%;
}

.tabla-suscriptores td:nth-child(1) {
    padding-left: 6px;
}
.tabla-suscriptores td:nth-child(3) {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tabla-suscriptores td:nth-child(4) {
    padding-right: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tabla-ordenable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.indicador-orden {
    font-size: 0.7rem;
    color: var(--color-fondo-alterno);
    margin-left: 4px;
}

.fila-impaciente {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.fila-impaciente:nth-child(odd) {
    background: var(--color-semiblanco);
}

.fila-impaciente:nth-child(even) {
    background: var(--color-fondo-alterno);
}
.fila-impaciente:hover {
    background: var(--color-lista-hover);
}

.fila-impaciente.fila-activa {
    background: var(--color-fondo-destacado);
}

.fila-solicitud {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.fila-solicitud:nth-child(odd) {
    background: var(--color-semiblanco);
}
.fila-solicitud:nth-child(even) {
    background: var(--color-fondo-alterno);
}
.fila-solicitud:hover {
    background: var(--color-lista-hover);
}
.fila-solicitud.fila-activa {
    background: var(--color-fondo-destacado);
}

/* -----------------------------------------------------------
   Acordeón de acciones
   ----------------------------------------------------------- */
.fila-acordeon td {
    background: var(--color-fondo);
    padding: 0;
}

/* -----------------------------------------------------------
   Paginación
   ----------------------------------------------------------- */
.controles-paginacion {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.controles-paginacion button {
    min-width: 36px;
    padding: 8px 12px;
}

.boton-pagina-actual {
    cursor: default;
}

.elipsis-paginacion {
    padding: 0 4px;
    color: var(--color-texto-secundario);
}




.campo-con-limpiar {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.campo-con-limpiar input {
    display: block;
    width: 100%;
    padding-right: 40px;
    box-sizing: border-box;
}

.boton-limpiar-campo {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-texto-secundario);
    border-radius: 0 8px 8px 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-limpiar-campo.visible {
    display: flex;
}

.boton-limpiar-campo:hover {
    background: var(--color-bordes);
    color: var(--color-error);
}

.etiqueta-privado {
    display: inline-block;
    font-size: 0.7rem;
    font-family: var(--fuente-realce);
    color: var(--color-blanco);
    background: var(--color-detalle-premium);
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.etiqueta-publico {
    display: inline-block;
    font-size: 0.7rem;
    font-family: var(--fuente-realce);
    color: var(--color-blanco);
    background: var(--color-secundario);
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.label-con-etiqueta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.formulario-dos-columnas {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.formulario-dos-columnas-interacciones {
    gap: 20px;
}

.formulario-cuatro-columnas-impaciente-nuevo {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.formulario-cuatro-columnas-impaciente-nuevo .columna-formulario {
    flex: 1;
    min-width: 0;
}
.formulario-tres-columnas-prescriptor {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.formulario-tres-columnas-prescriptor .columna-formulario {
    flex: 1;
    min-width: 0;
}
.formulario-tres-columnas-impaciente {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.formulario-tres-columnas-impaciente .columna-formulario {
    flex: 1;
    min-width: 0;
}
.formulario-tres-columnas-impaciente .columna-formulario:nth-child(1) {
    flex: 1.2;
}
.formulario-tres-columnas-impaciente .columna-formulario:nth-child(2) {
    flex: 1;
}
.formulario-tres-columnas-impaciente .columna-formulario:nth-child(3) {
    flex: 1;
}
.formulario-cuatro-columnas-prescriptor-nuevo {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.formulario-cuatro-columnas-prescriptor-nuevo .columna-formulario {
    flex: 1;
    min-width: 0;
}
.fila-direccion-cp {
    display: flex;
    gap: 12px;
}
.fila-direccion-cp .campo-direccion {
    flex: 3;
    min-width: 0;
}
.fila-direccion-cp .campo-cp {
    flex: 1;
    min-width: 0;
}
.fila-localidad-cp {
    display: flex;
    gap: 12px;
}
.fila-localidad-cp .campo-localidad {
    flex: 65;
    min-width: 0;
}
.fila-localidad-cp .campo-cp-localidad {
    flex: 35;
    min-width: 0;
}
.editor-alta-impaciente .area-editor-enriquecido {
    min-height: 154px;
    padding: 10px 12px;
}
.editor-alta-prescriptor .area-editor-enriquecido {
    min-height: 154px;
    padding: 10px 12px;
    background: var(--color-fondo);
}
.bloque-vincular-prescriptor-compacto {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.tarjeta-prescriptor-origen-ficha {
    text-align: center;
}
.tarjeta-prescriptor-origen-ficha p {
    margin-top: 0;
}
.tarjeta-prescriptor-origen-ficha a:hover {
    border:1px solid var(--color-secundario);
    padding: 4px 8px;
    border-radius: 8px;
}
/* Mismo patrón (recuadro verde al hover) para cualquier nombre
   clicable suelto en texto, fuera de esa tarjeta concreta */
.enlace-nombre-vinculado:hover {
    border: 1px solid var(--color-secundario);
    padding: 4px 8px;
    border-radius: 8px;
}
.tarjeta-prescriptor-origen-ficha label {
    display: block;
    text-align: left;
}
.bloque-vincular-prescriptor-compacto .boton-secundario {
    padding: 6px 12px;
    font-size: 0.78rem;
}
@media (max-width: 1024px) {
    .formulario-cuatro-columnas-impaciente-nuevo {
        flex-direction: column;
    }
    .formulario-tres-columnas-prescriptor {
        flex-direction: column;
    }
    .formulario-cuatro-columnas-prescriptor-nuevo {
        flex-direction: column;
    }
}


.formulario-dos-columnas .columna-formulario {
    flex: 1;
    min-width: 0;
}
.formulario-dos-columnas-suscriptor .columna-formulario:nth-child(1) {
    flex: 45;
}
.formulario-dos-columnas-suscriptor .columna-formulario:nth-child(2) {
    flex: 55;
}
.columna-formulario textarea {
    min-height: 154px;
}
@media (max-width: 768px) {
    .formulario-dos-columnas {
        flex-direction: column;
    }
}
.botonera-derecha {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.cabecera-ficha-impaciente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.cabecera-seccion-ficha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cabecera-seccion-ficha h2,
.cabecera-seccion-ficha h3 {
    margin-bottom: 0;
}

.cabecera-ficha-impaciente {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.grupo-codigo-y-ver-externo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.bloque-codigo-acceso {
    text-align: right;
}

.bloque-codigo-acceso .label-codigo {
    display: block;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin-bottom: 6px;
}

.pastilla-codigo {
    display: inline-flex;
    align-items: center;
    background: var(--color-fondo-destacado);
    border-radius: 8px;
    overflow: hidden;
}

.pastilla-codigo code {
    padding: 8px 14px;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: var(--color-primario);
}

.pastilla-codigo .boton-copiar {
    background: none;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.layout-ficha-impaciente {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.columna-ficha-principal {
    flex: 1 1 60%;
    min-width: 0;
}

.columna-ficha-lateral {
    flex: 1 1 40%;
    max-width: 420px;
}

@media (max-width: 1024px) {
    .layout-ficha-impaciente {
        flex-direction: column;
    }
    .columna-ficha-lateral {
        max-width: 100%;
    }
}

/* -----------------------------------------------------------
   Acordeón de impacientes: dos zonas (estadísticas + botonera)
   ----------------------------------------------------------- */
.acordeon-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.acordeon-estadisticas {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.linea-estadistica {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.acordeon-botonera {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pastilla-cambiar-estado {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 8px 12px 8px 8px;
    min-height: 36px;
    box-sizing: border-box;
    justify-content:flex-end;
}

.pastilla-cambiar-estado-centrada {
    width: fit-content;
    margin: 0 auto 8px;
    padding: 6px 16px;
}

.texto-confirmacion-estado {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
}

.pastilla-cambiar-estado label {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
    margin: 0;
}

.pastilla-cambiar-estado select {
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo-destacado);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85rem;
    height: 28px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pastilla-cambiar-estado select:hover {
    background: var(--color-bordes);
    border-color: var(--color-primario);
}

.pastilla-cambiar-estado select:focus {
    outline: none;
}

.boton-peligro-invertido {
    border-color: var(--color-error) !important;
    color: var(--color-error) !important;
}

.boton-peligro-invertido:hover {
    background: var(--color-error) !important;
    color: var(--color-blanco) !important;
}

.tabla-prescriptores th:nth-child(1),
.tabla-prescriptores td:nth-child(1) {
    width: 30%;
}
.tabla-prescriptores th:nth-child(2),
.tabla-prescriptores td:nth-child(2) {
    width: 18%;
}
.tabla-prescriptores th:nth-child(3),
.tabla-prescriptores td:nth-child(3) {
    width: 32%;
}
.tabla-prescriptores th:nth-child(4),
.tabla-prescriptores td:nth-child(4) {
    width: 20%;
}

.cabecera-interaccion {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-bordes);
}
.tarjeta-convertir-impaciente {
    text-align: center;
}
.tarjeta-convertir-prescriptor {
    text-align: center;
}
.cabecera-interaccion strong {
    font-size: 0.9rem;
    font-weight: 600;
}
.etiqueta-tipo-interaccion,
.etiqueta-resultado-interaccion {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
}

.etiqueta-resultado-interaccion {
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
}
.tarjeta-aviso-caducidad {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--color-aviso-inseguro);
    border: 1px solid var(--color-aviso);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.tarjeta-aviso-caducidad form {
    margin: 0;
}

.tarjeta-conversion-prueba {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--color-fondo-destacado);
    border: 1px solid var(--color-secundario);
    border-radius: 8px;
    padding: 10px 40px 10px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    position: relative;
}

.tarjeta-conversion-prueba .texto-secundario {
    margin: 2px 0 0;
}

.tarjeta-conversion-prueba-gracia {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
    padding: 16px 40px 16px 20px;
}

.tarjeta-conversion-prueba-gracia .boton-cerrar-tarjeta-aviso {
    color: var(--color-blanco);
}

.tarjeta-conversion-prueba-gracia strong,
.tarjeta-conversion-prueba-gracia .texto-secundario {
    color: var(--color-blanco);
}

.tarjeta-conversion-prueba-gracia .boton-primario {
    background: var(--color-blanco);
    color: var(--color-secundario);
}
.tarjeta-conversion-prueba-gracia .boton-primario {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-blanco);
}
.tarjeta-conversion-prueba-gracia .boton-primario:hover {
    background: var(--color-aviso);
    border-color: var(--color-aviso);
    color: var(--color-primario);
}
.boton-cerrar-aviso {
    background: none;
    border: 1px solid var(--color-aviso);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--color-aviso-texto);
}

.boton-cerrar-aviso:hover {
    background: var(--color-aviso);
    color: var(--color-blanco);
}
.texto-caducado {
    color: var(--color-error);
}
.texto-primario {
    color: var(--color-primario);
}
.texto-pendiente-suscripcion {
    color: var(--color-detalle-premium);
}
.fila-suscriptor-caducado td {
    color: var(--color-error);
}
.fila-suscriptor-pendiente td {
    color: var(--color-detalle-premium);
}
.fila-suscriptor-activo td {
    color: var(--color-primario);
}

.badge-prueba {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
}

.badge-prueba-activa {
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
}

.badge-prueba-gracia {
    background: var(--color-aviso-inseguro);
    color: var(--color-aviso-texto);
}

.badge-prueba-caducada {
    background: var(--color-error-suave);
    color: var(--color-error);
}

.bloque-preview-prueba {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
}

.bloque-preview-prueba p {
    margin: 2px 0;
}

.tarjeta-resumen-centrada {
    width: 40%;
    margin: 0 auto 16px;
}

@media (max-width: 1024px) {
    .tarjeta-resumen-centrada {
        width: 100%;
    }
}

.layout-ficha-suscriptor {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1.1fr;
    width: 100%;
    gap: 0 20px;
    align-items: start;
}

.layout-ficha-suscriptor > div {
    min-width: 0;
}

.tabla-historial-scroll {
    max-height: 340px;
    overflow-y: auto;
}

.tabla-historial-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--color-fondo);
    z-index: 1;
}

.layout-ficha-suscriptor .columna-tematica {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fila-aviso-interacciones-suscriptor {
    display: grid;
    grid-template-columns: 3fr 4fr;
    width: 100%;
    gap: 0 20px;
    align-items: start;
}

.fila-aviso-interacciones-suscriptor > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 1024px) {
    .fila-aviso-interacciones-suscriptor {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    .layout-ficha-suscriptor {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .layout-ficha-suscriptor {
        grid-template-columns: 1fr;
    }
}
.tarjeta-proximos-caducar {
    display: block;
}

.lista-proximos-caducar {
    margin: 8px 0 0;
    padding-left: 20px;
}

.lista-proximos-caducar li {
    margin-bottom: 4px;
}

/* Modo global: 5 columnas (Impaciente, Título, Tipificación, Estado, Apertura) */
.tabla-casos-global th:nth-child(1),
.tabla-casos-global td:nth-child(1) {
    width: 22%;
}
.tabla-casos-global th:nth-child(2),
.tabla-casos-global td:nth-child(2) {
    width: 30%;
}
.tabla-casos-global th:nth-child(3),
.tabla-casos-global td:nth-child(3) {
    width: 11%;
}
.tabla-casos-global th:nth-child(4),
.tabla-casos-global td:nth-child(4) {
    width: 22%;
}
.tabla-casos-global th:nth-child(5),
.tabla-casos-global td:nth-child(5) {
    width: 15%;
}

/* Modo filtrado: 4 columnas (Título, Tipificación, Estado, Apertura) */
.tabla-casos-filtrada th:nth-child(1),
.tabla-casos-filtrada td:nth-child(1) {
    width: 40%;
}
.tabla-casos-filtrada th:nth-child(2),
.tabla-casos-filtrada td:nth-child(2) {
    width: 24%;
}
.tabla-casos-filtrada th:nth-child(3),
.tabla-casos-filtrada td:nth-child(3) {
    width: 18%;
}
.tabla-casos-filtrada th:nth-child(4),
.tabla-casos-filtrada td:nth-child(4) {
    width: 18%;
}

.fila-clicable {
    cursor: pointer;
}

.fila-clicable:hover {
    background: var(--color-fondo-alterno);
}

.lista-casos-impaciente {
    max-height: 236px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fila-caso-impaciente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-fondo-alterno);
    transition: background-color 0.15s ease;
}

.fila-caso-impaciente:hover {
    background: var(--color-bordes);
}

.info-caso-impaciente {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-caso-impaciente strong {
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-caso-impaciente .texto-secundario {
    font-size: 0.76rem;
}

.badge-estado-caso {
    align-self: flex-start;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
    white-space: nowrap;
    margin-top: 2px;
}

.boton-ver-caso {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* centra horizontalmente en el eje principal */
    text-align: center;      /* centra las líneas de texto entre sí */
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    line-height:0.8rem;
    border-radius: 6px;
    border: 1px solid var(--color-bordes);
    color: var(--color-primario);
    background: var(--color-fondo);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-ver-caso:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
    text-decoration: none;
}

.layout-ficha-impaciente-3col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 100%;
    gap: 20px;
    align-items: start;
}

.layout-ficha-impaciente-3col > div {
    min-width: 0;
}

@media (max-width: 768px) {
    .layout-ficha-impaciente-3col {
        grid-template-columns: 1fr;
    }
}

.formulario-cuatro-columnas {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.formulario-cuatro-columnas > .columna-formulario {
    flex: 0 0 auto;
    min-width: 0;
}

.formulario-cuatro-columnas > .columna-formulario:nth-child(1) {
    width: calc(22% - 15px);
}
.formulario-cuatro-columnas > .columna-formulario:nth-child(2) {
    width: calc(22% - 15px);
}
.formulario-cuatro-columnas > .columna-formulario:nth-child(3) {
    width: calc(22% - 15px);
}
.formulario-cuatro-columnas > .columna-formulario:nth-child(4) {
    width: calc(34% - 15px);
}

.contenido-acordeon-campo {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 1280px) {
    .formulario-cuatro-columnas {
        flex-wrap: wrap;
    }
    .formulario-cuatro-columnas > .columna-formulario:nth-child(1),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(2),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(3),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(4) {
        width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .formulario-cuatro-columnas {
        flex-direction: column;
    }
    .formulario-cuatro-columnas > .columna-formulario:nth-child(1),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(2),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(3),
    .formulario-cuatro-columnas > .columna-formulario:nth-child(4) {
        width: 100%;
    }
}

/* Acordeón de campos de texto largo */
.acordeon-campos {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.contenido-acordeon-campo {
    width: 100%;
    box-sizing: border-box;
    display: none;
    padding: 12px 14px;
}

.acordeon-contexto-sesion .contenido-acordeon-campo {
    max-height: 340px;
    overflow-y: auto;
}

.item-acordeon-campo {
    border-bottom: 1px solid var(--color-bordes);
}

.item-acordeon-campo:last-child {
    border-bottom: none;
}

.etiqueta-idioma-tip {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    border: 1px solid var(--color-primario);
    border-radius: 6px;
    color: var(--color-primario);
    font-weight: 600;
    line-height: 1.2;
}

.cabecera-acordeon-campo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-fondo-alterno);
    border: none;
    cursor: pointer;
    font-family: var(--fuente-realce);
    font-size: 0.88rem;
    color: var(--color-texto);
    text-align: left;
}

.cabecera-acordeon-campo:hover,
.item-acordeon-campo.abierto > .cabecera-acordeon-campo {
    background: var(--color-bordes);
}

.indicador-acordeon-campo {
    color: var(--color-primario);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.item-acordeon-campo.abierto > .cabecera-acordeon-campo .indicador-acordeon-campo {
    transform: rotate(90deg);
}


.item-acordeon-campo.abierto > .contenido-acordeon-campo {
    display: block;
}

.contenido-acordeon-campo textarea {
    margin-bottom: 0;
}

/* Sesiones dentro de la columna 4 */
.contenedor-sesiones-caso {
    max-height: 160px;
    overflow-y: auto;
}
.contenedor-sesiones-caso .tabla-panel td {
    font-size: 0.85rem;
}
.celda-fecha-sesion-caso {
    font-size: 0.78rem;
    white-space: nowrap;
}
.contenedor-sesiones-caso .fila-clicable:hover {
    background: var(--color-fondo-destacado);
}

.boton-primario.boton-compacto,
.boton-secundario.boton-compacto,
.boton-peligro.boton-compacto,
button[type="submit"].boton-inline.boton-compacto {
    padding: 6px 12px;
    font-size: 0.8rem;
}
.boton-primario.boton-tamano-medio,
.boton-secundario.boton-tamano-medio,
.boton-peligro.boton-tamano-medio,
button[type="submit"].boton-inline.boton-tamano-medio {
    padding: 8px 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.fila-editando-servicio {
    background: var(--color-aviso-inseguro);
}
.form-editar-servicio-inline {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.form-editar-servicio-inline input[type="text"],
.form-editar-servicio-inline input[type="number"],
.form-editar-servicio-inline select {
    margin-bottom: 0;
}
.campo-editar-nombre-servicio {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.campo-editar-precio-servicio,
.campo-editar-moneda-servicio,
.campo-editar-sesiones-servicio {
    flex: 0 1 100px;
    display: flex;
    flex-direction: column;
}
.grupo-guardar-cancelar-servicio {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.subtarjeta {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 14px;
    background: var(--color-fondo-alterno);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.subtarjeta h3:first-child {
    margin-top: 0;
}
.tarjeta-calendario-sesiones-ficha {
    text-align: center;
}
.subtarjeta-compacta {
    padding: 10px 14px;
}
.subtarjeta-compacta h5 {
    margin: 0 0 6px;
}
.subtarjeta-compacta input,
.subtarjeta-compacta select {
    margin-bottom: 4px !important;
}

.subtarjeta .cabecera-seccion-ficha {
    margin-bottom: 10px;
}

.subtarjetas-periodo,
.subtarjetas-general {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.subtarjetas-periodo > .subtarjeta,
.subtarjetas-general > .subtarjeta {
    flex: 1 1 220px;
    margin-top: 0;
}

.subtarjetas-periodo > .subtarjeta-ranking-prescriptores {
    flex: 1 1 auto;
    min-width: 220px;
}

.tabla-ranking-prescriptores {
    width: 100%;
    /*min-width: 100%;*/
    margin-top: 16px;
    border-collapse: collapse;
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
}

.tabla-ranking-prescriptores td {
    padding: 3px 0;
    vertical-align: top;
}

.tabla-ranking-prescriptores td:first-child {
    padding-right: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabla-ranking-prescriptores td:nth-child(2) {
    padding-right: 20px;
}

.tabla-ranking-prescriptores td:last-child {
    padding-left: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cabecera__version-app {
    margin: 4px 0 0 8px;
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    opacity: 0.8;
}

.boton-ayuda-flotante {
    position: fixed;
    top: 170px;
    right: 24px;
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.boton-ayuda-flotante:hover {
    transform: scale(1.08);
    background: var(--color-secundario-hover);

}
.modal-contenido.modal-ancho-ayuda {
    max-width: 800px;
    height: 60vh;
}
#modal-ayuda {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
#modal-ayuda.abierto {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}
#modal-ayuda .modal-contenido {
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
#modal-ayuda.abierto .modal-contenido {
    transform: scale(1);
    opacity: 1;
}
.ayuda-buscador {
    flex: 1;
}
.ayuda-buscador .campo-con-limpiar {
    min-width: 160px;
}
.ayuda-buscador-contador {
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
    margin: 0 4px;
}
.ayuda-buscador-navegacion {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ayuda-buscador-navegacion button {
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}
.ayuda-cuerpo {
    display: flex;
    gap: 20px;
    overflow: hidden;
    flex: 1;
}
.ayuda-indice {
    flex: 0 0 35%;
    overflow-y: auto;
    border-right: 1px solid var(--color-bordes);
    background: var(--color-fondo-alterno);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ayuda-indice-grupo-cabecera {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--fuente-realce);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-texto);
    text-align: left;
}
.ayuda-indice-grupo-cabecera:hover {
    background: var(--color-fondo-destacado);
}
.ayuda-indice-grupo-indicador {
    color: var(--color-primario);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.ayuda-indice-grupo.abierto > .ayuda-indice-grupo-cabecera .ayuda-indice-grupo-indicador {
    transform: rotate(90deg);
}
.ayuda-indice-grupo-contenido {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
}
.ayuda-indice-grupo.abierto > .ayuda-indice-grupo-contenido {
    display: flex;
}
.ayuda-indice-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-texto);
    text-decoration: none;
    font-size: 0.88rem;
}
.ayuda-indice-item:hover {
    background: var(--color-lista-hover);
}
.ayuda-indice-item.activo {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.ayuda-indice-item.sin-coincidencia {
    opacity: 0.35;
}
.ayuda-contenido {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 6px;
}
.ayuda-panel {
    display: none;
}
.ayuda-panel.activo {
    display: block;
}
.ayuda-contenido.mostrando-resultados .ayuda-panel {
    display: none;
}
.ayuda-resultados-busqueda {
    display: none;
}
.ayuda-contenido.mostrando-resultados .ayuda-resultados-busqueda {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ayuda-resultado-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-texto);
}
.ayuda-resultado-item:hover {
    background: var(--color-lista-hover);
}
.ayuda-resultado-item strong {
    display: block;
    margin-bottom: 2px;
}
.ayuda-resultado-fragmento {
    display: block;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}
.formulario-reserva-columnas {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 12px;
    width:85%;
    margin:16px auto 0 auto;
}
.columna-reserva-fechahora {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.columna-reserva-nota {
    min-width: 0;
}
@media (max-width: 768px) {
    .formulario-reserva-columnas {
        grid-template-columns: 1fr;
    }
}
.aviso-reserva-pendiente {
    background: var(--color-aviso-inseguro);
    border: 1px solid var(--color-aviso);
    color: var(--color-aviso-texto);
    padding: 12px 16px;
    border-radius: 8px;
}
.aviso-reserva-confirmada {
    background: var(--color-fondo-destacado);
    border: 1px solid var(--color-secundario);
    color: var(--color-secundario);
    padding: 12px 16px;
    border-radius: 8px;
}
.form-solicitar-reserva textarea.reserva-campo-nota {
    min-height: 70px;
}
.tabla-reservas-historico th:nth-child(1),
.tabla-reservas-historico td:nth-child(1) {
    padding-left: 6px;
    width: 22%;
}
.tabla-reservas-historico th:nth-child(2),
.tabla-reservas-historico td:nth-child(2) {
    width: 26%;
}
.tabla-reservas-historico th:nth-child(3),
.tabla-reservas-historico td:nth-child(3) {
    width: 32%;
}
.tabla-reservas-historico th:nth-child(4),
.tabla-reservas-historico td:nth-child(4) {
    width: 20%;
}
.layout-reservas-historico {
    display: flex;
    gap: 24px;
    width: 100%;
}
.layout-reservas-historico-columna-lista {
    flex: 70 1 0%;
    min-width: 0;
}
.layout-reservas-historico-columna-preview {
    flex: 30 1 0%;
    min-width: 0;
}
.pastilla-pin-acceso {
    display: flex;
    width: fit-content;
    justify-content: center;
    margin: 8px auto;
    border: 1px solid var(--color-bordes);
}
.pastilla-pin-acceso code {
    font-family: var(--fuente-realce);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-primario);
}
.campo-pin-compacto {
    width: 90px;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 6px;
    font-family: var(--fuente-realce);
}
#contenedor-regenerar-pin {
    text-align: center;
}
#contenedor-regenerar-pin .texto-confirmacion-inline {
    white-space: normal;
    display: block;
    margin-bottom: 8px;
}
.recuadro-nota-reserva-pendiente {
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo-alterno);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
}
.lista-reservas-pendientes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ayuda-mini-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-bordes);
}
.ayuda-mini-indice a {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-fondo-alterno);
    color: var(--color-texto);
    text-decoration: none;
}
.ayuda-mini-indice a:hover {
    background: var(--color-lista-hover);
}
.ayuda-panel h3 {
    margin-top: 0;
}
.ayuda-subtitulo {
    color: var(--color-detalle-premium);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 16px 0 6px;
}
.ayuda-nota-destacada {
    color: var(--color-primario);
    border-left:3px solid var(--color-primario);
    padding: 4px 8px 4px 16px;
    font-size: 0.9rem;
    margin: 8px 32px 8px 32px;
    background-color:var(--color-bordes);
}
.ayuda-panel mark {
    background: var(--color-aviso);
    color: inherit;
    border-radius: 2px;
}
.ayuda-panel mark.coincidencia-actual {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.oculto {
    display: none;
}

.modal-contenido {
    background: var(--color-fondo);
    border-radius: 10px;
    padding: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modal-ancho-tabla {
    max-width: 640px;
}

.modal-ancho-formulario {
    max-width: 840px;
}
.modal-ancho-calendario {
    max-width: 800px;
}

.modal-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.modal-cabecera h2 {
    margin: 0;
}

.modal-acciones-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
}

#boton-confirmar-seleccion-prescriptor-modal,
#boton-confirmar-seleccion-suscriptor-modal,
#boton-confirmar-seleccion-modal {
    height: 32px;
    padding: 0 16px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
}
.campo-filtro-pagos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.campo-filtro-pagos label {
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
}
.campo-filtro-pagos-busqueda {
    flex: 1;
    min-width: 200px;
}
.campo-filtro-pagos-moneda select {
    width: 100px;
}

.modal-boton-cerrar {
    background: var(--color-fondo);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-error);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-boton-cerrar:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}

.modal-contenedor-tabla {
    overflow-y: auto;
    max-height: 360px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}

.tabla-modal-impacientes thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-primario);
    color: var(--color-blanco);
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    padding: 10px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.tabla-modal-impacientes thead th:last-child {
    border-right: none;
}
.tabla-modal-impacientes th:nth-child(1),
.tabla-modal-impacientes td:nth-child(1) {
    width: 65%;
}
.tabla-modal-impacientes th:nth-child(2),
.tabla-modal-impacientes td:nth-child(2) {
    width: 35%;
}
.tabla-modal-impacientes tbody tr:nth-child(odd) {
    background: var(--color-fondo);
}

.tabla-modal-impacientes tbody tr:nth-child(even) {
    background: var(--color-fondo-alterno);
}

.tabla-modal-impacientes tbody tr {
    cursor: pointer;
}

.tabla-modal-impacientes tbody tr:hover {
    background: var(--color-lista-hover);
}

.tabla-modal-impacientes tbody tr.fila-activa {
    background: var(--color-fondo-destacado);
}
#modal-seleccionar-suscriptor .tabla-modal-impacientes th:nth-child(1),
#modal-seleccionar-suscriptor .tabla-modal-impacientes td:nth-child(1) {
    width: 40%;
}
#modal-seleccionar-suscriptor .tabla-modal-impacientes th:nth-child(2),
#modal-seleccionar-suscriptor .tabla-modal-impacientes td:nth-child(2) {
    width: 60%;
}
.modal-contenido .campo-con-limpiar input {
    padding: 10px 40px 10px 12px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.modal-contenido .campo-con-limpiar input:focus {
    outline: none;
    border-color: var(--color-primario);
}
.boton-limpiar-campo-modal {
    margin: 12px 0;
    line-height: 0.9;
    align-items: flex-end;
}
.boton-limpiar-campo-modal:hover {
    background: var(--color-bordes);
    color: var(--color-error);
    display: flex;
    align-items: flex-start;
    padding-bottom: 39px;
    margin: 12px 0;
    line-height: 2.4;
}

.campos-en-linea {
    display: flex;
    gap: 16px;
}

.campos-en-linea > div {
    flex: 1;
}

.tarjeta-datos-sesion-compacta label {
    font-size: 0.78rem;
}
.tarjeta-datos-sesion-compacta input,
.tarjeta-datos-sesion-compacta select {
    padding: 8px 10px;
    font-size: 0.85rem;
}
.titulo-contexto-sesion {
    margin-bottom: 12px;
}
.botonera-cabecera-derecha {
    display: flex;
    gap: 10px;
    align-items: center;
}
.separador-cabecera-sesion {
    border: none;
    border-top: 1px solid var(--color-bordes);
    margin: 0;
}

.layout-sesion-trabajo {
    display: flex;
    width: 100%;
    gap: 16px;
    align-items: flex-start;
}

.layout-sesion-trabajo > .columna-sesion-datos {
    flex: 0 0 auto;
    width: 22%;
    min-width: 0;
}

.layout-sesion-trabajo > .columna-sesion-contexto {
    flex: 0 0 auto;
    width: 26%;
    min-width: 0;
}

.layout-sesion-trabajo > .columna-sesion-principal {
    flex: 0 0 auto;
    width: 50%;
    min-width: 0;
}

.layout-sesion-trabajo.notas-expandido > .columna-sesion-datos,
.layout-sesion-trabajo.notas-expandido > .columna-sesion-contexto {
    display: none;
}
.layout-sesion-trabajo.notas-expandido > .columna-sesion-principal {
    width: 100%;
}
.layout-sesion-trabajo.notas-expandido #notas-vista-pildoras-sesion {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.layout-sesion-trabajo.notas-expandido #notas-log-sesion {
    flex: 1 1 50%;
    min-width: 0;
}
.layout-sesion-trabajo.notas-expandido #notas-nueva-sesion {
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
}
.layout-sesion-trabajo.notas-expandido .log-pildoras-sesion {
    max-height: calc(80vh - 260px);
}
.layout-sesion-trabajo.notas-expandido .editor-nueva-nota .area-editor-enriquecido {
    max-height: calc(80vh - 240px);
}
.layout-sesion-trabajo.notas-expandido .area-notas-simple {
    max-height: calc(80vh - 360px);

}
.botonera-navegacion-sesion {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
@media (max-width: 1280px) {
    .layout-sesion-trabajo {
        flex-direction: column;
    }
    .layout-sesion-trabajo > .columna-sesion-datos,
    .layout-sesion-trabajo > .columna-sesion-contexto,
    .layout-sesion-trabajo > .columna-sesion-principal {
        width: 100%;
    }
}


/* -----------------------------------------------------------
   Ficha de sesión: cabecera con control de tiempo
   ----------------------------------------------------------- */
.cabecera-ficha-sesion {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.info-cabecera-sesion h1 {
    margin: 4px 0 0;
    font-size: 1.4rem;
}

.info-cabecera-sesion h1 a {
    color: var(--color-primario);
}

.control-tiempo-sesion {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 12px 20px;
    min-width: 320px;
    margin-left: auto;
}

.cronometro-sesion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.display-cronometro {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    width: 7ch;
    text-align: center;
    display: inline-block;
}

.display-cronometro.cronometro-excedido {
    color: var(--color-error);
}

.botonera-tiempo-sesion {
    display: flex;
    gap: 10px;
}

.botonera-tiempo-sesion form {
    margin: 0;
}

/* Badges de estado de sesión */
.badge-estado-sesion {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
}

.badge-estado-programada {
    background: var(--color-bordes);
    color: var(--color-texto-secundario);
}
.badge-estado-activa {
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
}
.badge-facturante-activo {
    border: 1px solid var(--color-secundario);
}
.badge-estado-potencial {
    background: var(--color-aviso-inseguro);
    color: var(--color-detalle-premium);
    border: 1px solid var(--color-detalle-premium);
}
.badge-facturante-preferente {
    border: 1px solid var(--color-secundario);
    color: var(--color-primario);
}
.badge-estado-en-incidencia {
    background: var(--color-aviso-inseguro);
    color: var(--color-aviso-texto);
}
.badge-estado-realizada {
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
}
.badge-estado-caso-preview {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--color-primario);
}
.badge-estado-cancelada {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-error-suave);
    color: var(--color-error);
    border:1px solid var(--color-error);
    margin-bottom: 2px;
    margin-left: 4px;
}
.badge-documento-reversa {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-detalle-premium);
    border:1px solid var(--color-detalle-premium);
    color: var(--color-blanco);
    margin-bottom: 2px;
    margin-left: 4px;
}
.fila-titulo-con-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom:8px
}
.fila-titulo-con-badges h3 {
    margin: 0;
}
/* -----------------------------------------------------------
   Listado lateral: todas las sesiones del caso
   ----------------------------------------------------------- */
.lista-todas-sesiones {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fila-sesion-lateral {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-fondo-alterno);
    text-decoration: none;
    color: var(--color-texto);
    transition: background-color 0.15s ease;
}

.fila-sesion-lateral:hover {
    background: var(--color-bordes);
    text-decoration: none;
}

.fila-sesion-lateral.fila-sesion-actual {
    background: var(--color-fondo-destacado);
    border-left: 3px solid var(--color-primario);
}

.fecha-sesion-lateral {
    font-family: var(--fuente-realce);
    font-size: 0.8rem;
    color: var(--color-primario);
}

.extracto-sesion-lateral {
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------
   Plan de acción
   ----------------------------------------------------------- */
.cabecera-plan-accion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-bordes);
}

.progreso-global-plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.barra-progreso-plan {
    width: 160px;
    height: 10px;
    background: var(--color-bordes);
    border-radius: 6px;
    overflow: hidden;
}
.barra-progreso-plan {
    width: 160px;
    height: 10px;
    background: var(--color-bordes);
    border-radius: 6px;
    overflow: hidden;
}

.layout-calendario {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .layout-calendario {
        grid-template-columns: 1fr;
    }
}
.cabecera-calendario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.fila-controles-calendario {
    display: flex;
    align-items: center;
    gap: 20px;
}
.grupo-nav-calendario {
    display: flex;
    align-items: center;
    gap: 6px;
}
.titulo-nav-calendario {
    margin: 0;
    min-width: 90px;
    text-align: center;
}
.formulario-ir-calendario {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
.formulario-ir-calendario .boton-ir-calendario {
    line-height: 1.4 !important;
    margin-bottom: 8px;
}
.separador-calendario {
    border: none;
    border-top: 1px solid var(--color-bordes);
    margin: 16px 0;
}
.grid-calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cabecera-dia-semana-calendario {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    padding-bottom: 4px;
}
.celda-dia-calendario {
    display: block;
    min-height: 76px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 6px 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
    padding-bottom: 19px;
}
.celda-dia-calendario:hover {
    border-color: var(--color-primario);
}
.celda-dia-calendario.celda-vacia {
    border: none;
    min-height: 76px;
}
.celda-dia-calendario.celda-dia-hoy {
    border-color: var(--color-primario);
    border-width: 2px;
}
.celda-dia-calendario.celda-dia-seleccionada {
    background: var(--color-fondo-alterno);
    border-color: var(--color-primario);
}
.celda-dia-calendario:nth-child(odd):not(.celda-vacia):not(.celda-dia-seleccionada) {
    background: var(--color-semiblanco);
}
.celda-dia-calendario:nth-child(even):not(.celda-vacia):not(.celda-dia-seleccionada) {
    background: var(--color-fondo-alterno);
}
.numero-dia-calendario {
    font-family: var(--fuente-realce);
    font-size: 0.9rem;
}
.iconos-dia-calendario {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
}
.iconos-dia-calendario-grandes {
    margin-top: 0;
    font-size: 1.1rem;
    gap: 12px;
}
.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 220px;
    padding: 12px 4px 0;
    border-bottom: 1px solid var(--color-bordes);
    min-width: 0;
}
.grafico-barras__columna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    flex: 1 1 0;
}
.grafico-barras__valor {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.grafico-barras__barra {
    width: 100%;
    max-width: 36px;
    background: var(--color-secundario);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}
.grafico-barras__etiqueta {
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.barra-ocupacion-dia {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 9px;
    background: var(--color-bordes);
    border: 1px solid var(--color-bordes);
    border-radius: 3px;
    overflow: hidden;
    box-sizing: border-box;
}
.segmento-ocupacion-dia {
    position: absolute;
    top: 0;
    height: 100%;
}
.segmento-ocupacion-reserva,
.segmento-ocupacion-sesion {
    top: 1.5px;
    height: 6px;
}
.segmento-ocupacion-horario-trabajo {
    background: var(--color-horario-trabajo-mini);
}
.segmento-ocupacion-reserva {
    background: var(--color-error);
}
.segmento-ocupacion-sesion {
    background: var(--color-secundario);
}
.relleno-progreso-plan {
    height: 100%;
    background: var(--color-secundario);
    border-radius: 6px;
    transition: width 0.2s ease;
}

.porcentaje-progreso-plan {
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    min-width: 38px;
    text-align: right;
}

/* Árbol de tareas */
.arbol-plan-accion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fila-tarea-plan {
    background: var(--color-fondo-alterno);
    border-radius: 6px;
    margin-bottom: 4px;
}

.grupo-tarea {
    margin: 4px 0;
}
.grupo-tarea.nivel-0 {
    border-left: 4px solid var(--color-primario);
    padding-left: 4px;
}
.grupo-tarea.nivel-1 {
    border-left: 4px solid var(--color-secundario);
    padding-left: 4px;
}
.grupo-tarea.nivel-2 {
    border-left: 4px solid var(--color-detalle-premium);
    padding-left: 4px;
}
.contenedor-hijos-tarea {
    margin-left: 20px;
}

.contenido-fila-tarea {
    display: flex;
    align-items: center;
}

.seccion-nombre-tarea {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
}

.fila-superior-nombre {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-inferior-nombre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.descripcion-tarea-plan {
    flex-shrink: 0;
}

.boton-indicador-notas {
    margin-left: auto;
    font-size: 1.2rem !important;
    line-height: 1;
    color: var(--color-texto-secundario);
}

.boton-indicador-notas.tiene-notas {
    border-color: var(--color-error);
    color: var(--color-error);
}

.boton-indicador-notas.tiene-notas:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}

.resumen-notas-tarea {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.seccion-nombre-tarea {
    flex: 1;
    min-width: 180px;
}

.seccion-progreso-tarea {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 390px;
    border-left: 1px solid var(--color-bordes);
    padding-left: 10px;
}

.seccion-acciones-tarea {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border-left: 1px solid var(--color-bordes);
    padding-left: 10px;
}

.acciones-fila-tarea {
    display: flex;
    align-items: center;
    gap: 4px;
}

.espacio-numerado-tarea {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.etiqueta-nivel-tarea {
    font-size: 0.68rem;
    font-family: var(--fuente-realce);
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--color-blanco);
    white-space: nowrap;
}

.fila-tarea-plan.nivel-0 .etiqueta-nivel-tarea {
    background: var(--color-primario);
}

.fila-tarea-plan.nivel-1 .etiqueta-nivel-tarea {
    background: var(--color-secundario);
}

.fila-tarea-plan.nivel-2 .etiqueta-nivel-tarea {
    background: var(--color-detalle-premium);
}

.descripcion-tarea-plan {
    flex: 1;
    min-width: 140px;
    font-size: 0.9rem;
    cursor: default;
}

.badge-estado-tarea {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
    min-width: 84px;
    text-align: center;
}

.badge-estado-no-iniciada {
    background: var(--color-bordes);
    color: var(--color-texto-secundario);
}

.badge-estado-en-curso {
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
}

.badge-estado-terminada {
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
}

.barra-progreso-fila {
    width: 240px;
}

.plan-externo-progreso-global {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-bordes);
}

.plan-externo-progreso-global-etiqueta {
    font-family: var(--fuente-realce);
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-externo-arbol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-externo-tarea {
    background: var(--color-fondo-alterno);
    border-radius: 6px;
    border-left: 4px solid var(--color-primario);
    padding: 6px 0 6px 10px;
}

.plan-externo-tarea.nivel-0 {
    padding-right: 6px;
}

.plan-externo-tarea.nivel-1 {
    border-left-color: var(--color-secundario);
}

.plan-externo-tarea.nivel-2 {
    border-left-color: var(--color-detalle-premium);
}

.plan-externo-cabecera-tarea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-externo-etiqueta-nivel {
    font-size: 0.68rem;
    font-family: var(--fuente-realce);
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--color-blanco);
    white-space: nowrap;
    background: var(--color-primario);
}

.plan-externo-tarea.nivel-1 .plan-externo-etiqueta-nivel {
    background: var(--color-secundario);
}

.plan-externo-tarea.nivel-2 .plan-externo-etiqueta-nivel {
    background: var(--color-detalle-premium);
}

.plan-externo-numero {
    font-family: var(--fuente-realce);
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
}

.plan-externo-descripcion {
    flex: 1 1 160px;
    font-size: 0.9rem;
}

.plan-externo-indicador-notas {
    font-size: 1rem;
    line-height: 1;
    color: var(--color-primario);
}

.plan-externo-tarea.nivel-1 .plan-externo-indicador-notas {
    color: var(--color-secundario);
}

.plan-externo-tarea.nivel-2 .plan-externo-indicador-notas {
    color: var(--color-detalle-premium);
}

.plan-externo-barra {
    width: 100px;
}

.plan-externo-notas {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-primario);
    border-radius: 6px;
    background: var(--color-fondo);
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}

.plan-externo-tarea.nivel-1 .plan-externo-notas {
    border-color: var(--color-secundario);
}

.plan-externo-tarea.nivel-2 .plan-externo-notas {
    border-color: var(--color-detalle-premium);
}

.plan-externo-notas-titulo {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-texto);
    white-space: nowrap;
}

.plan-externo-hijos {
    margin-left: 20px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acciones-fila-tarea {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.boton-icono {
    background: none;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--color-texto-secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    padding-top: 2px;
    box-sizing: border-box;
}

.boton-icono:hover {
    background: var(--color-bordes);
    color: var(--color-primario);
}
.boton-icono:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.boton-icono:disabled:hover {
    background: none;
    color: var(--color-texto-secundario);
}
.boton-ver-detalle-calendario {
    border-color: var(--color-secundario) !important;
    color: var(--color-secundario) !important;
}
.boton-ver-detalle-calendario:hover {
    background: var(--color-secundario) !important;
    color: var(--color-blanco) !important;
}
.grupo-acciones-calendario-compacto {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
/* Editores emergentes (descripción, progreso, nueva subtarea) */
.form-nueva-subtarea {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 3px 0;
    flex-wrap: wrap;
    background: var(--color-fondo-alterno);
    border-top: 1px dashed var(--color-bordes);
    border-bottom: 1px dashed var(--color-bordes);
}

.slider-avance-tarea {
    width: 100px;
}

.valor-slider-avance {
    font-family: var(--fuente-realce);
    font-size: 0.8rem;
    min-width: 32px;
    color: var(--color-texto-secundario);
}

.contenedor-progreso-tarea {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 28px;
}
.campo-editar-descripcion,
.campo-nueva-subtarea {
    flex: 1;
    min-width: 160px;
    padding: 6px 10px;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    font-family: var(--fuente-texto);
    font-size: 0.88rem;
}

.form-nueva-subtarea.nivel-1 {
    margin-left: 32px;
    border-radius: 8px;
}

.form-nueva-subtarea.nivel-2 {
    margin-left: 64px;
    border-radius: 8px;
}

.form-nueva-tarea-raiz {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-nueva-tarea-raiz input[type="text"] {
    flex: 1;
    min-width: 220px;
    margin-bottom: 0;
}

.lista-resumen-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.fila-resumen-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--color-fondo-alterno);
    border-radius: 6px;
}

.descripcion-resumen-plan {
    flex: 1;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contenedor-confirmar-eliminar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.contenedor-confirmar-eliminar .fila-botones-confirmar {
    display: flex;
    gap: 8px;
}
.texto-confirmacion-inline {
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    white-space: nowrap;
}
.boton-icono-confirmar {
    border-color: var(--color-exito);
    color: var(--color-exito);
}

.boton-icono-confirmar:hover {
    background: var(--color-exito);
    color: var(--color-blanco);
}

.boton-icono-cancelar {
    border-color: var(--color-error);
    color: var(--color-error);
}

.boton-icono-cancelar:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}
.boton-icono-pequeno {
    width: 16px;
    height: 16px;
    font-size: 0.65rem;
    border-radius: 4px;
}
.grupo-confirmar-accion-pequeno {
    gap: 2px;
    padding: 1px;
}
.icono-periodico-bloque-franja {
    font-size: 0.75rem;
}
.fila-recordatorio-calendario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

@keyframes destello-recordatorio {
    0%, 30% {
        background-color: var(--color-aviso-inseguro);
    }
}
.fila-recordatorio-destello {
    animation: destello-recordatorio 0.7s ease-out 4;
}
.marca-recordatorio-franja {
    position: absolute;
    left: 0;
    right: 8px;
    height: 0;
    z-index: 2;
    pointer-events: none;
}
.marca-recordatorio-franja::before {
    content: '';
    position: absolute;
    left: 38px;
    right: 0;
    top: 0;
    border-top: 1px dashed var(--color-aviso-texto);
}
.boton-campanita-recordatorio-franja {
    position: absolute;
    top: 0;
    left: calc(34px + var(--columna-recordatorio, 0) * 20px);
    padding: 0 3px;
    font-size: 0.65rem;
    line-height: 1.3;
    background: var(--color-blanco);
    border: 1px solid var(--color-aviso-texto);
    border-radius: 10px;
    cursor: pointer;
    pointer-events: auto;
}
.fila-pago-calendario {
    border-left-color: var(--color-detalle-premium);
}
.grupo-confirmar-accion {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border-radius: 8px;
}
.grupo-confirmar-eliminar {
    border: 1px solid var(--color-error);
}
.grupo-confirmar-publicar {
    border: 1px solid var(--color-detalle-premium);
}
.boton-editar-pildora {
    border-color: var(--color-primario);
    color: var(--color-primario);
}
.boton-editar-pildora:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
}
.boton-eliminar-pildora {
    border-color: var(--color-error);
    color: var(--color-error);
}
.boton-eliminar-pildora:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}
.panel-desplegable-tarea {
    display: none;
    padding: 12px 16px;
    background: var(--color-fondo-alterno);
    border-top: 1px dashed var(--color-bordes);
}

.panel-desplegable-tarea.abierto {
    display: block;
}

.panel-notas-tarea,
.panel-avance-tarea {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}

.panel-notas-tarea label,
.panel-avance-tarea label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    font-family: var(--fuente-realce);
    margin-bottom: 6px;
}

.fila-slider-avance,
.fila-notas-tarea {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fila-notas-tarea .campo-notas-tarea {
    flex: 1;
    min-height: 60px;
    margin-bottom: 0;
}

.slider-avance-contenedor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.panel-notas-tarea label,
.panel-avance-tarea label {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    font-family: var(--fuente-realce);
}

.campo-notas-tarea {
    min-height: 80px;
    margin-bottom: 0;
}

.slider-avance-contenedor {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slider-avance-tarea {
    width: 100%;
    accent-color: var(--color-secundario);
}

.marcas-slider-avance {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--color-texto-secundario);
    padding: 0 2px;
}

.valor-slider-avance {
    font-family: var(--fuente-realce);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secundario);
    align-self: center;
}

.botonera-panel-desplegable {
    display: flex;
    gap: 8px;
}
.boton-privado-activo {
    border-color: var(--color-detalle-premium);
    color: var(--color-detalle-premium);
}

.boton-privado-activo:hover {
    background: var(--color-detalle-premium);
    color: var(--color-blanco);
}

.boton-visible-activo {
    border-color: var(--color-secundario);
    color: var(--color-secundario);
}

.boton-visible-activo:hover {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.boton-iniciar-color {
    border-color: var(--color-secundario);
    color: var(--color-secundario);
}

.boton-iniciar-color:hover {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.boton-numerado-activo {
    border-color: var(--color-error);
    color: var(--color-error);
}

.boton-numerado-activo:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}

.acciones-cabecera-plan {
    display: flex;
    gap: 8px;
}

.pie-plan-accion {
    display: flex;
    align-items: center;
    gap: 10px;
}

.botonera-preview-caso {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.botonera-preview-caso .boton-secundario,
.botonera-preview-caso .boton-primario,
.botonera-preview-caso .badge-sin-plan-accion {
    width: auto;
    flex: 0 0 auto;
}

.badge-sin-plan-accion {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid var(--color-texto-secundario);
    color: var(--color-texto-secundario);
    background: var(--color-aviso-inseguro);
    white-space: nowrap;
}
.boton-secundario.boton-deshabilitado {
    background: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
    border-color: var(--color-bordes);
    cursor: default;
    pointer-events: none;
}
.badge-tipificacion-preview {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-detalle-premium);
    color: var(--color-blanco);
    margin-bottom: 4px;
}

.texto-estado-preview {
    margin-top: 0;
}

.badge-estado-caso-arbol {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-bordes);
    margin-bottom: 4px;
}

.mini-calendario-caso {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mini-calendario-cuerpo {
    flex: 1 1 0;
    min-width: 240px;
}

.mini-calendario-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}

.mini-calendario-titulo {
    flex: 1;
    text-align: center;
    font-family: var(--fuente-realce);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primario);
    text-transform: capitalize;
}

.mini-calendario-boton-nav {
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--color-texto);
}

.mini-calendario-boton-nav:hover {
    background: var(--color-bordes);
}

.mini-calendario-boton-hoy {
    width: auto;
    padding: 0 10px;
    font-size: 0.72rem;
    font-family: var(--fuente-realce);
}

.mini-calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.mini-calendario-cabecera-dia {
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
    font-weight: 600;
    padding: 2px 0;
}

.mini-calendario-celda {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-texto);
    padding: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mini-calendario-celda:disabled {
    color: var(--color-texto-secundario);
    cursor: default;
}

.mini-calendario-celda-vacia {
    visibility: hidden;
    border: none;
}

.mini-calendario-celda-hoy {
    position: relative;
}

.mini-calendario-celda-hoy:not(.mini-calendario-celda-con-sesion):not(.mini-calendario-celda-otro-caso) {
    background: var(--color-horario-trabajo-fondo);
    border-color: var(--color-primario);
    border-width: 2px;
}

.mini-calendario-celda-hoy::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--color-primario);
    border-radius: 6px;
    pointer-events: none;
}

.mini-calendario-celda-con-sesion {
    background: var(--color-fondo-destacado);
    border-color: var(--color-secundario);
    color: var(--color-exito-texto);
    font-weight: 600;
    cursor: pointer;
}

.mini-calendario-celda-con-sesion:hover {
    background: var(--color-fondo-destacado-strong);
    border-color: var(--color-secundario-hover);
}

.mini-calendario-celda-otro-caso {
    background: var(--color-aviso-inseguro);
    border-color: var(--color-aviso);
    color: var(--color-aviso-texto);
    font-weight: 600;
    cursor: pointer;
}

.mini-calendario-celda-otro-caso:hover {
    background: var(--color-aviso);
    color: var(--color-blanco);
}

.mini-calendario-celda-seleccionada {
    outline: 2px solid var(--color-primario);
    outline-offset: -1px;
}

.mini-calendario-detalle-dia {
    flex: 1 1 0;
    min-width: 200px;
    align-self: flex-start;
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 14px;
    background: var(--color-fondo-alterno);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-calendario-detalle-titulo {
    font-family: var(--fuente-realce);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.mini-calendario-fila-detalle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 8px 10px;
}

.mini-calendario-hora-detalle {
    font-weight: 600;
    min-width: 42px;
}

.mini-calendario-etiqueta-otro-caso {
    font-size: 0.68rem;
    font-family: inherit;
    color: var(--color-aviso-texto);
    background: var(--color-aviso-inseguro);
    border: 1px solid var(--color-aviso);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
    cursor: pointer;
}

.mini-calendario-etiqueta-otro-caso:hover {
    background: var(--color-aviso);
    color: var(--color-blanco);
}

.mini-calendario-duracion-detalle {
    color: var(--color-texto-secundario);
    margin-left: auto;
}

.arbol-casos-consulta-externa {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rama-arbol {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    overflow: hidden;
}

.rama-arbol__cabecera {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-fondo-alterno);
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-texto);
    transition: background 0.15s ease;
}

.rama-arbol:hover > .rama-arbol__cabecera,
.rama-arbol.abierto > .rama-arbol__cabecera {
    background: var(--color-bordes);
}

.rama-arbol__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
}

.rama-arbol__indicador {
    flex: 0 0 auto;
    font-size: 1.8rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.rama-arbol.abierto > .rama-arbol__cabecera .rama-arbol__indicador {
    transform: rotate(90deg);
}

.rama-arbol__contenido {
    display: none;
    padding: 14px;
    border-top: 1px solid var(--color-bordes);
    background: var(--color-fondo);
}

.rama-arbol.abierto > .rama-arbol__contenido {
    display: block;
}

.badge-avance-plan {
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
    font-family: var(--fuente-realce);
    font-weight: 600;
}

.form-campana-linea {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.form-campana-linea .campo-campana-nombre {
    flex: 1;
}

.form-campana-linea .campo-campana-dias {
    flex: 0 0 120px;
}

.form-campana-linea .campo-campana-boton {
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 16px
}

.form-campana-linea label {
    margin-bottom: 6px;
    display: block;
}

.label-espaciador {
    visibility: hidden;
}

.form-campana-linea input {
    margin-bottom: 0;
}
.tabla-campanas th:nth-child(1),
.tabla-campanas td:nth-child(1) {
    width: 32%;
}

.tabla-campanas th:nth-child(2),
.tabla-campanas td:nth-child(2) {
    width: 8%;
}

.tabla-campanas th:nth-child(3),
.tabla-campanas td:nth-child(3) {
    width: 10%;
}

.tabla-campanas th:nth-child(4),
.tabla-campanas td:nth-child(4) {
    width: 10%;
}

.tabla-campanas th:nth-child(5),
.tabla-campanas td:nth-child(5) {
    width: 10%;
}
.tabla-campanas th:nth-child(6),
.tabla-campanas td:nth-child(6) {
    width: 30%;
}
.boton-icono-dummy {
    display: inline-block;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-detalle-premium);
    color: var(--color-semiblanco);
    border: 1px solid var(--color-detalle-premium);
    cursor: default;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}
.cabecera-con-accion {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
#contenedor-confirmar-renovar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#contenedor-confirmar-caducidad {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#contenedor-confirmar-caducidad .fila-botones-confirmar {
    display: flex;
    gap: 8px;
}

.info-incidencia-sesion {
    background: var(--color-fondo-tarjeta-alterna, rgba(0,0,0,0.03));
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.85rem;
}
.info-incidencia-sesion p {
    margin: 4px 0;
}
.lista-historial-sesion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fila-historial-sesion {
    font-size: 0.8rem;
    border-left: 2px solid var(--color-bordes);
    padding-left: 10px;
}
.fecha-historial-sesion {
    color: var(--color-texto-secundario);
    margin-right: 8px;
}
.tipo-historial-sesion {
    font-weight: 600;
    display: block;
}
.detalle-historial-sesion {
    display: block;
    color: var(--color-texto-secundario);
    margin-top: 2px;
}

#lista-registro-sistema {
    max-height: 40vh;
    overflow-y: auto;
}
.lista-registro-sistema {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fila-registro-sistema {
    font-size: 0.8rem;
    border-left: 2px solid var(--color-primario);
    padding-left: 10px;
}
.fecha-registro-sistema {
    color: var(--color-texto-secundario);
}
.descripcion-registro-sistema {
    font-weight: 600;
}

.badge-borde-incidencia {
    border: 1px solid var(--color-detalle-premium);
}
.badge-borde-pausada {
    border: 1px solid var(--color-aviso);
}
.texto-no-eliminar-sesion {
    font-size: 0.75rem;
}
.acordeon-botonera-derecha {
    margin-left: auto;
}
.boton-fila-acordeon {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: var(--fuente-realce);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-fondo);
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.boton-fila-acordeon:hover {
    background: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: var(--color-fondo);
}
.boton-fila-acordeon-peligro {
    color: var(--color-error);
    border-color: var(--color-error);
}
.boton-fila-acordeon-peligro:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-fondo);
}
/* Acción potenciada: destaca la acción por defecto del flujo de
   trabajo lógico de la pantalla frente a las acciones auxiliares
   del mismo acordeón (mismo patrón azul/verde que .boton-primario) */
.boton-fila-acordeon-potenciada {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}
.boton-fila-acordeon-potenciada:hover {
    background: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: var(--color-blanco);
}
.hora-sesion-destacada {
    color: var(--color-primario);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tabla-impacientes td.col-impaciente-fecha-alta {
    text-align: right;
    padding-right: 6px;
}
.tabla-impacientes td:not(.col-impaciente-fecha-alta) {
    padding-left: 6px;
}
.campo-con-boton-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}
.campo-con-boton-inline input[type="time"] {
    flex: 1;
}
.campo-con-boton-inline #boton-hora-ahora {
    margin-bottom: 16px;
}
.boton-pausar-sesion:hover {
    background: var(--color-detalle-premium);
    border-color: var(--color-detalle-premium);
    color: var(--color-blanco);
}
.boton-finalizar-sesion:hover {
    background: var(--color-error);
    opacity: 1;
}
.boton-ir-sesion-linea {
    padding: 12px 18px;
    border: 1px solid var(--color-primario);
    box-sizing: border-box;
}
.tabla-sesiones {
    table-layout: fixed;
}
.tabla-sesiones .col-sesion-fecha {
    width: 15%;
    font-variant-numeric: tabular-nums;
    padding-left:6px;
}
.tabla-sesiones .col-sesion-impaciente {
    width: 18%;
}
.tabla-sesiones .col-sesion-caso {
    width: 30%;
}
.tabla-sesiones .col-sesion-estado {
    width: 20%;
}
.tabla-sesiones .col-sesion-medio {
    width: 17%;
}

.editor-enriquecido {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}
.area-editor-enriquecido {
    padding: 10px 12px;
    max-height: 22vh;
    min-height: 12vh;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    background: var(--color-fondo);
}
.barra-editor-enriquecido {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--color-fondo-alterno);
    border-bottom: 1px solid var(--color-bordes);
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}
.popover-enlace-editor {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-width: 240px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.popover-tabla-editor {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-width: 220px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.fila-campo-tabla-editor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fila-campo-tabla-editor input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    font-size: 0.82rem;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
}
.botonera-popover-tabla-editor {
    display: flex;
    justify-content: flex-end;
}
.contenedor-tabla-editor {
    overflow-x: auto;
    max-width: 100%;
}
.tabla-editor-enriquecido {
    border-collapse: collapse;
    min-width: 100%;
}
.tabla-editor-enriquecido td {
    border: 1px solid var(--color-bordes);
    padding: 6px 8px;
    min-width: 60px;
    vertical-align: top;
}
.campo-url-enlace-editor {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.82rem;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    box-sizing: border-box;
}
.fila-destino-enlace-editor {
    display: flex;
    gap: 14px;
}
.opcion-exclusiva-pequena {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
}
.botonera-popover-enlace-editor {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.icono-color-texto-boton {
    display: inline-block;
    font-weight: bold;
    border-bottom: 3px solid #C84B4B;
    line-height: 1;
    padding-bottom: 1px;
}
.popover-color-texto-editor {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: 200px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.titulo-grupo-swatches-color-editor {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}
.fila-swatches-color-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.swatch-color-editor {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--color-bordes);
    cursor: pointer;
    padding: 0;
}
.swatch-color-editor:hover {
    border-color: var(--color-primario);
}
.boton-editor.boton-editor-titulo {
    width: auto;
    padding: 0 8px;
    font-size: 0.72rem;
}
.boton-editor {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-texto);
}
.boton-editor:hover {
    background: var(--color-bordes);
}
.separador-editor {
    width: 1px;
    height: 20px;
    background: var(--color-bordes);
    margin: 0 4px;
}

.contenido-pildora div,
.contenido-pildora p,
.area-editor-enriquecido div,
.area-editor-enriquecido p {
    margin: 6px 0;
}
.area-editor-enriquecido ul,
.area-editor-enriquecido ol,
.contenido-pildora ul,
.contenido-pildora ol {
    margin: 2px 0 2px 20px;
}
.area-editor-enriquecido li,
.contenido-pildora li {
    margin: 0;
}
.nota-titulo-1 {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 8px 0 6px;
}
.nota-titulo-2 {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secundario);
    margin: 6px 0 4px;
}
.nota-titulo-3 {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-detalle-premium);
    margin: 5px 0 3px;
}

.cabecera-notas-sesion {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.grupo-cabecera-notas-derecha {
    display: flex;
    align-items: center;
    gap: 14px;
}
.boton-expandir-notas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
}
.icono-expandir {
    font-size: 0.9rem;
    line-height: 1;
}
.interruptor-modo-notas-etiqueta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
}
.texto-modo-notas {
    transition: color 0.15s ease, font-weight 0.15s ease;
}
.fila-aviso-personal-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.texto-publicar-aviso-personal {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-texto);
}
.interruptor-deslizante {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
}
.interruptor-deslizante input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.interruptor-deslizante-pista {
    position: absolute;
    inset: 0;
    background: var(--color-bordes);
    border-radius: 999px;
    transition: background-color 0.15s ease;
}
.interruptor-deslizante-bola {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-fondo);
    border-radius: 50%;
    transition: transform 0.15s ease;
}
.interruptor-deslizante input:checked + .interruptor-deslizante-pista {
    background: var(--color-secundario);
}
.interruptor-deslizante input:checked + .interruptor-deslizante-pista .interruptor-deslizante-bola {
    transform: translateX(16px);
}
.interruptor-deslizante input:checked ~ .texto-modo-notas:last-child {
    color: var(--color-primario);
    font-weight: 600;
}
.interruptor-deslizante:has(input:not(:checked)) ~ .texto-modo-notas:first-of-type {
    color: var(--color-primario);
    font-weight: 600;
}

/* Interruptor de “mostrar pagos” en Mi página pública */
.tarjeta-opcion-landing-pagos {
    margin-bottom: 16px;
}
.fila-opcion-landing-pagos {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.etiqueta-toggle-pagos-landing {
    font-size: 0.9rem;
    color: var(--color-texto);
    gap: 10px;
}
.etiqueta-toggle-pagos-landing .interruptor-deslizante {
    margin-left: 4px;
}

.subtarjeta-colores-custom {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-bordes);
}
.subtarjeta-contactos-landing {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-bordes);
}
.subtarjeta-contactos-landing h3 {
    margin: 0 0 4px;
}
.fila-contactos-landing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.campo-contacto-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.campo-contacto-landing label {
    font-size: 0.82rem;
    font-family: var(--fuente-realce);
}
.campo-contacto-landing input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    text-align: center;
    box-sizing: border-box;
}
.icono-campo-contacto-landing {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primario);
}
.icono-campo-contacto-landing svg {
    width: 22px;
    height: 22px;
}
.icono-campo-contacto-landing .icono-linkedin-contacto-landing {
    font-weight: bold;
    font-size: 0.9rem;
}

.widget-contacto-landing {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
}
.boton-contacto-landing {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-contacto-landing, var(--color-primario));
    color: var(--color-contacto-landing, var(--color-primario));
    background: var(--fondo-contacto-landing, #FFFFFF);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.boton-contacto-landing:hover {
    background: var(--color-contacto-landing, var(--color-primario));
    color: var(--fondo-contacto-landing, #FFFFFF);
}
.boton-contacto-landing svg {
    width: 20px;
    height: 20px;
}
.boton-contacto-landing .uatels_icon_device_telephone,
.boton-contacto-landing .uatels_icon_analysis_email {
    font-size: 1.1rem;
}
.icono-linkedin-contacto-landing {
    font-weight: bold;
    font-size: 0.95rem;
    font-family: var(--fuente-realce);
}
.subtarjeta-colores-custom h3 {
    margin: 0 0 4px;
}
.rejilla-colores-custom {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.fila-color-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
}
.fila-color-custom label {
    font-size: 0.82rem;
    font-family: var(--fuente-realce);
}
.envoltorio-disparador-color-custom {
    position: relative;
}
.color-custom-disparador {
    width: 56px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--color-bordes);
    cursor: pointer;
    padding: 0;
}
.color-custom-disparador:hover {
    border-color: var(--color-primario);
}
.boton-revertir-color-custom {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 0;
}
.boton-revertir-color-custom:hover {
    filter: brightness(0.9);
}
.color-custom-hex8 {
    font-size: 0.68rem;
    color: var(--color-texto-secundario);
    letter-spacing: 0.02em;
}
.popover-color-custom {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-width: 180px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.popover-color-custom .color-custom-swatch {
    width: 100%;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    cursor: pointer;
    background: none;
}
.popover-color-custom .color-custom-hex {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.78rem;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    text-transform: uppercase;
    box-sizing: border-box;
    text-align: center;
}
.fila-alfa-color-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.color-custom-alfa {
    flex: 1;
    min-width: 0;
}
.color-custom-alfa-numero {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    min-width: 32px;
    text-align: right;
}
.fila-aceptar-color-custom {
    display: flex;
    justify-content: center;
}

.log-pildoras-contenedor {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pildora-nota {
    border-left: 4px solid var(--color-bordes);
    background: var(--color-fondo-alterno);
    border-radius: 0 8px 8px 0;
    padding: 4px 8px;
}
.pildora-estado-publica {
    border-left-color: var(--color-secundario);
    background: var(--color-fondo-destacado);
}
.pildora-estado-retirada {
    border-left-color: var(--color-detalle-premium);

}
.acciones-fila-pildora {
    display: flex;
    align-items: center;
    gap: 4px;
}
.badge-estado-pildora {
    display: inline-block;
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-secundario);
    margin-left: 4px;
}
.badge-estado-pildora-publica {
    border-color: var(--color-secundario);
    color: var(--color-secundario);
}
.badge-estado-pildora-retirada {
    border-color: var(--color-detalle-premium);
    color: var(--color-detalle-premium);
}
.fecha-pildora.badge-estado-pildora-publica {
    border-color: var(--color-secundario);
    color: var(--color-secundario);
}
.fecha-pildora.badge-estado-pildora-retirada {
    border-color: var(--color-detalle-premium);
    color: var(--color-detalle-premium);
}
.boton-reset-privada-pildora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-error);
    color: var(--color-error);
    background: none;
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 2px;
    padding: 0;
}
.boton-reset-privada-pildora:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}
.grupo-confirmar-mini {
    display: inline-flex;
    gap: 2px;
    padding: 1px;
    border-radius: 6px;
    border: 1px solid var(--color-detalle-premium);
    margin-left: 2px;
}
.boton-mini-confirmar,
.boton-mini-cancelar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    background: none;
}
.boton-mini-confirmar {
    color: var(--color-secundario);
}
.boton-mini-confirmar:hover {
    background: var(--color-secundario);
    color: var(--color-blanco);
}
.boton-mini-cancelar {
    color: var(--color-error);
}
.boton-mini-cancelar:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}
.area-editor-enriquecido:empty:before {
    content: attr(data-placeholder);
    color: var(--color-texto-secundario);
    pointer-events: none;
}
.cabecera-pildora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.78rem;
}
.fecha-pildora {
    display: inline-block;
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-secundario);
}
.contenido-pildora {
    cursor: text;
    font-size: 0.9rem;
}
.pildora-en-edicion .contenido-pildora {
    cursor: default;
}
.pildora-nota.pildora-en-edicion {
    background: var(--color-aviso-inseguro);
}
.pildora-nota.pildora-en-edicion .area-editor-enriquecido {
    background: var(--color-fondo);
}
.preview-campo-nota .pildora-preview {
    border-left: 4px solid var(--color-bordes);
    background: var(--color-fondo-alterno);
    border-radius: 0 8px 8px 0;
    padding: 4px 8px;
}
.preview-campo-nota .pildora-estado-publica {
    border-left-color: var(--color-secundario);
    background: var(--color-fondo-destacado);
}
.preview-campo-nota .pildora-estado-retirada {
    border-left-color: var(--color-detalle-premium);
    background: var(--color-fondo);
}
.texto-preview-pildora {
    font-size: 0.85rem;
    margin-top: 4px;
}
.boton-editor-activo {
    background: var(--color-secundario);
    color: var(--color-blanco);
}

.tarjeta-notas-sesion-unica {
    display: flex;
    flex-direction: column;
}
.log-pildoras-sesion {
    max-height: 22vh;
    overflow-y: auto;
}
.editor-nueva-nota .area-editor-enriquecido {
    max-height: 22vh;
    overflow-y: auto;
}
.area-notas-simple {
    max-height: 22vh;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}
.separador-pildora-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    user-select: none;
}
.boton-eliminar-separador-simple {
    border: 1px solid var(--color-error);
    color: var(--color-error);
    background: none;
    border-radius: 6px;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.boton-eliminar-separador-simple:hover {
    background: var(--color-error);
    color: var(--color-blanco);
}
.botonera-edicion-pildora {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.botonera-edicion-pildora .boton-secundario,
.botonera-edicion-pildora .boton-primario {
    padding: 8px 16px;
    font-size: 0.8rem;
}
.linea-separador-simple {
    width: 80px;
    flex: 0 0 auto;
    border: none;
    border-top: 1px solid var(--color-bordes);
    margin: 0;
}

.modal-cabecera .interruptor-modo-notas-etiqueta {
    margin-right: auto;
    margin-left: 16px;
}

.tarjeta-campo-nota-caso {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 10px 12px;
    background: none;
}
.tarjeta-campo-nota-impaciente {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 10px 12px;
    background: none;
}
.tarjeta-campo-nota-impaciente .boton-ver-historial-nota {
    margin-top: 16px;
}
.tarjeta-campo-nota-prescriptor {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--color-fondo);
}
.tarjeta-campo-nota-prescriptor .boton-ver-historial-nota {
    margin-top: 16px;
}
.tarjeta-campo-nota-solicitud {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 10px 12px;
    background: none;
}
.tarjeta-campo-nota-solicitud .boton-ver-historial-nota {
    margin-top: 16px;
}
.confirmacion-estado-ficha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
#modal-convertir-solicitud .modal-contenido {
    max-width: 490px;
}
.texto-nombre-convertir {
    text-align: center;
    color: var(--color-detalle-premium);
    margin: 0 0 16px;
}

.texto-pequeno-nota {
    font-size: 0.78rem;
}
.preview-campo-nota {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.preview-campo-nota-lista {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tarjeta-campo-nota-caso .preview-campo-nota-lista {
    max-height: 160px;
}
.contenido-acordeon-campo .preview-campo-nota-lista {
    max-height: 220px;
}
.tarjeta-campo-nota-caso .boton-ver-historial-nota {
    margin-top: 16px;
}
.modal-notas-campo-contenido {
    display: flex;
    flex-direction: column;
}
.modal-notas-campo-log {
    flex: 0 0 auto;
    max-height: 42vh;
    overflow-y: auto;
}
#modal-notas-campo .modal-contenido {
    max-width: 1100px;
    width: 92vw;
    max-height: 90vh;
}
#notas-vista-pildoras-campo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
#notas-vista-pildoras-campo .log-pildoras-contenedor {
    flex: 1 1 50%;
    min-width: 0;
}
#notas-vista-pildoras-campo #notas-nueva-campo {
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
}
#notas-nueva-campo .botonera-derecha {
    gap: 10px;
}
#notas-log-campo {
    max-height: 55vh;
    min-height: 12vh
}
#notas-area-simple-campo {
    max-height: 55vh;
    min-height: 12vh
}
/* -----------------------------------------------------------
   Casos: layout maestro-detalle (dedicado a esta pantalla)
   ----------------------------------------------------------- */
.layout-casos {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.layout-casos-columna-lista {
    flex: 1 1 65%;
    min-width: 0;
}
.layout-casos-columna-preview {
    flex: 1 1 35%;
    max-width: 444px;
    position: sticky;
    top: 20px;
}
@media (max-width: 1024px) {
    .layout-casos {
        flex-direction: column;
    }
    .layout-casos-columna-preview {
        max-width: 100%;
        position: static;
    }
}

/* -----------------------------------------------------------
   Sesiones: layout maestro-detalle (dedicado a esta pantalla)
   ----------------------------------------------------------- */
.layout-sesiones {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.layout-sesiones-columna-lista {
    flex: 1 1 55%;
    min-width: 0;
}
.layout-sesiones-columna-preview {
    flex: 1 1 45%;
    max-width: 444px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-sesiones {
        flex-direction: column;
    }
    .layout-sesiones-columna-preview {
        max-width: 100%;
        position: static;
    }
}

/* -----------------------------------------------------------
   Prescriptores: layout maestro-detalle (dedicado a esta pantalla)
   ----------------------------------------------------------- */
.layout-prescriptores {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.layout-prescriptores-columna-lista {
    flex: 1 1 55%;
    min-width: 0;
}
.layout-prescriptores-columna-preview {
    flex: 1 1 45%;
    max-width: 570px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-prescriptores {
        flex-direction: column;
    }
    .layout-prescriptores-columna-preview {
        max-width: 100%;
        position: static;
    }
}

/* -----------------------------------------------------------
   Suscriptores: layout maestro-detalle (dedicado a esta pantalla)
   ----------------------------------------------------------- */
.layout-suscriptores {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.layout-suscriptores-columna-lista {
    flex: 1 1 55%;
    min-width: 0;
}
.layout-suscriptores-columna-preview {
    flex: 1 1 45%;
    max-width: 570px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-suscriptores {
        flex-direction: column;
    }
    .layout-suscriptores-columna-preview {
        max-width: 100%;
        position: static;
    }
}

/* -----------------------------------------------------------
   Pagos: layout maestro-detalle (dedicado a esta pantalla)
   ----------------------------------------------------------- */
.layout-pagos {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.layout-pagos-columna-lista {
    flex: 1 1 75%;
    min-width: 0;
}
.layout-pagos-columna-preview {
    flex: 1 1 25%;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
@media (max-width: 1024px) {
    .layout-pagos {
        flex-direction: column;
    }
    .layout-pagos-columna-preview {
        max-width: 100%;
        position: static;
    }
}
.tabla-pagos th:nth-child(1) { width: 16%; }
.tabla-pagos th:nth-child(2) { width: 15%; }
.tabla-pagos th:nth-child(3) { width: 22%; }
.tabla-pagos th:nth-child(4) { width: 32%; }
.tabla-pagos th:nth-child(5) { width: 10%; }
.tabla-pagos th:nth-child(6) { width: 8%; }


.tabla-pagos td:nth-child(1) {
    padding-left: 6px;
    font-variant-numeric: tabular-nums;
}
.tabla-pagos td:nth-child(2) {
    font-variant-numeric: tabular-nums;
}
.tabla-pagos td:nth-child(5) {
    text-align: right;
}
.tabla-pagos td:nth-child(6) {
    padding-left: 4px;
}
.badge-pago-pendiente,
.badge-pago-pagado,
.badge-pago-cancelado {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
    border: 1px solid transparent;
}
.badge-pago-pendiente {
    background: var(--color-aviso-inseguro);
    color: var(--color-texto);
    border-color: var(--color-aviso-texto);
}
.badge-pago-pagado {
    background: var(--color-fondo-destacado);
    color: var(--color-secundario);
    border-color: var(--color-secundario);
}
.badge-pago-cancelado {
    background: var(--color-error-suave);
    color: var(--color-error);
    border-color: var(--color-error);
}
.badge-movimiento-cargo,
.badge-movimiento-ajuste,
.badge-movimiento-abono {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: var(--fuente-realce);
    background: var(--color-fondo-alterno);
    border: 1px solid;
}
.badge-movimiento-cargo {
    color: var(--color-error);
    border-color: var(--color-error);
}
.badge-movimiento-ajuste {
    color: var(--color-detalle-premium);
    border-color: var(--color-detalle-premium);
}
.badge-movimiento-abono {
    color: var(--color-secundario);
    border-color: var(--color-secundario);
}
.dato-saldo {
    font-family: var(--fuente-realce);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.dato-saldo-positivo {
    color: var(--color-exito);
}
.dato-saldo-negativo {
    color: var(--color-error);
}
.dato-saldo-neutro {
    color: var(--color-texto-secundario);
}
.campo-impaciente-seleccionado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-fondo-alterno);
    border-radius: 8px;
    margin-bottom: 16px;
}

.badge-cierre-economico-pendiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    border-radius: 36px;
    background: var(--color-error-suave);
    color: var(--color-detalle-premium);
    border: 1px solid var(--color-detalle-premium);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--fuente-realce);
    white-space: nowrap;
    margin:auto;
}
#modal-consultar-cierre label {
    display: block;
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    margin-bottom: 6px;
}
.aviso-exceso-duracion {
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-detalle-premium);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.aviso-exceso-duracion.aviso-en-plazo {
    border-color: var(--color-exito);
}
.layout-cierre-economico {
    display: flex;
    gap: 36px;
    align-items: center;
}
.columna-opciones-cierre {
    flex: 0 0 44%;
}
.columna-campos-cierre {
    flex: 1 1 56%;
    min-width: 0;
    position: relative;
    padding-left: 24px;
}
.columna-campos-cierre::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--color-bordes);
}
.grupo-opciones-exclusivas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grupo-idiomas-preferidos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 8px 0 4px;
}
.grupo-idiomas-preferidos .opcion-exclusiva {
    width: auto;
    min-width: 120px;
    justify-content: center;
    position: relative;
}
.grupo-idiomas-preferidos .opcion-exclusiva input[type="radio"],
.grupo-opciones-exclusivas-horizontal .opcion-exclusiva input[type="radio"],
.grupo-opciones-exclusivas .opcion-exclusiva input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.opcion-exclusiva {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.opcion-exclusiva:hover {
    border-color: var(--color-primario);
    background: var(--color-lista-hover);
}
.opcion-exclusiva.activa {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-blanco);
}
.opcion-exclusiva.activa:hover {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
}

.grupo-idiomas-preferidos,
.grupo-opciones-exclusivas-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.grupo-idiomas-preferidos .opcion-exclusiva,
.grupo-opciones-exclusivas-horizontal .opcion-exclusiva {
    width: auto;
}
.grupo-idiomas-preferidos .opcion-exclusiva:has(input:checked),
.grupo-opciones-exclusivas-horizontal .opcion-exclusiva:has(input:checked) {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-blanco);
}
.grupo-idiomas-preferidos .opcion-exclusiva:has(input:checked):hover,
.grupo-opciones-exclusivas-horizontal .opcion-exclusiva:has(input:checked):hover {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
}
.grupo-idiomas-preferidos .opcion-exclusiva:has(input:checked) .punto-opcion-exclusiva::after,
.grupo-opciones-exclusivas-horizontal .opcion-exclusiva:has(input:checked) .punto-opcion-exclusiva::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--color-blanco);
}
.grupo-opciones-exclusivas .opcion-exclusiva:has(input:checked) {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-blanco);
}
.grupo-opciones-exclusivas .opcion-exclusiva:has(input:checked):hover {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
}
.grupo-opciones-exclusivas .opcion-exclusiva:has(input:checked) .punto-opcion-exclusiva::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--color-blanco);
}
.punto-opcion-exclusiva {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
    position: relative;
}
.opcion-exclusiva.activa .punto-opcion-exclusiva::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--color-blanco);
}
.campo-cierre-solo-lectura {
    background: var(--color-fondo-alterno);
    color: var(--color-texto-secundario);
}
.layout-facturantes {
    display: flex;
    gap: 24px;
    width: 100%;
}
.layout-facturantes-columna-lista {
    flex: 65 1 0%;
    min-width: 0;
}
.layout-facturantes-columna-preview {
    flex: 35 1 0%;
    min-width: 0;
}
.fila-facturante-seleccionable {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.fila-facturante-seleccionable:hover {
    background: var(--color-lista-hover);
}
.fila-facturante-seleccionable.fila-activa {
    background: var(--color-fondo-destacado);
}
.ficha-facturante-preview .cabecera-ficha-facturante {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.ficha-facturante-preview .logo-ficha-facturante {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-bordes);
    border-radius: 8px;
    overflow: hidden;
}
.ficha-facturante-preview .imagen-logo-ficha-facturante {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ficha-facturante-preview .logo-ficha-facturante-vacio {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    text-align: center;
}
.ficha-facturante-preview .fila-badges-ficha-facturante {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0;
}
#modal-nuevo-facturante label,
#ficha-facturante-editar label {
    display: block;
    margin-top: 8px;
    margin-bottom: 2px;
}
#modal-nuevo-facturante input[type="text"],
#ficha-facturante-editar input[type="text"] {
    width: 100%;
}
.fila-precio-moneda {
    display: flex;
    gap: 12px;
}
.fila-precio-moneda .campo-precio {
    flex: 3;
    min-width: 0;
}
.fila-precio-moneda .campo-moneda {
    flex: 1;
    min-width: 0;
}
.fila-dos-campos-facturante {
    display: flex;
    gap: 12px;
}
.fila-dos-campos-facturante > div {
    flex: 1;
    min-width: 0;
}
.campo-archivo-facturante {
    margin-top: 8px;
}
.campo-archivo-facturante-arrastrando {
    outline: 2px dashed var(--color-secundario);
    outline-offset: 2px;
    background: var(--color-fondo-destacado);
    border-radius: 8px;
}
.campo-archivo-facturante .etiqueta-campo-archivo-facturante {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.campo-archivo-oculto {
    display: none;
}
#modal-nuevo-facturante label.boton-subir-archivo-facturante,
#ficha-facturante-editar label.boton-subir-archivo-facturante {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-top: 4px;
}
.icono-subir-archivo-facturante {
    font-weight: bold;
}
.nombre-archivo-facturante {
    margin-left: 8px;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}
.pie-formulario-facturante {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.grupo-guardar-cancelar-facturante-editar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
#grupo-acciones-ficha-facturante {
    justify-content: center;
}
.barra-herramientas-facturantes {
    display: flex;
    justify-content: flex-end;
}
.tabla-lista-facturantes {
    table-layout: fixed;
}
.tabla-lista-facturantes th:nth-child(1),
.tabla-lista-facturantes td:nth-child(1) {
    width: 26%;
}
.tabla-lista-facturantes th:nth-child(2),
.tabla-lista-facturantes td:nth-child(2) {
    width: 20%;
}
.tabla-lista-facturantes th:nth-child(3),
.tabla-lista-facturantes td:nth-child(3) {
    width: 20%;
}
.tabla-lista-facturantes th:nth-child(4),
.tabla-lista-facturantes td:nth-child(4) {
    width: 14%;
}
.tabla-lista-facturantes th:nth-child(5),
.tabla-lista-facturantes td:nth-child(5) {
    width: 10%;
    text-align: left;
}
.tabla-lista-facturantes td:nth-child(5) {
    text-align: center;
}
.tabla-lista-facturantes th:nth-child(6),
.tabla-lista-facturantes td:nth-child(6) {
    width: 10%;
}
.rejilla-tipos-documento {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cabecera-tarjeta-tipo-documento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.badge-prefijo-tipo-documento {
    font-family: var(--fuente-realce);
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    padding: 2px 8px;
}
.layout-tipos-documento {
    display: flex;
    gap: 24px;
    width: 100%;
}
.layout-tipos-documento-columna-lista {
    flex: 35 1 0%;
    min-width: 0;
}
.layout-tipos-documento-columna-preview {
    flex: 65 1 0%;
    min-width: 0;
}
.tabla-catalogo-ajustes-facturacion {
    table-layout: fixed;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(1),
.tabla-catalogo-ajustes-facturacion td:nth-child(1) {
    width: 22%;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(2),
.tabla-catalogo-ajustes-facturacion td:nth-child(2) {
    width: 16%;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(3),
.tabla-catalogo-ajustes-facturacion td:nth-child(3) {
    width: 14%;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(4),
.tabla-catalogo-ajustes-facturacion td:nth-child(4) {
    width: 8%;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(5),
.tabla-catalogo-ajustes-facturacion td:nth-child(5) {
    width: 10%;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(6),
.tabla-catalogo-ajustes-facturacion td:nth-child(6) {
    width: 6%;
    text-align: center;
}
.tabla-catalogo-ajustes-facturacion th:nth-child(7),
.tabla-catalogo-ajustes-facturacion td:nth-child(7) {
    width: 24%;
}
.form-nuevo-ajuste-facturacion {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.form-nuevo-ajuste-facturacion > div {
    display: flex;
    flex-direction: column;
}
.form-nuevo-ajuste-facturacion input[type="text"],
.form-nuevo-ajuste-facturacion input[type="number"],
.form-nuevo-ajuste-facturacion select {
    margin-bottom: 0;
}
.form-nuevo-ajuste-facturacion .campo-nombre-ajuste-facturacion {
    flex: 1 1 auto;
}
.form-nuevo-ajuste-facturacion .campo-numerico-ajuste-facturacion {
    flex: 0 0 150px;
}
.form-nuevo-ajuste-facturacion button {
    margin-left: auto;
}

.form-editar-ajuste-inline {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.form-editar-ajuste-inline input[type="text"],
.form-editar-ajuste-inline input[type="number"],
.form-editar-ajuste-inline select {
    margin-bottom: 0;
}
.campo-editar-nombre-ajuste {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.campo-editar-ajuste {
    flex: 0 1 150px;
    display: flex;
    flex-direction: column;
}
.grupo-guardar-cancelar-ajuste {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.layout-documentos {
    display: flex;
    gap: 24px;
    width: 100%;
}
.layout-documentos-columna-lista {
    flex: 70 1 0%;
    min-width: 0;
}
.layout-documentos-columna-preview {
    flex: 30 1 0%;
    min-width: 0;
}
.tarjeta-anidada {
    background: var(--color-fondo-alterno);
    border-radius: 8px;
    padding: 16px;
}
.tarjeta-anidada-con-borde {
    border: 1px solid var(--color-bordes);
}
.tarjeta-resumen-suscripcion-propia .cuerpo-resumen-suscripcion-propia {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    align-items: start;
}
.datos-secundarios-suscripcion-propia {
    text-align: left;
}
@media (max-width: 768px) {
    .tarjeta-resumen-suscripcion-propia .cuerpo-resumen-suscripcion-propia {
        grid-template-columns: 1fr;
    }
}
.texto-ayuda-pequena {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}
.contenedor-historial-interacciones {
    max-height: 70vh;
    overflow-y: auto;
}
.hora-interaccion {
    color: var(--color-primario);
}
.opcion-checkbox-ajuste {
    display: block;
    margin-bottom: 8px;
}
.lista-ajustes-documento {
    display: flex;
    flex-direction: column;
}
.barra-acciones-documento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.documento-imprimible {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
}
.cabecera-documento-imprimible {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}
.logo-documento-imprimible {
    max-width: 160px;
    max-height: 100px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}
.nombre-facturante-imprimible {
    font-weight: bold;
    margin: 0 0 4px;
}
.bloque-numeracion-imprimible {
    text-align: right;
}
.bloque-numeracion-imprimible h1 {
    margin: 0;
    font-size: 1.3rem;
}
.codigo-documento-imprimible {
    font-family: var(--fuente-realce);
    font-size: 1.1rem;
    margin: 4px 0;
}
.bloque-destinatario-imprimible {
    margin-bottom: 8px;
    padding-bottom: 6px;
}
.nombre-destinatario-imprimible {
    font-weight: bold;
    margin: 2px 0;
}
.tabla-lineas-documento-imprimible {
    width: 100%;
    margin-bottom: 16px;
    margin-top: 4px;
}
.tabla-lineas-documento-imprimible th:not(:first-child),
.tabla-lineas-documento-imprimible td:not(:first-child) {
    text-align: right;
}
.tabla-lineas-documento-imprimible thead th {
    background: var(--color-fondo-alterno);
    border-top: 1px solid var(--color-bordes);
    border-bottom: 1px solid var(--color-bordes);
    padding: 8px 6px;
}
.bloque-totales-imprimible {
    margin-left: auto;
    max-width: 320px;
}
.bloque-totales-imprimible p {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}
.linea-total-imprimible {
    font-weight: bold;
    font-size: 1.15rem;
    border-top: 1px solid var(--color-bordes);
    padding-top: 8px;
    margin-top: 8px !important;
}
.bloque-pie-imprimible {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--color-bordes);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

@media print {
    .no-imprimir,
    .cabecera,
    .subnav-configuracion,
    .cabecera-menu,
    .tiempo-render,
    footer {
        display: none !important;
    }
    .documento-imprimible {
        max-width: 100%;
        padding: 0;
        box-shadow: none;
        border: none;
    }
    body {
        background: white;
    }
}
.rejilla-cabecera-documento-nuevo {
    display: flex;
    gap: 20px;
}
.aviso-moneda-bloqueada-linea {
    text-align: right;
    margin-top: 6px;
}
.rejilla-facturante-logo {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 16px;
    align-items: center;
}
.columna-datos-facturante {
    min-width: 0;
}
.columna-logo-facturante {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.caja-logo-facturante {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    padding: 12px;
}
.caja-logo-facturante img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.subtarjeta-cabecera-documento-nuevo {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-primario);
    border-radius: 8px;
    padding: 16px;
}
.fila-tipo-destinatario-con-boton {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.texto-aviso {
    color: var(--color-aviso-texto);
    font-size: 0.85rem;
}
.columna-formulario-compacta input,
.columna-formulario-compacta select {
    margin-bottom: 8px;
}
.fila-localidad-pais {
    display: flex;
    gap: 12px;
}
.fila-localidad-pais > div {
    flex: 1;
    min-width: 0;
}
.rejilla-ajustes-resumen-documento-nuevo {
    display: flex;
    gap: 20px;
}
.rejilla-ajustes-resumen-documento-nuevo .tarjeta-anidada {
    flex: 1;
    min-width: 0;
}
.boton-nuevo-pago-toolbar {
    align-self: flex-end;
}
#lista-pagos-pendientes tr:hover {
    background: var(--color-lista-hover);
}
.tabla-lineas-manuales-documento {
    table-layout: fixed;
}
.tabla-lineas-manuales-documento th:nth-child(1),
.tabla-lineas-manuales-documento td:nth-child(1) {
    width: 26%;
}
.tabla-lineas-manuales-documento th:nth-child(2),
.tabla-lineas-manuales-documento td:nth-child(2) {
    width: 12%;
}
.tabla-lineas-manuales-documento th:nth-child(3),
.tabla-lineas-manuales-documento td:nth-child(3) {
    width: 10%;
}
.tabla-lineas-manuales-documento th:nth-child(4),
.tabla-lineas-manuales-documento td:nth-child(4) {
    width: 12%;
}
.tabla-lineas-manuales-documento th:nth-child(5),
.tabla-lineas-manuales-documento td:nth-child(5) {
    width: 8%;
}
.tabla-lineas-manuales-documento th:nth-child(6),
.tabla-lineas-manuales-documento td:nth-child(6) {
    width: 12%;
}
.tabla-lineas-manuales-documento th:nth-child(7),
.tabla-lineas-manuales-documento td:nth-child(7) {
    width: 20%;
}
#lista-pagos-pendientes .tabla-panel td,
#lista-pagos-pendientes .tabla-panel th {
    font-size: 0.85rem;
}
.texto-aviso {
    color: var(--color-error);
    font-size: 0.85rem;
    margin: 4px 0 0;
}
.grupo-confirmar-editar {
    border: 1px solid var(--color-primario);
}
#cuerpo-lineas-manuales tr:hover {
    background: var(--color-lista-hover);
}


.boton-anadir-linea-alineado {
    align-self: flex-end;
}
.tarjeta-lista-actual-documento {
    border: 1px solid var(--color-secundario);
}
.tarjeta-lista-actual-documento h2 {
    color: var(--color-secundario);
}
.tarjeta-resumen-documento {
    border: 1px solid var(--color-detalle-premium);
}
.tarjeta-resumen-documento h2 {
    color: var(--color-detalle-premium);
}
.rejilla-anadir-lineas-documento {
    display: flex;
    gap: 20px;
}
.rejilla-anadir-lineas-documento > .tarjeta-anidada {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(1) {
    flex: 39;
}
.rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(2) {
    flex: 33;
}
.rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(3) {
    flex: 28;
}
.rejilla-anadir-lineas-documento .form-servicio-catalogo,
.rejilla-anadir-lineas-documento .form-nueva-linea-manual {
    flex: 1;
}

.rejilla-anadir-lineas-documento .boton-anadir-linea-alineado {
    align-self: flex-start;
    margin-top: auto;
}
.form-servicio-catalogo,
.form-nueva-linea-manual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.campo-ancho-completo-linea {
    display: flex;
    flex-direction: column;
}
.campo-ancho-completo-linea input,
.campo-ancho-completo-linea select {
    margin-bottom: 0;
}
.fila-campos-linea {
    display: flex;
    gap: 10px;
}
.campo-fila-linea {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.campo-fila-linea input {
    margin-bottom: 0;
}
.fila-acciones-linea {
    display: flex;
    align-items: center;
    gap: 6px;
}
.etiqueta-checkbox-bajo-precio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.85rem;
}
.form-nueva-linea-manual .fila-campos-linea .campo-fila-linea:nth-child(1) {
    flex: 0.8;
}
.form-nueva-linea-manual .fila-campos-linea .campo-fila-linea:nth-child(3) {
    flex: 1.2;
}
#detalle-porcentajes-documento p {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}
.linea-subtotal-activo-imprimible {
    font-weight: bold;
    border-top: 1px dashed var(--color-bordes);
    padding-top: 6px;
    margin-top: 6px !important;
}
.fila-documento {
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.fila-documento:nth-child(odd) {
    background: var(--color-semiblanco);
}
.fila-documento:nth-child(even) {
    background: var(--color-fondo-alterno);
}
.fila-documento:hover {
    background: var(--color-lista-hover);
}
.fila-documento.fila-activa {
    background: var(--color-fondo-destacado);
}
.lista-trazo-documento {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}
.lista-trazo-documento li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--color-bordes);
}
.lista-trazo-documento li:last-child {
    border-bottom: none;
}
#notas-adicionales-documento {
    width: 100%;
    resize: vertical;
    font-family: var(--fuente-texto);
}
.bloque-trazo-imprimible,
.bloque-notas-adicionales-imprimible {
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}
.bloque-trazo-imprimible ul {
    margin: 4px 0 0;
    padding-left: 18px;
}
.select-transformar-documento {
    padding: 8px 10px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
    margin-right: 6px;
}
.rejilla-trazo-notas-documento {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.rejilla-trazo-notas-documento > .tarjeta-anidada {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rejilla-trazo-notas-documento textarea {
    flex: 1;
    min-height: 120px;
}

.texto-confirmacion-multilinea {
    white-space: normal;
    display: block;
    margin: 0 0 8px;
    text-align: center;
}
.confirmacion-inline-multilinea {
    display: block;
    width: 100%;
    text-align: center;
}
.confirmacion-inline-multilinea .fila-botones-confirmar {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.etiqueta-bloque-imprimible {
    font-weight: bold;
    color: var(--color-texto);
    margin-bottom: 4px;
}
.bloque-verificacion-imprimible {
    margin-top: 12px;
    font-size: 0.68rem;
    color: var(--color-texto-secundario);
    word-break: break-all;
}
.bloque-verificacion-imprimible p {
    margin: 2px 0;
}
.pagina-visor-documento-externo {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 16px;
}
.tarjeta-visor-documento {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto 20px;
}
.columna-titulo-visor-documento {
    flex: 0 0 40%;
    max-width: 40%;
    box-sizing: border-box;
}
.columna-titulo-visor-documento h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}
.fila-badges-visor-documento {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.botonera-visor-documento {
    flex: 0 0 60%;
    max-width: 60%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.badge-documento-emitido {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
}
.badge-documento-verificado {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-fondo-destacado);
    color: var(--color-exito-texto);
    border: 1px solid var(--color-exito);
}
.badge-prescriptor-potencial {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-fondo-destacado);
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
}
.badge-prescriptor-inactivo {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--color-fondo-destacado);
    color: var(--color-texto-secundario);
    border: 1px solid var(--color-bordes);
}
.texto-detalle-cobre {
    color: var(--color-detalle-premium);
}
.pie-comisiones-consulta-externa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.pie-comisiones-consulta-externa h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.pie-comisiones-consulta-externa p {
    margin: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.cifra-comision-consulta-externa {
    color: var(--color-primario);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.columna-cifra-alineada {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 1%;
    white-space: nowrap;
}
.columna-cifra-tabular {
    font-variant-numeric: tabular-nums;
    width: 1%;
    white-space: nowrap;
}
.acordeon-campos .tabla-panel td {
    font-size: 0.8rem;
}
.tabla-historial-scroll td,
.tabla-historial-scroll th {
    font-variant-numeric: tabular-nums;
}
.franja-cabecera-externa {
    position: relative;
    background: var(--color-primario);
    color: var(--color-blanco);
    width: 100%;
    padding: 16px 24px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.franja-cabecera-externa .titulo-franja {
    font-size: 1.6rem;
    font-weight: bold;
}
.franja-cabecera-externa .version-franja {
    font-size: 0.75rem;
    opacity: 0.85;
    white-space: nowrap;
}
.barra-idioma.barra-idioma-franja a {
    color: var(--color-blanco);
    opacity: 0.7;
}
.barra-idioma.barra-idioma-franja a:hover,
.barra-idioma.barra-idioma-franja a.idioma-activo {
    color: var(--color-blanco);
    opacity: 1;
}
.pagina-consulta-externa {
    width: 85vw;
    margin: 0 auto;
    padding: 32px 16px;
    box-sizing: border-box;
}
.consulta-externa-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}
.consulta-externa-columnas-impaciente {
    display: grid;
    grid-template-columns: 3.5fr 6.5fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .consulta-externa-columnas,
    .consulta-externa-columnas-impaciente {
        grid-template-columns: 1fr;
    }
}
.cabecera-consulta-externa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cabecera-consulta-externa h1 {
    margin: 0;
}
.cabecera-consulta-externa + span {
    display: inline-block;
    margin-top: 8px;
}
.grupo-titulo-consulta-externa {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pagina-verificacion-publica {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 16px;
    background: var(--color-fondo);
    font-family: var(--fuente-texto);
    color: var(--color-texto);
}
.tarjeta-verificacion-publica {
    max-width: 480px;
    width: 100%;
}

@page {
    size: A4;
    margin: 15mm 15mm 20mm 15mm;
}
@page {
    @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-size: 8pt;
        color: #666;
    }
}

.bloque-totales-imprimible {
    page-break-inside: avoid;
    break-inside: avoid;
}
.bloque-notas-pie-imprimible {
    page-break-inside: avoid;
    break-inside: avoid;
}
.tabla-documentos th:nth-child(1),
.tabla-documentos td:nth-child(1) {
    padding-left:6px;
    width: 14%;
}
.tabla-documentos th:nth-child(2),
.tabla-documentos td:nth-child(2) {
    width: 14%;
}
.tabla-documentos th:nth-child(3),
.tabla-documentos td:nth-child(3) {
    width: 22%;
}
.tabla-documentos th:nth-child(4),
.tabla-documentos td:nth-child(4) {
    width: 24%;
}
.tabla-documentos th:nth-child(5),
.tabla-documentos td:nth-child(5) {
    width: 15%;
}
.tabla-documentos th:nth-child(6),
.tabla-documentos td:nth-child(6) {
    width: 11%;
}
.tabla-documentos td:nth-child(4) {
    padding-left:6px;
}
.tabla-documentos td:nth-child(5) {
    text-align: right;
}
.tabla-documentos td:nth-child(6) {
    text-align: right;
    padding-right:6px;
}
.tabla-documentos td:nth-child(1),
.tabla-documentos td:nth-child(5),
.tabla-documentos td:nth-child(6) {
    font-variant-numeric: tabular-nums;
}
.fila-documento-factura td {
    color: var(--color-primario);
}
.fila-documento-anulado td:nth-child(1) {
    color: var(--color-error);
}
.fila-documento-cancelacion td:nth-child(1) {
    color: var(--color-detalle-premium);
}
.fila-documento-anulado td:nth-child(6) {
    color: var(--color-error);
}
.fila-documento-cancelacion td:nth-child(6) {
    color: var(--color-detalle-premium);
}
.fila-acciones-cabecera-suscriptores {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.grupo-precio-suscripcion {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 6px 12px;
}
.campo-precio-suscripcion-inline {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
}
.botonera-preview-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.fila-impaciente-activo td {
    color: var(--color-primario);
}
.fila-impaciente-vetado td {
    color: var(--color-error);
}
.fila-caso-activo td {
    color: var(--color-primario);
}
.fila-caso-seguimiento td {
    color: var(--color-detalle-premium);
}
.celda-caso-resuelto {
    color: var(--color-exito);
}
.celda-caso-imposible {
    color: var(--color-error);
}
.formulario-tres-columnas-caso-nuevo {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.formulario-tres-columnas-caso-nuevo .columna-formulario {
    flex: 1;
    min-width: 0;
}
.tarjeta-caso-nuevo {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.editor-alta-caso .area-editor-enriquecido {
    min-height: 110px;
    padding: 10px 12px;
    background: var(--color-fondo);
}
.impaciente_nuevo_caso_como_boton:hover {
    border:1px solid var(--color-secundario);
    padding: 4px 8px;
    border-radius: 8px;
}
.tabla-casos td:first-child {
    padding-left: 6px;
}
.tabla-casos td:last-child {
    padding-right: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tabla-casos .hora-sesion-destacada {
    color: var(--color-primario) !important;
}
.fila-prescriptor-activo td {
    color: var(--color-primario);
}
.fila-prescriptor-rechazante td {
    color: var(--color-error);
}
.tabla-prescriptores td:first-child {
    padding-left: 6px;
}
.tabla-prescriptores td:last-child {
    padding-right: 6px;
    text-align: right;
}
.modal-ancho-registro-sistema {
    max-width: 600px;
}
.navegador-ficha {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
}
.navegador-ficha-izquierda {
    left: 12px;
}
.navegador-ficha-derecha {
    right: 12px;
}
.navegador-ficha-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-fondo-panel, #fff);
    border: 1px solid var(--color-bordes);
    color: var(--color-primario);
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.navegador-ficha-flecha:hover {
    background: var(--color-primario);
    color: var(--color-fondo);
}
.boton-indicador-registro-sistema{
    margin-right:16px;
}
.texto-centrado {
    text-align: center;
}
.texto-aviso-rojo {
    color: var(--color-error);
}

.tarjeta-tip-dia {
    border-left: 4px solid var(--color-detalle-premium);
}
.tarjeta-avisos-globales {
    border-left: 4px solid var(--color-aviso);
}
.tarjeta-aviso-personal {
    border-left: 4px solid var(--color-error);
}
.tarjeta-avisos-globales,
.tarjeta-aviso-personal {
    position: relative;
}
.boton-cerrar-tarjeta-aviso {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    padding: 4px;
}
.boton-cerrar-tarjeta-aviso:hover {
    color: var(--color-error);
}
.tarjeta-aviso-personal .cabecera-aviso-global h2 {
    color: var(--color-primario);
    margin: 0;
}
.lista-avisos-globales {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pildora-aviso-global {
    border-left: 4px solid var(--color-bordes);
    background: var(--color-fondo-alterno);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    font-size: 0.9rem;
}
.cabecera-aviso-global {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.icono-aviso-global {
    flex-shrink: 0;
    color: var(--color-aviso-texto);
    font-size: 1.2rem;
    line-height: 1.3;
}
.navegador-tip-dia {
    display: flex;
    gap: 8px;
}
.form-inline-tips {
    display: inline-block;
    margin: 0 4px 0 0;
}
.tabla-tips-dia {
    table-layout: fixed;
}
.tabla-tips-dia .columna-estrecha {
    width: 64px;
}
.tabla-tips-dia .columna-estado-tip {
    width: 10%;
}
.tabla-tips-dia .columna-acciones-tip {
    width: 32%;
}
.tarjeta-tips-listado {
    max-width: 70%;
    margin: 0 auto;
}
.extracto-tip {
    font-family: var(--fuente-realce);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    font-weight: normal;
}
.tabla-avisos-globales {
    table-layout: fixed;
    width: 100%;
}
.tabla-avisos-globales th:nth-child(1),
.tabla-avisos-globales td:nth-child(1) {
    width: 7%;   /* prioridad — más estrecha */
}
.tabla-avisos-globales th:nth-child(2),
.tabla-avisos-globales td:nth-child(2) {
    width: 16%;  /* descripción interna */
}
.tabla-avisos-globales th:nth-child(3),
.tabla-avisos-globales td:nth-child(3) {
    width: 28%;  /* contenido */
}
.tabla-avisos-globales th:nth-child(4),
.tabla-avisos-globales td:nth-child(4) {
    width: 18%;  /* ventana — un poco más contenida */
}
.tabla-avisos-globales th:nth-child(5),
.tabla-avisos-globales td:nth-child(5) {
    width: 7%;   /* estado */
}
.tabla-avisos-globales th:nth-child(6),
.tabla-avisos-globales td:nth-child(6) {
    width: 24%;  /* botonera — más aire a la derecha */
}
.tabla-avisos-globales td:nth-child(6) .grupo-acciones {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.tabla-avisos-globales input[type="number"] {
    width: 3.5rem;
    max-width: 100%;
}
.tabla-avisos-globales input[type="datetime-local"] {
    max-width: 100%;
    font-size: 0.8rem;
}
.tarjeta_ancho_backup{
    max-width:75%;
    margin: 20px auto;
}
.backups-suscriptores-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.backups-suscriptores-lista-contenedor {
    min-width: 0;
}

.backups-suscriptores-lista-contenedor h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.backups-suscriptores-lista {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    padding: 4px;
}

.backups-suscriptor-item {
    display: block;
    width: 100%;
    margin: 0 0 2px 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 4px;
    color: var(--color-texto);
    text-align: left;
    font-family: var(--fuente-texto);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.backups-suscriptor-item:last-child {
    margin-bottom: 0;
}

.backups-suscriptor-item:nth-child(odd) {
    background: var(--color-semiblanco);
}

.backups-suscriptor-item:nth-child(even) {
    background: var(--color-fondo-alterno);
}

.backups-suscriptor-item:hover {
    background: var(--color-lista-hover);
}

.backups-suscriptor-item.seleccionado {
    background: var(--color-fondo-destacado);
    font-family: var(--fuente-realce);
}

.backups-suscriptor-item:focus-visible {
    outline: none;
}

.backups-suscriptor-contenido {
    min-width: 0;
}

@media (max-width: 1024px) {
    .backups-suscriptores-layout {
        grid-template-columns: 1fr;
    }

    .backups-suscriptores-lista {
        max-height: 240px;
    }
}
.texto_ambulancia {
    color:var(--color-error);
}

/* Mi página pública (landing por tenant) */
.seccion-landing-color-neutro { background: var(--color-fondo); border-color: var(--color-bordes); }
.seccion-landing-color-gris { background: var(--color-fondo-alterno); border-color: var(--color-texto-secundario); }
.seccion-landing-color-azul { background: var(--color-horario-trabajo-fondo); border-color: var(--color-horario-trabajo-mini); }
.seccion-landing-color-verde { background: var(--color-fondo-destacado); border-color: var(--color-fondo-destacado-strong); }
.seccion-landing-color-naranja { background: var(--color-aviso-inseguro); border-color: var(--color-aviso); }
.seccion-landing-color-rojo { background: var(--color-error-suave); border-color: var(--color-error); }
.seccion-landing-color-morado { background: var(--color-landing-morado-fondo); border-color: var(--color-landing-morado-borde); }

.rejilla-seccion-landing {
    display: grid;
    gap: 16px;
    border: 1px solid;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}
.seccion-landing-sin-borde {
    border: none;
}
.seccion-landing-ancho-completo {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    box-sizing: border-box;
    padding-left: 5vw;
    padding-right: 5vw;
}
.landing-plantilla-1col { grid-template-columns: 1fr; }
.landing-plantilla-2col_50_50 { grid-template-columns: 1fr 1fr; }
.landing-plantilla-2col_60_40 { grid-template-columns: 3fr 2fr; }
.landing-plantilla-2col_40_60 { grid-template-columns: 2fr 3fr; }
.landing-plantilla-2col_75_25 { grid-template-columns: 3fr 1fr; }
.landing-plantilla-2col_25_75 { grid-template-columns: 1fr 3fr; }
.landing-plantilla-3col_33_33_33 { grid-template-columns: 1fr 1fr 1fr; }
.landing-plantilla-3col_50_25_25 { grid-template-columns: 2fr 1fr 1fr; }
.landing-plantilla-3col_25_25_50 { grid-template-columns: 1fr 1fr 2fr; }
.landing-plantilla-3col_25_50_25 { grid-template-columns: 1fr 2fr 1fr; }
.landing-plantilla-4col_25_25_25_25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.landing-plantilla-4col_40_20_20_20 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.landing-plantilla-4col_20_20_20_40 { grid-template-columns: 1fr 1fr 1fr 2fr; }
.landing-plantilla-5col_20_20_20_20_20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.grupo-plantillas-landing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 4px;
}
.opcion-plantilla-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 96px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--color-bordes);
    background: var(--color-fondo);
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.opcion-plantilla-landing:hover {
    border-color: var(--color-primario);
    background: var(--color-lista-hover);
}
.opcion-plantilla-landing input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.opcion-plantilla-landing:has(input:checked) {
    border-color: var(--color-primario);
    background: var(--color-fondo-destacado);
    box-shadow: 0 0 0 2px var(--color-primario) inset;
}
.mini-esquema-plantilla {
    display: grid;
    gap: 3px;
    width: 84px;
    height: 32px;
}
.mini-esquema-plantilla-col {
    background: var(--color-primario);
    border-radius: 3px;
    opacity: 0.5;
}
.opcion-plantilla-landing:has(input:checked) .mini-esquema-plantilla-col {
    opacity: 1;
}
.etiqueta-opcion-plantilla-landing {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
    line-height: 1.15;
}
.opcion-plantilla-landing:has(input:checked) .etiqueta-opcion-plantilla-landing {
    color: var(--color-texto);
    font-family: var(--fuente-realce);
}

.hueco-landing-horizontal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.etiqueta-hueco-landing {
    display: inline-block;
    align-self: flex-start;
    background: #FFFFFF;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-family: var(--fuente-realce);
}
.contenido-hueco-landing {
    position: relative;
    min-height: 140px;
    border: 1px dashed var(--color-bordes);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.contenido-hueco-landing-arrastrando {
    outline: 2px dashed var(--color-secundario);
    outline-offset: 2px;
    background: var(--color-fondo-destacado);
}
.contenido-hueco-landing.hueco-landing-borde-activo {
    border-style: solid;
}
.botones-elegir-tipo-hueco-landing {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popover-elegir-tipo-hueco-landing {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.opcion-popover-tipo-hueco-landing {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    font-family: var(--fuente-texto);
    color: var(--color-texto);
    text-align: left;
}
.opcion-popover-tipo-hueco-landing:hover {
    background: var(--color-lista-hover);
}
.previsualizacion-hueco-landing {
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.3;
    display: block;
    text-align: center;
    overflow: hidden;
}
.previsualizacion-hueco-landing .imagen-previsualizacion-hueco-landing {
    max-width: 100%;
    border-radius: 6px;
}
.acciones-hueco-landing {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.contenedor-quitar-hueco-landing {
    position: absolute;
    top: -8px;
    right: -8px;
    pointer-events: auto;
}
.boton-editar-hueco-landing {
    position: absolute;
    bottom: -8px;
    right: -8px;
    pointer-events: auto;
}
.contenedor-tamano-imagen-hueco-landing,
.contenedor-horizontal-servicio-hueco-landing {
    position: absolute;
    bottom: -8px;
    left: 8px;
    pointer-events: auto;
}
.acciones-hueco-landing .boton-icono:not(:hover) {
    background: #FFFFFF;
}
.boton-tamano-imagen-hueco-landing {
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primario);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--color-primario);
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
}
.boton-tamano-imagen-hueco-landing:hover {
    background: var(--color-fondo-alterno);
}
.boton-horizontal-servicio-hueco-landing:hover {
    background: var(--color-fondo-alterno);
    border-color: var(--color-primario);
}

.hueco-seccion-landing {
    overflow: hidden;
}
.hueco-seccion-landing img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.hueco-seccion-landing-coloreado {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid;
}
.hueco-landing-sin-borde {
    border: none;
}
.boton-hueco-landing {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-family: var(--fuente-realce);
    font-weight: 700;
    background: var(--boton-hueco-fondo, var(--color-primario));
    color: var(--boton-hueco-texto, var(--color-blanco));
    transition: background 0.15s ease, color 0.15s ease;
}
.boton-hueco-landing:hover {
    background: var(--boton-hueco-fondo-hover, var(--color-secundario-hover));
    color: var(--boton-hueco-texto-hover, var(--color-blanco));
}
.fila-boton-hueco-landing {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    width: 80%;
    max-width: 80%;
    margin: 8px auto 0;
    box-sizing: border-box;
}
.campo-boton-hueco-landing {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}
.campo-boton-hueco-toggle {
    flex: 1 1 9rem;
    min-width: min(100%, 9rem);
}
.campo-boton-hueco-texto {
    flex: 1 1 9rem;
    min-width: min(100%, 9rem);
}
.campo-boton-hueco-url {
    flex: 2 1 14rem;
    min-width: min(100%, 12rem);
}
.fila-boton-hueco-landing label:not(.interruptor-modo-notas-etiqueta) {
    display: block;
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2px;
}
.fila-boton-hueco-landing input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fuente-texto);
    background: var(--color-fondo);
    color: var(--color-texto);
    margin-bottom: 0;
    box-sizing: border-box;
}
.fila-boton-hueco-landing input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primario);
}
.campo-boton-hueco-toggle .interruptor-modo-notas-etiqueta {
    margin: 0;
    align-items: center;
}
.fila-colores-boton-texto-hueco-landing {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: -36px;
}
.fila-colores-boton-fondo-hueco-landing {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}
.campo-color-boton-hueco-landing {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.campo-color-boton-hueco-landing label {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}
.fila-borde-hueco-landing {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}
.fila-alineacion-hueco-landing {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}
.boton-alineacion-hueco-landing {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-bordes);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--color-primario);
    cursor: pointer;
    padding: 0;
}
.boton-alineacion-hueco-landing:hover {
    background: var(--color-fondo-alterno);
    border-color: var(--color-primario);
}
.boton-alineacion-hueco-landing.activa {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #FFFFFF;
}

.pastilla-color-landing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    background: #FFFFFF;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    font-family: inherit;
}
.envoltorio-color-seccion-landing {
    position: relative;
    display: inline-block;
}
.fila-colores-contacto-hueco-landing {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: -36px;
}
.campo-color-contacto-hueco-landing {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.campo-color-contacto-hueco-landing label {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}
.acciones-abajo-seccion-landing {
    position: absolute;
    bottom: 8px;
    right: -8px;
    margin: 0;
}
.boton-cambiar-color-seccion-landing {
    cursor: pointer;
}
.mini-muestra-color-landing {
    width: 36px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--color-bordes);
    flex-shrink: 0;
}
.tarjeta-seccion-landing {
    position: relative;
}
.acciones-esquina-seccion-landing {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.contenedor-eliminar-seccion-landing .boton-quitar-imagen-pago-servicio {
    position: static;
}
button[type="submit"].boton-mover-seccion-landing {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-bordes);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--color-primario);
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
button[type="submit"].boton-mover-seccion-landing:hover {
    background: var(--color-fondo-alterno);
    border-color: var(--color-primario);
}
.botonera-opciones-seccion-landing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
}
.selector-color-landing {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.selector-color-landing label {
    font-size: 0.9rem;
    margin: 0;
}
.disparador-color-landing {
    cursor: pointer;
    width: fit-content;
}
.disparador-color-landing::after,
.boton-cambiar-color-seccion-landing::after,
.boton-cambiar-color-hueco-landing::after,
.boton-cambiar-color-titulo-landing::after,
.boton-cambiar-color-boton-hueco::after {
    content: '▾';
    margin-left: 4px;
    font-size: 1.3rem;
    color: var(--color-primario);
    line-height:1rem;
}
.popover-color-landing {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    max-height: 260px;
    overflow-y: auto;
    min-width: 210px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.opcion-popover-color-landing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-texto);
    text-align: left;
}
.opcion-popover-color-landing:hover {
    background: var(--color-fondo-alterno);
}

.cabecera-seccion-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.cabecera-titulo-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.cabecera-titulo-landing h1 {
    margin: 0;
}

.cabecera-hueco-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.envoltorio-color-hueco-landing {
    position: relative;
    display: inline-block;
}
.boton-cambiar-color-hueco-landing {
    cursor: pointer;
}

.caja-opciones-superadmin-landing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 64px;
    width: fit-content;
    margin: 16px auto 0;
    padding: 12px 24px;
    border: 1px solid var(--color-detalle-premium);
    border-radius: 8px;
}

.widget-formulario-registro-publico .label-codigo {
    display: block;
    color: var(--color-primario);
    font-weight: bold;
    margin-bottom: 4px;
}

.titulo-seccion-landing {
    margin: 0 0 8px;
    grid-column: 1 / -1;
}

.fila-titulo-seccion-landing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fila-titulo-seccion-landing .titulo-seccion-landing {
    margin: 0;
}

.copete-seccion-landing {
    margin: 0 0 16px;
    grid-column: 1 / -1;
}

.separador-titulo-seccion-landing {
    width: 50%;
    margin: 0 auto 12px auto;
    border: none;
    border-top: 2px dashed var(--color-primario);
}

.cabecera-titulo-seccion-landing {
    margin-bottom: 12px;
}
.previsualizacion-copete-nueva-seccion{
    border: 1px solid var(--color-bordes);
    padding:6px;
    /*border-radius: 8px;*/


    position: relative;
    min-height: 64px;
    /*border: 1px dashed var(--color-bordes);*/
    border-radius: 10px;
    display: flex;
    align-items: left;
    /*justify-content: center;
    padding: 10px;*/
    box-sizing: border-box;
}
.landing_titulo_formulario_insercion{
    width:50%;
}
.bloque-script-pago {
    margin: 20px 0;
}
.bloque-qr-pago img {
    max-width: 240px;
    height: auto;
}

.previsualizacion-servicio-landing {
    display: inline-block;
    max-width: 100%;
    font-size: 0.75rem;
}
.alineacion-justificada-hueco-landing .imagen-previsualizacion-hueco-landing {
    display: block;
    width: 100%;
}
.alineacion-justificada-hueco-landing .previsualizacion-servicio-landing {
    width: 100%;
}
.alineacion-justificada-hueco-landing .widget-contacto-landing {
    width: 100%;
}
.previsualizacion-servicio-landing .nombre-servicio-landing {
    margin: 0 0 2px;
    font-size: 0.85rem;
}
.previsualizacion-servicio-landing .precio-servicio-landing {
    margin: 0 0 6px;
    font-weight: bold;
    color: var(--color-primario);
}
.previsualizacion-servicio-landing .imagen-servicio-landing,
.previsualizacion-servicio-landing .imagen-qr-servicio-landing {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 6px;
}
.previsualizacion-servicio-landing .descripcion-servicio-landing {
    margin-top: 6px;
}
.fila-cerrar-popover-servicio-landing {
    display: flex;
    justify-content: center;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--color-bordes);
}
.previsualizacion-servicio-landing .bloque-qr-pago {
    margin-top: 8px;
}
.previsualizacion-servicio-landing-horizontal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}
.previsualizacion-servicio-landing-horizontal .imagen-servicio-landing,
.previsualizacion-servicio-landing-horizontal .imagen-qr-servicio-landing {
    flex-shrink: 0;
    max-width: 45%;
}
.previsualizacion-servicio-landing-horizontal .info-servicio-landing {
    flex: 1;
    min-width: 0;
}
.previsualizacion-servicio-landing-horizontal .bloque-script-pago {
    margin: 0;
    flex-shrink: 0;
}

.popover-elegir-servicio-landing {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    max-height: 220px;
    overflow-y: auto;
    min-width: 180px;
    background: var(--color-fondo);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.titulo-popover-elegir-servicio-landing {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
    margin-bottom: 2px;
}
.opcion-popover-elegir-servicio-landing {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--color-texto);
    text-align: left;
}
.opcion-popover-elegir-servicio-landing:hover {
    background: var(--color-fondo-alterno);
}
.lista-servicios-pago-consulta-externa {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lista-servicios-pago-consulta-externa li a {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-texto);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lista-servicios-pago-consulta-externa li a:hover {
    border-color: var(--color-primario);
    background-color: var(--color-fondo-hover, rgba(0,0,0,0.03));
}
/* Widget público de solicitud:
   (el hueco de landing suele llevar text-align:center) y popovers
   del editor sin recortar por overflow:hidden del hueco. */
.hueco-seccion-landing:has(.widget-formulario-solicitud-publico) {
    overflow: visible;
}
.widget-formulario-solicitud-publico .editor-enriquecido,
.widget-formulario-solicitud-publico .barra-editor-enriquecido {
    overflow: visible;
    position: relative;
    z-index: 5;
}

/* -----------------------------------------------------------
   Responsive — Landing pública (y suscribirse.php)
   Puntos de ruptura: 1280 / 1024 / 768 / 480
   ----------------------------------------------------------- */

/* 1280px — escritorio pequeño / portátil */
@media (max-width: 1280px) {
    .landing-plantilla-5col_20_20_20_20_20 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .landing-plantilla-4col_40_20_20_20,
    .landing-plantilla-4col_20_20_20_40 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* 1024px — tablet horizontal / portátil pequeño */
@media (max-width: 1024px) {
    .landing-plantilla-3col_33_33_33,
    .landing-plantilla-3col_50_25_25,
    .landing-plantilla-3col_25_25_50,
    .landing-plantilla-3col_25_50_25 {
        grid-template-columns: 1fr 1fr;
    }
    .landing-plantilla-4col_25_25_25_25,
    .landing-plantilla-4col_40_20_20_20,
    .landing-plantilla-4col_20_20_20_40,
    .landing-plantilla-5col_20_20_20_20_20 {
        grid-template-columns: 1fr 1fr;
    }
}

/* 768px — tablet vertical: todo a 1 columna + servicio horizontal apilado */
@media (max-width: 768px) {
    .landing-plantilla-2col_50_50,
    .landing-plantilla-2col_60_40,
    .landing-plantilla-2col_40_60,
    .landing-plantilla-2col_75_25,
    .landing-plantilla-2col_25_75,
    .landing-plantilla-3col_33_33_33,
    .landing-plantilla-3col_50_25_25,
    .landing-plantilla-3col_25_25_50,
    .landing-plantilla-3col_25_50_25,
    .landing-plantilla-4col_25_25_25_25,
    .landing-plantilla-4col_40_20_20_20,
    .landing-plantilla-4col_20_20_20_40,
    .landing-plantilla-5col_20_20_20_20_20 {
        grid-template-columns: 1fr;
    }

    .rejilla-seccion-landing {
        padding: 14px;
        gap: 12px;
    }

    .seccion-landing-ancho-completo {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .previsualizacion-servicio-landing-horizontal {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .previsualizacion-servicio-landing-horizontal .imagen-servicio-landing,
    .previsualizacion-servicio-landing-horizontal .imagen-qr-servicio-landing {
        max-width: 100%;
    }
}

/* 480px — móvil: más compacto */
@media (max-width: 480px) {
    .rejilla-seccion-landing {
        padding: 12px;
        gap: 10px;
        margin-bottom: 12px;
    }

    .seccion-landing-ancho-completo {
        padding-left: 3vw;
        padding-right: 3vw;
    }

    .titulo-seccion-landing {
        font-size: 1.15rem;
    }
}

/* Formularios públicos embebidos en huecos de landing */
@media (max-width: 768px) {
    .widget-formulario-registro-publico,
    .widget-formulario-solicitud-publico {
        max-width: 100%;
    }

    .form-registro-suscriptor-publico input[type="text"],
    .form-registro-suscriptor-publico input[type="password"],
    .form-solicitud-publica input[type="text"],
    .form-solicitud-publica input[type="email"],
    .form-solicitud-publica input[type="tel"],
    .form-solicitud-publica textarea,
    .form-solicitud-publica select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-registro-suscriptor-publico .boton-primario,
    .form-registro-suscriptor-publico .boton-secundario,
    .form-solicitud-publica .boton-primario,
    .form-solicitud-publica .boton-secundario {
        width: 100%;
        box-sizing: border-box;
    }

    .form-registro-suscriptor-publico .campo-password,
    .form-solicitud-publica .campo-password {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .widget-formulario-registro-publico h3,
    .widget-formulario-solicitud-publico h3 {
        font-size: 1.05rem;
    }

    .form-registro-suscriptor-publico,
    .form-solicitud-publica {
        font-size: 0.95rem;
    }
}

/* Contenedor y media de la landing pública en pantallas estrechas */
@media (max-width: 768px) {
    .contenido {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hueco-seccion-landing img,
    .imagen-previsualizacion-hueco-landing,
    .previsualizacion-servicio-landing .imagen-servicio-landing,
    .previsualizacion-servicio-landing .imagen-qr-servicio-landing {
        max-width: 100%;
        height: auto;
    }

    .widget-contacto-landing {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .contenido {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    body.landing-sin-cabecera-pie .contenido {
        padding-top: 0;
        padding-bottom: 0;
    }

    .boton-contacto-landing {
        width: 36px;
        height: 36px;
    }

    .boton-contacto-landing svg {
        width: 18px;
        height: 18px;
    }
}
/* Cabecera global en pantallas estrechas (landing y resto de páginas públicas) */
@media (max-width: 768px) {
    .cabecera {
        flex-direction: column;
        min-height: 0;
    }

    .cabecera__zona-izquierda,
    .cabecera__zona-derecha {
        flex: 1 1 auto;
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .cabecera__zona-izquierda {
        justify-content: center;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .cabecera__zona-derecha {
        flex-direction: column;
    }

    .cabecera__columna-principal,
    .cabecera__columna-lateral {
        flex: 1 1 auto;
        width: 100%;
        padding: 0 12px;
    }

    .cabecera__columna-principal {
        padding-left: 12px;
    }

    .cabecera__area-superior-30 {
        padding: 8px 12px;
        align-items: center;
    }

    .cabecera__imagen-principal {
        width: 120px;
    }

    .header-upper-title {
        font-size: 1.6rem;
    }

    .header-text-for-icon {
        font-size: 0.95rem;
        margin-left: 6px;
        margin-right: 6px;
    }

    .cabecera__texto-secundario {
        padding-top: 8px;
        letter-spacing: 0.1rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .header-upper-title {
        font-size: 1.35rem;
    }

    .cabecera__imagen-principal {
        width: 100px;
    }

    .header-text-for-icon {
        font-size: 0.85rem;
        margin-left: 4px;
        margin-right: 4px;
    }

    .cabecera__area-superior-70 {
        font-size: 0.7rem;
    }
}

/* -----------------------------------------------------------
   Menú principal colapsable (hamburguesa) ≤1024px
   ----------------------------------------------------------- */

/* Escritorio: el botón no se ve */
.boton-menu-hamburguesa {
    display: none;
}

@media (max-width: 1024px) {
    .boton-menu-hamburguesa {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid var(--color-primario);
        border-radius: 8px;
        background: var(--color-fondo);
        color: var(--color-primario);
        font-family: var(--fuente-realce);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        margin: 6px 0;
    }
    .boton-menu-hamburguesa:hover {
        background: var(--color-lista-hover);
        border-color: var(--color-secundario);
        color: var(--color-secundario);
    }
    .boton-menu-hamburguesa .icono-hamburguesa {
        font-size: 1.2rem;
        line-height: 1;
    }

    /* Menú cerrado: solo se ve el botón */
    .cabecera-menu:not(.menu-principal-abierto) > a,
    .cabecera-menu:not(.menu-principal-abierto) > .cabecera-menu-separador,
    .cabecera-menu:not(.menu-principal-abierto) > .form-menu-salir {
        display: none;
    }

    /* Menú abierto: lista vertical a ancho completo */
    /*.cabecera-menu.menu-principal-abierto {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 8px 12px 12px;
        background: var(--color-fondo);
        border-top: 1px solid var(--color-bordes);
    }*/
        /* Necesario para que el menú desplegado se posicione respecto a este contenedor */
    .cabecera__area-menu {
        position: relative;
    }

    .cabecera-menu.menu-principal-abierto {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 8px 12px 12px;
        background: var(--color-fondo);
        border-top: 1px solid var(--color-bordes);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    .cabecera-menu.menu-principal-abierto > a,
    .cabecera-menu.menu-principal-abierto > .form-menu-salir {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-bordes);
        text-decoration: none;
        color: var(--color-texto);
        margin-top: 0;
        border-radius: 0;
    }
    .cabecera-menu.menu-principal-abierto > a:hover,
    .cabecera-menu.menu-principal-abierto > a:active {
        background: var(--color-lista-hover);
        border-bottom-color: var(--color-bordes);
        margin-top: 0;
    }
    .cabecera-menu.menu-principal-abierto > .cabecera-menu-separador {
        display: none;
    }
    .cabecera-menu.menu-principal-abierto > .form-menu-salir {
        border-bottom: none;
        margin-top: 4px;
    }
    .cabecera-menu.menu-principal-abierto > .form-menu-salir button.menu-salir {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
    }

    /* El área del menú ocupa todo el ancho de la cabecera en móvil */
    .cabecera__area-menu {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
        justify-content: flex-start;
    }
}

/* Dashboard — pastillas de resumen en móvil */
@media (max-width: 480px) {
    .resumen-item {
        min-width: 64px;
        padding: 8px 4px;
    }
    .resumen-numero {
        font-size: 1.3rem;
    }
    .resumen-etiqueta {
        font-size: 0.72rem;
    }
}

/* -----------------------------------------------------------
   Tablas del panel — scroll horizontal unificado
   ----------------------------------------------------------- */
.contenedor-tabla-fluida,
.contenedor-tabla-impacientes,
.contenedor-tabla-solicitudes,
.contenedor-tabla-documentos,
.contenedor-tabla-reservas-historico,
.modal-contenedor-tabla {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.contenedor-tabla-documentos,
.contenedor-tabla-reservas-historico {
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .tabla-panel th,
    .tabla-panel td,
    .tabla-solicitudes th,
    .tabla-solicitudes td,
    .tabla-impacientes th,
    .tabla-impacientes td,
    .tabla-documentos th,
    .tabla-documentos td,
    .tabla-reservas-historico th,
    .tabla-reservas-historico td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    /* Evitar que el texto largo fuerce anchos absurdos; el scroll absorbe el resto */
    .tabla-panel td,
    .tabla-solicitudes td,
    .tabla-impacientes td,
    .tabla-documentos td,
    .tabla-reservas-historico td {
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .tabla-panel th,
    .tabla-panel td,
    .tabla-solicitudes th,
    .tabla-solicitudes td,
    .tabla-impacientes th,
    .tabla-impacientes td,
    .tabla-documentos th,
    .tabla-documentos td,
    .tabla-reservas-historico th,
    .tabla-reservas-historico td {
        padding: 6px 4px;
        font-size: 0.8rem;
    }
}

/* -----------------------------------------------------------
   Formularios multi-columna — apilado unificado
   ----------------------------------------------------------- */

/* A ≤1024px: todos los layouts de 3–4 columnas a una sola */
@media (max-width: 1024px) {
    .formulario-tres-columnas-impaciente,
    .formulario-tres-columnas-caso-nuevo,
    .formulario-dos-columnas {
        flex-direction: column;
    }
}

/* A ≤768px: filas internas de dirección/CP y botoneras */
@media (max-width: 768px) {
    .fila-direccion-cp,
    .fila-localidad-cp {
        flex-direction: column;
        gap: 8px;
    }

    .botonera-derecha {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .botonera-derecha > .boton-primario,
    .botonera-derecha > .boton-secundario,
    .botonera-derecha > a.boton-primario,
    .botonera-derecha > a.boton-secundario {
        flex: 1 1 auto;
        text-align: center;
        box-sizing: border-box;
    }
}

/* A ≤480px: botones a ancho completo */
@media (max-width: 480px) {
    .botonera-derecha {
        flex-direction: column;
        align-items: stretch;
    }

    .botonera-derecha > .boton-primario,
    .botonera-derecha > .boton-secundario,
    .botonera-derecha > a.boton-primario,
    .botonera-derecha > a.boton-secundario {
        width: 100%;
    }
}

/* -----------------------------------------------------------
   Calendario — compactación responsive (mínimo usable)
   ----------------------------------------------------------- */

@media (max-width: 768px) {
    .cabecera-calendario {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fila-controles-calendario {
        flex-wrap: wrap;
        gap: 10px;
    }

    .formulario-ir-calendario {
        flex-wrap: wrap;
    }

    .grid-calendario {
        gap: 3px;
    }

    .cabecera-dia-semana-calendario {
        font-size: 0.7rem;
        padding-bottom: 2px;
    }

    .celda-dia-calendario,
    .celda-dia-calendario.celda-vacia {
        min-height: 52px;
        padding: 4px 4px 14px;
        border-radius: 6px;
    }

    .numero-dia-calendario {
        font-size: 0.8rem;
    }

    .iconos-dia-calendario {
        gap: 3px;
    }

    .contenedor-scroll-franjas {
        height: 360px;
    }
}

@media (max-width: 480px) {
    .grid-calendario {
        gap: 2px;
    }

    .cabecera-dia-semana-calendario {
        font-size: 0.62rem;
    }

    .celda-dia-calendario,
    .celda-dia-calendario.celda-vacia {
        min-height: 40px;
        padding: 2px 2px 10px;
        border-radius: 4px;
    }

    .numero-dia-calendario {
        font-size: 0.72rem;
    }

    /* En móvil muy estrecho el detalle del día es el área de trabajo */
    .contenedor-scroll-franjas {
        height: 320px;
    }

    .bloque-franja {
        left: 36px;
        right: 4px;
        font-size: 0.7rem;
        padding: 1px 4px;
    }

    .etiqueta-hora-franja {
        font-size: 0.62rem;
        left: 2px;
    }

    .marca-recordatorio-franja::before {
        left: 30px;
    }

    .boton-campanita-recordatorio-franja {
        left: calc(26px + var(--columna-recordatorio, 0) * 18px);
        font-size: 0.58rem;
    }
}

/* Tablas — tipografía más compacta a ≤1280px */
@media (max-width: 1280px) {
    .tabla-panel th,
    .tabla-panel thead th,
    .tabla-solicitudes th,
    .tabla-impacientes th,
    .tabla-documentos th,
    .tabla-reservas-historico th,
    .tabla-ordenable th {
        font-size: 0.78rem;
    }

    .tabla-panel td,
    .tabla-solicitudes td,
    .tabla-impacientes td,
    .tabla-documentos td,
    .tabla-reservas-historico td {
        font-size: 0.85rem;
        padding: 8px 6px;
    }
}

/* Badges — compactar a ≤1280px (tipo algo; estado más) */
@media (max-width: 1280px) {
    /* Tipo (solicitud, etc.) */
    .badge-tipo-solicitud-impaciente,
    .badge-tipo-solicitud-prescriptor,
    .badge-tipo-solicitud-suscriptor {
        font-size: 0.62rem;
        padding: 1px 6px;
    }

    /* Estado y equivalentes (más agresivo) */
    .badge-solicitud-pendiente,
    .badge-solicitud-aceptada,
    .badge-solicitud-rechazada,
    .badge-estado-sesion,
    .badge-estado-programada,
    .badge-estado-activa,
    .badge-estado-potencial,
    .badge-estado-en-incidencia,
    .badge-estado-realizada,
    .badge-estado-caso-preview,
    .badge-estado-cancelada,
    .badge-estado-caso,
    .badge-pago-pendiente,
    .badge-pago-pagado,
    .badge-pago-cancelado,
    .badge-facturante-activo,
    .badge-facturante-preferente {
        font-size: 0.65rem;
        padding: 2px 7px;
    }
}

/* Fechas formateadas — más compactas a ≤1280px */
@media (max-width: 1280px) {
    .hora-sesion-destacada {
        font-size: 0.72rem;
    }

    .fecha-sesion-lateral,
    .fecha-historial-sesion,
    .fecha-registro-sistema,
    .fecha-pildora {
        font-size: 0.72rem;
    }

    .columna-reserva-fechahora,
    .celda-fecha-sesion-caso,
    .tabla-impacientes td.col-impaciente-fecha-alta,
    .tabla-sesiones .col-sesion-fecha {
        font-size: 0.72rem;
    }
}

/* Solicitudes — anchos de columna solo a ≤1280px */
@media (max-width: 1280px) {
    .tabla-solicitudes th:nth-child(1) { width: 26%; } /* Nombre ↓ */
    .tabla-solicitudes th:nth-child(2) { width: 17%; } /* Tipo ↑ */
    .tabla-solicitudes th:nth-child(3) { width: 22%; } /* Contacto ↓ */
    .tabla-solicitudes th:nth-child(4) { width: 14%; } /* Estado */
    .tabla-solicitudes th:nth-child(5) { width: 21%; } /* Fecha ↑ */
}

/* Solicitudes — ocultar "Cambiar estado" del acordeón a ≤1280px */
@media (max-width: 1280px) {
    .tabla-solicitudes .pastilla-cambiar-estado {
        display: none;
    }
}

/* Impacientes — anchos de columna solo a ≤1280px */
@media (max-width: 1280px) {
    .tabla-impacientes th:nth-child(1),
    .tabla-impacientes td:nth-child(1) { width: 33%; } /* Nombre ↓ */
    .tabla-impacientes th:nth-child(2),
    .tabla-impacientes td:nth-child(2) { width: 15%; } /* DNI ↑ */
    .tabla-impacientes th:nth-child(3),
    .tabla-impacientes td:nth-child(3) { width: 10%; } /* Estado ↑ */
    .tabla-impacientes th:nth-child(4),
    .tabla-impacientes td:nth-child(4) { width: 24%; } /* Calificación */
    .tabla-impacientes th:nth-child(5),
    .tabla-impacientes td:nth-child(5) { width: 17%; } /* Fecha ↑ */
}

@media (max-width: 1280px) {
    .formulario-cuatro-columnas-impaciente-nuevo {
        flex-wrap: wrap;
    }
    .formulario-cuatro-columnas-impaciente-nuevo > .columna-formulario {
        flex: 0 0 calc(49% - var(--hueco, 1rem) / 2);
        min-width: 0;
    }
}

@media (max-width: 1280px) {
    .layout-ficha-impaciente-3col {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1280px) {
    .tabla-ordenable td {
        font-size: 0.75rem;
        padding: 6px 0;
    }
}

@media (max-width: 1280px) {
    /* Modo global: 5 columnas (Impaciente, Título, Tipificación, Estado, Apertura) */
    .tabla-casos-global th:nth-child(1),
    .tabla-casos-global td:nth-child(1) {
        width: 22%;
    }
    .tabla-casos-global th:nth-child(2),
    .tabla-casos-global td:nth-child(2) {
        width: 29%;
    }
    .tabla-casos-global th:nth-child(3),
    .tabla-casos-global td:nth-child(3) {
        width: 11%;
    }
    .tabla-casos-global th:nth-child(4),
    .tabla-casos-global td:nth-child(4) {
        width: 19%;
    }
    .tabla-casos-global th:nth-child(5),
    .tabla-casos-global td:nth-child(5) {
        width: 19%;
    }
}

@media (max-width: 1280px) {
    .tabla-sesiones .col-sesion-medio,
    .tabla-sesiones td:last-child {
        display: none;
    }

    .tabla-sesiones {
        table-layout: fixed;
        width: 100%;
    }

    .tabla-sesiones .col-sesion-fecha {
    width: 22%;
    }
    .tabla-sesiones .col-sesion-impaciente {
        width: 22%;
    }
    .tabla-sesiones .col-sesion-caso {
        width: 34%;
    }
    .tabla-sesiones .col-sesion-estado {
        width: 22%;
    }
}

@media (max-width: 1280px) {
.tabla-pagos th:nth-child(1),.tabla-pagos td:nth-child(1) { display: none; }
.tabla-pagos th:nth-child(2) { width: 17%; }
.tabla-pagos th:nth-child(3) { width: 30%; }
.tabla-pagos th:nth-child(4) { width: 30%; }
.tabla-pagos th:nth-child(5) { width: 13%; }
.tabla-pagos th:nth-child(6) { width: 10%; }
}

@media (max-width: 1280px) {
    .tabla-documentos th:nth-child(1),
    .tabla-documentos td:nth-child(1) {
        width: 18%;
        font-variant-numeric: tabular-nums;
    }
    .tabla-documentos th:nth-child(2),
    .tabla-documentos td:nth-child(2) {
        width: 17%;
    }
    .tabla-documentos th:nth-child(3),
    .tabla-documentos td:nth-child(3) {
        display: none;
    }
    .tabla-documentos th:nth-child(4),
    .tabla-documentos td:nth-child(4) {
        width: 31%;
    }
    .tabla-documentos th:nth-child(5),
    .tabla-documentos td:nth-child(5) {
        width: 19%;
        font-variant-numeric: tabular-nums;
    }
    .tabla-documentos th:nth-child(6),
    .tabla-documentos td:nth-child(6) {
        width: 15%;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 1280px) {
    .rejilla-ajustes-resumen-documento-nuevo {
        flex-wrap: wrap;
    }
    .rejilla-ajustes-resumen-documento-nuevo > :not(:last-child) {
        flex: 0 0 calc(50% - 10px); /* mitad del gap de 20px a cada lado */
        min-width: 0;
    }
    .rejilla-ajustes-resumen-documento-nuevo > :last-child {
        flex: 0 0 100%;
        min-width: 0;
    }

    .rejilla-anadir-lineas-documento {
        flex-wrap: wrap;
    }

    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(1),
    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(2) {
        flex: 1 1 calc(50% - 10px); /* mitad del gap de 20px a cada lado */
    }

    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(3) {
        flex: 1 1 100%;
    }

}

@media (max-width: 1280px) {
    .tabla-prescriptores th:nth-child(1),
    .tabla-prescriptores td:nth-child(1) {
        width: 30%;
    }
    .tabla-prescriptores th:nth-child(2),
    .tabla-prescriptores td:nth-child(2) {
        width: 18%;
    }
    .tabla-prescriptores th:nth-child(3),
    .tabla-prescriptores td:nth-child(3) {
        width: 30%;
    }
    .tabla-prescriptores th:nth-child(4),
    .tabla-prescriptores td:nth-child(4) {
        width: 22%;
    }
    .pastilla-cambiar-estado{
        display:none;
    }
}

@media (max-width: 1280px) {
    .formulario-cuatro-columnas-prescriptor-nuevo {
        flex-wrap: wrap;
    }
    .formulario-cuatro-columnas-prescriptor-nuevo > .columna-formulario {
        flex: 0 0 calc(49% - var(--hueco, 1rem) / 2);
        min-width: 0;
    }
}

@media (max-width: 1280px) {
    .layout-ficha-impaciente {
        flex-direction: column;
    }
    .layout-ficha-impaciente > * {
        width: 100%;
        min-width: 0;
    }
    .layout-ficha-impaciente > .columna-ficha-lateral{
        max-width: 100%;
    }
}
@media (max-width: 1280px) {
    .tabla-catalogo-servicios th:nth-child(1) {
        width:25%;
    }
    .tabla-catalogo-servicios th:nth-child(2) {
        width:12%;
    }
    .tabla-catalogo-servicios th:nth-child(8) {
        width:20%;
    }
}

@media (max-width: 1280px) {
    .tabla-suscriptores th:nth-child(3),
    .tabla-suscriptores td:nth-child(3) {
        width: 22%;
    }
    .tabla-suscriptores th:nth-child(4),
    .tabla-suscriptores td:nth-child(4) {
        width: 23%;
    }
}

@media (max-width: 1280px) {

    /* 1ª parte: ficha principal (datos, suscripción, vinculación) */
    .layout-ficha-suscriptor {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 2ª parte: aviso personal + interacciones, una debajo de otra al 100% */
    .fila-aviso-interacciones-suscriptor {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 3ª parte: formulario de nueva interacción, dentro de la tarjeta de interacciones */
    .formulario-dos-columnas-interacciones {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1280px) {
    .cabecera__zona-izquierda {
        display: flex; /* si ya lo es, esta línea no hace nada */
    }

    .cabecera__caja-imagen {
        flex: 0 0 40%;
    }

    .cabecera__bloque-secundario {
        flex: 0 0 60%;
    }

    .cabecera__texto-secundario {
        font-size: 0.8rem; /* ajusta según el tamaño base real */
        width: max-content;
    }
    .cabecera__imagen-principal{
        transform: scale(0.8);
        transform-origin: left center;
    }
    .cabecera__imagen-secundaria{
        transform: scale(0.7);
        transform-origin: center;
    }
}

@media (max-width: 1024px) {
    #form-solicitud-nuevo > .formulario-dos-columnas {
        flex-direction: row;
    }
    .tarjeta_solicitud > .formulario-dos-columnas {
        flex-direction: row;
    }
    .tarjeta_solicitud2 > .formulario-dos-columnas {
        flex-direction: row;
    }
}

@media (max-width: 1024px) {
    .tabla-sesiones .col-sesion-fecha {
    width: 20%;
    }
    .tabla-sesiones .col-sesion-impaciente {
        width: 22%;
    }
    .tabla-sesiones .col-sesion-caso {
        width: 34%;
    }
    .tabla-sesiones .col-sesion-estado {
        width: 24%;
    }
}
@media (max-width: 1024px) {
    .layout-documentos {
        flex-direction: column;
    }
    .layout-documentos > * {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .tarjeta-configuracion-horario{
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .layout-facturantes {
        flex-direction: column;
    }
    .layout-facturantes > * {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .layout-tipos-documento-columna-lista {
        flex: 60 1 0%;
    }
    .layout-tipos-documento-columna-preview {
        flex: 40 1 0%;
    }
}

@media (max-width: 768px) {
    /* Modo global: 5 columnas (Impaciente, Título, Tipificación, Estado, Apertura) */
    .tabla-casos-global th:nth-child(1),
    .tabla-casos-global td:nth-child(1) {
        width: 28%;
    }
    .tabla-casos-global th:nth-child(2),
    .tabla-casos-global td:nth-child(2) {
        width: 32%;
    }
    .tabla-casos-global th:nth-child(3),
    .tabla-casos-global td:nth-child(3) {
        /*width: 11%;*/
        display:none;
    }
    .tabla-casos-global th:nth-child(4),
    .tabla-casos-global td:nth-child(4) {
        width: 19%;
        padding-left:6px;
    }
    .tabla-casos-global th:nth-child(5),
    .tabla-casos-global td:nth-child(5) {
        width: 22%;
    }
}

@media (max-width: 768px) {
    .rejilla-ajustes-resumen-documento-nuevo > :not(:last-child),
    .rejilla-ajustes-resumen-documento-nuevo > :last-child {
        flex: 1 1 100%;
    }

    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(1),
    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(2),
    .rejilla-anadir-lineas-documento > .tarjeta-anidada:nth-child(3) {
        flex: 1 1 100%;
    }

    .rejilla-cabecera-documento-nuevo,
    .rejilla-trazo-notas-documento {
        flex-wrap: wrap;
    }
    .rejilla-cabecera-documento-nuevo > *,
    .rejilla-trazo-notas-documento > * {
        flex: 1 1 100%;
    }
    .rejilla-trazo-notas-documento{
        display:inline;
    }
}
@media (max-width: 1024px) {

    .tabla-catalogo-servicios thead {
        display: none;
    }

    .tabla-catalogo-servicios,
    .tabla-catalogo-servicios tbody {
        display: block;
        width: 100%;
    }

    .tabla-catalogo-servicios tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-bordes);
    }

    .tabla-catalogo-servicios td {
        display: block;
        flex: 1 1 33%;
        padding: 4px 8px;
        border: none;
    }

    /* Etiqueta de cada dato, tomada del data-label */
    .tabla-catalogo-servicios td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-texto-secundario, #666);
    }

    /* La celda de acciones ocupa su propia línea a ancho completo */
    .tabla-catalogo-servicios td:last-child {
        flex: 1 1 100%;
    }
    .tabla-catalogo-servicios td:last-child::before {
        content: none; /* no necesita etiqueta, ya son botones */
    }

    .grupo-acciones {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .layout-tipos-documento
    {
        flex-flow: column;
    }
}

@media (max-width: 768px) {

    .tabla-catalogo-ajustes-facturacion thead {
        display: none;
    }

    .tabla-catalogo-ajustes-facturacion,
    .tabla-catalogo-ajustes-facturacion tbody {
        display: block;
        width: 100%;
    }

    .tabla-catalogo-ajustes-facturacion tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-bordes);
    }

    .tabla-catalogo-ajustes-facturacion td {
        display: block;
        flex: 1 1 33%;
        padding: 4px 8px;
        border: none;
    }

    /* Etiqueta de cada dato, tomada del data-label */
    .tabla-catalogo-ajustes-facturacion td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-texto-secundario, #666);
    }

    /* La celda de acciones (sin data-label) ocupa su propia línea a ancho completo */
    .tabla-catalogo-ajustes-facturacion td:not([data-label]) {
        flex: 1 1 100%;
    }

    .grupo-acciones {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Fila de edición inline: la celda ya es un bloque único (colspan=7), sin recorte */
    .tabla-catalogo-ajustes-facturacion .fila-editando-ajuste td {
        flex: 1 1 100%;
    }
}
@media (max-width: 480px) {
    .tabla-solicitudes th:nth-child(1) { width: 40%; } /* Nombre ↓ */
    .tabla-solicitudes th:nth-child(2) { display:none; } /* Tipo ↑ */
    .tabla-solicitudes th:nth-child(3) { display:none; } /* Contacto ↓ */
    .tabla-solicitudes th:nth-child(4) { width: 25%; } /* Estado */
    .tabla-solicitudes th:nth-child(5) { width: 35%; } /* Fecha ↑ */

    .tabla-solicitudes td:nth-child(1) { width: 40%; } /* Nombre ↓ */
    .tabla-solicitudes td:nth-child(2) { display:none; } /* Tipo ↑ */
    .tabla-solicitudes td:nth-child(3) { display:none; } /* Contacto ↓ */
    .tabla-solicitudes td:nth-child(4) { width: 25%; } /* Estado */
    .tabla-solicitudes td:nth-child(5) { width: 35%; } /* Fecha ↑ */

    #form-solicitud-nuevo > .formulario-dos-columnas
    {
        flex-direction: column;
    }
    .tarjeta_solicitud > .formulario-dos-columnas {
        flex-direction: column;
    }
    .tarjeta_solicitud2 > .formulario-dos-columnas {
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    .tabla-impacientes th:nth-child(1),
    .tabla-impacientes td:nth-child(1) { width: 40%; } /* Nombre ↓ */
    .tabla-impacientes th:nth-child(2),
    .tabla-impacientes td:nth-child(2) { display:none; } /* DNI ↑ */
    .tabla-impacientes th:nth-child(3),
    .tabla-impacientes td:nth-child(3) { width: 25%; } /* Estado ↑ */
    .tabla-impacientes th:nth-child(4),
    .tabla-impacientes td:nth-child(4) { width: 35%; } /* Calificación */
    .tabla-impacientes th:nth-child(5),
    .tabla-impacientes td:nth-child(5) { display:none; } /* Fecha ↑ */
}

@media (max-width: 768px) {
    .contenido-fila-tarea {
        flex-wrap: wrap;
    }

    .seccion-nombre-tarea {
        flex: 1 1 100%;
    }

    .seccion-progreso-tarea,
    .seccion-acciones-tarea {
        flex: 1 1 auto;
    }
}
@media (max-width: 480px) {
    .seccion-progreso-tarea {
        flex-wrap: wrap;
    }

    .badge-estado-tarea,
    .barra-progreso-plan {
        flex: 1 1 100%;
    }

    .porcentaje-progreso-plan,
    .contenedor-progreso-tarea {
        flex: 1 1 auto;
    }
    .acciones-fila-tarea {
        margin-top: 8px;
    }
}
@media (max-width: 480px) {
    .control-tiempo-sesion,
    .cronometro-sesion,
    .botonera-tiempo-sesion {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
        .tabla-pagos th:nth-child(1),.tabla-pagos td:nth-child(1) { display: none; }
        .tabla-pagos th:nth-child(2) { width: 35%; }
        .tabla-pagos th:nth-child(3) { width: 40%; }
        .tabla-pagos th:nth-child(4),.tabla-pagos td:nth-child(4) { display: none; }
        .tabla-pagos th:nth-child(5),.tabla-pagos td:nth-child(5) { display: none; }
        .tabla-pagos th:nth-child(6) { width: 25%; }
}

@media (max-width: 480px) {
    .tabla-documentos th:nth-child(1),
    .tabla-documentos td:nth-child(1) {
        width: 30%;
        font-variant-numeric: tabular-nums;
    }
    .tabla-documentos th:nth-child(2),
    .tabla-documentos td:nth-child(2) {
        width: 20%;
    }
    .tabla-documentos th:nth-child(3),
    .tabla-documentos td:nth-child(3) {
        display: none;
    }
    .tabla-documentos th:nth-child(4),
    .tabla-documentos td:nth-child(4) {
        width: 30%;
    }
    .tabla-documentos th:nth-child(5),
    .tabla-documentos td:nth-child(5) {
        display: none;
    }
    .tabla-documentos th:nth-child(6),
    .tabla-documentos td:nth-child(6) {
        width: 25%;
        font-variant-numeric: tabular-nums;
    }
}
@media (max-width: 480px) {

    .tabla-lineas-manuales-documento thead {
        display: none;
    }

    .tabla-lineas-manuales-documento,
    .tabla-lineas-manuales-documento tbody {
        display: block;
        width: 100%;
    }

    .tabla-lineas-manuales-documento tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-bordes);
    }

    .tabla-lineas-manuales-documento td {
        display: block;
        flex: 1 1 50%;
        padding: 4px 8px;
        border: none;
    }

    .tabla-lineas-manuales-documento td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-texto-secundario, #666);
    }

    /* La celda de acciones (editar/eliminar), sin data-label, a ancho completo */
    .tabla-lineas-manuales-documento td:not([data-label]) {
        flex: 1 1 100%;
    }

    .fila-acciones-linea {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .tabla-prescriptores th:nth-child(1),
    .tabla-prescriptores td:nth-child(1) {
        width: 40%;
    }
    .tabla-prescriptores th:nth-child(2),
    .tabla-prescriptores td:nth-child(2) {
        width: 25%;
    }
    .tabla-prescriptores th:nth-child(3),
    .tabla-prescriptores td:nth-child(3) {
        display:none;
    }
    .tabla-prescriptores th:nth-child(4),
    .tabla-prescriptores td:nth-child(4) {
        width: 35%;
    }
    .pastilla-cambiar-estado{
        display:none;
    }
}
@media (max-width: 768px) {
    .layout-reservas-historico {
        flex-direction: column;
    }
    .layout-reservas-historico > * {
        width: 100%;
        min-width: 0;
    }
}
.boton-volver-arriba {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
}
.boton-volver-arriba.visible {
    opacity: 1;
    visibility: visible;
}
.boton-volver-arriba:hover {
    transform: scale(1.08);
    background: var(--color-secundario-hover);
}

@media (max-width: 480px) {
    .boton-ayuda-flotante{right: 48px;}
    .navegador-ficha-derecha {right: 48px;}
    .boton-volver-arriba {right: 48px;}
}
.barra-progreso-lectura {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-secundario);
    z-index: 1000;
    transition: width 0.1s linear;
}
.disclaimer_text {
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
}