/*
 * Red de seguridad para la migracion a AdminLTE 4 / Bootstrap 5 (#78).
 *
 * Aqui van tres cosas, y nada mas:
 *
 *   1. Utilidades que Bootstrap elimino y que no tienen sustituto de clase, de
 *      modo que reescribir cada uso a mano seria mucho ruido para ningun
 *      beneficio. No es un puente para no convertir las vistas: eso se hace
 *      igual.
 *
 *   2. Correcciones de contraste sobre CSS que viene de vendor/ y que por eso
 *      no se puede editar. Este apartado se anade despues de que la auditoria
 *      con axe-core encontrara incumplimientos de WCAG AA cuyo origen esta
 *      dentro de un paquete de terceros: la alternativa era tocar vendor/ -que
 *      se pierde en el siguiente composer install- o dejarlo incumpliendo.
 *      Cada regla de este grupo tiene que decir el ratio medido, no "se ve
 *      poco".
 *
 *   3. Correcciones de maquetacion sobre ese mismo CSS de terceros cuando lo
 *      que rompe es la capa comun del layout y por eso sale repetido en decenas
 *      de vistas. Mismo motivo que el punto 2: el origen esta fuera del repo.
 *
 * Cada regla lleva por que esta, y se borra cuando deje de hacer falta.
 */

/* Bootstrap 4 elimino .text-justify. Sin esto, los parrafos justificados de los
 * documentos oficiales (certificados C-10, presupuestos, y los avisos legales de
 * las solicitudes) pierden el justificado en silencio: no da error, solo se ve
 * peor y el documento deja de parecerse al que se venia entregando. */
.text-justify {
    text-align: justify !important;
}

/* Select2 pinta su texto de marcador de posicion en #999, que sobre el blanco
 * del campo da 2.84:1 cuando WCAG AA pide 4.5:1 para texto normal. Y no es
 * texto decorativo: es el "Escribe para buscar..." de los filtros de los
 * GridView, o sea la unica pista de que ese hueco se puede escribir.
 *
 * Viene de vendor/, asi que corregirlo alli se perderia en el siguiente
 * composer install.
 *
 * Se listan los temas uno a uno, y no un selector corto, porque el tema activo
 * lo decide Select2 en tiempo de ejecucion segun `bsVersion` del widget: hoy
 * las pantallas salen con `--krajee-bs3`, pero en cuanto se fije bsVersion a 5
 * pasaran a `--krajee-bs5`. Un selector mas corto tampoco valdria: las reglas
 * de vendor tienen tres clases de especificidad y ganarian.
 *
 * #6c757d es el gris secundario del propio Bootstrap 5: da 4.69:1 sobre blanco
 * y sigue leyendose como texto apagado, que es lo que un marcador de posicion
 * tiene que parecer. */
.select2-container--krajee-bs3 .select2-selection--single .select2-selection__placeholder,
.select2-container--krajee-bs3 .select2-selection--multiple .select2-selection__placeholder,
.select2-container--krajee-bs4 .select2-selection--single .select2-selection__placeholder,
.select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__placeholder,
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder,
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__placeholder,
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

/* Enlaces de salto (.skip-link) del layout lte4. AdminLTE 4 los pinta con
 * var(--bs-white) sobre var(--bs-primary), y con el primary de la paleta,
 * #5b8aab, eso son 3.7:1 cuando WCAG AA pide 4.5:1 para texto normal. No es un
 * caso raro: el JS de vendor los inyecta en todas las pantallas, y axe-core lo
 * marcaba en 93 de las 176 vistas del barrido.
 *
 * El color NO se deriva de la paleta, y es la parte importante de esta regla:
 * un enlace de salto es una ayuda de accesibilidad y tiene que seguir
 * cumpliendo aunque manana se cambie el primary a otro tono. #ffffff sobre
 * #212529 -el gris 900 de Bootstrap 5, el mismo de .text-bg-dark- da 15.43:1,
 * asi que hay margen de sobra para cualquier retoque futuro.
 *
 * La especificidad (.skip-links .skip-link, dos clases) esta elegida para
 * quedar por encima de la regla `.skip-link { ... !important }` que genera
 * PaletaLte4::generarCss(): si aquella cambia o desaparece, esta sigue
 * mandando. Quitar este bloque devuelve el enlace al primary de turno. */
.skip-links .skip-link,
.skip-links .skip-link:hover,
.skip-links .skip-link:focus {
    color: #ffffff !important;
    background: #212529 !important;
}

