/* ═══════════════════════════════════════════════════════════════════════════
   UI-KIT · BARRIDO 24/07/26 — las herramientas del sistema (Fase 0)
   Paleta: SOLO el acento del admin (var --accent) + negro + blanco + grises
   neutros fijos. Estados funcionales sobrios únicamente en pills/avisos.
   Reglas: botones al tamaño de su texto (36px) · recuadros solo si agrupan ·
   superficies planas · movimiento suave 180ms · nada se quita.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --k-acento: var(--accent, #5e2ced);
  --k-negro: #111214;
  --k-blanco: #ffffff;
  --k-g50: #f7f7f8;
  --k-g100: #efeff1;
  --k-g200: #e3e4e7;
  --k-g400: #a2a4aa;
  --k-g600: #6a6c72;
  /* estados funcionales (solo pills/avisos — texto oscuro sobre tinte MUY suave) */
  --k-ok-t: #14634a;  --k-ok-f: #e8f5ef;
  --k-warn-t: #7a5300; --k-warn-f: #faf3e0;
  --k-err-t: #a32323;  --k-err-f: #fbecec;
  --k-t: 180ms ease;
  --k-sombra: 0 8px 24px -12px rgba(17, 18, 20, .18);
}

/* ── Botones: miden lo que mide su texto · 36px · hover con feedback ── */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; width: auto;
  border: 1px solid var(--k-g200); border-radius: 9px;
  background: var(--k-blanco); color: var(--k-negro);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--k-t), border-color var(--k-t), transform var(--k-t), box-shadow var(--k-t);
}
.k-btn:hover { background: var(--k-g50); border-color: var(--k-g400); }
.k-btn:active { transform: translateY(1px); }
.k-btn:disabled { opacity: .45; cursor: not-allowed; }
.k-btn-primary {
  background: var(--k-acento); border-color: var(--k-acento); color: #fff;
}
.k-btn-primary:hover { background: var(--k-acento); border-color: var(--k-acento); filter: brightness(1.07); }
.k-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.k-btn-peligro { color: var(--k-err-t); }
.k-btn-peligro:hover { border-color: var(--k-err-t); background: var(--k-err-f); }
.k-btn .k-ic { width: 15px; height: 15px; }

/* ── Íconos (sprite ui-icons.svg) ── */
.k-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Formularios: labels normales · inputs 38px · focus acento suave ── */
.k-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--k-g600); margin: 0 0 5px; letter-spacing: 0; text-transform: none; }
.k-input, .k-select, .k-textarea {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--k-g200); border-radius: 8px;
  background: var(--k-blanco); color: var(--k-negro);
  font-family: inherit; font-size: 13.5px;
  transition: border-color var(--k-t), box-shadow var(--k-t);
}
.k-textarea { height: auto; min-height: 86px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.k-input:focus, .k-select:focus, .k-textarea:focus {
  outline: none; border-color: var(--k-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-acento) 14%, transparent);
}
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-g400); }

/* ── Pills de estado (único lugar con tinte) ── */
.k-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--k-g100); color: var(--k-g600);
}
.k-pill-ok { background: var(--k-ok-f); color: var(--k-ok-t); }
.k-pill-warn { background: var(--k-warn-f); color: var(--k-warn-t); }
.k-pill-err { background: var(--k-err-f); color: var(--k-err-t); }
.k-pill-acento { background: color-mix(in srgb, var(--k-acento) 10%, #fff); color: var(--k-acento); }

/* ── Card: SOLO cuando agrupa de verdad ── */
.k-card { background: var(--k-blanco); border: 1px solid var(--k-g200); border-radius: 12px; padding: 14px 16px; }

/* ── Filas de lista densas con hover ── */
.k-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--k-g100);
  transition: background var(--k-t);
}
.k-row:hover { background: var(--k-g50); }
.k-row:last-child { border-bottom: none; }

/* ── Separador tipográfico (en vez de encajonar) ── */
.k-titulo { font-size: 13px; font-weight: 700; color: var(--k-negro); margin: 18px 0 8px; }
.k-sub { font-size: 12px; color: var(--k-g600); }
.k-divider { height: 1px; background: var(--k-g100); border: none; margin: 14px 0; }

/* ── Menú/popover: aparición suave, nunca en seco ── */
.k-menu {
  position: absolute; z-index: 60; min-width: 180px;
  background: var(--k-blanco); border: 1px solid var(--k-g200); border-radius: 10px;
  box-shadow: var(--k-sombra); padding: 5px;
  opacity: 0; transform: translateY(-4px) scale(.99); pointer-events: none;
  transition: opacity var(--k-t), transform var(--k-t);
}
.k-menu.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.k-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 7px;
  background: transparent; color: var(--k-negro);
  font-family: inherit; font-size: 12.5px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background var(--k-t);
}
.k-menu-item:hover { background: var(--k-g50); }

/* ── Aparición suave de paneles/secciones ── */
.k-fade { animation: kFade .22s ease both; }
@keyframes kFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Dato destacado sobrio (nada de display XXL) ── */
.k-dato { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--k-negro); font-variant-numeric: tabular-nums; }

/* ── Botón de ícono CIRCULAR (estilo Google) — hover redondo, nunca cuadrado ── */
.k-btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: transparent; color: var(--k-g600);
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background var(--k-t), color var(--k-t), transform var(--k-t);
}
.k-btn-ico:hover { background: var(--k-g100); color: var(--k-negro); }
.k-btn-ico:active { transform: scale(.92); }
.k-btn-ico .k-ic { width: 17px; height: 17px; }
.k-btn-ico.k-peligro:hover { background: var(--k-err-f); color: var(--k-err-t); }
.k-btn-ico.k-acento:hover { background: color-mix(in srgb, var(--k-acento) 10%, #fff); color: var(--k-acento); }

/* ── Tooltip: todo ícono solo DICE SU NOMBRE al pasar el cursor (data-tip="...") ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #2a2b2f; color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 7px 11px; border-radius: 8px;
  opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity var(--k-t), transform var(--k-t);
}
[data-tip]::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #2a2b2f; border-bottom: none;
  opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity var(--k-t);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before { opacity: 1; }

/* ── Pestañas con pastilla suave en la activa (estilo Facebook) ── */
.k-tabs { display: flex; align-items: center; gap: 4px; }
.k-tab {
  border: none; background: transparent;
  height: 34px; padding: 0 15px; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--k-negro);
  cursor: pointer; white-space: nowrap;
  transition: background var(--k-t), color var(--k-t);
}
.k-tab:hover { background: var(--k-g50); }
.k-tab.on { background: var(--k-g100); }

/* ── Fila tipo ajustes: ícono + título + descripción (sin recuadros) ── */
.k-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  transition: background var(--k-t);
}
.k-item:hover { background: var(--k-g50); }
.k-item .k-ic { width: 20px; height: 20px; color: var(--k-negro); }
.k-item-tit { font-size: 14px; font-weight: 700; color: var(--k-negro); }
.k-item-sub { font-size: 12px; color: var(--k-g600); margin-top: 1px; }

/* móvil: acá sí, controles a lo ancho */
@media (max-width: 640px) {
  .k-btn-movil-full { width: 100%; }
}