/* =======================================================================
// PROYECTO: NEXUS FB (Flareback System)
// ARCHIVO: CSS/Globales/botones_master.css
// VERSIÓN: 2.7.0
// CARACTERÍSTICAS: UI Kit Oficial de Botonería Flareback.
// MEJORAS: FASE 7 APLICADA (BOTONES FANTASMA / STEALTH ACTIONS). Se inyectó 
//          la Sección 6 con botones que nacen en camuflaje gris y revelan su 
//          color puro (Amarillo Flareback o Rojo) únicamente al hacer :hover, 
//          erradicando el "efecto semáforo" en interfaces complejas.
// NOTA: Archivo 100% íntegro.
// ======================================================================= */

/* -----------------------------------------------------
   1. CONTENEDORES DE BOTONERÍA (La Geometría)
   ----------------------------------------------------- */

.caja-botones-1 {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 20px;
    gap: 10px;
}

.caja-botones-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 20px;
    gap: 15px; 
}

/* -----------------------------------------------------
   2. EL MOLDE BASE DEL BOTÓN (La Física)
   ----------------------------------------------------- */
button.btn-fb, label.btn-fb, a.btn-fb {
    width: 100%;
    height: 42px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; 
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* BISTURÍ: Aniquilación absoluta de contornos nativos al hacer clic */
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    
    text-decoration: none;
    
    /* BLOQUEO ANTI-DEFORMACIÓN ESTRICTO */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; 
}

button.btn-fb:focus, button.btn-fb:focus-visible, button.btn-fb:active,
label.btn-fb:focus, label.btn-fb:focus-visible, label.btn-fb:active,
a.btn-fb:focus, a.btn-fb:focus-visible, a.btn-fb:active {
    outline: none !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------
   LOS CINCO ESTADOS
   Iguales para los cuatro papeles. Un boton primario y uno de peligro se
   distinguen por el COLOR, nunca por como reaccionan: si cada uno se
   hundiera distinto al apretarlo, la interfaz se sentiria de tres autores.
   ----------------------------------------------------- */

/* 1. REPOSO -> cada papel lo define en su seccion, abajo. */

/* 2. ENCIMA -> tambien por papel: el color se llena. */

/* 3. APRETADO -> el boton se hunde. Un pixel basta y sobra: es la
      diferencia entre "creo que le di" y "le di". */
button.btn-fb:active:not(:disabled),
label.btn-fb:active,
a.btn-fb:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}

/* 4. DESHABILITADO -> apagado y con el cursor diciendo que no. */
button.btn-fb:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.5);
}

/* 5. TRABAJANDO -> mientras el servidor responde. No se puede volver a
      pulsar, y el cursor avisa de que hay algo en marcha. Antes cada
      modulo lo resolvia a mano cambiando el texto a "Guardando...", que
      dejaba el boton pulsable y disparaba la peticion dos veces. */
button.btn-fb.trabajando,
button.btn-fb.trabajando:hover {
    cursor: wait;
    opacity: 0.7;
    pointer-events: none;
    transform: none;
}

/* -----------------------------------------------------
   3. LOS CUATRO PAPELES

   Cuatro y no mas. Cada boton del sistema es uno de estos, y el papel se
   elige por lo que HACE, no por como queda:

     primario    La accion por la que existe la ventana: guardar, crear,
                 aceptar. UNO SOLO por ventana. Ambar.
     secundario  Cancelar, cerrar, "ahora no". Sin relleno. Nunca compite
                 con el primario ni se pinta de un color con significado.
     peligro     Borrar, y nada mas que borrar. Rojo. Que sea rojo es lo
                 que hace que el rojo signifique algo.
     advertencia Sigue adelante pero con consecuencias: forzar, resetear,
                 sobrescribir. Naranja.

   Y el ORDEN es fijo en toda ventana: cancelar a la izquierda, confirmar
   a la derecha. Es lo que hace que la mano ya sepa donde ir.
   ----------------------------------------------------- */

