/* Kip-Up UI · hoja base para productos y paneles de la agencia.
 *
 * Todo el color sale de tokens/colors.css: aquí no hay ni un hex suelto, para que
 * cambiar un token cambie la interfaz entera y no haya dos verdades.
 *
 * Dos reglas de accesibilidad que vienen del cálculo de contraste (ver colors.json):
 *  - El rojo de marca sobre blanco da 4,17:1. Vale de relleno, pero la etiqueta del
 *    botón principal es de 15 px, así que el relleno por defecto es --kipup-red-aa
 *    (el mismo rojo un escalón más oscuro, 5,9:1). El rojo exacto de marca queda en
 *    .kp-btn-brand, para piezas grandes: héroes, portadas, botones de landing.
 *  - Ningún texto va en el rojo ni en el naranja de marca: van en red-700 y orange-800.
 *
 * Prefijo kp- para no chocar con la hoja de Kuantera (k-) si conviven en un mismo build.
 */
@import url("../tokens/colors.css");

/* Las fuentes son las del kit (OFL, en fonts/). Kip-Up no tiene monoespaciada
   de marca: las cifras usan la pila del sistema, vía --kipup-font-mono. */
/* Desde el 20/09/2026. Poppins e Inter se quedan declaradas mientras las aplicaciones
   migran, para que nada se quede sin fuente a medio camino. */
@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Anton-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/Inter-Variable.ttf") format("truetype"); }

/* ------------------------------------------------------------------ *
 * Base                                                                 *
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  font-family: var(--kipup-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--kipup-text);
  background: var(--kipup-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--kipup-font-head);
  font-weight: 600;
  color: var(--kipup-text);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h1 { font-size: 2.133rem; }  /* 32px */
h2 { font-size: 1.6rem; }    /* 24px */
h3 { font-size: 1.2rem; }    /* 18px */
h4 { font-size: 1rem; letter-spacing: -0.005em; }
p { margin: 0 0 .8em; }
a { color: var(--kipup-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
small, .kp-muted { color: var(--kipup-text-muted); }
small { font-size: 0.867rem; }  /* 13px */
.kp-micro { font-size: 0.733rem; }  /* 11px */
/* Cifras alineadas en columna. Inter ya trae cifras tabulares: no hace falta
   cambiar de familia para que cuadren, y el texto no se despega del resto. */
.kp-num { font-variant-numeric: tabular-nums; }
/* Monoespaciada de verdad (identificadores, código, hex). La pila del sistema:
   Kip-Up no tiene una fuente mono de marca. */
.kp-mono { font-family: var(--kipup-font-mono); font-variant-numeric: tabular-nums; }

/* Un solo aro de foco para todo: el rojo de marca llega a 3:1 sobre crema y
   sobre blanco, que es lo que WCAG pide a un elemento no textual. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kipup-focus);
  outline-offset: 2px;
  border-radius: var(--kipup-radius-sm);
}

/* ------------------------------------------------------------------ *
 * Estructura de panel                                                  *
 * ------------------------------------------------------------------ */
.kp-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* La barra lateral de Kip-Up es clara, no navy: la agencia se presenta en crema
   y guarda el navy para el texto y para el modo oscuro. */
.kp-sidebar {
  background: var(--kipup-surface);
  border-right: 1px solid var(--kipup-line);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kp-brand { display: flex; align-items: center; padding: 2px 8px 22px; }
.kp-brand img { height: 26px; width: auto; }
.kp-nav-label {
  font-size: 0.733rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--kipup-text-muted); padding: 16px 10px 6px;
}
.kp-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--kipup-radius-sm);
  color: var(--kipup-text); text-decoration: none; font-weight: 500;
  border-left: 3px solid transparent; margin-left: -3px;
}
.kp-nav-item:hover { background: var(--kipup-surface-2); }
/* El activo se marca con la barra roja, no con un relleno rojo: el rojo de marca
   como fondo de un elemento pequeño y repetido cansa y no llega a 4,5:1 con texto. */
