/*
 * TemaStripe 05-utils.css
 * Utilidades varias: focus rings, kbd, badges soft, micro-animaciones.
 */

/* ============================================================
 * FOCUS RINGS UNIFICADOS
 * ============================================================ */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--fs-c-primary);
    outline-offset: 2px;
    border-radius: var(--fs-radius-xs);
}

/* ============================================================
 * KBD - shortcuts de teclado
 * ============================================================ */
.kbd, kbd {
    display: inline-block;
    background-color: var(--fs-c-bg-soft);
    border: 1px solid var(--fs-c-border);
    border-bottom-width: 2px;
    border-radius: var(--fs-radius-xs);
    padding: 0.125rem 0.375rem;
    font-family: var(--fs-font-mono);
    font-size: 0.75rem;
    color: var(--fs-c-text-muted);
    line-height: 1;
    box-shadow: var(--fs-shadow-xs);
}

/* ============================================================
 * BADGES "SOFT" PREMIUM
 * Variantes con fondo claro y texto fuerte (Stripe style).
 * ============================================================ */
.badge-soft-primary { background-color: var(--fs-c-primary-soft); color: var(--fs-c-primary); }
.badge-soft-success { background-color: var(--fs-c-success-soft); color: var(--fs-c-success); }
.badge-soft-warning { background-color: var(--fs-c-warning-soft); color: #8A5A00; }
.badge-soft-danger  { background-color: var(--fs-c-danger-soft);  color: var(--fs-c-danger); }
.badge-soft-info    { background-color: var(--fs-c-info-soft);    color: var(--fs-c-info); }

/* ============================================================
 * MICRO-INTERACCIONES
 * ============================================================ */
.fs-lift {
    transition: transform var(--fs-transition), box-shadow var(--fs-transition);
}
.fs-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--fs-shadow-md);
}

.fs-spin {
    animation: fs-spin 0.8s linear infinite;
}
@keyframes fs-spin {
    to { transform: rotate(360deg); }
}

.fs-pulse {
    animation: fs-pulse 1.4s ease-in-out infinite;
}
@keyframes fs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ============================================================
 * SEPARADORES Y DECORATIVOS
 * ============================================================ */
.fs-divider {
    height: 1px;
    background-color: var(--fs-c-border);
    margin: 1rem 0;
    border: 0;
}
.fs-divider-vertical {
    width: 1px;
    background-color: var(--fs-c-border);
    height: 1.5rem;
    align-self: center;
    margin: 0 0.5rem;
}

/* ============================================================
 * STATUS DOT (para indicadores de estado en linea)
 * ============================================================ */
.fs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--fs-radius-full);
    background-color: var(--fs-c-text-soft);
    margin-right: 0.375rem;
    vertical-align: middle;
}
.fs-dot.success { background-color: var(--fs-c-success); }
.fs-dot.warning { background-color: var(--fs-c-warning); }
.fs-dot.danger  { background-color: var(--fs-c-danger); }
.fs-dot.info    { background-color: var(--fs-c-info); }

/* ============================================================
 * IMPRESION
 * ============================================================ */
@media print {
    #fs-sidebar,
    #fs-topbar {
        display: none !important;
    }
    #fs-content {
        padding: 0 !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* ============================================================
 * DARK MODE: AJUSTES EXTRA SOBRE COMPONENTES DEL CORE
 * Cosas que no encajan en los tokens (fondos hardcoded del HTML
 * del core, navbar default, etc.)
 * ============================================================ */
[data-theme="dark"] .table thead th {
    background-color: var(--fs-c-bg);
}
[data-theme="dark"] .bg-light {
    background-color: var(--fs-c-bg-soft) !important;
    color: var(--fs-c-text) !important;
}
[data-theme="dark"] .bg-white {
    background-color: var(--fs-c-bg-elevated) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--fs-c-text) !important;
}
[data-theme="dark"] .text-secondary {
    color: var(--fs-c-text-muted) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--fs-c-border) !important;
}
[data-theme="dark"] .navbar.navbar-dark.bg-primary {
    background-color: var(--fs-c-sidebar-bg) !important;
}
[data-theme="dark"] .navbar-light {
    background-color: var(--fs-c-bg-elevated) !important;
}

