/*######################################
    Estándar de formularios del backoffice
######################################*/
/*
 * Cómo se adopta: el <form> lleva LAS DOS clases, `soe-form wg-form`.
 *
 *   <form id="form-x" class="soe-form wg-form" autocomplete="off">
 *
 * Por qué dos y no una. `.soe-form` ya existe en template.css y la usan 85 plantillas: define
 * altura de control, tamaño de etiqueta y el aspecto de las pestañas. Todo lo que se añada ahí
 * cambiaría esas 85 pantallas de golpe, y nadie ha comprobado cómo se ven. `.wg-form` es el
 * segundo gancho: lo que vive en este archivo sólo aplica a las pantallas que lo pidan
 * explícitamente, así que una pantalla se estandariza cuando alguien la revisa, no antes.
 *
 * 🔴 Ni una regla de este archivo debe aplicar a `.soe-form` a secas. El harness lo comprueba.
 *
 * Los colores salen de los tokens de warper-skin.css (`--wg-*`): son los del dashboard nuevo y
 * los de la pantalla de jugadores. Aquí NO se declara ningún color a mano, para que un cambio de
 * paleta se haga en un solo sitio.
 *
 * Las reglas de uso están en docs/estructura-negocio/formularios.md.
 */

/*--------------------------------------
    1. Escala
--------------------------------------*/
/* `.soe-form` deja la etiqueta en .725rem y el control en unos 24px de alto, con !important.
   Eso es la densidad de las pantallas de consulta, y en un formulario de captura queda apretado:
   se probó una escala intermedia (30px) y seguía sin respirar. Esta es la del diseño aprobado.
   Consecuencia asumida: una pantalla estandarizada se ve más grande que una que todavía no lo
   está. Se corrige sola conforme adopten `wg-form`.
   Especificidad (0,3,1) + !important para ganarle a template.css, que también lleva !important. */
/* Convivencia con warper-skin.css, y es el motivo de los !important de aquí abajo.
   El skin estiliza `select.form-control` (línea 221) y `.input-group > input.form-control`
   (línea 721) de forma GLOBAL y con !important: 34px de alto, 12.5px de letra, su propio padding
   y su propio radio.
   **La altura es la suya y a propósito**: 34px es lo que el skin usa en los filtros y en los
   selects de todo el admin, así que es la altura de control de la plataforma, no un número
   nuestro. Se repite aquí en vez de dejarla heredar para que sea explícita y para que la caja
   del icono, que se estira, tenga a qué seguir.
   Lo que sí hay que ganarle es lo demás: su letra de 12.5px deja los selects más chicos que el
   input de al lado, su padding no es el mismo, y su radio vuelve a redondear la esquina
   izquierda aunque haya un icono pegado.
   Estas reglas llevan !important porque pelean contra otro !important, que es lo que el propio
   encabezado del skin dice que es el caso legítimo. La especificidad (0,4,1) le gana a la suya
   (0,2,1 y 0,3,1). */
.soe-form.wg-form input.form-control,
.soe-form.wg-form select.form-control,
.soe-form.wg-form textarea.form-control,
.soe-form.wg-form .input-group > input.form-control,
.soe-form.wg-form .input-group > select.form-control {
    height: 34px !important;
    font-size: .9rem !important;
    line-height: 1.4 !important;
    padding: 4px 12px !important;
    border-color: var(--wg-border-2);
}

/* Un select necesita sitio a la derecha para el caret que el skin le dibuja de fondo. */
.soe-form.wg-form select.form-control,
.soe-form.wg-form .input-group > select.form-control {
    padding-right: 2rem !important;
}

.soe-form.wg-form textarea.form-control {
    height: auto !important;
    min-height: 80px;
}

.soe-form.wg-form button.btn-finder {
    height: 34px !important;
    width: 44px;
}

.wg-form label {
    font-size: .875rem;
    color: var(--wg-text);
}

/*--------------------------------------
    2. El campo
--------------------------------------*/
/* Un campo es siempre: .form-group > label + control. Nunca una etiqueta suelta al lado de un
   control, porque entonces el hueco de abajo lo decide el padre y deja de ser uniforme. */