.btn-fb-primario {
    background: #1a1a1a; 
    border: 1px solid var(--bf-acento, #F0A949); 
    color: var(--bf-acento, #F0A949); 
}
.btn-fb-primario:hover:not(:disabled) {
    background: var(--bf-acento, #F0A949); 
    color: #000000; 
}

.btn-fb-peligro {
    background: #1a1a1a; 
    border: 1px solid #e74c3c; 
    color: #e74c3c; 
}
.btn-fb-peligro:hover:not(:disabled) {
    background: #e74c3c; 
    color: #ffffff; 
}

/* -----------------------------------------------------
   EL SENTIDO DEL DINERO TAMBIEN ES UN PAPEL (22-sep-2026)

   Un boton que dice «Ingreso» y otro que dice «Egreso» no son la accion
   principal y la secundaria: son las dos direcciones del dinero. Pintarlos
   de ambar y gris obligaba a leer la palabra para saber cual era cual,
   teniendo al lado una lista donde ese mismo dinero ya se lee por el color:
   verde lo que entra, rojo lo que sale.

   Asi que el idioma del dinero gana aqui, y estos dos papeles existen SOLO
   para botones que declaran una direccion de dinero. Un boton de guardar,
   de abrir o de enviar no los lleva nunca.

   COMO SE SIGUE DISTINGUIENDO «BORRAR»: el rojo de borrar y el rojo de
   «sale dinero» no comparten barra. El de borrar vive en los iconos de
   fila y en los dialogos de confirmacion, siempre con el icono de papelera
   y siempre pidiendo un si. El de salida vive en las barras de alta, junto
   a su gemelo verde, y no destruye nada.
   ----------------------------------------------------- */
/* -----------------------------------------------------
   UN SOLO TAMAÑO MAS: EL MINI (22-sep-2026)

   La casa tiene botones de 42px y ese sigue siendo EL boton. Este es para
   los que viven dentro de una tarjeta de cifras, donde 42px de alto y un
   ancho completo convierten la tarjeta en un formulario: el boton pesaba
   mas que el dato.

   Es solo un tamaño. El papel -primario, secundario, entra, sale- lo sigue
   poniendo su clase de color, asi que un mini rojo significa lo mismo que
   un rojo grande.
   ----------------------------------------------------- */
.btn-fb.btn-fb-mini {
    /* 38px es la medida de los controles de barra de esta casa: la misma
       del filtro dinamico y la del boton de invertir orden. Un boton
       pegado a ellos con otra altura se lee como un descuido. */
    height: 38px;
    width: auto !important;
    min-width: 0;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 6px;
}

.btn-fb-entra {
    background: #1a1a1a;
    border: 1px solid #2ecc71;
    color: #2ecc71;
}
.btn-fb-entra:hover:not(:disabled) {
    background: #2ecc71;
    color: #000000;
}

.btn-fb-sale {
    background: #1a1a1a;
    border: 1px solid #e74c3c;
    color: #e74c3c;
}
.btn-fb-sale:hover:not(:disabled) {
    background: #e74c3c;
    color: #ffffff;
}

/* LOS OTROS DOS GESTOS DEL DINERO (29-sep-2026). El dueño: "cuando es un gasto
   es rojo, cuando es un pago verde; mover lo podemos dejar amarillo, importar
   azul". Mover no entra ni sale -cambia de bolsillo- y va en el ámbar de la
   casa; importar trae movimientos del banco y va en azul. Mismo molde que
   entra/sale: borde y letra del color, relleno al pasar encima. */
.btn-fb-mueve {
    background: #1a1a1a;
    border: 1px solid var(--bf-acento, #F0A949);
    color: var(--bf-acento, #F0A949);
}
.btn-fb-mueve:hover:not(:disabled) {
    background: var(--bf-acento, #F0A949);
    color: #000000;
}

.btn-fb-importa {
    background: #1a1a1a;
    border: 1px solid #3498db;
    color: #3498db;
}
.btn-fb-importa:hover:not(:disabled) {
    background: #3498db;
    color: #ffffff;
}

.btn-fb-secundario {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
}
.btn-fb-secundario:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: #888;
    color: #fff;
}

.btn-fb-advertencia {
    background: #1a1a1a;
    border: 1px solid #f39c12;
    color: #f39c12;
}
.btn-fb-advertencia:hover:not(:disabled) {
    background: #f39c12;
    color: #000000;
}

.btn-fb-exito {
    background: #2ecc71 !important;
    border: 1px solid #2ecc71 !important;
    color: #ffffff !important;
    pointer-events: none;
}

/* -----------------------------------------------------
   LA EXCEPCION DE MARCA: WHATSAPP (21-sep-2026)

   No es un quinto papel, es un DESTINO: el boton que saca el texto hacia
   WhatsApp. Va en el verde de WhatsApp porque es lo que el ojo busca para
   reconocerlo; en ambar parecia la accion principal de la ventana, y en la
   vista previa de la solicitud ya no hay accion principal -ver/copiar/sacar-.

   Mismo comportamiento que los demas: en reposo borde y texto de color, y al
   pasar el raton se rellena de verde con el texto blanco. Se usa SOLO para
   mandar a WhatsApp; cualquier otro verde del sistema significa "hecho"
   (btn-fb-exito) y no tiene que confundirse con este.
   ----------------------------------------------------- */
.btn-fb-whatsapp {
    background: #1a1a1a;
    border: 1px solid #25D366;
    color: #25D366;
}
.btn-fb-whatsapp:hover:not(:disabled) {
    background: #25D366;
    color: #ffffff;
}

/* -----------------------------------------------------
   4. ELEMENTOS UNIVERSALES DE VENTANA (Modales)
   ----------------------------------------------------- */

/* La "X" universal minimalista (Agrupando TODAS las variantes heredadas) */
/* =======================================================================
// LA CRUZ DE CERRAR: EL ESTANDAR, Y EL UNICO SITIO DONDE SE DEFINE
//
// SIEMPRE arriba a la derecha, a la misma distancia del borde, en las 43
// ventanas del sistema. Da igual si la ventana mide 350px o 1100px, si la
// trae escrita en el HTML o se la inyecta windows.js sobre la marcha.
//
// Va ANCLADA A SU VENTANA, no a la pantalla. Eso depende de que
// '.modal-caja' sea 'position: relative', que se pone en
// apariencia_global.css. Sin eso, una cruz absoluta busca el siguiente
// ancestro posicionado y se lo encuentra en el fondo negro -que es fixed y
// ocupa toda la pantalla-, asi que se iba a la esquina superior derecha de
// la PANTALLA, encima del boton de filtros.
//
// Y de ahi salia el salto raro: al picar fuera, 'respingo()' le pone un
// 'transform: scale()' a la caja para el rebote. Un transform CREA un
// bloque contenedor nuevo, asi que a partir de ese instante la cruz si
// encontraba su ventana y se metia dentro. Por eso "regresaba" justo al
// picar fuera y nunca antes.
//
// Aqui habia una sola de las dos reglas que se peleaban. La otra estaba en
// apariencia_global.css y ya se retiro.
// ======================================================================= */

:root {
    --cruz-tamano: 34px;
    --cruz-margen: 14px;
}

/* UN MENU NO ES UNA VENTANA, Y NO MIDE LO MISMO.
   Uno de clic derecho mide 225px de ancho; la cruz de una ventana de 1100px
   dentro de el seria un boton mas grande que sus propias opciones. No es otra
   regla: son las MISMAS dos variables con otro valor, asi que la cruz sigue
   siendo una sola cosa en todo el sistema. */
[id^="menu-contextual-"] {
    --cruz-tamano: 24px;
    --cruz-margen: 9px;
}

.btn-cerrar-modal, .btn-cerrar, .ctx-close-btn {
    position: absolute;
    top: var(--cruz-margen);
    right: var(--cruz-margen);
    width: var(--cruz-tamano);
    height: var(--cruz-tamano);
    border-radius: 8px;
    background: transparent !important;
    border: none !important;
    color: #888;
    /* El aspa se deriva del tamaño de la caja en vez de ir fija: asi cambiar
       --cruz-tamano la escala entera, y no queda un aspa gigante dentro de
       una caja chica. */
    font-size: calc(var(--cruz-tamano) * 0.76);
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    transition: background 0.15s ease, color 0.15s ease;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* El hover de la cruz esta mas abajo, en un solo sitio: ambar y crece.
   Aqui habia un segundo hover en rojo que la regla de abajo anulaba con
   !important, asi que nunca se veia. Dos reglas para lo mismo en el mismo
   archivo es justo lo que este estandar viene a quitar. */

/* Exorcismo absoluto del cuadro amarillo en cualquier estado de interacción */
.btn-cerrar-modal:focus, .btn-cerrar-modal:focus-visible, .btn-cerrar-modal:active,
.btn-cerrar:focus, .btn-cerrar:focus-visible, .btn-cerrar:active,
.ctx-close-btn:focus, .ctx-close-btn:focus-visible, .ctx-close-btn:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Forzamos al SVG interno a que mute y crezca suavemente */
.btn-cerrar-modal svg, .btn-cerrar svg, .ctx-close-btn svg {
    transition: stroke 0.3s ease, transform 0.3s ease;
}

/* La X se pinta del Amarillo Flareback y crece orgánicamente */
.btn-cerrar-modal:hover, .btn-cerrar:hover, .ctx-close-btn:hover {
    color: var(--bf-acento, #F0A949) !important; 
    background: transparent !important;          
    transform: scale(1.2); 
} 

/* -----------------------------------------------------
   5. BOTONES DE ACCIÓN PEQUEÑOS (Micro-interacciones)
   ----------------------------------------------------- */
.btn-fb-icono {
    background: transparent;
    border: none;
    color: #888;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.btn-fb-icono:focus, .btn-fb-icono:focus-visible, .btn-fb-icono:active {
    outline: none !important;
    box-shadow: none !important;
}

.btn-fb-icono svg {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-fb-icono:hover svg {
    transform: scale(1.15); 
}

.btn-fb-icono.icono-editar:hover {
    color: var(--bf-acento, #F0A949) !important; 
}

.btn-fb-icono.icono-eliminar:hover {
    color: #e74c3c !important; 
}

/* -----------------------------------------------------
   6. NOMBRES HEREDADOS

   Clases que quedaron de antes y siguen en el HTML de varios modulos. NO
   se les da un aspecto propio: se resuelven al papel que les toca, para
   que un "cancelar" se vea igual en Team que en Tareas que en Seguridad.

   Los 'fantasma' nacian grises y revelaban su color solo al pasar por
   encima. La idea era evitar el efecto semaforo, pero convivir con
   btn-fb-peligro dejaba DOS aspectos para "borrar" segun quien escribiera
   la ventana. Ahora hay uno.
   ----------------------------------------------------- */

.btn-fantasma-primario {
    background: #1a1a1a;
    border: 1px solid var(--bf-acento, #F0A949);
    color: var(--bf-acento, #F0A949);
}
.btn-fantasma-primario:hover:not(:disabled) {
    background: var(--bf-acento, #F0A949);
    color: #000000;
}

.btn-fantasma-secundario {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
}
.btn-fantasma-secundario:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: #888;
    color: #fff;
}

.btn-fantasma-peligro {
    background: #1a1a1a;
    border: 1px solid #e74c3c;
    color: #e74c3c;
}
.btn-fantasma-peligro:hover:not(:disabled) {
    background: #e74c3c;
    color: #ffffff;
}