/* ============================================================
 * STATUS ROWS DE TABLAS (CRITICO)
 * FacturaScripts pinta filas completas con clases Bootstrap
 * .table-success / .table-warning / .table-danger / .table-info
 * para resaltar estado (no enlazada, pagada, vencida, etc.).
 * Bootstrap 4.6 las pinta con colores crema/rosa hardcoded que
 * en dark mode quedan horribles y con bajo contraste.
 *
 * Aqui forzamos los selectores con !important para vencer a
 * Bootstrap, y usamos colores OPACOS en dark mode para que se
 * vean como "tarjetas" de estado bien legibles sobre el fondo
 * oscuro (en lugar de rgba con alpha 0.12 que casi no se nota).
 * ============================================================ */

/* LIGHT: re-afirmamos sobre Bootstrap con valor exacto del token */
.table .table-success > td,
.table .table-success > th,
.table tr.table-success > td,
.table-hover .table-success:hover > td {
    background-color: var(--fs-c-success-soft) !important;
    color: var(--fs-c-text) !important;
}
.table .table-warning > td,
.table .table-warning > th,
.table tr.table-warning > td,
.table-hover .table-warning:hover > td {
    background-color: var(--fs-c-warning-soft) !important;
    color: var(--fs-c-text) !important;
}
.table .table-danger > td,
.table .table-danger > th,
.table tr.table-danger > td,
.table-hover .table-danger:hover > td {
    background-color: var(--fs-c-danger-soft) !important;
    color: var(--fs-c-text) !important;
}
.table .table-info > td,
.table .table-info > th,
.table tr.table-info > td,
.table-hover .table-info:hover > td {
    background-color: var(--fs-c-info-soft) !important;
    color: var(--fs-c-text) !important;
}
.table .table-secondary > td,
.table .table-secondary > th,
.table tr.table-secondary > td {
    background-color: var(--fs-c-bg-soft) !important;
    color: var(--fs-c-text-muted) !important;
}

/* DARK: colores opacos que combinan con #0F1734 (fondo navy).
   Quitamos el requisito de que .table-* este dentro de .table para
   cubrir tambien los <tr class="table-warning"> que renderiza la JS
   de purchasesFormLines/salesFormLines cuando la factura esta vacia
   (la franja amarilla "Sin datos" / "Anadir producto"). */
