/*
================================================================
ÍNDICE GENERAL · DOCUMENTACIÓN DE MANTENIMIENTO
01. VARIABLES GLOBALES · CONFIGURACIÓN
02. BASE GLOBAL · IMPRESIÓN Y SCROLL
03. FOOTER TEMPORAL DE CONFERENCIA
03.a RESPONSIVE MÓVIL · FOOTER TEMPORAL
04. CONFERENCIAS · CAJA FLOTANTE
04.a CALENDARIO · RESALTADO DE CONFERENCIAS
05. ENCABEZADO WEB
06. CONTROLES PÚBLICOS · PAÍS, IDIOMA, AÑO Y FORMATO
07. CALENDARIO · PÁGINAS MENSUALES Y FORMATO 3M
08. FOOTER DEL CALENDARIO
08.a WHATSAPP · ICONOS Y QR
08.b FOOTER WEB
09. INICIO · LOGIN Y EDITOR ADMINISTRATIVO
09.a EDITOR · IMÁGENES R2 Y CONFERENCIAS
10. INICIO · RESPONSIVE MÓVIL
11. IMPRESIÓN · CALENDARIO Y VISIBILIDAD
12. CALENDARIO · DÍA ACTUAL
13. EDITOR DE CONTACTOS Y COMPARTIR CONFERENCIAS
14. CONTACTOS · WHATSAPP, LLAMADAS Y GOOGLE MAPS
14.a COMPARTIR · FOOTER TEMPORAL
15. DIRECTORIO DE ASAMBLEAS
15.a EDITOR · CONTACTOS DEL FOOTER
16. BOTONES DE CONTACTO · WHATSAPP Y LLAMADAS
17. GOOGLE MAPS · FOOTER NORMAL
18. RESPONSIVE MÓVIL · AMPLIACIONES
19. IMPRESIÓN · CONTACTOS Y GOOGLE MAPS
Los números son referencias temáticas; las continuaciones conservan su posición.
Solo señalización: mantener el orden del código y de las reglas.
================================================================
*/
/* =====================================================
   CALENDARIOS EVANGELÍSTICOS 2027
   HOJA / RESPONSIVE / IMPRESIÓN CON VARIABLES DINÁMICAS
===================================================== */
/*
================================================================
01. VARIABLES GLOBALES · CONFIGURACIÓN
Propiedades dinámicas actualizadas por aplicarDiseno y sincronizarElementosFijos en index.html (19.c y 22.c).
================================================================
*/
:root {
    --color-texto: #1a1a1a;
    --color-ref: #1a1a1a;
    --color-mes: #000000;
    --color-domingo: #a51d1d;
    --color-evento-bg: #004c6d;
    --color-evento-txt: #ffffff;
    --biblia-size: 30px;
    --ref-size: 18px;
    --biblia-weight: bold;
    --biblia-lh: 1.35;
    --mes-size: 30px;
    --grid-mt: 2cm;
    --sem-size: 18px;
    --dia-size: 24px;
    --grid-gap: 0.95cm;
    --cal-height: 51.72%;
    --cal-bg: transparent;
    --web-footer-height: 58px;
    --mobile-bottom-space: 115px;
}

/*
================================================================
02. BASE GLOBAL · IMPRESIÓN Y SCROLL
Formato de página, caja, tipografía y desplazamiento global; mantener esta posición en la cascada.
================================================================
*/
@page { size: 21cm 29cm; margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; }
html { scroll-behavior: smooth; }

body { font-family: Georgia, serif; background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow-x: hidden; }

/* =====================================================
   FOOTER TEMPORAL DE EVENTOS
===================================================== */
/*
================================================================
03. FOOTER TEMPORAL DE CONFERENCIA
Distribución del contenido generado por seleccionarEvento en index.html (15).
================================================================
*/
.temp-event-footer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Apila el título y los detalles */
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-family: Arial, sans-serif;
    text-align: center;
    /* MAGIA: Hereda exactamente el tamaño responsivo (clamp) del footer original */
    font-size: inherit; 
}

.temp-event-lugar {
    font-weight: bold;
    color: var(--color-evento-bg);
    /* 1.2 veces el tamaño del texto del footer base */
    font-size: 1.2em; 
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.temp-event-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 1em; /* Mismo tamaño que las direcciones normales */
    color: #1a1a1a;
}

.temp-event-details > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Iconos proporcionales: crecerán o se achicarán junto con la letra */
.temp-event-footer svg {
    width: 1.3em;
    height: 1.3em;
}

