/* =============================================================================
   AutoescuelaWeb · estilos globales · diseño «Carretera»
   -----------------------------------------------------------------------------
   Sobre Bootstrap 5.3. La idea: la señalética de la carretera. Letra Overpass (heredera
   de la de los carteles de tráfico), superficies blancas con bordes firmes en lugar de
   sombras, la barra en el color de la autoescuela y el acento en su color secundario.

   Los colores de la autoescuela llegan como variables desde el layout
   (Helpers/TemaColores.cs → <style> después de esta hoja): aquí sólo están los de por
   defecto, y nada usa un color de marca fijo. El texto que va encima de un color de
   marca sale de --ae-sobre-primario / --ae-sobre-acento (blanco o negro, el que se lea).

   Orden:
     1. Letra y variables
     2. Base (tipografía, fondo, enlaces, foco)
     3. Barra de navegación y pie
     4. Componentes (tarjetas, tablas, formularios, botones, pestañas, alertas...)
     5. Compatibilidad con clases de Bootstrap 4 que siguen en las vistas
     6. Piezas propias de la app (cabeceras, portada, ficha del alumno, recorrido...)
     7. Ajustes por tamaño de pantalla (tablet y móvil)
   Todo es local: la letra está en wwwroot/lib/fonts/overpass (licencia OFL).
   ============================================================================= */

/* ------------------------------------------------------- 1. Letra y variables */
@font-face {
    font-family: "Overpass";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/fonts/overpass/overpass-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Overpass";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/fonts/overpass/overpass-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Color de la autoescuela: estos son los de por defecto; el layout los sustituye. */
    --ae-primario: #1F5FAD;
    --ae-primario-oscuro: #163F79;
    --ae-primario-suave: #E9EFF7;
    --ae-primario-linea: #A3BCDE;
    --ae-primario-texto: #1F5FAD;
    --ae-sobre-primario: #FFFFFF;
    --ae-sobre-primario-oscuro: #FFFFFF;
    --ae-acento: #F2B705;
    --ae-acento-suave: #FCF0C9;
    --ae-acento-texto: #7A5C00;
    --ae-sobre-acento: #14181D;
    --ae-foco: rgba(31, 95, 173, .45);

    /* Neutros y estados: fijos, no dependen de la autoescuela */
    --ae-tinta: #1B1F24;           /* texto y bordes fuertes: el negro de las señales */
    --ae-texto: #1B1F24;
    --ae-texto-suave: #4B5560;
    --ae-fondo: #F5F6F8;
    --ae-superficie: #FFFFFF;
    --ae-borde: #D9DEE3;
    --ae-borde-fino: #E7EAEE;
    --ae-exito: #18794E;
    --ae-peligro: #B42318;
    --ae-peligro-suave: #FDECEA;
    --ae-radio: 10px;
    --ae-radio-sm: 8px;
    --ae-letra: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Bootstrap toma estos valores */
    --bs-primary: var(--ae-primario);
    --bs-primary-rgb: 31, 95, 173;
    --bs-link-color: var(--ae-primario-texto);
    --bs-link-color-rgb: 31, 95, 173;
    --bs-link-hover-color: var(--ae-primario-oscuro);
    --bs-body-color: var(--ae-texto);
    --bs-body-font-family: var(--ae-letra);
    --bs-border-color: var(--ae-borde);
    --bs-border-radius: var(--ae-radio-sm);
    --bs-danger: var(--ae-peligro);
}

/* --------------------------------------------------------------------- 2. Base */
html { font-size: 15px; }

body {
    background: var(--ae-fondo);
    color: var(--ae-texto);
    font-family: var(--ae-letra);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

main { padding-top: .5rem; }

h1, .h1 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
h2, .h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; }
h3, .h3 { font-size: 1.3rem; font-weight: 700; }
h4, .h4 { font-size: 1.15rem; font-weight: 700; }
h5, .h5 { font-size: 1.05rem; font-weight: 700; }
h6, .h6 { font-weight: 700; }

h1 { margin-bottom: 1rem; }