[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > td,
[data-theme="dark"] .table-success > th,
[data-theme="dark"] .table-hover .table-success:hover > td {
    background-color: #0D2A22 !important;
    color: #5AE39E !important;
}
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning > th,
[data-theme="dark"] .table-hover .table-warning:hover > td {
    background-color: #2E2310 !important;
    color: #FFD27A !important;
}
[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > td,
[data-theme="dark"] .table-danger > th,
[data-theme="dark"] .table-hover .table-danger:hover > td {
    background-color: #2E1217 !important;
    color: #FF9999 !important;
}
[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > td,
[data-theme="dark"] .table-info > th,
[data-theme="dark"] .table-hover .table-info:hover > td {
    background-color: #0D2629 !important;
    color: #6FD7E8 !important;
}
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > td,
[data-theme="dark"] .table-secondary > th {
    background-color: var(--fs-c-bg) !important;
    color: var(--fs-c-text-soft) !important;
}

/* bg-warning, bg-danger, etc. cuando NO estan dentro de un card o de
   un alert (raw utility classes) tambien deben respetar dark mode */
[data-theme="dark"] .bg-warning:not(.card):not(.alert):not(.btn) {
    background-color: #2E2310 !important;
    color: #FFD27A !important;
}
[data-theme="dark"] .bg-success:not(.card):not(.alert):not(.btn) {
    background-color: #0D2A22 !important;
    color: #5AE39E !important;
}
[data-theme="dark"] .bg-danger:not(.card):not(.alert):not(.btn) {
    background-color: #2E1217 !important;
    color: #FF9999 !important;
}
[data-theme="dark"] .bg-info:not(.card):not(.alert):not(.btn) {
    background-color: #0D2629 !important;
    color: #6FD7E8 !important;
}

/* Hover normal (filas sin estado) en dark mode */
[data-theme="dark"] .table-hover tbody tr:not([class*="table-"]):hover {
    background-color: var(--fs-c-bg) !important;
}

/* Filas hover sobre status rows: respetar el color de estado pero
 * subir ligeramente el brillo */
[data-theme="dark"] .table-hover tr.table-warning:hover > td { background-color: #3A2D14 !important; }
[data-theme="dark"] .table-hover tr.table-danger:hover  > td { background-color: #3B1820 !important; }
[data-theme="dark"] .table-hover tr.table-success:hover > td { background-color: #11362C !important; }
[data-theme="dark"] .table-hover tr.table-info:hover    > td { background-color: #112F33 !important; }

/* Fix: el card con bg-warning del dashboard del core no encaja
 * en dark mode. */
[data-theme="dark"] .card.bg-warning {
    background-color: #2E2310 !important;
    color: #FFD27A !important;
}
[data-theme="dark"] .card.bg-warning .card-text,
[data-theme="dark"] .card.bg-warning li,
[data-theme="dark"] .card.bg-warning .h3 {
    color: #FFD27A !important;
}

/* ============================================================
 * ALERTS en dark mode
 * Por defecto las clases .alert-* del light usan colores soft
 * con texto oscuro (marron para warning, rojo oscuro para danger
 * etc.). En dark mode quedan marron-sobre-navy = ilegible.
 *
 * Aqui usamos la misma estrategia que con las status rows:
 * fondo OPACO oscuro de cada familia + texto vivo del mismo color.
 * El icono close (×) se hereda al color del alert.
 * ============================================================ */
[data-theme="dark"] .alert {
    background-color: var(--fs-c-bg-elevated);
    border-color: var(--fs-c-border);
    color: var(--fs-c-text);
}
[data-theme="dark"] .alert-primary {
    background-color: rgba(99, 91, 255, 0.18) !important;
    border-color: rgba(99, 91, 255, 0.30) !important;
    color: #C7C2FF !important;
}
[data-theme="dark"] .alert-success {
    background-color: #0D2A22 !important;
    border-color: #1A4A3A !important;
    color: #5AE39E !important;
}
[data-theme="dark"] .alert-warning {
    background-color: #2E2310 !important;
    border-color: #4A3A18 !important;
    color: #FFD27A !important;
}
[data-theme="dark"] .alert-danger {
    background-color: #2E1217 !important;
    border-color: #4A1B26 !important;
    color: #FF9999 !important;
}
[data-theme="dark"] .alert-info {
    background-color: #0D2629 !important;
    border-color: #1A3A40 !important;
    color: #6FD7E8 !important;
}
[data-theme="dark"] .alert-secondary,
[data-theme="dark"] .alert-light {
    background-color: var(--fs-c-bg) !important;
    border-color: var(--fs-c-border) !important;
    color: var(--fs-c-text-muted) !important;
}

/* El boton close (×) de los alerts en dark debe heredar el color del alert
 * para que se vea bien, no quedar negro/blanco hardcoded */
[data-theme="dark"] .alert .close,
[data-theme="dark"] .alert .close:hover {
    color: inherit !important;
    opacity: 0.7;
    text-shadow: none;
}
[data-theme="dark"] .alert .close:hover {
    opacity: 1;
}

/* Links dentro de alerts en dark: que conserven el color del alert
 * pero con underline visible */
[data-theme="dark"] .alert a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}
[data-theme="dark"] .alert a:not(.btn):hover {
    text-decoration: none;
    opacity: 0.85;
}

/* ============================================================
 * SELECT2 (CRITICO)
 *
 * FacturaScripts usa Select2 con el tema bootstrap4 para todos los
 * dropdowns con busqueda (idioma de usuario, almacen, serie,
 * proveedor, cliente, agente, codpais, etc.). Su CSS por defecto
 * fue disenado para tema claro: en dark mode el dropdown abierto
 * tiene fondo casi blanco con texto blanco -> ilegible.
 *
 * Aqui forzamos colores coherentes con nuestros tokens en LIGHT y
 * en DARK. Aplica a las dos variantes de tema que carga FS:
 *   .select2-container--default
 *   .select2-container--bootstrap4
 * ============================================================ */

/* LIGHT: armonizar bordes y colores con el tema (sin invertir) */
.select2-container--default .select2-selection,
.select2-container--bootstrap4 .select2-selection {
    background-color: var(--fs-c-bg);
    border: 1px solid var(--fs-c-border);
    color: var(--fs-c-text);
    border-radius: var(--fs-radius-sm);
    min-height: 38px;
}
.select2-container--default .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--fs-c-text) !important;
    line-height: 36px !important;
    padding-left: 0.75rem !important;
}
.select2-container--default .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection__placeholder {
    color: var(--fs-c-text-soft) !important;
}
.select2-container--default .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection__arrow {
    height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--fs-c-primary) !important;
    box-shadow: 0 0 0 4px var(--fs-c-primary-ring) !important;
}

.select2-dropdown {
    background-color: var(--fs-c-bg-elevated) !important;
    border: 1px solid var(--fs-c-border) !important;
    box-shadow: var(--fs-shadow-md);
    border-radius: var(--fs-radius-sm);
    color: var(--fs-c-text) !important;
}
.select2-search__field {
    background-color: var(--fs-c-bg) !important;
    color: var(--fs-c-text) !important;
    border: 1px solid var(--fs-c-border) !important;
    border-radius: var(--fs-radius-xs);
    padding: 0.375rem 0.5rem !important;
    outline: none;
}
.select2-search__field:focus {
    border-color: var(--fs-c-primary) !important;
    box-shadow: 0 0 0 3px var(--fs-c-primary-ring);
}
.select2-results__option {
    color: var(--fs-c-text) !important;
    padding: 0.45rem 0.75rem !important;
}
.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fs-c-primary-soft) !important;
    color: var(--fs-c-primary) !important;
}
.select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--fs-c-bg-soft) !important;
    color: var(--fs-c-text) !important;
    font-weight: 500;
}
/* Multi-select tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fs-c-primary-soft) !important;
    color: var(--fs-c-primary) !important;
    border: 1px solid transparent !important;
    border-radius: var(--fs-radius-xs);
    padding: 0.125rem 0.5rem !important;
    margin-top: 0.25rem !important;
}

/* DARK MODE: invertir todos los colores con buen contraste */
[data-theme="dark"] .select2-container--default .select2-selection,
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection {
    background-color: var(--fs-c-bg) !important;
    border-color: var(--fs-c-border) !important;
    color: var(--fs-c-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection__rendered,
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection__rendered li,
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__rendered li {
    color: var(--fs-c-text) !important;
}
[data-theme="dark"] .select2-dropdown {
    background-color: var(--fs-c-bg-elevated) !important;
    border-color: var(--fs-c-border-strong) !important;
    color: var(--fs-c-text) !important;
    box-shadow: var(--fs-shadow-lg) !important;
}
[data-theme="dark"] .select2-search__field {
    background-color: var(--fs-c-bg-soft) !important;
    color: var(--fs-c-text) !important;
    border-color: var(--fs-c-border) !important;
}
[data-theme="dark"] .select2-results__option {
    color: var(--fs-c-text) !important;
    background-color: var(--fs-c-bg-elevated);
}
[data-theme="dark"] .select2-results__option--highlighted,
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fs-c-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--fs-c-bg) !important;
    color: var(--fs-c-text) !important;
}
[data-theme="dark"] .select2-results__group {
    color: var(--fs-c-text-muted) !important;
    background-color: var(--fs-c-bg);
}
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fs-c-text-muted) transparent transparent transparent !important;
}

