/* ===========================================================================
   data21-components.css - TEMA DATA21 2026
   ---------------------------------------------------------------------------
   QUE ES ESTE FICHERO
   Cuarta hoja del tema (tokens -> layout -> forms -> COMPONENTS -> shell).
   Reimplementa el aspecto de la maqueta aprobada
   (.superpowers/brainstorm/50266-1788770755/maqueta.html, bloque "DESPUES")
   sobre las clases que el HTML del panel YA usa. El marcado no cambia.

   CLASES QUE CUBRE
     A  Botones ....... .btn .btn-default .btn-primary .btn-success .btn-info
                        .btn-warning .btn-danger .btn-inverse .btn-purple
                        .btn-pink .btn-sm .btn-xs .btn-icon .btn-icon-mini
                        .btn-round .btnDoc .btn-group .waves-effect
     B  Grid .......... .flexigrid y sus subcomponentes (tDiv/tDiv2/fbutton/
                        btnseparator/sDiv/sDiv2/flexi_div_busqueda/qsbox/
                        select[name=qtype]/hDiv/th/bDiv/td/erow/trSelected/
                        pDiv/pDiv2/pButton/mDiv)
     B5 Tablas ....... .table .table-striped .table-hover .table-responsive
     C  Pestanas ...... .nav.nav-tabs .tabs li.tab .tab-content
     D  Modales ....... .modal-content .modal-header .modal-body .modal-footer
                        .modal-title .close
     E  Avisos ........ .alert .alert-* .label .label-* .dropdown-menu
                        .text-muted .text-dark .progress

   FRONTERAS (contrato anti-solape del encargo)
     - PROHIBIDA cualquier regla que contenga #botonesEdicion (es de layout).
     - No se declara .page-title-alt ni su color (es de layout): el unico punto
       de roce, .text-muted, se escribe con :not(.page-title-alt).
     - No se tocan .form-control, .control-label, .checkbox, .radio,
       .input-group ni select2 (son de forms). El buscador del grid
       (.qsbox / select[name=qtype]) SI es de este fichero.
     - No se toca .card-box, .page-title, .content-page, .row, .col-*,
       utilidades de margen y padding (m-.. y p-..), topbar, sidebar ni footer.

   USO DE !important
     Solo donde esta anotado. Tres motivos legitimos, cada uno comentado:
       (a) vencer un style="" inline que escribe flexigrid.js o el propio HTML,
       (b) vencer un !important previo de components.css / core.css /
           flexigrid.css / bootstrap.min.css (parcheado),
       (c) devolver el contraste de la fila seleccionada (es funcional).
     Fuera de esos casos se gana por especificidad y por orden de carga.

   NO SE EDITA ningun CSS existente: esta hoja carga la ultima del <head>.
   Borrar el bloque de <link> del tema en cabecera.php revierte todo.
   =========================================================================== */


/* ===========================================================================
   A - BOTONES
   maqueta 143-151: radio 6px, padding 10px 18px, peso 600, elevacion al hover.
   components.css:28 los deja en radio 3px y pinta TODOS los .btn-* con
   background-color / border / color !important: de ahi los !important de esta
   seccion (motivo b).
   =========================================================================== */

.btn{
  border-radius:var(--d21-r-s);
  padding:10px 18px;
  font-family:var(--d21-fuente);
  font-size:var(--d21-txt-campo);
  font-weight:600;
  line-height:1.4;
  border-width:1px;
  border-style:solid;
  box-shadow:var(--d21-sombra-btn);
  transition:transform var(--d21-t-btn),box-shadow var(--d21-t-btn),
             background-color var(--d21-t-btn),border-color var(--d21-t-btn);
  outline:none !important;   /* (b) components.css:28 ya lo lleva: se conserva */
}

/* ROMPEDOR #1 - PROHIBIDO display:inline-flex en .btn.
   La maqueta lo hace (linea 46) pero en el panel 55 botoneras usan
   .btn-group-justified, que exige display:table-cell en los hijos
   (bootstrap.min.css). Se conserva el inline-block de Bootstrap y el icono se
   separa con margin, no con gap. */
.btn > i.fa,
.btn > i[class^="icon-"],
.btn > i[class*=" icon-"],
.btn > i[class^="ti-"]{margin-right:6px}
.btn > i.fa:only-child,
.btn > i[class^="icon-"]:only-child,
.btn > i[class*=" icon-"]:only-child,
.btn > i[class^="ti-"]:only-child{margin-right:0}

.btn:hover,.btn:focus{transform:translateY(-1px);box-shadow:var(--d21-sombra-alta)}
.btn:active,.btn.active{transform:translateY(0);box-shadow:var(--d21-sombra-btn)}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{transform:none;box-shadow:none}
/* foco accesible: components.css mata el outline con !important, asi que la
   senal de foco se devuelve con el mismo halo naranja que usan los campos */
.btn:focus-visible{box-shadow:0 0 0 3px var(--d21-marca-halo),var(--d21-sombra-alta)}

/* Grupos de botones UNIDOS (.btn-group sin .btn-group-justified): sus hijos son
   float:left, asi que si la suma no cabe en la columna el grupo se parte en
   varias filas y un boton queda suelto (pasa en documentos.php, col estrecha).
   Se aprieta el padding lateral solo ahi: dentro de un grupo unido la propia
   union ya agrupa visualmente, no hace falta el aire de un boton aislado.
   El :not() deja fuera las 55 botoneras .btn-group-justified (y #botonesEdicion,
   que es de data21-layout.css). */
.btn-group:not(.btn-group-justified) > .btn{padding-left:14px;padding-right:14px}

/* tamanos: los 82 .btn-sm viven dentro de tablas y filas, no se inflan */
.btn.btn-sm{padding:6px 12px;font-size:var(--d21-txt-mini);line-height:1.4}
.btn.btn-xs{padding:4px 10px;font-size:12px;line-height:1.4}
.btn.btn-lg{padding:12px 24px;font-size:15px;border-radius:var(--d21-r-s)}

/* --- colores (maqueta 146-151) --------------------------------------------
   components.css escribe "background-color:#xxx !important" y
   "border:1px solid #xxx !important" en cada variante: hace falta !important
   (motivo b). El border-color posterior gana al shorthand border. */
.btn-success,.btn-success:hover,.btn-success:focus,.btn-success:active,
.btn-success.active,.btn-success.focus,.open > .dropdown-toggle.btn-success{
  background-color:var(--d21-exito) !important;
  border-color:var(--d21-exito) !important;
  color:var(--d21-texto-inv) !important;
}
.btn-danger,.btn-danger:hover,.btn-danger:focus,.btn-danger:active,
.btn-danger.active,.btn-danger.focus,.open > .dropdown-toggle.btn-danger{
  background-color:var(--d21-peligro) !important;
  border-color:var(--d21-peligro) !important;
  color:var(--d21-texto-inv) !important;
}
/* NARANJA DE MARCA: la maqueta pinta asi el boton "Click para agregar".
   Sustituye al cian #34d3eb de la plantilla. */
