/**
 * Modernización visual — ERP-MORFFE
 * Cargado nativamente por el core de Perfex si el fichero existe (ver
 * application/helpers/assets_helper.php, themes_helper.php, template_helper.php).
 * No requiere tocar PHP. Se añade sobre Tailwind nativo (prefix tw-) + Bootstrap,
 * nunca con !important salvo que se indique el motivo puntual.
 *
 * Fase 2 — bloques cubiertos hasta ahora:
 *   1) Dashboard (scope body.dashboard, no sale de ahí)
 *   2) Capa transversal: modals, DataTables, progress bars (toda la app admin)
 * Tabs quedan fuera a propósito (3 patrones distintos conviviendo).
 */

/* =========================================================================
   Tokens de diseño globales (paleta / radios / sombras)
   Definidos en :root para que la capa transversal (modals, DataTables,
   progress bars) y el bloque específico de Dashboard compartan los mismos
   valores. Solo custom.css los usa; no tocan las variables de Tailwind.
   ========================================================================= */
:root {
  --db-surface: #ffffff;
  --db-border: rgba(15, 23, 42, 0.08);
  --db-border-strong: rgba(15, 23, 42, 0.13);
  --db-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px -14px rgba(15, 23, 42, 0.12);
  --db-radius-lg: 16px;
  --db-radius-md: 12px;
  --db-accent-from: #4f46e5;
  --db-accent-to: #0ea5e9;
  --db-accent: #4f46e5;
  --db-text-strong: #0f172a;
  --db-text-muted: #64748b;
}

/* =========================================================================
   Dashboard — lienzo (SOLO esta pantalla, no es parte de la capa transversal)
   ========================================================================= */
body.dashboard {
  --db-canvas: #f6f7f9;
  background: var(--db-canvas);
}

/* =========================================================================
   Ritmo / aire general del lienzo
   ========================================================================= */
body.dashboard #wrapper > .content {
  padding-top: 28px;
  padding-bottom: 40px;
}

body.dashboard [data-container] {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* =========================================================================
   Cards (widgets) — más peso visual, menos "panel de tabla" genérico
   ========================================================================= */
body.dashboard .panel_s {
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow);
  margin-bottom: 28px;
  overflow: hidden;
}

body.dashboard .panel_s .panel-body {
  padding: 22px 24px;
}

body.dashboard .panel_s hr {
  border-color: var(--db-border);
  opacity: 1;
}

/* Título de cada widget (fila icono + texto al inicio de cada card) */
body.dashboard .panel_s .panel-body > .tw-flex:first-child span.tw-text-neutral-700,
body.dashboard .panel_s .panel-body > .tw-flex:first-child p.tw-font-semibold {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--db-text-strong);
  letter-spacing: -0.01em;
}

/* =========================================================================
   Tarjetas de KPI superiores (Facturas / Leads / Proyectos / Tareas)
   ========================================================================= */
body.dashboard .top_stats_wrapper {
  position: relative;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow);
  padding: 18px 22px 20px;
  background: var(--db-surface);
}

body.dashboard .top_stats_wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--db-radius-md) var(--db-radius-md) 0 0;
  background: linear-gradient(90deg, var(--db-accent-from), var(--db-accent-to));
}

body.dashboard .top_stats_wrapper .tw-font-medium {
  font-size: 0.84rem;
  color: var(--db-text-muted);
}

body.dashboard .top_stats_wrapper .tw-font-semibold {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--db-text-strong);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Donuts / gráficas (Chart.js) — respiración de la card, no tocamos datos/colores
   ========================================================================= */
body.dashboard .panel_s canvas {
  margin-top: 4px;
}

/* =========================================================================
   Alerta "Cron Job Warning" y similares — mismo lenguaje visual, sin tocar copy
   ========================================================================= */
body.dashboard .content > .row > .alert {
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow);
}

/* =========================================================================
   Botón "Opciones de Tablero" (screen options) — coherencia con el resto
   ========================================================================= */
body.dashboard .screen-options-btn {
  border-radius: var(--db-radius-md) 0 0 var(--db-radius-md);
  font-weight: 600;
}