.kp-nav-item.is-active { background: var(--kipup-surface-2); border-left-color: var(--kipup-red); font-weight: 600; }
.kp-nav-item .kp-ico { width: 18px; height: 18px; flex: none; color: var(--kipup-text-muted); }
.kp-nav-item.is-active .kp-ico { color: var(--kipup-red); }
.kp-sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--kipup-line); }

.kp-main { display: flex; flex-direction: column; min-width: 0; }
.kp-topbar {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px; background: var(--kipup-surface); border-bottom: 1px solid var(--kipup-line);
}
.kp-content { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 22px; }
.kp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* ------------------------------------------------------------------ *
 * Tarjetas y cifras                                                    *
 * ------------------------------------------------------------------ */
.kp-card {
  background: var(--kipup-surface);
  border: 1px solid var(--kipup-line);
  border-radius: var(--kipup-radius-md);
  box-shadow: var(--kipup-shadow-soft);
  overflow: hidden;
}
.kp-card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--kipup-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.kp-card-body { padding: 18px 20px; }

.kp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kp-kpi { padding: 18px 20px; }
.kp-kpi-label { font-size: 0.867rem; font-weight: 500; color: var(--kipup-text-muted); }
.kp-kpi-value {
  font-family: var(--kipup-font-head); font-weight: 600; font-size: 2rem;
  letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 4px;
}
.kp-delta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.867rem; font-weight: 600; }
.kp-delta.up { color: var(--kipup-success-text); }
.kp-delta.down { color: var(--kipup-danger-text); }
/* Franja de acento superior: la usa la tarjeta que quiere llevarse la mirada. */
.kp-card.is-featured { border-top: 3px solid var(--kipup-red); }

/* ------------------------------------------------------------------ *
 * Botones                                                              *
 * ------------------------------------------------------------------ */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--kipup-radius-sm);
  font: 600 1rem/1 var(--kipup-font-body); letter-spacing: -0.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kp-btn:disabled, .kp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.kp-btn-primary { background: var(--kipup-red-aa); color: var(--kipup-text-onbrand); }
.kp-btn-primary:hover:not(:disabled) { background: var(--kipup-red-700); }
/* El rojo exacto de marca. Blanco encima da 4,17:1, que solo cumple AA como
   TEXTO GRANDE, y WCAG entiende por grande >=18,66 px en negrita: por eso la
   etiqueta es de 20 px y peso 700, no 18/600. Si se encoge, deja de cumplir. */
