/* ════════════════════════════════════════════════════════════════════
   PatagoniaWeb — Gestión: capa "Design System" (ap-*).
   Aditiva y cargada al final. Aplica el look del DS al DASHBOARD
   (cards blancas redondeadas + sombra suave + números display) y refina
   el panel izquierdo (sidebar). NO cambia estructura ni quita páginas.
   Las reglas del dashboard van scopeadas a .gestion-dashboard para no
   afectar otros módulos. Indigo de marca DS: #5B6EF7.
   Fuente: ui_kits/gestion/styles.css (ap-card / ap-stat / ap-nav-item).
   ════════════════════════════════════════════════════════════════════ */

/* ── DASHBOARD: tarjetas estilo DS ──────────────────────────────────── */
.gestion-dashboard .card,
.gestion-dashboard .card-glass {
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 12px rgba(0, 0, 0, .05);
}
[data-theme="dark"] .gestion-dashboard .card,
[data-theme="dark"] .gestion-dashboard .card-glass {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

/* KPI cards: caja redondeada DS (mantiene su barra de acento izquierda) */
.gestion-dashboard .kpi-card { border-radius: 16px; }
.gestion-dashboard .kpi-value {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* Accesos rápidos: radio + glow indigo DS en hover */
.gestion-dashboard .quick-action-btn { border-radius: 14px; }
.gestion-dashboard .quick-action-btn:hover { box-shadow: 0 8px 22px rgba(91, 110, 247, .16); }

/* Números/montos en tablas del dashboard con tipografía display */
.gestion-dashboard .ap-money,
.gestion-dashboard .money,
.gestion-dashboard .table-modern .num {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
}

/* ── PANEL IZQUIERDO (sidebar): refinamiento DS ─────────────────────── */
/* Items redondeados estilo ap-nav-item (radio 10). El estado activo ya
   trae barra de acento + tinte indigo desde gestion_uix.css; acá sólo se
   afina el radio y el glow para alinearlo al DS. */
.sidebar-link,
.sidebar-sub-item { border-radius: 10px !important; }
.sidebar-link.active,
.sidebar-sub-item.active {
  box-shadow: inset 3px 0 0 var(--sidebar-active-border, #5B6EF7), 0 2px 12px rgba(91, 110, 247, .18);
}

/* ── PANEL IZQUIERDO: look DS claro ──────────────────────────────────
   Mapea el sidebar (#main-sidebar + .sidebar-link) al ap-sidebar del DS
   re-apuntando las variables --sidebar-* a los tokens ap-* (theme-aware:
   claro por defecto, oscuro si el panel está en data-theme="dark").
   Sin tocar el markup: se mantienen Alpine, links y permisos nav_show_*. */
:root {
  --sidebar-bg: var(--ap-card, #ffffff);
  --sidebar-border: var(--ap-border, rgba(0, 0, 0, .08));
  --sidebar-text: var(--ap-muted, #64748B);
  --sidebar-text-hover: var(--ap-text, #1A2233);
  --sidebar-text-active: var(--ap-brand, #5B6EF7);
  --sidebar-active-bg: var(--ap-brand-bg, rgba(91, 110, 247, .09));
  --sidebar-active-border: var(--ap-brand, #5B6EF7);
  --sidebar-hover-bg: var(--ap-hover, #F4F6FB);
  --sidebar-icon: var(--ap-brand-s, #818CF8);
}
#main-sidebar {
  background: var(--sidebar-bg) !important;
  box-shadow: 1px 0 0 var(--ap-border, rgba(0, 0, 0, .06)), 14px 0 40px rgba(15, 23, 42, .16);
}
/* Cabecera de marca: glow indigo del DS (ap-side-brand) */
#main-sidebar > div:first-child {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ap-brand, #5B6EF7) 12%, transparent), transparent 70%);
  position: relative;
}
/* Activo: tinte indigo + texto de marca (ap-nav-item.active) */
.sidebar-link.active,
.sidebar-sub-item.active {
  background: linear-gradient(135deg, var(--ap-brand-bg, rgba(91, 110, 247, .12)), transparent) !important;
  color: var(--ap-brand, #5B6EF7) !important;
}

.gestion-dashboard.ap-content {
  max-width: none;
  width: auto;
  min-height: calc(100vh - 4.5rem);
  margin: -1.25rem -1rem;
  padding: 1.25rem 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .gestion-dashboard.ap-content {
    margin: -1.75rem -2rem;
    padding: 1.75rem 2rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ICONOS — capa de modernización (Bootstrap Icons)
   Aditiva, sin cambiar de librería ni tocar markup. Da el look "moderno":
   transición suave, alineación óptica, microinteracciones coherentes y
   color de marca. Respeta currentColor y las animaciones existentes
   (spin/pulse) porque sólo declara `transition`, no `animation`.
   ════════════════════════════════════════════════════════════════════ */

/* Render nítido + alineación óptica + transición base (no anima salvo
   interacción del usuario). `will-change` evita repaints en hover. */
.bi {
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .16s ease, transform .16s ease, opacity .16s ease;
}

/* Sidebar: el icono vive en un slot de ancho fijo (alineación perfecta de
   labels) con tinte de marca y un microlift al pasar el mouse. */
.sidebar-link .nav-icon,
.sidebar-sub-item .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--sidebar-icon, #818CF8);
  transition: color .16s ease, transform .16s ease;
}
.sidebar-link:hover .nav-icon,
.sidebar-sub-item:hover .nav-icon {
  transform: translateY(-1px) scale(1.08);
  color: var(--sidebar-text-hover, #1A2233);
}
.sidebar-link.active .nav-icon,
.sidebar-sub-item.active .nav-icon { color: var(--ap-brand, #5B6EF7); }

/* Iconos dentro de botones: empuje sutil en hover = feedback moderno sin
   reflow (el botón ya reserva el espacio del icono). */
.btn:hover > .bi,
.btn:hover > i.bi,
button.btn-primary:hover > .bi,
button.btn-secondary:hover > .bi { transform: translateX(1px); }

/* KPI / accesos rápidos: el contenedor de icono ya trae bg/color por
   variante (tailwind-components.css); acá sólo se agrega vida en hover sin
   pisar radio ni color. */
.gestion-dashboard .kpi-card { transition: transform .18s ease, box-shadow .18s ease; }
.gestion-dashboard .kpi-card:hover { transform: translateY(-2px); }
.kpi-icon { transition: transform .18s ease; }
.gestion-dashboard .kpi-card:hover .kpi-icon { transform: scale(1.07); }
.quick-action-btn:hover > i,
.quick-action-btn:hover > .bi { transform: scale(1.1); }

/* Accesibilidad: respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .bi,
  .sidebar-link .nav-icon,
  .sidebar-sub-item .nav-icon,
  .kpi-icon,
  .gestion-dashboard .kpi-card { transition: none; }
  .sidebar-link:hover .nav-icon,
  .sidebar-sub-item:hover .nav-icon,
  .gestion-dashboard .kpi-card:hover,
  .gestion-dashboard .kpi-card:hover .kpi-icon,
  .btn:hover > .bi,
  .quick-action-btn:hover > i,
  .quick-action-btn:hover > .bi { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   DROPZONE de import — subida moderna (drag-drop + click). Theme-aware
   (usa tokens --ap-*; adapta claro/oscuro). Cableada por listener
   delegado en layouts/base.html. Component: components/_import_dropzone.html
   ════════════════════════════════════════════════════════════════════ */
.dz {
  border: 2px dashed var(--ap-border, #d8dbe8);
  border-radius: 14px;
  background: var(--ap-hover, #f6f8fc);
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dz:hover { border-color: var(--ap-brand, #5B6EF7); background: color-mix(in oklab, var(--ap-brand, #5B6EF7) 6%, transparent); }
.dz.dz-over { border-color: var(--ap-brand, #5B6EF7); background: color-mix(in oklab, var(--ap-brand, #5B6EF7) 12%, transparent); transform: scale(1.01); }
.dz-ic { font-size: 2.2rem; color: var(--ap-brand, #5B6EF7); line-height: 1; margin-bottom: .5rem; }
.dz-title { margin: 0; font-weight: 600; color: var(--ap-text, #1A2233); }
.dz-browse { color: var(--ap-brand, #5B6EF7); text-decoration: underline; cursor: pointer; }
.dz-hint { margin: .25rem 0 0; font-size: .8rem; color: var(--ap-muted, #64748B); }
.dz-file { display: none; align-items: center; justify-content: center; gap: .4rem; margin: .75rem 0 0; font-size: .9rem; font-weight: 600; color: #059669; }
.dz.has-file .dz-file { display: flex; }
.dz.has-file .dz-ic, .dz.has-file .dz-title, .dz.has-file .dz-hint { display: none; }
.dz-clear { cursor: pointer; color: var(--ap-muted, #64748B); font-weight: 700; padding: 0 .3rem; border-radius: 4px; }
.dz-clear:hover { color: #dc2626; background: rgba(220,38,38,.12); }

/* Foco accesible moderno en todos los botones del panel */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible,
.btn-sm:focus-visible, .ap-btn:focus-visible {
  outline: 2px solid var(--ap-brand, #5B6EF7);
  outline-offset: 2px;
}

/* ── Checkbox redondo del panel ───────────────────────────────────────────
   Redondo, chico, con tilde blanca al marcar. `appearance:none` para poder
   redondearlo (con appearance:auto el navegador ignora border-radius). Área
   de click = exactamente el círculo (1rem): no hay <label> alrededor, así que
   click "cerca" NO togglea, solo el casillero. Persiste de forma nativa. */
html body input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  inline-size: 1rem !important;
  block-size: 1rem !important;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--border, #cbd5e1);
  border-radius: 50% !important;
  background: var(--surface, #fff);
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  position: relative;
  transition: background .15s, border-color .15s;
}
input[type="checkbox"]:checked {
  background: var(--primary, #5B6EF7);
  border-color: var(--primary, #5B6EF7);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary, #5B6EF7);
  outline-offset: 2px;
}

/* ── Responsive móvil: ordenar cards/headers en pantallas chicas ───────────
   El patrón card-header (icono+título a la izq + subtítulo/acción a la der) y
   el page-header se apretaban en móvil. Acá bajan el subtítulo/acción a una
   nueva línea en vez de desbordar o encimarse. Afecta a TODO el panel. */
@media (max-width: 640px) {
  .card-header {
    flex-wrap: wrap;
    row-gap: .35rem;
    align-items: flex-start;
  }
  /* El subtítulo/acción de la derecha ocupa su propia línea, alineado a la izq. */
  .card-header > span,
  .card-header > a,
  .card-header > button { margin-left: 0; }

  /* Page header en móvil: SIN card (transparent, sin padding/borde → más chico y
     liviano) y en UNA fila compacta (título izq + acciones der). El wrapper de
     acciones se "desarma" con display:contents para que sus botones entren a la
     fila del header (igual que los botones sueltos). Secundarios con ícono →
     icon-only (label oculto con font-size:0, sólo si hay ícono); primario con
     texto. Resume el header y elimina el bloque 2×2 / full-width. */
  html[data-theme-style] .page-header-3d {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start !important; /* NO space-between: agrupa, no "flota" */
    gap: .4rem; min-width: 0; max-width: 100%; margin-bottom: .9rem;
  }
  .page-header-3d .title { font-size: 1.05rem; min-width: 0; }
  .page-header-3d .title .icon { width: 1.9rem !important; height: 1.9rem !important; font-size: .9rem !important; }
  .page-header-3d > [style*="margin-left:auto"] { margin-left: 0 !important; }
  /* desarmar el contenedor de acciones → botones entran a la fila del header */
  .page-header-3d > div:not(.title) { display: contents !important; }
  /* secundarios con ícono → icon-only compacto */
  .page-header-3d .btn-secondary:has(> .bi),
  .page-header-3d .btn-secondary:has(> i) {
    flex: 0 0 auto; width: auto !important; font-size: 0 !important; gap: 0 !important;
    padding: .45rem .55rem !important; justify-content: center;
  }
  .page-header-3d .btn-secondary > .bi,
  .page-header-3d .btn-secondary > i { font-size: 1.05rem !important; margin: 0 !important; }
  /* primario (y botones de texto sin ícono): label compacto, no full-width */
  .page-header-3d .btn-primary {
    flex: 0 0 auto; width: auto !important; white-space: nowrap;
    padding: .45rem .8rem !important; font-size: .82rem !important;
  }
  .page-header-3d > a, .page-header-3d > button { width: auto; }

  /* Guía de página compacta: que no tape el contenido en móvil. */
  .page-guide-wrap .card-3d { padding: .8rem .9rem !important; }
  .page-guide-wrap ol,
  .page-guide-wrap ul { padding-left: 1.05rem; margin: .35rem 0 0; }

  /* KPIs/inputs no fuerzan ancho mayor al viewport. */
  .kpi-card, .stat-card-3d, .ap-card, .card { min-width: 0; }
}

/* ── Respiro de texto (anti "encimado") ───────────────────────────────────
   Un poco más de aire entre líneas en KPIs, headers y tiles, sin cambiar la
   estructura. Pedido: "un poquito más extendido". */
.kpi-label { margin-bottom: .22rem; line-height: 1.25; }
.kpi-value { line-height: 1.18; }
.kpi-sub { margin-top: .2rem; line-height: 1.3; }
.kpi-body { display: flex; flex-direction: column; gap: .05rem; }
.card-header h3 { line-height: 1.3; }
.mn-quick-label { line-height: 1.25; }
.mn-quick-sub { margin-top: .15rem; line-height: 1.35; }
.mn-status-text strong { line-height: 1.3; }
.mn-status-text small { display: block; margin-top: .14rem; line-height: 1.35; }
.mn-profile-label { line-height: 1.3; }
.mn-profile-sub { line-height: 1.35; }

/* ════════════════════════════════════════════════════════════════════
   UNIFICACIÓN + DIFERENCIACIÓN DE MODOS (2026-06-27)
   Acento INDIGO del DS en AMBOS estilos (glass + solid) y ambos temas
   (light/dark): sin púrpura, sin cruces. PERO cada modo conserva su
   identidad para que se NOTE la diferencia:
     · GLASS  = superficies translúcidas + blur + orbs (re-tintados indigo)
     · SOLID  = superficies opacas planas (sin blur, sin orbs)
     · light/dark via data-theme (tokens propios de cada uno)
   Formato dashboard (barra de acento en stat cards, chip indigo en header)
   en los dos. Especificidad html[…][data-theme=…] (0,2,1)+carga última gana
   a themes-bundle (0,2,0). !important sólo donde gestion_uix/inline ya lo usan.
   ════════════════════════════════════════════════════════════════════ */

/* A) Acento INDIGO global — reemplaza el violeta del :root en glass Y solid. */
html[data-theme-style] {
  --violet-50:#eef1fe; --violet-100:#e0e5fd; --violet-200:#c7cffb; --violet-300:#aab4f8;
  --violet-400:#8b97f4; --violet-500:#5B6EF7; --violet-600:#4558E8; --violet-700:#3a49c9;
  --violet-800:#2f3aa0; --violet-900:#28327f;
  --accent:#5B6EF7; --accent-strong:#4558E8; --accent-soft:#c7cffb; --accent-glow:rgba(91,110,247,.30);
  --primary:#5B6EF7; --primary-dark:#4558E8; --accent-dark:#4558E8;
}

/* B) GLASS — re-tinta lo púrpura a indigo pero MANTIENE la identidad glass
      (translúcido + blur + orbs). No se tocan --surface ni --blur. */
html[data-theme-style="glass"][data-theme="light"] {
  --bg:radial-gradient(ellipse at top, #eaeffe 0%, #e7ecff 48%, #f5f7ff 100%);
  --bg-solid:#f4f7ff;
  --border:rgba(91,110,247,.16); --border-strong:rgba(91,110,247,.34);
  --text:var(--ap-text); --text-muted:#5b647a; --text-dim:#7c879c;
}
html[data-theme-style="glass"][data-theme="dark"],
html[data-theme-style="glass"]:not([data-theme]) {
  --bg:radial-gradient(ellipse at top left, #161a3c 0%, #0a0e1e 55%, #05070e 100%);
  --bg-solid:#0a0e1e;
  --border:rgba(129,140,248,.16); --border-strong:rgba(129,140,248,.32);
  --text:#eef1fb; --text-muted:#aab3c9; --text-dim:#8089a0;
}
/* Orbs en indigo (no púrpura); conserva la animación del glass. */
html[data-theme-style="glass"] body::before {
  background:
    radial-gradient(circle at 15% 25%, rgba(91,110,247,.22) 0%, transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(56,189,248,.14) 0%, transparent 42%),
    radial-gradient(circle at 55% 50%, rgba(129,140,248,.12) 0%, transparent 46%) !important;
}
html[data-theme-style="glass"][data-theme="light"] body::before {
  background:
    radial-gradient(circle at 15% 25%, rgba(91,110,247,.12) 0%, transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(56,189,248,.09) 0%, transparent 42%),
    radial-gradient(circle at 55% 50%, rgba(129,140,248,.07) 0%, transparent 46%) !important;
}
/* Tarjetas glass: translúcidas + blur (identidad). var(--surface) = rgba glass. */
html[data-theme-style="glass"] .card-3d,
html[data-theme-style="glass"] .stat-card-3d,
html[data-theme-style="glass"] .ap-card {
  background:var(--surface) !important;
  backdrop-filter:blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%) !important;
}

/* C) SOLID — superficies OPACAS planas. Pisa el background rgba + blur que
      gestion_uix fuerza a .card-3d/.stat-card-3d (sin esto el solid se vería
      "glass" también). Los tokens del solid ya son grises neutros. */
html[data-theme-style="solid"] .card-3d,
html[data-theme-style="solid"] .stat-card-3d,
html[data-theme-style="solid"] .ap-card {
  background:var(--surface) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* D) AMBOS modos — formato dashboard. */
html[data-theme-style] .stat-card-3d { border-left:3px solid var(--ap-brand, #5B6EF7) !important; }
html[data-theme-style] .page-header-3d .title .icon,
html[data-theme-style] .page-header-3d .icon {
  background:var(--ap-brand-bg, rgba(91,110,247,.12)) !important;
  color:var(--ap-brand, #5B6EF7) !important;
  box-shadow:none !important;
}
html[data-theme-style] .table-modern tbody tr:hover {
  background:color-mix(in oklab, var(--ap-brand) 6%, transparent) !important;
}

/* ── Responsive: detalles del formato ──────────────────────────────────────
   E) Tablas en móvil: la tarjeta contenedora tiene overflow:hidden (clipea la
      tabla → se cortan columnas). Si la tarjeta CONTIENE una tabla, permitir
      scroll-x en pantallas chicas (sin wrapper extra, vía :has). */
@media (max-width: 820px) {
  .card:has(.table-modern), .card:has(.ap-table),
  .card-3d:has(.table-modern), .card-3d:has(.ap-table),
  .dash-sec:has(.ap-table) { overflow-x: auto; }
}
/* F) Stat cards (.stat-card-3d es display:flex fila): en pantallas chicas apilar
      (label/ícono arriba, número a su propia línea) para que un monto largo no se
      clipee contra el ancho de la tarjeta. !important para ganarle a la regla
      @520 de patagoniaweb.css que fuerza flex-direction:row !important. */
@media (max-width: 560px) {
  .stat-card-3d { flex-direction: column !important; align-items: flex-start !important; gap: .4rem !important; }
}

/* ── PERF (lentitud / "carga por sectores") ────────────────────────────────
   G) Orbs del glass SIN animación: el transform infinito sobre una capa
      position:fixed full-screen forzaba compositing/repaint continuo → jank y
      consumo de batería en todo el panel. Estáticos rinden igual de bien. */
html[data-theme-style="glass"] body::before,
html[data-theme-style="glass"] body::after { animation: none !important; }

/* H) Móvil (≤768): backdrop-filter (blur) es el mayor costo de render en
      móviles ("carga por sectores"/ralentización). Se quita el blur de las
      superficies glass y pasan a OPACAS (legibles sin blur); el fondo tintado
      del glass sigue diferenciándolo del solid. Mejora pintado y scroll. */
@media (max-width: 768px) {
  html[data-theme-style="glass"][data-theme="light"],
  html[data-theme-style="glass"][data-theme="dark"] {
    --surface: var(--ap-card); --surface-strong: var(--ap-card); --surface-glass: var(--ap-card);
  }
  html[data-theme-style="glass"] .card-3d,
  html[data-theme-style="glass"] .stat-card-3d,
  html[data-theme-style="glass"] .ap-card,
  html[data-theme-style="glass"] .card,
  html[data-theme-style="glass"] .page-header-3d,
  html[data-theme-style="glass"] .modal-box,
  html[data-theme-style="glass"] .table-modern,
  html[data-theme-style="glass"] .dropdown-menu,
  html[data-theme-style="glass"] .panel-notification-menu {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html[data-theme-style="glass"] .card-3d,
  html[data-theme-style="glass"] .stat-card-3d,
  html[data-theme-style="glass"] .ap-card {
    background: var(--ap-card) !important;
  }
}

/* I) Topbar (barra superior) más chico en móvil: la línea meta (usuario + reloj
      de fecha LARGA) wrappea y agranda la barra hasta ~1/4 de pantalla. En ≤640
      se oculta esa línea y se reduce el padding vertical → topbar de 1 línea. */
@media (max-width: 640px) {
  #panel-topbar { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  #panel-topbar .topbar-meta { display: none !important; }
  #panel-topbar h1 { font-size: .95rem !important; line-height: 1.2 !important; }
}