.wg-form .form-group {
    margin-bottom: 1.1rem;
}

.wg-form .form-group > label {
    margin-bottom: .4rem;
    display: block;
    font-weight: 600;
}

/* El asterisco de obligatorio: rojo y separado de la etiqueta. */
.wg-form .wg-req {
    color: var(--wg-danger);
    margin-left: .15rem;
    font-weight: 700;
}

/* Un campo deshabilitado se lee como deshabilitado. Antes esto vivía en un <style> dentro de la
   plantilla del operador y sólo aplicaba a su pestaña de comisiones. */
.wg-form input:disabled,
.wg-form select:disabled,
.wg-form textarea:disabled {
    color: var(--wg-text-3);
    background-color: var(--wg-surface-2);
}

/*--------------------------------------
    3. El icono del campo
--------------------------------------*/
/* Va en un .input-group-prepend delante del control. SÓLO en campos medianos o anchos: en uno
   corto la caja se come un tercio del ancho escribible.
   El icono se elige de la lista cerrada POR TIPO DE DATO que fija el documento del estándar, no
   por el significado del campo: así nadie tiene que inventar uno y no acaba habiendo un
   calendario en una clave de cuatro letras. */
/* Sin `height`: se estira al alto del control, sea el que sea. Clavarle 40px aquí y 40px al
   control son dos fuentes de verdad que se desincronizan en cuanto alguien toque una de las dos,
   y la caja acaba sobresaliendo un par de píxeles por arriba y por abajo. */
.wg-form .wg-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 44px;
    flex: 0 0 44px;
    background-color: var(--wg-surface-2);
    border: 1px solid var(--wg-border-2);
    border-right: 0;
    border-radius: var(--wg-radius) 0 0 var(--wg-radius);
    color: var(--wg-text-3);
    font-size: 1rem;
}

/* Con icono delante, el control pierde sus esquinas izquierdas.
   Se escribe el radio COMPLETO y no sólo las dos esquinas de la izquierda: `.wg-theme
   .form-control` de warper-skin.css vuelve a redondear las cuatro, y un <select> además trae las
   suyas del navegador. Poniendo las cuatro no queda ninguna a medias. */
.wg-form .input-group > .wg-field-icon + .form-control {
    border-radius: 0 var(--wg-radius) var(--wg-radius) 0 !important;
}

/* Y si además lleva algo pegado a la derecha —el botón de buscar el CP, el sufijo $ o %—,
   entonces no redondea por ningún lado: las esquinas las pone ese otro. */
.wg-form .input-group > .wg-field-icon + .form-control:not(:last-child) {
    border-radius: 0 !important;
}

/*--------------------------------------
    4. El select con buscador
--------------------------------------*/
/* Un <select> con buscador es **select2 4.0.13**, el del vendor de com_backend. Se pone con la
   clase `wg-select-search` en el <select>; el resto lo hace initWgSearchableSelects() del JS de
   la pantalla. Cuándo ponerla y cuándo no, en docs/estructura-negocio/formularios.md.

   Dónde vive cada pieza, y sigue el mismo reparto que Parsley: **la hoja base es global**
   —index.php la carga antes que este archivo— y **el JS lo carga el formulario** que lo usa, así
   que una pantalla que no tiene selects con buscador no se lo descarga.

   Esto convive con DOS hojas que ya estilizan select2 y que no se tocan:

     - `app.min.css` (el tema Hyper, global) le da 38px de alto y el morado #6658dd del
       resaltado. Es la que de verdad estorba.
     - `select2.min.css` del vendor, la base, que entra después que este archivo porque la
       inyecta el modal.

   Por eso cada regla de aquí gana **por especificidad y no por !important**: el prefijo
   `.wg-form` añade una clase a la del tema, y contra la base del vendor sobra. Al ganar por
   especificidad da igual el orden de carga, que es justo lo que hace falta cuando una de las dos
   hojas llega por AJAX. */

