:root {
    --color-primario: #0e3a68;
    --color-secundario: #3b5998;
    --color-fondo: #f1f5f9;
    --color-blanco: #ffffff;
    --color-texto: #1e293b;
    --color-borde: #cbd5e1;
    --color-texto-suave: #64748b;
    --color-exito: #16a34a;
    --color-error: #dc2626;
    --color-gris-seccion: #52525b;
    --color-mostaza-seccion: #ca8a04;
    --color-vino-seccion: #991b1b;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Apariencia unificada de los campos de texto libre y listas desplegables */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-primario);
    outline-offset: 1px;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-size: 15px;
    /* Evita el desbordamiento horizontal que produce una barra lateral de
       desplazamiento en pantallas pequeñas (los contenedores internos se
       reordenan en vertical). */
    overflow-x: hidden;
}

/* Las fotos no se pueden arrastrar, seleccionar ni descargar con el menú
   contextual (reforzado además desde JS). */
img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* ========================================================
   NAVBAR Y MENÚS
   ======================================================== */
.navbar {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 0.6rem 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

.navbar-fila {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
    margin: auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    position: relative;
    /* Antes del login no hay módulos visibles: sin esta altura mínima la fila
       se colapsa y la barra queda más baja que el icono de perfil (que está
       posicionado de forma absoluta). */
    min-height: 44px;
}

.tabs-nav-desktop {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 3.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-nav-desktop::-webkit-scrollbar {
    display: none;
}

.navbar-acciones {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Avatar de perfil (círculo claro) + menú desplegable */
.perfil-menu {
    position: relative;
}

.btn-perfil {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e8f0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-primario);
    transition: background 0.2s;
}

.btn-perfil:hover {
    background: #ffffff;
}

.perfil-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    min-width: 210px;
    overflow: visible;
    z-index: 500;
}

.perfil-dropdown.abierto {
    display: block;
}

.perfil-usuario {
    padding: 0.65rem 0.9rem;
    font-size: 0.88rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.perfil-opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    background: white;
    border: none;
    text-align: left;
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #0f172a;
}

.perfil-opcion-ico {
    min-width: 1.1em;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ícono de apagado de "Cerrar sesión": SVG contenido dentro de su caja. */
.perfil-power-ico {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.perfil-opcion:hover {
    background: #f1f5f9;
}

.perfil-salir {
    color: #b91c1c;
}

/* Esquinas del menú de perfil: redondeo idéntico arriba y abajo. */
.perfil-dropdown > :first-child {
    border-radius: 8px 8px 0 0;
}

.perfil-dropdown > :last-child {
    border-radius: 0 0 8px 8px;
}

.btn-icono {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 1.3rem;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icono:hover {
    background: rgba(255,255,255,0.3);
}

.btn-hamburguesa {
    display: none; /* Oculto en PC por defecto */
}

/* ========================================================
   ICONOS (SVG de Lucide en /img/iconos_ui/)
   El SVG se usa como máscara y el color lo da currentColor, así
   el icono hereda el color del texto en el que se pone (navbar,
   drawer, título de módulo, botones, hover y activo) sin repetir
   un archivo por cada color. El modificador aporta el archivo.
   `.ico-modulo` es la variante de módulo y `.ico` la genérica
   para el resto de la interfaz; comparten la misma regla.
   ======================================================== */
.ico,
.ico-modulo {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--ico, none) center / contain no-repeat;
    mask: var(--ico, none) center / contain no-repeat;
    vertical-align: -0.15em;
}

.ico-modulo.programas { --ico: url("/img/iconos_ui/programas.svg"); }
.ico-modulo.publicadores { --ico: url("/img/iconos_ui/publicadores.svg"); }
.ico-modulo.vmc { --ico: url("/img/iconos_ui/vmc.svg"); }
.ico-modulo.privilegios { --ico: url("/img/iconos_ui/privilegios.svg"); }
.ico-modulo.limpieza { --ico: url("/img/iconos_ui/limpieza.svg"); }
.ico-modulo.reunion-publica { --ico: url("/img/iconos_ui/reunion-publica.svg"); }
.ico-modulo.predicacion { --ico: url("/img/iconos_ui/predicacion.svg"); }
.ico-modulo.pdf { --ico: url("/img/iconos_ui/pdf.svg"); }

.ico.cerrar { --ico: url("/img/iconos_ui/cerrar.svg"); }
.ico.basura { --ico: url("/img/iconos_ui/basura.svg"); }
.ico.bajar { --ico: url("/img/iconos_ui/bajar.svg"); }
.ico.subir { --ico: url("/img/iconos_ui/subir.svg"); }
.ico.aviso { --ico: url("/img/iconos_ui/aviso.svg"); }
.ico.calendario { --ico: url("/img/iconos_ui/calendario.svg"); }
.ico.calendario-reloj { --ico: url("/img/iconos_ui/calendario-reloj.svg"); }
.ico.calendario-dias { --ico: url("/img/iconos_ui/calendario-dias.svg"); }
.ico.camara { --ico: url("/img/iconos_ui/camara.svg"); }
.ico.edificio { --ico: url("/img/iconos_ui/edificio.svg"); }
.ico.carpeta { --ico: url("/img/iconos_ui/carpeta.svg"); }
.ico.lapiz { --ico: url("/img/iconos_ui/lapiz.svg"); }
.ico.persona { --ico: url("/img/iconos_ui/persona.svg"); }
.ico.llave { --ico: url("/img/iconos_ui/llave.svg"); }
.ico.arena { --ico: url("/img/iconos_ui/arena.svg"); }
.ico.buscar { --ico: url("/img/iconos_ui/buscar.svg"); }
.ico.bombilla { --ico: url("/img/iconos_ui/bombilla.svg"); }
.ico.paleta { --ico: url("/img/iconos_ui/paleta.svg"); }
.ico.musica { --ico: url("/img/iconos_ui/musica.svg"); }
.ico.oveja { --ico: url("/img/iconos_ui/oveja.svg"); }
.ico.engranaje { --ico: url("/img/iconos_ui/engranaje.svg"); }
.ico.ubicacion { --ico: url("/img/iconos_ui/ubicacion.svg"); }
.ico.diana { --ico: url("/img/iconos_ui/diana.svg"); }
.ico.guardar { --ico: url("/img/iconos_ui/guardar.svg"); }
.ico.microfono { --ico: url("/img/iconos_ui/microfono.svg"); }
.ico.apreton { --ico: url("/img/iconos_ui/apreton.svg"); }
.ico.enviar { --ico: url("/img/iconos_ui/enviar.svg"); }
.ico.portapapeles { --ico: url("/img/iconos_ui/portapapeles.svg"); }
.ico.puerta { --ico: url("/img/iconos_ui/puerta.svg"); }
.ico.casa { --ico: url("/img/iconos_ui/casa.svg"); }
.ico.mas { --ico: url("/img/iconos_ui/mas.svg"); }
.ico.menu { --ico: url("/img/iconos_ui/menu.svg"); }
.ico.actualizar { --ico: url("/img/iconos_ui/actualizar.svg"); }
.ico.documento { --ico: url("/img/iconos_ui/documento.svg"); }
.ico.enlace { --ico: url("/img/iconos_ui/enlace.svg"); }
.ico.monumento { --ico: url("/img/iconos_ui/monumento.svg"); }
.ico.biblioteca { --ico: url("/img/iconos_ui/biblioteca.svg"); }
.ico.archivo { --ico: url("/img/iconos_ui/archivo.svg"); }
.ico.ojo { --ico: url("/img/iconos_ui/ojo.svg"); }
.ico.imagen { --ico: url("/img/iconos_ui/imagen.svg"); }
.ico.palomita { --ico: url("/img/iconos_ui/palomita.svg"); }
.ico.calendario-chevrons-derecha { --ico: url("/img/iconos_ui/calendario-chevrons-derecha.svg"); }
.ico.calendario-check-2 { --ico: url("/img/iconos_ui/calendario-check-2.svg"); }
.ico.vino { --ico: url("/img/iconos_ui/vino.svg"); }
.ico.joya { --ico: url("/img/iconos_ui/joya.svg"); }
.ico.trigo { --ico: url("/img/iconos_ui/trigo.svg"); }
.ico.reloj { --ico: url("/img/iconos_ui/reloj.svg"); }
.ico.reloj-giro-izquierda { --ico: url("/img/iconos_ui/reloj-giro-izquierda.svg"); }
.ico.mapa { --ico: url("/img/iconos_ui/mapa.svg"); }
.ico.sol { --ico: url("/img/iconos_ui/sol.svg"); }
.ico.pluma { --ico: url("/img/iconos_ui/pluma.svg"); }
.ico.atardecer { --ico: url("/img/iconos_ui/atardecer.svg"); }
.ico.flecha-izquierda { --ico: url("/img/iconos_ui/flecha-izquierda.svg"); }
.ico.flecha-derecha { --ico: url("/img/iconos_ui/flecha-derecha.svg"); }
.ico.mano { --ico: url("/img/iconos_ui/mano.svg"); }

.tab-btn {
    background: transparent;
    border: none;
    color: #e2e8f0;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.25;
    text-align: left;
    flex-shrink: 0;
    min-height: 44px; /* Igual que el botón de perfil y la hamburguesa */
}

.tab-ico {
    flex-shrink: 0;
    line-height: 1;
}

.tab-label {
    display: inline-block;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.tab-btn.active {
    background: var(--color-blanco);
    color: var(--color-primario);
}

/* ========================================================
   DRAWER / MENÚ LATERAL MÓVIL
   ======================================================== */
.drawer-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 200;
}

.drawer-menu {
    position: fixed;
    top: 0; right: -280px; width: 280px; height: 100%;
    background: white;
    z-index: 201;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    /* Cerrado también queda fuera del recorrido del teclado: si no, al tabular
       se recorren sus botones aunque en escritorio no se vean. */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
}

.drawer-menu.abierto {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease, visibility 0s;
}

.drawer-header {
    background: var(--color-primario);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-links {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    overflow-y: auto;
}

.drawer-btn {
    background: none;
    border: none;
    text-align: left;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.3;
}

.drawer-btn .tab-ico {
    min-width: 1.4em;
    text-align: center;
}

.drawer-btn:hover, .drawer-btn.active {
    background: #e2e8f0;
    color: var(--color-primario);
}

/* ========================================================
   ALERTA FLOTANTE (MENSAJES DE ERROR / ÉXITO)
   ======================================================== */
.alerta-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 1rem;
}

.alerta-caja {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    text-align: center;
    font-weight: bold;
}

.alerta-cerrar {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    opacity: 0.75;
}

.alerta-cerrar:hover {
    opacity: 1;
}

.alerta-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
}

.alerta-exito {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

/* Aviso de advertencia (misma paleta que la confirmación): se usa cuando se
   informa de algo no bloqueante pero importante (p. ej. tema ya presentado). */
.alerta-advertencia {
    background-color: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
}

/* Confirmación dentro de la app: fondo amarillo tenue de advertencia, legible
   sobre cualquier pantalla (la confirmación de borrado puede ser muy larga). */
.alerta-confirmar {
    background-color: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
}

/* Aviso destacado dentro de un modal (misma paleta que la confirmación):
   lleva padding y borde redondeado propios para no depender del contenedor. */
.modal-advertencia {
    background-color: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-top: 0.8rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.alerta-confirmar-fila {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

/* ========================================================
   BARRA DE MES Y CONTENEDOR
   ======================================================== */
.barra-mes-global {
    background: #ffffff;
    border-bottom: 2px solid var(--color-borde);
    padding: 0.75rem 1rem;
    display: none; /* Solo visible en los módulos de programa */
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.barra-mes-global select {
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
}

.mes-flecha {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    color: var(--color-texto);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mes-flecha:hover {
    background: #eef2f7;
    border-color: var(--color-borde-oscuro);
}

.mes-flecha:active {
    transform: scale(0.96);
}

.badge-info {
    background: #e2e8f0;
    color: #334155;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.semanas-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    align-items: center;
}

.chip-semana {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    color: #1e293b;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chip-semana:hover {
    background: var(--color-primario);
    color: #ffffff;
}

.semana-resaltada {
    animation: destello-semana 1.7s ease;
}

@keyframes destello-semana {
    0%   { box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.55); }
    100% { box-shadow: 0 0 0 3px rgba(2, 132, 199, 0); }
}

.contenedor-principal {
    padding: 1rem;
    max-width: 1200px;
    margin: auto;
}
/* En pantallas anchas (16:9, 21:9) el contenido puede crecer para que quepan
   más jornadas por fila sin estrecharlas. */
@media (min-width: 1560px) { .contenedor-principal { max-width: 1500px; } }
@media (min-width: 1920px) { .contenedor-principal { max-width: 1800px; } }
@media (min-width: 2500px) { .contenedor-principal { max-width: 2400px; } }

.pestana-contenido {
    display: none;
    background: var(--color-blanco);
    padding: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pestana-contenido.activa {
    display: block;
}

.header-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

/* Grupo de acciones del encabezado de módulo: título a la izquierda, botones
   a la derecha. Estándar de la skill coherencia-ui (reemplaza inline repetido). */
.acciones-modulo {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-primario, .btn-secundario {
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-primario { background: var(--color-primario); color: white; }
.btn-secundario { background: #64748b; color: white; }

/* Mini botones de acción dentro de filas y tablas.
   Reemplazan estilos inline repetidos (ver skill coherencia-ui). */
.btn-mini-fila {
    padding: 0.2rem 0.4rem;
    min-height: 32px;
}

.btn-mini-tabla {
    min-height: 34px;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
}

/* ========================================================
   TARJETAS VMC (LIMPIAS SIN LINKS)
   ======================================================== */
.semanas-mes-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tarjeta-semana-completa {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    overflow: hidden;
}

.tarjeta-semana-header {
    background: #1e293b;
    color: white;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Botón para ocultar/mostrar el contenido de una semana (︿/﹀): solo la forma,
   sin fondo, colocado a la orilla izquierda de la cabecera. */
.semana-toggle {
    background: transparent;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.semana-toggle:hover {
    background: transparent;
}

.semana-toggle .semana-chevron {
    color: white;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

/* Semana oculta: el mismo chevron gira 180° para mostrarse como ﹀. Al girar la
   misma forma el centro nunca se desplaza: solo se invierte la forma. */
.semana-colapsada .semana-toggle .semana-chevron {
    transform: rotate(0deg);
}

/* Semana oculta: solo queda el encabezado con el botón ﹀ */
.semana-colapsada .tarjeta-semana-body,
.semana-colapsada .vmc-eventos-header {
    display: none;
}

.predicacion-semana.semana-colapsada .predicacion-grid {
    display: none;
}

/* Checkboxes de eventos de la semana (Asamblea / Conmemoración) */
.vmc-eventos-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.checkbox-evento {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    padding: 0.35rem 0.6rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.checkbox-evento input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-evento:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.select-evento {
    min-height: 32px;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: white;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Bloque de asignaciones de la Conmemoración */
.seccion-conmemoracion .seccion-titulo {
    background-color: var(--color-vino-seccion);
}

.input-cancion {
    min-height: 40px;
    width: 130px;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    font-size: 0.9rem;
}

/* Reglas de asignaciones en Ajustes */
.reglas-grid {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.regla-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
}

.regla-fila .regla-nombre {
    font-weight: 600;
    color: #0f172a;
}

.regla-nombre-input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    background: white;
}

.regla-nombre-input:focus {
    outline: 2px solid var(--color-primario, #0f766e);
    outline-offset: 1px;
}

.ajuste-subtitulo {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin: 1.2rem 0 0.4rem;
}

.ajuste-ayuda {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.8rem;
}

/* Texto descriptivo de tarjetas de ajuste y modales. Reemplaza el estilo
   inline "color:#64748b; font-size:0.9rem; margin-top:0.3rem" repetido. */
.texto-ayuda {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.regla-fila .regla-nombre-input {
    flex: 1;
    min-width: 220px;
}

.regla-fila .regla-opciones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.regla-fila .regla-opciones label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #334155;
    cursor: pointer;
}

/* Filas de formulario en Ajustes: el campo se estira al ancho disponible */
.form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-row input[type="text"],
.form-row input[type="number"] {
    flex: 1 1 auto;
    min-width: 220px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    font-size: 0.95rem;
}

.card-ajustes {
    width: 100%;
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}

.card-ajustes h3 {
    margin: 0;
}

.tarjeta-semana-body {
    padding: 1rem;
}

.vmc-banner-header {
    background: var(--color-primario);
    color: white;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

/* Etiqueta "Presidente:" al lado IZQUIERDO del selector, igual que las oraciones */
.vmc-presidencia-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vmc-presidencia-box label {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 600;
    white-space: nowrap;
}

.canto-barra {
    background: #f1f5f9;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-weight: 600;
    margin: 0.6rem 0;
}

.vmc-seccion {
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.seccion-titulo {
    color: white;
    padding: 0.6rem 0.8rem;
    font-weight: bold;
}

/* Título del bloque VIENE: alinea a la derecha el interruptor "Otra
   Congregación" (misma apariencia que el de "Turno adicional"). */
.publica-titulo-viene {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.publica-otracong-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.seccion-tesoros .seccion-titulo { background-color: var(--color-gris-seccion); }
.seccion-maestros .seccion-titulo { background-color: var(--color-mostaza-seccion); }
.seccion-vida .seccion-titulo     { background-color: var(--color-vino-seccion); }

.partes-lista {
    padding: 0.6rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.parte-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.parte-info {
    flex: 1;
    min-width: 250px;
}

.parte-titulo { font-weight: 600; }
.parte-minutos { font-size: 0.85rem; color: #64748b; }

.parte-asignados {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.parte-asignados-vida {
    align-items: center;
}

/* Bloque de oración inicial/final (etiqueta + campo de asignación) */
.oracion-bloque {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.select-asignado {
    padding: 0.5rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    min-height: 40px;
    min-width: 170px;
}

/* ========================================================
   TABLAS Y MODALES
   ======================================================== */
.tabla-contenedor { overflow-x: auto; }
.tabla-datos { width: 100%; border-collapse: collapse; min-width: 600px; }
.tabla-datos th, .tabla-datos td { padding: 0.7rem; border-bottom: 1px solid var(--color-borde); text-align: center; }

/* El directorio de publicadores se autoajusta a las columnas habilitadas:
   el ancho se reparte solo entre las columnas visibles (layout automático). */
#tabla-publicadores { width: 100%; }

/* Filas con altura mínima estable: el texto largo envuelve y la fila crece
   para mostrar el contenido completo (p. ej. todos los privilegios). */
#tabla-publicadores tbody tr { height: 58px; }
#tabla-publicadores tbody td {
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Títulos y contenido de las columnas centrados. */
#tabla-publicadores th,
#tabla-publicadores td {
    vertical-align: middle;
    text-align: center;
}

.foto-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }

/* Estado de la ficha en el directorio. Los estados son excluyentes entre sí. */
.estado-publicador { font-weight: 600; }
.estado-activo { color: var(--color-exito); }
.estado-inhabilitado { color: var(--color-error); }
.estado-sacado { color: var(--color-texto-suave); }
/* "Inactivo" es una pausa (viaje, enfermedad, mudanza…): el mostaza con el que
   la app ya marca lo temporal. */
.estado-inactivo { color: var(--color-mostaza-seccion); }
.estado-no-publicador { color: var(--color-secundario); }

/* Fila vacía de una tabla (sin resultados o sin datos todavía). */
.tabla-vacio {
    text-align: center;
    color: var(--color-texto-suave);
}

/* Pie de paginación del directorio de publicadores (contador, páginas y chevrons) */
.paginacion-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.paginacion-total {
    font-weight: 600;
    color: var(--color-texto);
    font-size: 0.9rem;
}
.paginacion-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.paginacion-boton {
    min-width: 34px;
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    background: white;
    color: var(--color-primario);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.paginacion-boton:hover:not(:disabled) { background: var(--color-primario); color: white; }
.paginacion-boton:disabled { opacity: 0.4; cursor: not-allowed; }
.paginacion-numero {
    font-size: 0.88rem;
    color: var(--color-texto-suave, #475569);
    min-width: 96px;
    text-align: center;
}

.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; padding: 1rem;
}
.modal.abierto { display: flex; }
/* Los modales se abren anchos para que quepa la información en pantallas
   grandes; en móvil siguen ocupando todo el ancho disponible. */
.modal-contenido { background: white; padding: 2rem 1.5rem 1.5rem; border-radius: 8px; width: 100%; max-width: 780px; max-height: 90vh; overflow-y: auto; position: relative; }

.modal-x {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.modal-x:hover { background: #e2e8f0; color: #0f172a; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.grid-form input, .grid-form select { width: 100%; min-height: 40px; padding: 0.4rem; border: 1px solid var(--color-borde); border-radius: 4px; }
.col-span-2 { grid-column: span 2; }
/* Opciones con casilla: la casilla siempre a la izquierda y el texto alineado a
   su lado, también en móvil (la rejilla pasa a una sola columna sola cuando no
   cabe). Se usa en Ajustes, en la ficha de publicador y en los permisos. */
.opcion-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.opcion-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.1rem 0 0;
    flex: 0 0 auto;
}

.opcion-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.45rem 1.2rem;
    margin: 0.4rem 0 0.8rem;
}

/* Gestión de permisos por módulo en el modal de usuarios. */
#permisos-usuario {
    margin-top: 1rem;
}

.permisos-ayuda {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 0.8rem;
}

.permisos-grupo {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.6rem;
}

.permisos-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.permisos-subtitulo {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0.4rem 0 0.2rem;
}

/* Módulo sin permiso de edición: ningún control responde y los campos se
   muestran en gris, como deshabilitados. Solo queda utilizable el botón que
   pliega la semana. */
.solo-lectura :is(button, input, select, textarea):not(.semana-toggle) {
    pointer-events: none;
}

.solo-lectura :is(input, select, textarea) {
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
}

.solo-lectura :is(.conta-switch, .checkbox-evento) {
    opacity: 0.6;
}

.pub-foto-zona {
    position: relative;
    border: 2px dashed var(--color-borde);
    border-radius: 6px;
    padding: 0.6rem;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
    background: var(--color-fondo-claro, #f8fafc);
    color: var(--color-texto-suave, #64748b);
    font-size: 0.85rem;
    text-align: center;
}
.pub-foto-zona.arrastrando {
    border-color: var(--color-accent, #166534);
    background: var(--color-accent-suave, #dcfce7);
}
.pub-foto-zona:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 1px;
    border-color: var(--color-primario);
    background: var(--color-fondo-claro, #eef2f7);
}
.pub-foto-quitar {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--color-peligro, #b91c1c);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.pub-foto-quitar:hover { background: #7f1d1d; }
.pub-foto-preview {
    max-width: 56px;
    max-height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.pub-foto-zona input[type="file"] { display: none; }

.icono-zona { min-height: 96px; padding: 0.6rem; align-items: center; justify-content: center; text-align: center; }
.icono-zona .pub-foto-preview { max-height: 70px; width: auto; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }

/* ========================================================
   BREAKPOINTS: MÓVIL Y TABLET (< 900px)
   ======================================================== */
@media (max-width: 900px) {
    .tabs-nav-desktop { display: none; } /* Ocultar barra horizontal */
    .btn-hamburguesa { display: flex; } /* Mostrar botón hamburguesa */
    .navbar-fila { justify-content: flex-end; } /* Perfil a la derecha en móvil */
    .navbar-acciones { position: static; transform: none; }
    
    .grid-form { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }

    .parte-item { flex-direction: column; align-items: stretch; }
    .parte-asignados { flex-direction: column; width: 100%; align-items: flex-start; }
    .parte-asignados-vida { align-items: flex-start; }
    .autocomplete-box { width: 100%; }
    .vmc-presidencia-box { flex-direction: column; align-items: flex-start; width: 100%; }
    .vmc-presidencia-box > .etiqueta-asignacion,
    .vmc-presidencia-box > .autocomplete-box,
    .vmc-presidencia-box > .parte-asignados { width: 100%; }
    .bloque-intermedio { flex-direction: column; align-items: flex-start; width: 100%; text-align: left; }
    .bloque-intermedio > * { align-self: flex-start; width: 100%; }
    .oracion-bloque { flex-direction: column; align-items: flex-start; width: 100%; }
    .oracion-bloque .autocomplete-box { width: 100%; }
    .input-cancion { width: 100%; }
    .select-asignado { width: 100%; }
    .vmc-banner-header { flex-direction: column; align-items: stretch; }
    .barra-mes-global select { flex: 1; }
    /* Selector de semana centrado cuando queda debajo de la fila del mes. */
    .barra-mes-global { align-items: center; }
    .semanas-chips { width: 100%; justify-content: center; }
    #indicador-carga { width: 100%; text-align: center; }
}

/* ========================================================
   COMPONENTE DE AUTOCOMPLETADO PREDICTIVO
   ======================================================== */
.autocomplete-box {
    position: relative;
    width: 210px;
}

.autocomplete-input {
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    font-size: 0.95rem;
    background: white;
}

.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 50;
}

.autocomplete-dropdown.visible {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item:hover {
    background-color: #f1f5f9;
}

.autocomplete-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Opción resaltada con el teclado (↑/↓ + Enter) */
.autocomplete-item.resaltado {
    background-color: #e0e7ef;
}

/* Opción "Quitar asignación" del desplegable: mismo estilo que la opción
   "Quitar lugar" de Predicación (rojo, borde inferior, icono ✖ en negrita). */
.autocomplete-item-quitar {
    font-weight: 600;
    gap: 0.4rem;
    font-size: 0.85rem;
    justify-content: flex-start;
    border-bottom: 1px solid var(--color-borde);
}

.autocomplete-item-quitar:hover {
    background-color: #eff6ff;
}

/* ========================================================
   CORRECCIÓN DE DESPLEGABLE Y 2 LÍNEAS DE ASIGNACIONES
   ======================================================== */
.autocomplete-box {
    position: relative;
    width: 210px;
}

/* El texto dentro del desplegable SIEMPRE debe ser oscuro */
.autocomplete-dropdown {
    color: #1e293b !important;
}

.autocomplete-item {
    color: #1e293b !important;
}

/* "Quitar asignación" siempre en rojo: esta regla va DESPUÉS del !important
   anterior y con la misma importancia, así gana el orden. */
.autocomplete-item-quitar {
    color: #b91c1c !important;
}

.autocomplete-item strong {
    color: #0f172a !important;
}

/* Línea 1: Título con el color institucional de su sección */
.seccion-tesoros .parte-titulo {
    color: #3f4e5a;
    font-weight: 700;
    font-size: 0.98rem;
}

.seccion-maestros .parte-titulo {
    color: #9a6700;
    font-weight: 700;
    font-size: 0.98rem;
}

.seccion-vida .parte-titulo {
    color: #881320;
    font-weight: 700;
    font-size: 0.98rem;
}

/* Línea 2: Minutos, fuentes y referencias */
.parte-linea-detalle {
    font-size: 0.88rem;
    color: #334155;
    margin-top: 0.2rem;
    line-height: 1.4;
}

.parte-linea-detalle em, .parte-linea-detalle a {
    color: #0369a1;
    font-style: italic;
}

/* ========================================================
   ESTÉTICA UNIFICADA: CÁNTICOS, INTRODUCCIÓN Y CONCLUSIÓN
   ======================================================== */
.bloque-intermedio {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--color-primario);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.6rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.canto-barra {
    display: none; /* Reemplazado por bloque-intermedio unificado */
}

/* ========================================================
   ELIMINACIÓN DE LÍNEA AZUL Y REFINAMIENTO DE BLOQUES
   ======================================================== */
.bloque-intermedio {
    background: #f8fafc;
    border: 1px solid #e2e8f0 !important; /* Borde uniforme sin línea azul */
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.6rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-peligro {
    background-color: #b91c1c;
    color: white;
    border: none;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-peligro:hover {
    background-color: #991b1b;
}

/* Botón flotante semitransparente para subir al principio de la página. */
.btn-subir {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #0e3a68;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(2, 8, 23, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}

.btn-subir:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* La regla "hidden" no debe verse pisada por el "display: flex" anterior: el
   botón solo aparece cuando el usuario se aleja del comienzo de la página. */
.btn-subir[hidden] {
    display: none;
}

/* ========================================================
   CORRECCIÓN DEFINITIVA DE DESPLEGABLES CORTADOS
   ======================================================== */
.tarjeta-semana-completa,
.tarjeta-semana-body,
.vmc-seccion,
.partes-lista,
.parte-item,
.parte-asignados {
    overflow: visible !important; /* Nunca cortar desplegables */
}

.autocomplete-box {
    position: relative;
    width: 220px;
    z-index: 10;
}

.autocomplete-box:focus-within {
    z-index: 100; /* Prioridad máxima al desplegar */
}

.autocomplete-dropdown {
    z-index: 1000 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

/* ========================================================
   ESTILOS CALENDARIO FLOTANTE EN ESPAÑOL
   ======================================================== */
.popover-calendario {
    display: none;
    position: absolute;
    width: 260px;
    max-width: calc(100vw - 1rem);
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 0.8rem;
    z-index: 2000;
}

@media (max-width: 480px) {
    .popover-calendario { width: min(260px, calc(100vw - 1rem)); }
    .cal-dia { font-size: 0.85rem; padding: 0.25rem 0; }
    .cal-celda { font-size: 0.8rem; }
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.cal-header button {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

.cal-etiqueta {
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-left: 0;
}

.cal-header .cal-etiqueta {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
}

.cal-etiqueta:hover {
    background: #e2e8f0;
}

.cal-mes-grid,
.cal-anio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
    margin-bottom: 0.6rem;
}

.cal-celda {
    padding: 0.5rem 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #334155;
    background: #f8fafc;
    border: 1px solid transparent;
    font-family: inherit;
}

.cal-celda:hover {
    background-color: var(--color-primario);
    color: white;
}

.cal-celda.sel {
    background-color: var(--color-primario);
    color: white;
    font-weight: 700;
}

.cal-volver {
    width: 100%;
    margin-top: 0.4rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.35rem 0;
    cursor: pointer;
    color: #475569;
    font-weight: 600;
    font-size: 0.85rem;
}

.cal-volver:hover {
    background: #e2e8f0;
}

.cal-semana-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    color: #64748b;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.cal-grid-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-dia {
    padding: 0.35rem 0;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: inherit;
}

.cal-dia:hover:not(.vacio) {
    background-color: var(--color-primario);
    color: white;
}

.cal-dia:focus-visible,
.cal-celda:focus-visible,
.cal-etiqueta:focus-visible,
.cal-volver:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 1px;
}

.cal-dia.vacio {
    cursor: default;
}

/* ========================================================
   PANTALLA DE LOGIN
   ======================================================== */
.login-pantalla {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a8a, #0f172a);
    padding: 1rem;
}

.login-caja {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    padding: 2rem 1.8rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.login-logo img {
    width: 52px;
    height: 52px;
    display: block;
}

.login-caja h1 {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
}

.login-sub {
    color: #64748b;
    margin: 0.3rem 0 1.4rem;
    font-size: 0.9rem;
}

.login-caja form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
}

.login-caja label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.login-caja input {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.login-caja .btn-primario {
    margin-top: 0.6rem;
    min-height: 44px;
    font-size: 1rem;
}

.login-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
}

/* Bienvenida del inicio (modo invitado) y modales de acceso: el inicio de
   sesión y la creación del primer administrador comparten el mismo formulario
   centrado (clase .modal-acceso). */
#programa-semana-inicio .login-caja { margin: 2.4rem auto; }

.modal-acceso .modal-contenido { max-width: 400px; text-align: center; }
.modal-acceso h1 { margin: 0; font-size: 1.35rem; color: #0f172a; }
.modal-acceso .login-sub { margin: 0.3rem 0 1.2rem; }
.modal-acceso form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
}
.modal-acceso label { font-size: 0.85rem; font-weight: 700; color: #334155; }
.modal-acceso input {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}
.modal-acceso .btn-primario { margin-top: 0.6rem; min-height: 44px; font-size: 1rem; }

/* ========================================================
   CABECERAS ORDENABLES
   ======================================================== */
.tabla-datos th.ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tabla-datos th.ordenable:hover {
    background-color: #eef2f7;
}

.tabla-datos th.ordenable:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: -1px;
}

.tabla-datos th.ordenado {
    color: var(--color-primario);
}

.flecha-orden {
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    min-width: 1.05em;
}

/* Columnas ocultables del directorio */
.tabla-datos .oculto {
    display: none;
}

/* ========================================================
   USUARIOS Y PERMISOS
   ======================================================== */
.lista-usuarios {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fila-usuario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.7rem 1rem;
}

.fila-usuario-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fila-usuario-acciones {
    display: flex;
    gap: 0.4rem;
}

.badge-rol {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: capitalize;
}

.rol-admin { background: #dcfce7; color: #166534; }
.rol-editor { background: #dbeafe; color: #1e40af; }
.rol-visita { background: #fef9c3; color: #a16207; }
.rol-personalizado { background: #f3e8ff; color: #7e22ce; }
.rol-inactivo { background: #e2e8f0; color: #475569; }

/* ========================================================
   VISOR DE PDF GENERADOS
   ======================================================== */
.lista-pdfs {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Fila del visor de PDF: nombre del módulo, tamaño, fecha y botón, cada uno en
   su columna. Tamaño y fecha centrados y con el mismo ancho, así quedan
   alineados entre todas las filas. */
.fila-pdf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem 8rem auto;
    align-items: center;
    gap: 0.8rem;
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.7rem 1rem;
}

.fila-pdf-nombre {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.fila-pdf-dato {
    text-align: center;
    color: var(--color-texto-suave);
    font-size: 0.85rem;
}

.fila-pdf-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fila-pdf-ver {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    text-decoration: none;
    text-align: center;
}

@media (max-width: 520px) {
    .fila-pdf { grid-template-columns: minmax(0, 1fr) 5.5rem 7rem auto; gap: 0.5rem; }
}

/* ========================================================
   MÓDULO PRIVILEGIOS DE SERVICIO
   ======================================================== */
.priv-dias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.priv-dia {
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: visible;
}

.priv-dia .partes-lista {
    padding: 0.6rem;
    background: transparent;
}

.priv-valor-fijo {
    display: inline-block;
    min-width: 220px;
    padding: 0.6rem 0.8rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

/* Capitán del módulo Limpieza resaltado en negrita */
.limp-capitan .parte-titulo,
.limp-capitan .autocomplete-input {
    font-weight: 800;
}

.limp-capitan .parte-info .parte-titulo {
    color: #1e293b;
}

/* Equipo de limpieza: una sola columna por semana, distribuida en el ancho */
.limp-dia .partes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
}

.limp-dia .parte-item {
    align-items: center;
}

.limp-dia .autocomplete-box {
    width: 100%;
    min-width: 190px;
}

/* Reglas editables en Ajustes: input ocupa la primera línea */
@media (max-width: 600px) {
    .regla-fila .regla-nombre-input {
        flex-basis: 100%;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .priv-dias {
        grid-template-columns: 1fr;
    }

    .priv-valor-fijo {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================================
   REAJUSTE MÓVIL (las reglas base posteriores al primer media
   query volvían a centrar bloque-intermedio y autocomplete-box)
   ======================================================== */
@media (max-width: 900px) {
    .bloque-intermedio {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

    .bloque-intermedio > * {
        align-self: flex-start;
        width: 100%;
    }

    .oracion-bloque {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .oracion-bloque .autocomplete-box,
    .bloque-intermedio .autocomplete-box,
    .parte-asignados .autocomplete-box {
        width: 100%;
    }
}

/* ========================================================
   AJUSTES: LISTA DE PRIVILEGIOS DE SERVICIO
   ======================================================== */
.priv-config-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.priv-config-fila {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem 0.9rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-suave, #e2e8f0);
    border-radius: 8px;
    background: var(--fondo-claro, #ffffff);
}

/* Grupo de casillas de una fila de reglas: se apilan a la izquierda, también en
   móvil (una debajo de otra si no caben). */
.priv-config-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.85rem;
    color: #475569;
}

.priv-config-fila .priv-config-opciones {
    padding-top: 0.35rem;
    border-top: 1px dashed #e2e8f0;
}

.priv-config-nombre {
    flex: 1;
    min-width: 180px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.priv-config-quitar {
    padding: 0.3rem 0.55rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .priv-config-fila {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .priv-config-nombre {
        width: 100%;
    }
}

/* ========================================================
   MÓDULO DE REUNIÓN PÚBLICA
   ======================================================== */
#publica-contenedor-mes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publica-grupos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publica-grupo {
    background: #f8fafc;
    border-radius: 6px;
}

.publica-select,
.publica-input {
    width: 100%;
    min-height: 38px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.publica-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.parte-linea-detalle {
    font-size: 0.85rem;
    color: #64748b;
}

/* Aviso unificado de la semana (visita, asamblea, conmemoración...): con la
   misma apariencia del antiguo banner de visita (fondo azul claro, borde
   lateral) y el texto centrado. Nombre genérico para reutilizar en otras
   vistas. */
.evento-aviso {
    padding: 0.8rem 1rem;
    background: #e8f1f9;
    border-left: 4px solid #0F3B60;
    border-radius: 6px;
    color: #1e3a5f;
    font-size: 0.95rem;
    text-align: center;
}

.evento-aviso p {
    margin-top: 0.3rem;
    color: #64748b;
}

/* En el módulo VMC el aviso va encima del encabezado: misma separación hacia
   abajo que la que deja el encabezado hacia su contenido (0.8rem), de modo que
   el espacio alrededor del encabezado queda idéntico arriba y abajo. */
.tarjeta-semana-body > .evento-aviso {
    margin-bottom: 0.8rem;
}

/* Gestor de oradores y sus discursos */
#publica-oradores {
    margin-bottom: 1rem;
}

/* Modal de arreglos con congregaciones: formulario algo más alto para que los
   campos de contacto quepan sin cortarse. */
.modal-contenido-arreglos {
    max-height: 92vh;
}

/* Listado de arreglos: secciones futuros/pasados y etiquetas de estado. */
/* Aviso de lista vacía (por ejemplo, cuando todavía no hay acuerdos). */
.lista-vacia {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0.4rem 0;
}

.arreglo-seccion {
    margin: 0.7rem 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #334155;
}
.arreglo-chip {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.chip-futuro { background: #dcfce7; color: #166534; }
/* El acuerdo del mes en curso se destaca en azul y los pasados en rojo, para
   ver de un vistazo cuál está vigente y cuáles ya se hicieron. */
.chip-actual { background: #dbeafe; color: #1e40af; }
.chip-pasado { background: #fef2f2; color: #b91c1c; }

/* Fila de cada acuerdo y su vista rápida (se abre con el icono del ojo). */
.arreglo-fila {
    flex-wrap: nowrap;
    margin-bottom: 0.4rem;
}

.arreglo-info {
    min-width: 0;
    flex: 1;
}

.gestor-estado .btn-secundario,
.gestor-estado .btn-peligro {
    padding: 0.2rem 0.5rem;
    min-height: 32px;
}

.arreglo-vista {
    margin: -0.2rem 0 0.7rem;
    padding: 0.6rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--color-primario);
    border-radius: 6px;
    font-size: 0.85rem;
}

.arreglo-vista-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin-bottom: 0.5rem;
}

.arreglo-vista-dato {
    display: flex;
    gap: 0.3rem;
}

.arreglo-vista-dato span {
    color: var(--color-texto-suave);
}

.arreglo-vista-bloque + .arreglo-vista-bloque {
    margin-top: 0.45rem;
}

.arreglo-vista-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #334155;
}

.arreglo-vista-fila {
    display: flex;
    gap: 0.5rem;
    padding: 0.1rem 0;
}

.arreglo-vista-fecha {
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.arreglo-vista-quien em {
    color: #0369a1;
    font-style: italic;
}

.arreglo-vista-quien small {
    color: var(--color-texto-suave);
}

.arreglo-vista-vacio {
    color: var(--color-texto-suave);
    font-style: italic;
}

/* Botón "+ Nuevo arreglo": verde y alineado a la derecha del modal, igual que
   "Nueva actividad"/"Nuevo lugar". */
.arreglo-mas-nuevo {
    margin-top: 0.8rem;
    display: flex;
    justify-content: flex-end;
}
.arreglo-mas-nuevo button {
    background: var(--color-exito);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.arreglo-mas-nuevo button:hover { background: #15803d; }

/* En "🎤 Reunión Pública" los botones del gestor quedan a 0.8rem del título,
   la misma separación que entre esos botones y el buscador. */
#tab-publica .header-seccion {
    margin-bottom: 0.8rem;
}

.gestor-oradores-header {
    padding: 0 0.2rem 0.8rem;
}

.gestor-oradores-header h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.gestor-intro {
    margin: 0.7rem 0 1rem;
    font-size: 0.95rem;
    color: #475569;
}

.gestor-intro-corto {
    margin: 0.1rem 0 0.7rem;
    font-size: 0.82rem;
    color: #64748b;
}

.gestor-select-orador {
    min-height: 40px;
    flex: 1;
    min-width: 220px;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
}

/* Buscador con desplegable */
.gestor-buscador {
    position: relative;
    flex: 1;
    min-width: 200px;
}

/* Sub-secciones dentro de una misma tarjeta de Ajustes. */
.sub-seccion-ajuste { margin: 0.7rem 0 0.4rem; font-size: 1.02rem; color: #0f172a; }
.sub-seccion-ajuste.separador { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }

/* Buscador de los modales de discursos/Asignaciones presentadas: va en la
   misma fila que el título, alineado a la derecha. */
.modal-buscar-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-right: 2.2rem;
}

.modal-buscar-fila h3 {
    margin: 0;
}

.buscador-modal {
    flex: 1 1 220px;
    max-width: 460px;
    min-height: 38px;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    box-sizing: border-box;
}

.gestor-buscador input,
.gestor-buscador-input,
#titulos-filtro {
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    box-sizing: border-box;
}

/* Icono de lupa en los campos de búsqueda. El placeholder es texto plano y no
   admite SVG, así que la 🔍/🔎 pasa a ser el fondo del propio campo: mismo
   sitio en todos los buscadores (a la izquierda, con hueco para el texto). */
input.campo-buscar,
#titulos-filtro.campo-buscar {
    padding-left: 1.9rem;
    background-image: url("/img/iconos_ui/buscar.svg");
    background-repeat: no-repeat;
    background-position: 0.55rem center;
    background-size: 1.05rem;
}

.gestor-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    z-index: 50;
    overflow: hidden;
}

.gestor-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
}

.gestor-dropdown-x {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.gestor-dropdown-x:hover {
    background: #e2e8f0;
}

.gestor-dropdown-lista {
    max-height: 300px;
    overflow-y: auto;
}

.gestor-dropdown-fila {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.gestor-dropdown-fila:hover {
    background: #f1f5f9;
}

/* Diferencia de un vistazo los temas que el orador ya tiene: etiqueta de
   estado y fondo de la fila según sea Disponible o Preparando. */
.ger-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ger-badge-disponible { background: #dcfce7; color: #166534; }
.ger-badge-preparando { background: #fef3c7; color: #92400e; }
.gestor-dropdown-fila.ger-fil-disponible,
.discurso-gestor-fila.ger-fil-disponible { background: #f0fdf4; }
.gestor-dropdown-fila.ger-fil-preparando,
.discurso-gestor-fila.ger-fil-preparando { background: #fffbeb; }
.gestor-dropdown-fila.ger-fil-disponible:hover,
.discurso-gestor-fila.ger-fil-disponible:hover { background: #dcfce7; }
.gestor-dropdown-fila.ger-fil-preparando:hover,
.discurso-gestor-fila.ger-fil-preparando:hover { background: #fef3c7; }

/* El modal de discursos por orador siempre es alto, incluso antes de elegir
   publicador o si no tiene temas, para que el desplegable tenga sitio. */
#modal-discursos-orador .modal-contenido {
    height: min(84vh, 720px);
}

/* Chips de estado */
.chip-estado {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.chip-ok {
    background: #dcfce7;
    color: #166534;
}

.chip-azul {
    background: #dbeafe;
    color: #1e40af;
}

.chip-gris {
    background: #f1f5f9;
    color: #64748b;
}

.chip-vino {
    background: #fdedf2;
    color: #831843;
}

.gestor-discursos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.discurso-gestor-fila,
.discurso-conta-fila,
.discurso-no-dispo-fila {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
}

.discurso-gestor-fila {
    flex-wrap: wrap;
    justify-content: space-between;
}

.discurso-titulo-linea {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 260px;
    min-width: 0;
}

.discurso-numero {
    font-weight: 700;
    color: var(--color-secundario);
    min-width: 2.2rem;
    text-align: right;
    flex-shrink: 0;
}

.discurso-titulo {
    flex: 1;
    min-width: 0;
}

.discurso-discreto {
    color: #94a3b8;
    margin-left: 0.3rem;
}

.disc-inhabilitado,
.discurso-conta-fila.inhabitado {
    opacity: 0.65;
}

.gestor-estado {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.gestor-btn {
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.gestor-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gestor-btn:hover:not(:disabled) {
    border-color: var(--color-secundario);
}

.gestor-disponible.activo {
    background: var(--color-secundario);
    border-color: var(--color-secundario);
    color: white;
}

.gestor-preparar.activo2 {
    background: #b45309;
    border-color: #b45309;
    color: white;
}

/* Apartado de discursos no disponibles */
.gestor-marco {
    margin-top: 0.7rem;
}

/* Editor de títulos (modal de corrección) */
.titulo-editar {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    box-sizing: border-box;
}

.titulo-guardado {
    color: #166534;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Editor en línea (tema especial, tema adicional) */
.editor-inline {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.7rem;
    background: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.editor-inline-acciones {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

/* Botones de los discursos especiales de "Nuestra Vida Cristiana" (editar,
   subir, bajar y borrar). Los temas que vienen del programa de la WOL no
   llevan botones: su tiempo se cambia con un clic sobre el texto del tiempo,
   para que las cajas de responsables queden alineadas igual que antes. */
.parte-edicion {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

/* La pista se dibuja con una sombra interior para no ocupar ni un píxel más
   que antes: la fila queda exactamente igual de alta. */
.parte-titulo-editable,
.parte-tiempo-editable {
    cursor: pointer;
    box-shadow: inset 0 -1px 0 transparent;
}

.parte-titulo-editable:hover,
.parte-tiempo-editable:hover {
    box-shadow: inset 0 -1px 0 #0369a1;
}

/* Título y tiempo del discurso especial que se está añadiendo: el título en
   rojo, como el resto de títulos de la sección. */
.publica-input.editor-inline-titulo {
    color: #881320;
    font-weight: 700;
    font-size: 0.98rem;
}

.publica-input.editor-inline-detalle {
    color: #334155;
    font-size: 0.88rem;
}

/* Edición EN VIVO: el campo ocupa la misma línea del texto que reemplaza (sin
   recuadro ni botón de guardar). Se insinúa con un subrayado al pasar el ratón
   y con una sombra interior, que no alteran la altura de la fila. */
/* Se escriben como "input.edicion-vivo" para ganar a la regla general de los
   campos de texto (input[type="text"]), que pondría borde, fondo y color. El
   subrayado va con box-shadow para que la línea no cambie de alto. */
input.edicion-vivo {
    width: 100%;
    min-width: 12rem;
    font: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 #0369a1;
    padding: 0;
    margin: 0;
}

input.edicion-vivo:focus {
    outline: none;
}

input.edicion-vivo-titulo {
    color: #881320;
    font-weight: 700;
    font-size: 0.98rem;
}

/* Notificación de confirmación dentro de la app */
#alerta-texto {
    white-space: pre-line;
}

/* Interruptor habilitar / inhabilitar discurso */
.conta-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.conta-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.conta-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.2s;
}

/* Anillo de foco visible cuando el interruptor se activa con teclado. */
.conta-switch input:focus-visible + .conta-switch-slider {
    outline: 3px solid var(--color-primario);
    outline-offset: 2px;
}

.conta-switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.conta-switch input:checked + .conta-switch-slider {
    background: var(--color-secundario);
}

.conta-switch input:checked + .conta-switch-slider::before {
    transform: translateX(18px);
}

.contas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Interruptores de las sugerencias de asignaciones (Ajustes) */
.sugerencia-interruptores {
    display: grid;
    gap: 0.6rem;
    max-width: 640px;
    margin-top: 0.8rem;
}

.sugerencia-interruptor-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
}

.sugerencia-interruptor-fila > span {
    font-size: 0.9rem;
    color: #0f172a;
    font-weight: 600;
}

@media (max-width: 800px) {
    .discurso-gestor-fila {
        gap: 0.4rem;
        justify-content: space-between;
    }

    .discurso-titulo-linea {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .gestor-estado {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .gestor-dropdown {
        position: fixed;
        left: 0.6rem;
        right: 0.6rem;
        top: auto;
        max-height: 60vh;
    }

    .gestor-dropdown-lista {
        max-height: 45vh;
    }

    .publica-select,
    .publica-input {
        width: 100%;
    }

    .editor-inline-acciones {
        flex-direction: column;
    }

    .gestor-buscador {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================================
   MÓDULO PREDICACIÓN (calendario mensual)
   ======================================================== */
.predicacion-semana {
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.predicacion-semana-header {
    background: #1e293b;
    color: white;
    padding: 0.7rem 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.predicacion-semana-header h3 {
    margin: 0;
    font-size: 1rem;
}

.predicacion-semana-header small {
    color: #cbd5e1;
    font-weight: 500;
}

.predicacion-switch-extra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-left: auto;
}

/* Las jornadas fluyen en UNA sola cuadrícula por semana, en orden
   cronológico (AM, Extra, PM por cada día); la última fila (y una tarjeta
   solitaria) queda centrada con el MISMO ancho, no expandida. */
.predicacion-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
}

:root {
    --pd-dia-w: 100%;
}
@media (min-width: 700px)  { :root { --pd-dia-w: calc((100% - 0.5rem) / 2); } }
@media (min-width: 1020px) { :root { --pd-dia-w: calc((100% - 1rem) / 3); } }
/* En 4:3 (1280 px) caben al menos 4 jornadas; en pantallas anchas (16:9, 21:9)
   se muestran 5 y hasta 7 por fila. */
@media (min-width: 1150px) { :root { --pd-dia-w: calc((100% - 1.5rem) / 4); } }
@media (min-width: 1560px) { :root { --pd-dia-w: calc((100% - 2rem) / 5); } }
@media (min-width: 2300px) { :root { --pd-dia-w: calc((100% - 2.5rem) / 7); } }

.predicacion-dia {
    flex: 0 0 var(--pd-dia-w);
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

/* La jornada Extra es una tarjeta más con el mismo ancho que AM y PM; su
   cabecera y su cuerpo van más oscuros que la PM para distinguirla a simple
   vista (la cabecera de los días de grupo se mantiene en verde, ver abajo). */
.predicacion-dia-extra {
    flex: 0 0 var(--pd-dia-w);
    min-width: 0;
}
.predicacion-dia-extra .predicacion-dia-header {
    background: #cbd5e1;
}

.predicacion-dia-header {
    background: #e2e8f0;
    padding: 0.4rem 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1e293b;
    text-align: center;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

.predicacion-dia-header small {
    display: inline-block;
    font-weight: 600;
    color: #64748b;
    font-size: 0.78rem;
}

/* Etiqueta AM / PM / Extra en el título de la tarjeta, junto al día. */
.predicacion-dia-turno {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #1e293b;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Botón "+" verde: crea un domingo paralelo (grupo adicional) */
.predicacion-dia-mas {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--color-exito);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.predicacion-dia-mas:hover { background: #15803d; }

.predicacion-turno {
    border-top: 1px solid var(--color-borde);
    padding: 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    box-sizing: border-box;
}

.predicacion-turno:first-of-type {
    border-top: none;
}

.predicacion-turno.pd-am { background: #ffffff; }
.predicacion-turno.pd-pm { background: #e6ebf2; }
/* La jornada Extra se distingue por su tono claramente más oscuro que la PM;
   igual en todos los días (también en los domingos paralelos). */
.predicacion-turno.pd-extra { background: #b4c2d8; }

.predicacion-turno .autocomplete-box {
    width: 100%;
}

.predicacion-turno input[type="text"] {
    width: fit-content;
    min-width: 70px;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.predicacion-turno .autocomplete-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.predicacion-turno input[type="text"],
.predicacion-turno textarea,
.predicacion-turno .autocomplete-input {
    display: block;
    text-align: center;
    min-height: 30px;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    font-size: 0.85rem;
    background: white;
    font-family: inherit;
}

.predicacion-turno textarea {
    min-height: 48px;
    width: 100%;
    max-width: 100%;
    resize: vertical;
}

/* Los campos Lugar y Actividad son textareas de una línea que crecen con su
   contenido (igual que Territorio): los textos largos se envuelven en varias
   líneas dentro del ancho de la tarjeta. */
.predicacion-turno .autocomplete-box textarea.autocomplete-input {
    min-height: 30px;
    height: auto;
    resize: none;
    overflow: hidden;
    line-height: 1.35;
}

.predicacion-campo-fila {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

.predicacion-campo-ico {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
}

.predicacion-campo-control {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.predicacion-campo-control > * { width: 100%; }
.predicacion-campo-control input[type="text"] { width: 100%; margin-left: 0; margin-right: 0; }

/* Desplegable que se abre hacia arriba cuando no hay espacio debajo */
.dropdown-abre-arriba {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.predicacion-boton-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    border: none;
    border-top: 1px solid var(--color-borde);
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    font-family: inherit;
}
.predicacion-boton-mas:hover { background: #dbeafe; }

.predicacion-facetas-chips {
    flex: 1;
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}

.predicacion-faceta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

.predicacion-faceta-chip img {
    width: 14px;
    height: 14px;
    object-fit: cover;
    border-radius: 3px;
}

.predicacion-faceta-chip .quitar {
    cursor: pointer;
    font-weight: 700;
    margin-left: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Apariencia neutra de botón: la ✕ se ve igual que antes (span). */
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    /* Área de clic amplia sin cambiar el tamaño de la ✕ ni de la chip: el
       padding agranda la zona presionable y el margen negativo compensa. */
    padding: 0.45rem 0.45rem;
    margin: -0.45rem -0.35rem -0.45rem 0.1rem;
}

.predicacion-faceta-chip .quitar:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Actividad: las chips viven DENTRO del recuadro del campo, que crece (o
   encoge) para contenerlas todas; el textarea que le sigue filtra/añade.
   El conjunto (chips + campo) queda centrado dentro del recuadro. */
.autocomplete-box-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0.3rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    background: white;
}

.autocomplete-box-chips .predicacion-facetas-chips {
    flex: 0 1 auto;
    width: auto;
    align-self: center;
    justify-content: center;
}

.autocomplete-box-chips .autocomplete-input {
    flex: 0 1 auto;
    /* Ancho mínimo para que el placeholder "Actividad" se lea completo
       aunque haya actividades seleccionadas (las chips no lo tapan). */
    min-width: 96px;
    min-height: 30px;
    width: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    padding: 0.15rem 0.3rem;
    text-align: center;
}

.predicacion-turno .autocomplete-input {
    min-height: 30px;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
}

/* Switch ON/OFF por jornada (reemplaza al checkbox con texto y a la caja de
   evento especial). Va al lado de la etiqueta AM/Extra/PM. */
.predicacion-jornada-activo {
    display: inline-flex;
}

.predicacion-dia-header .predicacion-jornada-activo.conta-switch {
    width: 34px;
    height: 18px;
    margin-left: 0.2rem;
}
.predicacion-dia-header .predicacion-jornada-activo.conta-switch .conta-switch-slider::before {
    height: 12px;
    width: 12px;
    left: 3px;
    top: 3px;
}
.predicacion-dia-header .predicacion-jornada-activo.conta-switch input:checked + .conta-switch-slider::before {
    transform: translateX(16px);
}

.predicacion-jornada-contenido {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.predicacion-turno.jornada-deshabilitada .predicacion-jornada-contenido { display: none; }
.predicacion-turno.jornada-deshabilitada { background: #fff8e1; }
.predicacion-turno .predicacion-jornada-nota {
    margin: auto;
    width: 92%;
    max-width: 300px;
    min-height: 44px;
    border: 1px solid #fde68a;
    background: white;
    font-size: 0.85rem;
    font-family: inherit;
    text-transform: uppercase;
    resize: vertical;
}

/* Día de predicación por grupo (antes "domingo paralelo"): se muestra como un
   día independiente con el mismo nombre y número que el domingo, resaltado en
   verde y con el "Grupo N°" en su cabecera. Fluye en la misma cuadrícula que el
   resto de jornadas con el ancho estándar, colocándose agrupado por jornada:
   todas las AM juntas, luego las PM y la Extra (cada grupo va a la derecha del
   anterior, nunca uno encima del otro). */
.predicacion-dia-paralelo {
    border-color: var(--color-exito);
    flex: 0 0 var(--pd-dia-w);
    min-width: 0;
}
.predicacion-dia-paralelo .predicacion-dia-header {
    background: #dcfce7;
}
/* Verde alterno por grupo (par / impar): un tono más claro y otro más oscuro
   para saber de un vistazo cuáles tarjetas pertenecen al mismo grupo. */
.predicacion-dia-paralelo.predicacion-paralelo-claro {
    border-color: #86efac;
}
.predicacion-dia-paralelo.predicacion-paralelo-claro .predicacion-dia-header {
    background: #dcfce7;
}
.predicacion-dia-paralelo.predicacion-paralelo-oscuro {
    border-color: #16a34a;
}
.predicacion-dia-paralelo.predicacion-paralelo-oscuro .predicacion-dia-header {
    background: #86efac;
}
.predicacion-domingo-grupo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.predicacion-domingo-grupo label {
    font-size: 0.6rem;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.predicacion-domingo-grupo input {
    width: 76px;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    background: #fff;
    text-align: center;
    font-size: 0.78rem;
    box-sizing: border-box;
}
.predicacion-domingo-quitar {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.predicacion-domingo-quitar:hover { background: #b91c1c; color: #fff; }

/* Modal de Lugares: filas editables en vivo (estilo de Reglas de asignaciones) */
.predicacion-punto-fila {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
}
.predicacion-punto-foto {
    border: 1px solid var(--color-borde);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    width: 38px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0;
    flex-shrink: 0;
}
.predicacion-punto-foto:hover { background: #f1f5f9; }
.predicacion-punto-foto img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
}
/* Emoji de lugares y actividades escrito con el teclado: campo junto a la foto
   para escribir o pegar un emoji sin necesidad de selector. */
.predicacion-punto-icono-texto {
    border: 1px solid var(--color-borde);
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #334155;
    text-align: center;
    width: 78px;
    flex-shrink: 0;
}
.predicacion-punto-icono-texto::placeholder { color: #94a3b8; }
.predicacion-punto-icono-texto:focus {
    outline: 2px solid var(--color-primario, #0f766e);
    outline-offset: 1px;
}
/* Icono de 🎨 en el campo de emoji del lugar/actividad: el placeholder es
   texto plano y no admite SVG, así que el icono va de fondo solo mientras el
   campo está vacío (al escribir el emoji se recupera el centrado original). */
.predicacion-punto-icono-texto:placeholder-shown {
    padding-left: 1.45rem;
    background-image: url("/img/iconos_ui/paleta.svg");
    background-repeat: no-repeat;
    background-position: 0.3rem center;
    background-size: 0.95rem;
}
.predicacion-punto-nombre { flex: 1; min-width: 0; }
.predicacion-punto-eliminar { flex-shrink: 0; }
/* Botón de ícono en la fila de lugares y actividades: ↺ quita la foto o el
   emoji para volver al predeterminado. */
.predicacion-icono-quitar {
    flex-shrink: 0;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--color-error);
    background: #fff;
    color: var(--color-error);
}
.predicacion-icono-quitar:hover { background: #fef2f2; }
#puntos-lista,
#facetas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 0.8rem;
}
/* Botón verde "+ Nuevo lugar" alineado con los botones de eliminar */
.predicacion-punto-mas {
    margin-top: 0.7rem;
    display: flex;
    justify-content: flex-end;
}
.predicacion-punto-mas button {
    background: var(--color-exito);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.predicacion-punto-mas button:hover { background: #15803d; }

/* ========================================================
   ENVIAR PROGRAMAS POR WHATSAPP (modal de pantalla completa)
   ======================================================== */
.modal-pantalla .modal-contenido {
    width: min(1100px, calc(100vw - 2rem));
    max-height: 92vh;
}

.lista-enviar {
    margin-top: 0.8rem;
    max-height: 62vh;
    overflow: auto;
}

.tabla-enviar { min-width: 420px; }

.enviar-selectores {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.enviar-selectores label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #475569;
}

.enviar-selectores select {
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
}

.enviar-resumen {
    margin-left: auto;
    color: #64748b;
    font-size: 0.9rem;
}

.enviar-nombre { font-weight: 600; color: #0f172a; }

.enviar-detalle {
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.enviar-celda-whatsapp { text-align: right; }

/* Verde oficial de WhatsApp para la acción de enviar el programa. */
.btn-whatsapp {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: #25d366;
    color: #fff;
    white-space: nowrap;
}

.btn-whatsapp:hover:not(:disabled) { background: #1eb85a; }

.btn-whatsapp:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================
   VISTA IMPRIMIBLE DEL PROGRAMA (hoja letter)
   ========================================== */
.vista-vacio {
    padding: 1rem;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

.vista-hoja {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.2rem;
    font-size: 0.82rem;
    color: var(--color-texto);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.vista-cabecera {
    text-align: center;
    margin-bottom: 0.8rem;
}

.vista-congregacion {
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-primario);
    letter-spacing: 0.02em;
}

.vista-semana {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-top: 0.15rem;
}

/* Cabecera del inicio: semana entre flechas ‹ › para cambiar de semana. */
.vista-semana-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
}

.vista-semana-nav .vista-semana { margin-top: 0; }

.vista-semana-nav .mes-flecha {
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
    flex: none;
}

.vista-servicios {
    display: flex;
    gap: 0.9rem;
    height: 56mm; /* 20% del alto de la página letter (279.4mm) */
}

.vista-tabla {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vista-tabla:nth-child(1) { flex: 1 1 65%; } /* Privilegios de servicio */
.vista-tabla:nth-child(2) { flex: 1 1 35%; } /* Programa de limpieza */

.vista-tabla-titulo {
    background: var(--color-primario);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    border-radius: 4px 4px 0 0;
    text-align: center;
}

.vista-tabla table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-borde);
    border-top: none;
    flex: 1;
    height: 100%;
    table-layout: fixed;
}

.vista-tabla th {
    background: var(--color-primario);
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 0.35rem 0.45rem;
    font-size: 6pt; /* tipografía pequeña en la barra de títulos */
    border-right: 1px solid #1e40af;
}

.vista-tabla th:last-child { border-right: none; }

/* Fila de íconos: fondo gris igual al PDF de la sección PDF (privilegios). */
.vista-tabla thead tr:nth-child(2) th {
    background: #F5F5F5;
    border-right: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

.vista-tabla th img.vista-icono {
    height: 18px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.vista-tabla td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--color-borde);
    text-align: center;
    font-size: 0.8rem;
    vertical-align: middle;
}

.vista-tabla tr:last-child td { border-bottom: none; }

.vista-dia {
    font-weight: 700;
    color: var(--color-primario);
    white-space: nowrap;
    text-transform: uppercase;
}

/* Primera columna de la tabla "Discurso Público": texto normal (sin
   mayúsculas ni color de día), alineado a la izquierda y con salto de línea. */
.vista-tabla .vista-arreglo {
    text-align: left;
    font-weight: normal;
    text-transform: none;
    color: var(--color-texto);
}

/* Separador entre el recuadro del VMC y el programa de discursos públicos
   (es el último hijo directo de la hoja; las tablas de servicios viven
   dentro de .vista-servicios y no se ven afectadas). */
.vista-hoja > .vista-tabla:last-child { margin-top: 3mm; }

/* Día corto en los recuadros superiores: "Jueves 10", "Sábado 12" (sin uppercase). */
.vista-servicios .vista-dia { text-transform: none; }

.vista-avatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid var(--color-borde);
    margin: 2px;
}

.vista-avatar-letras {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primario);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border: none;
}

.vista-nombre {
    margin-left: 0.45rem;
    font-weight: 600;
    font-size: 0.82rem;
}

/* Programa de limpieza: una celda por miembro del equipo, la rejilla ajusta
   sus columnas al ancho disponible y el alto al número de responsables. */
.vista-grid-limpieza {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    grid-auto-rows: 1fr;
    gap: 4px;
    padding: 6px;
}

.vista-limpieza-celda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 3px 0;
    background: #ECECEC;
    border-radius: 4px;
    min-width: 0;
}

/* Línea fija de etiqueta en TODAS las celdas: reserva el mismo alto para el
   texto "Capitán" y para las celdas sin capitán, de modo que las fotos quedan
   alineadas entre filas y todas las tarjetas tienen la misma altura. */
.vista-limpieza-etiqueta {
    flex: none;
    height: 6px;
    line-height: 6px;
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-texto);
    white-space: nowrap;
    overflow: hidden;
}

.vista-grid-limpieza .vista-avatar {
    width: 48px;
    height: 48px;
}

.vista-vmc {
    margin-top: 1rem;
    border: 2px solid var(--color-primario);
    border-radius: 8px;
    overflow: hidden;
    height: 140mm; /* ~54% del área imprimible letter (259.4mm): deja sitio a la Reunión pública en una sola hoja */
    display: flex;
    flex-direction: column;
}

.vista-vmc-titulo {
    flex: none;
    background: var(--color-primario);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

.vista-vmc-lectura {
    margin-left: auto;
    text-align: right;
}

.vista-vmc-cuerpo {
    flex: 1;
    display: flex;
    gap: 0.9rem;
    padding: 0.5rem 0.55rem;
    font-size: 7.5pt;
}

.vista-vmc-col {
    flex: 1;
    min-width: 0;
}

/* Cuerpo del programa VMC: replica la estructura del PDF (src/pdf/plantillas/vmc.js). */
.vista-parte-vmc {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.14rem 0 0.1rem;
}

.vista-parte-vmc + .vista-parte-vmc { border-top: 1px solid #e2e8f0; }

.vista-parte-vmc-texto { flex: 1; min-width: 0; }

.vista-parte-vmc-titulo {
    font-weight: 700;
    font-size: 7.5pt;
    line-height: 1.18;
    text-align: left;
}

.vista-parte-vmc-detalle {
    font-size: 7pt;
    color: #64748b;
    line-height: 1.15;
    margin-top: 0.05rem;
    text-align: left;
}

.vista-parte-vmc-foto {
    flex: none;
    display: flex;
    /* La miniatura de la publicación WOL queda centrada verticalmente con
       relación a la foto del responsable que la acompaña. */
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-left: auto;
}

.vista-parte-vmc-foto .vista-avatar { width: 28px; height: 28px; }

.vista-vmc-miniatura {
    width: 44px;
    height: 28px;
    object-fit: cover;
    border: 1px solid var(--color-borde);
}

/* Fila del responsable (asignaciones estudiantiles): la miniatura de la
   publicación va a la izquierda; el titular a la misma altura que el ayudante y
   el ícono de responsable queda ARRIBA de la foto del titular (columna), a la
   altura del título, solo cuando hay pareja (titular + ayudante). */
.vista-maestros-fila {
    /* Alto y margen de la foto del responsable: de ellos depende cuánto sube la
       miniatura de la lección para quedar centrada sobre las fotos. El margen
       va con unidad (0px, no 0) porque se suma a una longitud dentro de calc(). */
    --alto-foto-maestros: 28px;
    --margen-foto-maestros: 2px;
    flex: none;
    display: flex;
    /* La miniatura de la publicación WOL, la foto del titular y la del
       acompañante quedan en la misma línea (base alineada). El icono de
       responsable cae sobre la parte superior de la foto del titular. */
    align-items: flex-end;
    gap: 0.2rem;
    margin-left: auto;
}

.programa-inicio .vista-vmc .vista-maestros-fila {
    --alto-foto-maestros: 48px;
}

/* Miniatura de la lección (th/lmd): se centra sobre las fotos de los
   responsables, sin mover nada más. Sube lo que sobra por debajo, más el
   margen de la foto. */
.vista-maestros-fila .vista-vmc-miniatura {
    margin-bottom: calc((var(--alto-foto-maestros) - 28px) / 2 + var(--margen-foto-maestros));
}

.vista-maestros-fila .vista-avatar { width: 28px; height: 28px; }

.vista-maestros-col-titular {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vista-maestros-col-titular .vista-icono-ayudante {
    width: 22px;
    height: 12px;
    object-fit: contain;
    /* Acerca el icono de responsable a la foto del titular sin separarlo del
       grupo (Miniatura + Titular + Acompañante en la misma línea). */
    margin-bottom: -4px;
}

/* Recuadro cuadrado con el número de parte (gris = Tesoros, dorado = Maestros, rojo = Vida). */
.vista-badge {
    flex: none;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8pt;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.08rem;
}

.vista-badge-gris { background: #5A5A5A; }
.vista-badge-dorado { background: #B88C14; }
.vista-badge-rojo { background: #99191E; }

/* Icono de sección (Tesoros, Maestros, Vida Cristiana). */
.vista-vmc-seccion {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.14rem 0 0.08rem;
    margin-bottom: 0.1rem;
}

.vista-icono-vmc {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Líneas separadoras de sección (dorada después de Tesoros; roja antes de Vida). */
.vista-vmc-linea { height: 0; border-top: 1px solid; margin: 0.35rem 0 0.25rem; }
.vista-vmc-linea-dorada { border-color: #B88C14; }
.vista-vmc-linea-roja { border-color: #99191E; }

/* Fila de cántico, con la oración a la derecha en el de inicio y fin. */
.vista-cantico-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.1rem 0 0.2rem;
}

.vista-cantico { position: relative; display: inline-block; width: 28px; height: 28px; }

/* Número del cántico, en blanco dentro del icono y a la derecha de la nota
   musical. Nunca sale del icono: se limita a su ancho y el texto se achica al
   crecer el número de dígitos para que siempre se vea completo (103, 129). */
.vista-cantico em {
    position: absolute;
    top: 2px;
    right: 2px;
    max-width: calc(100% - 4px);
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: 8px;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.vista-cantico em.dos-digitos { font-size: 7px; }
.vista-cantico em.tres-digitos { font-size: 6px; }

.vista-oracion { display: flex; align-items: flex-start; gap: 0.15rem; }

.vista-oracion .vista-icono-vmc { width: 24px; height: 24px; }
.vista-oracion .vista-avatar { width: 28px; height: 28px; }

/* Fila de introducción / conclusión: badge plomo sin número + texto + foto del presidente. */
.vista-palabras {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.25rem 0 0.18rem;
}

.vista-palabras-texto {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 7.5pt;
    text-align: left;
}

.vista-palabras-pres {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
}

.vista-palabras-pres .vista-avatar { width: 28px; height: 28px; }

/* Aviso cuando la semana no tiene programa WOL importado. */
.vista-vmc-aviso {
    width: 100%;
    margin: auto;
    text-align: center;
    color: #64748b;
    font-weight: 600;
    font-size: 9pt;
}

.vista-parte-detalle {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
    text-align: left;
}

.vista-publica-orador {
    font-weight: 700;
    font-size: 0.82rem;
}

/* ========================================================
   PROGRAMA DE LA SEMANA (pestaña Inicio, HTML responsive)
   ======================================================== */
.contenedor-programa-inicio {
    margin-top: 0.5rem;
}

.programa-inicio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.programa-inicio .vista-cabecera {
    margin-bottom: 0;
    padding: 1rem 1.2rem;
    background: #fff;
    border: none;
    border-radius: 8px;
}

.programa-inicio-seccion {
    background: #fff;
    border: 2px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
}

.programa-inicio-seccion .vista-tabla-titulo {
    border-radius: 0;
    font-size: 0.78rem;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em; /* separación icono ↔ texto (en flex el espacio en blanco no se dibuja) */
    padding: 0 0.6rem;
}

/* Predicación en el inicio: calendario con una columna por día (lunes a
   domingo) con la cabecera arriba y una tarjeta por jornada (AM, PM y Extra si
   la semana la tiene habilitada). Las tarjetas de cada jornada comparten altura
   por línea de días. En pantallas angostas las columnas se reordenan en dos o
   más filas (sin scroll lateral) y en dispositivos muy pequeños se ocultan los
   días pasados. */
.pred-cal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: 0.5rem;
    row-gap: 2.25rem;
    padding: 1rem;
}

/* Cada columna de día tiene el ancho fijo de su línea (el mismo cálculo que la
   rejilla de 7, 4, 3 o 2 columnas según el dispositivo). Con flex-wrap y
   justify-content: center, las filas completas llenan el ancho y la última
   fila (con menos días) queda centrada, igual que en Privilegios y Limpieza. */
.pred-cal-col {
    flex: 0 0 calc((100% - 6 * 0.5rem) / 7);
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.5rem;
}

@media (max-width: 1150px) {
    .pred-cal-col {
        flex-basis: calc((100% - 3 * 0.5rem) / 4);
    }
}

@media (max-width: 800px) {
    .pred-cal-col {
        flex-basis: calc((100% - 2 * 0.5rem) / 3);
    }
}

/* Muy pequeño: solo caben dos columnas y se ocultan los días pasados para
   optimizar el espacio (la semana se ve de hoy en adelante). */
@media (max-width: 620px) {
    .pred-cal-col {
        flex-basis: calc((100% - 0.5rem) / 2);
    }
    .pred-cal .pred-cal-col-pasado {
        display: none;
    }
}

.pred-cal-cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    text-align: center;
    padding-bottom: 0.25rem;
}

.pred-cal-dia {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #334155;
}

.pred-cal-numero {
    font-weight: 800;
    font-size: 0.95rem;
    color: #334155;
    text-transform: uppercase;
}

/* El nombre del día y su número van juntos en la cabecera ("LUNES 5"); para
   los días que caen en otro mes, el nombre del mes va debajo, en una letra más
   pequeña que el número (el número nunca cambia de tamaño). */
.pred-cal-dia-num {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* Los iconos por defecto de lugar/actividad/hora son imágenes PNG con fondo
   transparente (se incrustan en el PDF); se dimensionan para verse como los
   emojis que sustituyen. */
.pred-jornada-lugar-icono .vista-icono { width: 20px; height: 20px; }
.pred-jornada-actividad-ico .vista-icono { width: 14px; height: 14px; vertical-align: -2px; }
.pred-jornada-hora-ico {
    width: 0.85em;
    height: 0.85em;
    flex: none;
}

.pred-cal-mes {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-texto-suave, #64748b);
}

/* Cada celda de jornada estira su tarjeta para llenar la fila completa. */
.pred-cal-slot {
    display: flex;
    min-width: 0;
}

.pred-cal-slot .pred-jornada {
    flex: 1;
    width: 100%;
}

/* Tarjeta de una jornada sin programar o suspendida: se mantiene el mismo
   tamaño para que el calendario se vea parejo, pero en tonos más suaves. El
   borde punteado marca SOLO la jornada suspendida, que es lo que la distingue
   de una programada; la casilla sin programar conserva el borde normal de la
   tarjeta. La suspendida puede contener un texto (motivo), las vacías no
   muestran nada. */
.pred-cal-slot .pred-jornada-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    text-transform: uppercase;
    white-space: pre-wrap;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
}

.pred-cal-slot .pred-jornada-suspendida {
    border-style: dashed;
}

.pred-jornada {
    background: #fbfdff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    text-align: center;
    min-width: 0;
}

.pred-jornada-evento {
    font-weight: 800;
    color: var(--color-primario);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* Hora de la jornada: el reloj y el texto (con AM/PM) van centrados en la misma
   línea, sin depender del alineado vertical de la imagen. */
.pred-jornada-hora {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-top: 0.2rem;
}

.pred-jornada-capitan-foto {
    margin-top: 0.25rem;
}

.pred-jornada-capitan-foto .vista-avatar {
    width: 40px;
    height: 40px;
}

/* Lugar de la jornada: el icono arriba y el texto debajo, los dos centrados en
   la tarjeta. */
.pred-jornada-lugar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.25rem;
    text-align: center;
}

.pred-jornada-lugar-icono {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1;
}

/* En las casas, el icono de la casa va a la izquierda y la foto del dueño a
   la derecha; se tocan desfasados en horizontal, cada uno superpuesto ~1/3
   del otro para que se identifiquen por separado pero se vean relacionados. */
.pred-jornada-dueno {
    position: relative;
    z-index: 1;
    margin-left: -8px;
}

.pred-jornada-dueno .vista-avatar {
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(2, 8, 23, 0.35);
}

.pred-jornada-lugar-texto {
    color: #334155;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* Actividad y territorio de la jornada, con el mismo reparto que el lugar: los
   iconos arriba y el texto debajo, los dos centrados. */
.pred-jornada-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.8rem;
}

.pred-jornada-actividad {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 1rem;
    line-height: 1;
}

/* Imágenes reales cargadas como icono de lugar o de actividad. */
.vista-icono {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

/* Limpieza en el inicio: sin nombres, el texto "Capitán" se agranda al
   tamaño que antes ocupaba el nombre (encima de la foto). Las celdas se
   muestran juntas, sin tarjeta individual por persona. */
.programa-inicio .vista-grid-limpieza {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
}

/* Las celdas crecen para repartir entre todas el ancho disponible, así el
   contenido llena el contenedor en vez de dejar huecos a los lados. */
.programa-inicio .vista-limpieza-celda {
    flex: 1 1 56px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.programa-inicio .vista-limpieza-etiqueta {
    font-size: 0.65rem;
    font-weight: 600;
    height: 0.72rem;
    line-height: 0.72rem;
}

/* VMC flexible en el inicio */
.programa-inicio .vista-vmc {
    margin-top: 0;
    border: none;
    border-radius: 0;
    height: auto;
    border-top: 2px solid var(--color-primario);
}

/* Textos más grandes en el inicio para que el VMC se lea cómodo en pantalla;
   la vista imprimible conserva sus tamaños (página única). */
.programa-inicio .vista-vmc-titulo { font-size: 0.95rem; }

.programa-inicio .vista-vmc-cuerpo {
    font-size: 0.95rem;
    padding: 0.9rem;
    gap: 1.4rem;
}

.programa-inicio .vista-parte-vmc-titulo { font-size: 0.82rem; line-height: 1.25; }
.programa-inicio .vista-parte-vmc-detalle { font-size: 0.78rem; }

/* Palabras de introducción y conclusión con el mismo porte que el resto del
   VMC del inicio (la imprimible conserva su 7.5pt). */
.programa-inicio .vista-palabras-texto { font-size: 0.95rem; line-height: 1.25; }

.programa-inicio .vista-badge {
    width: 16px;
    height: 16px;
    font-size: 9pt;
}

/* Fotos de los responsables del VMC un poco más grandes en el inicio (siguen
   circulares con object-fit: cover, no se distorsionan). */
.programa-inicio .vista-vmc .vista-avatar {
    width: 48px;
    height: 48px;
}

/* Escritorio: Privilegios a la izquierda y Limpieza a la derecha en la misma
   fila, con las MISMAS proporciones que el PDF de asignaciones semanales
   (1.45fr / 1fr). Así los dos contenedores se adaptan al ancho disponible en
   vez de llevar un ancho fijo. Las secciones se estiran a la altura de la más
   alta (same height), así quedan al mismo alto vistas una al lado de la otra. */
.programa-inicio-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

/* Misma altura en escritorio: la sección se convierte en columna flexible para
   que su rejilla crezca hasta llenar la altura ya estirada, y el contenido
   (tarjetas de privilegios / responsables de limpieza) se reparte en vertical
   quedando centrado y equilibrado en vez de amontonado arriba. */
.programa-inicio-fila > .programa-inicio-seccion {
    display: flex;
    flex-direction: column;
}

.programa-inicio-fila > .programa-inicio-seccion .vista-priv-grid,
.programa-inicio-fila > .programa-inicio-seccion .vista-grid-limpieza {
    flex: 1;
    align-content: space-evenly;
}

/* Reunión pública del inicio: separa "quien viene" y "quien sale". Las tarjetas
   se ajustan solas a la cantidad de discursos de la semana y al ancho de la
   pantalla (como la predicación): una tarjeta ocupa todo el ancho, dos tarjetas
   van lado a lado y en pantallas estrechas se apilan en vertical. */
.vista-publica-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.5rem;
    padding: 0.9rem;
}

.vista-publica-card {
    flex: 1 1 240px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.8rem;
    background: #fbfdff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    text-align: center;
    min-width: 0;
}

.vista-publica-linea {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-texto);
}

.vista-publica-tema {
    font-size: 0.8rem;
    color: #334155;
}

/* Encabezado de la semana con visita del superintendente: ocupa toda la fila
   y va sobre sus dos discursos (Discurso público y Discurso final). */
.vista-publica-visita {
    flex: 1 1 100%;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primario);
}

/* Privilegios del inicio: tarjetas centradas (también la última fila, cuando
   lleva menos responsabilidades), icono pequeño y foto del responsable grande.
   El título lleva la fecha ("Privilegios Jueves 17"), por eso no hay línea de
   fecha dentro. */
.vista-priv-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem;
}

.vista-priv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 0 1 126px;
    min-width: 106px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.55rem 0.4rem;
    text-align: center;
    background: #fbfdff;
}

/* Icono del puesto en las tarjetas: caja fija (los PNG tienen proporciones
   distintas, p. ej. acomodación 50x50 y video 48x38) y glifo centrado; el
   icono queda sobre el texto del cargo, pegado y centrado (flex en columna). */
.vista-priv-card .vista-icono {
    flex: none;
    height: 20px;
    width: 20px;
    object-fit: contain;
    object-position: center;
}

.vista-priv-cargo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.15;
}

.vista-priv-foto {
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
}

.vista-priv-foto .vista-avatar {
    width: 48px;
    height: 48px; /* Igual que las fotos del programa de limpieza */
}

.vista-priv-sin {
    font-size: 0.7rem;
    color: #94a3b8;
    font-style: italic;
    margin-top: 0.4rem;
}

/* Las dos columnas del VMC pasan a una sola columna también en pantallas
   medianas, así el contenido se reordena en vertical sin desbordar. */
@media (max-width: 960px) {
    .programa-inicio .vista-vmc-cuerpo { flex-direction: column; }
    /* Privilegios y Limpieza se apilan (Limpieza debajo de Privilegios). */
    .programa-inicio-fila { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .pred-cal { padding: 0.5rem; }
}

/* ========================================================
   HOJA DEL PROGRAMA SEMANAL (PDF, botón "Programa Semanal")
   El renderer (src/pdf/vista_pdf.js) agrupa TODAS las secciones de una semana
   (predicación, privilegios, limpieza, VMC y reunión pública) en UNA hoja carta
   por semana, idéntica a la vista previa en su formato de escritorio (7 columnas
   de predicación, privilegios + limpieza lado a lado y VMC en dos columnas) para
   aprovechar TODO el ancho de la hoja.
   Estas reglas viven FUERA de @media print a propósito: también se aplican en
   pantalla durante la medición de alturas que hace el renderer, de modo que el
   cálculo de la escala y de las tarjetas igualadas coincide con la impresión.
   ======================================================== */

/* Ancho imprimible carta − márgenes 10mm (~741px). El código de vista_pdf.js
   lo vuelve a fijar por si acaso antes de medir alturas. Fondo blanco puro. */
.hoja-imprimible { width: 740.4px; box-sizing: border-box; background: #fff; }

/* Una caja de página por semana: al menos el alto imprimible (con un poco de
   colchón) y SIEMPRE ancho completo de la hoja. El renderer NO escala el
   contenido: las semanas caben tal cual de lado a lado y, si una fuese más alta
   que la hoja, fluye hacia la página siguiente en vez de encogerse. */
.hoja-imprimible .pagina-semana {
    position: relative;
    width: 100%;
    min-height: 978px;
    overflow: visible;
    box-sizing: border-box;
    background: #fff;
    page-break-after: always;
    break-after: page;
}

.hoja-imprimible > .pagina-semana:last-child {
    page-break-after: auto;
    break-after: auto;
}

.hoja-imprimible .pagina-semana > .programa-inicio,
.hoja-imprimible .pagina-modulo > .programa-inicio {
    width: 100%;
    transform-origin: top left;
}

/* Hoja de un módulo: una caja de alto fijo por hoja impresa. Las semanas van
   dentro de .pagina-contenido, que es lo que se mide y, si una semana sola
   no cabría en una carta, lo que se reduce con transform. El reparto por hojas
   lo hace el cliente (repartirSemanasEnHojas), sin partir ninguna semana.
   El alto (930px) va por debajo del de la hoja semanal (978px) a propósito: si
   el navegador reserva espacio para encabezados y pies, el área imprimible es
   menor y una caja más alta se partiría entre dos páginas. `break-inside:
   avoid` deja constancia de que una caja nunca debe partirse. */
.hoja-imprimible .pagina-modulo {
    position: relative;
    width: 100%;
    height: 930px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
}

.hoja-imprimible > .pagina-modulo:last-child {
    page-break-after: auto;
    break-after: auto;
}

.hoja-imprimible .pagina-modulo > .pagina-contenido {
    width: 100%;
    transform-origin: top left;
}

/* Separación vertical entre las semanas de una misma hoja de módulo. */
.hoja-imprimible .pagina-contenido > .programa-inicio + .programa-inicio { margin-top: 0.6rem; }

/* Separador "|" entre la fecha y la lectura en la cabecera del VMC de la hoja
   de un módulo: icono, fecha, barra y lectura, todo seguido a la izquierda (en
   la hoja semanal la lectura queda a la derecha de la cabecera). */
.hoja-imprimible .pagina-contenido .vista-vmc-titulo { justify-content: flex-start; }

.hoja-imprimible .pagina-contenido .vista-vmc-sep {
    margin: 0 0.35rem;
    opacity: 0.7;
    font-weight: 400;
}

.hoja-imprimible .pagina-contenido .vista-vmc-lectura { margin-left: 0; text-align: left; }

/* Layout de escritorio en pantalla grande (por encima de los @media de
   pantalla de la vista normal): 7 columnas de predicación, privilegios +
   limpieza lado a lado y VMC en dos columnas. Privilegios (tabla de una fila
   por puesto) y Limpieza comparten la fila con anchos equilibrados (Privilegios
   algo más ancho por sus etiquetas). */
.hoja-imprimible .pred-cal-col { flex-basis: calc((100% - 6 * 0.3rem) / 7); }
.hoja-imprimible .programa-inicio-fila { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0.6rem; }
.hoja-imprimible .programa-inicio .vista-vmc-cuerpo { flex-direction: row; }

/* Al imprimir Privilegios o Limpieza solos no hay dos secciones en la fila: la
   que queda ocupa el ancho completo de la hoja en lugar de una de las dos
   columnas. Va DESPUÉS de la regla anterior para ganarle en el orden. */
.hoja-imprimible .programa-inicio-fila-una { grid-template-columns: minmax(0, 1fr); }

/* Los controles de navegación (‹ ›) no se imprimen. */
.hoja-imprimible .mes-flecha { display: none !important; }

/* Compacidad para que la semana quepa holgada en ancho completo de la hoja: se
   reducen espacios, tipografías y avatares manteniendo el mismo diseño de la
   pantalla (las tarjetas de cada jornada se igualan a la más alta de su fila).
   Los contenedores se ensanchan para usar de lado a lado el ancho imprimible.
   Si alguna semana aun así sobresale en alto, la hoja se fija y el contenido se
   reduce con transform para que quepa entero (src/pdf/vista_pdf.js): ningún
   texto rompe el formato de una hoja por semana. */
/* Separación vertical amplia entre los recuadros de Predicación, Privilegios y
   Limpieza, VMC y Reunión pública. */
.hoja-imprimible .programa-inicio { gap: 0.7rem; }
.hoja-imprimible .programa-inicio-seccion { border: 1.5px solid var(--color-borde); }
.hoja-imprimible .programa-inicio .vista-cabecera { display: none; }
.hoja-imprimible .vista-congregacion { font-size: 0.95rem; }
.hoja-imprimible .vista-semana { font-size: 0.7rem; }
.hoja-imprimible .programa-inicio-seccion .vista-tabla-titulo {
    font-size: 0.62rem;
    height: 24px;
    padding: 0 0.45rem;
}
/* Cabecera del VMC (fecha y lectura) al MISMO porte que los títulos de las
   demás secciones. Una sola definición: antes estaba partida en dos reglas. */
.hoja-imprimible .vista-vmc-titulo { height: 24px; padding: 0.16rem 0.5rem; font-size: 0.68rem; }
/* Sin la línea superior propia, la cabecera queda a ras del marco de la
   sección igual que los títulos de Predicación, Privilegios y Reunión pública. */
.hoja-imprimible .programa-inicio .vista-vmc { border-top: none; }
.hoja-imprimible .pred-cal { padding: 0.1rem; column-gap: 0.3rem; row-gap: 0.45rem; }
.hoja-imprimible .pred-cal-col { gap: 0.1rem; }
.hoja-imprimible .pred-cal-cabecera { gap: 0.03rem; padding-bottom: 0; }
.hoja-imprimible .pred-cal-dia-num { gap: 0.3rem; }
.hoja-imprimible .pred-cal-dia,
.hoja-imprimible .pred-cal-numero { font-size: 0.62rem; color: #334155; }
.hoja-imprimible .pred-cal-mes { font-size: 0.44rem; letter-spacing: 0.06em; }
.hoja-imprimible .pred-jornada { padding: 0; border-radius: 6px; gap: 0.06rem; }
/* El icono va ENCIMA del texto, así que los huecos entre ellos y el relleno de
   la tarjeta se dejan mínimos: lo justo para que la semana siga cabiendo entera
   en una hoja carta. */
.hoja-imprimible .pred-jornada-lugar { gap: 0.05rem; margin-top: 0.05rem; }
.hoja-imprimible .pred-jornada-hora { margin-top: 0.1rem; }
.hoja-imprimible .pred-jornada-evento,
.hoja-imprimible .pred-jornada-hora { font-size: 0.54rem; }
.hoja-imprimible .pred-jornada-lugar-texto { font-size: 0.52rem; font-weight: 400; }
.hoja-imprimible .pred-jornada-meta { font-size: 0.48rem; gap: 0.05rem; margin-top: 0.05rem; }
.hoja-imprimible .pred-jornada-capitan-foto { margin-top: 0.1rem; }
/* Las fotos conservan su tamaño: solo se les quita el margen vertical de
   .vista-avatar, que separaba cada foto de su fila y hacía crecer las tarjetas
   y el VMC sin aportar nada al impreso. El margen horizontal se mantiene. */
.hoja-imprimible .vista-avatar { margin-top: 0; margin-bottom: 0; }
.hoja-imprimible .pred-jornada-capitan-foto .vista-avatar { width: 40px; height: 40px; }
.hoja-imprimible .pred-cal-slot .pred-jornada-vacia { min-height: 1.25rem; font-size: 0.52rem; font-weight: 400; text-transform: none; }
/* Icono de lugar, icono de actividad y foto del dueño de una casa al MISMO
   porte (22px) para que se distingan bien al imprimir. El bloque de icono +
   dueño es más ancho, así que el texto del lugar se parte en más líneas: se
   recupera ese alto acortando el hueco con el texto y el relleno de la
   tarjeta, de modo que la semana sigue cabiendo en una hoja carta. */
.hoja-imprimible .pred-jornada-lugar-icono .vista-icono { width: 22px; height: 22px; }
.hoja-imprimible .pred-jornada-actividad-ico .vista-icono { width: 22px; height: 22px; vertical-align: -2px; }
/* La foto del dueño de una casa, más grande que el icono de lugar para que se
   distinga la persona. */
.hoja-imprimible .pred-jornada-dueno .vista-avatar { width: 30px; height: 30px; }
.hoja-imprimible .pred-jornada-hora-ico { width: 9px; height: 9px; }

/* Privilegios combinados (PDF): tabla compacta con una fila por puesto (icono
   + etiqueta, una única vez) y dos columnas con el responsable de entre semana
   y de fin de semana, de modo que cada foto queda INMEDIATAMENTE al lado de su
   privilegio. La Limpieza se estira para coincidir con su altura. */
.hoja-imprimible .vista-priv-foto { flex: none; margin-top: 0; }
.hoja-imprimible .vista-priv-foto .vista-avatar { width: 28px; height: 28px; }
.hoja-imprimible .vista-priv-sin { font-size: 0.6rem; margin-top: 0.25rem; }

/* Privilegios combinados (PDF): una fila por reunión (entre semana y fin de
   semana) y una columna por puesto (icono + etiqueta, repetidos una única
   vez). Las tres filas comparten la MISMA rejilla (grid-template-columns se
   fija en el HTML), así los responsables quedan alineados exactamente debajo
   de su privilegio. La Limpieza se estira para coincidir con su altura. */
.hoja-imprimible .vista-priv-merge {
    display: grid;
    align-items: center;
    gap: 0.14rem 0.3rem;
    padding: 0.14rem 0.3rem;
}
.hoja-imprimible .vista-priv-merge .vista-priv-merge-dia {
    font-size: 0.48rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
}
.hoja-imprimible .vista-priv-merge .vista-priv-merge-puesto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    font-size: 0.46rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.05;
    text-align: center;
}
/* Icono de cada responsabilidad (presidencia, acomodación, video y cámara),
   más pequeño que la foto de quien la cumple: el protagonismo es de la persona. */
.hoja-imprimible .vista-priv-merge .vista-priv-merge-puesto .vista-icono {
    flex: none;
    height: 22px;
    width: 22px;
    object-fit: contain;
}
.hoja-imprimible .vista-priv-merge .vista-priv-foto {
    flex: none;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Foto de cada responsable de Privilegios, más pequeña que la del capitán de
   la predicación para que el calendario pueda usar iconos de lugar y actividad
   más grandes sin desbordar la hoja. */
.hoja-imprimible .vista-priv-merge .vista-priv-foto .vista-avatar { width: 32px; height: 32px; }
.hoja-imprimible .vista-priv-merge .vista-priv-sin { font-size: 0.44rem; margin-top: 0; }

.hoja-imprimible .programa-inicio .vista-grid-limpieza { gap: 0.2rem; padding: 0.16rem; }
/* La celda acompaña el porte de la foto para que respire. En la hoja impresa
   las celdas no crecen: se reparten igual que en el PDF de asignaciones. */
.hoja-imprimible .vista-limpieza-celda { flex: 0 1 46px; padding: 2px 0 3px; gap: 1px; }
/* Fotos de los responsables de la limpieza, del mismo porte que Privilegios. */
.hoja-imprimible .vista-grid-limpieza .vista-avatar { width: 32px; height: 32px; }
/* El rótulo "Capitán" lleva el mismo porte y color que la etiqueta de cada
   privilegio, para que toda la fila se lea igual. */
.hoja-imprimible .vista-limpieza-etiqueta {
    /* Alto fijo en TODAS las celdas (también las vacías): así la foto del
       capitán queda en la misma línea que las fotos de sus responsables. */
    height: 0.55rem;
    line-height: 0.55rem;
    font-size: 0.46rem;
    font-weight: 700;
    color: #334155;
}

/* El cuerpo del VMC en la hoja se compacta lo justo para que la semana más
   llena quepa a ancho completo (manteniéndose fiel al diseño de la vista, solo
   con porte de impresión más contenido). La separación de cada fila de parte es
   generosa (arriba, abajo, izquierda y derecha) para comodidad visual. */
.hoja-imprimible .programa-inicio .vista-vmc-cuerpo { padding: 0.12rem 0.5rem; gap: 0.22rem; font-size: 0.68rem; }
.hoja-imprimible .programa-inicio .vista-oracion { padding-right: 0.4rem; gap: 0.4rem; }
.hoja-imprimible .programa-inicio .vista-oracion .vista-icono-vmc { width: 22px; height: 22px; margin-top: 3px; }
/* Fotos del VMC del mismo porte que el resto de responsables (40px): cubre
   las partes, los maestros (titular y ayudante), el presidente y la oración,
   que antes heredaban 48px de la regla de pantalla y desbordaban la hoja. */
.hoja-imprimible .programa-inicio .vista-vmc .vista-avatar { width: 40px; height: 40px; }

.hoja-imprimible .programa-inicio .vista-parte-vmc-titulo { font-size: 0.58rem; }
.hoja-imprimible .programa-inicio .vista-parte-vmc-detalle { font-size: 0.54rem; }
.hoja-imprimible .programa-inicio .vista-palabras-texto { font-size: 0.68rem; }
.hoja-imprimible .programa-inicio .vista-vmc .vista-parte-vmc { gap: 0.24rem; padding: 0.12rem 0.1rem; }
.hoja-imprimible .programa-inicio .vista-palabras { padding: 0.26rem 0.15rem; }

/* Separación de los textos del VMC: las fotos respiran del borde derecho y
   cada texto recibe la misma separación del lado izquierdo (y sus propias
   márgenes arriba/abajo), para que las partes no queden pegadas a los bordes. */
.hoja-imprimible .programa-inicio .vista-parte-vmc-foto,
.hoja-imprimible .programa-inicio .vista-maestros-fila,
.hoja-imprimible .programa-inicio .vista-palabras-pres {
    padding-right: 0.4rem;
}
/* En la hoja las fotos de los responsables son de 40px y sin margen vertical:
   la miniatura de la lección se centra sobre ellas con la misma regla de la
   pantalla, sin mover nada más. */
.hoja-imprimible .programa-inicio .vista-maestros-fila {
    --alto-foto-maestros: 40px;
    --margen-foto-maestros: 0px;
}
.hoja-imprimible .programa-inicio .vista-parte-vmc-texto,
.hoja-imprimible .programa-inicio .vista-palabras-texto {
    padding-left: 0.4rem;
}

.hoja-imprimible .vista-publica-grid { gap: 0.4rem 0.8rem; padding: 0.1rem; }
.hoja-imprimible .vista-publica-card { padding: 0.16rem 0.4rem; gap: 0.06rem; }
.hoja-imprimible .vista-publica-linea { font-size: 0.7rem; }
.hoja-imprimible .vista-publica-tema { font-size: 0.62rem; }

/* Impresión de la hoja del programa de asignaciones: la usa el renderizador
   de Chromium headless (src/pdf/vista_pdf.js) al generar el PDF. Solo queda
   visible la hoja del programa (el resto del SPA se oculta con
   `visibility: hidden` más abajo). Cada semana ocupa exactamente
   una hoja carta gracias a la caja .pagina-semana. */
@media print {
    @page { size: letter; margin: 10mm; }

    /* La página impresa siempre blanca: el gris del fondo de la app solo vive en
       pantalla. Si no, el body pinta ese gris por debajo de cada hoja (las hojas
       de los módulos son más bajas que la carta) y se ve un recuadro de otro
       color al final de las páginas impresas. */
    body { background-color: #fff !important; }

    /* Al imprimir solo la hoja del programa: el resto de la app se oculta. */
    body * { visibility: hidden; }

    /* El navegador omite por defecto los fondos de color al imprimir
       (recuadros del nº de tema, títulos azules, tarjetas, etc.); con esto se
       conservan igual que en pantalla / en el PDF servidor (printBackground). */
    .hoja-imprimible,
    .hoja-imprimible * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .hoja-imprimible,
    .hoja-imprimible * { visibility: visible; }

    .hoja-imprimible {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 !important;
    }

    /* Cuando la impresión la pide el cliente (diálogo del navegador) se marca en
       <body data-impresion="inicio|modulo"> cuál de las dos hojas se imprime:
       la otra se retira. Además se retira el resto de la app, porque si solo se
       ocultara seguiría ocupando espacio y saldrían páginas en blanco detrás. */
    body[data-impresion] > *:not(.hoja-imprimible) { display: none !important; }
    body[data-impresion] .hoja-imprimible { position: static; }
    body[data-impresion="modulo"] #programa-inicio-imprimible { display: none; }
    body[data-impresion="inicio"] #programa-modulo-imprimible { display: none; }
}