/* El anillo de foco lo dibuja AdminLTE con var(--bs-warning), que tambien sale
 * de la paleta y podria acabar en un tono oscuro invisible sobre el #212529 de
 * arriba. #ffc107 es el amarillo por defecto de Bootstrap 5: 9.46:1 contra ese
 * fondo, muy por encima del 3:1 que pide WCAG 1.4.11 para lo que no es texto. */
.skip-links .skip-link:focus {
    outline-color: #ffc107;
}

/* Color de <code>. Bootstrap 5 lo declara en :root como --bs-code-color:
 * #d63384, y ese rosa da 4.50:1 sobre blanco puro: justo el minimo de WCAG AA,
 * sin un pelo de margen. En cuanto el <code> no cae sobre blanco se suspende, y
 * casi nunca cae sobre blanco: 4.27:1 sobre .bg-light (#f8f9fa), que es donde
 * estan los 20 codigos de color de /admin/paleta-lte4, y 4.30:1 sobre el
 * #f8fafc del modulo de videos, que son los 6 <code> de video-admin/settings.
 * 26 nodos en 3 vistas, todos rozando el aprobado por debajo.
 *
 * #ab296a es el $pink-600 del propio Bootstrap, o sea que no se inventa un tono:
 * 6.45:1 sobre blanco, 6.12:1 sobre .bg-light y 5.76:1 sobre la fila oscura de
 * .table-striped. Con ese margen el <code> ya no depende de sobre que caiga.
 *
 * Viene de vendor/twbs/bootstrap, asi que corregirlo alli se perderia en el
 * siguiente composer install.
 *
 * OJO con el selector: tiene que ser :root:not([data-bs-theme="dark"]) y no
 * :root a secas. Bootstrap redefine la variable en [data-bs-theme="dark"] con
 * el mismo peso de especificidad, y como esta hoja se carga DESPUES ganaria
 * tambien en modo oscuro: el rosa oscuro se pegaria contra el fondo oscuro. El
 * :not() sube la especificidad y a la vez deja el modo oscuro intacto. El
 * interruptor de tema escribe siempre data-bs-theme en <html> (ver
 * backend/views/layouts/lte4.php), asi que los dos modos estan cubiertos.
 *
 * La paleta ya trata aparte el <code> DENTRO de una alerta (regla
 * `.alert-{clave} code` de common\components\PaletaLte4), y sigue mandando ahi:
 * ese fondo es pastel y necesita su propio color, no este. */
:root:not([data-bs-theme="dark"]) {
    --bs-code-color: #ab296a;
}

/* Etiquetas del segundo nivel del menu lateral. AdminLTE 4 le da a todo
 * `.sidebar-wrapper .nav-link p` un `white-space: nowrap` con
 * `text-overflow: ellipsis`, y en el submenu solo quedan 178 px utiles (250 de
 * barra, menos los margenes, menos el icono): "Playground GraphQL Avanza"
 * necesita 236 y se quedaba en "Playground GraphQL Av...". Son cinco entradas
 * cortadas -entre 5 y 58 px-, y las cuatro que pasan del umbral del barrido
 * salian como desborde en 41 nodos repartidos por 23 vistas.
 *
 * Se deja envolver a dos lineas en vez de cortar. El nombre de una entrada de
 * menu es justo lo que hay que leer entero para saber adonde lleva, y los
 * puntos suspensivos lo esconden; el title del enlace solo salva al que usa
 * raton. Ensanchar la barra tampoco valia: harian falta 308 px para que la
 * etiqueta mas larga entrase en una linea, y esos 58 px se los quitaria al
 * contenido en las 176 vistas para arreglar cinco entradas de menu.
 *
 * Solo del segundo nivel hacia dentro: las de primer nivel caben enteras. Y
 * align-items pasa a flex-start para que el icono se quede a la altura de la
 * primera linea en vez de estirarse por las dos. */
.nav-treeview > .nav-item > .nav-link {
    align-items: flex-start;
}

