.border-gray {
    border: 1px solid rgba(39, 44, 51, .5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Botón "Volver" — patrón unificado del Manual de marca de ClassesUp.        */
/* Pill con badge circular: la flecha se desliza al hover y el badge se       */
/* llena del violeta institucional (#5770ff). Replica del componente React    */
/* <BackButton /> portado a CSS plano para EJS + Bootstrap.                   */
/* ─────────────────────────────────────────────────────────────────────────── */

.cu-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 4px;
    /* !important: algunas vistas (ej. editar leccion) cargan CSS de terceros/tema
       que pisaba el radio de la pastilla y la dejaba cuadrada. */
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-out;
    outline: none;
    font-family: inherit;
}

.cu-volver:hover,
.cu-volver:focus {
    text-decoration: none;
    border-color: rgba(87, 112, 255, 0.30);
    box-shadow: 0 8px 22px -8px rgba(87, 112, 255, 0.35);
    background: #ffffff;
}

.cu-volver:active {
    transform: scale(0.97);
}

.cu-volver:focus-visible {
    box-shadow:
        0 0 0 2px rgba(87, 112, 255, 0.40),
        0 0 0 4px #ffffff;
}

.cu-volver__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    /* !important: en vistas que cargan dropzone.css hay un selector generico `span`
       con border-radius:3px que pisaba este badge y lo dejaba cuadrado. */
    border-radius: 9999px !important;
    background: #f8fafc;
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.7);
    transition: all 0.2s ease-out;
}

.cu-volver:hover .cu-volver__badge,
.cu-volver:focus .cu-volver__badge {
    background: #5770ff;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(87, 112, 255, 0.40);
}

.cu-volver__icon {
    display: block;
    transform: translateX(0.5px);
    transition: transform 0.2s ease-out;
}

.cu-volver:hover .cu-volver__icon,
.cu-volver:focus .cu-volver__icon {
    transform: translateX(-2px);
}

.cu-volver__label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #334155;
    transition: color 0.2s ease-out;
}

.cu-volver:hover .cu-volver__label,
.cu-volver:focus .cu-volver__label {
    color: #5770ff;
}

/* Variante "subtle": fondo violeta tenue, badge blanco */
.cu-volver--subtle {
    background: rgba(87, 112, 255, 0.08);
    border-color: rgba(87, 112, 255, 0.15);
}

.cu-volver--subtle .cu-volver__badge {
    background: #ffffff;
    color: #5770ff;
    box-shadow: inset 0 0 0 1px rgba(87, 112, 255, 0.20);
}

.cu-volver--subtle .cu-volver__label {
    color: #5770ff;
}

.cu-volver--subtle:hover,
.cu-volver--subtle:focus {
    background: rgba(87, 112, 255, 0.12);
    border-color: rgba(87, 112, 255, 0.25);
}

/* Variante "outline": borde violeta, fondo blanco */
.cu-volver--outline {
    background: #ffffff;
    border-color: rgba(87, 112, 255, 0.30);
}

.cu-volver--outline .cu-volver__badge {
    background: rgba(87, 112, 255, 0.10);
    color: #5770ff;
    box-shadow: inset 0 0 0 1px rgba(87, 112, 255, 0.15);
}

.cu-volver--outline .cu-volver__label {
    color: #5770ff;
}

.cu-volver--outline:hover,
.cu-volver--outline:focus {
    background: rgba(87, 112, 255, 0.06);
}

/* Variante "solid": fondo violeta sólido, todo blanco */
.cu-volver--solid {
    background: #5770ff;
    border-color: #5770ff;
    box-shadow: 0 8px 20px -6px rgba(87, 112, 255, 0.55);
}

.cu-volver--solid .cu-volver__badge {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}

.cu-volver--solid .cu-volver__label {
    color: #ffffff;
}

.cu-volver--solid:hover,
.cu-volver--solid:focus {
    background: #4a62ee;
    box-shadow: 0 10px 26px -6px rgba(87, 112, 255, 0.60);
}

.cu-volver--solid:hover .cu-volver__badge,
.cu-volver--solid:focus .cu-volver__badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.cu-volver--solid:hover .cu-volver__label,
.cu-volver--solid:focus .cu-volver__label {
    color: #ffffff;
}