.btn-info,.btn-info:active,.btn-info.active,.btn-info.focus,
.open > .dropdown-toggle.btn-info{
  background-color:var(--d21-marca) !important;
  border-color:var(--d21-marca) !important;
  color:var(--d21-texto-inv) !important;
}
.btn-info:hover,.btn-info:focus{
  background-color:var(--d21-marca-oscuro) !important;
  border-color:var(--d21-marca-oscuro) !important;
  color:var(--d21-texto-inv) !important;
}
/* btn-default: hoy es TEAL #5fbeaa !important (components.css:46-58) y es el
   "Cerrar" de 17 modales. Vuelve a ser el boton neutro de la maqueta. */
.btn-default,.btn-default:active,.btn-default.active,.btn-default.focus,
.open > .dropdown-toggle.btn-default{
  background-color:var(--d21-superficie) !important;
  border:1px solid var(--d21-borde-fuerte) !important;
  color:var(--d21-texto-suave) !important;
  box-shadow:none;
}
.btn-default:hover,.btn-default:focus{
  background-color:var(--d21-superficie-4) !important;
  border:1px solid var(--d21-texto-tenue) !important;
  color:var(--d21-texto) !important;
}
/* btn-primary: el "Guardar" de los modales. Pasa de #5d9cec al #337ab7 de la
   paleta declarada. NO se cambia a verde: exigiria tocar 22 lineas de HTML en
   6 ficheros de modales y esta fuera del encargo (DECISION PENDIENTE #3). */
.btn-primary,.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary.active,.btn-primary.focus,.open > .dropdown-toggle.btn-primary{
  background-color:var(--d21-info) !important;
  border-color:var(--d21-info) !important;
  color:var(--d21-texto-inv) !important;
}
.btn-warning,.btn-warning:hover,.btn-warning:focus,.btn-warning:active,
.btn-warning.active,.btn-warning.focus,.open > .dropdown-toggle.btn-warning{
  background-color:var(--d21-aviso-claro) !important;
  border-color:var(--d21-aviso-claro) !important;
  color:#6b4a05 !important;   /* ambar claro: texto oscuro para que sea legible */
}
.btn-inverse,.btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,
.btn-inverse.active,.btn-inverse.focus,.open > .dropdown-toggle.btn-inverse{
  background-color:var(--d21-oscuro) !important;
  border-color:var(--d21-oscuro) !important;
  color:var(--d21-texto-inv) !important;
}
/* .btn-pink (#fb6d9d) y .btn-purple (#7266ba) NO SON RESIDUALES: son colores de
   otra marca dentro del panel ya rediseñado, y uno de ellos está en la primera
   pantalla después del login. Medido en vivo:
     · rgb(251,109,157) en panel.php  → "A.btn.btn-rounded.btn-pink" (el "Ir" de
       Biblioteca de medios) y "I.icon-dinner.fa.fa-picture-o" de su tarjeta;
     · rgb(114,102,186) en documentos.php → "BUTTON.btnTree.btn.btn-purple"
       ("Mover").
   Como no se puede tocar el HTML de esas vistas, las dos clases se REMAPEAN a
   la paleta declarada: rosa → naranja de marca (es un botón de navegación
   destacado del dashboard), morado → azul informativo (es una acción de
   reorganización, no destructiva). Así el barrido de color de las 10 vistas
   deja de tener colores fuera de paleta. */
.btn-pink,.btn-pink:hover,.btn-pink:focus,.btn-pink:active,
.btn-pink.active,.btn-pink.focus,.open > .dropdown-toggle.btn-pink{
  background-color:var(--d21-marca) !important;
  border-color:var(--d21-marca) !important;
  color:var(--d21-texto-inv) !important;
}
.btn-purple,.btn-purple:hover,.btn-purple:focus,.btn-purple:active,
.btn-purple.active,.btn-purple.focus,.open > .dropdown-toggle.btn-purple{
  background-color:var(--d21-info) !important;
  border-color:var(--d21-info) !important;
  color:var(--d21-texto-inv) !important;
}
/* mismo remapeo para el icono de la tarjeta del dashboard, que components.css
   pinta con .text-pink / .text-purple */
.text-pink{color:var(--d21-marca) !important}
.text-purple{color:var(--d21-info) !important}

/* --- EXCEPCION DOCUMENTADA: .btnDoc ---------------------------------------
   19 de los 32 .btn-info son la columna de descarga de Word de
   clientes_documentos.php. En naranja quedarian 19 botones apilados y el
   acento dejaria de acentuar. Se les da tratamiento de boton-icono neutro con
   el icono en naranja, reutilizando .btn-icon. DECISION PENDIENTE DE CLIENTE #2.

   COMPROBADO EN EL CODIGO (no como decia el encargo): .btn-icon tiene 30 usos,
   no 26, y NO todos son iconos sueltos ni neutros. En 5 ficheros de json/ hay
   "<a class='btn btn-danger btn-icon btn-icon-mini btn-round'><i></i> Ver PDF</a>",
   es decir .btn-icon CON TEXTO y con variante de color propia. Por eso:
     - el color neutro se aplica a .btnDoc y a los .btn-icon que NO traen ya
       otra variante de color (se excluyen con :not), de modo que los "Ver PDF"
       rojos siguen siendo rojos;
     - la geometria usa min-width en vez de width, asi un .btn-icon con texto
       crece en vez de recortarse. Con un solo icono queda igualmente cuadrado. */
.btn.btnDoc,.btn.btnDoc:active,
.btn.btn-icon:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-primary):not(.btn-inverse):not(.btn-purple):not(.btn-pink),
.btn.btn-icon:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-primary):not(.btn-inverse):not(.btn-purple):not(.btn-pink):active{
  background-color:var(--d21-superficie) !important;
  border:1px solid var(--d21-borde-fuerte) !important;
  color:var(--d21-marca) !important;
  box-shadow:none;
}
.btn.btnDoc:hover,.btn.btnDoc:focus,
.btn.btn-icon:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-primary):not(.btn-inverse):not(.btn-purple):not(.btn-pink):hover,
.btn.btn-icon:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-primary):not(.btn-inverse):not(.btn-purple):not(.btn-pink):focus{
  background-color:var(--d21-marca-suave) !important;
  border-color:var(--d21-marca-borde) !important;
  color:var(--d21-marca-oscuro) !important;
}
/* geometria (si que vale para todos los .btn-icon, con o sin texto) */
.btn.btn-icon,.btn.btnDoc{
  min-width:36px;height:36px;
  padding:0 10px;
  line-height:34px;       /* 36 - 2px de borde: centra el icono sin usar flex */
  display:inline-block;   /* clientes_documentos.php es un fragmento AJAX: no
                             siempre llega con el .btn{display:inline-block} de
                             Bootstrap cargado, y sin esto el ancho no aplica */
  text-align:center;
}
.btn.btn-icon > i,.btn.btnDoc > i{font-size:15px;line-height:1}
.btn.btn-icon > i:only-child,.btn.btnDoc > i:only-child{margin-right:0}
.btn.btn-icon-mini{min-width:28px;height:28px;padding:0 8px;font-size:12px;line-height:26px}
.btn.btn-round{border-radius:var(--d21-r-pill)}

/* --- grupos de botones -----------------------------------------------------
   No se toca el display de .btn ni el de .btn-group (.btn-group-justified
   depende de display:table / table-cell). Solo se limpia la sombra interior
   para que dos botones pegados no dibujen doble borde.
   FRONTERA 1: aqui NO hay ninguna regla con #botonesEdicion; esa barra la
   monta data21-layout.css, incluido el padding de sus botones. Por eso aqui NO
   se ajusta el padding dentro de .btn-group aunque el padding aprobado (18px
   lateral) haga que en documentos.php el grupo de 4 botones "Nuevo/Renombrar/
   Eliminar/Mover" pase a dos lineas dentro de su col-sm-4. Es el efecto del
   boton mas grande que pide la maqueta, no un fallo de cascada. */