/* Dentro del .input-group el contenedor de select2 ocupa el hueco del control, igual que haría
   un .form-control. `min-width: 0` es lo que le permite encogerse por debajo de su contenido:
   sin eso, una opción con nombre largo —"Ciudad Autónoma de Buenos Aires"— ensancha la caja y
   empuja al icono fuera de la columna.
   El contenedor NO trae ancho en línea: el JS inicializa con `width: null` a propósito. Con el
   'resolve' de fábrica select2 mide el <select> al arrancar, y el de Municipio o el de Ciudad
   arrancan escondidos —miden 0— y se quedarían con `width: auto` para siempre. */
.wg-form .input-group > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* La caja visible: el mismo alto, letra, borde y radio que un .form-control del estándar. */
.wg-form .select2-container--default .select2-selection--single {
    height: 34px;
    background-color: var(--wg-surface);
    border: 1px solid var(--wg-border-2);
    border-radius: var(--wg-radius);
    box-shadow: none;
}

.wg-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 32px;
    line-height: 32px;
    padding-left: 12px;
    padding-right: 28px;
    font-size: .9rem;
    color: var(--wg-text);
}

.wg-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    width: 28px;
    right: 2px;
}

/* Con icono delante pierde las esquinas izquierdas, exactamente igual que un .form-control.
   🔴 Hermano GENERAL (`~`) y no adyacente (`+`), y es la diferencia entre que funcione y que no:
   select2 **no sustituye** al <select>, se inserta DESPUÉS de él y lo deja en su sitio fuera de la
   vista. Así que entre el icono y el contenedor de select2 siempre queda el <select> original, y
   con `+` esta regla no casa nunca: el campo se queda con las cuatro esquinas redondeadas pegado
   al icono. */
.wg-form .input-group > .wg-field-icon ~ .select2-container .select2-selection--single {
    border-radius: 0 var(--wg-radius) var(--wg-radius) 0;
}

/* Foco y desplegable abierto: el mismo anillo verde que el resto de los controles. */
.wg-form .select2-container--default.select2-container--focus .select2-selection--single,
.wg-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--wg-brand);
    box-shadow: 0 0 0 .1rem var(--wg-brand-50);
}

/* El error va en la caja visible. Parsley le pone `parsley-error` al <select> de verdad, que
   select2 deja en el DOM pero fuera de la vista: sin esto el campo se marca mal y el usuario
   sólo ve el mensaje de abajo, sin saber cuál de los cuatro selects es. */
.wg-form .parsley-error + .select2-container--default .select2-selection--single {
    border-color: var(--wg-danger);
}

.wg-form .select2-container--disabled .select2-selection--single {
    background-color: var(--wg-surface-2);
}

/* ---- El desplegable ----
   Va colgado del MODAL, no del formulario, así que `.wg-form` no lo alcanza y no sirve de
   gancho. El gancho es `wg-select-dropdown`, que el JS le pasa en `dropdownCssClass`: una clase
   que sólo emitimos nosotros, así que sigue siendo opt-in igual que `.wg-form`.
   Por qué cuelga del modal y no del <body>: el modal es `position: fixed` y tiene su propio
   scroll, de modo que el desplegable se mueve con el campo en lugar de quedarse flotando a media
   pantalla al hacer scroll dentro del formulario. */
.select2-dropdown.wg-select-dropdown {
    border: 1px solid var(--wg-border-2);
    border-radius: var(--wg-radius);
    box-shadow: var(--wg-shadow-pop);
}

.wg-select-dropdown .select2-search--dropdown {
    padding: .4rem;
    background-color: var(--wg-surface);
}

.wg-select-dropdown .select2-search--dropdown .select2-search__field {
    height: 30px;
    padding: 0 .5rem;
    font-size: .85rem;
    color: var(--wg-text);
    border: 1px solid var(--wg-border-2);
    border-radius: var(--wg-radius);
}

.wg-select-dropdown .select2-results__option {
    padding: 5px 12px;
    font-size: .85rem;
    color: var(--wg-text);
}