/* Tamaños */
.cu-volver--sm {
    height: 32px;
    padding: 0 10px 0 4px;
    gap: 8px;
}

.cu-volver--sm .cu-volver__badge {
    width: 24px;
    height: 24px;
}

.cu-volver--sm .cu-volver__label {
    font-size: 11.5px;
}

.cu-volver--lg {
    height: 44px;
    padding: 0 16px 0 6px;
    gap: 10px;
}

.cu-volver--lg .cu-volver__badge {
    width: 32px;
    height: 32px;
}

.cu-volver--lg .cu-volver__label {
    font-size: 13.5px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Header de sección — patrón unificado del Manual de marca.                  */
/* Layout: [Volver] · [Breadcrumb] · [spacer] · [acciones]                     */
/* ─────────────────────────────────────────────────────────────────────────── */

.cu-section-header {
    position: relative;
    z-index: 5;
    min-height: 36px;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    line-height: 1;
}

.cu-section-header > * {
    align-self: center;
}

.cu-section-header nav {
    margin: 0;
    padding: 0;
    line-height: 1;
    background: transparent;
}

@media (max-width: 575.98px) {
    .cu-section-header {
        gap: 10px;
        margin-bottom: 14px;
    }
}

.cu-section-header__crumbs {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    height: 36px;
}

.cu-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    min-width: 0;
    line-height: 1;
    height: 100%;
}

.cu-crumbs li {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.cu-crumb {
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #64748b;
    min-width: 0;
}

.cu-crumb,
.cu-crumb a {
    text-decoration: none;
}

.cu-crumb a {
    color: inherit;
    transition: color 0.2s ease-out;
}

.cu-crumb a:hover,
.cu-crumb a:focus {
    color: #5770ff;
    text-decoration: none;
}

.cu-crumb--current,
.cu-crumb--current span {
    color: #0f172a;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    display: inline-block;
    vertical-align: middle;
}

.cu-crumb-sep {
    color: #cbd5e1;
    user-select: none;
    line-height: 1;
}

/* En móvil: solo mostramos el último crumb */
@media (max-width: 575.98px) {
    .cu-crumb:not(.cu-crumb--current),
    .cu-crumb-sep {
        display: none;
    }
}

.cu-section-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   Tipografía y colores unificados de tablas (estilo Builder)
   Aplica a TODAS las tablas del sistema:
   - .cu-tabla (alumnos, docentes, cursos, evaluaciones, etc.)
   - .table.thead-border-top-0 (papeleras)
   - .table.align-middle (cursos listado, comisiones listado)
   - .table-modern (asistencia, certificados dentro de comisión)
   - .custom-table (curso_crear_33, comisiones)
   No toca padding, layout ni border-radius — solo tipografía y color.
   ──────────────────────────────────────────────────────────────────── */
.cu-tabla,
.table.thead-border-top-0,
.table.align-middle,
.table.table-modern,
.custom-table {
    font-family: 'Exo 2', sans-serif !important;
}

.cu-tabla thead tr,
.table.thead-border-top-0 thead tr,
.table.align-middle thead tr,
.table.table-modern thead tr,
.custom-table thead tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

.cu-tabla thead th,
.table.thead-border-top-0 thead th,
.table.align-middle thead th,
.table.table-modern thead th,
.custom-table thead th {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: 'Exo 2', sans-serif !important;
    background: #f8fafc !important;
    border-top: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cu-tabla tbody td,
.table.thead-border-top-0 tbody td,
.table.align-middle tbody td,
.table.table-modern tbody td,
.custom-table tbody td {
    font-size: 13px !important;
    color: #0f172a !important;
    font-family: 'Exo 2', sans-serif !important;
}

/* Checkbox azul (Builder-like) — aplica a todos los checkboxes de tablas y selección */
.cu-check,
.cu-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    border: 1px solid #5770ff !important;
    background: #fff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.cu-check:hover,
.cu-checkbox:hover {
    border-color: #4759d6 !important;
}
.cu-check:checked,
.cu-checkbox:checked {
    background: #5770ff !important;
    border-color: #5770ff !important;
}
.cu-check:checked::after,
.cu-checkbox:checked::after {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat !important;
}
.cu-check:focus,
.cu-checkbox:focus,
.cu-check:focus-visible,
.cu-checkbox:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(87, 112, 255, 0.20) !important;
}