.btn-group > .btn{box-shadow:none}
.btn-group > .btn:hover{box-shadow:var(--d21-sombra-btn)}
/* ⚠ EL :focus NO PUEDE ENTRAR EN LA REGLA DE ARRIBA.
   Con ".btn-group > .btn:hover,.btn-group > .btn:focus{box-shadow:sombra-btn}"
   (0,3,0) se pisaba el ".btn:focus-visible{box-shadow:0 0 0 3px halo}" de la
   línea 91 (0,2,0), así que "Volver" y "Guardar" — las dos acciones
   principales de las ~58 vistas de edición, dentro de #botonesEdicion — se
   quedaban SIN señal de foco de teclado (medido con Tab: outline 'none 0px' y
   box-shadow igual al de reposo). Se devuelve el halo con la misma
   especificidad que la regla que lo tapaba. Alcance: #botonesEdicion y las 55
   botoneras .btn-group-justified.
   No es una regla sobre #botonesEdicion (FRONTERA 1 respetada): el selector es
   .btn-group, que es de este fichero; #botonesEdicion la hereda por ser
   .btn-group, igual que hereda .btn. */
.btn-group > .btn:focus-visible{
  box-shadow:0 0 0 3px var(--d21-marca-halo),var(--d21-sombra-alta);
  position:relative;   /* el halo se dibuja por encima del botón vecino pegado */
  z-index:2;
}
.btn-group.open .dropdown-toggle{box-shadow:none}

/* --- documentos.php · barra de DIRECTORIOS (.btnTree) ----------------------
   PROBLEMA MEDIDO (1440px): cuatro botones SÓLIDOS de cuatro colores distintos
   —verde "Nuevo", naranja de marca "Renombrar", rojo "Eliminar", morado
   #7266ba "Mover"— pegados dentro de un col-sm-4 de ~359px útiles. Sumaban
   335+76 = 411px, así que el grupo se partía en tres filas (y=170 / 211 / 252),
   "Mover" quedaba huérfano con border-radius "0 6px 6px 0" (esquina izquierda
   cuadrada sin nada a su izquierda) y los dos chevrones caían sueltos y
   oscuros. Además el naranja de marca se gastaba en "Renombrar", una acción
   secundaria, y el resto del panel ya usa pastilla clara + punto de color.

   ARREGLO: mismo lenguaje que la barra de acciones del grid (bloque B.1):
   pastilla clara, borde, texto normal y un punto de color que codifica la
   acción — verde alta, azul edita, rojo destruye, teal reordena. Los botones
   dejan de estar pegados (float:none + margin), así que ya no hay radios
   partidos ni botón huérfano: si la fila no cabe, envuelve como una rejilla de
   acciones y se sigue leyendo como una barra.
   "Eliminar" lleva además el rótulo en rojo, igual que en el grid: el rojo
   significa DESTRUIR aquí y allí.
   !important: motivo (b) — components.css escribe background-color/border/color
   con !important en cada .btn-*, y este selector (0,2,0) los vence. */
/* Los dos .btn-group de la tarjeta (4 acciones + 2 chevrones) se funden en una
   sola tira: con display:contents sus hijos pasan a ser hijos directos de la
   tarjeta y fluyen juntos, así que caben en 2 filas en vez de 3 y el bloque
   vuelve a leerse como UNA barra. Regla aparte y con :has(): si el navegador no
   lo soporta se queda la retícula 2x2 + chevrones de abajo, que también es
   correcta (degradación segura, igual que la capa B de data21-forms.css). */
.card-box .btn-group:has(> .btnTree){
  display:contents;
}
.btn-group > .btn.btnTree{
  float:none;
  display:inline-block;
  vertical-align:top;
  margin:0 6px 6px 0 !important;          /* mata el margin-left:-1px de bootstrap */
  padding:7px 10px !important;
  border-radius:var(--d21-r-s) !important; /* mata el "0 6px 6px 0" del hijo del medio */
  font-size:var(--d21-txt-sm);
  font-weight:500;
  line-height:1.5;
  background-color:var(--d21-superficie) !important;
  border:1px solid var(--d21-borde-fuerte) !important;
  color:var(--d21-texto) !important;
  box-shadow:var(--d21-sombra-btn);
}
.btn-group > .btn.btnTree::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  margin-right:7px;
  vertical-align:middle;
  position:relative;top:-1px;
  background:var(--d21-texto-tenue);
}
.btn-group > .btn.btnTree:hover,
.btn-group > .btn.btnTree:focus{
  background-color:var(--d21-superficie-4) !important;
  border-color:var(--d21-texto-tenue) !important;
  color:var(--d21-texto) !important;
}
/* id (1,0,0) vence al 0,2,1 del ::before de arriba */
#btnMas::before{background:var(--d21-exito-claro)}
#btnRename::before{background:var(--d21-info)}
#btnElimina::before{background:var(--d21-peligro-claro)}
#btnMover::before{background:var(--d21-teal)}
#btnElimina{color:var(--d21-peligro) !important}
/* los dos chevrones son iconos puros: ni punto ni rótulo */
.btn-group > .btn.btnOrden{padding:7px 9px !important}
.btn-group > .btn.btnOrden::before{display:none}
.btn-group > .btn.btnOrden > i{color:var(--d21-texto-suave);margin:0}

/* waves.js: solo se asegura que el ripple no se salga del radio nuevo.
   NO se tocan .waves-effect / .waves-light (son del plugin). */
.btn.waves-effect{position:relative;overflow:hidden}


/* ===========================================================================
   B - GRID (FLEXIGRID)
   La tabla, la barra de acciones, el buscador y el paginador NO son Bootstrap:
   los genera assets/plugins/flexigrid/flexigrid.js en runtime. La vista solo
   escribe <table class="flex1" id="flex1" style="display:none">.
   flexigrid.css:41-42 fuerza Arial 12px !important: hace falta !important para
   devolver la tipografia del tema (motivo b).
   =========================================================================== */

.flexigrid{
  font-family:var(--d21-fuente) !important;   /* (b) flexigrid.css:41 */
  font-size:var(--d21-txt-campo) !important;  /* (b) flexigrid.css:42 !important */
  color:var(--d21-texto);
  border:0;
  position:relative;
  overflow:visible;
}

/* --- B.1 BARRA DE ACCIONES (maqueta .acciones + .acc + .punto) -------------
   Marcado real (flexigrid.js:1180-1190):
     <div class="tDiv"><div class="tDiv2">
       <div class="fbutton"><div><span class="add" style="padding-left:20px">Nuevo</span></div></div>
   El TEXTO va DENTRO del <span> y el icono es un PNG de 45-49 KB puesto como
   background del span. El span pasa a pildora con punto de color: se ahorran
   ~140 KB de imagenes. */
