@font-face {
    font-family: "Frutiger";
    src: url("/assets/fonts/ftlc-webfont.woff2") format("woff2"),
         url("/assets/fonts/ftlc-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-red: #A21E32;
    --brand-red-dark: #6A1323;
    --brand-white: #FFFFFF;
    --brand-black: #000000;
    --brand-gray: #f6f6f6;

    --bs-font-sans-serif: "Frutiger", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-bg: var(--brand-gray);
    --bs-body-color: var(--brand-black);
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 162, 30, 50;
    --bs-link-color: var(--brand-red);
    --bs-link-color-rgb: 162, 30, 50;
    --bs-link-hover-color: var(--brand-red-dark);
    --bs-link-hover-color-rgb: 106, 19, 35;
}

body {
    font-family: var(--bs-font-sans-serif);
    background: url("/assets/img/ladrillo.webp") repeat;
}

a {
    color: var(--brand-red);
}

a:hover {
    color: var(--brand-red-dark);
}

/* --- Overrides de componentes Bootstrap (colores compilados en el CSS vendorizado) --- */

.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red-dark);
    --bs-btn-hover-border-color: var(--brand-red-dark);
    --bs-btn-active-bg: var(--brand-red-dark);
    --bs-btn-active-border-color: var(--brand-red-dark);
    --bs-btn-disabled-bg: var(--brand-red);
    --bs-btn-disabled-border-color: var(--brand-red);
    --bs-btn-focus-shadow-rgb: 162, 30, 50;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-bg: var(--brand-red-dark);
    --bs-btn-active-border-color: var(--brand-red-dark);
    --bs-btn-focus-shadow-rgb: 162, 30, 50;
}

.text-primary {
    color: var(--brand-red) !important;
}

.bg-primary {
    background-color: var(--brand-red) !important;
}

.badge.bg-primary {
    background-color: var(--brand-red) !important;
}

.content{
    background: rgba(255,255,255,0.8);
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    border-radius: 12px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.25rem rgba(162, 30, 30, 0.15);
}

.form-check-input:checked {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.page-link {
    color: var(--brand-red);
}

.page-item.active .page-link {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.nav-link.active {
    color: var(--brand-red) !important;
}

.alert-danger {
    --bs-alert-color: var(--brand-red-dark);
    --bs-alert-bg: #f7dfe2;
    --bs-alert-border-color: #eec2c8;
}

/* --- Layout de autenticación (login, cambio de contraseña, alias) --- */

.auth-shell {
    min-height: 100vh;
}

.auth-shell__panel {
    background-color: var(--brand-red-dark);
    background-image: linear-gradient(rgba(106, 19, 35, 0.88), rgba(106, 19, 35, 0.88)), url("/assets/img/ladrillo.webp");
    background-size: cover;
    background-position: center;
    color: var(--brand-white);
    min-height: 100vh;
}

.auth-shell__panel img {
    max-width: 220px;
}

.auth-shell__form {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.auth-shell__form-inner {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: rgba(255,255,255,0.8);
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    border-radius: 12px;
}

/* --- Shell interno (sidebar + topbar), admin y alumno --- */

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    background: #fff url("/assets/img/ladrillo.webp");
    color: var(--brand-white);
    width: 260px;
    min-height: 100vh;
}

.app-sidebar .navbar-brand img,
.offcanvas img {
    max-height: 75px;
}
.app-topbar img {
    max-height: 45px;
}

.app-sidebar .navbar-brand span{
	color: var(--brand-black);
	font-size: 1.7rem;
	font-weight: bold;
    padding-top: 0;
    display: block;
    position: relative;
    top: -10px;
}

.app-sidebar .nav-link {
    background: var(--brand-white);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-weight: 600;
}
.app-sidebar .nav-link-logout,
.app-sidebar .nav-link.nav-link-logout:hover {
    background: var(--brand-red-dark);
    color:  var(--brand-white);
}

.app-sidebar .nav-link svg {
    flex-shrink: 0;
}

.app-sidebar .nav-link:hover {
    background-color: var(--brand-gray);
}

.app-sidebar .nav-link.active {
    color: var(--brand-white) !important;
    background-color: var(--brand-red);
}

.app-topbar {
    background-color: var(--brand-white);
    border-bottom: 1px solid #eee0e0;
}

.app-main {
    background-color: var(--brand-white);
    min-height: 100vh;
}

.form-control{
    background-color: #fff;
}

.icon-tile {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(162, 30, 32, 0.1);
    color: var(--brand-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card{
    border: 0;
    border-radius: 12px;
}
.card-body {
	background: #fff;
	box-shadow: 0 12px 40px rgba(0,0,0,.1);
    border-radius: 12px;
}

.card-menu {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    color: inherit;
}

.table > :not(caption) > * > *{
    background-color: #fff;
}
.table > :not(caption) > * > th{
    background-color: #f6f6f6;
}

.border.rounded{
    background-color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
    border: 0 !important;
    border-radius: 0.5rem !important;
}

.list-group-item:first-child,
.list-group-item + .list-group-item {
	border-radius: 0.5rem;
	margin-bottom: 0.25rem;
}
.list-group-item.active {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

#bmenu{
    padding: 0;
    border: 0;
    margin-right: 0.5rem;
}
#bmenu svg{
    width: 1.5rem;
    height: 1.5rem;
}

.alert-results .text-muted{
    margin-bottom: 0;
}

.alert,
iframe{
    border-radius: 0.5rem;
}

/* Estilos para tablets en general (768px a 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .content-home{
        justify-content: flex-start!important;
    }
    .content-home .content{
        height: 100vh;
    }
    .auth-shell{
        min-height: auto;
    }
    .auth-shell__panel,
    .auth-shell__form{
        min-height: auto;
        padding: 2rem !important;
    }
}

/* Estilos específicos para iPad (modo retrato) */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  
}

/* Estilos específicos para iPad (modo horizontal) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  
}

/* Estilos para iPad Pro (11" y 12.9") */
@media only screen and (min-width: 834px) and (max-width: 1194px),
       only screen and (min-width: 1024px) and (max-width: 1366px) {
  
}

@media (max-width: 600px) {
    .content-home{
        justify-content: flex-start!important;
    }
    .content-home .content{
        height: 100vh;
    }
    .auth-shell{
        min-height: auto;
    }
    .auth-shell__panel,
    .auth-shell__form{
        min-height: auto;
        padding: 2rem !important;
    }
    .app-topbar{
        background: var(--brand-gray);
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    .app-main{
        margin-top: 4rem;
    }
}