/* Ajuste fino opcional para pantallas muy pequeñas */
/*
================================================================
03.a RESPONSIVE MÓVIL · FOOTER TEMPORAL
Primer ajuste móvil; se complementa con los bloques posteriores 10 y 18.
================================================================
*/
@media screen and (max-width: 700px) {
    .temp-event-details {
        gap: 8px; /* Menor separación horizontal para que encaje mejor */
    }
}
/* =====================================================
   CAJA FLOTANTE DE CONFERENCIAS (SOLO WEB)
===================================================== */
/*
================================================================
04. CONFERENCIAS · CAJA FLOTANTE
Presentación del listado pintado por pintarCajaEventos en index.html (14.c).
================================================================
*/
.floating-events {
    position: fixed; top: 100px; left: 20px; width: 250px;
    background: #ffffff; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 900; overflow: hidden; font-family: Arial, sans-serif;
    border: 1px solid rgba(0,76,109,.2); transition: all 0.3s ease;
}
.fe-header {
    background: #004c6d; color: #fff; padding: 10px 15px; font-weight: bold; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center; cursor: default;
}
.fe-toggle { display: none; }
.fe-body { padding: 10px; max-height: 400px; overflow-y: auto; }
.fe-hint { font-size: 10px; color: #004c6d; font-style: italic; margin-bottom: 5px; text-align: center; font-weight: bold; animation: pulseHint 2s infinite; }
@keyframes pulseHint { 0% { opacity: 0.6; } 50% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0.6; } }