/* Mensaje "Cargando..." y "Sin resultados" */
[data-theme="dark"] .select2-results__option.loading-results,
[data-theme="dark"] .select2-results__option.select2-results__message {
    color: var(--fs-c-text-muted) !important;
    background-color: var(--fs-c-bg-elevated) !important;
}

/* ============================================================
 * SELECTS NATIVOS <select> en dark
 * Algunos navegadores ignoran el color del bg de un <select>.
 * Forzamos el bg + border para que combine con el formulario.
 * ============================================================ */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.custom-select {
    background-color: var(--fs-c-bg) !important;
    color: var(--fs-c-text) !important;
    border-color: var(--fs-c-border) !important;
}
[data-theme="dark"] select.form-control option,
[data-theme="dark"] select.custom-select option {
    background-color: var(--fs-c-bg-elevated);
    color: var(--fs-c-text);
}

/* ============================================================
 * FIELDSETS / LEGENDS (la captura mostraba "Avanzado" en cyan)
 * Algunos forms del core usan <legend> que en dark se ve raro.
 * ============================================================ */
[data-theme="dark"] legend,
[data-theme="dark"] .h4.text-info,
[data-theme="dark"] h4.text-info {
    color: var(--fs-c-text) !important;
    border-bottom: 1px solid var(--fs-c-border);
    padding-bottom: 0.25rem;
}