/* ============================================================
   CIAR | theme.css
   Modo OSCURO → [data-theme="dark"]
   Todo negro · bordes blancos · ícono dorado
   ============================================================ */

/* Base */
[data-theme="dark"] body,
[data-theme="dark"] {
  background-color: #000 !important;
  color: #fff !important;
}

/* Sidebar */
[data-theme="dark"] #sidebar {
  background: #000 !important;
  border-right: 1px solid #fff !important;
  color: #fff !important;
}

/* Topbar */
[data-theme="dark"] .topbar {
  background: #000 !important;
  border-bottom: 1px solid #fff !important;
  color: #fff !important;
}

/* Chip de usuario */
[data-theme="dark"] .chip {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* Botón de cambiar tema — fondo negro, borde blanco, ícono dorado */
[data-theme="dark"] #themeBtn {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #f5c542 !important;
}

[data-theme="dark"] #themeBtn svg,
[data-theme="dark"] #themeBtn .icon-sun,
[data-theme="dark"] #themeBtn .icon-muun {
  color: #f5c542 !important;
  fill: #f5c542 !important;
  stroke: #f5c542 !important;
}

/* Contenido principal */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content,
[data-theme="dark"] .page-content {
  background-color: #000 !important;
  color: #fff !important;
}

/* Cards y paneles */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box,
[data-theme="dark"] [class*="card"],
[data-theme="dark"] [class*="panel"] {
  background-color: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Stats cards del dashboard */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .kpi-card {
  background-color: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Tabla */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

[data-theme="dark"] thead,
[data-theme="dark"] th {
  background-color: #111 !important;
  color: #fff !important;
  border-color: #fff !important;
}

[data-theme="dark"] td {
  border-color: #333 !important;
  color: #fff !important;
}

[data-theme="dark"] tbody tr:hover {
  background-color: #111 !important;
}

/* Inputs y búsqueda */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] [class*="search"],
[data-theme="dark"] [class*="form-control"],
[data-theme="dark"] [class*="form-input"] {
  background-color: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #888 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #f5c542 !important;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.2) !important;
}

/* Textos */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #fff !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] [class*="subtitle"],
[data-theme="dark"] [class*="text-muted"] {
  color: #aaa !important;
}

/* Separadores */
[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] [class*="divider"] {
  border-color: #333 !important;
  background-color: #333 !important;
}

/* Charts / gráficos */
[data-theme="dark"] .chart-container,
[data-theme="dark"] [class*="chart-container"],
[data-theme="dark"] [class*="chart-wrapper"] {
  background-color: #000 !important;
  border: 1px solid #fff !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #000;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #f5c542;
}

/* Transición suave al cambiar de tema */
*,
*::before,
*::after {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.2s ease;
}

/* ============================================================
   CONFIGURACIÓN — session-card, botones de tema, meta items
   ============================================================ */

/* Tarjeta principal de sesión */
[data-theme="dark"] .session-card {
  background: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}

[data-theme="dark"] .session-card:hover {
  box-shadow: 0 0 0 2px #fff !important;
  transform: translateY(-2px);
}

/* Items de metadata (rol, id, etc.) */
[data-theme="dark"] .session-meta-item {
  background: #111 !important;
  border: 1px solid #333 !important;
}

[data-theme="dark"] .session-meta-label {
  color: #aaa !important;
}

[data-theme="dark"] .session-meta-value {
  color: #fff !important;
}

[data-theme="dark"] .session-name,
[data-theme="dark"] .session-header {
  color: #fff !important;
}

/* Badge de rol */
[data-theme="dark"] .session-role {
  background: #0a1628 !important;
  color: #60a5fa !important;
}

/* Badge activo/inactivo */
[data-theme="dark"] .session-badge.active {
  background: #052e16 !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .session-badge.inactive {
  background: #1c0a0a !important;
  color: #f87171 !important;
}

/* Botones Oscuro / Claro en configuración */
[data-theme="dark"] button.dark,
[data-theme="dark"] button.clear {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] button.dark:hover,
[data-theme="dark"] button.clear:hover {
  background: #111 !important;
}

[data-theme="dark"] button.dark.active,
[data-theme="dark"] button.clear.active {
  background: #fff !important;
  color: #000 !important;
}

/* Tabs de búsquedas */
[data-theme="dark"] .tabs-card {
  background: #000 !important;
  border: 1px solid #333 !important;
}

[data-theme="dark"] .tab {
  background: transparent !important;
  color: #aaa !important;
  border: none !important;
}

[data-theme="dark"] .tab.active {
  background: #fff !important;
  color: #000 !important;
}

/* Área de contenido de búsquedas */
[data-theme="dark"] #busq-content {
  background: #000 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
}