/* El resaltado y el seleccionado, con la marca en vez del morado del tema. Los dos selectores
   llevan `.select2-container--default` delante para sumar una clase a la del tema y ganarle sin
   !important: la suya es (0,3,0) y éstas (0,4,0).

   La opción que YA está elegida, en verde pálido. */
.select2-container--default .wg-select-dropdown .select2-results__option[aria-selected=true] {
    background-color: var(--wg-brand-50);
    color: var(--wg-text);
}

/* Y la RESALTADA —donde está el ratón o la flecha—, en la marca.
   🔴 Va después de la anterior a propósito. Las dos tienen la misma especificidad, así que
   decide el orden, y sobre la opción que ya está elegida tiene que mandar dónde estás ahora y no
   qué elegiste antes. Con el orden al revés —que es el que trae el tema— recorrer la lista con
   las flechas deja la opción actual pálida, como si no estuvieras encima de ella.
   select2 pone `--highlighted` también al pasar el ratón, así que esto cubre el hover y no hace
   falta una regla `:hover` aparte. */
.select2-container--default .wg-select-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wg-brand);
    color: #fff;
}

/*--------------------------------------
    5. Anchos de control
--------------------------------------*/
/* Para los campos cuyo contenido tiene un tamaño conocido —importes, porcentajes, claves de
   cuatro caracteres—. Lo demás ocupa su columna, que es el comportamiento por omisión de
   .form-control y no necesita clase. Estos NO llevan icono. */
.wg-form .wg-w-xs { width: 90px; }
.wg-form .wg-w-sm { width: 120px; }
.wg-form .wg-w-md { width: 160px; }
.wg-form .wg-w-lg { width: 240px; }

.wg-form .input-group.wg-w-xs,
.wg-form .input-group.wg-w-sm,
.wg-form .input-group.wg-w-md,
.wg-form .input-group.wg-w-lg {
    flex-wrap: nowrap;
}

/* El sufijo $ o % de un importe. Apretado, para que no se coma el ancho del campo. */
.wg-form .input-group-text {
    padding: 0 .5rem;
    font-size: .78rem;
    background-color: var(--wg-surface-2);
    border-color: var(--wg-border-2);
    color: var(--wg-text-2);
}

/*--------------------------------------
    6. El panel de un grupo
--------------------------------------*/
/* Todas las pestañas llevan panel, o ninguna. El estándar dice que sí, y con cabecera numerada:
   el número ordena la lectura y la descripción dice qué se captura ahí, que es lo que convierte
   el marco en una guía en vez de en un adorno que repite el nombre de la pestaña. */
.wg-form .wg-panel {
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius-lg);
    box-shadow: var(--wg-shadow);
    background-color: var(--wg-surface);
    margin-bottom: .75rem;
}

.wg-form .wg-panel__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--wg-border);
    /* .4rem y no más: el número mide 28px, así que la cabecera queda en ~41px y es el badge el
       que manda el alto. Bajarlo más no compacta nada —el número ya no deja— y sólo pega el
       título al borde. Con tres paneles en una pestaña, esto ahorra unos 27px de alto. */
    padding: .4rem .9rem;
}

.wg-form .wg-panel__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background-color: var(--wg-brand-50);
    color: var(--wg-brand-700);
    border-radius: var(--wg-radius);
    font-size: .9rem;
    font-weight: 700;
}

.wg-form .wg-panel__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wg-text);
}

/* La barra fina que separa el título de su descripción. */
.wg-form .wg-panel__desc {
    position: relative;
    padding-left: .75rem;
    font-size: .85rem;
    color: var(--wg-text-3);
}

.wg-form .wg-panel__desc:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    border-left: 1px solid var(--wg-border-2);
}

.wg-form .wg-panel__body {
    padding: 1rem .9rem .1rem;
}

/* El canal entre columnas, una sola vez y para todas. Bootstrap le pone a .row un margen
   negativo de 15px y 15px de padding a cada columna; dentro de un panel eso desborda su padding,
   y por eso cada plantilla acabó escribiendo su propio parche: `row m-0`, `px-0`, `pt-1`. */