.kp-btn-brand { background: var(--kipup-red); color: var(--kipup-text-onbrand); height: 52px; padding: 0 26px; font-size: 1.334rem; font-weight: 700; border-radius: var(--kipup-radius-md); }
.kp-btn-brand:hover:not(:disabled) { background: var(--kipup-red-aa); }
.kp-btn-secondary { background: var(--kipup-surface); color: var(--kipup-text); border-color: var(--kipup-line-field); }
.kp-btn-secondary:hover:not(:disabled) { background: var(--kipup-surface-2); }
.kp-btn-ghost { background: transparent; color: var(--kipup-link); }
.kp-btn-ghost:hover:not(:disabled) { background: var(--kipup-danger-bg); }
.kp-btn-dark { background: var(--kipup-ink); color: var(--kipup-cream); }
.kp-btn-dark:hover:not(:disabled) { background: var(--kipup-ink-800); }
.kp-btn-danger { background: var(--kipup-danger); color: var(--kipup-white); }
.kp-btn-danger:hover:not(:disabled) { background: var(--kipup-danger-700); }
.kp-btn-sm { height: 32px; padding: 0 12px; font-size: 0.867rem; }
.kp-btn-lg { height: 46px; padding: 0 22px; font-size: 1.067rem; }
.kp-btn-icon { width: 38px; padding: 0; }
.kp-btn .kp-ico { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ *
 * Formularios                                                          *
 * ------------------------------------------------------------------ */
.kp-field { display: flex; flex-direction: column; gap: 6px; }
.kp-label { font-size: 0.867rem; font-weight: 600; }
.kp-input, .kp-select, .kp-textarea {
  width: 100%; padding: 0 12px; height: 38px;
  font: 1rem var(--kipup-font-body); color: var(--kipup-text);
  background: var(--kipup-surface);
  /* El borde es --kipup-line-field y no --kipup-line: un campo tiene que
     distinguirse del fondo con 3:1, un separador de tarjeta no. */
  border: 1px solid var(--kipup-line-field); border-radius: var(--kipup-radius-sm);
}
.kp-textarea { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.kp-select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.kp-input::placeholder, .kp-textarea::placeholder { color: var(--kipup-text-muted); opacity: 1; }
.kp-input:hover, .kp-select:hover, .kp-textarea:hover { border-color: var(--kipup-ink-500); }
.kp-input:disabled, .kp-select:disabled, .kp-textarea:disabled { background: var(--kipup-surface-2); color: var(--kipup-text-muted); cursor: not-allowed; }
.kp-input.is-invalid, .kp-select.is-invalid, .kp-textarea.is-invalid { border-color: var(--kipup-danger); }
.kp-help { font-size: 0.867rem; color: var(--kipup-text-muted); }
/* El error no se fía solo del color: lleva un signo delante. */
.kp-help.is-error { color: var(--kipup-danger-text); font-weight: 500; }
.kp-help.is-error::before { content: "! "; font-weight: 700; }
.kp-input.kp-num { text-align: right; }
.kp-search { position: relative; display: flex; align-items: center; }
.kp-search .kp-ico { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--kipup-text-muted); pointer-events: none; }
.kp-search .kp-input { padding-left: 34px; }

.kp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.933rem; cursor: pointer; }
.kp-check input { accent-color: var(--kipup-red-aa); width: 16px; height: 16px; margin: 0; }

/* ------------------------------------------------------------------ *
 * Insignias y fichas                                                   *
 * ------------------------------------------------------------------ */
.kp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--kipup-radius-pill);
  font-size: 0.8rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.kp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.kp-badge-success { background: var(--kipup-success-bg); color: var(--kipup-success-text); }
.kp-badge-warning { background: var(--kipup-warning-bg); color: var(--kipup-warning-text); }
.kp-badge-danger  { background: var(--kipup-danger-bg);  color: var(--kipup-danger-text); }
.kp-badge-info    { background: var(--kipup-info-bg);    color: var(--kipup-info-text); }
.kp-badge-neutral { background: var(--kipup-surface-3);  color: var(--kipup-ink-700); }
.kp-badge-brand   { background: var(--kipup-danger-bg);  color: var(--kipup-red-700); }
.kp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border: 1px solid var(--kipup-line-field); border-radius: var(--kipup-radius-pill);
  font-size: 0.867rem; font-weight: 500; color: var(--kipup-text); background: transparent; cursor: pointer;
}
.kp-chip.is-active { background: var(--kipup-ink); border-color: var(--kipup-ink); color: var(--kipup-cream); }

/* ------------------------------------------------------------------ *
 * Avatares y avance                                                    *
 * ------------------------------------------------------------------ */
.kp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font: 600 0.8rem/1 var(--kipup-font-head); letter-spacing: .01em;
  background: var(--kipup-ink); color: var(--kipup-cream); flex: none;
}
.kp-avatar.is-red { background: var(--kipup-red-aa); color: var(--kipup-white); }
.kp-avatar.is-orange { background: var(--kipup-orange); color: var(--kipup-ink); }
.kp-avatar.is-info { background: var(--kipup-info-700); color: var(--kipup-white); }
.kp-avatars { display: inline-flex; }
.kp-avatars .kp-avatar { margin-left: -8px; border: 2px solid var(--kipup-surface); }
.kp-avatars .kp-avatar:first-child { margin-left: 0; }