.flexigrid div.tDiv{
  border:0;
  overflow:visible;
  margin-bottom:var(--d21-e4);
  padding-bottom:var(--d21-e4);
  border-bottom:1px solid var(--d21-borde);
  display:flex;
  align-items:center;
  gap:var(--d21-e2);
  flex-wrap:wrap;
}
.flexigrid div.tDiv2{
  float:none;clear:none;padding:0;
  display:flex;align-items:center;gap:var(--d21-e2);flex-wrap:wrap;
}
.flexigrid div.fbutton{
  float:none;
  display:inline-flex;
  align-items:center;
  padding:0;
  border:1px solid var(--d21-borde);
  border-radius:var(--d21-r-s);
  background:var(--d21-superficie);
  transition:border-color var(--d21-t),background-color var(--d21-t),color var(--d21-t);
}
.flexigrid div.fbutton:hover,.flexigrid div.fbutton.fbOver{
  padding:0;
  border:1px solid var(--d21-borde-fuerte);
  background:var(--d21-superficie-4);
}
.flexigrid div.fbutton div,
.flexigrid div.fbutton:hover div,
.flexigrid div.fbutton.fbOver div{
  float:none;padding:0;border:0;display:flex;align-items:center;
}
.flexigrid div.fbutton span{
  float:none;
  display:inline-flex;
  align-items:center;
  gap:var(--d21-e2);
  padding:7px var(--d21-e3) !important;  /* (a) vence al paddingLeft:20 inline de flexigrid.js:1186 */
  background-image:none !important;      /* (a)+(b) vence al sprite PNG de flexigrid.css:4-29 y al inline de bimage */
  font-size:var(--d21-txt-sm);
  font-weight:500;
  color:var(--d21-texto-suave);
  white-space:nowrap;
  cursor:pointer;
}
.flexigrid div.fbutton:hover span,.flexigrid div.fbutton.fbOver span{color:var(--d21-texto)}
/* el punto de color de la maqueta, en lugar del sprite */
.flexigrid div.fbutton span::before{
  content:"";
  width:7px;height:7px;flex:0 0 7px;
  border-radius:50%;
  background:var(--d21-texto-tenue);
}
/* Mapa de color de los puntos. Dos correcciones sobre el primer reparto:
     · .imprimir tenía --d21-texto-suave, que es EXACTAMENTE el mismo gris del
       punto de reserva (el ::before sin clase reconocida): "Imprimir" se leía
       como un botón deshabilitado. Pasa al azul de plantilla, que es el color
       de "acción que no modifica datos".
     · .copiar tenía el naranja de marca. El acento de marca se reserva para la
       acción principal; "Duplicar" es secundaria y en la maqueta ese punto es
       cian. Pasa a --d21-teal, el único cian de la paleta declarada.
   El punto de reserva se queda en --d21-texto-tenue: así sigue siendo el único
   gris de la barra y cualquier clase nueva se distingue a simple vista. */
.flexigrid div.fbutton .add::before{background:var(--d21-exito-claro)}
.flexigrid div.fbutton .editar::before{background:var(--d21-info)}
.flexigrid div.fbutton .delete::before,
.flexigrid div.fbutton .less::before{background:var(--d21-peligro-claro)}
.flexigrid div.fbutton .copiar::before{background:var(--d21-teal)}
.flexigrid div.fbutton .enviar::before{background:var(--d21-info)}
.flexigrid div.fbutton .imprimir::before{background:var(--d21-info-claro)}

/* "Eliminar" es la única acción destructiva de la barra: además del punto rojo
   lleva el rótulo en rojo, para que se distinga de "Nuevo"/"Editar"/"Duplicar"
   sin depender de un círculo de 7px. Así el rojo significa lo mismo en el
   listado que en documentos.php (ver el bloque .btnTree más abajo). */
.flexigrid div.fbutton span.delete,
.flexigrid div.fbutton span.less{color:var(--d21-peligro)}
.flexigrid div.fbutton:hover span.delete,
.flexigrid div.fbutton.fbOver span.delete,
.flexigrid div.fbutton:hover span.less,
.flexigrid div.fbutton.fbOver span.less{color:var(--d21-peligro)}
.flexigrid div.btnseparator{display:none}

/* --- B.2 BUSCADOR (maqueta .buscador) -------------------------------------
   VERIFICADO EN flexigrid.js:1565 -> $(g.tDiv).append(g.sDiv): el .sDiv es
   HIJO del .tDiv, no hermano. Por eso NO hace falta position:absolute (el plan
   A del encargo): basta con margin-left:auto dentro del flex del .tDiv, que es
   justo lo que hace la maqueta (.buscador{margin-left:auto}) y ademas no puede
   solaparse con las acciones cuando hay muchas.
   El HTML lo genera flexigrid.js:1542 con estilos INLINE (top:-5px,
   height:39px, margin-bottom:-7px, height:25px del select) y el input no lleva
   .form-control: los !important de aqui son motivo (a), y el height ademas
   vence al "height:23px !important" de flexigrid.css:250 (motivo b). */
.flexigrid div.sDiv{
  border:0;overflow:visible;position:static;
  margin-left:auto;    /* lleva el buscador al extremo derecho de la barra */
  width:auto;
}
.flexigrid div.sDiv2{
  float:none !important;clear:none !important;
  width:auto !important;
  padding:0 !important;margin:0 !important;
  top:0 !important;height:auto !important;position:static !important;
}
.flexigrid .flexi_div_busqueda{
  position:static;top:0;
  display:flex;align-items:center;gap:var(--d21-e2);
}
.flexigrid .flexi_div_busqueda input.qsbox,
.flexigrid div.sDiv2 input.qsbox{
  width:230px !important;
  height:var(--d21-control-h-sm) !important;
  top:0 !important;position:static !important;
  border:1px solid var(--d21-borde-fuerte) !important;
  border-radius:var(--d21-r-s);
  padding:0 var(--d21-e3) !important;
  font-size:var(--d21-txt-sm);
  font-family:var(--d21-fuente);
  color:var(--d21-texto);
  background:var(--d21-superficie);
  transition:border-color var(--d21-t),box-shadow var(--d21-t);
}
.flexigrid .flexi_div_busqueda input.qsbox::placeholder{color:var(--d21-texto-tenue)}
.flexigrid .flexi_div_busqueda input.qsbox:hover{border-color:var(--d21-texto-tenue) !important}
.flexigrid .flexi_div_busqueda input.qsbox:focus{
  border-color:var(--d21-marca) !important;
  box-shadow:0 0 0 3px var(--d21-marca-halo);
  outline:0;
}
.flexigrid .flexi_div_busqueda select[name=qtype],
.flexigrid div.sDiv2 select[name=qtype]{
  width:150px !important;
  height:var(--d21-control-h-sm) !important;
  margin-top:0 !important;top:0 !important;position:static !important;
  padding:0 var(--d21-e2) !important;
  border:1px solid var(--d21-borde-fuerte) !important;
  border-radius:var(--d21-r-s);
  font-size:var(--d21-txt-sm);
  font-family:var(--d21-fuente);
  color:var(--d21-texto);
  background:var(--d21-superficie);
}
.flexigrid .flexi_div_busqueda select[name=qtype]:focus{
  border-color:var(--d21-marca) !important;
  box-shadow:0 0 0 3px var(--d21-marca-halo);
  outline:0;
}
/* por debajo de 768px el buscador baja a su propia linea, alineado a la izda. */
@media (max-width:767px){
  .flexigrid div.sDiv{margin-left:0;width:100%}
  .flexigrid .flexi_div_busqueda{flex-wrap:wrap}
  .flexigrid .flexi_div_busqueda input.qsbox{width:100% !important;max-width:230px}
}

