/* ============================================================
   Citio — Tema oscuro "carbón" (tema por defecto)
   Base neutra estilo Nivelo + acentos del manual de marca.
   Naranja #e58217 como herramienta visual (primario/activo);
   verde/rojo/azul como guías semánticas en versión des-saturada.
   ============================================================ */

html.dark {
    --cz-bg: #17171a;
    --cz-card: #1e1e21;
    --cz-card-2: #232327;
    --cz-input: #26262a;
    --cz-line: rgba(255, 255, 255, 0.07);
    --cz-line-strong: rgba(255, 255, 255, 0.12);
    --cz-text: #ececef;
    --cz-text-2: #c6c6cc;
    --cz-muted: #9a9aa2;
    --cz-faint: #77777f;
    --cz-orange: #e58217;
    --cz-orange-soft: rgba(229, 130, 23, 0.14);
    --cz-radius: 0.85rem;
    --cz-radius-lg: 1rem;
    color-scheme: dark;
}

/* ── Superficies base ── */
html.dark .fi-body,
html.dark .fi-layout,
html.dark .fi-main-ctn,
html.dark .fi-main {
    background-color: var(--cz-bg) !important;
}

html.dark .fi-topbar {
    background: #1f1f21 !important;
    border-bottom: 1px solid var(--cz-line) !important;
    box-shadow: none !important;
}

