/* ============================================================================
   Fluxio — Sistema de diseño (branding + tokens + animaciones)
   Única fuente de verdad del estilo global. Los templates usan Tailwind para
   el layout; acá viven la identidad de marca, los tokens y las animaciones
   compartidas por todo el sistema.
   ========================================================================== */

:root {
  /* --- Marca (no cambiar sin decisión de branding) --- */
  --color-primary: #FF6B00;
  --color-primary-dark: #CC5500;
  --color-black: #0A0A0A;
  --color-white: #FFFFFF;

  /* --- Derivados de marca (tintes para fondos/estados) --- */
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, white);
  --color-primary-ring: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --color-surface: #F7F7F5;          /* lienzo de la app */
  --color-ink-2: #52525B;            /* texto secundario */

  /* --- Tokens de forma y elevación --- */
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 16px -4px rgba(10, 10, 10, 0.06);
  --shadow-pop: 0 8px 30px -6px rgba(10, 10, 10, 0.16);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 550ms;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cifras alineadas en tablas: imprescindible en una app financiera. */
table { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   Foco accesible con el color de marca (teclado).
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   Scrollbars discretos (tablas de flujo anchas, sidebar).
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
*::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------------------
   Keyframes compartidos
   -------------------------------------------------------------------------- */
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fx-scale-in {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fx-slide-left {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fx-toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fx-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.06); }
}
@keyframes fx-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ----------------------------------------------------------------------------
   Utilidades de animación (aplicadas por los templates base)
   -------------------------------------------------------------------------- */
.fx-rise      { animation: fx-rise var(--dur-3) var(--ease-out) both; }
.fx-fade      { animation: fx-fade var(--dur-3) var(--ease-out) both; }
.fx-scale-in  { animation: fx-scale-in var(--dur-3) var(--ease-out) both; }
.fx-slide-left{ animation: fx-slide-left var(--dur-2) var(--ease-out) both; }

/* Escalonado para listas/hijos: el contenedor lleva .fx-stagger */
.fx-stagger > * { animation: fx-rise var(--dur-3) var(--ease-out) both; }
.fx-stagger > *:nth-child(1)  { animation-delay: 30ms; }
.fx-stagger > *:nth-child(2)  { animation-delay: 60ms; }
.fx-stagger > *:nth-child(3)  { animation-delay: 90ms; }
.fx-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.fx-stagger > *:nth-child(5)  { animation-delay: 150ms; }
.fx-stagger > *:nth-child(6)  { animation-delay: 180ms; }
.fx-stagger > *:nth-child(7)  { animation-delay: 210ms; }
.fx-stagger > *:nth-child(8)  { animation-delay: 240ms; }
.fx-stagger > *:nth-child(n+9){ animation-delay: 270ms; }

/* ----------------------------------------------------------------------------
   Componentes de marca
   -------------------------------------------------------------------------- */

/* Tarjeta estándar */
.card {
  background: var(--color-white);
  border: 1px solid #ECECEA;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-1) ease, transform var(--dur-1) ease,
              border-color var(--dur-1) ease;
}
.card-hover:hover {
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 30%, #ECECEA);
}