a { color: var(--bs-link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .card a:hover.stretched-link { text-decoration: none; }

hr { opacity: .15; }

strong, b, th, dt { font-weight: 700; }

/* Foco visible y accesible con teclado */
:focus-visible {
    outline: 3px solid var(--ae-foco);
    outline-offset: 2px;
}

/* ----------------------------------------------------- 3. Navegación y pie */
.navbar-custom {
    background: var(--ae-primario);
    border-bottom: 4px solid var(--ae-primario-oscuro);
    padding-top: .45rem;
    padding-bottom: .45rem;
    --ae-nav-texto: var(--ae-sobre-primario);
}

.navbar-custom .navbar-brand {
    color: var(--ae-nav-texto) !important;
    font-weight: 800;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
}

.navbar-custom .navbar-brand img {
    height: 38px;
    width: auto;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

/* Sin logo: una placa cuadrada con el borde del color del texto, como un panel de señal */
.navbar-custom .navbar-brand .marca-icono {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 3px solid var(--ae-nav-texto);
    color: var(--ae-nav-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.navbar-custom .nav-link {
    color: color-mix(in srgb, var(--ae-nav-texto) 90%, transparent) !important;
    font-weight: 600;
    border-radius: var(--ae-radio-sm);
    padding: .5rem .8rem !important;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-link.show {
    color: var(--ae-nav-texto) !important;
    background: color-mix(in srgb, var(--ae-nav-texto) 15%, transparent);
}

/* La sección en la que se está: en el color secundario, como el carril marcado */
.navbar-custom .nav-link.active {
    color: var(--ae-sobre-acento) !important;
    background: var(--ae-acento);
    font-weight: 700;
}

.navbar-custom .navbar-toggler {
    border: 2px solid color-mix(in srgb, var(--ae-nav-texto) 55%, transparent);
    padding: .35rem .6rem;
}

/* El icono toma el color del texto de la barra (sirve con barra clara u oscura) */
.navbar-custom .navbar-toggler-icon {
    background-image: none;
    background-color: var(--ae-nav-texto);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
}

.navbar-custom .dropdown-menu {
    border: 2px solid var(--ae-tinta);
    border-radius: var(--ae-radio);
    box-shadow: 0 10px 30px rgba(20, 24, 29, .18);
    padding: .35rem;
    min-width: 15.5rem;
}

.navbar-custom .dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    color: var(--ae-texto);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.navbar-custom .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--ae-primario-texto);
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus,
.navbar-custom .dropdown-item.active {
    background: var(--ae-primario-suave);
    color: var(--ae-tinta);
}

.navbar-custom .dropdown-header { color: var(--ae-texto-suave); font-weight: 700; }

.navbar-custom .usuario-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ae-nav-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
}

.footer {
    background: var(--ae-superficie);
    border-top: 2px solid var(--ae-borde);
    color: var(--ae-texto-suave);
    font-size: .875rem;
    padding: 1rem 0;
}

/* ------------------------------------------------------------ 4. Componentes */

/* Tarjetas: blancas con borde firme, sin sombra */
.card {
    border: 2px solid var(--ae-borde);
    border-radius: var(--ae-radio);
    box-shadow: none;
    background: var(--ae-superficie);
}

.card-header {
    background: transparent;
    border-bottom: 2px solid var(--ae-borde-fino);
    padding: .85rem 1.1rem;
    font-weight: 700;
}

.card-header:first-child { border-radius: calc(var(--ae-radio) - 2px) calc(var(--ae-radio) - 2px) 0 0; }
.card-footer { background: transparent; border-top: 2px solid var(--ae-borde-fino); }
.card-body { padding: 1.1rem; }

/* Tablas: cabecera con raya gruesa en negro, filas separadas por una línea fina */
main .table {
    --bs-table-bg: var(--ae-superficie);
    --bs-table-hover-bg: var(--ae-primario-suave);
    margin-bottom: 0;
    vertical-align: middle;
}

main .table > thead > tr > th,
main .table > thead > tr > td {
    background: var(--ae-superficie);
    color: var(--ae-tinta);
    font-size: .85rem;
    font-weight: 700;
    border-bottom: 3px solid var(--ae-tinta);
    white-space: nowrap;
}

main .table > thead a { color: inherit; }
main .table > tbody > tr:hover > * { background: var(--bs-table-hover-bg); }
main .table td, main .table th { padding: .65rem .75rem; border-color: var(--ae-borde-fino); }

/* Contenedor con scroll horizontal (lo añade site.js a toda tabla que no lo tenga) */
main .table-responsive {
    background: var(--ae-superficie);
    border: 2px solid var(--ae-borde);
    border-radius: var(--ae-radio);
    margin-bottom: 1.25rem;
}

main .card .table-responsive { border: 0; border-radius: 0; margin-bottom: 0; }
main .table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius: calc(var(--ae-radio) - 2px); }
main .table-responsive > .table > thead > tr:first-child > th:last-child { border-top-right-radius: calc(var(--ae-radio) - 2px); }

/* Celda de acciones (Editar / Detalles / Borrar), la marca site.js */
td.acciones { white-space: nowrap; text-align: right; }
td.acciones .btn { margin-left: .25rem; }
td.acciones form { display: inline; }

/* Formularios */
.form-label, label.control-label, .form-group > label {
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .35rem;
    color: var(--ae-tinta);
}

.form-control, .form-select {
    border: 2px solid #CDD3D9;
    border-radius: var(--ae-radio-sm);
    padding: .5rem .75rem;
}

.form-control-sm, .form-select-sm { padding: .3rem .55rem; }
.form-control-color { height: 2.75rem; padding: .3rem; }

.form-control:focus, .form-select:focus {
    border-color: var(--ae-primario);
    box-shadow: 0 0 0 .2rem var(--ae-foco);
}

.form-check-input { border: 2px solid #9AA3AD; }
.form-check-input:checked {
    background-color: var(--ae-primario);
    border-color: var(--ae-primario);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--ae-foco); border-color: var(--ae-primario); }

.form-text { color: var(--ae-texto-suave); }

.text-danger.field-validation-error, .field-validation-error { font-size: .85rem; }
.input-validation-error { border-color: var(--ae-peligro) !important; }
.validation-summary-errors ul { margin-bottom: 0; padding-left: 1.1rem; }

/* Botones: principal en el color de la autoescuela; los secundarios, con borde negro */
.btn { border-radius: var(--ae-radio-sm); font-weight: 600; border-width: 2px; }

.btn-primary {
    --bs-btn-color: var(--ae-sobre-primario);
    --bs-btn-bg: var(--ae-primario);
    --bs-btn-border-color: var(--ae-primario);
    --bs-btn-hover-color: var(--ae-sobre-primario-oscuro);
    --bs-btn-hover-bg: var(--ae-primario-oscuro);
    --bs-btn-hover-border-color: var(--ae-primario-oscuro);
    --bs-btn-active-color: var(--ae-sobre-primario-oscuro);
    --bs-btn-active-bg: var(--ae-primario-oscuro);
    --bs-btn-active-border-color: var(--ae-primario-oscuro);
    --bs-btn-disabled-color: var(--ae-sobre-primario);
    --bs-btn-disabled-bg: var(--ae-primario);
    --bs-btn-disabled-border-color: var(--ae-primario);
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: var(--ae-primario-texto);
    --bs-btn-border-color: var(--ae-primario-texto);
    --bs-btn-hover-color: var(--ae-sobre-primario);
    --bs-btn-hover-bg: var(--ae-primario);
    --bs-btn-hover-border-color: var(--ae-primario);
    --bs-btn-active-color: var(--ae-sobre-primario-oscuro);
    --bs-btn-active-bg: var(--ae-primario-oscuro);
    --bs-btn-active-border-color: var(--ae-primario-oscuro);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ae-tinta);
    --bs-btn-border-color: var(--ae-tinta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ae-tinta);
    --bs-btn-hover-border-color: var(--ae-tinta);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ae-tinta);
    --bs-btn-active-border-color: var(--ae-tinta);
}

.btn-secondary {
    --bs-btn-bg: var(--ae-tinta);
    --bs-btn-border-color: var(--ae-tinta);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
}

.btn-danger {
    --bs-btn-bg: var(--ae-peligro);
    --bs-btn-border-color: var(--ae-peligro);
    --bs-btn-hover-bg: #8F1C13;
    --bs-btn-hover-border-color: #8F1C13;
}

.btn-outline-danger {
    --bs-btn-color: var(--ae-peligro);
    --bs-btn-border-color: var(--ae-peligro);
    --bs-btn-hover-bg: var(--ae-peligro);
    --bs-btn-hover-border-color: var(--ae-peligro);
}

.btn-link { font-weight: 600; color: var(--bs-link-color); }

.btn i + span, .btn span + i { margin-left: .35rem; }

/* Lo que va pintado del color de la autoescuela lleva encima su texto legible */
.text-bg-primary, .bg-primary { color: var(--ae-sobre-primario) !important; background-color: var(--ae-primario) !important; }
.text-primary { color: var(--ae-primario-texto) !important; }
.border-primary { border-color: var(--ae-primario) !important; }

/* Pestañas: botones con borde; la elegida, rellena en negro */
.nav-tabs {
    border-bottom: 0;
    gap: .4rem;
    flex-wrap: wrap;
}
.nav-tabs .nav-link {
    border: 2px solid var(--ae-borde);
    border-radius: var(--ae-radio-sm);
    color: var(--ae-tinta);
    font-weight: 600;
    padding: .45rem .9rem;
    background: var(--ae-superficie);
}
.nav-tabs .nav-link:hover { border-color: var(--ae-tinta); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--ae-tinta);
    border-color: var(--ae-tinta);
    color: #fff;
}
.nav-tabs .nav-link.active .badge { background: #fff !important; color: var(--ae-tinta) !important; }

.nav-pills .nav-link { font-weight: 600; color: var(--ae-tinta); border-radius: var(--ae-radio-sm); }
.nav-pills .nav-link.active { background: var(--ae-tinta); color: #fff; }

/* Modales, alertas, badges, paginación */
.modal-content { border: 2px solid var(--ae-tinta); border-radius: var(--ae-radio); box-shadow: 0 20px 60px rgba(20, 24, 29, .3); }
.modal-header { border-bottom: 2px solid var(--ae-borde-fino); }
.modal-footer { border-top: 2px solid var(--ae-borde-fino); }
.modal-title { font-weight: 800; }

.alert { border-radius: var(--ae-radio); border-width: 2px; }
.alert-success { --bs-alert-bg: #E7F4EC; --bs-alert-border-color: #9FD3B5; --bs-alert-color: #0F4D30; }
.alert-danger { --bs-alert-bg: var(--ae-peligro-suave); --bs-alert-border-color: #F2B1AA; --bs-alert-color: #7A1D14; }
.alert-warning { --bs-alert-bg: #FFF4D6; --bs-alert-border-color: #F1D27A; --bs-alert-color: #5C4200; }
.alert-info { --bs-alert-bg: var(--ae-primario-suave); --bs-alert-border-color: var(--ae-primario-linea); --bs-alert-color: var(--ae-tinta); }
.alert-secondary { --bs-alert-bg: #F0F2F4; --bs-alert-border-color: #CDD3D9; --bs-alert-color: var(--ae-tinta); }

.badge { font-weight: 700; border-radius: 6px; }

.pagination { flex-wrap: wrap; gap: .3rem; }
.pagination .page-link { border: 2px solid var(--ae-borde); border-radius: var(--ae-radio-sm) !important; color: var(--ae-tinta); font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--ae-tinta); border-color: var(--ae-tinta); color: #fff; }

.list-group-item { border-width: 0 0 1px; border-color: var(--ae-borde-fino); }

/* Fichas de detalle (dl.row de las vistas Details) */
dl.row { background: var(--ae-superficie); border: 2px solid var(--ae-borde); border-radius: var(--ae-radio); padding: .75rem .5rem; margin-left: 0; margin-right: 0; }
dl.row > dt { color: var(--ae-texto-suave); font-weight: 600; padding-top: .45rem; padding-bottom: .45rem; }
dl.row > dd { padding-top: .45rem; padding-bottom: .45rem; margin-bottom: 0; border-bottom: 1px solid var(--ae-borde-fino); }
dl.row > dd:last-of-type { border-bottom: 0; }

/* -------------------------------------------- 5. Compatibilidad Bootstrap 4 */
/* Bootstrap 5 eliminó estas clases, pero siguen en vistas generadas antes */
.form-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.form-inline .form-group { margin-bottom: 0; display: flex; align-items: center; gap: .5rem; }
.ml-2 { margin-left: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.btn-default { color: var(--ae-tinta); background: var(--ae-superficie); border-color: var(--ae-tinta); }
.btn-default:hover { background: var(--ae-tinta); color: #fff; }

/* ---------------------------------------------------- 6. Piezas de la app */

/* Cabecera de página: título a la izquierda, acciones a la derecha */
.cabecera-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.cabecera-pagina h1 { margin-bottom: 0; }
.cabecera-pagina .subtitulo { color: var(--ae-texto-suave); margin: .15rem 0 0; max-width: 60rem; }

/* Accesos rápidos de la portada: placas con borde; al pasar, el borde toma el color */
.acceso {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--ae-superficie);
    border: 2px solid var(--ae-borde);
    border-radius: var(--ae-radio);
    color: var(--ae-texto);
    transition: border-color .12s ease;
}
.acceso:hover, .acceso:focus-visible { border-color: var(--ae-primario); color: var(--ae-texto); text-decoration: none; }
.acceso .acceso-icono {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--ae-primario);
    color: var(--ae-sobre-primario);
}
.acceso .acceso-titulo { font-weight: 700; display: block; }
.acceso .acceso-texto { color: var(--ae-texto-suave); font-size: .875rem; display: block; }
.acceso.tono-verde .acceso-icono { background: var(--ae-exito); color: #fff; }
.acceso.tono-ambar .acceso-icono { background: var(--ae-acento); color: var(--ae-sobre-acento); }
.acceso.tono-rojo .acceso-icono { background: var(--ae-peligro); color: #fff; }
.acceso.tono-gris .acceso-icono { background: var(--ae-tinta); color: #fff; }

/* Portada: una placa del color de la autoescuela con la línea discontinua del acento */
.portada-hero {
    background: var(--ae-primario);
    color: var(--ae-sobre-primario);
    border-radius: 14px;
    padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    padding-bottom: calc(clamp(1.25rem, 1rem + 2vw, 2.25rem) + 14px);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.portada-hero::after {
    content: "";
    position: absolute;
    left: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    right: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    bottom: 14px;
    border-top: 4px dashed var(--ae-acento);
}
.portada-hero h1 { color: inherit; margin-bottom: .35rem; }
.portada-hero p { color: inherit; opacity: .9; margin-bottom: 0; max-width: 42rem; position: relative; z-index: 1; }
.portada-hero .btn-light { font-weight: 700; }

.seccion-titulo {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ae-tinta);
    margin: 1.75rem 0 .75rem;
}

/* Fondo difuminado decorativo (lo usan algunas vistas): en este diseño, liso */
.fondo-difuminado { display: none; }

/* Fotos */
.photo-carnet { width: 3.5cm; height: 4.5cm; object-fit: cover; border-radius: var(--ae-radio-sm); }
.photo-listado { width: 44px; height: 44px; object-fit: cover; display: block; border-radius: 50%; }
.photo-carnet-modif { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; outline: 2px solid var(--ae-borde); }

.image-upload-wrapper { display: inline-block; position: relative; cursor: pointer; }
.image-upload-wrapper .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.image-upload-wrapper:hover .overlay, .image-upload-wrapper:focus-within .overlay { opacity: 1; }
.image-upload-wrapper .overlay i { font-size: 24px; }

/* Muestras de color (Mi autoescuela) */
.muestra-color { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 4px; vertical-align: -.2rem; border: 1px solid rgba(0, 0, 0, .15); }
.muestra-color + .muestra-color { margin-left: -2px; margin-right: .35rem; }
.paleta-color { display: inline-flex; align-items: center; gap: .3rem; }
.paleta-color.active { background: var(--ae-tinta); color: #fff; }
.muestra-tema { border: 2px solid var(--ae-borde); border-radius: var(--ae-radio); overflow: hidden; max-width: 40rem; }
.muestra-tema-barra { background: var(--ae-primario); color: var(--ae-sobre-primario); display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 4px solid var(--ae-primario-oscuro); }
.muestra-tema-barra strong { margin-right: .5rem; }
.muestra-tema-activo { background: var(--ae-acento); color: var(--ae-sobre-acento); border-radius: 6px; padding: .1rem .55rem; font-weight: 700; }
.muestra-tema-cuerpo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: 1rem; background: var(--ae-superficie); }

/* ---------------------------------------- 7. Tablet (<992px) y móvil (<576px) */
@media (max-width: 991.98px) {
    .navbar-custom .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem 0 .25rem;
        border-top: 2px solid color-mix(in srgb, var(--ae-nav-texto) 20%, transparent);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    /* En móvil los submenús se abren dentro del panel, no flotando */
    .navbar-custom .dropdown-menu {
        background: color-mix(in srgb, var(--ae-nav-texto) 8%, transparent);
        border: 0;
        box-shadow: none;
        padding: .25rem 0 .25rem .75rem;
    }
    .navbar-custom .dropdown-item { color: var(--ae-nav-texto); }
    .navbar-custom .dropdown-item i { color: inherit; opacity: .8; }
    .navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus { background: color-mix(in srgb, var(--ae-nav-texto) 14%, transparent); color: var(--ae-nav-texto); }
    .navbar-custom .dropdown-header { color: var(--ae-nav-texto); opacity: .75; }
    .navbar-custom .dropdown-divider { border-color: color-mix(in srgb, var(--ae-nav-texto) 20%, transparent); }
}

@media (max-width: 575.98px) {
    html { font-size: 14.5px; }
    main { padding-top: 0; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .card-body { padding: .9rem; }
    main .table td, main .table th { padding: .5rem .55rem; font-size: .9rem; }
    /* Botones de formulario a lo ancho: más fáciles de pulsar con el dedo */
    form .btn-primary[type="submit"], form input.btn-primary[type="submit"] { width: 100%; }
    .modal-footer .btn { flex: 1 1 auto; }
    dl.row > dt { padding-bottom: 0; }
    dl.row > dd { padding-top: .1rem; }
    .cabecera-pagina > .btn, .cabecera-pagina > a.btn { width: 100%; }
}

/* Pestañas dentro de la cabecera de una tarjeta (acceso, Mi autoescuela) */
.card-header .nav-tabs { margin-bottom: 0; }
.card-header-tabs { margin: 0; }

/* Botones seguidos (pies de fichas, formularios) con separación, salvo en grupos */
:not(.btn-group):not(.input-group) > .btn + .btn,
:not(.btn-group):not(.input-group) > .btn + form,
:not(.btn-group):not(.input-group) > form + .btn { margin-left: .4rem; }
@media (max-width: 575.98px) {
    :not(.btn-group):not(.input-group) > .btn + .btn { margin-left: 0; margin-top: .4rem; }
}

/* Calendario (FullCalendar) con los colores de la app */
.fc {
    --fc-button-bg-color: var(--ae-superficie);
    --fc-button-border-color: var(--ae-tinta);
    --fc-button-text-color: var(--ae-tinta);
    --fc-button-hover-bg-color: var(--ae-primario-suave);
    --fc-button-hover-border-color: var(--ae-tinta);
    --fc-button-active-bg-color: var(--ae-tinta);
    --fc-button-active-border-color: var(--ae-tinta);
    --fc-today-bg-color: var(--ae-acento-suave);
    --fc-border-color: var(--ae-borde-fino);
    --fc-now-indicator-color: var(--ae-peligro);
    background: var(--ae-superficie);
    border-radius: var(--ae-radio);
    padding: .75rem;
    border: 2px solid var(--ae-borde);
}
.fc .fc-button { border-radius: var(--ae-radio-sm); border-width: 2px; font-weight: 600; text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.25rem; font-weight: 800; text-transform: capitalize; }
.fc .fc-col-header-cell-cushion { color: var(--ae-tinta); font-weight: 700; text-transform: capitalize; }
@media (max-width: 575.98px) {
    .fc { padding: .5rem; }
    .fc .fc-toolbar { flex-direction: column; gap: .5rem; }
    .fc .fc-toolbar-title { font-size: 1.05rem; }
    .fc .fc-button { padding: .3rem .55rem; font-size: .85rem; }
}

/* <select class="form-control"> (vistas antiguas): Bootstrap 5 no le pone flecha */
select.form-control:not([multiple]):not([size]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231B1F24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Recuadros de firma (clases) */
.signature-container {
    background: #fff;
    border: 2px dashed #9AA3AD !important;
    border-radius: var(--ae-radio-sm);
    touch-action: none;   /* que al firmar con el dedo no se desplace la página */
}

/* Filtros plegables en móvil (site.js añade el botón «Filtros») */
@media (max-width: 767.98px) {
    [data-plegable-movil]:not(.abierto) { display: none !important; }
}

/* Ficha del alumno (Views/Alumno/Ficha.cshtml) */
/* La cabecera es una placa: borde grueso del color de la autoescuela, como el marco de una señal */
.ficha-cabecera { border: 4px solid var(--ae-primario); border-radius: 14px; }
.ficha-placa {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: var(--ae-primario);
    color: var(--ae-sobre-primario);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
}
.ficha-placa:hover { text-decoration: none; color: var(--ae-sobre-primario); background: var(--ae-primario-oscuro); }
.ficha-placa .letra { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.ficha-placa .estado { font-size: .72rem; font-weight: 600; margin-top: .25rem; opacity: .9; }
.ficha-placa.sin-permiso { background: var(--ae-fondo); color: var(--ae-texto-suave); border: 2px dashed var(--ae-borde); }
.ficha-foto img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; outline: 2px solid var(--ae-borde); transition: opacity .2s; }
.ficha-foto .overlay { border-radius: 50%; }
.ficha-foto .image-upload-wrapper:focus-within img { outline: 3px solid var(--ae-primario); outline-offset: 2px; }
.ficha-nombre { font-weight: 800; letter-spacing: -.015em; }
.ficha-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--ae-texto-suave); }
.ficha-meta a { color: inherit; text-decoration: none; }
.ficha-meta a:hover { color: var(--ae-primario-texto); }
.ficha-meta i { width: 1.1em; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; }
@media (min-width: 768px) { .ficha-acciones { max-width: 340px; justify-content: flex-end; } }
.ficha-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.ficha-dato { background: var(--ae-superficie); border: 2px solid var(--ae-borde); border-radius: var(--ae-radio-sm); padding: .6rem .8rem; }
.ficha-dato .etiqueta { font-size: .8rem; color: var(--ae-texto-suave); }
.ficha-dato .valor { font-weight: 700; font-size: 1.1rem; }
.ficha-dato.debe { background: var(--ae-peligro-suave); border-color: #F2B1AA; }
.ficha-dato.debe .valor { color: var(--ae-peligro); }
.ficha-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: .5rem; }
.ficha-tabs .nav-link { white-space: nowrap; }
.ficha-tabs .badge { font-size: .7rem; }
.ficha-panel { background: var(--ae-superficie); border: 2px solid var(--ae-borde); border-radius: var(--ae-radio); padding: 1rem; }
.ficha-bloque { background: var(--ae-superficie); border: 2px solid var(--ae-borde); border-radius: var(--ae-radio-sm); padding: .9rem 1rem; height: 100%; }
.ficha-bloque h3 { font-size: 1rem; font-weight: 800; color: var(--ae-tinta); margin-bottom: .6rem; }
.ficha-bloque dl, .ficha-permiso-datos { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.ficha-bloque dt, .ficha-permiso-datos dt { font-weight: 600; color: var(--ae-texto-suave); }
.ficha-bloque dd, .ficha-permiso-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ficha-guardar { position: sticky; bottom: 0; background: var(--ae-superficie); padding: .75rem 0; border-top: 2px solid var(--ae-borde); z-index: 5; }

/* Recorrido del permiso (ficha del alumno): la carretera con sus hitos */
.recorrido { background: #2A2F35; color: #fff; border-radius: var(--ae-radio); padding: 1.1rem 1.4rem 1rem; position: relative; }
.recorrido ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr)); gap: 1rem; position: relative; }
.recorrido ol::before { content: ""; position: absolute; left: .7rem; right: .7rem; top: .55rem; border-top: 4px dashed var(--ae-acento); }
.recorrido li { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.recorrido .hito { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #2A2F35; border: 4px solid #8A939C; margin-bottom: .35rem; position: relative; }
.recorrido .hecho .hito { background: #fff; border-color: #3BA55C; }
.recorrido .ahora .hito { background: var(--ae-acento); border-color: #fff; }
.recorrido .falla .hito { background: #fff; border-color: #F97066; }
.recorrido strong { font-size: .95rem; }
.recorrido .detalle { font-size: .82rem; color: #D5DADF; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .ficha-panel { padding: .75rem; }
    .ficha-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .ficha-dato { padding: .5rem .6rem; }
    .ficha-dato .valor { font-size: 1rem; }
    .ficha-foto img, .ficha-placa { width: 64px; height: 64px; }
    .ficha-placa .letra { font-size: 2rem; }
    .ficha-nombre { font-size: 1.25rem; }
    .ficha-bloque dl, .ficha-permiso-datos { grid-template-columns: 1fr; gap: 0; }
    .ficha-bloque dd, .ficha-permiso-datos dd { margin-bottom: .4rem; }
    /* En el móvil la carretera va de arriba abajo */
    .recorrido ol { grid-template-columns: 1fr; gap: .6rem; }
    .recorrido ol::before { left: .55rem; right: auto; top: .7rem; bottom: .7rem; border-top: 0; border-left: 4px dashed var(--ae-acento); }
    .recorrido li { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; padding-left: 0; }
    .recorrido .hito { margin-bottom: 0; flex: 0 0 auto; align-self: center; }
    .recorrido .detalle { flex-basis: 100%; padding-left: 2rem; }
}

/* Resumen de errores con aspecto de alerta: sin errores del modelo no se ve (si no, sale un recuadro rojo vacío) */
.alert.validation-summary-valid,
.alert.validation-summary-errors:not(:has(li:not([style*="display:none"]))) { display: none; }
/* Logos de marca: enteros, sin recortar en círculo */
.logo-marca { width: 40px; height: 40px; object-fit: contain; border-radius: var(--ae-radio-sm); background: #fff; }

/* Migas de pan (Views/Shared/_Migas.cshtml) */
.migas { margin: -.25rem 0 .9rem; font-size: .875rem; }
.migas .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.migas .breadcrumb::-webkit-scrollbar { display: none; }
.migas a { color: var(--ae-primario-texto); text-decoration: none; font-weight: 600; }
.migas a:hover { text-decoration: underline; }
.migas .breadcrumb-item.active { color: var(--ae-texto-suave); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }

/* Pestañas de un grupo de pantallas (Views/Shared/_Pestanas.cshtml, Helpers/MenuPestanas) */
.pestanas-grupo .nav-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 2px; }
.pestanas-grupo .nav-tabs { gap: .3rem; }
.pestanas-grupo .nav-link { font-weight: 600; font-size: .85rem; padding: .35rem .6rem; }
.pestanas-grupo .pestanas-subgrupo { align-self: center; padding: 0 .4rem 0 .9rem; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ae-texto-suave); white-space: nowrap; }
.pestanas-grupo .pestanas-subgrupo:first-child { padding-left: .2rem; }
.migas .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--ae-texto-suave); }

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}