.nav-treeview > .nav-item > .nav-link > p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Las rejillas anchas se salian de la pagina y no habia forma de llegar a las
 * columnas de la derecha. Yii pinta cada GridView dentro de un
 * `<div class="grid-view">` sin overflow, asi que en cuanto la tabla es mas
 * ancha que la columna de contenido el sobrante empuja card, container-fluid y
 * app-content hacia fuera y acaba recortado por el ancho de la ventana. Medido
 * a 1440px: cursos/index tabla de 1455px en un hueco de 1116 (302px de exceso
 * ya en app-content), tutores/index 1564px (411px) y alumnos/index-all 1445px
 * (292px). El documento NO llega a scrollear en horizontal -scrollWidth 1440,
 * igual que el viewport-, o sea que esas columnas no se podian ver de ninguna
 * manera.
 *
 * El fallo estaba desde siempre; lo tapaba un accidente. El asset de Select2
 * arrastraba el bootstrap.css de la 3.4.1, que trae `html {font-size: 10px}`, y
 * Bootstrap 5 nunca lo reajusta: con el rem valiendo 10px en vez de 16 la
 * pagina entera se dibujaba al 62,5% y la tabla entraba justa. Al poner
 * bsVersion en 5 esa hoja deja de cargarse (ver
 * common\behaviors\PreviaLte4Behavior), la tabla pasa a su tamano real y el
 * fallo se ve. Revertir esto no es la solucion: solo volveria a encogerlo todo.
 *
 * Va aqui y no en cada vista porque la clase la pone yii\grid\GridView, o sea
 * vendor/, y son decenas de indices. Es lo que hace .table-responsive de
 * Bootstrap, aplicado al contenedor que Yii ya pinta de todos modos.
 *
 * Cuidado si se toca: overflow-x en auto obliga al navegador a calcular
 * overflow-y tambien como auto, y eso recortaria cualquier menu que se abriera
 * DENTRO de la rejilla. Hoy no hay ninguno -cero .dropdown-menu dentro de
 * .grid-view en las pantallas medidas- y los desplegables de Select2 los cuelga
 * el plugin del <body>, fuera del contenedor. */
.grid-view {
    overflow-x: auto;
}

/* Iconos de la caja de subida de ficheros (trntv/yii2-file-kit).
 *
 * upload-kit.js escribe los iconos a mano, con clases `glyphicon`, y los
 * Glyphicons solo existen en Bootstrap 3: la fuente y las reglas venian dentro
 * de su bootstrap.css. Mientras ese bundle se colaba en las pantallas de
 * AdminLTE 4 los iconos se veian por accidente; al quitarlo (ver
 * backend\assets\UploadKitAsset) los cuatro se quedaron en blanco. El del "+"
 * es el peor: era la unica pista visible de que ese recuadro punteado es un
 * boton para subir un fichero.
 *
 * Se remapean a Font Awesome 6, que ya carga el layout, en vez de reescribir
 * el JS: ese fichero esta en vendor/ y el siguiente composer install se
 * llevaria el cambio.
 *
 * Solo se traducen los cuatro que emite ese JS. Un mapa completo de Glyphicons
 * seria un puente para no convertir las vistas, y las vistas se convierten. */