.kp-progress { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.kp-progress-track { flex: 1; height: 6px; border-radius: var(--kipup-radius-pill); background: var(--kipup-surface-3); overflow: hidden; }
.kp-progress-fill { height: 100%; border-radius: inherit; background: var(--kipup-red); }
.kp-progress-fill.is-done { background: var(--kipup-success); }
.kp-progress-fill.is-late { background: var(--kipup-orange); }
.kp-progress-value { font-size: 0.8rem; font-weight: 600; color: var(--kipup-text-muted); min-width: 34px; text-align: right; }

/* ------------------------------------------------------------------ *
 * Tablas                                                               *
 * ------------------------------------------------------------------ */
.kp-table-wrap { overflow-x: auto; }
.kp-table { width: 100%; border-collapse: collapse; font-size: 0.933rem; }
.kp-table th {
  text-align: left; padding: 11px 20px;
  font-size: 0.733rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--kipup-text-muted); background: var(--kipup-surface-2);
  border-bottom: 1px solid var(--kipup-line); white-space: nowrap;
}
.kp-table td { padding: 13px 20px; border-bottom: 1px solid var(--kipup-line); vertical-align: middle; }
.kp-table tbody tr:last-child td { border-bottom: 0; }
.kp-table tbody tr:hover td { background: var(--kipup-surface-2); }
.kp-table th.kp-num, .kp-table td.kp-num { text-align: right; }
.kp-table tfoot td { font-weight: 600; background: var(--kipup-surface-2); border-bottom: 0; }
.kp-cell-title { font-weight: 600; }
.kp-cell-sub { display: block; font-size: 0.8rem; color: var(--kipup-text-muted); }

/* ------------------------------------------------------------------ *
 * Avisos                                                               *
 * ------------------------------------------------------------------ */
.kp-alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border: 1px solid transparent; border-radius: var(--kipup-radius-md);
  font-size: 0.933rem;
}
.kp-alert .kp-ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.kp-alert strong { font-weight: 700; }
.kp-alert-info    { background: var(--kipup-info-bg);    border-color: var(--kipup-info-200);    color: var(--kipup-info-text); }
.kp-alert-success { background: var(--kipup-success-bg); border-color: var(--kipup-success-200); color: var(--kipup-success-text); }
.kp-alert-warning { background: var(--kipup-warning-bg); border-color: var(--kipup-warning-200); color: var(--kipup-warning-text); }
.kp-alert-danger  { background: var(--kipup-danger-bg);  border-color: var(--kipup-danger-200);  color: var(--kipup-danger-text); }

/* ------------------------------------------------------------------ *
 * Pestañas                                                             *
 * ------------------------------------------------------------------ */
