/**
 * ILISB FastAPI — capa de presentación sobre Bootstrap 5 / Bootswatch spacelab
 *
 * Cargar DESPUÉS del CSS de Bootstrap. Unico CSS custom de producto
 * (ADR-0002). JS/CSS de un aplicativo: app/webapps/static/<slug>/, no aquí.
 * KB: knowledge/api/ilisb/01-stack/ilisb-assets.md
 *
 * §3.8, §3.10, §1.3: mismas reglas visuales que Flask (copia propia FastAPI).
 * §webapps-jc: solo FastAPI (shell 3 columnas).
 *
 * Convenciones UX:
 *   - Hover solo puntero fino: (hover: hover) and (pointer: fine)
 *   - prefers-reduced-motion: reduce → sin transform/transition
 *   - Variables del tema: var(--bs-primary-rgb), var(--bs-box-shadow), …
 */

/* ==========================================================================
   §3.8 — Cursos: parrilla catálogo (hover lift + zoom imagen)
   ========================================================================== */

.curso-card-media {
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .curso-card {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .curso-card-img {
        transition: transform 0.25s ease;
    }

    .curso-card:hover,
    .curso-card:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--bs-box-shadow);
    }

    .curso-card:hover .curso-card-img,
    .curso-card:focus-within .curso-card-img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .curso-card,
    .curso-card-img {
        transition: none;
    }

    .curso-card:hover,
    .curso-card:focus-within,
    .curso-card:hover .curso-card-img,
    .curso-card:focus-within .curso-card-img {
        transform: none;
    }
}

/* ==========================================================================
   §3.10 — Cursos: filtros sidebar (hover sombreado primary)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .filtro-sidebar-link:not(.bg-primary):hover {
        background-color: rgba(var(--bs-primary-rgb), 0.35);
    }
}

/* Reutilizado en intranet sidebar (#intranet-sidebar) — misma clase filtro-sidebar-link */

/* ==========================================================================
   §1.3 — Marketing: bandas footer (desplazamiento 1 slot)
   ========================================================================== */

.footer-banda-viewport {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.footer-banda-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.55s ease;
}

.footer-banda-slot {
    flex: 0 0 var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    width: var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    max-width: var(--footer-banda-slot-px, calc(100% / var(--footer-banda-visible, 5)));
    min-width: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.footer-banda-img {
    max-height: var(--footer-banda-img-max-h, 360px);
    object-fit: contain;
}

.footer-banda-slot-clone {
    pointer-events: none;
}

.footer-banda-control {
    width: 3rem;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .footer-banda-track {
        transition: none;
    }
}

/* ==========================================================================
   §webapps-jc LOCK 2026-09-06 — shell 3 columnas (no aplicativos)
   No mover: lg+ 3 hermanas; <992 una col 100%; swipe cicla. KB webapps.md
   ========================================================================== */

@media (max-width: 991.98px) {
    [data-webapps-shell] #webapps-col-menu,
    [data-webapps-shell] #webapps-col-app,
    [data-webapps-shell] #webapps-col-help {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        min-height: 60vh;
    }
    [data-webapps-shell]:not([data-page="0"]) #webapps-col-menu,
    [data-webapps-shell]:not([data-page="1"]) #webapps-col-app,
    [data-webapps-shell]:not([data-page="2"]) #webapps-col-help { display: none !important; }
}

/* ==========================================================================
   §webapps-jc — catálogo (colores de familia = variable, no reglas en el HTML)
   ========================================================================== */

.webapps-filter {
    max-width: 22rem;
}

