/* ═══════════════════════════════════════════════════════════════════════
   VELOCITY — CAPA DE COMPONENTES
   ───────────────────────────────────────────────────────────────────────
   tokens.css define los colores. Esto define las FORMAS: que radio tiene
   una tarjeta, cuanto respira un boton, que tamaños de texto existen.

   Por que hizo falta. Auditando las paginas aparecieron 21 radios
   distintos, 59 tamaños de fuente y el mismo boton primario declarado seis
   veces con padding y peso diferentes en cada una. Cada pagina habia
   resuelto lo mismo por su cuenta, y por eso se veian como sitios
   distintos aunque compartieran la paleta.

   Como se usa. Se carga DESPUES del <style> de cada pagina, asi que gana
   los empates de especificidad y normaliza sin que haya que reescribir el
   marcado. Toca solo lenguaje visual —radio, tipografia, borde, fondo,
   sombra, peso—; nunca layout: ancho, grid, flex y posicion quedan como
   los definio cada pagina.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Radios: cuatro, no veintiuno ── */
  --u-r-sm:   8px;    /* inputs, chips, botones chicos */
  --u-r-md:   12px;   /* botones, tarjetas internas */
  --u-r-lg:   16px;   /* tarjetas y paneles */
  --u-r-full: 999px;  /* pildoras y avatares */

  /* ── Escala tipografica: siete pasos ── */
  --u-t-2xs: 0.68rem;
  --u-t-xs:  0.75rem;
  --u-t-sm:  0.82rem;
  --u-t-md:  0.9rem;
  --u-t-lg:  1.05rem;
  --u-t-xl:  1.35rem;
  --u-t-2xl: 1.75rem;

  /* ── Espaciado ── */
  --u-s-1: 4px;
  --u-s-2: 8px;
  --u-s-3: 12px;
  --u-s-4: 16px;
  --u-s-5: 20px;
  --u-s-6: 24px;
  --u-s-8: 32px;

  /* ── Elevacion: dos niveles. Mas sombras es ruido ── */
  --u-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --u-sombra-2: 0 4px 16px rgba(0, 0, 0, 0.10);

  --u-transicion: 0.15s ease;
}

/* ════════════════════════════════════════════════════════════════
   BOTONES
   Un solo tratamiento. La jerarquia la da el color, no la forma.
   ════════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.cta-btn,
.calc-btn,
.eval-btn,
.btn-generate,
.btn-save,
.v-btn {
  border-radius: var(--u-r-md);
  font-family: inherit;
  font-size: var(--u-t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  transition: background var(--u-transicion), border-color var(--u-transicion),
              color var(--u-transicion), filter var(--u-transicion);
  /* Objetivo tactil minimo: 44px es la recomendacion de accesibilidad */
  min-height: 40px;
}

/* Primario: el rojo de la marca. Uno por pantalla */
.btn-primary,
.btn.primary,
.cta-btn,
.btn-generate,
.v-btn.primary {
  background: var(--v-brand-500, #e61919);
  border-color: var(--v-brand-500, #e61919);
  color: #fff;
}
.btn-primary:hover,
.btn.primary:hover,
.cta-btn:hover,
.btn-generate:hover,
.v-btn.primary:hover { filter: brightness(1.08); }

/* Secundario: mismo peso visual, sin gritar */
.btn-secondary,
.btn.secondary,
.v-btn.secondary {
  background: var(--v-surface-1, transparent);
  border-color: var(--v-border);
  color: var(--v-text);
}
.btn-secondary:hover,
.btn.secondary:hover,
.v-btn.secondary:hover { border-color: var(--v-border-hover, var(--v-border)); }

/* Fantasma: acciones terciarias */
.btn-ghost,
.v-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--v-text-muted);
}
.btn-ghost:hover,
.v-btn.ghost:hover { color: var(--v-text); background: var(--v-surface-2); }

.btn:disabled,
.btn-primary:disabled,
.v-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Foco visible: se veia el contorno del navegador o nada */
.btn:focus-visible,
.btn-primary:focus-visible,
.v-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--v-brand-500, #e61919);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   TARJETAS Y PANELES
   Sin degradados: eran distintos en cada pagina y no aportaban.
   ════════════════════════════════════════════════════════════════ */
.card,
.panel,
.section-card,
.calc-card,
.doc-card,
.term-card,
.form-section,
.editor-card,
.chart-container,
.v-card {
  background: var(--v-surface-1);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-lg);
  box-shadow: none;
}