/* =========================================================================================
   CAPA TRANSVERSAL — aplica a TODA la app admin (no solo Dashboard)
   Alcance acordado: modals, barras de progreso, DataTables. Los tabs quedan
   fuera a propósito (3 patrones distintos conviviendo, se abordan aparte).
   ========================================================================================= */

/* -------------------------------------------------------------------------
   Modals — mismo lenguaje visual que las cards nuevas (radio/sombra/tipografía)
   No se toca .modal-body (padding-top/bottom:0 es intencional del core, ver
   assets/css/style.min.css: evita doble espaciado con header/footer)
   ------------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 24px 48px -20px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.modal-header {
  padding: 20px 24px;
}

.modal-header .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--db-text-strong);
  letter-spacing: -0.01em;
}

.modal-header .close {
  top: 18px;
  right: 20px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.modal-header .close:hover {
  opacity: 1;
}

.modal-body {
  padding-left: 24px;
  padding-right: 24px;
}

.modal-footer {
  padding: 16px 24px;
}

/* -------------------------------------------------------------------------
   Barras de progreso — finas y redondeadas en toda la app
   ------------------------------------------------------------------------- */
.progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  box-shadow: none;
}

.progress-bar-mini {
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   DataTables — menos densidad de tabla por defecto, buscador/paginación acordes
   ".dataTable" es la clase real y universal: la añade el propio plugin de
   DataTables a CUALQUIER tabla al inicializarla (confirmado en Leads,
   Invoices...). ".dt-table" es solo una clase que algunas vistas concretas
   escriben a mano (dashboard, expenses...) — se mantiene por si acaso pero
   ".dataTable" es la que de verdad cubre todos los listados.
   ------------------------------------------------------------------------- */
table.dataTable thead th,
table.dt-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-text-muted);
  border-bottom: 1px solid var(--db-border-strong);
}

table.dataTable tbody td,
table.dt-table tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

table.dataTable tbody tr:hover,
table.dt-table tbody tr:hover {
  background: rgba(79, 70, 229, 0.04);
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 999px;
  border: 1px solid var(--db-border-strong);
  padding: 5px 14px;
}

.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
  border-radius: 8px;
  margin: 0 2px;
  border-color: var(--db-border-strong);
}

.dataTables_wrapper .dataTables_paginate .pagination > li:first-child > a,
.dataTables_wrapper .dataTables_paginate .pagination > li:last-child > a {
  border-radius: 8px;
}

.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > span {
  background-color: var(--db-accent);
  border-color: var(--db-accent);
}

/* -------------------------------------------------------------------------
   Tabs — ".nav-tabs-horizontal" es UN solo componente (27 vistas), no 3
   patrones distintos: Proyecto y el nivel exterior de Staff usan el
   modificador ".nav-tabs-segmented" (caja gris tipo píldora); el interior
   de Staff y de Clientes usan la base sin modificador (subrayado plano).
   Una sola pasada cubre ambas variantes.
   ------------------------------------------------------------------------- */
.nav-tabs-horizontal > li.active > a,
.nav-tabs-horizontal > li.active > a:focus,
.nav-tabs-horizontal > li.active > a:hover {
  border-color: var(--db-accent);
  color: var(--db-accent);
}

.nav-tabs-horizontal > li > a:hover {
  color: var(--db-accent);
}

.nav-tabs-segmented {
  background-color: rgba(15, 23, 42, 0.05);
  border-radius: var(--db-radius-md);
}

.nav-tabs-segmented > li.active > a {
  box-shadow: var(--db-shadow);
}

.nav-tabs-segmented > li.active > a,
.nav-tabs-segmented > li.active > a:hover {
  color: var(--db-text-strong);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Menú lateral de Clientes (.customer-tabs) — one-off real, solo en
   clients/tabs.php. Ya es Tailwind moderno (colores/estado los define el
   propio PHP con clases condicionales) — solo afinamos aire y radio.
   ------------------------------------------------------------------------- */
.customer-tabs li a {
  border-radius: var(--db-radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}