/* Kuantera UI · hoja base para productos (ERP, paneles). Importa tokens/colors.css antes o usa este archivo solo. */
@import url("../tokens/colors.css");
@font-face { font-family: "Poppins"; font-weight: 600; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 100 900; src: url("../fonts/Inter-Variable.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; }
body { margin: 0; font-family: var(--kuantera-font-body); color: var(--kuantera-text); background: var(--kuantera-surface-2); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--kuantera-font-head); font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--kuantera-text); }
h1 { font-size: 1.857rem; line-height: 1.2; }   /* 26px */
h2 { font-size: 1.429rem; line-height: 1.25; }  /* 20px */
h3 { font-size: 1.143rem; line-height: 1.3; }   /* 16px */
h4 { font-size: 1rem; }
small, .k-muted { color: var(--kuantera-text-muted); }
.k-mono, .k-num, .k-table td.k-num, .k-kpi-value { font-family: var(--kuantera-font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--kuantera-primary); }

/* ---- layout ERP: barra lateral + cabecera ---- */
.k-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.k-sidebar { background: var(--kuantera-ink); color: #EAF2F6; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.k-sidebar .k-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.k-sidebar .k-brand img { height: 28px; }
.k-nav-label { font-size: 0.786rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7F9BAD; padding: 14px 10px 6px; }
.k-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--kuantera-radius-sm); color: #C9DAE3; text-decoration: none; font-weight: 500; }
.k-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.k-nav-item.is-active { background: var(--kuantera-primary); color: var(--kuantera-on-primary); }
.k-nav-item .k-ico { width: 18px; height: 18px; opacity: .9; }
.k-main { display: flex; flex-direction: column; }
.k-topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--kuantera-surface); border-bottom: 1px solid var(--kuantera-line); }
.k-content { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

/* ---- tarjetas y KPI ---- */
.k-card { background: var(--kuantera-surface); border: 1px solid var(--kuantera-line); border-radius: var(--kuantera-radius-md); box-shadow: var(--kuantera-shadow-soft); }
.k-card-body { padding: 18px 20px; }
.k-card-head { padding: 14px 20px; border-bottom: 1px solid var(--kuantera-line); display: flex; align-items: center; justify-content: space-between; }
.k-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.k-kpi { padding: 16px 18px; }
.k-kpi-label { font-size: 0.929rem; color: var(--kuantera-text-muted); }
.k-kpi-value { font-size: 1.714rem; font-weight: 500; margin: 6px 0 2px; letter-spacing: -0.01em; }
.k-delta { font-size: 0.857rem; font-weight: 600; }
.k-delta.up { color: var(--kuantera-success-text); } .k-delta.down { color: var(--kuantera-danger-text); }

/* ---- botones ---- */
.k-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--kuantera-radius-sm); border: 1px solid transparent; font: 500 1rem var(--kuantera-font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.k-btn-primary { background: var(--kuantera-primary); color: var(--kuantera-on-primary); } .k-btn-primary:hover { background: var(--kuantera-primary-600); }
.k-btn-secondary { background: var(--kuantera-surface); color: var(--kuantera-text); border-color: var(--kuantera-line-strong); } .k-btn-secondary:hover { background: var(--kuantera-surface-2); }
.k-btn-ghost { background: transparent; color: var(--kuantera-primary); } .k-btn-ghost:hover { background: var(--kuantera-primary-50); }
.k-btn-danger { background: var(--kuantera-danger-600); color: var(--kuantera-on-danger); } .k-btn-danger:hover { background: var(--kuantera-danger-600); }
.k-btn-accent { background: var(--kuantera-accent); color: var(--kuantera-on-accent); } .k-btn-accent:hover { background: var(--kuantera-accent-400); }
.k-btn-sm { height: 30px; padding: 0 10px; font-size: 0.929rem; } .k-btn-lg { height: 44px; padding: 0 20px; font-size: 1.071rem; }
.k-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- formularios ---- */
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-label { font-size: 0.929rem; font-weight: 500; }
.k-input, .k-select { height: 36px; padding: 0 12px; border: 1px solid var(--kuantera-line-strong); border-radius: var(--kuantera-radius-sm); background: var(--kuantera-surface); color: var(--kuantera-text); font: 1rem var(--kuantera-font-body); }
.k-input:focus, .k-select:focus { outline: 2px solid var(--kuantera-accent); outline-offset: 0; border-color: var(--kuantera-primary); }
.k-input.is-invalid { border-color: var(--kuantera-danger-500); } .k-help { font-size: 0.857rem; color: var(--kuantera-text-muted); } .k-help.is-error { color: var(--kuantera-danger-text); }
.k-input.k-num { text-align: right; }

/* ---- etiquetas de estado ---- */
.k-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--kuantera-radius-pill); font-size: 0.857rem; font-weight: 600; }
.k-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.k-badge-success { background: var(--kuantera-success-50); color: var(--kuantera-success-700); }
.k-badge-warning { background: var(--kuantera-warning-50); color: var(--kuantera-warning-800); }
.k-badge-danger  { background: var(--kuantera-danger-50);  color: var(--kuantera-danger-700); }
.k-badge-info    { background: var(--kuantera-info-50);    color: var(--kuantera-info-700); }
.k-badge-neutral { background: var(--kuantera-ink-100);    color: var(--kuantera-ink-700); }
.k-badge-accent  { background: var(--kuantera-accent-50);  color: var(--kuantera-primary-700); }