/* --- B.3 CABECERA Y FILAS (maqueta 176-184) ------------------------------- */
.flexigrid div.hDiv{
  background:var(--d21-superficie-2);
  border:0;
  border-bottom:1px solid var(--d21-borde-fuerte);
  border-radius:var(--d21-r-s) var(--d21-r-s) 0 0;
  position:relative;
}
.flexigrid div.hDiv table{border-right:0}
.flexigrid div.hDiv th,div.colCopy{
  height:auto;
  background:transparent;
  font-weight:700;
  font-size:var(--d21-txt-micro);
  text-transform:uppercase;
  /* la maqueta pide .6px, pero el colModel de faq.php da 50px a la columna
     "Visible" y VISIBLE en mayusculas no cabe: .4px es el maximo que entra
     sin recortar el rotulo. La diferencia no se aprecia. */
  letter-spacing:.4px;
  /* --d21-texto-suave se oscureció a #5a6472 en data21-tokens.css justamente
     por esta celda: a 11px/700 sobre el #f7f9fb del .hDiv el valor anterior
     (#6b7683) daba 4,38:1 y no llegaba al 4,5:1 de AA (11px en negrita NO
     califica como "texto grande"). Ahora da 5,68:1. */
  color:var(--d21-texto-suave);
  border:0;
}
/* La línea de separación se REFUERZA en el .hDiv (más arriba, border-bottom
   pasa de --d21-borde a --d21-borde-fuerte) y NO se pone también en el <th>:
   la <table> interior de flexigrid se dibuja dentro del .hDiv, así que las dos
   líneas quedaban a 1px una de otra y a 4x se veía un doble filete.
   Con una sola línea a --d21-borde-fuerte la cabecera se despega de los datos
   sin depender del fondo #f7f9fb, que contra el blanco de la tarjeta es una
   diferencia de luminancia mínima. */
div.colCopy{
  font-family:var(--d21-fuente);
  background:var(--d21-superficie-2);
  border:1px solid var(--d21-borde);
}
/* Padding lateral de la rejilla: 6px. El colModel de cada vista fija el ancho
   de la columna en px (faq.php da 50px a "Visible"), asi que el rotulo en
   mayusculas de la maqueta solo cabe con este padding. Debe ser IDENTICO en
   <th> y en <td> o la cabecera deja de alinear con la celda. */
.flexigrid div.hDiv th div{padding:var(--d21-e3) 6px}
.flexigrid div.hDiv th.sorted{background:transparent;border-bottom:2px solid var(--d21-marca)}
.flexigrid div.hDiv th.sorted div{padding-bottom:var(--d21-e3);border-bottom:0}
.flexigrid div.hDiv th.thOver{background:var(--d21-superficie-3)}
.flexigrid div.hDiv th.thOver div,
.flexigrid div.hDiv th.sorted.thOver div{border-bottom:0;padding-bottom:var(--d21-e3)}
.flexigrid div.hDiv th.thMove{background:var(--d21-superficie-3);color:transparent}

.flexigrid div.bDiv{
  background:var(--d21-superficie);
  border:0;
  overflow:auto;
}
.flexigrid div.bDiv table{border-bottom:0;margin-bottom:0}
.flexigrid div.bDiv td{
  border-bottom:1px solid var(--d21-borde-suave);
  border-left:0;border-right:0;
  color:var(--d21-texto);
  background:transparent;
  vertical-align:middle;
}
.flexigrid div.bDiv td div{padding:var(--d21-e3) 6px;border:0}
/* celdas con foto: la columna "Foto" mide 50px en el colModel; la miniatura de
   36px necesita menos aire vertical que el texto */
.flexigrid div.bDiv td div:has(img){padding:6px 5px}
.flexigrid tr.erow td{background:transparent;border-bottom:1px solid var(--d21-borde-suave)}
.flexigrid tr td.sorted,
.flexigrid tr.erow td.sorted{background:transparent;border-bottom:1px solid var(--d21-borde-suave)}
.flexigrid div.bDiv tr{transition:background-color .1s ease}
.flexigrid div.bDiv tr:hover td,
.flexigrid div.bDiv tr.trOver td,
.flexigrid div.bDiv tr:hover td.sorted,
.flexigrid div.bDiv tr.trOver td.sorted{
  background:var(--d21-fila-hover);
  border-bottom:1px solid var(--d21-borde-suave);
  border-left:0;
}
/* SELECCION DE FILA - es FUNCIONAL: se marca la fila y luego se pulsa
   Editar/Eliminar en la barra. Como el hover baja a #fafbfd hay que SUBIR el
   contraste de la seleccionada o el usuario deja de ver cual esta elegida.
   (c) + (b): flexigrid.css:543-550 la pinta con selectores de cuatro clases. */
.flexigrid tr.trSelected td,
.flexigrid tr.trSelected td.sorted,
.flexigrid div.bDiv tr.trSelected:hover td,
.flexigrid div.bDiv tr.trSelected:hover td.sorted,
.flexigrid div.bDiv tr.trOver.trSelected td,
.flexigrid div.bDiv tr.trOver.trSelected td.sorted{
  background-color:var(--d21-marca-suave) !important;
  border-bottom:1px solid var(--d21-marca-borde) !important;
  border-left:0 !important;border-right:0 !important;
  color:var(--d21-marca-oscuro);
}
.flexigrid tr.trSelected td:first-child{box-shadow:inset 3px 0 0 var(--d21-marca)}

/* FOTO DE LA FILA (maqueta .mini, 36x36 cuadrada). El tamano va INLINE desde
   PHP (a) y la clase .img-circle es la MISMA que la del avatar de la topbar y
   la del menu lateral: se apunta SOLO al grid, nunca a .img-circle a secas. */
.flexigrid div.bDiv img.img-circle{
  width:36px !important;height:36px !important;
  max-width:36px !important;max-height:36px !important;
  border-radius:var(--d21-r-s) !important;
  object-fit:cover;
  border:1px solid var(--d21-borde);
  vertical-align:middle;
}
/* COLUMNA "ACTIVO" - CRITICO, NO SE OCULTA.
   La maqueta hace .chk{display:none} y pone una pildora estatica, pero aqui es
   un <input type=checkbox> que escribe en base de datos por AJAX
   (comprobar_check_flexi_sin_id, en 25 ficheros de json/). Ocultarlo le
   quitaria al usuario la unica forma de activar/desactivar desde el listado.
   Se conserva el control y se moderniza. DESVIACION DECLARADA #1. */
.flexigrid div.bDiv td input[type="checkbox"]{
  width:17px;height:17px;
  accent-color:var(--d21-exito);
  cursor:pointer;margin:0;vertical-align:middle;
}

/* --- B.4 PAGINADOR (maqueta .paginador) -----------------------------------
   Marcado real (flexigrid.js:1462):
     <div class="pGroup"><div class="pFirst pButton"><span></span></div>...
   Las flechas son GIF de 22x22 puestos como background del DIV .pFirst/.pPrev/
   .pNext/.pLast/.pReload (flexigrid.css:664-690), no del span: por eso el
   background-image:none va en los dos. Se sustituyen por FontAwesome, que ya
   esta cargado (258 usos de .fa en el panel). */
