/* =====================================================================
 * theme.css — Sistema de diseño Territorio360 (basado en el mockup
 * docs/01_Mockup_Plataforma_Completa.html). Componentes y tokens escritos
 * a mano (NO pasan por el build de Tailwind), así un cambio de branding no
 * requiere re-build. El color de acento (--accent) lo inyecta base.html
 * desde SiteConfig.primary_color en runtime [CONF-12].
 * ===================================================================== */

:root {
  /* Superficies y texto (paleta cálida del mockup) */
  --bg: #F5F4F2;
  --panel: #FFFFFF;
  --panel-2: #FAFAF9;
  --line: #E7E3DD;
  --line-2: #D4CFC8;
  --text: #1F2937;
  --muted: #6B6F76;

  /* Acento: fallback guinda MORENA. base.html lo pisa con SiteConfig. */
  --accent: #9F2241;          /* Guinda oficial (Pantone 209 C) */
  --accent-2: color-mix(in srgb, var(--accent) 85%, #ffffff);
  --accent-dark: color-mix(in srgb, var(--accent) 78%, #000000);
  --accent-soft: color-mix(in srgb, var(--accent) 8%, #ffffff);
  --gold: #D4AF37;

  /* Semánticos */
  --green: #15803D;  --green-bg: #DCFCE7;
  --amber: #B45309;  --amber-bg: #FEF3C7;
  --red:   #B91C1C;  --red-bg:   #FEE2E2;
  --blue:  #1E40AF;  --blue-bg:  #DBEAFE;
  --violet:#6D28D9;  --violet-bg:#EDE9FE;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Evita el parpadeo de elementos Alpine (x-show/x-cloak) antes de hidratar. */
[x-cloak] { display: none !important; }

/* ----- Superficies ----- */
.panel   { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.panel-2 { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.header-strip   { height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent)); border-radius: 2px; }
.gradient-header{ background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }

/* ----- Navegación lateral ----- */
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; color:var(--muted); font-weight:500; font-size:14px; cursor:pointer; transition:all .15s; }
.nav-item:hover { background: var(--accent-soft); color: var(--text); }
.nav-item.active { background: var(--accent); color:#fff; font-weight:600; }
.nav-item.active svg { color:#fff; }
.nav-section { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; padding:0 12px; margin:14px 0 6px; }

/* ----- KPIs ----- */
.kpi-value { font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--text); line-height:1.1; }
.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:600; }
.ring-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; }

/* ----- Pills / badges ----- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.pill-green  { background:var(--green-bg);  color:var(--green); }
.pill-amber  { background:var(--amber-bg);  color:var(--amber); }
.pill-red    { background:var(--red-bg);    color:var(--red); }
.pill-blue   { background:var(--blue-bg);   color:var(--blue); }
.pill-violet { background:var(--violet-bg); color:var(--violet); }
.pill-guinda { background:var(--accent-soft); color:var(--accent); }
.pill-gold   { background:rgba(212,175,55,.15); color:#92740F; }
.badge-section { background:rgba(212,175,55,.18); color:#92740F; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ----- Botones ----- */
.btn { padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:all .15s; border:none; text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); }
.btn-ghost { background:#fff; color:var(--text); border:1px solid var(--line-2); }
.btn-ghost:hover { background:var(--panel-2); }
.btn-icon { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); background:#fff; cursor:pointer; }
.btn-icon:hover { background:var(--panel-2); }

/* ----- Tablas ----- */
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; padding:12px; text-align:left; border-bottom:1px solid var(--line); background:var(--panel-2); }
.table td { padding:14px 12px; font-size:14px; border-bottom:1px solid var(--line); }
.table tbody tr:hover td { background: var(--accent-soft); }

/* ----- Tablas: contenedor con desplazamiento horizontal -----
 * Los usuarios operan desde celular y ahí ninguna tabla de 5+ columnas cabe.
 * Antes el panel (overflow-hidden) recortaba las columnas de la derecha sin
 * dejar forma de verlas. Ahora la tabla se desliza en horizontal dentro de
 * .table-wrap y el panel sigue recortando sus esquinas redondeadas.
 * Las sombras de los bordes (técnica background-attachment: local) avisan que
 * hay más columnas hacia ese lado y desaparecen al llegar al extremo. */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;  /* inercia en iOS */
  overscroll-behavior-x: contain;     /* no arrastra la página al tocar el borde */
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  background-image:
    linear-gradient(90deg,  var(--panel) 55%, transparent),
    linear-gradient(270deg, var(--panel) 55%, transparent),
    radial-gradient(farthest-side at 0    50%, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* Encabezados en una sola línea: fijan un ancho mínimo digno por columna
 * (sin esto el navegador exprime "Descripción" a dos letras por renglón). */
.table-wrap th { white-space: nowrap; }
.table-wrap td { overflow-wrap: break-word; }

/* En celular, celdas más compactas: caben más columnas antes de desplazar. */
@media (max-width: 640px) {
  .table th { padding: 10px; letter-spacing: .5px; }
  .table td { padding: 11px 10px; font-size: 13px; }
}

/* ----- Misceláneos ----- */
.progress { height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg, var(--accent), var(--gold)); border-radius:999px; }
.tab { padding:10px 16px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; background:none; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(21,128,61,.6); animation:dot-pulse 2s infinite; }
@keyframes dot-pulse { 0%{box-shadow:0 0 0 0 rgba(21,128,61,.6)} 70%{box-shadow:0 0 0 8px rgba(21,128,61,0)} 100%{box-shadow:0 0 0 0 rgba(21,128,61,0)} }
.ai-pulse { animation:pulse 2.5s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(109,40,217,.4)} 70%{box-shadow:0 0 0 10px rgba(109,40,217,0)} 100%{box-shadow:0 0 0 0 rgba(109,40,217,0)} }
.scroll-area::-webkit-scrollbar { width:6px; height:6px; }
.scroll-area::-webkit-scrollbar-track { background:transparent; }
.scroll-area::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:3px; }