.wg-form .wg-panel .row {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.wg-form .wg-panel .row > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Separador vertical entre dos bloques hermanos de la misma fila. Se dibuja a la izquierda, así
   que va en el segundo y siguientes. En pantalla angosta las columnas se apilan y la línea
   vertical no tendría sentido: ahí pasa a ser horizontal. */
.wg-form .wg-split {
    border-left: 1px solid var(--wg-border);
}

@media (max-width: 767.98px) {
    .wg-form .wg-split {
        border-left: 0;
        border-top: 1px solid var(--wg-border);
        padding-top: .5rem;
        margin-top: .5rem;
    }
}

/*--------------------------------------
    7. Casillas y opciones
--------------------------------------*/
/* La casilla que gobierna un bloque: casilla + etiqueta en la misma línea, con la etiqueta
   alineada al texto y no al borde. Sustituye al `class="ml-1 control-label"` suelto. */
.wg-form .wg-check {
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
}

.wg-form .wg-check > input {
    margin: 0 .4rem 0 0;
}

.wg-form .wg-check > label {
    margin: 0;
    font-weight: 600;
    color: var(--wg-text);
    cursor: pointer;
}

/* Una fila de opciones (radio) debajo de su etiqueta. */
.wg-form .wg-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .4rem;
}

.wg-form .wg-options .form-check-inline {
    margin-right: .9rem;
}

.wg-form .wg-options .form-check-label {
    font-weight: 400;
    color: var(--wg-text-2);
}

/* Una nota debajo de un campo o de un grupo: explica por que algo esta como esta. No es un
   error --para eso esta el mensaje del validador, en rojo-- sino contexto, asi que va en el gris
   secundario y en la letra chica. */
.wg-form .wg-field-note {
    margin-top: .2rem;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--wg-text-3);
}

/*--------------------------------------
    8. Las pestañas
--------------------------------------*/
.wg-form .nav-tabs {
    border-bottom: 1px solid var(--wg-border-2);
    margin-bottom: .6rem;
}

.wg-form .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    /* Misma receta que las pestañas de items abiertos del skin (warper-skin.css, sección
       "PESTAÑAS DE ITEMS ABIERTOS"), que son las de la pantalla de jugadores: la raya mide 3 px,
       nace transparente y sólo cambia de color. Así el texto no se mueve un par de píxeles al
       pasar por encima, que es lo que pasa cuando el borde aparece de la nada.
       El margen negativo monta la raya sobre el borde del contenedor, como allá. */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: .7rem 1rem;
    /* Regla derivada: la etiqueta de una pestaña mide lo mismo que la etiqueta de un campo
       (§1). No es un número elegido, sale del contexto, y si mañana se mueve la escala del
       formulario las pestañas acompañan solas.
       Las pestañas de ITEMS ABIERTOS del skin —las de jugadores— miden 13px y así se quedan:
       aquéllas son cromo de navegación de la aplicación, con el nombre recortado a 220px y
       muchas a la vez; éstas son secciones del contenido que se está editando. Lo que se
       estandariza entre las dos es el gesto —la raya, el color, el peso, la transición—, no el
       tamaño de la letra. */
    font-size: .875rem;
    font-weight: 500;
    color: var(--wg-text-2);
    transition: color .12s, border-color .12s;
}

/* Al pasar por encima se pinta la raya, en verde de marca. El texto sólo se oscurece: NO se
   tiñe de verde, porque entonces el hover competiría con la pestaña activa. Es lo que hace el
   skin en las pestañas de jugadores. */
.wg-form .nav-tabs .nav-link:hover {
    color: var(--wg-text);
    border-bottom-color: var(--wg-brand);
}

/* La activa: misma raya, texto en negrita y color pleno. El !important es para ganarle a
   `.soe-form .nav-link.active` de template.css, que la pone blanca. */
.wg-form .nav-tabs .nav-link.active {
    background: transparent;
    border-bottom: 3px solid var(--wg-brand) !important;
    color: var(--wg-text);
    font-weight: 600;
}

