/* OR University / Midrasha Jorev - tema visual.
   - Sin clase de tema en <body> (panel administrativo): paleta original (verde + dorado).
   - body.tema-or        -> OR University: verde #475d55 y arena del logo.
   - body.tema-midrasha  -> Midrasha Jorev: púrpura #550a46 del logo.
   - body.tema-neutro    -> páginas comunes (inicio, ingreso, mi cuenta): gris pizarra.
   Los componentes usan las variables --t-* (tema) y las de Bootstrap (--bs-primary...). */

:root {
    --or-dorado: #C9A227;
    --or-dorado-oscuro: #A8841A;
    --or-azul: #1B2436;
    --or-azul-claro: #2C3A57;
    --or-blanco: #FFFFFF;
    --or-gris-claro: #F5F6F8;
    --or-gris: #6B7280;
    --or-exito: #1E7E34;
    --or-peligro: #B02A2A;
    --or-verde:#435B54;
    --or-verde-claro:#8DA29C;

    /* Variables de tema (valores por defecto = apariencia original) */
    --t-primario: var(--or-verde);
    --t-primario-osc: var(--or-verde);
    --t-primario-claro: var(--or-verde-claro);
    --t-cta: var(--or-dorado);
    --t-cta-hover: var(--or-dorado-oscuro);
    --t-cta-borde: var(--or-dorado-oscuro);
    --t-cta-texto: var(--or-verde);
    --t-cta-texto-hover: var(--or-blanco);
    --t-sec: var(--or-verde);
    --t-sec-borde: var(--or-verde-claro);
    --t-sec-hover: var(--or-verde-claro);
    --t-sec-texto: var(--or-blanco);
    --t-sec-texto-hover: var(--or-blanco);
    --t-fondo: var(--or-gris-claro);
    --t-texto: var(--or-verde);
    --t-acento: var(--or-dorado);
    --t-acento-texto: var(--or-verde);
    --t-suave: #e6ece9;

    --bs-primary: var(--or-verde);
    --bs-primary-rgb: 67, 91, 84;
    --bs-secondary: var(--or-dorado);
    --bs-link-color: var(--or-verde);
    --bs-link-hover-color: var(--or-dorado-oscuro);
}

/* ---------- Temas por institución ---------- */

body.tema-or {
    --t-primario: #475d55;
    --t-primario-osc: #364640;
    --t-primario-claro: #8da29c;
    --t-cta: #d2b392;
    --t-cta-hover: #bb9b78;
    --t-cta-borde: #bb9b78;
    --t-cta-texto: #26332e;
    --t-cta-texto-hover: #1b2521;
    --t-sec: #475d55;
    --t-sec-borde: #475d55;
    --t-sec-hover: #364640;
    --t-sec-texto: #ffffff;
    --t-sec-texto-hover: #ffffff;
    --t-fondo: #f3f5f4;
    --t-texto: #2f403a;
    --t-acento: #d2b392;
    --t-acento-texto: #26332e;
    --t-suave: #e4ebe8;

    --bs-primary: #475d55;
    --bs-primary-rgb: 71, 93, 85;
    --bs-link-color: #475d55;
    --bs-link-color-rgb: 71, 93, 85;
    --bs-link-hover-color: #364640;
    --bs-primary-bg-subtle: #e4ebe8;
    --bs-primary-border-subtle: #b9c8c2;
    --bs-primary-text-emphasis: #2c3a35;
}

body.tema-midrasha {
    --t-primario: #550a46;
    --t-primario-osc: #3d0733;
    --t-primario-claro: #9b6a92;
    --t-cta: #550a46;
    --t-cta-hover: #3d0733;
    --t-cta-borde: #3d0733;
    --t-cta-texto: #ffffff;
    --t-cta-texto-hover: #ffffff;
    --t-sec: #ead9e5;
    --t-sec-borde: #d4b0cb;
    --t-sec-hover: #dcc3d5;
    --t-sec-texto: #550a46;
    --t-sec-texto-hover: #3d0733;
    --t-fondo: #faf6f9;
    --t-texto: #3a0a30;
    --t-acento: #ead9e5;
    --t-acento-texto: #550a46;
    --t-suave: #f1e4ee;

    --bs-primary: #550a46;
    --bs-primary-rgb: 85, 10, 70;
    --bs-link-color: #550a46;
    --bs-link-color-rgb: 85, 10, 70;
    --bs-link-hover-color: #3d0733;
    --bs-primary-bg-subtle: #f1e4ee;
    --bs-primary-border-subtle: #d4b0cb;
    --bs-primary-text-emphasis: #3d0733;
}