.fe-item { padding: 8px; border-bottom: 1px dashed #ccc; font-size: 11px; cursor: pointer; transition: background 0.2s; }
.fe-item:hover { background: #f0f6f9; }
.fe-item:last-child { border-bottom: none; }
.fe-empty { font-size: 11px; color: #777; text-align: center; padding: 10px; }

/* =====================================================
   CÍRCULOS DE EVENTOS EN EL CALENDARIO
===================================================== */
/*
================================================================
04.a CALENDARIO · RESALTADO DE CONFERENCIAS
Círculos para fechas seleccionadas; véanse IMPRESIÓN (11) y día actual (12).
================================================================
*/
.event-highlight {
    background-color: var(--color-evento-bg) !important;
    color: var(--color-evento-txt) !important;
    border-radius: 50%;
    
    /* Configuración de geometría relativa a la fuente para prevenir Reflow */
    width: 1.6em;
    height: 1.6em;
    margin: 0 auto; /* Centra el nodo dentro de su Grid Track */
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* =====================================================
   ENCABEZADO WEB FIJO, SELECTORES SUPERPUESTOS
===================================================== */
/*
================================================================
05. ENCABEZADO WEB
Cabecera fija, marca y textos públicos.
================================================================
*/
.web-header { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: #004c6d; color: #fff; z-index: 1000; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); }
.header-inner { width: 100%; height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { min-width: 0; display: flex; flex-direction: column; } 
.brand-title { font-size: 17px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } 
.brand-subtitle { margin-top: 2px; font-size: 11px; letter-spacing: 1px; opacity: 0.8; text-transform: uppercase; }

/*
================================================================
06. CONTROLES PÚBLICOS · PAÍS, IDIOMA, AÑO Y FORMATO
Selectores superpuestos y botones del encabezado; estructura en index.html (02).
================================================================
*/
.header-tools { display: flex; gap: 10px; align-items: center; justify-content: center; }
.public-controls { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: center; } 

/* Truco de Selectores Superpuestos (Overlay Select) */
.custom-select-wrapper { position: relative; display: inline-block; }
.custom-select-display {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 14px; font-weight: 600; padding: 0 10px;
    border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    min-width: 44px; height: 34px; transition: background 0.2s;
}
.custom-select-wrapper:hover .custom-select-display { background: rgba(255,255,255,0.16); }
.public-select {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
    -webkit-appearance: none; appearance: none;
}

.header-actions { display: flex; gap: 8px; align-items: center; } 
.icon-button { 
    height: 34px; width: 34px; display: flex; align-items: center; justify-content: center; 
    border-radius: 5px; cursor: pointer; background: rgba(255,255,255,.08); 
    border: 1px solid rgba(255,255,255,.5); color: #fff; padding: 0; 
}
.icon-button:hover { background: rgba(255,255,255,.16); } 
.public-format-wrapper .custom-select-display { min-width: 42px; }
.public-randomize-button svg { pointer-events: none; }
.public-randomize-button:active { transform: translateY(1px); }

/* =====================================================
   CONTENIDO Y CALENDARIO
===================================================== */
/* CORRECCIÓN: Agregada transición suave para el espacio fantasma al abrir caja flotante */
/*
================================================================
07. CALENDARIO · PÁGINAS MENSUALES Y FORMATO 3M
Contenedores, imágenes, textos y cuadrícula; index.html (12) mantiene 35 celdas y cinco filas.
================================================================
*/
.app-content { width: 100%; padding-top: 84px; padding-bottom: 82px; transition: padding-bottom 0.3s ease; }
.calendar-viewer { width: 100%; display: flex; flex-direction: column; align-items: center; }
.page-container { width: 21cm; height: 29cm; position: relative; flex: 0 0 auto; overflow: hidden; page-break-after: always; break-after: page; background-repeat: no-repeat; background-size: cover; background-position: center center; box-shadow: 0 4px 14px rgba(0,0,0,.28); margin: 20px 0; scroll-margin-top: 78px; }

#mes-01 { background-image: url("1.jpg"); } #mes-02 { background-image: url("2.jpg"); } #mes-03 { background-image: url("3.jpg"); } #mes-04 { background-image: url("4.jpg"); } #mes-05 { background-image: url("5.jpg"); } #mes-06 { background-image: url("6.jpg"); } #mes-07 { background-image: url("7.jpg"); } #mes-08 { background-image: url("8.jpg"); } #mes-09 { background-image: url("9.jpg"); } #mes-10 { background-image: url("10.jpg"); } #mes-11 { background-image: url("11.jpg"); } #mes-12 { background-image: url("12.jpg"); }

.bible-text-container { position: absolute; left: 10%; width: 80%; z-index: 10; }
.bible-text { width: 90%; margin: 0 auto; font-size: var(--biblia-size); font-weight: var(--biblia-weight); line-height: var(--biblia-lh); color: var(--color-texto); }
.bible-ref { font-size: var(--ref-size); font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-ref); }
.calendar-area { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2%; height: var(--cal-height); background: var(--cal-bg); }
.month-title { margin: 0 0 .28cm; font-size: var(--mes-size); color: var(--color-mes); line-height: 1; letter-spacing: 2px; text-align: center; font-weight: bold; text-transform: uppercase; }
.calendar-grid { width: 82%; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; justify-items: center; text-align: center; column-gap: .08cm; margin-top: var(--grid-mt); row-gap: var(--grid-gap); font-size: var(--dia-size); }
.calendar-grid .weekday { font-size: var(--sem-size); font-weight: bold; letter-spacing: .5px; text-transform: uppercase; }
.calendar-grid .day { min-width: 25px; font-weight: normal; }
.calendar-grid .sunday, .calendar-grid .feriado { color: var(--color-domingo); }

/*
================================================================
07.a FORMATO 3M · TRES TABLAS EN EL ESPACIO DEL CALENDARIO ACTUAL
Conserva una sola imagen, un solo texto bíblico y un solo footer por hoja.
================================================================
*/
.triple-calendar-area { align-items: center; }
.quarter-year {
    width: 100%;
    margin: 0 0 .18cm;
    color: var(--color-mes);
    font-size: calc(var(--mes-size) * .72);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
}
.triple-calendars {
    width: 82%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28cm;
    align-items: start;
}
.triple-month { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.triple-month .month-title {
    margin: 0 0 .18cm;
    font-size: calc(var(--mes-size) * .62);
    letter-spacing: .8px;
    white-space: nowrap;
}
.triple-month .calendar-grid {
    width: 100%;
    margin-top: clamp(.65cm, calc(var(--grid-mt) - .75cm), 1.35cm);
    column-gap: .02cm;
    row-gap: var(--grid-gap);
    font-size: calc(var(--dia-size) * .62);
}
.triple-month .calendar-grid .weekday {
    font-size: calc(var(--sem-size) * .58);
    letter-spacing: 0;
}
.triple-month .calendar-grid .day { min-width: 0; width: 100%; }
.quarter-page[hidden], .monthly-page[hidden] { display: none !important; }

/* =====================================================
   FOOTERS
===================================================== */
/*
================================================================
08. FOOTER DEL CALENDARIO
Distribución de QR y CONTACTOS del footer normal; véanse ampliaciones 16 y 17.
================================================================
*/
.footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 4cm; padding: 0 1.2cm; display: flex; align-items: center; font-family: Arial, sans-serif; font-size: 14px; color: #000; z-index: 20; background: transparent; }
.footer-left { display: flex; align-items: center; flex-shrink: 0; } .footer-center { display: flex; align-items: center; justify-content: center; flex: 3; min-width: 0; } .footer-right { display: none; }
.footer-contactos { width: 100%; display: flex; align-items: center; justify-content: space-evenly; gap: 12px; } .footer-contacto { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 0; } .footer-contacto-linea { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 3px; font-weight: bold; } .footer-contacto-direccion { line-height: 1.25; white-space: nowrap; text-align: center; } .footer-separador { width: 1px; height: 1.45cm; background: rgba(0,76,109,.35); flex-shrink: 0; }
/*
================================================================
08.a WHATSAPP · ICONOS Y QR
Reglas originales compartidas de iconos, WhatsApp y QR; botones telefónicos adicionales en 14 y 16.
================================================================
*/
.icon { fill: none; stroke: #004c6d; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .whatsapp { width: 30px; height: 30px; } .qr-container { display: flex; gap: 12px; align-items: center; border-right: 1.5px solid rgba(0,76,109,.3); padding-right: 15px; margin-right: 15px; } .qr-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .qr-label { font-family: Arial, sans-serif; font-size: 8px; font-weight: bold; letter-spacing: .5px; color: #004c6d; white-space: nowrap; text-transform: uppercase; } .qr-img { width: 80px; height: 80px; border-radius: 4px; background-color: transparent; mix-blend-mode: multiply; flex-shrink: 0; }

/*
================================================================
08.b FOOTER WEB
Contacto del desarrollador y enlaces; altura sincronizada desde index.html (22.c).
================================================================
*/
.web-footer { 
    position: fixed; left: 0; bottom: 0; width: 100%; height: auto; min-height: 58px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    background: #004c6d; color: #fff; z-index: 1000; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-size: 13px; font-weight: 500; letter-spacing: .5px; text-align: center; padding: 8px 10px; line-height: 1.5;
}
#developerContactStr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.developer-sep { opacity: .55; }
.developer-link { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); transition: background .2s ease, border-color .2s ease; }
.developer-link:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.8); }

/* =====================================================
   PANEL DE ADMIN
===================================================== */
/*
================================================================
09. INICIO · LOGIN Y EDITOR ADMINISTRATIVO
Modales, pestañas, campos y controles del editor; estructura en index.html (05.a y 06).
================================================================
*/
.admin-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.68); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; overflow-y: auto; } .admin-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.admin-panel { position: relative; width: min(430px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px 32px 30px; background: #ffffff !important; color: #222; border: 1px solid rgba(0,76,109,.18); border-radius: 10px; box-shadow: 0 25px 70px rgba(0,0,0,.42); font-family: Arial, sans-serif; } .modal-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #777; font-size: 26px; line-height: 1; cursor: pointer; } .modal-close:hover { color: #004c6d; } .admin-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; border-radius: 50%; background: #eef5f8; font-size: 21px; } .admin-panel h2 { margin: 0 0 8px; color: #004c6d; font-size: 23px; line-height: 1.2; text-align: center; } .admin-description { margin: 0 auto 24px; max-width: 340px; color: #666; font-size: 13px; line-height: 1.55; text-align: center; } #loginForm { width: 100%; } #loginForm label { display: block; margin: 0 0 6px; color: #3f3f3f; font-size: 11px; font-weight: 700; } #loginForm input { display: block; width: 100%; height: 44px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid #ccd4d8; border-radius: 6px; background: #fff; color: #222; font-family: Arial, sans-serif; font-size: 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } #loginForm input:focus { border-color: #004c6d; box-shadow: 0 0 0 3px rgba(0,76,109,.09); } .login-submit { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 14px; border: 1px solid #004c6d; border-radius: 6px; background: #004c6d; color: #fff; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; } .login-submit:hover { background: #003b54; border-color: #003b54; } .login-message { min-height: 18px; margin: 12px 0 0; color: #666; font-size: 11px; text-align: center; } .login-message.error { padding: 9px 10px; border-radius: 5px; background: #fff1f1; color: #a51d1d; }
.editor-modal { position: fixed !important; top: 64px !important; right: 0 !important; bottom: var(--web-footer-height) !important; left: 0 !important; z-index: 3000 !important; display: none !important; align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; background: transparent !important; pointer-events: none !important; } .editor-modal.active { display: flex !important; pointer-events: none !important; } .editor-shell { position: relative !important; width: 430px !important; max-width: 430px !important; height: 100% !important; max-height: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: #fff !important; border: none !important; border-left: 1px solid rgba(0,76,109,.25) !important; border-radius: 0 !important; box-shadow: -8px 0 30px rgba(0,0,0,.25) !important; font-family: Arial, sans-serif; pointer-events: auto !important; } .editor-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; background: #004c6d; color: #fff; border-bottom: 1px solid rgba(0,0,0,.12); } .editor-kicker { display: block; margin-bottom: 4px; font-size: 9px; font-weight: bold; letter-spacing: 1.5px; opacity: .75; } .editor-head h2 { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 600; } .editor-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #fff; font-size: 28px; cursor: pointer; opacity: .85; } .editor-close:hover { opacity: 1; }
.editor-tabs { flex: 0 0 auto; display: flex; overflow-x: auto; background: #f4f6f7; border-bottom: 1px solid #dfe3e5; scrollbar-width: thin; } .editor-tab { flex: 0 0 auto; padding: 11px 13px; border: none; border-bottom: 2px solid transparent; background: transparent; color: #555; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; } .editor-tab.active { color: #004c6d; border-bottom-color: #004c6d; background: #fff; } .editor-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px; background: #fff; scrollbar-width: thin; } .editor-section { display: none; } .editor-section.active { display: block; } .editor-section h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #004c6d; } .editor-section h3:not(:first-child) { margin-top: 22px; }
.lang-tabs-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #cfd7db; } .lang-label { font-size: 11px; font-weight: bold; color: #444; } .lang-tabs { display: flex; gap: 5px; } .lang-btn { background: #f4f6f7; border: 1px solid #cfd7db; color: #555; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 4px; cursor: pointer; } .lang-btn.active { background: #004c6d; color: #fff; border-color: #004c6d; }
.editor-grid { display: grid; gap: 12px; } .editor-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); } .editor-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); } .editor-field { margin-bottom: 14px; } .editor-field label, .editor-section label, .qr-edit-card label { display: block; margin-bottom: 5px; color: #444; font-size: 11px; font-weight: 700; } .editor-field input, .editor-field textarea, .editor-field select, .editor-section input, .editor-section textarea, .editor-section select, .qr-edit-card input { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid #ccd4d8; border-radius: 5px; background: #fff; color: #222; font-family: Arial, sans-serif; font-size: 13px; outline: none; } .editor-field textarea, .editor-section textarea { min-height: 80px; resize: vertical; } .qr-edit-card { padding: 13px; border: 1px solid #dce2e5; border-radius: 6px; background: #fafbfb; } .qr-edit-card label:not(:first-child) { margin-top: 10px; } .month-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 18px; } .month-selector button { min-height: 34px; border: 1px solid #cfd7db; border-radius: 5px; background: #fff; color: #444; font-size: 11px; font-weight: 700; cursor: pointer; } .month-selector button.selected { background: #004c6d; border-color: #004c6d; color: #fff; } .editor-note { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #004c6d; background: #f4f7f8; color: #666; font-size: 11px; line-height: 1.45; } .editor-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; background: #f5f6f7; border-top: 1px solid #dfe3e5; } .save-status { color: #666; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .editor-foot > div { display: flex; gap: 7px; flex-shrink: 0; } .primary-btn, .secondary-btn { min-height: 36px; padding: 8px 13px; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; } .primary-btn { border: 1px solid #004c6d; background: #004c6d; color: #fff; } .secondary-btn { border: 1px solid #c8d0d4; background: #fff; color: #444; }
.editor-note.compact { margin-top: 8px; padding: 8px 10px; }
.editor-note code { font-family: Consolas, "Courier New", monospace; font-size: .95em; }
/*
================================================================
09.a EDITOR · IMÁGENES R2 Y CONFERENCIAS
Estado de subida y filas de edición de eventos; lógica en index.html (21 y 19.b).
================================================================
*/
.image-upload-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-upload-status { color: #666; font-size: 11px; line-height: 1.35; }
.admin-event-row { background:#f4f6f7; padding:8px; border:1px solid #ccc; border-radius:5px; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.admin-event-summary { min-width:0; font-size:11px; overflow-wrap:anywhere; }
.admin-event-actions { display:flex; flex:0 0 auto; }
.admin-icon-btn { min-height:30px; padding:4px 8px; margin-right:4px; display:flex; align-items:center; justify-content:center; }
.admin-icon-btn:last-child { margin-right:0; }
.admin-icon-btn.danger { color:#b00020; }
/*
================================================================
09. FIN · LOGIN Y EDITOR ADMINISTRATIVO
Los campos del DIRECTORIO y CONTACTOS continúan en 15 y 15.a.
================================================================
*/


/* =====================================================
   RESPONSIVE Y MÓVIL
===================================================== */
/*
================================================================
10. INICIO · RESPONSIVE MÓVIL
Ajustes a 900px y 700px del encabezado, calendario, editor y footers. Conservar su orden.
================================================================
*/
@media screen and (max-width: 900px) {
    .public-controls { flex-wrap: wrap; justify-content: flex-end; padding-right: 10px; } 
    .editor-shell { width: 380px !important; max-width: 380px !important; } .editor-grid.three { grid-template-columns: 1fr; }
    .page-container { width: calc(100vw - 24px); height: calc(138.095vw - 33.14px); min-height: calc(138.095vw - 33.14px); margin: 12px auto; scroll-margin-top: 78px; }
    .bible-text { font-size: clamp(calc(var(--biblia-size) * 0.5), 3.5vw, var(--biblia-size)); } .bible-ref { font-size: clamp(calc(var(--ref-size) * 0.5), 1.8vw, var(--ref-size)); } .month-title { font-size: clamp(calc(var(--mes-size) * 0.5), 3vw, var(--mes-size)); }
    .calendar-area { height: 55%; }
    .calendar-grid { font-size: clamp(calc(var(--dia-size) * 0.5), 2.5vw, var(--dia-size)); row-gap: 2.4vw; margin-top: 5vw; } .calendar-grid .weekday { font-size: clamp(calc(var(--sem-size) * 0.5), 2vw, var(--sem-size)); }
    .quarter-year { margin-bottom: .8vw; font-size: clamp(12px, 2.4vw, calc(var(--mes-size) * .72)); }
    .triple-calendars { gap: 1.2vw; }
    .triple-month .month-title { font-size: clamp(9px, 1.9vw, calc(var(--mes-size) * .62)); letter-spacing: .2px; }
    .triple-month .calendar-grid { margin-top: 3.5vw; row-gap: 2.4vw; font-size: clamp(7px, 1.55vw, calc(var(--dia-size) * .62)); }
    .triple-month .calendar-grid .weekday { font-size: clamp(6px, 1.25vw, calc(var(--sem-size) * .58)); }
    .qr-img { width: clamp(42px, 8vw, 80px); height: clamp(42px, 8vw, 80px); } .qr-label { font-size: clamp(5px, .9vw, 8px); } .footer { padding: 0 3vw; font-size: clamp(7px, 1.4vw, 14px); } .whatsapp { width: clamp(18px, 3vw, 30px); height: clamp(18px, 3vw, 30px); }
}

@media screen and (max-width: 700px) {
    .web-header { height: auto; min-height: 50px; padding: 5px 0; }
    .header-inner { flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 4px; }
    .brand { display: flex; flex-direction: column; align-items: center; text-align: center; } 
    
    .header-tools { display: flex; flex-wrap: nowrap; width: 100%; justify-content: space-evenly; gap: 4px; }
    .public-controls { flex: 0 1 auto; gap: 4px; }
    .header-actions { flex: 0 1 auto; gap: 4px; }
    
    .custom-select-display { padding: 0 6px; font-size: 11px; min-width: 34px; height: 34px; }
    .public-format-wrapper .custom-select-display { min-width: 34px; }
    .icon-button { padding: 0; font-size: 16px; width: 34px; height: 34px; } 
    .public-randomize-button { width: 32px; height: 34px; }

    .app-content { padding-top: 85px; padding-bottom: var(--mobile-bottom-space); }
    
    .editor-modal { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background: rgba(0,0,0,.15) !important; flex-direction: column !important; justify-content: flex-end !important; pointer-events: auto !important; }
    .editor-shell { width: 100% !important; max-width: 100% !important; height: 60vh !important; border: none !important; border-top: 1px solid rgba(0,76,109,.25) !important; border-radius: 16px 16px 0 0 !important; }
    .editor-grid.two { grid-template-columns: 1fr; } .editor-foot { flex-direction: column; align-items: stretch; } .save-status { text-align: center; } .editor-foot > div { width: 100%; } .editor-foot button { flex: 1; }
    
    .page-container { width: calc(100vw - 10px); height: calc(138.095vw - 13.8px); min-height: calc(138.095vw - 13.8px); margin: 5px auto; }
    .bible-text-container { width: 88%; left: 6%; } .calendar-area { height: 55%; }
    .calendar-grid { width: 90%; row-gap: 3.5vw; margin-top: 8%; }
    .quarter-year { margin-bottom: .6vw; font-size: clamp(11px, 3vw, 18px); letter-spacing: .8px; }
    .triple-calendars { width: 90%; gap: .8vw; }
    .triple-month .month-title { margin-bottom: .8vw; font-size: clamp(7px, 2.4vw, 15px); letter-spacing: 0; }
    .triple-month .calendar-grid { width: 100%; margin-top: 4%; row-gap: 3.5vw; column-gap: 0; font-size: clamp(6px, 2vw, 12px); }
    .triple-month .calendar-grid .weekday { font-size: clamp(5px, 1.55vw, 10px); }
    .footer { height: 16%; padding: 0 2vw; } .qr-container { gap: 4px; padding-right: 5px; margin-right: 5px; } .qr-img { width: clamp(30px, 8vw, 80px); height: clamp(30px, 8vw, 80px); } .qr-label { font-size: clamp(4px, 1.2vw, 8px); } .footer-contactos { gap: 4px; } .footer-contacto-linea { gap: 3px; } .footer-contacto-direccion { white-space: normal; font-size: clamp(5px, 1.5vw, 14px); } .footer-separador { height: 8vw; }

    .floating-events { top: auto; bottom: var(--web-footer-height); left: 0; width: 100%; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.25); border: none; }
    .fe-header { padding: 12px 20px; font-size: 14px; cursor: pointer; }
    .fe-toggle { display: block; font-size: 16px; transition: transform 0.3s; }
    .fe-toggle::before { content: "▲"; }
    .floating-events.open .fe-toggle { transform: rotate(180deg); }
    .fe-body { display: none; max-height: 250px; }
    .floating-events.open .fe-body { display: block; }

    /* Ajustes específicos del footer temporal en celulares */
    .temp-event-footer { flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.2; }
    .temp-event-footer div { gap: 4px; }
    .temp-event-lugar { font-size: 13px; }
    .temp-event-footer svg { width: 14px; height: 14px; }

    .web-footer { min-height: 38px; padding: 4px 8px; font-size: 10px; line-height: 1.25; letter-spacing: .25px; }
    #developerContactStr { gap: 4px; }
    .developer-link { padding: 2px 7px; }
}


/*
================================================================
10. FIN · RESPONSIVE MÓVIL
Los ajustes finales de contactos aparecen después en 18.
================================================================
*/
/* =====================================================
   IMPRESIÓN
===================================================== */
/*
================================================================
11. IMPRESIÓN · CALENDARIO Y VISIBILIDAD
Tamaño de hoja, saltos, elementos ocultos y resaltados; complementado por 19 y eventos de index.html (22.f).
================================================================
*/
@media print {
    html, body { width: 21cm; height: 29cm; margin: 0; padding: 0; background: transparent; }
    body { overflow: visible; }
    .no-print, .web-header, .web-footer, .admin-modal, .editor-modal, .floating-events, .temp-event-footer { display: none !important; }
    .app-content { padding: 0 !important; margin: 0 !important; }
    .calendar-viewer { width: 21cm; display: block; }
    .page-container { width: 21cm !important; height: 29cm !important; margin: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; }
    .page-container:last-child { page-break-after: auto; break-after: auto; }
    .calendar-grid { margin-top: var(--grid-mt) !important; row-gap: var(--grid-gap) !important; font-size: var(--dia-size) !important; }
    .calendar-grid .weekday { font-size: var(--sem-size) !important; }
    .month-title { font-size: var(--mes-size) !important; }
    .calendar-area { padding-top: 2% !important; }
    body.formato-1m #mes-12 { page-break-after: auto !important; break-after: auto !important; }
    body.formato-3m #trimestre-04 { page-break-after: auto !important; break-after: auto !important; }
    body.formato-3m .quarter-year { margin-bottom: .18cm !important; font-size: calc(var(--mes-size) * .72) !important; letter-spacing: 2px !important; }
    body.formato-3m .triple-calendars { width: 82% !important; gap: .28cm !important; }
    body.formato-3m .triple-month .month-title { margin-bottom: .18cm !important; font-size: calc(var(--mes-size) * .62) !important; letter-spacing: .8px !important; }
    body.formato-3m .triple-month .calendar-grid { width: 100% !important; margin-top: clamp(.65cm, calc(var(--grid-mt) - .75cm), 1.35cm) !important; row-gap: var(--grid-gap) !important; column-gap: .02cm !important; font-size: calc(var(--dia-size) * .62) !important; }
    body.formato-3m .triple-month .calendar-grid .weekday { font-size: calc(var(--sem-size) * .58) !important; letter-spacing: 0 !important; }
    body.formato-3m .triple-month .calendar-grid .day { min-width: 0 !important; width: 100% !important; }

    .event-highlight, .today-highlight {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        opacity: 1 !important;
    }
    .calendar-grid .day.event-highlight { color: #000 !important; }
    .calendar-grid .day.sunday.event-highlight,
    .calendar-grid .day.feriado.event-highlight { color: var(--color-domingo) !important; }
}


/* =====================================================
   RESALTADO DEL DÍA ACTUAL (HOY)
===================================================== */
/*
================================================================
12. CALENDARIO · DÍA ACTUAL
Indicador de hoy y coincidencia con conferencia; bloque situado después de impresión en el original.
================================================================
*/
.today-highlight {
    border: 2px dashed #888; /* Circulo sutil punteado gris */
    border-radius: 50%;
    width: 1.6em; 
    height: 1.6em;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    opacity: 0.9;
}

/* Manejo de colisión: Si hoy coincide con una conferencia */
.today-highlight.event-highlight {
    border: 2px solid #ffcc00; /* Cambia el borde a un color contrastante (ej. dorado) */
    border-style: solid;
}

/* =====================================================
   ACCIONES INTERACTIVAS DE CONFERENCIAS
   DIRECTORIO / CONTACTOS / MAPS / COMPARTIR
===================================================== */
/*
================================================================
13. EDITOR DE CONTACTOS Y COMPARTIR CONFERENCIAS
Fila de teléfono, botón de próximas conferencias e indicadores de detalle; véase index.html (17).
================================================================
*/
.event-phone-row { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 12px; align-items: end; }

.fe-share-all {
    width: 100%; margin: 0 0 8px; min-height: 32px; padding: 7px 10px; border: 1px solid rgba(0,76,109,.32);
    border-radius: 7px; background: #f4f8fa; color: #004c6d; font-family: Arial, sans-serif;
    font-size: 10px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.fe-share-all:hover { background: #e7f1f5; border-color: rgba(0,76,109,.5); transform: translateY(-1px); }
.fe-share-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.fe-more-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; color: #004c6d; font-weight: 700; white-space: nowrap; }
.fe-more-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/*
================================================================
14. CONTACTOS · WHATSAPP, LLAMADAS Y GOOGLE MAPS
Dirección enlazada y botones compartidos del footer temporal. Ambas acciones telefónicas usan las mismas clases.
================================================================
*/
.temp-event-address-link { color: inherit; text-decoration: none; }
.temp-event-address-link:hover { text-decoration: underline; }
.temp-event-phone { display: inline-flex !important; align-items: center; gap: 4px !important; }
.temp-event-phone-number { color: inherit; text-decoration: none; white-space: nowrap; }
.temp-event-phone-actions { display: inline-flex; align-items: center; gap: 3px; }
.temp-event-contact-button,
.temp-event-action-button {
    border: 1px solid rgba(0,76,109,.34); background: rgba(0,76,109,.06); color: var(--color-evento-bg);
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease; font-family: Arial, sans-serif;
}
.temp-event-contact-button { width: 24px; height: 24px; padding: 0; border-radius: 7px; }
.temp-event-contact-main { width: auto; min-width: 24px; padding: 0 7px; gap: 4px; white-space: nowrap; font-weight: 700; }
.temp-event-action-button { min-height: 26px; padding: 3px 8px; border-radius: 7px; gap: 4px; font: inherit; font-weight: 700; }
.temp-event-contact-button:hover,
.temp-event-action-button:hover { background: rgba(0,76,109,.13); border-color: rgba(0,76,109,.55); transform: translateY(-1px); }
.temp-event-contact-button svg,
.temp-event-action-button svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/*
================================================================
14.a COMPARTIR · FOOTER TEMPORAL
Ajuste del botón creado por seleccionarEvento, index.html (15).
================================================================
*/
.temp-event-share { appearance: none; }

/*
================================================================
15. DIRECTORIO DE ASAMBLEAS
Tarjeta, acciones y estado del directorio reutilizable; lógica en index.html (18).
================================================================
*/
.assembly-directory-card { padding: 12px; border: 1px solid #d9e3e7; border-radius: 8px; background: #f8fafb; }
.assembly-directory-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.directory-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.directory-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.directory-btn.danger { color: #a51d1d; border-color: rgba(165,29,29,.28); }
.directory-status { margin-top: 8px; color: #66757c; font-size: 10px; line-height: 1.4; }

/*
================================================================
15.a EDITOR · CONTACTOS DEL FOOTER
Cantidad, campos y tipos de teléfono de los contactos normales.
================================================================
*/
.footer-contact-editor-grid { align-items: start; }
.footer-contact-editor > select { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid #ccd4d8; border-radius: 5px; background: #fff; color: #222; font-family: Arial, sans-serif; font-size: 13px; }
.footer-editor-phone { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #d7dfe2; }
.footer-editor-phone label:not(:first-child) { margin-top: 7px; }
.footer-editor-phone select { width: 100%; min-height: 36px; padding: 8px 9px; border: 1px solid #ccd4d8; border-radius: 5px; background: #fff; color: #222; font-family: Arial, sans-serif; font-size: 12px; }

/*
================================================================
16. BOTONES DE CONTACTO · WHATSAPP Y LLAMADAS
Reglas comunes del footer normal; renderTelefonoFooter, index.html (16.a), elige la acción.
================================================================
*/
.footer-contact-phone-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 8px; margin-bottom: 2px; }
.footer-contact-phone { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; font-weight: 700; }
.footer-contact-actions { display: inline-flex; align-items: center; gap: 2px; }
.footer-contact-action { width: 23px; height: 23px; border: 1px solid rgba(0,76,109,.30); border-radius: 7px; background: rgba(0,76,109,.05); color: #004c6d; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .16s ease, border-color .16s ease; }
.footer-contact-action:hover { background: rgba(0,76,109,.12); border-color: rgba(0,76,109,.52); }
.footer-contact-main { width: auto; min-width: 23px; padding: 0 7px; gap: 4px; white-space: nowrap; font-weight: 700; }
.print-only { display: none; }
.screen-only { display: inline; }
.footer-contact-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/*
================================================================
17. GOOGLE MAPS · FOOTER NORMAL
Dirección, ciudad y botón de mapa generados por renderFooterNormal, index.html (13).
================================================================
*/
.footer-address-link { color: inherit; text-decoration: none; }
.footer-address-link:hover { text-decoration: underline; }
.footer-contact-city { font-weight: 700; color: #004c6d; }
.footer-map-button { margin-top: 3px; min-height: 24px; padding: 3px 8px; border: 1px solid rgba(0,76,109,.30); border-radius: 7px; background: rgba(0,76,109,.05); color: #004c6d; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; font-size: .88em; font-weight: 700; transition: background .16s ease, border-color .16s ease; }
.footer-map-button:hover { background: rgba(0,76,109,.12); border-color: rgba(0,76,109,.52); }
.footer-map-button svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/*
================================================================
18. RESPONSIVE MÓVIL · AMPLIACIONES
Ajustes finales de CONTACTOS, COMPARTIR y DIRECTORIO; permanecen después de sus reglas base.
================================================================
*/
@media screen and (max-width: 700px) {
    .event-phone-row { grid-template-columns: minmax(0,1fr) 105px; gap: 8px; }
    .fe-share-all { font-size: 11px; padding: 7px 8px; }
    .temp-event-footer { gap: 2px; }
    .temp-event-details { gap: 3px 5px; font-size: 9px; line-height: 1.05; }
    .temp-event-phone { gap: 2px !important; }
    .temp-event-phone-actions { gap: 1px; }
    .temp-event-contact-button { width: 19px; height: 19px; border-radius: 5px; }
    .temp-event-contact-main { width: auto; min-width: 19px; padding: 0 5px; gap: 3px; }
    .temp-event-action-button { min-height: 21px; padding: 2px 5px; border-radius: 6px; }
    .temp-event-contact-button svg, .temp-event-action-button svg { width: 11px; height: 11px; }
    .assembly-directory-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .assembly-directory-actions .danger { grid-column: 1 / -1; }
    .footer-contact-phone-list { gap: 1px 4px; margin-bottom: 1px; }
    .footer-contact-phone { gap: 2px; }
    .footer-contact-action { width: 18px; height: 18px; border-radius: 5px; }
    .footer-contact-main { width: auto; min-width: 18px; padding: 0 4px; gap: 2px; }
    .footer-contact-action svg { width: 10px; height: 10px; }
    .footer-map-button { min-height: 18px; padding: 1px 5px; margin-top: 1px; font-size: .82em; border-radius: 5px; }
}

/*
================================================================
19. IMPRESIÓN · CONTACTOS Y GOOGLE MAPS
Oculta acciones interactivas y muestra teléfonos; complemento final del bloque 11.
================================================================
*/
@media print {
    .footer-contact-action, .footer-map-button, .screen-only { display: none !important; }
    .print-only { display: inline !important; }
    .footer-address-link { color: inherit !important; text-decoration: none !important; }
}