.upload-kit .glyphicon {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.upload-kit .glyphicon-plus-sign::before {
    content: "\f055";
}

.upload-kit .glyphicon-circle-arrow-down::before {
    content: "\f0ab";
}

.upload-kit .glyphicon-exclamation-sign::before {
    content: "\f06a";
}

.upload-kit .glyphicon-remove-circle::before {
    content: "\f057";
}

/* El hueco de escribir de los Select2 de seleccion multiple se salia de su propio
 * marco.
 *
 * Select2 mide el <ul> de las etiquetas y le pone al <input> de busqueda ese
 * ancho EN PIXELES (resizeSearch, en el select2.js de vendor/), para que el texto
 * de marcador de posicion quepa entero. El tema krajee-bs5 le anade ademas
 * `margin: 0.5rem`, que en el modelo de caja se suma por fuera del ancho: 259 px
 * de ancho calculado + 8 + 8 de margen = 275 dentro de un <ul> de 259 con
 * `overflow: hidden`. Medido a 1440 px en /admin/tutores/create (259 -> 275) y en
 * /admin/empresas/create (269 -> 285): 16 px recortados en los dos, que es
 * exactamente el margen. Lo que queda fuera es el final del hueco de escribir,
 * asi que al teclear una busqueda larga el cursor se mete debajo del borde.
 *
 * Se cambia el margen lateral por relleno: con el `box-sizing: border-box` que
 * Bootstrap 5 pone a todo, el relleno va DENTRO del ancho que calcula Select2, el
 * hueco sigue viendose separado del borde y la suma vuelve a dar 259. El margen
 * de arriba y abajo se conserva tal cual: ese no desborda nada y es el que separa
 * el texto de las etiquetas ya elegidas.
 *
 * Va aqui porque el ancho lo escribe el JS de vendor/ y el margen esta en el CSS
 * de kartik-v/yii2-widget-select2, los dos fuera del repo, y porque el widget
 * sale en todas las pantallas con un Select2 multiple. */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* --- Densidad de la 3.0 (issue #241) ------------------------------------
   AdminLTE 2 componia todo sobre una base de 14px; Bootstrap 5 usa 16px, y
   por eso la plantilla nueva se veia con la letra grande y el menu con
   scroll. Todo el dimensionado de Bootstrap/AdminLTE va en rem, asi que
   bajar el rem raiz devuelve la densidad antigua a texto, paddings y
   alturas de golpe, sin tocar vista a vista. */
:root { font-size: 14px; }

/* (El tema oscuro se retiro el 26/08/2026: la 3.0 sale solo en claro.) */

/* AdminLTE 2 daba 20px de margen inferior a .box e .info-box, y AdminLTE 3 hizo lo
   propio con .card. AdminLTE 4 no trae ninguno (solo .small-box lo conserva), asi
   que las vistas convertidas -que nacieron contando con ese margen- dejaban las
   cajas pegadas en vertical: se vio en cursos/atencion y en el centro de mandos.
   Se repone con el mismo valor que usa .small-box. */
.card, .info-box { margin-bottom: 1.25rem; }

/* Filas contextuales de las rejillas (cursos, solicitudes, tutores, alumnos...)
   con la paleta pastel de Bootstrap 3, que es la cara que tenia la aplicacion:
   los table-* de Bootstrap 5 son mas saturados, tinen tambien los bordes y
   dejan que el rayado de table-striped oscurezca la fila coloreada, y el
   resultado era un bloque chillon en vez del lavado suave de antes. Se fija
   striped-bg = bg porque en BS3 la clase contextual ganaba a la raya, y el
   hover usa los valores exactos de BS3. Solo en tema claro: en oscuro los
   valores de BS5 ya estan pensados para fondos oscuros. */
[data-bs-theme="light"] .table-success { --bs-table-color: var(--bs-body-color); --bs-table-bg: #dff0d8; --bs-table-striped-bg: #dff0d8; --bs-table-hover-bg: #d0e9c6; --bs-table-border-color: #dee2e6; }
[data-bs-theme="light"] .table-danger  { --bs-table-color: var(--bs-body-color); --bs-table-bg: #f2dede; --bs-table-striped-bg: #f2dede; --bs-table-hover-bg: #ebcccc; --bs-table-border-color: #dee2e6; }
[data-bs-theme="light"] .table-warning { --bs-table-color: var(--bs-body-color); --bs-table-bg: #fcf8e3; --bs-table-striped-bg: #fcf8e3; --bs-table-hover-bg: #faf2cc; --bs-table-border-color: #dee2e6; }
[data-bs-theme="light"] .table-info    { --bs-table-color: var(--bs-body-color); --bs-table-bg: #d9edf7; --bs-table-striped-bg: #d9edf7; --bs-table-hover-bg: #c4e3f3; --bs-table-border-color: #dee2e6; }

/* Bootstrap 3 no subrayaba los enlaces en reposo, solo al pasar el raton;
   Bootstrap 5 los subraya siempre y los listados y cabeceras de rejilla se
   llenan de subrayados que la aplicacion nunca tuvo. Se recupera el
   comportamiento antiguo. Los componentes que nunca deben subrayar ni en
   hover (botones, pestanas, paginador, menus) se excluyen explicitamente. */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.btn:hover, .btn:focus, .nav-link:hover, .nav-link:focus, .page-link:hover,
.page-link:focus, .dropdown-item:hover, .dropdown-item:focus,
.small-box a:hover, .small-box a:focus, .info-box a:hover,
.sidebar-menu a:hover, .sidebar-menu a:focus, .app-header a:hover,
.app-header a:focus, .breadcrumb-item a:hover { text-decoration: none; }

/* Todas las rejillas (GridView envuelve su tabla en .grid-view), con el diseno
   limpio del panel de cursos a atender: letra de 12px y sin bordes verticales.
   El filo horizontal entre filas lo siguen pintando los tr de table-bordered
   (su regla es border-width 1px 0); aqui solo se anulan los de las celdas,
   que son los verticales. Los controles del filtro no cambian de tamano. */
.grid-view table { font-size: 0.857rem; }
.grid-view .table-bordered > :not(caption) > * > * { border-width: 0; }

/* Botones que son a la vez el icono (class="btn btn-danger fa fa-trash"),
   patron heredado de Font Awesome 4 y repartido por todo el backend. El .btn
   de Bootstrap 5 pisa la font-family y el font-weight de .fa (misma
   especificidad, su hoja carga despues) y la Free de FA6 solo tiene la solida
   en 900: el glifo no existe en la fuente del cuerpo y el boton sale vacio. */
.btn.fa { font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* Toastr contra el .toast de Bootstrap 5: son dos componentes distintos con la
   misma clase, y el de BS5 pisa el fondo de toastr con su blanco translucido
   mientras el texto sigue siendo el blanco de toastr -> avisos ilegibles. Se
   devuelven los colores clasicos de toastr colgando del contenedor, que gana
   en especificidad a ambos. */
#toast-container > .toast { background-color: #030303; color: #fff; }
#toast-container > .toast-success { background-color: #51a351; }
#toast-container > .toast-error   { background-color: #bd362f; }
#toast-container > .toast-info    { background-color: #2f96b4; }
#toast-container > .toast-warning { background-color: #f89406; }

/* El tamano btn-xs de Bootstrap 3, que BS5 elimino (la guia lo convierte a
   btn-sm, pero en celdas densas como Estado/Bonif de alumnos el sm es un
   boton gigante donde antes habia uno mini). Valores de BS3 sobre las
   variables de boton de BS5. */
.btn-xs { --bs-btn-padding-y: 1px; --bs-btn-padding-x: 5px; --bs-btn-font-size: .857rem; --bs-btn-border-radius: var(--bs-border-radius-sm); }

/* El gris `btn-default` de Bootstrap 3, que BS5 tampoco tiene (su pariente es
   `btn-secondary`, que es gris oscuro y no el gris claro con filo de AdminLTE 2).
   Quedan 25 en el marcado de la 3.0, varios dentro de cadenas de JavaScript que
   montan HTML, y sin esto salen como botones sin color. Valores de AdminLTE 2
   sobre las variables de boton de BS5, igual que .btn-xs de aqui arriba. */
.btn-default { --bs-btn-color: #444; --bs-btn-bg: #f4f4f4; --bs-btn-border-color: #ddd;
               --bs-btn-hover-color: #444; --bs-btn-hover-bg: #e7e7e7; --bs-btn-hover-border-color: #ccc;
               --bs-btn-active-color: #444; --bs-btn-active-bg: #e7e7e7; --bs-btn-active-border-color: #ccc;
               --bs-btn-disabled-color: #444; --bs-btn-disabled-bg: #f4f4f4; --bs-btn-disabled-border-color: #ddd; }

/* Las <legend> de los formularios, como en AdminLTE 2 (style.less): titulo azul
   a ancho completo con su filo inferior, que es lo que daba estructura de
   bloques al formulario de solicitudes. Bootstrap 5 las deja flotadas y sin
   nada, y el CSS propio del formulario las habia convertido en un chip gris. */
legend { float: none; width: 100%; font-size: 1.29rem; color: #578ba4;
         border-bottom: 1px solid #578ba4; margin-bottom: .75rem; padding-bottom: .2rem; }

/* El 'Mostrando 1-20 de N' de las rejillas, discreto como en la 2. */
.grid-view .summary { color: var(--bs-secondary-color); font-size: .857rem; margin-bottom: .5rem; }

/* Jerarquia del menu lateral: en AdminLTE 2 los submenus iban sobre un panel
   mas oscuro (treeview-menu #2c3b41) e indentados, y en la 4 hijos y padres
   salen casi iguales. Se repone la lectura de arbol: fondo oscurecido sobre
   el color del menu (vale para claro y oscuro), sangria mayor, letra un punto
   menor y una guia vertical a la izquierda. */
.app-sidebar .nav-treeview { background: rgba(0, 0, 0, .18); }
.app-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.4rem;
    font-size: .93rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
}
.app-sidebar .nav-treeview > .nav-item > .nav-link.active,
.app-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    border-left-color: rgba(255, 255, 255, .55);
}

/* Columnas huerfanas: col-md-* SIN un .row padre. En Bootstrap 3 las columnas
   flotaban y se ponian una al lado de otra aunque no hubiera .row (y este
   codigo confiaba en ello, con sus <div class=clearfix> manuales); en BS5 son
   bloques y se apilan una por linea -el formulario de solicitudes entero se
   veia asi-. Se repone el flotado y el gutter de 15px de BS3 SOLO para las
   columnas que no cuelgan de un .row: las bien envueltas no se tocan. */
:not(.row) > [class^="col-"], :not(.row) > [class*=" col-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

/* .form-group desaparecio en BS5 (la guia lo convierte a mb-3), pero las
   partes no convertidas del formulario siguen usandolo y los campos quedaban
   pegados en vertical. El margen clasico de BS3. */
.form-group { margin-bottom: 15px; }

/* .hidden era una utilidad de Bootstrap 3 y en BS5 no existe (es .d-none). El JS de
   la aplicacion la sigue usando: 16 veces en js/solicitudes/index.js -donde
   ajustarForm() ensena y esconde con ella los bloques de cada modalidad- y 11 en
   js/importar-alumnos.js. Ninguna de las 12 hojas que carga el formulario de
   solicitudes la definia (comprobado una por una sobre los ficheros publicados en
   backend/web/assets), asi que ajustarForm no ocultaba NADA: medido en la solicitud
   14156, que es presencial, la pestana Teleformacion se abria y se rellenaba entera
   -centro gestor, direccion, horas de tutoria, dias L-D y la rejilla de tutores-.
   Las pestanas son siempre pulsables porque el "disabled" va en el <li> y BS5 lo
   mira en el <a>; no se toca eso a proposito, porque bloquearlas dejaria sin acceso
   a los datos de las 51 solicitudes con modalidad vacia y a la unica PV.
   La unica definicion que quedaba viva estaba en css/importar-alumnos.css, que solo
   se registra en alumnos/importar-ajax.php. Ver el punto 6 del issue #241. */
.hidden { display: none !important; }

/* Un <label> dentro de un bloque con fondo solido (.text-bg-*) tiene que heredar el
   color del fondo, no el gris de formulario. El CSS de AdminLTE trae un
   `label{color:#6c757d}` a pelo -especificidad de elemento, pero sobre el PROPIO
   label-, y las utilidades .text-bg-* solo pintan el color del elemento al que se
   ponen, no el de sus hijos. Resultado, visto en captura y no en ningun error: en la
   pestana Estado el bloque de una tarea gestionada salia verde intenso con
   "Convenio:" y las cuatro opciones en gris. Punto 6 del issue #241. */
[class*="text-bg-"] label,
[class*="text-bg-"] legend {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Lo que trae main escrito en Bootstrap 3, repuesto aqui y no convertido en el
   marcado, por dos razones: casi todo vive dentro de CADENAS DE JAVASCRIPT que
   construyen HTML por concatenacion -convertirlas es tocar literales a mano, con
   mas riesgo que ganancia-, y sobre todo porque main SEGUIRA escribiendo asi
   hasta que la 3.0 este en produccion. Una regla aqui arregla tambien el codigo
   que llegue en el proximo merge; una conversion en la vista solo arregla el de
   hoy. Es la regla de oro de esta rama: los choques BS3/BS5 se centralizan.
   Punto de partida: 33 coincidencias medidas en los 82 commits que trajo main.
   --------------------------------------------------------------------------- */

/* `label label-*` era la etiqueta de color de BS3. En BS5 se llama `badge` y las
   variantes son `text-bg-*`; sin esto la etiqueta sale como TEXTO PELADO, sin
   fondo ni forma. Se pide el par completo (`.label.label-x`) a proposito, para no
   pisar ningun elemento que lleve la clase `label` por otro motivo. Ojo: en BS3
   `default` es el gris, y en BS5 ese papel lo hace `secondary`. */
.label.label-default, .label.label-primary, .label.label-success,
.label.label-info, .label.label-warning, .label.label-danger {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .375rem;
}
.label.label-default { background-color: #6b7a83; }
.label.label-primary { background-color: #3c8dbc; }
.label.label-success { background-color: #00a65a; }
.label.label-info    { background-color: #00c0ef; }
.label.label-warning { background-color: #f39c12; }
.label.label-danger  { background-color: #dd4b39; }

/* `panel` era la tarjeta de BS3 y en BS5 es `card`. Sin esto el bloque sale sin
   marco, sin cabecera diferenciada y sin separacion: sale plano. */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
}
.panel-heading {
    padding: .5rem 1rem;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    font-weight: 600;
}
.panel-body { padding: 1rem; }
.panel-footer {
    padding: .5rem 1rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* `well` era la caja hundida de BS3 y BS5 no tiene equivalente directo. */
.well {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--bs-secondary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.well-sm { padding: .5rem; }

/* `pull-right` / `pull-left` se llaman `float-end` / `float-start` en BS5. Sin
   esto el elemento no flota y se queda en el flujo, desmontando la fila. */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* Cabeceras de tarjeta CON COLOR: lo de dentro tiene que seguir el color de la cabecera,
 * no el del cuerpo de la pagina.
 *
 * Las tres cabeceras de la pestana Sincronizacion (FLC, AvanzaPRL y campus) llevan
 * `text-bg-*` para distinguirlas de un vistazo. Dentro hay textos con
 * `.text-body-secondary` -"sincronizado hace 3 horas", "sin sincronizar todavia"- y esa
 * clase de Bootstrap 5 fija `color: var(--bs-secondary-color) !important`: un gris
 * pensado para fondo claro, que sobre amarillo, azul o cian se lee mal. Por el
 * `!important` de la regla original hace falta `!important` aqui para ganarla.
 *
 * Se hereda el color y se baja la opacidad: se sigue distinguiendo lo principal de lo
 * secundario, y el contraste lo pone el propio `text-bg-*`, que Bootstrap ya calcula.
 *
 * Va aqui y no en cada vista por la regla de esta rama -los choques entre Bootstrap 3 y 5
 * se arreglan en un solo sitio-, y asi cubre cualquier otra cabecera de color que venga
 * despues. */
.card-header[class*="text-bg-"] .text-body-secondary,
.card-header[class*="text-bg-"] .text-muted {
    color: inherit !important;
    opacity: .8;
}

/* Las etiquetas de un Select2 multiple no pueden ser mas anchas que su propio campo.
 *
 * Lo pidio Toni por el campo "Correspondencias con AvanzaPRL" de la accion formativa, y
 * ahi el problema esta medido: son 3.173 opciones cuyo rotulo es "<id> - <nombre>" tal
 * como los devuelve la API de Avanza, con una MEDIANA de 68 caracteres y una maxima de
 * 257 -"9804 - 20H C.1.1 PRODUCCION CNAE 24 ACTIVIDAD EN LA INDUSTRIA SIDERURGICA Y DE
 * PRIMERA TRANSFORMACION..."-. Elegida una de esas, la etiqueta se estira mas alla del
 * marco del campo.
 *
 * `text-overflow: ellipsis` necesita las tres cosas juntas -ancho acotado, `overflow:
 * hidden` y `white-space: nowrap`- y en el MISMO elemento que contiene el texto. Aqui se
 * cumple: en Select2 4.0.13 el texto es un nodo hijo directo del <li>, justo detras del
 * <span> de la X (ver src/js/select2/selection/multiple.js), asi que la X queda a la
 * izquierda y sigue viendose y pulsandose por muy recortado que este el rotulo.
 *
 * El tope es el ancho del campo menos el margen izquierdo de la propia etiqueta
 * (0.25rem, del tema krajee-bs5) mas otro tanto de aire: con `max-width: 100%` pelado se
 * salia por ese margen.
 *
 * No se recorta nada de informacion: Select2 pone el rotulo completo en el `title` del
 * <li>, asi que el texto entero sigue estando a un raton de distancia.
 *
 * La regla va a todos los Select2 multiples y no solo al de Avanza a proposito: una
 * etiqueta mas ancha que su campo esta mal en cualquiera de ellos. A los otros tres
 * -usuarios gestores, delegaciones y centros de un curso- no les cambia nada, porque sus
 * rotulos ya caben; medido en las tres fichas.
 *
 * Misma especificidad que la regla del tema (tres clases) y esta hoja se carga despues,
 * asi que gana por orden y sin necesidad de !important. */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0;
}

/* ...y la lista que las contiene tiene que poder SALTAR DE LINEA.
 *
 * Lo dijo Toni: "con options elegidas muy largas parece que insisten en ponerse todas en
 * la misma linea pero solo cabe una y no se ven todas las seleccionadas". Medido en una
 * AF con cinco modalidades de AvanzaPRL: las cinco etiquetas con el MISMO `top` -o sea,
 * en una unica linea-, cada una de 521 px dentro de un hueco de 528, y el <ul> midiendo
 * 66 px de alto para cinco etiquetas de 28. Las cuatro ultimas estaban ahi, fuera del
 * marco y recortadas.
 *
 * La culpa no es del tema krajee sino del CSS base de Select2, que le pone al contenedor
 * `white-space: nowrap` ademas de `overflow: hidden`. Con `nowrap` no se puede partir la
 * linea entre elementos en linea, asi que por muchas etiquetas que haya van todas
 * seguidas.
 *
 * Se convierte en una caja flex que envuelve: cada etiqueta cae en su fila cuando no
 * cabe, la separacion la pone `gap` -y por eso la etiqueta pierde su `margin-left`- y el
 * campo crece hacia abajo. Con tope: 12 rem y barra de desplazamiento vertical, porque
 * hay campos con 130 elegidos -los centros de un curso- y sin tope el formulario se
 * volveria impracticable. Medido: cinco etiquetas largas ocupan 221 px, asi que con 15
 * rem (240 px) se ven las cinco sin tocar la barra, y los casos gordos se acotan ahi.
 *
 * NOTA de lo que aprendi con esto: el guion que escribi para la elipsis contaba 130
 * etiquetas "visibles" en el campo de centros y lo dio por bueno. No lo era: el arnes
 * mira que el elemento tenga caja y no este oculto, y NO detecta que este recortado por
 * el `overflow` de un ancestro. Contar elementos no prueba que se vean. */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    white-space: normal;
    max-height: 15rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Tablas con CABECERA DE FILA: dos <tr> por registro, y el rayado tiene que ir por
 * parejas.
 *
 * En el panel de cursos a atender, lo que le falta al curso, el nombre de la accion
 * formativa y el centro gestor van en un <tr> propio con `colspan` ENCIMA de su fila
 * (ver el `beforeRow` de cursos/_atencion_grid.php). Asi las celdas de datos quedan a
 * UNA linea: medido, la fila baja de 98 px a 44, y la tabla del panel de 1.006 px a 818.
 *
 * Eso choca con `table-striped` de Bootstrap 5, que raya `tr:nth-of-type(odd)`: con dos
 * filas por registro, la cabecera sale del color contrario al de su propia fila y la
 * parte en dos justo cuando lo que se busca es que se lean como una. Asi que se apaga el
 * rayado de Bootstrap para estas tablas y se pinta por parejas: filas 1-2 con fondo, 3-4
 * sin, 5-6 con... o sea `4n+1` y `4n+2`.
 *
 * Y la cabecera se pega a la fila que encabeza: sin borde ni relleno por ABAJO -es la
 * direccion que la une a su fila-, con el texto pequeno y apagado, que es informacion
 * secundaria. */
.tabla-con-cabecera > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: initial;
    --bs-table-color-type: initial;
}

.tabla-con-cabecera > tbody > tr:nth-of-type(4n+1) > *,
.tabla-con-cabecera > tbody > tr:nth-of-type(4n+2) > * {
    --bs-table-bg-type: var(--bs-table-striped-bg);
    --bs-table-color-type: var(--bs-table-striped-color);
}

.tabla-con-cabecera > tbody > tr.cabecera-fila > td {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: .85em;
    color: var(--bs-secondary-color);
}

/* Avisos de alumnado en la rejilla de cursos: los que faltan por matricular o por
 * comunicar al convenio.
 *
 * Antes la celda llevaba `background-color: orange` escrito en linea. Dos problemas: era
 * un bloque de naranja saturado al lado de una ficha que ya tiene sus propias franjas de
 * color -o sea, dos avisos peleandose en 55 px-, y ademas el fondo NO gana siempre,
 * porque Bootstrap 5.3 no pinta el fondo de las celdas con `background-color`: lo pinta
 * con `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type,
 * ...))`. Por eso aqui se tine la celda por su variable `--bs-table-bg-state`, que es la
 * primera de esa cadena y gana tanto al rayado como al hover.
 *
 * La banda de 4 px del borde izquierdo es lo que se ve desde lejos, que es lo que se
 * pedia. Va con un selector mas especifico que `.table-bordered > :not(caption) > * > *`
 * (0,3,1 contra 0,2,1) para no necesitar `!important`.
 *
 * Dos niveles, no uno: naranja si faltan MATRICULAS y rojo si faltan COMUNICACIONES de
 * convenio, que son las que tienen plazo con el portal. Son los mismos dos colores que
 * usan las franjas de la ficha de dentro. */
.table > :not(caption) > * > *.aviso-alumnos-matricula {
    --bs-table-bg-state: #fde5cd;
    border-left: 4px solid #e67e22;
}

.table > :not(caption) > * > *.aviso-alumnos-convenio {
    --bs-table-bg-state: #f9d7d3;
    border-left: 4px solid #c0392b;
}
/* Selectores de la fila de filtros de las rejillas. El .form-select de Bootstrap 5
   reserva 2.25rem para la flecha y .75rem de sangria: en columnas de 60-80 px
   (Fundae, Convenio, Campus, Docs de cursos/index) no cabia ni un "No". Misma
   letra que la tabla (.857rem), la flecha pegada al borde y un ancho minimo con el
   que "Todos" cabe entero (la columna Docs, de 60 px, lo cortaba). */
.grid-view .filters .form-select { font-size: .857rem; padding: .3rem 1.4rem .3rem .4rem; background-position: right .35rem center; min-width: 4.4rem; }