/* ============================================================
   xClearance — Tema visual (drop-in)
   ------------------------------------------------------------
   Reestiliza las clases existentes (.nav, .btn-accent, .upload-zone,
   .filter-pill, .finding-*, ...) con la paleta, tipografía y el
   logotipo (placa) del producto, sin tocar el HTML.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Paleta de acento */
  --accent-yellow: #FFEC00;
  --accent-yellow-deep: #E6C200;
  --accent-yellow-soft: #FFF9CC;
  --ink: #0B0B0D;

  /* Neutrales / acciones */
  --primary: #0F172A;
  --primary-hover: #1E293B;
  --bg: #F8FAFC;
  --text: #0F172A;

  /* Neutralizar el índigo heredado (base.html: --accent #6366f1):
     los acentos de UI (tags de admin, escena activa, enlaces
     "leer más", foco de selección) pasan a pizarra neutra, en
     paleta. El amarillo de marca queda reservado al CTA. */
  --accent: #334155;        /* slate-700 — antes #6366f1 índigo */
  --accent-light: #F1F5F9;  /* slate-100 — antes #eef2ff índigo */

  /* Anillo de foco */
  --focus-ring: rgba(230, 194, 0, 0.38);
}

/* ── Tipografía ─────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Citas legales, tipos de entidad e IDs en monoespaciada (la "voz legal") */
.lg-pill,
.finding-type,
.finding-legal strong {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.finding-legal strong { font-weight: 600; letter-spacing: -0.01em; }

/* ── Logotipo en la barra: placa (negro + cuña amarilla) ── */
/* Convierte el cuadro "CL" en la placa, sin tocar el markup:
   ocultamos el texto y dibujamos el motivo. */
.nav-logo {
  position: relative;
  background: var(--ink) !important;
  font-size: 0 !important;           /* oculta "CL" */
  overflow: hidden;
}
.nav-logo::before {                  /* cuña amarilla superior */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 42%;
  background: var(--accent-yellow);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}
.nav-logo::after {                   /* palos/dientes */
  content: '';
  position: absolute; top: 0; left: 26%; width: 2px; height: 44%;
  background: var(--ink);
  transform: skewX(-22deg);
  box-shadow: 11px 0 0 var(--ink);
}

/* Franja diagonal bajo la barra (motivo del logotipo).
   `sticky` mantiene la barra fija al hacer scroll (clave en móvil para que la
   hamburguesa esté siempre accesible) y, al ser posición "positioned", sigue
   anclando el ::after diagonal igual que lo hacía `relative`. */
.nav { position: sticky; top: 0; z-index: 100; }
.nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: repeating-linear-gradient(-58deg,
    var(--ink) 0 10px, #ffffff 10px 20px);
  opacity: 0.9;
}

/* ── Botón de acción principal → amarillo con tinta ────── */
.btn-accent {
  background: var(--accent-yellow);
  color: var(--ink);
  border-color: var(--accent-yellow-deep);
  font-weight: 600;
}
.btn-accent:hover:not(:disabled) {
  background: var(--accent-yellow-deep);
  color: var(--ink);
}
.btn-primary { font-weight: 600; }

/* ── Foco en controles ─────────────────────────────────── */
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-yellow-deep) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ── Zona de subida ────────────────────────────────────── */
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--accent-yellow-deep);
  background: var(--accent-yellow-soft);
}
.upload-zone:hover .upload-icon,
.upload-zone.dragover .upload-icon { background: #fff; }

/* ════════════════════════════════════════════════════════
   PROGRESO DEL ANÁLISIS — barra de carga
   ════════════════════════════════════════════════════════ */

/* FIX CRÍTICO: el .spinner global trae `margin: 0 auto` (pensado para
   un spinner centrado en estados de carga). Dentro del panel de
   progreso inline eso lo manda al CENTRO de la fila flex y empuja el
   título a la derecha. Lo anclamos a la izquierda, junto al título. */
#analysis-progress .spinner {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* La cabecera del progreso: spinner + título alineados a la izquierda */
#analysis-progress > div:first-child {
  justify-content: flex-start !important;
}