/* Tarjetas de metrica: el color va en el numero, no en el marco */
.stat-card,
.metric-card,
.v-stat {
  background: var(--v-surface-1);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-md);
  box-shadow: none;
}
.stat-card .label,
.v-stat .label {
  font-size: var(--u-t-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--v-text-muted);
}
.stat-card .value,
.v-stat .value {
  font-size: var(--u-t-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-card .sub,
.v-stat .sub { font-size: var(--u-t-2xs); color: var(--v-text-muted); }

/* ════════════════════════════════════════════════════════════════
   CAMPOS DE FORMULARIO
   ════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea,
.input,
.form-input,
.calc-input,
.v-input {
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-sm);
  color: var(--v-text);
  font-family: inherit;
  font-size: var(--u-t-sm);
  transition: border-color var(--u-transicion);
}
input:focus,
select:focus,
textarea:focus,
.v-input:focus { border-color: var(--v-brand-500, #e61919); outline: none; }
input::placeholder,
textarea::placeholder { color: var(--v-text-muted); opacity: 1; }

label,
.field-label,
.form-label {
  font-size: var(--u-t-2xs);
  font-weight: 600;
  color: var(--v-text-muted);
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════
   PESTAÑAS Y CHIPS
   ════════════════════════════════════════════════════════════════ */
.tab,
.tab-btn,
.pill,
.chip,
.badge,
.lead-tag,
.v-chip {
  border-radius: var(--u-r-sm);
  font-size: var(--u-t-xs);
  font-weight: 600;
  letter-spacing: 0;
}

.tabs,
.tab-bar,
.v-tabs {
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-md);
}

/* ════════════════════════════════════════════════════════════════
   ENCABEZADO DE PAGINA
   Las cuatro paginas lo tenian con tamaños distintos.
   ════════════════════════════════════════════════════════════════ */
.page-header h1,
.page-head h1,
.v-page-head h1 {
  font-size: var(--u-t-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.page-header p,
.page-head p,
.v-page-head p {
  font-size: var(--u-t-sm);
  color: var(--v-text-muted);
  line-height: 1.55;
}

h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.015em; }

/* ════════════════════════════════════════════════════════════════
   TABLAS
   ════════════════════════════════════════════════════════════════ */
.data-table,
.tabla,
.v-table {
  border-radius: var(--u-r-md);
  border: 1px solid var(--v-border);
  font-size: var(--u-t-sm);
}
.data-table th,
.v-table th {
  font-size: var(--u-t-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--v-text-muted);
}

/* ════════════════════════════════════════════════════════════════
   SEPARADORES Y MODALES
   ════════════════════════════════════════════════════════════════ */
hr, .divider { border: none; border-top: 1px solid var(--v-border); }

.modal-box,
.modal-content,
.v-modal {
  background: var(--v-surface-1);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-lg);
  box-shadow: var(--u-sombra-2);
}

/* ════════════════════════════════════════════════════════════════
   MOVIMIENTO
   Respetar a quien pidio menos animacion en su sistema.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   INVENTARIO REAL
   Los nombres de arriba son los genericos. Estos son los que las paginas
   usan de verdad, sacados de recorrer el DOM de cada una. Sin esto la
   unificacion alcanzaba a la mitad de los elementos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tarjetas y paneles ── */
.term-card,        /* glosario  */
.prod-card,        /* pedidos   */
.kanban-col,
.form-card,        /* documentos */
.rating-card,      /* evaluador  */
.form-guide,       /* calculadora */
.result-card,
.doc-preview {
  background: var(--v-surface-1);
  border: 1px solid var(--v-border);
  border-radius: var(--u-r-lg);
  box-shadow: none;
}

/* Piezas internas: un escalon menos de radio que su contenedor */
.kanban-item,
.check-box,
.isuf,
.stat-chip,
.sk-col {
  border-radius: var(--u-r-md);
}

/* ── Botones que no se llamaban .btn ── */
.btn-sm,
.btn-outline,
.btn-remove,
.preset-btn,
.result-cta,
.btn-auth,
.radar-chip {
  border-radius: var(--u-r-sm);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--u-transicion), border-color var(--u-transicion), color var(--u-transicion);
}

/* Los chicos son chicos de verdad: sin el minimo de 40px */
.btn-sm,
.btn.btn-sm,
.radar-chip {
  min-height: 30px;
  font-size: var(--u-t-2xs);
}

/* ── Pestañas ── */
.cat-tab,          /* glosario   */
.doc-tab,          /* documentos */
.tab-nav button {
  border-radius: var(--u-r-sm);
  font-size: var(--u-t-xs);
  font-weight: 600;
}