.wg-form .nav-tabs .nav-link > i {
    font-size: .9rem;
}

/*--------------------------------------
    9. El error, debajo del campo
--------------------------------------*/
/* El aspecto lo da app.css (.parsley-errors-list, .parsley-error). Aquí sólo el sitio: el
   mensaje se coloca dentro del .form-group, debajo del control, para que al aparecer no mueva el
   campo de abajo ni caiga dentro de un .input-group. */
.wg-form .form-group .parsley-errors-list {
    margin-top: .2rem;
    font-size: .72rem;
    line-height: 1.15;
}

.wg-form .form-group .parsley-errors-list > li {
    padding-left: 0;
}

.wg-form .form-group .parsley-errors-list > li:before {
    content: none;
}

/* Un campo con error dentro de un .input-group: el borde rojo tiene que quedar por encima del
   addon, o el grupo lo tapa. */
.wg-form .input-group > .parsley-error {
    position: relative;
    z-index: 2;
}

/*--------------------------------------
    10. La cabecera y el pie del formulario
--------------------------------------*/

/* La cabecera que arma showModal(). No se puede tocar esa función —la usan todas las pantallas—,
   así que opera.js le pone la clase `wg-modal` al modal recién creado y desde aquí se le da peso:
   el título más grande y el cuerpo sin padding, porque los paneles y el pie ya traen el suyo. */
.wg-modal .modal-header {
    padding: .9rem 1.1rem !important;
    border-bottom: 1px solid var(--wg-border);
    align-items: center;
}

.wg-modal .modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wg-text);
    width: 100%;
}

/* El bloque que arma operatorModalTitle() y que viaja dentro del title de showModal():
   marca, separador, y el título con su subtítulo debajo. */
.wg-modal .wg-modal-head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.wg-modal .wg-modal-head__logo {
    height: 40px;
    width: auto;
    flex: 0 0 auto;
}

.wg-modal .wg-modal-head__sep {
    width: 1px;
    align-self: stretch;
    min-height: 40px;
    background-color: var(--wg-border-2);
}

.wg-modal .wg-modal-head__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.wg-modal .wg-modal-head__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wg-text);
}

.wg-modal .wg-modal-head__sub {
    font-size: .85rem;
    font-weight: 400;
    color: var(--wg-text-3);
}

.wg-modal .modal-header .close {
    font-size: 1.5rem;
    opacity: .5;
}

.wg-modal .modal-content {
    border: 0;
    border-radius: var(--wg-radius-lg);
    box-shadow: var(--wg-shadow-pop);
}

.wg-modal .modal-body {
    padding: 1rem 1.1rem 0 !important;
}

/* El pie vive dentro del cuerpo del modal, no en un `.modal-footer`: showModal() sólo dibuja uno
   si se le pide, y el que dibuja trae su propio botón "Cerrar" fijo, que no es el que queremos.
   Así que el pie se saca a sangre con un margen negativo igual al padding del cuerpo, para que
   su banda llegue de borde a borde y cierre las esquinas de abajo del modal. */
.wg-modal .wg-form-footer {
    margin: 1rem -1.1rem 0;
    border-radius: 0 0 var(--wg-radius-lg) var(--wg-radius-lg);
}

/* Los botones del pie, al tamaño del formulario y no al de una barra de herramientas. */
.wg-form-footer .btn {
    padding: .45rem 1.1rem;
    font-size: .9rem;
}

/* Cancelar es neutro: no destruye nada, sólo cierra. El rojo se reserva para lo que borra o
   bloquea, que en esta pantalla vive en el catálogo. */
.wg-form-footer .btn-cancel {
    background-color: var(--wg-surface-2);
    border: 1px solid var(--wg-border-2);
    color: var(--wg-text-2);
}

.wg-form-footer .btn-cancel:hover {
    background-color: var(--wg-hover);
    color: var(--wg-text);
}