.flexigrid div.pDiv{
  border:0;
  margin-top:var(--d21-e4);
  padding-top:var(--d21-e4);
  border-top:1px solid var(--d21-borde);
  overflow:visible;
  white-space:nowrap;
  color:var(--d21-texto-suave);
  font-size:var(--d21-txt-sm);
}
.flexigrid div.pDiv div.pDiv2{
  margin:0;float:none;width:auto;
  display:flex;align-items:center;gap:var(--d21-e2);flex-wrap:wrap;
}
div.pGroup{
  float:none;background:none;height:auto;margin:0;
  display:flex;align-items:center;gap:var(--d21-e1);
}
.flexigrid div.pDiv .pPageStat,
.flexigrid div.pDiv .pcontrol{
  position:static;top:0;overflow:visible;
  display:flex;align-items:center;gap:var(--d21-e2);
}
.flexigrid div.pDiv .pPageStat{margin-left:auto;color:var(--d21-texto-suave)}
/* (a)+(b) flexigrid.css:619-629 escribe position/top/height/padding con
   !important sobre el input y el select del paginador */
.flexigrid div.pDiv input{
  position:static !important;top:0 !important;
  vertical-align:middle !important;
  height:var(--d21-control-h-sm) !important;
  width:52px;text-align:center;
  border:1px solid var(--d21-borde-fuerte);
  border-radius:var(--d21-r-s);
  padding:0 var(--d21-e1);
  color:var(--d21-texto);
  font-family:var(--d21-fuente);
  font-size:var(--d21-txt-sm);
  background:var(--d21-superficie);
}
.flexigrid div.pDiv input:focus{
  border-color:var(--d21-marca);
  box-shadow:0 0 0 3px var(--d21-marca-halo);
  outline:0;
}
.flexigrid div.pDiv select{
  height:var(--d21-control-h-sm) !important;
  padding:0 var(--d21-e2) !important;
  border:1px solid var(--d21-borde-fuerte);
  border-radius:var(--d21-r-s);
  color:var(--d21-texto);
  font-family:var(--d21-fuente);
  font-size:var(--d21-txt-sm);
  background:var(--d21-superficie);
}
.flexigrid div.pDiv select:focus{
  border-color:var(--d21-marca);
  box-shadow:0 0 0 3px var(--d21-marca-halo);
  outline:0;
}
/* IMPRESCINDIBLE: hoy el hover pasa el boton de 22px a 20px + borde y la fila
   entera SALTA. Se fija a 30x30 tambien en :hover. */
.flexigrid div.pDiv div.pButton{
  float:none;width:30px;height:30px;
  border:1px solid transparent;
  border-radius:var(--d21-r-s);
  background-image:none !important;   /* (b) el GIF esta sobre el div, no sobre el span */
  background-color:transparent;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;
  transition:border-color var(--d21-t),background-color var(--d21-t);
}
.flexigrid div.pDiv div.pButton:hover,
.flexigrid div.pDiv div.pButton.pBtnOver{
  width:30px;height:30px;
  border:1px solid var(--d21-borde-fuerte);
  background-color:var(--d21-superficie-4);
}
.flexigrid div.pDiv div.pButton span,
.flexigrid div.pDiv div.pButton:hover span,
.flexigrid div.pDiv div.pButton.pBtnOver span{
  width:auto;height:auto;float:none;border:0;
  background-image:none !important;   /* (b) por si el sprite cae en el span */
  font-family:FontAwesome;
  font-size:12px;
  line-height:1;
  color:var(--d21-texto-suave);
  display:block;
}
.flexigrid div.pDiv div.pButton:hover span{color:var(--d21-texto)}
.flexigrid .pFirst  span::before{content:"\f049"}
.flexigrid .pPrev   span::before{content:"\f053"}
.flexigrid .pNext   span::before{content:"\f054"}
.flexigrid .pLast   span::before{content:"\f050"}
.flexigrid .pReload span::before{content:"\f021"}
.flexigrid .pSearch span::before{content:"\f002"}
.flexigrid .pReload.loading span{animation:d21-giro 1s linear infinite}
@keyframes d21-giro{to{transform:rotate(360deg)}}

/* titulo opcional del grid */
.flexigrid div.mDiv{
  background:transparent;border:0;
  font-weight:700;color:var(--d21-texto);
}
.flexigrid div.mDiv div{padding:0 0 var(--d21-e3)}


/* ===========================================================================
   B.5 - TABLAS BOOTSTRAP (10 vistas usan class="table table-striped")
   Mismo aspecto que el grid. components.css:1054 pinta la zebra y el hover en
   #f4f8fb !important: hace falta !important (motivo b).
   =========================================================================== */
.table{margin-bottom:0}
/* AVISO: clientes_documentos.php:29 y clientes_riesgos.php:37 llevan un <style>
   LOCAL con ".table > thead > tr > th{background:#F5F5F6 !important}". Ese gris
   es casi el mismo que --d21-superficie-2 (#f7f9fb) y esta en el HTML de la
   vista, que no es de este encargo: se deja ganar, no se sube especificidad. */
.table > thead > tr > th{
  background:var(--d21-superficie-2);
  border-bottom:1px solid var(--d21-borde);
  border-top:0;
  font-size:var(--d21-txt-micro);
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--d21-texto-suave);
  font-weight:700;
  padding:var(--d21-e3);
  vertical-align:middle;
}
.table > thead > tr > th:first-child{border-radius:var(--d21-r-s) 0 0 0}
.table > thead > tr > th:last-child{border-radius:0 var(--d21-r-s) 0 0}
.table > tbody > tr > td{
  padding:var(--d21-e3);
  border-top:1px solid var(--d21-borde-suave);
  color:var(--d21-texto);
  vertical-align:middle;
}
.table > tbody > tr > th{
  padding:var(--d21-e3);
  border-top:1px solid var(--d21-borde-suave);
  color:var(--d21-texto);
  vertical-align:middle;
  font-weight:600;
}
/* La maqueta no tiene zebra. En las tablas de DataTables (clientes_documentos)
   solo las filas .odd traen fondo blanco y las .even se quedan transparentes,
   asi que se ve el gris de la pagina a bandas: se iguala todo a superficie. */
.table > tbody > tr{background-color:var(--d21-superficie)}
.table-striped > tbody > tr:nth-of-type(odd){background-color:var(--d21-superficie) !important}
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:nth-of-type(odd):hover{
  background-color:var(--d21-fila-hover) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td{
  border-color:var(--d21-borde);
}
.table-responsive{border:0}


/* ===========================================================================
   B.6 - EXCEPCION: EL PANEL DE DETALLE DE biblioteca_de_medios
   biblioteca_de_medios_contenido.php:158 escribe
   <div class="card-box" style='height: 640px;'> con altura FIJA por marcado,
   calculada para el card-box viejo (padding 10px, boton de 29px). El tema sube
   el padding a 24px y el boton a 41px, asi que Borrar / Editar / Guardar se
   salian 17px POR DEBAJO del borde de la tarjeta y quedaban cortados (medido:
   con tema clipped:[{Borrar,17},{Editar,17},{Guardar,17}]; sin tema clipped:[]).
   No se puede tocar la vista, asi que se neutraliza la altura inline: la
   tarjeta crece lo que necesite y conserva los 640px como MINIMO para seguir
   alineada con la columna de miniaturas, que si mide 640 por marcado.
   !important: motivo (a), es un style="" inline.
   =========================================================================== */
#datosImg .card-box{
  height:auto !important;
  min-height:640px;
}


