/* ==========================================================
   Estilos de la Plataforma de Retos SQL
   ========================================================== */
body {
    color: #2c3e50;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.code-box {
    font-family: Consolas, Monaco, "Courier New", monospace;
    background-color: #1e1e1e;
    color: #f8f9fa;
    font-size: .92rem;
    line-height: 1.5;
    border: 1px solid #343a40;
}
.code-box:focus { background-color: #1e1e1e; color: #f8f9fa; }

.schema-box {
    font-family: Consolas, Monaco, "Courier New", monospace;
    background-color: #f8f9fa;
    border-left: 4px solid #0d6efd;
    padding: 12px;
    font-size: .85rem;
    white-space: pre-wrap;
    color: #334155;
}

.codigo-admin { max-height: 80px; overflow-y: auto; white-space: pre-wrap; }

/* Historial de envíos (auditoría del instructor) */
.historial-intentos > td { box-shadow: inset 4px 0 0 #0d6efd; }
.intento-item { border-left: 4px solid #dee2e6; padding: .25rem 0 .25rem .75rem; margin-bottom: .75rem; }
.intento-item:last-child { margin-bottom: 0; }
.intento-ok { border-left-color: #198754; }
.intento-falla { border-left-color: #dc3545; }
.codigo-intento { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }

/* Soluciones (instructor): el SQL de los retos viene en una sola línea */
.reto-solucion .code-block { white-space: pre-wrap; word-break: break-word; padding: .75rem 1rem; margin-bottom: 0; }

/* ---------- Modo protegido (durante un reto) ---------- */
.modo-protegido {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.modo-protegido .permitir-escritura {
    -webkit-user-select: text;
    user-select: text;
}

/* Marca de agua con la identidad del aprendiz (rastrea fotos/capturas) */
.marca-agua {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    background-repeat: repeat;
}

/* Cortina negra que oculta la evaluación */
.escudo {
    display: none;
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 3000;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.escudo.activo { display: flex; }
.escudo-texto { max-width: 520px; }

/* Mientras el escudo está activo el contenido se difumina (por si la captura llega antes) */
body.oculto .contenido-protegido { filter: blur(14px); }

/* Nunca imprimir ni exportar a PDF la evaluación */
@media print {
    .modo-protegido * { display: none !important; }
    .modo-protegido::after {
        content: "Impresión deshabilitada durante la evaluación.";
        display: block !important;
    }
}

/* ---------- Manual teórico ---------- */
.code-block {
    background-color: #1a1e24;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.88rem;
    border-left: 5px solid #0d6efd;
    white-space: pre;
    overflow-x: auto;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.code-block-warn {
    border-left-color: #ffc107;
}
.code-block-err {
    border-left-color: #dc3545;
}
.concept-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.concept-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.nav-pills .nav-link {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    color: #495057;
}
.nav-pills .nav-link.active {
    background-color: #0d6efd;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
}
.section-title {
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #0d6efd;
    border-radius: 2px;
}
.alert-callout {
    border-left: 4px solid #0dcaf0;
    background-color: #f8fdfe;
}
.table-custom th {
    background-color: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
}

/* Tablas de datos de los retos de consultas */
.tabla-datos { max-height: 260px; overflow: auto; font-size: .78rem; }
.tabla-datos th { position: sticky; top: 0; white-space: nowrap; }
.tabla-datos td { white-space: nowrap; }

/* Manual: consultas de verificación y tablas de ejemplo */
.code-block-ok { border-left-color: #198754; }
.teoria .tabla-datos { max-height: none; }
.teoria h3 { margin-top: 2.5rem; }
.teoria .tabla-ref td, .teoria .tabla-ref th { font-size: .85rem; vertical-align: top; }
.orden-ejecucion { counter-reset: paso; list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.orden-ejecucion li { counter-increment: paso; background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 6px; padding: .35rem .7rem; font-size: .85rem; }
.orden-ejecucion li::before { content: counter(paso) ". "; font-weight: 700; color: #0d6efd; }

/* Texto guía legible sobre el fondo oscuro del editor */
.code-box::placeholder { color: #8b949e; opacity: 1; }

/* Tarjetas de nivel: en pantallas angostas la etiqueta de estado baja de línea en vez de salirse */
.encabezado-nivel > :first-child { min-width: 0; }
.encabezado-nivel .badge { white-space: normal; text-align: left; }
@media (max-width: 575.98px) {
    .encabezado-nivel .rounded-circle { padding: .6rem !important; }
    .encabezado-nivel .rounded-circle .fs-2 { font-size: 1.4rem !important; }
}

/* Niveles del manual: básico → intermedio → avanzado */
.nivel-basico     { --nivel: #198754; --nivel-fondo: #e9f7ef; }
.nivel-intermedio { --nivel: #c77700; --nivel-fondo: #fff4e0; }
.nivel-avanzado   { --nivel: #6f42c1; --nivel-fondo: #f1ebfb; }
.nivel-banner {
    border-left: 6px solid var(--nivel);
    background: var(--nivel-fondo);
    border-radius: 8px;
    padding: .8rem 1rem;
    margin: 2.5rem 0 1rem;
    scroll-margin-top: 80px;
}
.nivel-banner .nivel-titulo { color: var(--nivel); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; }
.nivel-banner .nivel-desc { color: #444; font-size: .9rem; }
.nivel-tarjeta { border: 1px solid #e3e6ea; border-top: 4px solid var(--nivel); border-radius: 8px; padding: .7rem .9rem; color: #333; background: #fff; }
.nivel-tarjeta:hover { background: var(--nivel-fondo); color: #222; }
.nivel-badge { background: var(--nivel); }

/* Menú del manual agrupado: botones centrados, un color vivo por grupo */
.teoria-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; align-items: center; }
.teoria-menu .grupo-inicio        { --grupo: #f76707; --grupo-oscuro: #d9480f; }
.teoria-menu .grupo-fundamentos    { --grupo: #1c7ed6; --grupo-oscuro: #1864ab; }
.teoria-menu .grupo-programacion   { --grupo: #e64980; --grupo-oscuro: #c2255c; }
.teoria-menu .grupo-administracion { --grupo: #0ca5b8; --grupo-oscuro: #0b7285; }
.teoria-menu .teoria-grupo {
    flex-basis: 100%; text-align: center; font-size: .75rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--grupo-oscuro); margin-top: .75rem;
}
.teoria-menu .teoria-grupo:first-child { margin-top: 0; }
.teoria-menu .nav-link {
    background-color: var(--grupo); color: #fff; font-weight: 600; font-size: .92rem;
    padding: .5rem 1rem; border-radius: .6rem; box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    transition: transform .12s, box-shadow .12s, background-color .12s;
}
.teoria-menu .nav-link:hover { background-color: var(--grupo-oscuro); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.teoria-menu .nav-link.active {
    background-color: var(--grupo-oscuro); color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--grupo-oscuro), 0 6px 14px rgba(0, 0, 0, .25);
}
.teoria-menu .etiqueta-retos {
    display: inline-block; font-size: .66rem; font-weight: 700; line-height: 1; padding: .25em .55em;
    border-radius: 999px; background-color: rgba(255, 255, 255, .28); color: #fff; vertical-align: .1em;
}