[data-theme="dark"] #form-area {
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
}

/* Botones expandir/contraer sidebar */
[data-theme="dark"] .btnexpandir,
[data-theme="dark"] .btmcontraer {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .btnexpandir:hover,
[data-theme="dark"] .btmcontraer:hover {
  background: #111 !important;
}

/* ============================================================
   DASHBOARD — cards KPI, panels, tabla, skeleton, spinner
   ============================================================ */

/* Cards KPI */
[data-theme="dark"] .card {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .card-icon {
  color: #f5c542 !important;
  stroke: #f5c542 !important;
}

[data-theme="dark"] .kpi {
  color: #fff !important;
}

/* Skeleton loader */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%) !important;
  background-size: 200% 100% !important;
}

/* Panels de gráficas */
[data-theme="dark"] .panel {
  background: #000 !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
  color: #fff !important;
}

[data-theme="dark"] .sub {
  background: transparent;
  color: #fff !important;
}

/* Cards dentro de panel (tabla) */
[data-theme="dark"] .panel .cards {
  background: #000 !important;
  border: 1px solid #333 !important;
}

/* Spinner de carga */
[data-theme="dark"] .spinner {
  border-color: #333 !important;
  border-top-color: #f5c542 !important;
}

/* Texto de carga */
[data-theme="dark"] [style*="color: #062a56"] {
  color: #f5c542 !important;
}

/* ============================================================
   VENTAS POR HORA — KPI cards, charts, tabla, skeletons
   ============================================================ */

/* KPI cards blancas (inline style background:white) */
[data-theme="dark"] #vhKpiGrid > div {
  background: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* Labels pequeños de KPI */
[data-theme="dark"] #vhKpiGrid > div > div[style*="color:#64748b"],
[data-theme="dark"] #vhKpiGrid > div > div[style*="color:#94a3b8"] {
  color: #aaa !important;
}

/* Skeleton claro */
[data-theme="dark"] .vh-sk {
  background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%) !important;
  background-size: 200% 100% !important;
}

/* Select y inputs del header */
[data-theme="dark"] #vhRango,
[data-theme="dark"] #vhFechaInicio,
[data-theme="dark"] #vhFechaFin {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Botón Actualizar */
[data-theme="dark"] #vhReload {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Panel distribución horaria y ranking */
[data-theme="dark"] #vhKpiGrid,
[data-theme="dark"] #vhChart,
[data-theme="dark"] #vhRankingBars {
  color: #fff !important;
}

[data-theme="dark"]
  div[style*="background:white"][style*="border-radius:16px"] {
  background: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: none !important;
}

/* Títulos dentro de panels */
[data-theme="dark"] div[style*="color:#062a56"] {
  color: #fff !important;
}

/* Tabla ventas por hora */
[data-theme="dark"] #vhRows tr:hover {
  background: #111 !important;
}

[data-theme="dark"] #vhRows td {
  color: #fff !important;
  border-color: #333 !important;
}

/* ============================================================
   COMISIONES — KPI cards, charts, tabla, skeletons
   ============================================================ */

/* Cards blancas de comisiones */
[data-theme="dark"] #coGenerado,
[data-theme="dark"] #coPagado {
  color: #fff !important;
}

[data-theme="dark"] .co-sk {
  background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%) !important;
  background-size: 200% 100% !important;
}

/* Input mes y botón Ver */
[data-theme="dark"] #coMes {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] #coBtnVer {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Tabla comisiones */
[data-theme="dark"] #coRows tr:hover {
  background: #111 !important;
}

[data-theme="dark"] #coRows td {
  color: #fff !important;
  border-color: #333 !important;
}

/* ============================================================
   PRODUCTOS — lista, tabla, modal
   ============================================================ */

/* Header de productos */
[data-theme="dark"] .header-product {
  color: #fff !important;
}