/* ===========================================================================
   C - PESTANAS (maqueta 194-198): es donde el naranja entra como acento.
   core.css:850-880 deja la activa solo en fondo blanco, fija el color en
   #505461 !important y cambia la fuente a "Source Sans Pro": hace falta
   !important en color, line-height y font-family (motivo b).
   =========================================================================== */
/* UNA SOLA FILA, DESPLAZABLE.
   Con flex-wrap:wrap las 11 pestañas de la ficha de entidad (Perfil, RAT,
   E.T y R.T, Organigrama, Activos, Riesgos, C.Normativo, Brechas/Incid.,
   Documentos, PDF…) se partían en dos filas: la línea base del grupo quedaba
   bajo la SEGUNDA fila (y≈252) mientras el subrayado naranja de la activa se
   quedaba flotando a media altura (y≈200), sin nada en lo que apoyarse. Parecía
   un enlace subrayado suelto, no una pestaña.
   Ahora la tira no envuelve nunca y se desplaza en horizontal, así que el
   indicador activo SIEMPRE se apoya en la línea base.

   La línea base pasa de border-bottom a un box-shadow INSET: en un contenedor
   con overflow-x:auto el borde se pintaría igual, pero el margin-bottom:-1px
   que llevaban los <a> para montarse sobre él generaba desbordamiento vertical
   y overflow-y:hidden lo recortaba. Con el inset la línea no scrollea, no
   cuenta como contenido y el <a> puede apoyar su borde de 2px justo encima.
   Verificado que ninguna de las 26 .nav-tabs del panel contiene un dropdown,
   que sí quedaría recortado por el overflow. */
.nav.nav-tabs{
  border-bottom:0;
  box-shadow:inset 0 -1px 0 var(--d21-borde);
  margin-bottom:var(--d21-e5);
  display:flex;
  gap:var(--d21-e1);
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
/* Barra de desplazamiento fina pero SIEMPRE VISIBLE: es la pista de que quedan
   pestañas a la derecha. Sólo aparece si la tira desborda, así que con 3 o 4
   pestañas no se ve nada.
   NO se usa 'scrollbar-width:thin': en Chrome 121+ esa propiedad estándar
   desactiva las ::-webkit-scrollbar y deja una barra flotante que no reserva
   espacio ni se ve hasta que el usuario ya está desplazando (medido:
   offsetHeight == clientHeight == 45). Con las pseudoclases de WebKit la barra
   sí ocupa su franja y se ve en reposo. En Firefox no aplica y queda la barra
   del sistema: degradación aceptable.
   Se descartó la técnica de sombras de scroll (fondos 'local' + 'scroll')
   porque necesita pintar una franja del color de la superficie en cada
   extremo, y estas tiras NO siempre están sobre blanco: en la ficha de entidad
   la .nav-tabs va sobre el fondo de la página, así que dejaba dos parches
   blancos en los bordes. */
.nav.nav-tabs::-webkit-scrollbar{height:6px}

/* DEGRADADO EN EL BORDE, GUIADO POR EL PROPIO DESPLAZAMIENTO.
   La barra de arriba no basta: en los navegadores con barras flotantes no
   reserva franja y sólo aparece mientras el usuario ya está desplazando
   (medido: offsetHeight == clientHeight == 45). Aquí la tira se difumina en el
   extremo por el que quedan pestañas sin ver, así que se ve de un vistazo que
   hay más a la derecha.
   Se hace con una máscara animada por scroll(self inline): NO necesita saber de
   qué color es el fondo (a diferencia de las sombras de scroll clásicas), y si
   el navegador no soporta animation-timeline el bloque @supports se descarta
   entero y la tira simplemente no se difumina — nada se rompe.
   VERIFICADO: en una tira que NO desborda la línea de tiempo no tiene recorrido
   y el navegador deja mask-image en 'none', así que las .nav-tabs de 2 o 3
   pestañas no se difuminan nunca. */
@supports (animation-timeline: scroll(self inline)){
  .nav.nav-tabs{
    animation:d21-tabs-borde linear both;
    animation-timeline:scroll(self inline);
    animation-range:0 100%;
  }
  @keyframes d21-tabs-borde{
    from{
      -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,1) 36px,rgba(0,0,0,1) calc(100% - 36px),rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,1) 36px,rgba(0,0,0,1) calc(100% - 36px),rgba(0,0,0,0) 100%);
    }
    to{
      -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,1) 36px,rgba(0,0,0,1) calc(100% - 36px),rgba(0,0,0,1) 100%);
              mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,1) 36px,rgba(0,0,0,1) calc(100% - 36px),rgba(0,0,0,1) 100%);
    }
  }
}
.nav.nav-tabs::-webkit-scrollbar-track{background:transparent}
.nav.nav-tabs::-webkit-scrollbar-thumb{
  background:var(--d21-borde-fuerte);
  border-radius:var(--d21-r-pill);
  border:0;
}
.nav.nav-tabs > li,
.nav.nav-tabs.tabs > li.tab{
  float:none;
  width:auto !important;   /* (b) hay vistas que reparten el ancho con estilo inline */
  flex:0 0 auto;
  text-align:left;
  background:transparent;
  margin:0;
}
.nav.nav-tabs > li > a,
.nav.nav-tabs.tabs > li.tab > a{
  font-family:var(--d21-fuente) !important;   /* (b) core.css:864 Source Sans Pro */
  font-size:var(--d21-txt-campo);
  font-weight:600;
  line-height:1.4 !important;                 /* (b) core.css:861 line-height:50px */
  letter-spacing:0;
  padding:12px var(--d21-e5) !important;
  color:var(--d21-texto-suave) !important;    /* (b) core.css:858 color !important */
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0;
  margin:0;              /* era -1px abajo, ver la nota de .nav.nav-tabs */
  height:auto;
  transition:color var(--d21-t),border-color var(--d21-t);
}
.nav.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:focus{color:var(--d21-texto) !important}   /* (b) core.css:869 */
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover,
.nav.nav-tabs > li.active > a:focus,
.nav.nav-tabs.tabs > li.tab > a.active,
.tabs li.tab a.active{
  color:var(--d21-marca-oscuro) !important;          /* (b) core.css:794 #000 !important */
  border-bottom-color:var(--d21-marca) !important;
  background:transparent !important;
}
.nav.nav-tabs > li > a i{margin-right:6px;opacity:.65}
.nav.nav-tabs > li.active > a i{opacity:1;color:var(--d21-marca)}
/* el indicador de materialize sobra: la linea la dibuja el border-bottom */
.tabs .indicator{display:none}

/* DOBLE CAJA - arreglo obligatorio: core.css:820 pone
   ".nav.nav-tabs + .tab-content{background:#fff;padding:30px;margin-bottom:30px}"
   y el bloque ya vive dentro de un .card-box blanco. En configuracion.php hay
   ademas un div.m-t-20 en medio, asi que se ataca .tab-content directamente. */
.card-box .tab-content,
.nav.nav-tabs + .tab-content,
.modal-content .tab-content{
  background:transparent;
  padding:0;
  margin-bottom:0;
  box-shadow:none;
  color:inherit;
}