.webapps-fam-card {
    border-top: 4px solid var(--webapps-fam-color, #0d6efd) !important;
}

.webapps-fam-mark {
    width: 3.5rem;
    height: 3.5rem;
    background: color-mix(in srgb, var(--webapps-fam-color, #0d6efd) 13%, transparent);
    color: var(--webapps-fam-color, #0d6efd);
}

/* ==========================================================================
   Admin shell
   ========================================================================== */

[data-admin-sidebar] {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
}

.ilisb-color-swatch {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ilisb-swatch, #0d6efd);
}

/* ==========================================================================
   Certificado de impresión (página suelta; todo acotado a body.certificado-print)
   ========================================================================== */

body.certificado-print {
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    font-family: 'Lato', sans-serif;
    -webkit-print-color-adjust: exact;
}

body.certificado-print .certificado-container {
    width: 297mm;
    height: 210mm;
    margin: 20px auto;
    background: white;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 10px solid #1a3c6e;
    padding: 30px;
    box-sizing: border-box;
}

body.certificado-print .watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.05;
    width: 60%;
    z-index: 0;
    pointer-events: none;
}

body.certificado-print .header {
    z-index: 1;
    margin-bottom: 20px;
}

body.certificado-print .logo {
    height: 70px;
    margin-bottom: 10px;
}

body.certificado-print h1 {
    font-family: 'Cinzel', serif;
    color: #1a3c6e;
    font-size: 42px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
}

body.certificado-print .subtitle {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.certificado-print .content {
    z-index: 1;
    width: 85%;
    margin: 10px 0;
}

body.certificado-print .presentado-a {
    font-size: 18px;
    color: #444;
    margin-bottom: 10px;
    font-style: italic;
}

body.certificado-print .alumno-nombre {
    font-family: 'Cinzel', serif;
    font-size: 38px;
    color: #000;
    border-bottom: 2px solid #d4af37;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    min-width: 60%;
}

body.certificado-print .descripcion {
    font-size: 20px;
    line-height: 1.6;
    color: #444;
}

body.certificado-print .curso-nombre {
    font-weight: 700;
    color: #1a3c6e;
}

body.certificado-print .certificado-nota {
    font-size: 0.8em;
}

body.certificado-print .footer {
    z-index: 1;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
    width: 100%;
}

body.certificado-print .firma {
    text-align: center;
    width: 250px;
}

body.certificado-print .firma--sola {
    margin: 0 auto;
}

body.certificado-print .firma img {
    height: 70px;
    display: block;
    margin: 0 auto -20px auto;
    position: relative;
    z-index: 10;
}

body.certificado-print .firma .linea {
    border-top: 1px solid #333;
    padding-top: 10px;
}

body.certificado-print .firma p {
    margin: 5px 0 0;
    font-weight: bold;
    font-size: 14px;
}

body.certificado-print .firma small {
    color: #666;
    font-size: 12px;
}

body.certificado-print .fecha-emision {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: 12px;
    color: #999;
}

body.certificado-print .no-print {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    text-decoration: none;
}

body.certificado-print .no-print:hover {
    background: #218838;
}

@media print {
    body.certificado-print {
        background: white;
        -webkit-print-color-adjust: exact;
    }

    body.certificado-print html,
    html:has(body.certificado-print),
    body.certificado-print {
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 0;
    }

    body.certificado-print .certificado-container {
        margin: 0;
        box-shadow: none;
        border: 5px solid #1a3c6e;
        width: 297mm;
        height: 209mm;
        max-height: 209mm;
        overflow: hidden;
    }

    body.certificado-print .no-print {
        display: none;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

/* ==========================================================================
   Layout puntual (antes style="" en templates). Solo clases; datos dinámicos
   siguen como variables --* en el HTML.
   ========================================================================== */

.ilisb-sq-40 { width: 40px; height: 40px; }
.ilisb-sq-50 { width: 50px; height: 50px; }
.ilisb-sq-60 { width: 60px; height: 60px; }
.ilisb-sq-100 { width: 100px; height: 100px; }
.ilisb-w-60 { width: 60px; }
.ilisb-w-120 { width: 120px; }
.ilisb-w-150 { width: 150px; }
.ilisb-w-200 { width: 200px; }
.ilisb-maxh-80 { max-height: 80px; }
.ilisb-maxh-100 { max-height: 100px; }
.ilisb-maxh-120 { max-height: 120px; }
.ilisb-maxh-320 { max-height: 320px; }
.ilisb-img-cover { object-fit: cover; }
.ilisb-aliado-logo { max-height: 120px; object-fit: contain; }
.ilisb-hero-nosotros { height: 400px; }
.ilisb-hero-caption { position: absolute; bottom: 0; right: 15%; left: 15%; }
.ilisb-legend-bar { width: 24px; height: 6px; padding: 0; }
.ilisb-cal-dot { height: 6px; padding: 0; }
.ilisb-cal-table { font-size: 0.85rem; }