/* ── Un solo tamaño de texto en los botones grandes ── */
.btn,
.btn-primary,
.btn-secondary,
.cta-btn,
.calc-btn,
.eval-btn,
.btn-generate,
.result-cta {
  font-size: var(--u-t-sm);
}

/* ── Radios sueltos que quedaban fuera de la escala ──
   Se veian 6px, 10px, 11px, 14px y 20px repartidos sin criterio. */
.badge,
.pill,
.tag,
.lead-tag,
.stat-chip { border-radius: var(--u-r-sm); }

.modal-box,
.modal-content { border-radius: var(--u-r-lg); }


/* ═══════════════════════════════════════════════════════════════════════
   TAMAÑOS DE BOTON: TRES, NO SIETE
   Entre las cuatro paginas habia botones en 0.72, 0.8125, 0.85, 0.9, 0.95 y
   1rem, y pesos en 550, 600, 700 y 800. Casi ninguna diferencia era
   intencional: eran decisiones sueltas tomadas en momentos distintos.
   Se conserva la jerarquia que si tenia sentido —el CTA fijo y el de generar
   documentos son mas grandes a proposito— y se la lleva a la escala.
   ═══════════════════════════════════════════════════════════════════════ */

/* Chico: acciones dentro de una fila o una tarjeta */
.toolbar-actions .btn,
.step-nav .btn,
.radar-card .rc-actions .btn,
.btn.btn-sm {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--u-r-sm);
  min-height: 30px;
}

/* Grande: la accion principal de la pantalla */
.btn-sticky-wrap .btn-primary,
.popup .btn-submit,
.btn-generate,
.v-btn.lg {
  font-size: var(--u-t-md);
  font-weight: 600;
  border-radius: var(--u-r-md);
  min-height: 46px;
}

/* Un solo peso para todos los botones: 700 y 800 gritaban de mas */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-sm,
.cta-btn,
.btn-generate,
.preset-btn,
.result-cta { font-weight: 600; }

/* Encabezados de tarjeta a la escala */
.card-header h2 { font-size: var(--u-t-lg); font-weight: 700; letter-spacing: -0.02em; }
.card-header p  { font-size: var(--u-t-xs); color: var(--v-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   BOTONES SIN CLASE
   Buena parte de los botones no usa ninguna clase propia —en glosario van
   con utilidades sueltas tipo "mt-3 px-4"— asi que apuntar por clase
   dejaba afuera a la mitad. Se normaliza el elemento y se exceptua lo que
   es cromo de la interfaz o tiene forma propia a proposito.
   ═══════════════════════════════════════════════════════════════════════ */
button:not(.v-theme-toggle):not(.topnav-hamburger):not(.modal-close):not(.vn-arrow):not([class*="rounded-full"]):not(.avatar):not([class*="circle"]) {
  border-radius: var(--u-r-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Los radios sueltos de 4, 6 y 10px se llevan al escalon chico */
.chip, .tag, .pill-sm, .mini-btn, .icon-btn,
[class*="chip"], [class*="badge"] {
  border-radius: var(--u-r-sm);
}

/* Las pildoras que si deben ser redondas del todo */
.pill, .lead-tag, .radar-chip.on, [class*="rounded-full"] {
  border-radius: var(--u-r-full);
}


/* ── Selectores de opcion: todos al mismo escalon chico ──
   Eran 10.88, 11.2, 12 y 12.48px segun la pagina, sin que la diferencia
   significara nada. */
.preset-btn,
.cbm-toggle-btn,
.product-mode-btn,
.btn-sm,
.btn.btn-sm,
.btn-remove,
.btn-outline.btn-sm,
.rc-actions .btn { font-size: 0.72rem; }

/* Pestañas: un solo tamaño */
.tab, .cat-tab, .doc-tab, .tab-btn { font-size: var(--u-t-xs); }


/* ═══════════════════════════════════════════════════════════════════════
   GRISES DE UTILIDAD -> TOKEN
   El glosario usa `text-gray-500` de Tailwind para los subtitulos en
   ingles. Medido sobre el fondo claro da 2.94:1, por debajo del 4.5 que
   pide WCAG AA para texto de 12px: se lee mal y no es un problema de
   gusto. El token --v-text-muted esta calculado para pasar en los dos
   temas, asi que los grises sueltos se redirigen ahi.
   ═══════════════════════════════════════════════════════════════════════ */
.text-gray-500,
.text-gray-400,
.text-neutral-500,
.text-neutral-400,
.text-slate-500,
.text-slate-400 { color: var(--v-text-muted) !important; }