/* ═══════════════════════════════════════════════════════════════════════════
   Kanan Sentinel — sistema visual de la suite
   Tomado de kanan-website/assets/styles.css para que SEKaform no parezca un
   producto distinto. Teal como color de acción, bronce para lo institucional
   y jerárquico, fondos casi negros con matiz azul.

   Este archivo define SOLO tokens y componentes de marca. Las páginas heredadas
   siguen usando styles.css; la capa de compatibilidad del final remapea sus
   variables antiguas (--pri, --bg, --card...) a la paleta Kanan, así que la PWA
   se rebrandea sin tocar sus 11 archivos HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@300;400;600;700&display=swap');

:root {
  /* Marca */
  --teal:#3fd9d2;  --teal-bright:#6ff0ea;  --teal-dim:#1d8f8a;
  --bronze:#c8954f; --bronze-light:#e7c389; --bronze-dark:#8a5e2c;
  --silver:#e8edf2;

  /* Superficies */
  --navy-950:#070d14; --navy-900:#0b0f19; --navy-850:#0a0f1d;
  --navy-800:#0b1622; --navy-700:#0f2030; --navy-600:#13283c;

  /* Texto */
  --text:#cdd9e3; --text-dim:#8497a8;
  --line:rgba(63,217,210,.14); --line-strong:rgba(63,217,210,.32);

  /* Estado */
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --ok-dim:rgba(16,185,129,.13); --warn-dim:rgba(245,158,11,.13); --err-dim:rgba(239,68,68,.13);

  /* Tipografía */
  --font-display:'Cinzel',serif;
  --font-cond:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;

  --sombra:0 10px 30px -8px rgba(0,0,0,.6);
  --radio:10px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(63,217,210,.07), transparent 62%),
    var(--navy-950);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-bright)}

h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--silver);letter-spacing:-.01em}

.k-eyebrow{
  font-family:var(--font-cond);letter-spacing:4px;text-transform:uppercase;
  font-size:12px;color:var(--teal);font-weight:600;
}

/* ── Identidad ────────────────────────────────────────────────────────── */
.k-brand{display:flex;align-items:center;gap:13px}
.k-brand img{height:46px;width:auto;filter:drop-shadow(0 0 14px rgba(63,217,210,.22))}
.k-brand-text{display:flex;flex-direction:column;line-height:1.05}
.k-brand-name{
  font-family:var(--font-cond);font-weight:700;letter-spacing:2.4px;
  color:var(--silver);font-size:19px;text-transform:uppercase;
}
.k-brand-sub{
  font-family:var(--font-cond);letter-spacing:3px;text-transform:uppercase;
  font-size:10.5px;color:var(--bronze-light);font-weight:600;
}

/* ── Superficies ──────────────────────────────────────────────────────── */
.k-card{
  background:linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border:1px solid var(--line);border-radius:var(--radio);
  padding:22px;box-shadow:var(--sombra);
}
.k-card-bronze{border-left:3px solid var(--bronze)}

/* ── Botones ──────────────────────────────────────────────────────────── */
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-cond);font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;font-size:14px;
  padding:12px 26px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;
}
.k-btn:active{transform:translateY(1px)}
.k-btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  color:var(--navy-950);font-weight:700;
}
.k-btn-primary:hover{box-shadow:0 0 24px rgba(63,217,210,.34);color:var(--navy-950)}
.k-btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--teal)}
.k-btn-ghost:hover{background:rgba(63,217,210,.08)}
.k-btn-bronze{
  background:linear-gradient(135deg,var(--bronze-light),var(--bronze));
  color:var(--navy-950);font-weight:700;
}
.k-btn-danger{background:transparent;border-color:rgba(239,68,68,.42);color:#fca5a5}
.k-btn-danger:hover{background:var(--err-dim)}
.k-btn:disabled{opacity:.5;cursor:not-allowed}
.k-btn-sm{padding:7px 15px;font-size:12px;letter-spacing:1px}

/* ── Formularios ──────────────────────────────────────────────────────── */
.k-field{margin-bottom:17px}
.k-field label{
  display:block;font-family:var(--font-cond);letter-spacing:1.5px;
  text-transform:uppercase;font-size:12.5px;color:var(--teal);
  margin-bottom:7px;font-weight:600;
}
.k-field input,.k-field select,.k-field textarea{
  width:100%;background:var(--navy-950);border:1px solid var(--line);
  border-radius:9px;padding:13px 15px;color:var(--silver);
  font-family:var(--font-body);font-size:15px;transition:border-color .2s,box-shadow .2s;
}
.k-field input:focus,.k-field select:focus,.k-field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,217,210,.13);
}
.k-hint{font-size:12.5px;color:var(--text-dim);margin-top:6px}

