:root {
    --cclass: #11456D;
    --cclass-oscuro: #0B3352;
    --cclass-medio: #1B5A8A;
    --verde: #A7DD41;
    --verde-oscuro: #7FB82A;
    --tinta: #14213D;
    --fondo: #F4F6FA;
    --borde: #E2E7F0;
    --bs-primary: #11456D;
    --bs-primary-rgb: 17, 69, 109;
    --bs-body-bg: var(--fondo);
    --bs-body-color: var(--tinta);
    --bs-link-color: var(--cclass);
    --bs-link-color-rgb: 17, 69, 109;
    --bs-link-hover-color: var(--verde-oscuro);
    --bs-border-radius: .6rem;
}
body { background: var(--fondo); min-height: 100vh; display: flex; flex-direction: column; }

/* Encabezado */
.marca { background: linear-gradient(115deg, var(--cclass-oscuro) 0%, var(--cclass) 60%, var(--cclass-medio) 100%); color: #fff; position: relative; overflow: hidden; }
.marca::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--cclass) 0 40%, var(--verde) 40% 100%); }
.marca .container { min-height: 100px; padding-top: .6rem; padding-bottom: .9rem; position: relative; }
.marca-circulo { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(167, 221, 65, .16); }
.marca-app { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; font-weight: 900; line-height: 1; font-size: clamp(1.5rem, 5vw, 2.8rem); text-shadow: 0 3px 12px rgba(0, 0, 0, .3); }
.marca-app:hover { color: inherit; }
.marca-app .acento { color: var(--verde); }
.marca-app small { display: block; font-size: .3em; font-weight: 600; letter-spacing: .18em; opacity: .85; margin-top: .35rem; }
.marca-app img { height: clamp(48px, 9vw, 72px); width: auto; border-radius: 22%; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }

/* Menú */
.menu { background: #fff; border-bottom: 1px solid var(--borde); box-shadow: 0 4px 18px rgba(0, 41, 85, .08); }
.menu .nav-link { color: var(--tinta); font-weight: 500; border-bottom: 3px solid transparent; padding: .9rem .8rem; }
.menu .nav-link:hover { color: var(--cclass-medio); }
.menu .nav-link.active { color: var(--cclass); border-bottom-color: var(--verde); }

/* Botones, formularios, tarjetas y tablas */
.btn-primary { --bs-btn-bg: var(--cclass); --bs-btn-border-color: var(--cclass); --bs-btn-hover-bg: var(--cclass-oscuro); --bs-btn-hover-border-color: var(--cclass-oscuro); --bs-btn-active-bg: var(--cclass-oscuro); --bs-btn-active-border-color: var(--cclass-oscuro); }
.btn-outline-primary { --bs-btn-color: var(--cclass); --bs-btn-border-color: var(--cclass); --bs-btn-hover-bg: var(--cclass); --bs-btn-hover-border-color: var(--cclass); --bs-btn-active-bg: var(--cclass); --bs-btn-active-border-color: var(--cclass); }
.form-control:focus, .form-select:focus { border-color: var(--cclass-medio); box-shadow: 0 0 0 .2rem rgba(17, 69, 109, .18); }
.form-check-input:checked { background-color: var(--cclass); border-color: var(--cclass); }
.card { --bs-card-bg: #fff; border: 0; border-radius: 1rem; box-shadow: 0 6px 24px rgba(0, 41, 85, .08); }
.card-header { background: #fff; border-bottom: 1px solid var(--borde); border-radius: 1rem 1rem 0 0 !important; font-weight: 600; }
.table > thead th { color: var(--cclass); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
main h1, main h1.h3, main h1.h4 { font-weight: 800; color: var(--cclass); }
.table { --bs-table-bg: #fff; }

/* Pantallas sin sesión: ingreso, registro e instalar */
.publico { background: radial-gradient(circle at 8% 85%, rgba(167, 221, 65, .30), transparent 32%), radial-gradient(circle at 92% 12%, rgba(167, 221, 65, .22), transparent 38%), linear-gradient(160deg, var(--cclass) 0%, var(--cclass-oscuro) 100%); }
.publico .marca { background: transparent; }
.publico .marca::after, .publico .marca-circulo { display: none; }
.publico main, .publico footer { color: #fff; }
.publico main h1 { color: #fff; }
.publico main .card { color: var(--tinta); border-top: 6px solid var(--verde); border-radius: 1.4rem; box-shadow: 0 25px 60px rgba(0, 0, 0, .35); }
.publico main .card h1, .publico main .card h2 { color: var(--cclass); }
.publico .text-muted:not(.card *) { color: rgba(255, 255, 255, .8) !important; }
.publico main a:not(.btn):not(.card *), .publico footer a { color: var(--verde); }
.icono-bienvenida { height: 110px; width: auto; border-radius: 22%; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.logo-login { width: min(240px, 80%); height: auto; }
.bienvenida-acento { color: var(--verde); }
.boton-instalar { --bs-btn-color: var(--cclass-oscuro); --bs-btn-bg: #FFB600; --bs-btn-border-color: #FFB600; --bs-btn-hover-color: var(--cclass-oscuro); --bs-btn-hover-bg: #e6a400; --bs-btn-hover-border-color: #e6a400; --bs-btn-active-bg: #e6a400; --bs-btn-active-border-color: #e6a400; font-weight: 700; border-radius: 2rem; padding-inline: 1.6rem; box-shadow: 0 6px 18px rgba(255, 182, 0, .35); }

main { flex: 1; }
.bg-cclass { background: var(--cclass); }
.btn-cclass { background: var(--cclass); border-color: var(--cclass); color: #fff; }
.btn-cclass:hover, .btn-cclass:focus { background: var(--cclass-oscuro); border-color: var(--cclass-oscuro); color: #fff; }
.chip-color { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.tarjeta-curso { transition: transform .1s; overflow: hidden; }
.tarjeta-curso:hover { transform: translateY(-2px); }
.tarjeta-curso-portada { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.curso-icono { width: 3rem; height: 3rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.unidad-inactiva { opacity: .6; }
.visor-imagen { overflow: auto; max-height: 80vh; background: #fff; border-radius: .5rem; }
.visor-pdf { max-height: 80vh; overflow: auto; background: #e9ecef; padding: .5rem; border-radius: .5rem; }
.zona-archivos { border: 2px dashed #b6c9d8; border-radius: .75rem; padding: 1.5rem; text-align: center; background: #fff; cursor: pointer; }
.zona-archivos.sobre { border-color: var(--cclass); background: #eef6e0; }
.actividad { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid #eee; }
.actividad:last-child { border-bottom: 0; }
.nota-baja { background: #fde2e2; } .nota-media { background: #fff3cd; } .nota-alta { background: #d9f2e0; }
.libro th, .libro td { white-space: nowrap; font-size: .875rem; }
.libro th:first-child, .libro td:first-child { position: sticky; left: 0; background: #fff; }
.tarjeta-pregunta { border-left: 4px solid var(--cclass); }
.temporizador { position: sticky; top: .5rem; z-index: 10; }

/* Notas en círculo azul: --p es el porcentaje que se llena */
.anillo { --p: 0; --tam: 78px; --grosor: 9px; flex: none; position: relative; width: var(--tam); height: var(--tam); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cclass-medio) calc(var(--p) * 1%), var(--borde) 0); }
.anillo::before { content: ""; position: absolute; inset: var(--grosor); border-radius: 50%; background: #fff; }
.anillo > span { position: relative; font-weight: 800; font-size: 1.05rem; color: var(--cclass); text-align: center; line-height: 1; }
.anillo-grande { --tam: 104px; --grosor: 12px; }
.anillo-grande > span { font-size: 1.35rem; }
.anillo-vacio > span { color: #7D8597; }
.min-w-0 { min-width: 0; }

/* Preguntas de ordenar */
.fila-ordenar { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; margin-bottom: .3rem; border: 1px solid var(--borde); border-radius: .5rem; background: #fff; }

/* Pie con el botón amarillo de instalar */
.pie-instalar { border-top: 1px solid var(--borde); margin-top: 1rem; }
.boton-instalar { display: inline-flex; align-items: center; gap: .5rem; }
.zona-instalar[hidden] { display: none !important; }
.publico main .zona-instalar .enlace-instalar { color: #fff; }
.instalar-sistema { background: #fff; border: 2px solid #FFB600; color: var(--cclass-oscuro); font-weight: 600; }
.instalar-sistema:hover, .instalar-sistema:focus { background: #FFB600; border-color: #FFB600; color: var(--cclass-oscuro); }