/* ===========================================================================
   D - MODALES (45 en el panel)
   La maqueta no los dibuja: se DERIVAN de su .card-box (radio 14, borde
   --borde, sombra alta, cabecera y pie separados con 1px). DERIVADO, no
   aprobado por el cliente.
   core.css:949-966 los escribe con ".modal .modal-dialog .modal-content ..."
   (especificidad 0,4,0): se usa el mismo selector, sin !important.
   NO se toca la altura de #myModal: cabecera.php la fija por JS.
   =========================================================================== */
.modal .modal-dialog .modal-content{
  border-radius:var(--d21-r-l);
  border:1px solid var(--d21-borde);
  box-shadow:var(--d21-sombra-menu);
  padding:var(--d21-e5);
  background:var(--d21-superficie);
}
.modal .modal-dialog .modal-content .modal-header{
  border-bottom:1px solid var(--d21-borde);
  border-bottom-width:1px;
  padding:0 0 var(--d21-e4);
  margin:0 0 var(--d21-e5);
  min-height:0;
}
.modal-title{
  font-size:18px;
  font-weight:700;
  color:var(--d21-texto);
  line-height:1.3;
  font-family:var(--d21-fuente);
}
.modal .modal-dialog .modal-content .modal-body{padding:0}
.modal .modal-dialog .modal-content .modal-footer{
  border-top:1px solid var(--d21-borde);
  padding:var(--d21-e4) 0 0;
  margin-top:var(--d21-e5);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:var(--d21-e2);
}
/* el clearfix de Bootstrap se convertiria en dos flex-items vacios que el gap
   separaria: se anula solo dentro del pie */
.modal-footer::before,.modal-footer::after{display:none}
.modal-footer .btn + .btn{margin-left:0;margin-bottom:0}
.close{
  opacity:.45;
  font-size:24px;
  font-weight:400;
  color:var(--d21-texto);
  text-shadow:none;
  transition:opacity var(--d21-t),color var(--d21-t);
}
.close:hover,.close:focus{opacity:.9;color:var(--d21-texto)}
.modal-backdrop.in{opacity:.45}


/* ===========================================================================
   E - AVISOS, ETIQUETAS, DESPLEGABLES Y TEXTO
   =========================================================================== */

/* core.css:927 escribe ".alert{background-color:#FFF !important}" y le pone un
   borde izquierdo de 5px: hace falta !important en el fondo (motivo b).
   AVISO: varias alertas del panel llevan style="font-size:0.9em" INLINE en el
   HTML de la vista; ese tamano gana al de aqui. No se fuerza con !important:
   son 23 alert-info repartidas y el HTML no es de este encargo. */
.alert{
  border-radius:var(--d21-r-m);
  border:1px solid transparent;
  padding:var(--d21-e3) var(--d21-e4);
  margin-bottom:var(--d21-e4);
  font-size:var(--d21-txt-campo);
  line-height:1.5;
  color:var(--d21-texto);
}
.alert .btn{margin-top:var(--d21-e2)}
.alert-info{
  background-color:var(--d21-info-fondo) !important;
  border-color:#cfe0f2 !important;
  color:#2a5f92 !important;
}
.alert-success{
  background-color:var(--d21-exito-fondo) !important;
  border-color:#cde8c6 !important;
  color:#3d7a2e !important;
}
.alert-warning{
  background-color:var(--d21-aviso-fondo) !important;
  border-color:#f5e0b5 !important;
  color:var(--d21-aviso) !important;
}
.alert-danger{
  background-color:var(--d21-peligro-fondo) !important;
  border-color:#f6cfcd !important;
  color:#a92e2e !important;
}
/* .alert-block es de Bootstrap 2 y no pinta nada: solo se limpia el aire */
.alert > p:last-child,.alert > ul:last-child{margin-bottom:0}

/* LABEL-* = escala de impacto de riesgo (bajo/medio/alto/muy alto), NO son
   estados. Se convierten en las pildoras de la maqueta (.estado: fondo suave +
   texto fuerte del mismo color, radio pill). DERIVADO.
   bootstrap.min.css esta PARCHEADO con ".label{border:1px solid #000}" y
   ".label{position:relative;top:-1px}": hay que neutralizar los dos. */
.label{
  border:0 !important;
  position:static;
  top:0 !important;
  border-radius:var(--d21-r-pill);
  padding:.35em .8em;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  display:inline-block;
  line-height:1.6;
  white-space:nowrap;
}
.label-success{background-color:var(--d21-exito-fondo) !important;color:var(--d21-exito) !important}
.label-info{background-color:var(--d21-info-fondo) !important;color:#1f6ea8 !important}
.label-warning{background-color:var(--d21-aviso-fondo) !important;color:var(--d21-aviso) !important}
.label-danger{background-color:var(--d21-peligro-fondo) !important;color:var(--d21-peligro) !important}
.label-default{background-color:var(--d21-marca-suave) !important;color:var(--d21-marca-oscuro) !important}
.label-primary{background-color:var(--d21-info-fondo) !important;color:var(--d21-info) !important}
.label-inverse{background-color:var(--d21-neutro-fondo) !important;color:var(--d21-texto) !important}

/* DESPLEGABLES.
   AVISO: clientes.php:573-577 inyecta un <style> LOCAL
   ".dropdown .dropdown-menu{top:25px;right:10px}". Aqui NO se toca la posicion
   global del dropdown o esa vista queda descolocada. */
.dropdown-menu{
  border:1px solid var(--d21-borde);
  border-radius:var(--d21-r-m);
  box-shadow:var(--d21-sombra-menu);
  padding:var(--d21-e1);
  margin-top:var(--d21-e2);
  background:var(--d21-superficie);
}
.dropdown-menu > li > a{
  border-radius:var(--d21-r-s);
  padding:9px var(--d21-e3);
  color:var(--d21-texto-suave);
  font-size:var(--d21-txt-sm);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{background-color:var(--d21-superficie-3);color:var(--d21-texto)}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus{
  background-color:var(--d21-marca-suave);
  color:var(--d21-marca-oscuro);
}
.dropdown-menu .divider{background-color:var(--d21-borde);margin:var(--d21-e1) 0}

/* TEXTO SECUNDARIO.
   FRONTERA 2: .page-title-alt es de data21-layout.css, que carga ANTES que
   esta hoja. Como las dos reglas tendrian especificidad 0,1,0, un ".text-muted"
   a secas le ganaria por orden a "p.text-muted.page-title-alt". Se excluye
   explicitamente con :not() para no invadir esa frontera. */
.text-muted:not(.page-title-alt){color:var(--d21-texto-suave)}
.text-dark{color:var(--d21-texto) !important}   /* (b) core.css:577 !important */

/* BARRAS DE PROGRESO: no hay ningun uso en las 42 vistas. Se deja preparada
   con lo minimo (radio y color de pista), sin inventar variantes. */
.progress{
  background-color:var(--d21-neutro-fondo);
  border-radius:var(--d21-r-pill);
  height:10px;
  margin-bottom:var(--d21-e4);
}
.progress-bar{border-radius:var(--d21-r-pill)}

/* .bg-custom: los 13 usos del panel son .input-group-addon.bg-custom, que es
   territorio de data21-forms.css. No hay ningun .bg-custom fuera de un
   input-group, asi que este fichero no escribe nada para evitar el solape. */