/* =======================================================================
// PROYECTO: NEXUS FB (Flareback System)
// ARCHIVO: CSS/apariencia_global.css
// VERSIÓN: 4.0.0
// CARACTERÍSTICAS: Hoja de estilos principal con la paleta oscura oficial.
// MEJORAS: REDISEÑO GLOBAL DE PANELES DE GESTIÓN (MENÚ SECUNDARIO). 
//          Se inyectó una regla global para interceptar la clase .fb-cat-item
//          en todos los módulos (Proyectos, Facturas, Servicios). Destruye 
//          el borde izquierdo viejo y fuerza la geometría de "Píldora Flotante" 
//          (border-radius: 8px y márgenes laterales).
// ======================================================================= */

:root {
    /* Paleta Oficial NEXUS FB */
    --bf-fondo-base: #050505;
    --bf-fondo-panel: #161616;
    --bf-input-fondo: #0a0a0a;
    --bf-acento: #F0A949; /* Amarillo Oficial Flareback */
    --bf-texto-principal: #ffffff;
    --bf-texto-secundario: #888888;
    --bf-borde: #222222;

    /* El borde de las CAJAS DE ENTRADA es mas claro que el de los paneles.
       No es capricho: 87 sitios del proyecto lo escriben a mano como #333
       porque el #222 de los paneles no se ve contra el fondo del campo. Se
       le da nombre para dejar de repetirlo. */
    --bf-input-borde: #333333;
    --bf-estatus: #e74c3c;
    
    --ancho-barra-lateral: 240px;
    --alto-barra-superior: 65px;
    --alto-barra-inferior: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body {
    background-color: var(--bf-fondo-base);
    color: var(--bf-texto-principal);
    overflow: hidden;
}

.ventana-completa {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}

/* =========================================
   MÓDULO: BARRA LATERAL
   ========================================= */
.barra-lateral {
    width: var(--ancho-barra-lateral);
    height: 100vh;
    background-color: var(--bf-fondo-panel);
    border-right: 1px solid var(--bf-borde);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 200;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    overflow-x: hidden;
    opacity: 1;
}

.barra-lateral.contraida {
    width: 0;
    opacity: 0;
    border-right: none;
    padding: 0;
}

/* =========================================
   MÓDULO: CONTENEDOR DERECHO & ÁREA TRABAJO
   ========================================= */
.contenedor-derecho {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100vh;
    overflow: hidden;
}

.area-trabajo {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    background-color: var(--bf-fondo-base);
}

/* =========================================
   BARRA SUPERIOR INTELIGENTE
   ========================================= */
#contenedor-barra-superior {
    height: var(--alto-barra-superior);
    background-color: var(--bf-fondo-panel);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    border-bottom: 1px solid var(--bf-borde);
    flex-shrink: 0;
    z-index: 100;
}