body.tema-neutro {
    --t-primario: #3f4650;
    --t-primario-osc: #2d333b;
    --t-primario-claro: #8b93a0;
    --t-cta: #3f4650;
    --t-cta-hover: #2d333b;
    --t-cta-borde: #2d333b;
    --t-cta-texto: #ffffff;
    --t-cta-texto-hover: #ffffff;
    --t-sec: #e5e7eb;
    --t-sec-borde: #cfd3d9;
    --t-sec-hover: #d5d9df;
    --t-sec-texto: #3f4650;
    --t-sec-texto-hover: #2d333b;
    --t-fondo: #f5f6f8;
    --t-texto: #2d333b;
    --t-acento: #e5e7eb;
    --t-acento-texto: #3f4650;
    --t-suave: #eceef1;

    --bs-primary: #3f4650;
    --bs-primary-rgb: 63, 70, 80;
    --bs-link-color: #3f4650;
    --bs-link-color-rgb: 63, 70, 80;
    --bs-link-hover-color: #2d333b;
    --bs-primary-bg-subtle: #eceef1;
    --bs-primary-border-subtle: #cfd3d9;
    --bs-primary-text-emphasis: #2d333b;
}

/* ---------- Base ---------- */

body {
    background-color: var(--t-fondo);
    color: var(--t-texto);
}

/* ---------- Navegación pública ---------- */

.navbar-or {
    background-color: var(--or-verde);
}

body[class*="tema-"] .navbar-or {
    background-color: #ffffff;
    border-bottom: 4px solid var(--t-primario);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.navbar-or .navbar-brand,
.navbar-or .nav-link {
    color: var(--or-blanco) !important;
}

.navbar-or .nav-link:hover,
.navbar-or .nav-link.active {
    color: var(--or-dorado) !important;
}

body[class*="tema-"] .navbar-or .navbar-brand,
body[class*="tema-"] .navbar-or .nav-link {
    color: var(--t-primario) !important;
    font-weight: 500;
}

body[class*="tema-"] .navbar-or .nav-link:hover,
body[class*="tema-"] .navbar-or .nav-link.active {
    color: var(--t-primario-osc) !important;
    background-color: var(--t-suave);
    border-radius: 6px;
}

.navbar-or .navbar-toggler {
    border-color: var(--t-primario-claro);
}

.logo-institucion {
    height: 52px;
    width: auto;
    display: block;
}

/* Icono de carrito en forma de libro, con globo de cantidad */
.carrito-icono {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    color: var(--ci);
    text-decoration: none;
    border-radius: 8px;
}

.carrito-icono:hover {
    background-color: var(--ci-suave);
    color: var(--ci);
}

.carrito-icono svg {
    width: 30px;
    height: 30px;
}

.carrito-globo {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background-color: var(--cg);
    color: var(--cgt);
    border: 2px solid var(--ci);
    font-size: .7rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.carrito-or {
    --ci: #475d55;
    --ci-suave: #e4ebe8;
    --cg: #d2b392;
    --cgt: #26332e;
}

.carrito-midrasha {
    --ci: #550a46;
    --ci-suave: #f1e4ee;
    --cg: #ead9e5;
    --cgt: #550a46;
}

/* ---------- Botones ---------- */

.btn-or-primary {
    background-color: var(--t-cta);
    border-color: var(--t-cta-borde);
    color: var(--t-cta-texto);
    font-weight: 600;
}

.btn-or-primary:hover,
.btn-or-primary:focus {
    background-color: var(--t-cta-hover);
    border-color: var(--t-cta-borde);
    color: var(--t-cta-texto-hover);
}

.btn-or-secondary {
    background-color: var(--t-sec);
    border-color: var(--t-sec-borde);
    color: var(--t-sec-texto);
}

.btn-or-secondary:hover,
.btn-or-secondary:focus {
    background-color: var(--t-sec-hover);
    border-color: var(--t-sec-borde);
    color: var(--t-sec-texto-hover);
}

/* ---------- Tarjetas y etiquetas ---------- */

.card-curso {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
    height: 100%;
}

.card-curso:hover {
    box-shadow: 0 .5rem 1rem rgba(27, 36, 54, .12);
    transform: translateY(-2px);
}

.img-cuadrada {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    background-color: var(--or-gris-claro);
    display: block;
}

.img-cuadrada-sm {
    aspect-ratio: 1 / 1;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--or-gris-claro);
}

.badge-categoria,
.card-curso .badge-categoria {
    background-color: var(--t-acento);
    color: var(--t-acento-texto);
    font-weight: 600;
}

.hero-or {
    background: linear-gradient(135deg, var(--or-verde) 0%, var(--or-verde-claro) 100%);
    color: var(--or-blanco);
    padding: 4rem 0;
}

.hero-or h1 {
    color: var(--or-dorado);
}

/* ---------- Página de inicio (selección de portal) ---------- */

.portal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    min-height: 100%;
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 18px;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .14);
}

