/* ==========================================================================
KAPTUR · Sistema de diseño
Hoja única de TOKENS + componentes base, compartida por todas las apps
que viven bajo kaptur.es (luz.kaptur.es, correo.kaptur.es, ...).
Tema: claro. Estilo: elegante, formal, mínimo, UN solo color de marca.
USO en cada app (en el ):
Filosofía de mantenimiento:
- NUNCA pongas un color en hex dentro de una app. Usa siempre var(--k-...).
- Si hay que retocar la marca, se toca SOLO aquí y cambia todo a la vez.
========================================================================== */
:root{
/* ---- Marca (único acento de color) ---- */
--k-brand: #2747B0; /* azul Kaptur */
--k-brand-strong: #1C3585; /* hover / activo / texto sobre suave */
--k-brand-soft: #ECEFF9; /* fondos teñidos, chips */
--k-brand-ring: rgba(39,71,176,.20);/* halo de foco */
/* ---- Tinta y neutros ---- */
--k-ink: #14181F; /* títulos, texto principal */
--k-ink-2: #39414E; /* texto secundario / cuerpo */
--k-muted: #6A7382; /* etiquetas, texto tenue */
--k-faint: #9AA2AE; /* placeholders, deshabilitado */
--k-line: #E7EAEF; /* bordes */
--k-line-2: #F0F2F6; /* separadores suaves */
/* ---- Superficies ---- */
--k-bg: #F6F7F9; /* fondo de página */
--k-surface: #FFFFFF; /* tarjetas / paneles */
--k-surface-2: #FBFCFD; /* inputs, zonas sutiles */
/* ---- Estados (funcionales, mínimos) ---- */
--k-success: #1E9C6B; --k-success-bg: #E7F5EF;
--k-warning: #B97D14; --k-warning-bg: #FAF1DC;
--k-danger: #D2453D; --k-danger-bg: #FBEBE9;
--k-info: var(--k-brand); --k-info-bg: var(--k-brand-soft);
/* ---- Tipografía ---- */
--k-font: "Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--k-mono: "JetBrains Mono",ui-monospace,Consolas,"SF Mono",monospace;
--k-text-xs: 12px;
--k-text-sm: 13px;
--k-text: 14px; /* base de UI (portales densos) */
--k-text-md: 15px;
--k-text-lg: 18px;
--k-h3: 20px;
--k-h2: 24px;
--k-h1: 30px;
--k-display: 42px;
/* ---- Radios ---- */
--k-r-sm: 8px;
--k-r: 12px;
--k-r-lg: 16px;
--k-r-pill: 999px;
/* ---- Sombras (suaves, elegantes — nada de sombras duras) ---- */
--k-shadow-sm: 0 1px 2px rgba(20,24,31,.05);
--k-shadow: 0 1px 2px rgba(20,24,31,.04), 0 6px 20px rgba(20,24,31,.05);
--k-shadow-lg: 0 18px 48px rgba(20,24,31,.14);
/* ---- Espaciado / ritmo ---- */
--k-gap: 16px;
--k-pad: 20px;
--k-tr: .15s ease; /* transición estándar */
}
/* ---- Reset ligero ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--k-font);
font-size:var(--k-text);
line-height:1.5;
color:var(--k-ink-2);
background:var(--k-bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* ---- Tipografía base ---- */
h1,h2,h3,h4{color:var(--k-ink);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0}
h1{font-size:var(--k-h1);letter-spacing:-.02em}
h2{font-size:var(--k-h2)}
h3{font-size:var(--k-h3)}
h4{font-size:var(--k-text-lg)}
p{margin:0 0 .75em}
a{color:var(--k-brand);text-decoration:none}
a:hover{text-decoration:underline}
small{font-size:var(--k-text-sm);color:var(--k-muted)}
code,kbd,pre,.k-mono{font-family:var(--k-mono)}
::selection{background:var(--k-brand-soft);color:var(--k-brand-strong)}
/* ---- Logotipo de texto ---- */
.k-logo{font-weight:800;letter-spacing:-.02em;color:var(--k-ink);font-size:var(--k-text-lg)}
.k-logo b{color:var(--k-brand);font-weight:800}
/* ---- Botones ---- */
.k-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:600 var(--k-text)/1 var(--k-font);
padding:10px 16px;border-radius:var(--k-r-sm);
border:1px solid transparent;background:var(--k-brand);color:#fff;
cursor:pointer;transition:var(--k-tr);white-space:nowrap;
}
.k-btn:hover{background:var(--k-brand-strong)}
.k-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--k-brand-ring)}
.k-btn:active{transform:translateY(1px)}
.k-btn--ghost{background:transparent;color:var(--k-ink);border-color:var(--k-line)}
.k-btn--ghost:hover{background:var(--k-surface-2);border-color:var(--k-muted)}
.k-btn--subtle{background:var(--k-brand-soft);color:var(--k-brand-strong)}
.k-btn--subtle:hover{background:#E1E7F6}
.k-btn--danger{background:var(--k-danger)}
.k-btn--danger:hover{filter:brightness(.93)}
.k-btn--sm{padding:7px 12px;font-size:var(--k-text-sm)}
.k-btn[disabled]{opacity:.5;cursor:not-allowed}
/* ---- Tarjetas ---- */
.k-card{
background:var(--k-surface);border:1px solid var(--k-line);
border-radius:var(--k-r);padding:var(--k-pad);box-shadow:var(--k-shadow);
}
.k-card__title{font-size:var(--k-text-lg);font-weight:700;color:var(--k-ink)}
.k-card__hint{font-size:var(--k-text-sm);color:var(--k-muted);margin-top:2px}
/* ---- KPI / métricas ---- */
.k-kpi{background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r);padding:16px;box-shadow:var(--k-shadow-sm)}
.k-kpi__lbl{font-size:var(--k-text-xs);color:var(--k-muted);font-weight:600;letter-spacing:.02em}
.k-kpi__val{font-size:var(--k-h2);font-weight:700;color:var(--k-ink);margin-top:6px;letter-spacing:-.01em}
.k-kpi__u{font-size:var(--k-text-sm);color:var(--k-muted);font-weight:600}
/* ---- Formularios ---- */
.k-input,.k-select,.k-textarea{
width:100%;font:400 var(--k-text)/1.4 var(--k-font);color:var(--k-ink);
background:var(--k-surface);border:1px solid var(--k-line);border-radius:var(--k-r-sm);
padding:10px 12px;transition:var(--k-tr);outline:none;
}
.k-input::placeholder{color:var(--k-faint)}
.k-input:hover,.k-select:hover,.k-textarea:hover{border-color:var(--k-muted)}
.k-input:focus,.k-select:focus,.k-textarea:focus{border-color:var(--k-brand);box-shadow:0 0 0 3px var(--k-brand-ring)}
.k-label{display:block;font-size:var(--k-text-sm);font-weight:600;color:var(--k-ink-2);margin-bottom:6px}
/* ---- Badges / etiquetas ---- */
.k-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--k-text-xs);font-weight:600;padding:4px 10px;border-radius:var(--k-r-pill);background:var(--k-line-2);color:var(--k-ink-2)}
.k-badge--brand{background:var(--k-brand-soft);color:var(--k-brand-strong)}
.k-badge--ok{background:var(--k-success-bg);color:var(--k-success)}
.k-badge--warn{background:var(--k-warning-bg);color:var(--k-warning)}
.k-badge--bad{background:var(--k-danger-bg);color:var(--k-danger)}
/* ---- Tabla ---- */
.k-table{width:100%;border-collapse:collapse;font-size:var(--k-text-sm)}
.k-table thead th{text-align:left;font-size:var(--k-text-xs);font-weight:600;color:var(--k-muted);padding:10px 12px;border-bottom:1px solid var(--k-line)}
.k-table tbody td{padding:11px 12px;border-bottom:1px solid var(--k-line-2);color:var(--k-ink-2)}
.k-table tbody tr:hover{background:var(--k-surface-2)}
/* ---- Layout helpers ---- */
.k-container{max-width:1280px;margin:0 auto;padding:0 24px}
.k-stack{display:flex;flex-direction:column;gap:var(--k-gap)}
.k-row{display:flex;align-items:center;gap:12px}
.k-grid{display:grid;gap:var(--k-gap)}
.k-divider{height:1px;background:var(--k-line);border:0;margin:var(--k-gap) 0}
/* ---- Utilidades ---- */
.k-muted{color:var(--k-muted)}
.k-ink{color:var(--k-ink)}
.k-brand{color:var(--k-brand)}