/* =====================================================================
 * Movimiento y transiciones — capa de animación añadida sobre el sistema
 * de diseño. Objetivo: que la plataforma se sienta fluida y moderna sin
 * romper el render server-side. Todo respeta `prefers-reduced-motion`
 * (ver bloque al final): quien pida menos movimiento NO ve ninguna.
 * ===================================================================== */

/* ----- Transición entre pantallas (View Transitions API nativa) -----
 * La navegación es por recargas completas (<a href>). Esta regla hace que
 * los navegadores compatibles (Chromium/Android, donde operan los usuarios)
 * hagan un fundido cruzado automático entre páginas. Fallback: sin efecto. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: t360-vt-out .18s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: t360-vt-in .26s cubic-bezier(.16,1,.3,1) both;
}
@keyframes t360-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes t360-vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* ----- Entrada del contenido principal (primer load y navegación sin VT) ----- */
.t360-enter { animation: t360-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes t360-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Aparición reutilizable para elementos dinámicos (tarjetas, paneles, toasts). */
.fade-in     { animation: t360-fade .25s ease both; }
.fade-in-up  { animation: t360-in   .3s  cubic-bezier(.16,1,.3,1) both; }
.pop-in      { animation: t360-pop  .22s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes t360-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t360-pop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ----- Botones: elevación al hover, "presión" al click ----- */
.btn { transition: background .15s, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; will-change: transform; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-ghost:hover   { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.btn-icon { transition: background .15s, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s; }
.btn-icon:hover  { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.btn-icon:active { transform: scale(.92); }

/* Sin destello azul de toque en móvil (los usuarios operan desde celular). */
.btn, .btn-icon, .nav-item, .tab, .pill { -webkit-tap-highlight-color: transparent; }

/* ----- Navegación lateral: deslizamiento sutil ----- */
.nav-item { transition: background .15s, color .15s, transform .15s, padding-left .15s; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ----- Tabs ----- */
.tab { transition: color .15s, border-color .2s; }

/* ----- Paneles/tarjetas interactivas (opt-in con .panel-hover) ----- */
.panel { transition: box-shadow .2s, transform .2s; }
.panel-hover { transition: box-shadow .2s, transform .2s; }
.panel-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: var(--line-2); }

/* ----- Filas de tabla ----- */
.table tbody tr { transition: background .15s; }

/* ----- Barras de progreso: animar el llenado ----- */
.progress-bar { transition: width .6s cubic-bezier(.16,1,.3,1); }

/* ----- Campos de formulario: foco suave ----- */
input, select, textarea { transition: border-color .15s, box-shadow .15s, background .15s; }

/* ----- Transiciones de HTMX (swaps de parciales: búsqueda en vivo, etc.) -----
 * htmx añade estas clases durante el intercambio; les damos un fundido.
 * Para navegadores con View Transitions, base.html activa
 * htmx.config.globalViewTransitions y este fallback no interfiere. */
.htmx-swapping { opacity: 0; transition: opacity .12s ease; }
.htmx-settling { animation: t360-fade .2s ease; }
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { opacity: 1; }

/* =====================================================================
 * Accesibilidad: respetar la preferencia de menos movimiento del sistema.
 * Desactiva animaciones y transiciones de adorno por completo.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .nav-item:hover, .btn:hover, .btn:active,
  .btn-icon:hover, .btn-icon:active, .panel-hover:hover { transform: none !important; }
}

/* ----- Puente con las clases .*-brand existentes en los templates ----- */
.bg-brand     { background-color: var(--accent) !important; }
.text-brand   { color: var(--accent) !important; }
.border-brand { border-color: var(--accent) !important; }
.hover\:bg-brand:hover { background-color: var(--accent) !important; }
.focus\:border-brand:focus { border-color: var(--accent) !important; }
.focus\:ring-brand:focus   { --tw-ring-color: var(--accent) !important; }