/* ---- tablas ---- */
.k-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.k-table th { text-align: left; font-weight: 600; font-size: 0.857rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kuantera-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--kuantera-line); background: var(--kuantera-surface-2); }
.k-table td { padding: 11px 14px; border-bottom: 1px solid var(--kuantera-line); vertical-align: middle; }
.k-table tr:hover td { background: var(--kuantera-primary-50); }
.k-table th.k-num, .k-table td.k-num { text-align: right; }
.k-table tfoot td { font-weight: 600; background: var(--kuantera-surface-2); }

/* ---- avisos ---- */
.k-alert { padding: 12px 14px; border-radius: var(--kuantera-radius-md); border: 1px solid; font-size: 1rem; display: flex; gap: 10px; }
.k-alert-info { background: var(--kuantera-info-50); border-color: var(--kuantera-info-200); color: var(--kuantera-info-800); }
.k-alert-warning { background: var(--kuantera-warning-50); border-color: var(--kuantera-warning-200); color: var(--kuantera-warning-800); }
.k-alert-danger { background: var(--kuantera-danger-50); border-color: var(--kuantera-danger-200); color: var(--kuantera-danger-700); }
.k-alert-success { background: var(--kuantera-success-50); border-color: var(--kuantera-success-200); color: var(--kuantera-success-700); }

/* ---- modo oscuro: los tokens semánticos ya cambian; aquí solo detalles ---- */
.dark .k-sidebar, :root[data-theme="dark"] .k-sidebar { background: #0B2032; }
.dark .k-table tr:hover td, :root[data-theme="dark"] .k-table tr:hover td { background: rgba(79,163,199,.08); }
.dark .k-badge-success { background: rgba(46,158,107,.18); color: #7FD7A9; } .dark .k-badge-warning { background: rgba(233,162,59,.18); color: #F3C77E; }
.dark .k-badge-danger { background: rgba(217,83,79,.18); color: #F0A09D; } .dark .k-badge-info { background: rgba(59,130,196,.18); color: #9DC7EA; }
.dark .k-badge-neutral { background: rgba(159,182,196,.16); color: #C9DAE3; } .dark .k-badge-accent { background: rgba(63,201,178,.16); color: #3FC9B2; }
.dark .k-btn-secondary { background: var(--kuantera-surface-2); border-color: var(--kuantera-line-strong); }
.dark .k-btn-ghost:hover { background: rgba(79,163,199,.12); }
.dark .k-alert-info { background: rgba(59,130,196,.14); border-color: rgba(59,130,196,.4); color: #BFDCF4; }
.dark .k-alert-warning { background: rgba(233,162,59,.14); border-color: rgba(233,162,59,.4); color: #F6D9A6; }
.dark .k-alert-danger { background: rgba(217,83,79,.14); border-color: rgba(217,83,79,.4); color: #F5BAB8; }
.dark .k-alert-success { background: rgba(46,158,107,.14); border-color: rgba(46,158,107,.4); color: #B4E7CC; }
@media (max-width: 900px) { .k-app { grid-template-columns: 1fr; } .k-sidebar { display: none; } .k-kpis { grid-template-columns: repeat(2, 1fr); } }