.input-buscador-global {
    width: 100%;
    background-color: var(--bf-input-fondo);
    border: 1px solid var(--bf-borde);
    color: var(--bf-texto-principal);
    padding: 10px 10px 10px 40px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-buscador-global:focus { border-color: var(--bf-acento); background-color: var(--bf-fondo-panel); }
.input-buscador-global::placeholder { color: var(--bf-texto-secundario); }

.btn-nuevo-inteligente {
    background-color: var(--bf-acento);
    color: var(--bf-fondo-base);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-nuevo-inteligente:hover { background-color: #f3b969; transform: scale(1.02); }

.btn-icono-superior {
    background: transparent;
    border: none;
    color: var(--bf-texto-secundario);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.btn-icono-superior:hover { background-color: #2a2a2a; color: var(--bf-texto-principal); }

.indicador-notificacion {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--bf-estatus);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.8);
}

/* =========================================
   BARRA DE ICONOS INFERIOR
   ========================================= */
#contenedor-barra-iconos {
    height: var(--alto-barra-inferior);
    background-color: var(--bf-fondo-panel);
    border-top: 1px solid var(--bf-borde);
    display: flex; 
    justify-content: space-evenly;
    align-items: center;
    flex-shrink: 0;
    z-index: 100;
    width: 100%;
}

.btn-icono {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px; 
    transition: all 0.2s ease;
    flex: 1; 
}

.btn-icono svg, .btn-icono .render-icono {
    width: 24px;
    height: 24px;
    color: #888;
    transition: color 0.3s ease, transform 0.2s ease;
}

.texto-universo {
    font-size: 0.55rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bf-texto-secundario);
    transition: color 0.3s ease, transform 0.2s ease;
}

.btn-icono:hover svg, .btn-icono:hover .render-icono { color: #ccc; }
.btn-icono:hover .texto-universo { color: #cccccc; }
.btn-icono.activo svg, .btn-icono.activo .render-icono { color: var(--bf-acento); transform: scale(1.1); }
.btn-icono.activo .texto-universo { color: var(--bf-acento); transform: scale(1.05); }

/* =======================================================================
// ESTILOS DEL MÓDULO CALENDARIO
// ======================================================================= */

.cal-nav-btn { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; transition: color 0.3s ease; }
.cal-nav-btn:hover { color: var(--bf-acento); }

.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(100px, auto); gap: 10px; }
.grid-vista-semana { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 10px; }
.grid-vista-ano { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow-y: auto; }

.dia-celda {
    background: var(--bf-fondo-panel); border-radius: 8px; padding: 10px; color: #fff; font-family: sans-serif; cursor: pointer; transition: border 0.2s ease, background 0.2s ease; border: 1px solid transparent; display: flex; flex-direction: column; overflow: hidden;
}
.dia-celda:hover { border: 1px solid var(--bf-acento); }
.dia-actual { border: 2px solid var(--bf-acento); background: rgba(240, 169, 73, 0.05); }
.dia-vacio { background: transparent; pointer-events: none; }

.mes-mini { background: var(--bf-fondo-panel); border: 1px solid var(--bf-borde); border-radius: 8px; padding: 10px; cursor: pointer; transition: border 0.2s ease; }
.mes-mini:hover { border: 1px solid var(--bf-acento); }
.mes-mini-titulo { color: var(--bf-acento); font-family: sans-serif; font-size: 14px; text-align: center; margin-bottom: 10px; font-weight: bold; pointer-events: none; }
.mes-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10px; color: #aaa; text-align: center; font-family: sans-serif; pointer-events: none; }
.dia-mini { padding: 4px 0; border-radius: 2px; }
.dia-mini.con-evento { background: var(--bf-acento); color: #000; font-weight: bold; }

.evento-chip {
    font-size: 11px;
    font-weight: bold;
    padding: 6px 8px;
    border-radius: 6px;
    margin-top: 5px;
    border: none !important; 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =======================================================================
// MODALES GLOBALES
// ======================================================================= */
/* -------------------------------------------------------------------
   VENTANAS CENTRADAS RESPECTO AL AREA DE TRABAJO
   (centrado respecto al area de trabajo)

   El velo cubre la pantalla entera -para que no se pueda tocar nada de
   detras- pero la CAJA se centra en el espacio util: descontando la barra
   lateral y la superior. Eso es lo que hace que se vea centrada de verdad
   y no un poco a la izquierda.

   Se resuelve con relleno en el propio velo, no moviendo la caja: asi no
   hay ninguna medida escrita a mano que se desajuste, y basta con que las
   variables cambien para que todo siga en su sitio.
   ------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--ancho-barra-lateral, 240px);
    padding-top: var(--alto-barra-superior, 65px);
    box-sizing: border-box;
    z-index: 1000;
}

/* Con la barra lateral contraida no hay nada que descontar. */
body:has(.barra-lateral.contraida) .modal-overlay,
body:has(#barra-lateral-UI.contraida) .modal-overlay {
    padding-left: 0;
}

/* En pantallas estrechas la barra estorba mas que ayuda: la ventana se
   queda con todo el ancho. */
@media (max-width: 900px) {
    .modal-overlay { padding-left: 0; }
}
.modal-caja { position: relative; background: var(--bf-fondo-panel); border: 1px solid var(--bf-borde); border-radius: 12px; width: 450px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); font-family: sans-serif; color: #fff; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bf-borde); padding-bottom: 15px; margin-bottom: 20px; }
.modal-input-titulo { background: transparent; border: none; color: #fff; font-size: 22px; font-weight: bold; outline: none; width: 85%; }
.modal-input-titulo::placeholder { color: #777; }

.btn-tipo {
    background: #1a1a1a;
    border: 1px solid var(--bf-borde);
    color: var(--bf-texto-secundario);
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s ease;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 14px;
}
.btn-tipo:hover { background: #222; color: #fff; }
.btn-tipo.activo {
    background: rgba(240, 169, 73, 0.1);
    color: var(--bf-acento);
    border: 1px solid var(--bf-acento);
}

.modal-fila { display: flex; align-items: center; margin-bottom: 15px; }
.modal-fila label { width: 90px; color: #aaa; font-size: 14px; }
/* =======================================================================
   LA CAJA DE ENTRADA DEL SISTEMA

   Esta regla vive AQUI y en ningun otro sitio. Antes estaba repetida en tres
   hojas de modulo, y una de ellas -calendario.css- la declaraba sin acotar y
   con '!important', asi que la hoja del Calendario acababa pintando los
   campos de los nueve modulos en gris #2a2a2a. Se notaba en que los unicos
   campos con el color de la paleta eran los de Facturas, que no usan esta
   clase.

   Efectos que aquello tenia y que nadie relacionaba con el Calendario:
     - El 'background: #000' de Team y el '#050505' de Pagos, codigo muerto.
     - Un campo de dinero en verde no salia verde: ganaba 'color:#fff'.
     - Cada modulo que intentaba su color tampoco lo conseguia.

   SIN '!important'. Un modulo que necesite ajustar lo suyo -el campo de
   dinero, por ejemplo- lo hace con una clase propia encima, que es como se
   supone que funciona una hoja en cascada.

   Se usa 'background-color' y no el atajo 'background' a proposito: el
   select lleva su flecha como 'background-image' y el atajo se la borraria.
   ======================================================================= */
.modal-input,
.modal-input-full,
select.modal-input-full {
    background-color: var(--bf-input-fondo);
    border: 1px solid var(--bf-input-borde);
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    outline: none;
    font-family: sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

/* La diferencia entre las dos: '.modal-input' va DENTRO de '.modal-fila',
   con la etiqueta al lado, y crece; '.modal-input-full' va en
   '.modal-fila-col', con la etiqueta encima, y ocupa el ancho. */
.modal-input      { flex-grow: 1; }
.modal-input-full { width: 100%; }

.modal-input:focus,
.modal-input-full:focus { border-color: var(--bf-acento); }

.modal-input:disabled,
.modal-input-full:disabled { background-color: #1a1a1a; color: #555; cursor: not-allowed; }

/* La flecha del desplegable. Estaba en calendario.css y viaja con su regla. */
select.modal-input-full {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23aaaaaa" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
    cursor: pointer;
}

/* La fila con la etiqueta ENCIMA del campo. Estaba duplicada byte a byte en
   clientes.css y en team.css. */
.modal-fila-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* EL ROTULO RESPIRA.
   Eran 6 px, y bajo un rotulo en MAYUSCULAS de 12 px eso se lee como texto
   pegado a la caja: el usuario lo señalo dos veces en la ventana de Team
   ("el texto esta super pegado al box"). Medido campo por campo, los seis
   rotulos de esa ventana tenian el mismo hueco de 6 px, asi que no era un
   campo descuadrado: era la medida. Se sube aqui, en la hoja global, para
   que TODAS las ventanas del sistema respiren igual y no quede una que se
   siente distinta. Si sobra aire, este es el unico numero que hay que
   tocar. */
.modal-fila-col label {
    color: #aaa;
    font-family: sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
}

/* =======================================================================
   EL CAMPO DE DINERO

   La receta es la de Facturas (facturas_modales.php:201), que es como se
   captura dinero en este sistema. Se le pone nombre para dejar de copiarla
   escrita en la etiqueta.

   Va SIEMPRE con dos clases mas:
     '.input-dinero'         -> el gancho de Matilda (matilda_formularios.js:173).
                                Sin el, el campo cae en capitalizarTexto() en
                                vez de formatearMoneda(): ni el simbolo ni los
                                millares. Hoy falta en la mitad de los campos
                                de dinero del proyecto.
     '.input-matilda-focus'  -> el aro de foco del sistema.

   El simbolo de peso va en el PLACEHOLDER -«$ 0.00»- y lo escribe Matilda
   dentro del valor al salir. Nada de <span> con el «$» al lado: es un adorno
   que hay que alinear, que se descoloca y que tapa el cursor.
   ======================================================================= */
.modal-input-dinero {
    color: #2ecc71;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.modal-input-dinero::placeholder { color: #4a4a4a; font-weight: bold; }
/* EL DINERO QUE SALE, EN ROJO (28-sep-2026). El dueño, al pedir un reembolso:
   "¿por qué el monto me aparece en verde? debería salir en rojo". Verde es lo
   que entra a la empresa y rojo lo que sale, como en los comprobantes (el de
   pago y el de cobro). La clase la pone quien sabe hacia dónde va el dinero. */
.modal-input-dinero.dinero-sale { color: #e74c3c; }

/* =======================================================================
   FECHAS Y HORAS

   'color-scheme: dark' es lo que hace que el desplegable del navegador salga
   OSCURO. Sin el sale BLANCO y canta en una ventana negra. Estaba solo en
   calendario.css, asi que era otra cosa que funcionaba por accidente en los
   demas modulos: se muda aqui, que es de donde tiene que venir.

   Los campos siguen llevando ademas 'color-scheme: dark' en linea junto al
   'cursor: pointer' y al showPicker(): eso NO sobra, es lo que permite que un
   campo suelto -uno que no sea .modal-input- tambien salga bien.
   ======================================================================= */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"] {
    color-scheme: dark;
}

/* AQUI VIVIA '::-webkit-calendar-picker-indicator { filter: invert(1) }'.
   Una linea, sin selector, para todos los campos del sistema. Y era la que
   dejaba el icono negro sobre fondo negro: invertir solo acierta si el
   navegador pinta oscuro, y con 'color-scheme: dark' pinta claro.
   Se le fue compensando modulo por modulo -Finanzas, Tareas, Cotizaciones,
   Proyectos, Nube y el propio Calendario escribieron su parche- en vez de
   quitarla. Seis parches para un fallo. El icono se dibuja ahora mas abajo,
   una vez, y ninguno de esos parches hace falta. */

/* LA LISTA DE SUGERENCIAS DE GOOGLE, Y SU ALTURA EN LA PILA.
   Google no mete el desplegable dentro del campo: cuelga un '.pac-container'
   del <body>, aparte. Así que compite en la pila contra las ventanas del
   sistema -9990, o 9995 las apilables (windows.js:122)- y contra el visor de
   mapa de Proyectos -10600-. Por debajo de cualquiera de esos números el
   desplegable se pinta detrás del panel y parece que no hay sugerencias.
   ESTE ES EL UNICO SITIO DONDE SE DECLARA. Si vuelve a aparecer un z-index de
   '.pac-container' en una hoja de módulo, la gana ella por cargarse después
   -pasó con mapas.css- y el buscador se apaga sin que nadie toque Google. */
.pac-container {
    z-index: 999999 !important;
    background-color: var(--bf-fondo-panel) !important;
    border: 1px solid var(--bf-borde) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    font-family: sans-serif !important;
    margin-top: 5px !important;
}

.pac-item {
    color: var(--bf-texto-secundario) !important;
    border-top: 1px solid var(--bf-borde) !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
.pac-item:hover { background-color: #2a2a2a !important; }
.pac-item-query { color: var(--bf-acento) !important; font-size: 15px !important; }
.pac-logo:after { display: none !important; }

/* =======================================================================
// 🚨 BISTURÍ V4.0.0: REDISEÑO GLOBAL DE PANELES DE GESTIÓN (SUB-MENÚS)
// Estandariza TODAS las categorías laterales en píldoras modernas.
// ======================================================================= */
.fb-cat-item {
    border-left: none !important;
    border-radius: 8px !important;
    margin: 4px 12px !important; 
    width: auto !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.fb-cat-item.activa {
    border-left: none !important;
}

/* La cruz de las ventanas.
   .modal-header es un contenedor flexible y la cruz iba sin defensa: el bloque
   del titulo, que crece, la podia estrujar hasta dejarla en nada. De ahi que en
   algunas ventanas no se viera. Se le fija un tamano minimo y se le prohibe
   encoger, y de paso gana area para el raton. */
/* LA CRUZ NO SE DEFINE AQUI.
   Habia una segunda regla en este archivo peleandose con la de
   botones_master.css: una la trataba como boton de cabecera y la otra la
   clavaba en una esquina absoluta. Ganaba a medias cada una y el resultado
   no era ninguna de las dos. El estandar vive en botones_master.css. */


/* =======================================================================
   LAS CASILLAS Y LOS SELECTORES DE FECHA. AQUÍ, NO EN CADA MÓDULO.

   La casilla dibujada del sistema existía desde hace tiempo con el nombre
   '.chk-fb-custom', y Llavero, Finanzas y Seguridad la usaban. El problema
   es dónde vivía: dentro de un <style> de
   'PHP/Globales/Seguridad/tab_pilares.php'. Esa hoja sólo entra en el
   documento cuando se abre la pestaña de Pilares, así que la misma casilla
   se veía bien o se veía nativa según por dónde hubiera pasado el usuario
   antes. Es el mismo fallo que tenían los desplegables: la estética estaba,
   pero dependía de la suerte.

   Ahora la regla no pregunta por la clase: se aplica a TODA casilla y a TODO
   radio del sistema. Quien necesite el de fábrica lo pide en voz alta:

       <input type="checkbox" class="fb-nativo">

   LA PALOMA VA COMO IMAGEN DE FONDO, NO COMO '::after'. La versión anterior
   la dibujaba con un pseudo-elemento posicionado en píxeles fijos (top 2,
   left 6) medidos para una casilla de 18px. En el Calendario y en
   Cotizaciones las casillas son de 16px por estilo en línea -y el en línea
   gana-, así que la paloma salía descentrada. Como imagen de fondo al 65%
   y centrada, se ajusta sola a cualquier tamaño.
   ======================================================================= */

input[type="checkbox"]:not(.fb-nativo),
input[type="radio"]:not(.fb-nativo) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--bf-input-fondo, #0a0a0a);
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    outline: none;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="radio"]:not(.fb-nativo) { border-radius: 50%; }

input[type="checkbox"]:not(.fb-nativo):hover,
input[type="radio"]:not(.fb-nativo):hover { border-color: var(--bf-acento); }

input[type="checkbox"]:not(.fb-nativo):checked,
input[type="radio"]:not(.fb-nativo):checked {
    background-color: var(--bf-acento);
    border-color: var(--bf-acento);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% 65%;
}

/* La paloma y el punto van en negro porque el fondo marcado es el amarillo
   de la casa, no un azul de sistema operativo. */
input[type="checkbox"]:not(.fb-nativo):checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
}

input[type="radio"]:not(.fb-nativo):checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="black"/></svg>');
    background-size: 100% 100%;
}

input[type="checkbox"]:not(.fb-nativo):disabled,
input[type="radio"]:not(.fb-nativo):disabled { opacity: 0.4; cursor: not-allowed; }

/* '.chk-fb-custom' NO NECESITA REGLA PROPIA. Hay una veintena de casillas que
   la llevan escrita y se quedan como están: ya no selecciona nada, porque la
   regla de arriba alcanza a todas las casillas lleven clase o no. Quitarla de
   catorce archivos no arreglaría nada, así que se deja. */


/* EL CALENDARIO Y EL RELOJ DEL NAVEGADOR, EN OSCURO.
   'color-scheme: dark' es lo único que decide de qué color pinta el navegador
   sus propias ventanitas -el calendario de un <input type="date">, las flechas
   de un <input type="number">-. Estaba puesto a mano, campo por campo, en unos
   sitios sí y en otros no: por eso unas fechas abrían un calendario negro y
   otras uno blanco. Se declara una vez, para todos. */
/* EL ICONO SE DIBUJA. NO SE INVIERTE.

   Invertir era lo que se hacia -y lo que hacia calendario.css con
   'filter: invert(1)'- y es una apuesta sobre algo que no controlamos: el color
   con el que Chrome pinta ESE dia su propio icono. Si lo pinta oscuro, invertir
   lo pone blanco y acierta. Pero con 'color-scheme: dark' -que es lo que pide
   todo el sistema- Chrome ya lo pinta CLARO, y entonces invertirlo lo devuelve
   a negro sobre un campo negro. El mismo codigo, dos resultados opuestos, segun
   una decision del navegador.

   Chrome dibuja ese boton como imagen de fondo, asi que dandole la nuestra el
   glifo de fabrica desaparece y ya no hay nada que adivinar: es blanco porque
   el SVG dice blanco. Y de paso es el mismo calendario de trazo que el resto de
   los iconos de la casa, en vez del del sistema operativo.

   'filter: none' va explicito para desarmar cualquier inversion que quedara
   escrita en la hoja de un modulo. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.85;
    cursor: pointer;
    width: 17px;
    height: 17px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.85;
    cursor: pointer;
    width: 17px;
    height: 17px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* EL ICONO DEL MÓDULO Y SU TÍTULO VAN JUNTOS (25-sep-2026).
   El icono entró como un hijo más de cabeceras repartidas con
   'space-between': en Clientes y Office el título se fue al centro, y en
   Impuestos, al partirse la cabecera en renglones, el icono quedó suelto.
   Dentro de este grupo la cabecera vuelve a tener sus dos piezas de
   siempre: el título a la izquierda y las acciones a la derecha. */
.fb-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 1 auto;
}