/* ── Avisos ───────────────────────────────────────────────────────────── */
.k-alert{
  border-radius:9px;padding:12px 16px;font-size:14px;margin-bottom:15px;
  border:1px solid transparent;display:flex;gap:9px;align-items:flex-start;
}
.k-alert-ok{background:var(--ok-dim);border-color:rgba(16,185,129,.32);color:#6ee7b7}
.k-alert-error{background:var(--err-dim);border-color:rgba(239,68,68,.32);color:#fca5a5}
.k-alert-warn{background:var(--warn-dim);border-color:rgba(245,158,11,.32);color:#fcd34d}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.k-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radio)}
.k-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.k-table th{
  background:var(--navy-700);color:var(--text-dim);font-family:var(--font-cond);
  text-transform:uppercase;letter-spacing:1.2px;font-size:11.5px;font-weight:600;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;
}
.k-table td{padding:11px 14px;border-bottom:1px solid rgba(63,217,210,.07);vertical-align:middle}
.k-table tr:last-child td{border-bottom:none}
.k-table tbody tr:hover{background:rgba(63,217,210,.04)}

/* ── Distintivos ──────────────────────────────────────────────────────── */
.k-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-cond);font-size:11px;letter-spacing:1.1px;
  text-transform:uppercase;font-weight:600;padding:3px 10px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap;
}
.k-badge-teal{background:rgba(63,217,210,.13);color:var(--teal);border-color:var(--line-strong)}
.k-badge-bronze{background:rgba(200,149,79,.15);color:var(--bronze-light);border-color:rgba(200,149,79,.35)}
.k-badge-ok{background:var(--ok-dim);color:#6ee7b7;border-color:rgba(16,185,129,.32)}
.k-badge-err{background:var(--err-dim);color:#fca5a5;border-color:rgba(239,68,68,.32)}
.k-badge-mut{background:rgba(132,151,168,.12);color:var(--text-dim);border-color:rgba(132,151,168,.25)}

/* ── Capa de compatibilidad ───────────────────────────────────────────────
   Las 11 páginas heredadas de SEKaform usan --pri/--bg/--card/--txt/--mut/--bor.
   Se remapean aquí a la paleta Kanan en lugar de editar cada archivo: el
   rebranding es un cambio de tokens, no una reescritura, y así no se arriesga
   ninguna regresión funcional en el digitalizador o el formulario de campo.
   Cuando esas páginas se migren, este bloque se elimina.                    */
:root{
  --bg:var(--navy-950); --card:var(--navy-800); --card2:var(--navy-700);
  --inp:var(--navy-950);
  --pri:var(--teal); --pri-h:var(--teal-bright); --pri-dim:rgba(63,217,210,.13);
  --txt:var(--silver); --mut:var(--text-dim); --bor:rgba(63,217,210,.18);
  --purple:var(--bronze); --purple-dim:rgba(200,149,79,.15);
  --orange:var(--bronze-light); --orange-dim:rgba(231,195,137,.13);
  --pink:var(--teal-dim); --pink-dim:rgba(29,143,138,.13);
}
body{font-family:var(--font-body)}
.sidebar-logo span{color:var(--teal)}

@media (max-width:640px){
  .k-card{padding:17px}
  .k-btn{padding:11px 19px}
}