/* Select y search de productos */
[data-theme="dark"] #prCat,
[data-theme="dark"] #prSearch {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Tabla de productos */
[data-theme="dark"] .sales-table {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

[data-theme="dark"] .sales-table thead tr {
  background: #111 !important;
}

[data-theme="dark"] .sales-table th {
  background: #111 !important;
  color: #fff !important;
  border-color: #333 !important;
}

[data-theme="dark"] .sales-table td {
  color: #fff !important;
  border-color: #333 !important;
}

[data-theme="dark"] .sales-table tbody tr:hover {
  background: #111 !important;
}

/* MODAL de productos */
[data-theme="dark"] .modal-box {
  background: #000 !important;
  border: 1px solid #fff !important;
  box-shadow: 0 24px 64px rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select,
[data-theme="dark"] .modal-box textarea {
  background: #111 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .modal-box label {
  color: #aaa !important;
}

[data-theme="dark"] .modal-box .pr-section-label {
  color: #aaa !important;
  border-color: #333 !important;
}

[data-theme="dark"] .btn-premium-close {
  background: #111 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Fondo del modal overlay */
[data-theme="dark"] #prModal {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* ============================================================
   PANELD — contenedor principal de páginas
   ============================================================ */

[data-theme="dark"] .paneld {
  background: #000 !important;
  color: #fff !important;
}

[data-theme="dark"] .cont-header-vent {
  background: #000 !important;
  border-color: #333 !important;
  color: #fff !important;
}

/* grids general */
[data-theme="dark"] .grids {
  background: #000 !important;
}

/* ============================================================
   REGISTRAR VENTA — formulario completo
   ============================================================ */

/* Panel principal */
[data-theme="dark"] .panels {
  background: #000 !important;
  color: #fff !important;
}

[data-theme="dark"] .cont-header {
  background: #000 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* Caja de total */
[data-theme="dark"] #vnTotalFinal {
  color: #f5c542 !important;
}

[data-theme="dark"] div[style*="background:#fff"][style*="border:solid"] {
  background: #000 !important;
  border-color: #fff !important;
}

/* Cards del formulario */
[data-theme="dark"] .cards {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Todos los inputs y selects del formulario */
[data-theme="dark"] .panels input,
[data-theme="dark"] .panels select,
[data-theme="dark"] .panels textarea {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .panels input::placeholder {
  color: #888 !important;
}

/* Input bloqueado */
[data-theme="dark"] .input-lock {
  background: #111 !important;
  color: #aaa !important;
}

/* Lista de búsqueda cliente/producto */
[data-theme="dark"] .prod-list-corporate {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Sección certificado CIAR manual */
[data-theme="dark"] div[style*="border:1.5px dashed #1d4ed8"] {
  background: #000 !important;
  border-color: #fff !important;
}

[data-theme="dark"] #vnManualNombre,
[data-theme="dark"] #vnManualPrecio {
  background: #111 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Tabla de productos agregados */
[data-theme="dark"] .products-table {
  background: #000 !important;
  color: #fff !important;
}

[data-theme="dark"] .products-table thead tr {
  background: #111 !important;
}

[data-theme="dark"] .products-table th,
[data-theme="dark"] .products-table td {
  color: #fff !important;
  border-color: #333 !important;
}

[data-theme="dark"] .table-responsive-wrapper {
  border-color: #fff !important;
  background: #000 !important;
}

/* Sección pagos adicionales */
[data-theme="dark"]
  div[style*="border:2px solid #062a56"][style*="border-radius:12px"] {
  background: #000 !important;
  border-color: #fff !important;
}

/* N° Operación y Observación */
[data-theme="dark"] #vnNroOperacion,
[data-theme="dark"] #vnObservacion {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Input dirección envío */
[data-theme="dark"] #envioDireccion,
[data-theme="dark"] #envioCantidad {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Cards de agencia (OLVA / SHALOM) */
[data-theme="dark"] .envio-card {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .envio-card:hover {
  background: #111 !important;
}

[data-theme="dark"] .card-envio {
  background: #000 !important;
  border: 1px solid #333 !important;
}

[data-theme="dark"] .envio-title {
  color: #fff !important;
}

[data-theme="dark"] .envio-desc {
  color: #aaa !important;
}

/* Botones del formulario */
[data-theme="dark"] .btns {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .btns1 {
  background: #000 !important;
  border: 1px solid #f5c542 !important;
  color: #f5c542 !important;
}

[data-theme="dark"] .btn-buscar {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] #vnManualAdd {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

/* Sección de espacio envío */
[data-theme="dark"] .espcio_envio {
  background: #000 !important;
  color: #fff !important;
}

/* Labels y textos muted */
[data-theme="dark"] .mutedr {
  color: #aaa !important;
}

/* Mensaje sin productos */
[data-theme="dark"] #mensajeSinProductos {
  color: #aaa !important;
}

/* ============================================================
   DASHBOARD — corrección panels de gráficas con fondo blanco
   ============================================================ */

/* Panel gráficas (el fondo blanco que se ve en la imagen) */
[data-theme="dark"] .panel {
  background: #000 !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
  color: #fff !important;
}

[data-theme="dark"] .panel .sub {
  color: #fff !important;
}

/* Cards KPI del dashboard */
[data-theme="dark"] .card {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .card .muted {
  color: #aaa !important;
}

[data-theme="dark"] .card .kpi {
  color: #fff !important;
}

[data-theme="dark"] .card .card-icon {
  stroke: #f5c542 !important;
}

/* Cards internas (tabla últimas ventas) */
[data-theme="dark"] .panel > .cards {
  background: #000 !important;
  border: 1px solid #333 !important;
}

/* Skeleton loader */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%) !important;
  background-size: 200% 100% !important;
  animation: skeletonDark 1.4s infinite !important;
}

@keyframes skeletonDark {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Tags de estado en tabla */
[data-theme="dark"] .tag.success {
  background: #052e16 !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .tag.warning {
  background: #1c1005 !important;
  color: #fbbf24 !important;
}

/* Empty state box */
[data-theme="dark"] .emptyBox {
  color: #fff !important;
}

[data-theme="dark"] .invoiceIcon {
  fill: #1e3a5f !important;
}

[data-theme="dark"] .moneyIcon {
  fill: #f5c542 !important;
}

[data-theme="dark"] .chartIcon {
  fill: #3b82f6 !important;
}

/* ============================================================
   CANVAS — forzar fondo del canvas en modo oscuro
   ============================================================ */
[data-theme="dark"] canvas {
  background: #000 !important;
  border-radius: 10px;
}

/* ============================================================
   PANEL — quitar borde blanco que rodea las gráficas
   ============================================================ */
[data-theme="dark"] .panel {
  background: #000 !important;
  border: 1px solid #333 !important; /* borde sutil gris oscuro, no blanco */
  box-shadow: none !important;
  color: #fff !important;
}

/* ============================================================
   LOGIN — modo oscuro
   ============================================================ */

[data-theme="dark"] .loginBox {
  background: #000 !important;
  border-color: #f5c542 !important;
  box-shadow: 0 0 25px rgba(245, 197, 66, 0.4) !important;
  color: #fff !important;
}

[data-theme="dark"] .cont_login {
  background: #111 !important;
}

[data-theme="dark"] .main-title {
  color: #f5c542 !important;
}

[data-theme="dark"] .subtitle {
  color: #aaa !important;
}

[data-theme="dark"] .contform {
  background: transparent !important;
}

[data-theme="dark"] .loginBox input {
  background: #111 !important;
  border-color: #444 !important;
  color: #fff !important;
}

[data-theme="dark"] .loginBox input::placeholder {
  color: #555 !important;
}

[data-theme="dark"] .loginBox input:focus {
  border-color: #f5c542 !important;
  box-shadow: 0 0 8px rgba(245, 197, 66, 0.3) !important;
}

[data-theme="dark"] .loginBox label {
  color: #aaa !important;
  background: #111 !important;
}

[data-theme="dark"] .loginBox input:focus + label,
[data-theme="dark"] .loginBox input:not(:placeholder-shown) + label {
  color: #f5c542 !important;
  background: #111 !important;
}

[data-theme="dark"] .loginBox .btn {
  background: #f5c542 !important;
  color: #000 !important;
  border: none !important;
}

[data-theme="dark"] .loginBox .btn:hover {
  background: #e6b800 !important;
}

[data-theme="dark"] .muteds {
  background: #111 !important;
  color: #aaa !important;
}

[data-theme="dark"] .mutedl {
  color: #aaa !important;
}

[data-theme="dark"] .segundo-back {
  background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .errormesageor {
  background: #1c0a0a !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

[data-theme="dark"] .success {
  background: #052e16 !important;
  color: #4ade80 !important;
  border-color: #166534 !important;
}