.kp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kipup-line); }
.kp-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; margin-bottom: -1px; cursor: pointer;
  font: 500 0.933rem var(--kipup-font-body); color: var(--kipup-text-muted);
}
.kp-tab:hover { color: var(--kipup-text); }
.kp-tab.is-active { color: var(--kipup-text); border-bottom-color: var(--kipup-red); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Ajustes de modo oscuro                                               *
 *                                                                      *
 * Los tokens ya cambian solos: aquí solo van los casos en que el mismo  *
 * token no da la respuesta correcta en los dos modos.                  *
 * ------------------------------------------------------------------ */
:root[data-theme="dark"] .kp-alert-info,    .dark .kp-alert-info    { border-color: var(--kipup-info-800); }
:root[data-theme="dark"] .kp-alert-success, .dark .kp-alert-success { border-color: var(--kipup-success-800); }
:root[data-theme="dark"] .kp-alert-warning, .dark .kp-alert-warning { border-color: var(--kipup-warning-800); }
:root[data-theme="dark"] .kp-alert-danger,  .dark .kp-alert-danger  { border-color: var(--kipup-danger-800); }
/* En oscuro el navy ya es la superficie: la insignia neutra y el avatar
   necesitan un tono claro para separarse de ella. */
:root[data-theme="dark"] .kp-badge-neutral, .dark .kp-badge-neutral { background: var(--kipup-surface-3); color: var(--kipup-cream); }
:root[data-theme="dark"] .kp-badge-brand,   .dark .kp-badge-brand   { color: var(--kipup-red-300); }
:root[data-theme="dark"] .kp-avatar,        .dark .kp-avatar        { background: var(--kipup-surface-3); color: var(--kipup-cream); }
:root[data-theme="dark"] .kp-avatar.is-info, .dark .kp-avatar.is-info { background: var(--kipup-info-600); }
:root[data-theme="dark"] .kp-chip.is-active, .dark .kp-chip.is-active { background: var(--kipup-cream); border-color: var(--kipup-cream); color: var(--kipup-ink); }
:root[data-theme="dark"] .kp-btn-dark,      .dark .kp-btn-dark      { background: var(--kipup-cream); color: var(--kipup-ink); }
:root[data-theme="dark"] .kp-btn-dark:hover, .dark .kp-btn-dark:hover { background: var(--kipup-cream-70); }
:root[data-theme="dark"] .kp-btn-ghost:hover, .dark .kp-btn-ghost:hover { background: var(--kipup-surface-2); }
:root[data-theme="dark"] .kp-btn-danger,    .dark .kp-btn-danger    { color: var(--kipup-ink); }
/* El logo cambia de versión, no de color: cada modo enseña su fichero. */
.kp-logo-dark { display: none; }
:root[data-theme="dark"] .kp-logo-light, .dark .kp-logo-light { display: none; }
:root[data-theme="dark"] .kp-logo-dark,  .dark .kp-logo-dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .kp-alert-info    { border-color: var(--kipup-info-800); }
  :root:not([data-theme="light"]):not(.light) .kp-alert-success { border-color: var(--kipup-success-800); }
  :root:not([data-theme="light"]):not(.light) .kp-alert-warning { border-color: var(--kipup-warning-800); }
  :root:not([data-theme="light"]):not(.light) .kp-alert-danger  { border-color: var(--kipup-danger-800); }
  :root:not([data-theme="light"]):not(.light) .kp-badge-neutral { background: var(--kipup-surface-3); color: var(--kipup-cream); }
  :root:not([data-theme="light"]):not(.light) .kp-badge-brand   { color: var(--kipup-red-300); }
  :root:not([data-theme="light"]):not(.light) .kp-avatar        { background: var(--kipup-surface-3); color: var(--kipup-cream); }
  :root:not([data-theme="light"]):not(.light) .kp-avatar.is-info { background: var(--kipup-info-600); }
  :root:not([data-theme="light"]):not(.light) .kp-chip.is-active { background: var(--kipup-cream); border-color: var(--kipup-cream); color: var(--kipup-ink); }
  :root:not([data-theme="light"]):not(.light) .kp-btn-dark      { background: var(--kipup-cream); color: var(--kipup-ink); }
  :root:not([data-theme="light"]):not(.light) .kp-btn-danger    { color: var(--kipup-ink); }
  :root:not([data-theme="light"]):not(.light) .kp-logo-light    { display: none; }
  :root:not([data-theme="light"]):not(.light) .kp-logo-dark     { display: block; }
}

/* ------------------------------------------------------------------ *
 * Pantallas estrechas                                                  *
 * ------------------------------------------------------------------ */
@media (max-width: 1040px) {
  .kp-kpis { grid-template-columns: repeat(2, 1fr); }
  .kp-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .kp-app { grid-template-columns: 1fr; }
  .kp-sidebar { display: none; }
  .kp-topbar, .kp-content { padding-left: 16px; padding-right: 16px; }
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}