/* =========================================================================
   Chrome v2 compartido para placeholders del módulo Control Escolar
   (prefijo cep-). Usado por AltasBajas, Calendario, Comunicacion,
   ControlAcceso y DirectorioEscolar mientras esas pantallas
   permanezcan como "Próximamente".
   ========================================================================= */

.cep-container {
    padding: 22px 28px 36px;
    max-width: 100%;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.cep-bc {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 12px;
    color: var(--text-muted); flex-wrap: wrap;
}
.cep-bc .material-symbols-rounded { font-size: 14px; }
.cep-bc a {
    color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 0.15s ease;
}
.cep-bc a:hover { color: var(--brand-teal-deep); }
.cep-sep { color: var(--text-muted); }
.cep-current { color: var(--text-primary); font-weight: 600; }

.cep-h {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px;
}
.cep-h-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cep-h-icon .material-symbols-rounded { font-size: 26px; }
.cep-h-block { flex: 1; min-width: 0; }
.cep-h-title {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    margin: 0 0 4px;
    line-height: 1.1;
}
.cep-h-sub {
    font-size: 13px; color: var(--text-secondary);
    margin: 0;
}

/* Variantes de color del icon-box, una por placeholder */
.cep-h-icon.amber  { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); }
.cep-h-icon.blue   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); }
.cep-h-icon.rose   { background: linear-gradient(135deg, #EC4899, #BE185D); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25); }
.cep-h-icon.violet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); }
.cep-h-icon.slate  { background: linear-gradient(135deg, #64748B, #334155); box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25); }

/* Bloque "Próximamente" */
.cep-soon {
    background: var(--bg-panel);
    border: 1px dashed var(--border-med);
    border-radius: 14px;
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
}
.cep-soon-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(110, 198, 200, 0.25);
}
.cep-soon-icon .material-symbols-rounded { font-size: 32px; }
.cep-soon-title {
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.cep-soon-text {
    font-size: 13px; color: var(--text-secondary);
    margin: 0; max-width: 480px;
    margin-left: auto; margin-right: auto;
    line-height: 1.5;
}

/* ── Fila de acciones de la página "Próximamente" (deep link) ───────
   Botones locales de esta familia: el primario usa --brand-teal-deep
   (AA, texto blanco 3.8:1 de componente grande §7.1) en base Y en hover.
   El hover NO cambia el fondo: --brand-teal-dark (#4BA8AA) es mas CLARO
   que --brand-teal-deep (#3A8F91) y cae a 2.8:1 (SISTEMA-DISENO.md:311,
   "NO usar texto blanco"). La afordancia del hover la cargan translateY
   + la sombra, no un cambio de fondo. NO el --brand-teal-primary del
   <Button> de la casa (2.0:1, LEC-G007). */
.cep-soon-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
}
.cep-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-md, 9px);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cep-cta .material-symbols-rounded { font-size: 16px; }
.cep-cta--primary {
    background: var(--brand-teal-primary);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(58, 143, 145, 0.3);
}
.cep-cta--primary:hover {
    background: var(--brand-teal-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(58, 143, 145, 0.4);
}
.cep-cta--secondary {
    background: var(--bg-panel);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
.cep-cta--secondary:hover {
    border-color: var(--brand-teal);
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}
.cep-cta--ghost {
    background: transparent;
    color: var(--text-secondary);
}
.cep-cta--ghost:hover {
    color: var(--brand-teal-deep);
    background: var(--bg-light-teal);
}
@media (prefers-reduced-motion: reduce) {
    .cep-cta, .cep-cta--primary:hover { transition: none; transform: none; }
}

@media (max-width: 575.98px) {
    .cep-container { padding: 18px 16px 24px; }
    .cep-h-title { font-size: 22px; }
    .cep-h-icon { width: 42px; height: 42px; border-radius: 11px; }
    .cep-h-icon .material-symbols-rounded { font-size: 22px; }
    .cep-soon { padding: 40px 18px; }
    .cep-soon-icon { width: 54px; height: 54px; border-radius: 14px; }
    .cep-soon-icon .material-symbols-rounded { font-size: 28px; }
    .cep-soon-title { font-size: 18px; }
}

/* ============================================================================
   T-011 — Impresion de codigos QR (GLOBAL, no scoped a proposito).
   El CSS scoped de la pagina no puede alcanzar al shell (sidebar/topbar son otros
   componentes), asi que la logica de impresion vive aqui, guardada por
   body:has(.qrs-page): fuera de /control-escolar/imprimir-qrs no existe .qrs-page,
   el selector no matchea y la impresion de cualquier otra pantalla queda intacta.
   ============================================================================ */
@media print {
    @page qr-premium { size: letter; margin: 10mm; }
    @page qr-credencial { size: letter; margin: 7.2mm 10.45mm; }
    body:has(.qrs-page) .qrs-print-root { page: qr-premium; }
    body:has(.qrs-credencial) .qrs-print-root { page: qr-credencial; }
    /* Remove siblings and shell layout without leaving invisible pages behind. */
    body:has(.qrs-page) *:not(:has(.qrs-print-root)):not(.qrs-print-root):not(.qrs-print-root *) { display:none !important; }
    body:has(.qrs-page), body:has(.qrs-page) *:has(.qrs-print-root),
    body:has(.qrs-page) .qrs-print-root {
        display:block !important; position:static !important; width:auto !important;
        height:auto !important; min-height:0 !important; max-height:none !important;
        margin:0 !important; padding:0 !important; overflow:visible !important;
        transform:none !important; background:white !important;
    }
    body:has(.qrs-page) .qrs-print-root .qrs-sheet { display:block; break-after:page; padding:0; }
    body:has(.qrs-page) .qrs-print-root .qrs-sheet:last-child { break-after:auto; }
    body:has(.qrs-page) .qrs-print-root .qrs-sheet-grid {
        display:grid; grid-template-columns:repeat(3,63mm); grid-auto-rows:51mm; column-gap:3mm; row-gap:2.5mm; justify-content:center;
    }

}
@media print {
    body:has(.qrs-publico) .qrs-print-root .qrs-sheet-grid { grid-template-columns:repeat(5,38mm); grid-auto-rows:40mm; gap:1mm; }
    body:has(.qrs-interno) .qrs-print-root .qrs-sheet-grid { grid-template-columns:repeat(6,31mm); grid-auto-rows:38mm; gap:1mm; }
}
/* ============================================================================
   T-085 — Boletas del periodo (GLOBAL, no scoped a proposito, igual que T-011).
   El CSS scoped de la pagina no alcanza al shell (sidebar/topbar son otros
   componentes), asi que la logica de impresion vive aqui, guardada por
   body:has(.bol-page): fuera de /control-escolar/boletas no existe .bol-page,
   el selector no matchea y la impresion de cualquier otra pantalla queda intacta.
   ============================================================================ */
@media print {
    @page { size: letter; margin: 0; }

    /* Oculta TODO el shell; deja visible solo el area imprimible. */
    body:has(.bol-page) * { visibility: hidden !important; }
    body:has(.bol-page) .bol-print-root,
    body:has(.bol-page) .bol-print-root * { visibility: visible !important; }

    /* Las hojas NO seleccionadas se EXCLUYEN, no se velan: una hoja velada
       sigue gastando papel (es el error que T-011 ya corrigio con .qrs-veiled). */
    body:has(.bol-page) .bol-excluida { display: none !important; }

    /* Saca el shell del flujo y planta el area imprimible arriba a la izquierda. */
    body:has(.bol-page) .bol-preview { display: block; }
    body:has(.bol-page) .bol-print-root {
        display: block; position: absolute; left: 0; top: 0; width: 100%;
    }

    /* Una hoja carta por alumno; corte de pagina entre hojas. */
    body:has(.bol-page) .bol-print-root .bol-hoja {
        display: block; padding: 14mm; margin: 0; width: 100%; max-width: none;
        border: none; border-radius: 0; box-shadow: none; background: #fff;
        break-after: page; break-inside: avoid;
    }
    body:has(.bol-page) .bol-print-root .bol-hoja:last-child { break-after: auto; }

    /* Los tintes de campo formativo son la UNICA guia de agrupacion de la tabla:
       sin ellos la boleta se lee peor. Solo aqui, no en todo el documento. */
    body:has(.bol-page) .bol-print-root { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    /* Tipografia en pt al imprimir. */
    body:has(.bol-page) .bol-print-root .bol-tabla { font-size: 9.5pt; }
    body:has(.bol-page) .bol-print-root .bol-tabla th { font-size: 8pt; }
    body:has(.bol-page) .bol-print-root .bol-ident .al { font-size: 15pt; }
    body:has(.bol-page) .bol-print-root .bol-ident .datos { font-size: 8.5pt; }
    body:has(.bol-page) .bol-print-root .bol-tit .t { font-size: 11pt; }
    body:has(.bol-page) .bol-print-root .bol-cifras .cif .n { font-size: 14pt; }
    body:has(.bol-page) .bol-print-root .bol-cifras .cif .l { font-size: 8pt; }
    body:has(.bol-page) .bol-print-root .bol-firmas { font-size: 8.5pt; }
    body:has(.bol-page) .bol-print-root .bol-nota { font-size: 8pt; }
    body:has(.bol-page) .bol-print-root .bol-legal { font-size: 7.5pt; }
}