/* Mismo sitio y mismo orden en todos: la nota de obligatorios a la izquierda, y a la derecha
   Guardar y después Cancelar, que es el orden que ya usan las demás pantallas del backoffice. */
.wg-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--wg-border);
    background-color: var(--wg-surface-2);
}

.wg-form-footer .wg-form-footer__note {
    margin-right: auto;
    font-size: .75rem;
    color: var(--wg-danger);
}

/*--------------------------------------
    11. El estatus con color
--------------------------------------*/
/* El select de estatus se pinta del color de su valor. Antes era style="color:#fff" en el select
   y un style por cada <option> para que el desplegable siguiera legible.

   🔴 Por qué la especificidad y los !important. warper-skin.css (línea 221) pinta TODOS los
   selects del backoffice con `.wg-theme select.form-control { color: … !important;
   background-color: var(--wg-surface) !important }`. Esa regla le gana al `.bg-success` de
   Bootstrap —también !important, pero menos específico—, así que el select salía blanco con texto
   oscuro fuera cual fuera el estatus, en operadores y en licenciatarios. Verificado en pantalla el
   2026-10-16. Estas reglas suman `.wg-theme` y la clase del estatus para ganarle, y sólo aplican
   dentro de `.wg-form` y con `wg-status`: la regla de la piel sigue intacta para todo lo demás.

   Sólo `background-color`, no `background`: la piel dibuja la flecha del select con
   `background-image`, y el atajo la borraría.

   Los colores, por token, no a mano: verde de marca, ámbar y rojo de la piel, y el texto con el
   blanco de la superficie. */
.wg-theme .wg-form select.form-control.wg-status {
    color: var(--wg-surface) !important;
}

.wg-theme .wg-form select.form-control.wg-status.bg-success {
    background-color: var(--wg-brand) !important;
}

.wg-theme .wg-form select.form-control.wg-status.bg-warning {
    background-color: var(--wg-warning) !important;
}

.wg-theme .wg-form select.form-control.wg-status.bg-danger {
    background-color: var(--wg-danger) !important;
}

/* El desplegable, legible: las opciones con el fondo y el texto de siempre, no con el color del
   select. */
.wg-theme .wg-form select.form-control.wg-status option {
    background-color: var(--wg-surface);
    color: var(--wg-text);
}

/*--------------------------------------
    12. La lista con scroll propio
--------------------------------------*/
/* Una tabla que puede ser larga dentro de un modal —los operadores que va a apagar una cascada, en
   licenciatarios— se mete en .wg-scroll-list: alto fijo y su propio scroll, para que con cincuenta
   filas el modal no crezca y los botones sigan a la vista. La cabecera se queda fija al bajar. */
.wg-form .wg-scroll-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius);
}

.wg-form .wg-scroll-list .table {
    margin-bottom: 0;
}

.wg-form .wg-scroll-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/*--------------------------------------
    13. El campo de imagen
--------------------------------------*/
/* Un campo que sube una imagen (los logos y el favicon de Subdominios) es un campo más: .form-group
   > label + .input-group con su icono y el <input type="file"> como .form-control. Debajo, la vista
   previa: la imagen guardada (de la CDN) o la que se acaba de elegir, entera y centrada, sin
   deformarla. En la consulta no hay campo de archivo, sólo la vista previa. */
.wg-form .wg-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    margin-top: .375rem;
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius);
    background-color: var(--wg-surface-2);
    overflow: hidden;
}

.wg-form .wg-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Sin imagen todavía: la caja vacía dice que no hay, en vez de un ícono de imagen rota. */
.wg-form .wg-image-preview img:not([src]),
.wg-form .wg-image-preview img[src=""] {
    display: none;
}

.wg-form .wg-image-preview .wg-image-empty {
    color: var(--wg-text-3);
    font-size: .75rem;
}

.wg-form .wg-image-preview img:not([src=""]) + .wg-image-empty {
    display: none;
}

/* El <input type="file"> con el alto y la letra del estándar: el botón del navegador no se
   estira. */
.wg-form input[type="file"].form-control {
    padding-top: .3rem;
    font-size: .8125rem;
}