/* Tarjetas, secciones, widgets y tablas: superficie carbón + borde sutil */
html.dark .fi-section,
html.dark .fi-wi,
html.dark .fi-wi-chart,
html.dark .fi-wi-table,
html.dark .fi-wi-widget,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-ta-ctn,
html.dark .fi-ta-content-ctn {
    background: var(--cz-card) !important;
    border: 1px solid var(--cz-line) !important;
    border-radius: var(--cz-radius-lg) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
html.dark .fi-wi-stats-overview-stat {
    border-inline-start: 3px solid var(--cz-orange) !important;
    border-radius: var(--cz-radius) !important;
}
html.dark .fi-section-header {
    border-bottom: 1px solid var(--cz-line) !important;
}

/* Tablas: TODO el thead parejo (incluida la celda del checkbox, que no
   lleva fi-ta-header-cell y quedaba como recuadro de otro color) */
html.dark .fi-ta-header-cell,
html.dark .fi-ta-table thead th,
html.dark .fi-ta-table thead td {
    background: var(--cz-card-2) !important;
    color: var(--cz-muted) !important;
    border-bottom: none !important;
}
html.dark .fi-ta-cell {
    border-bottom: 1px solid var(--cz-line) !important;
    color: var(--cz-text-2) !important;
}
html.dark .fi-ta-row:last-child .fi-ta-cell { border-bottom: none !important; }
html.dark .fi-ta-row:hover { background: rgba(229, 130, 23, 0.05) !important; }
html.dark .fi-ta-pagination {
    border-top: 1px solid var(--cz-line) !important;
    background: var(--cz-card) !important;
}

/* Texto */
html.dark .fi-header-heading { color: var(--cz-text) !important; }
html.dark .fi-header-subheading,
html.dark .fi-breadcrumbs-item-label,
html.dark .fi-breadcrumbs-item a { color: var(--cz-muted) !important; }
html.dark .fi-section-header-heading,
html.dark .fi-wi-heading,
html.dark .fi-modal-heading { color: var(--cz-text) !important; }
html.dark .fi-section-header-description { color: var(--cz-muted) !important; }
html.dark .fi-fo-field-wrp-label,
html.dark .fi-fo-field-wrp label { color: var(--cz-text-2) !important; }
html.dark .fi-fo-field-wrp-hint,
html.dark .fi-fo-field-wrp-helper-text { color: var(--cz-faint) !important; }
html.dark .fi-in-entry-wrp-label { color: var(--cz-muted) !important; }
html.dark .fi-in-entry-wrp-content { color: var(--cz-text-2) !important; }

/* ── Formularios ── */
html.dark .fi-input-wrp,
html.dark .fi-select-input-ctn {
    background: var(--cz-input) !important;
    border: 1px solid var(--cz-line-strong) !important;
    border-radius: 0.55rem !important;
    box-shadow: none !important;
}
html.dark .fi-input-wrp:focus-within,
html.dark .fi-select-input-ctn:focus-within {
    border-color: var(--cz-orange) !important;
    box-shadow: 0 0 0 3px var(--cz-orange-soft) !important;
}
html.dark .fi-input,
html.dark .fi-select-input,
html.dark .fi-fo-field-wrp textarea { color: var(--cz-text) !important; }
html.dark .fi-fo-repeater-item,
html.dark .fi-fo-builder-block {
    background: var(--cz-card) !important;
    border: 1px solid var(--cz-line) !important;
}
html.dark .fi-fo-repeater-item-header {
    background: var(--cz-card-2) !important;
    border-bottom: 1px solid var(--cz-line) !important;
}

/* Tabs pill */
html.dark .fi-tabs,
html.dark .fi-sc-tabs {
    background: var(--cz-card-2) !important;
    border-radius: 0.65rem !important;
    border-bottom: none !important;
    padding: 0.25rem !important;
}
html.dark .fi-tabs-tab { color: var(--cz-muted) !important; border: none !important; }
html.dark .fi-tabs-tab.fi-active {
    background: var(--cz-input) !important;
    color: #f0b26a !important;
}

/* Modales y dropdowns */
html.dark .fi-modal-window {
    background: #202024 !important;
    border: 1px solid var(--cz-line) !important;
    border-radius: var(--cz-radius-lg) !important;
}
html.dark .fi-modal-header { background: transparent !important; border-bottom: 1px solid var(--cz-line) !important; }
html.dark .fi-modal-footer { background: rgba(255, 255, 255, 0.02) !important; border-top: 1px solid var(--cz-line) !important; }
html.dark .fi-dropdown-panel {
    background: #232327 !important;
    border: 1px solid var(--cz-line-strong) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
html.dark .fi-dropdown-list-item:hover {
    background: var(--cz-orange-soft) !important;
    color: #f0b26a !important;
}

/* ── Gama homogénea: badges des-saturados (verde/rojo/azul como guía,
      no como grito). Usa las vars --color-* que Filament define por color. ── */
html.dark .fi-badge.fi-color-success,
html.dark .fi-badge.fi-color-danger,
html.dark .fi-badge.fi-color-warning,
html.dark .fi-badge.fi-color-info,
html.dark .fi-badge.fi-color-primary,
html.dark .fi-badge.fi-color-gray {
    background: color-mix(in srgb, var(--color-500) 19%, transparent) !important;
    color: color-mix(in srgb, var(--color-300) 100%, #ffffff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-500) 38%, transparent) !important;
    border: none !important;
}
html.dark .fi-badge.fi-color-gray {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--cz-muted) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

/* Botones de acciones secundarias: tinte suave en lugar de bloque sólido.
   El primario (naranja) se queda sólido: es EL botón. */
html.dark .fi-btn.fi-color-success,
html.dark .fi-btn.fi-color-danger,
html.dark .fi-btn.fi-color-warning,
html.dark .fi-btn.fi-color-info {
    background: color-mix(in srgb, var(--color-500) 21%, #202024) !important;
    color: color-mix(in srgb, var(--color-300) 100%, #ffffff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-500) 42%, transparent) !important;
}
html.dark .fi-btn.fi-color-success:hover,
html.dark .fi-btn.fi-color-danger:hover,
html.dark .fi-btn.fi-color-warning:hover,
html.dark .fi-btn.fi-color-info:hover {
    background: color-mix(in srgb, var(--color-500) 33%, #202024) !important;
}
html.dark .fi-btn.fi-color-gray {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--cz-text-2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html.dark .fi-btn.fi-color-gray:hover { background: rgba(255, 255, 255, 0.09) !important; }
html.dark .fi-btn.fi-color-primary {
    background: var(--cz-orange) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(229, 130, 23, 0.25) !important;
}
html.dark .fi-btn.fi-color-primary:hover { background: #ef8f28 !important; }

/* ── Kanban: "globos" y acentos des-saturados en oscuro.
      Cada columna define --acento; aquí se le baja la saturación al usarlo. ── */
html.dark .kanban-col {
    background: var(--cz-card) !important;
    border: 1px solid var(--cz-line) !important;
}
html.dark .kanban-body { background: rgba(255, 255, 255, 0.015) !important; }
html.dark .kanban-head .title { color: color-mix(in srgb, var(--acento) 78%, #d6d6da) !important; }
html.dark .kanban-head {
    background: color-mix(in srgb, var(--acento) 9%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--acento) 34%, transparent) !important;
}
html.dark .kanban-card {
    background: #232327 !important;
    border: 1px solid var(--cz-line) !important;
    border-left: 3px solid color-mix(in srgb, var(--acento) 72%, #3a3a3e) !important;
}
html.dark .kanban-card:hover {
    border-color: color-mix(in srgb, var(--acento) 45%, var(--cz-line-strong)) !important;
}
html.dark .card-folio {
    background: color-mix(in srgb, var(--acento) 18%, transparent) !important;
    color: color-mix(in srgb, var(--acento) 78%, #e8e8ec) !important;
}
html.dark .card-monto { color: color-mix(in srgb, var(--acento) 75%, #e8e8ec) !important; }
html.dark .kanban-head .count {
    background: color-mix(in srgb, var(--acento) 20%, transparent) !important;
    color: color-mix(in srgb, var(--acento) 78%, #e8e8ec) !important;
}
html.dark .btn-move {
    background: color-mix(in srgb, var(--acento) 17%, transparent) !important;
    color: color-mix(in srgb, var(--acento) 78%, #e8e8ec) !important;
    border: 1px solid color-mix(in srgb, var(--acento) 34%, transparent) !important;
}
html.dark .btn-move:hover {
    background: color-mix(in srgb, var(--acento) 38%, transparent) !important;
    color: #ffffff !important;
}
html.dark .kanban-filtros {
    background: var(--cz-card) !important;
    border-color: var(--cz-line) !important;
}
html.dark .kanban-filtros select {
    background: var(--cz-input) !important;
    border-color: var(--cz-line-strong) !important;
    color: var(--cz-text-2) !important;
}
html.dark .pre-search-bar {
    background: var(--cz-card) !important;
    border: 1px solid var(--cz-line-strong) !important;
}
html.dark .pre-search-bar input { color: var(--cz-text) !important; }

/* Vistas Citio (detalle de registros/órdenes/etc.) */
html.dark .citio-header,
html.dark .citio-card,
html.dark .citio-table,
html.dark .citio-totales-wrapper.citio-totales-wrapper,
html.dark .citio-stat-tile {
    background: var(--cz-card) !important;
    border-color: var(--cz-line) !important;
}
html.dark .citio-header { border-left: 4px solid color-mix(in srgb, var(--acento, var(--cz-orange)) 78%, #3a3a3e) !important; }
html.dark .citio-table thead th { background: var(--cz-card-2) !important; color: var(--cz-muted) !important; }
html.dark .citio-table tbody td { border-bottom-color: var(--cz-line) !important; }
html.dark .citio-tabs-nav { background: var(--cz-card-2) !important; }
html.dark .citio-tab-btn[aria-selected="true"] {
    background: var(--cz-input) !important;
    color: #f0b26a !important;
}
html.dark .citio-notas-box {
    background: rgba(229, 130, 23, 0.07) !important;
    border: 1px solid rgba(229, 130, 23, 0.2) !important;
    border-left: 3px solid rgba(229, 130, 23, 0.55) !important;
    color: var(--cz-text-2) !important;
}
html.dark .citio-comment-form {
    background: rgba(229, 130, 23, 0.06) !important;
    border: 1px solid rgba(229, 130, 23, 0.18) !important;
}
html.dark .citio-comment-form textarea {
    background: var(--cz-input) !important;
    border: 1px solid var(--cz-line-strong) !important;
    color: var(--cz-text) !important;
}

/* Páginas custom (balance, estado de cuenta, estado de resultados, calendario,
   inventario, mapa): superficies carbón coherentes. */
html.dark .bc-col, html.dark .ec-col,
html.dark .er-card, html.dark .er-split-box,
html.dark .cal-card, html.dark .cal-container,
html.dark .cat-card, html.dark .rep-card,
html.dark .cuenta-item,
html.dark .mapa-wrapper .mapa-sidebar,
html.dark .mapa-filtros-card,
html.dark .mapa-container {
    background: var(--cz-card) !important;
    border-color: var(--cz-line) !important;
}
html.dark .bc-head, html.dark .ec-head { background: var(--cz-card-2) !important; border-bottom-color: var(--cz-line) !important; }
html.dark .ec-table thead th, html.dark .er-table thead th { background: var(--cz-card-2) !important; color: var(--cz-muted) !important; }
html.dark .ec-table tbody td, html.dark .er-table tbody td { border-bottom-color: var(--cz-line) !important; }

/* Encabezados de grupo en tablas agrupadas (estilo Nivelo): el encabezado
   vive "fuera del globo" — fondo de página, sin caja gris — y las filas del
   grupo quedan como tarjeta debajo. */
html.dark .fi-ta-group-header {
    background: var(--cz-bg) !important;
    border-bottom: none !important;
}
html.dark .fi-ta-group-header-row > th,
html.dark .fi-ta-group-header-row > td {
    background: var(--cz-bg) !important;
    border-top: 0.75rem solid var(--cz-bg) !important;
}
html.dark .fi-ta-group-heading { color: var(--cz-text) !important; }
html.dark .fi-ta-group-description { color: var(--cz-muted) !important; }
/* Chevron de colapsar: redondo y discreto (nada de cuadro naranja) */
html.dark .fi-ta-group-header .fi-icon-btn {
    color: var(--cz-muted) !important;
    background: transparent !important;
    border-radius: 9999px !important;
}
html.dark .fi-ta-group-header .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--cz-text) !important;
}

/* Etiqueta de estatus editable (SelectColumn): pastilla estilo Monday.
   El tinte por valor lo pone citioTintEstadoSelects() del panel. */
html.dark .fi-ta-cell-estado select {
    border-radius: 9999px !important;
    border: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 1.6rem 0.15rem 0.7rem !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    cursor: pointer !important;
    min-height: auto !important;
}

/* El contenedor interno de la tabla NO redondea dentro de la caja exterior
   (dibujaba una "curvita" junto a la casilla de selección). */
html.dark .fi-ta-ctn .fi-ta-content-ctn {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Scrollbars discretos */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.22); }