/* Fila etiqueta-fase / porcentaje */
.ap-fill { background: var(--accent-yellow) !important; }
.ap-label { color: var(--text-secondary) !important; font-weight: 600 !important; }
.spinner { border-top-color: var(--accent-yellow-deep) !important; }

/* Pista de la barra: un punto más suave que el borde duro */
#analysis-progress .ap-fill {
  /* brillo sutil para que a porcentajes bajos no parezca "atascada" */
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%) !important;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ap-sheen 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(230,194,0,0.25) inset;
}
@keyframes ap-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}

/* ── Píldoras de filtro activas ────────────────────────── */
.filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
}

/* ── Selección de texto ────────────────────────────────── */
::selection { background: var(--accent-yellow-soft); color: var(--ink); }

/* ── Tarjetas un poco más nítidas ──────────────────────── */
.card { box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08); }

/* ════════════════════════════════════════════════════════
   MODO OSCURO — opt-in vía data-theme="dark" en <html>
   Solo voltean superficies, texto y bordes. La MARCA (limón/tinta)
   y el SEMÁFORO de riesgo (verde/amarillo/rojo) conservan su hue.
   ════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #0B1120;
  --bg-alt: #0E1626;
  --card: #141E33;
  --text: #E5E9F0;
  --text-secondary: #AEB7C7;
  --text-muted: #7C879B;
  --border: #243049;
  --border-hover: #33425F;
  --primary: #334155;        /* botones secundarios visibles sobre fondo oscuro */
  --primary-hover: #475569;
  --accent: #CBD5E1;         /* texto/bordes de acento en oscuro */
  --accent-light: #1E293B;   /* tinte de acento (escena activa, "leer más") */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.45);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.55), 0 1px 2px -1px rgb(0 0 0 / 0.55);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.55);
}
/* Tintes de riesgo en oscuro: fondo oscuro + texto claro, MISMO hue (no deslumbran) */
[data-theme="dark"] {
  --verde-bg: #0C3B2E;    --verde-text: #6EE7B7;
  --amarillo-bg: #3A2C08; --amarillo-text: #FCD34D;
  --rojo-bg: #3A1414;     --rojo-text: #FCA5A5;
}
[data-theme="dark"] .card { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5); }
[data-theme="dark"] ::selection { background: var(--accent-yellow-deep); color: var(--ink); }
/* El nav tiene un fondo translúcido BLANCO hardcodeado (regla con backdrop-filter
   en base.html). En oscuro lo volteamos a una superficie oscura translúcida. */
[data-theme="dark"] .nav { background: rgba(20, 30, 51, 0.85) !important; }

/* Botones outline: en base.html tienen `background: white` HARDCODEADO → en oscuro
   serían texto claro sobre blanco (ilegibles, "se ven poquito"). Los volteamos a
   superficie oscura con texto claro y borde visible. */
[data-theme="dark"] .btn-outline {
  background: var(--card);
  color: var(--text);
  border-color: var(--border-hover);
}
[data-theme="dark"] .btn-outline:hover {
  background: var(--card);
  border-color: var(--accent-yellow-deep);
  color: #fff;
}

/* Logo/placa de claqueta: en oscuro la placa de tinta se funde con el nav. La
   volteamos a placa BLANCA (como en el login): cuña limón + dientes en tinta. */
[data-theme="dark"] .nav-logo { background: #fff !important; }

/* ── Botón de cambio de tema (nav) ─────────────────────── */
.theme-toggle {
  background: none; border: 0; cursor: pointer; padding: 5px;
  border-radius: 6px; line-height: 0; color: var(--text-secondary);
  display: inline-flex; align-items: center;
}
.theme-toggle:hover { color: var(--text); background: var(--bg-alt); }
/* 3 modos: el icono visible refleja el MODO elegido (no el tema efectivo). */
.theme-toggle .ic { display: none; }
[data-theme-mode="auto"]  .theme-toggle .ic-auto { display: inline; }
[data-theme-mode="light"] .theme-toggle .ic-sun  { display: inline; }
[data-theme-mode="dark"]  .theme-toggle .ic-moon { display: inline; }