.portal-card img {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.portal-card .portal-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.portal-card .portal-detalle {
    color: #6b7280;
    margin: 0;
    font-size: .95rem;
}

.portal-or { color: #475d55; }
.portal-or:hover { border-color: #475d55; }
.portal-midrasha { color: #550a46; }
.portal-midrasha:hover { border-color: #550a46; }

/* ---------- Pie de página ---------- */

/* Pie siempre al borde inferior: en páginas cortas queda pegado al fondo de la ventana y en páginas
   largas se ubica al final del contenido. El body (sitio público) es una columna de al menos 100% de
   alto y el pie se empuja hacia abajo con margin-top:auto. */
body[class*="tema-"] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer.footer-or {
    background-color: var(--t-primario);
    background-clip: padding-box;       /* el color del pie no pinta bajo el borde superior */
    color: var(--or-blanco);
    padding: 2rem 0;
    margin-top: auto;
    border-top: 3rem solid var(--t-fondo);  /* separación mínima con el contenido (antes era margin-top: 3rem) */
}

/* ---------- Ajustes de componentes Bootstrap al tema ---------- */

body[class*="tema-"] .form-check-input:checked {
    background-color: var(--t-primario);
    border-color: var(--t-primario);
}

body[class*="tema-"] .form-control:focus,
body[class*="tema-"] .form-select:focus,
body[class*="tema-"] .form-check-input:focus {
    border-color: var(--t-primario-claro);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

body[class*="tema-"] .list-group-item.active {
    background-color: var(--t-primario);
    border-color: var(--t-primario);
    color: #ffffff;
}

body[class*="tema-"] .accordion-button:not(.collapsed) {
    color: var(--t-primario-osc);
    background-color: var(--t-suave);
}

body[class*="tema-"] .accordion-button:focus {
    border-color: var(--t-primario-claro);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

body[class*="tema-"] .accordion-button:not(.collapsed)::after {
    filter: none;
}

/* ---------- Panel administrativo ---------- */

.admin-sidebar {
    background-color: var(--or-verde);
    min-height: 100vh;
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, .8);
    border-radius: 6px;
    margin-bottom: 2px;
}

.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
    background-color: var(--or-dorado);
    color: var(--or-verde);
    font-weight: 600;
}

.admin-topbar {
    background-color: var(--or-blanco);
    border-bottom: 1px solid #e5e7eb;
}

.badge-estado-activo,
.badge-estado-publicado,
.badge-estado-aprobada { background-color: var(--or-exito); }

.badge-estado-inactivo,
.badge-estado-no_publicado,
.badge-estado-pendiente { background-color: var(--or-gris); }

.badge-estado-suspendido,
.badge-estado-rechazada,
.badge-estado-bloqueado { background-color: var(--or-peligro); }

.calendario-slot {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .5rem .75rem;
    cursor: pointer;
    text-align: center;
}

.calendario-slot.seleccionado {
    background-color: var(--t-cta);
    border-color: var(--t-cta-borde);
    color: var(--t-cta-texto);
    font-weight: 600;
}

.calendario-slot.agotado {
    background-color: #f1f1f1;
    color: #aaa;
    cursor: not-allowed;
}