/* Botones */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; border-radius: var(--radius-md);
  padding: 0.55rem 1.1rem; font-size: 0.875rem; line-height: 1.25rem;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
              box-shadow var(--dur-1) ease, transform var(--dur-1) ease,
              border-color var(--dur-1) ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-primary); color: var(--color-white);
  box-shadow: 0 1px 2px rgba(204, 85, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 6px 18px -4px rgba(255, 107, 0, 0.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary {
  background: var(--color-white); color: var(--color-black);
  border: 1px solid #E4E4E7;
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-soft); }
.btn-secondary:active { transform: scale(0.98); }
.btn-ghost { color: var(--color-primary-dark); padding: 0.4rem 0.7rem; }
.btn-ghost:hover { background: var(--color-primary-soft); }

/* Barra de título (formularios y listas): negro de marca con acento naranja */
.titulo-marca {
  position: relative;
  background: linear-gradient(135deg, #141414 0%, var(--color-black) 60%, #1c1208 100%);
  color: var(--color-white);
  overflow: hidden;
}
.titulo-marca::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  transform-origin: top;
  animation: fx-bar-grow var(--dur-3) var(--ease-out) both;
}
.titulo-marca::after {
  content: '';
  position: absolute; top: -60%; right: -8%;
  width: 240px; height: 240px; border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* Campos de formulario (clase aplicada desde core.forms.CAMPO_TEXTO) */
.campo-texto {
  width: 100%;
  background: #FAFAFA;
  border: 1px solid #E4E4E7;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.8rem;
  color: var(--color-black);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease,
              background-color var(--dur-1) ease;
}
.campo-texto:hover { border-color: #d4d4d8; }
.campo-texto:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Errores de formulario (Django errorlist) */
.errorlist { color: #b91c1c; font-size: 0.8125rem; margin-top: 0.3rem; list-style: none; padding: 0; }
.errorlist li::before { content: '⚠ '; }

/* ----------------------------------------------------------------------------
   Tablas del sistema (listas y flujos)
   Estilo global: TODA tabla dentro del contenido hereda el mismo diseño,
   sin tocar cada template. Los templates solo aportan columnas y paddings.
   -------------------------------------------------------------------------- */
main table {
  width: 100%;
  background: var(--color-white);
  border: 1px solid #ECECEA;
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
main thead th {
  background: #FAFAF9;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #71717A;
  border-bottom: 1px solid #ECECEA;
  white-space: nowrap;
}
main tbody td { font-size: 0.875rem; color: #27272A; }
main tbody tr {
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
main tbody tr:hover { background-color: #FBFAF8; }
main tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
/* Fila vacía ("no hay datos") sin acento */
main tbody tr:only-child:hover td:first-child { box-shadow: none; }

/* Acciones de fila (editar/eliminar): aparecen suaves al pasar el mouse */
main tbody td a[title],
main tbody td button[title] {
  opacity: 0.55;
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease;
}
main tbody tr:hover td a[title],
main tbody tr:hover td button[title] { opacity: 1; }
main tbody td a[title]:hover,
main tbody td button[title]:hover { transform: scale(1.15); }

/* ----------------------------------------------------------------------------
   Formularios del sistema (estilo global desde la base)
   -------------------------------------------------------------------------- */
main form label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3F3F46;
  letter-spacing: 0.005em;
}
main form .helptext,
main form small,
main form ul.helptext li {
  font-size: 0.75rem;
  color: #A1A1AA;
}
/* Inputs sin clase (forms de Django sin widget custom, p. ej. cambio/reseteo
   de contraseña): heredan el mismo estilo que .campo-texto. */
main form input:not([class]):not([type='checkbox']):not([type='radio']):not([type='hidden']),
main form select:not([class]),
main form textarea:not([class]) {
  width: 100%;
  background: #FAFAFA;
  border: 1px solid #E4E4E7;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.8rem;
  color: var(--color-black);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease,
              background-color var(--dur-1) ease;
}
main form input:not([class]):focus,
main form select:not([class]):focus,
main form textarea:not([class]):focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}
/* EXCEPCIÓN: el input interno de búsqueda de Tom Select tampoco tiene clase y
   la regla anterior le agregaba padding/borde, sumando un espacio abajo del
   control al abrir la lista. Acá se lo neutraliza. */
main form .ts-wrapper input,
main form .ts-wrapper input:focus,
main form .ts-dropdown input,
main form .ts-dropdown input:focus {
  width: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Checkboxes con acento de marca */
main form input[type='checkbox'] { accent-color: var(--color-primary); }

/* Enlace [detalle] de los flujos */
.toggle-det { transition: color var(--dur-1) ease; }
.toggle-det:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ----------------------------------------------------------------------------
   Sidebar (navegación principal)
   -------------------------------------------------------------------------- */
.sidebar-marca {
  background: linear-gradient(180deg, #121212 0%, var(--color-black) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-seccion {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.38);
  padding: 1.1rem 0.75rem 0.35rem;
}
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.84rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
              transform var(--dur-1) ease;
}
.sidebar-link svg { opacity: 0.65; transition: opacity var(--dur-1) ease, transform var(--dur-1) ease; flex-shrink: 0; }
.sidebar-link:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}
.sidebar-link:hover svg { opacity: 1; transform: scale(1.08); }
.sidebar-link.activo {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.sidebar-link.activo svg { opacity: 1; color: var(--color-primary); }
.sidebar-link.activo::before {
  content: '';
  position: absolute; left: -0.75rem; top: 20%; bottom: 20%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
  animation: fx-bar-grow var(--dur-2) var(--ease-out) both;
}

/* ----------------------------------------------------------------------------
   Toasts (mensajes de Django)
   -------------------------------------------------------------------------- */
.toast {
  display: flex; align-items: flex-start; gap: 0.6rem;
  min-width: 260px; max-width: 380px;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid #ECECEA;
  border-left-width: 4px;
  box-shadow: var(--shadow-pop);
  font-size: 0.85rem; color: var(--color-black);
  animation: fx-toast-in var(--dur-2) var(--ease-out) both;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) ease;
}
.toast.saliendo { opacity: 0; transform: translateX(24px); }
.toast-success { border-left-color: #16a34a; }
.toast-warning { border-left-color: #d97706; }
.toast-error   { border-left-color: #dc2626; }
.toast-info    { border-left-color: var(--color-primary); }

/* ----------------------------------------------------------------------------
   Íconos del sistema
   Diseño único para TODOS los íconos de acción (agregar, editar, eliminar,
   guardar, volver, exportar…): chip cuadrado de puntas redondeadas, fondo
   negro de marca y dibujo naranja. El markup vive en
   templates/componentes/icono_base.html; cada ícono solo aporta su path SVG.
   -------------------------------------------------------------------------- */
.icono-sistema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  background: var(--color-black);
  color: var(--color-primary);       /* el dibujo hereda via currentColor */
  border-radius: 0.5rem;             /* cuadrado con puntas redondeadas */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease,
              background-color var(--dur-1) ease;
}
.icono-sistema svg { width: 0.95rem; height: 0.95rem; }
/* Al pasar el mouse por el control que lo contiene, el chip responde. */
a:hover > .icono-sistema,
button:hover > .icono-sistema,
a:hover .icono-sistema,
button:hover .icono-sistema {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 3px 10px -2px rgba(255, 107, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------------------
   Marca gráfica (logo tipográfico con isotipo)
   -------------------------------------------------------------------------- */
.logo-marca { display: inline-flex; align-items: center; gap: 0.55rem; }
.logo-isotipo {
  width: 2rem; height: 2rem; border-radius: 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  box-shadow: 0 3px 10px -2px rgba(255, 107, 0, 0.5);
}

/* ----------------------------------------------------------------------------
   Accesibilidad: respetar la preferencia de menos movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------------
   Clases de Tailwind que faltan en el bundle precompilado
   ----------------------------------------------------------------------------
   `static/vendor/tailwind.css` está compilado y sólo trae las combinaciones que
   el CLI vio en las plantillas al momento de generarlo, así que una clase nueva
   no existe hasta que se regenere. Estas tres las estrena el banner de
   impersonación (templates/componentes/banner_impersonacion.html, Task 24).

   Van acá y no en `static/css/panel_admin.css`, donde vive el mismo tipo de
   parche para el panel: el banner se renderiza en `templates/base.html`, o sea
   en la app clara, que carga `branding.css` pero NO `panel_admin.css`. Parchear
   allá dejaría el banner sin estilos justo en las páginas donde se muestra.

   Los valores son idénticos a los que emite Tailwind v3; cuando se regenere el
   bundle quedan como duplicados inocuos y se pueden borrar.
   -------------------------------------------------------------------------- */
.bg-black    { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); }
/* El navbar de la app clara es sticky con z-[200] (templates/navbar.html): el
   banner tiene que quedar por encima o el scroll se lo come. z-[200] sí salió
   del bundle —el navbar ya lo usaba—, esta no. */
.z-\[300\]   { z-index: 300; }
/* Tailwind v3 emite `color: var(...)` a secas, sin --tw-text-opacity, cuando el
   valor arbitrario es una var() CSS. Misma regla que la parchada en
   panel_admin.css para el hover del listado de usuarios. */
.text-\[var\(--color-primary\)\] { color: var(--color-primary); }