/* ============================================================================
   Kerapodo · Design System — TOKENS canónicos v2 (Fase 6 auditoría).
   Fuente ÚNICA de la verdad para color/tipografía/espaciado/estados.
   Uso: enlazar en el <head> ANTES del <style> local de cada Kerapodo_*.html:
        <link rel="stylesheet" href="/kerapodo-tokens.css">
   y remapear las variables locales para que apunten aquí, p.ej.:
        :root{ --navy: var(--kp-primary); --ok: var(--kp-ok); ... }
   Así se unifican los colores sin renombrar nada ni tocar el JS.
   ============================================================================ */
:root {
  /* ---- Marca ---- */
  --kp-primary:      #06446C;
  --kp-primary-700:  #053654;
  --kp-primary-300:  #3E7CA6;
  --kp-accent:       #2B8AA8;
  --kp-accent-bg:    #E7F3F7;

  /* ---- Semánticos (unificados; antes divergían entre módulos) ---- */
  --kp-ok:      #16834E;  --kp-ok-bg:     #E6F6EC;  --kp-ok-700:     #0F6B3F;
  --kp-warn:    #C8821A;  --kp-warn-bg:   #FDF1DC;  --kp-warn-700:   #7A4F08;
  --kp-danger:  #BB3A2E;  --kp-danger-bg: #FBE9E9;  --kp-danger-700: #97281E;
  --kp-info:    #2B6CB0;  --kp-info-bg:   #E8F1FB;

  /* ---- Superficie / texto (contraste AA verificado sobre --kp-card) ---- */
  --kp-bg:    #EEF3F8;  --kp-card: #FFFFFF;  --kp-soft: #F3F7FB;
  --kp-line:  #E4EAF1;  --kp-line-strong:#CBD6E4;
  --kp-txt:   #15263A;  --kp-txt-2:#33455C;  --kp-muted: #5C6E85;

  /* ---- Escala tipográfica (base 16px, ratio ~1.2) ---- */
  --kp-fs-xs: 12px; --kp-fs-sm: 13px; --kp-fs-md: 15px;
  --kp-fs-lg: 18px; --kp-fs-xl: 22px; --kp-fs-2xl: 28px; --kp-fs-3xl: 34px;
  --kp-lh: 1.5; --kp-lh-tight: 1.25;
  --kp-fw-med: 550; --kp-fw-semi: 650; --kp-fw-bold: 750;

  /* ---- Escala de espaciado (base 4px) ---- */
  --kp-s1: 4px; --kp-s2: 8px; --kp-s3: 12px; --kp-s4: 16px;
  --kp-s5: 20px; --kp-s6: 24px; --kp-s8: 32px; --kp-s10: 40px; --kp-s12: 48px;

  /* ---- Radios ---- */
  --kp-r-sm: 10px;  --kp-r: 12px;  --kp-r-lg: 16px;  --kp-r-pill: 999px;

  /* ---- Sombra (una escala coherente) y animación ---- */
  --kp-shadow-sm: 0 1px 2px rgba(10,50,90,.06), 0 1px 3px rgba(10,50,90,.08);
  --kp-shadow:    0 10px 30px rgba(10,50,90,.10), 0 2px 6px rgba(10,50,90,.05);
  --kp-shadow-lg: 0 24px 60px rgba(10,50,90,.18), 0 6px 16px rgba(10,50,90,.08);
  --kp-ease:   cubic-bezier(.22,.9,.3,1);
  --kp-dur:    180ms;

  /* ---- Tipografía de marca (Inter — mayoría) ---- */
  /* [TIPOGRAFÍA] Sistema deliberado de DOS familias, no tres por sedimento:
     · Inter para trabajar — tablas, cifras, formularios, texto corrido. Estrecha, legible en
       tamaños pequeños y con cifras tabulares de verdad, que es lo que exige nómina e inventario.
     · Nunito para titular — encabezados y títulos de tarjeta. Redondeada; conserva la calidez
       que tenían los paneles operativos sin invadir las tablas.
     La frontera es: si es un dato, Inter; si es un rótulo, Nunito. */
  --kp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kp-font-display: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  --kp-font-num: 'Inter', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* ---- Accesibilidad: tamaño táctil mínimo ---- */
  --kp-tap: 44px;
}

/* ---- Botones ---- */
.kp-btn{ font:inherit; font-weight:var(--kp-fw-semi); border:0; border-radius:var(--kp-r);
  min-height:var(--kp-tap); padding:0 var(--kp-s4); display:inline-flex; align-items:center; gap:var(--kp-s2);
  background:var(--kp-primary); color:#fff; cursor:pointer;
  transition:transform .08s var(--kp-ease), opacity .15s, background .15s; }
.kp-btn:hover{ background:var(--kp-primary-700) } .kp-btn:active{ transform:scale(.98) }
.kp-btn:disabled{ opacity:.5; cursor:not-allowed }
.kp-btn--ok{ background:var(--kp-ok) } .kp-btn--ok:hover{ background:var(--kp-ok-700) }
.kp-btn--danger{ background:var(--kp-danger) } .kp-btn--danger:hover{ background:var(--kp-danger-700) }
.kp-btn--ghost{ background:transparent; color:var(--kp-primary); box-shadow:inset 0 0 0 1px var(--kp-line-strong) }
.kp-btn--ghost:hover{ background:var(--kp-soft) }
.kp-btn:focus-visible,.kp-focusable:focus-visible{ outline:3px solid color-mix(in srgb, var(--kp-accent) 55%, transparent); outline-offset:2px }

/* ---- Superficies ---- */
.kp-card{ background:var(--kp-card); border:1px solid var(--kp-line); border-radius:var(--kp-r-lg); box-shadow:var(--kp-shadow) }
.kp-toast{ background:var(--kp-primary); color:#fff; border-radius:var(--kp-r); padding:11px 14px; box-shadow:var(--kp-shadow-lg) }
.kp-chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--kp-r-pill);
  font-size:var(--kp-fs-xs); font-weight:var(--kp-fw-semi); background:var(--kp-soft); color:var(--kp-txt-2) }
.kp-chip--ok{ background:var(--kp-ok-bg); color:var(--kp-ok-700) }
.kp-chip--warn{ background:var(--kp-warn-bg); color:var(--kp-warn-700) }
.kp-chip--danger{ background:var(--kp-danger-bg); color:var(--kp-danger-700) }

/* ---- Los 5 estados obligatorios ---- */
.kp-empty,.kp-loading,.kp-error{ padding:var(--kp-s6); text-align:center; color:var(--kp-muted); font-size:var(--kp-fs-md) }
.kp-empty__title{ color:var(--kp-txt-2); font-weight:var(--kp-fw-semi); margin:8px 0 4px }
.kp-error{ background:var(--kp-danger-bg); color:var(--kp-danger-700); border-radius:var(--kp-r) }
/* Skeleton (carga sin spinners genéricos) */
.kp-skel{ position:relative; overflow:hidden; background:var(--kp-soft); border-radius:var(--kp-r-sm); min-height:14px }
.kp-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:kp-shimmer 1.25s infinite }
@keyframes kp-shimmer{ 100%{ transform:translateX(100%) } }

/* ---- Tablas: alineación numérica a la derecha, tipografía tabular ---- */
.kp-num{ font-variant-numeric:tabular-nums; text-align:right; font-family:var(--kp-font-num) }

/* [TIPOGRAFÍA] Los rótulos van en la familia de titular; TODO lo demás hereda Inter del body.
   Se excluyen explícitamente las cabeceras de tabla y las cifras: ahí manda la legibilidad. */
h1,h2,h3,.kp-title,.formhead b,.top b{ font-family:var(--kp-font-display); letter-spacing:-.01em }
th,td,input,select,textarea,button,.kp-num{ font-family:var(--kp-font) }
/* <b> y <strong> heredan el 700 que trae el navegador de fabrica. Con toda la escala
   bajada un escalon se quedaban gritando mas que los propios titulos: hay 343 en el
   producto. A 600 siguen destacando dentro del parrafo sin competir con la jerarquia. */
b,strong{ font-weight:600 }
.kp-table th{ text-align:left; color:var(--kp-muted); font-weight:var(--kp-fw-semi); font-size:var(--kp-fs-sm) }
.kp-table td,.kp-table th{ padding:10px 12px; border-bottom:1px solid var(--kp-line) }

/* ---- Accesibilidad global mínima ----
   [FOCO] Antes esta regla usaba :where(), que tiene especificidad CERO: cualquier
   `input:focus{outline:none}` local la anulaba, y hay ~20 repartidos por los paneles. Además la
   lista no cubría lo que la gente realmente pulsa: filas de tabla, pestañas y tarjetas hechas con
   <div onclick>. Con :is() la regla pesa y llega a los ~185 elementos clicables del sistema. */
:is(a,button,[role="button"],input,select,textarea,[tabindex],
    tr[onclick],[onclick].tab,[onclick].tab2,.tile,.bigtile,.resrow,.qitem[onclick],
    .chip[onclick],.miniicon,.iconbtn,.btn):focus-visible{
  outline:3px solid color-mix(in srgb, var(--kp-accent) 65%, transparent);
  outline-offset:2px; border-radius:inherit }

/* [TÁCTIL] El token --kp-tap existía y no lo usaba ningún panel. Estos botones pequeños son
   frecuentes y varios destructivos (papelera, anular, cerrar). Se amplía el ÁREA de toque sin
   agrandar el botón: el pseudo-elemento no se ve, solo recoge el dedo. */
.miniicon,.iconbtn,.btn.sm,.x,.cal-nav{ position:relative }
.miniicon::after,.iconbtn::after,.btn.sm::after,.x::after,.cal-nav::after{
  content:""; position:absolute; top:50%; left:50%;
  width:max(100%,var(--kp-tap)); height:max(100%,var(--kp-tap));
  transform:translate(-50%,-50%) }

/* [TÁCTIL] En iPad no existe `hover`, pero Safari lo aplica al tocar y lo DEJA PEGADO hasta que se
   pulsa en otro sitio: el botón se queda visualmente "levantado". Se limita a ratón de verdad. */
@media (hover:none){
  .btn:hover,.tile:hover,.bigtile:hover,.resrow:hover,.iconbtn:hover,.miniicon:hover{
    transform:none!important; box-shadow:inherit }
}
/* Confirmación de pulsación en táctil, que es la única señal que queda sin hover. */
@media (hover:none){
  .btn:active,.tile:active,.bigtile:active,.resrow:active,.iconbtn:active,.miniicon:active{
    transform:scale(.97); opacity:.9 }
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important } }

/* ============================================================================
   Kerapodo · Capa "LOOK" v3 — glass + degradado + blobs (estilo Costeo/Portal).
   ADITIVO: nada de esto afecta a un panel salvo que use estas clases/tokens.
   Uso típico por panel:
     1) <link rel="stylesheet" href="/kerapodo-tokens.css"> en el <head>.
     2) <div class="kp-bg"><span class="kp-blob kp-b1"></span><span class="kp-blob kp-b2"></span><span class="kp-blob kp-b3"></span></div> tras <body>.
     3) Remapear en el <style> local: fondos de tarjeta a var(--kp-glass), botones a var(--kp-grad), header a var(--kp-grad-header), sombra a var(--kp-shadow-glass).
   ============================================================================ */
:root{
  --kp-azul-osc:#143d5e;
  --kp-glass:rgba(255,255,255,.74);          /* opacidad sube para que en Safari/iPad no se vea lavado */
  --kp-glass-brd:rgba(255,255,255,.8);
  --kp-grad:linear-gradient(120deg, var(--kp-primary), var(--kp-accent));
  --kp-grad-header:linear-gradient(135deg, var(--kp-azul-osc), var(--kp-primary) 55%, var(--kp-accent) 145%);
  --kp-shadow-glass:0 18px 48px rgba(6,68,108,.16), 0 2px 6px rgba(6,68,108,.07);
}
.kp-bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:linear-gradient(160deg,#eaf2f9 0%,#dce8f4 45%,#cfe0ee 100%) }
/* Las manchas se quedan quietas. Son fondo, no contenido: moverse detras de una
   tabla de dinero durante toda la jornada cansa la vista y obliga al navegador a
   repintar una capa a pantalla completa sin parar. Sin animacion sobra tambien el
   will-change, que reservaba memoria de GPU en el iPad para nada.
   Si alguna pagina de marketing quiere el movimiento, se le pone kp-bg--vivo. */
.kp-blob{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.5 }
.kp-b1{ width:60vw; max-width:520px; aspect-ratio:1; background:radial-gradient(circle,#2b8aa8,transparent 68%); top:-120px; right:-90px }
.kp-b2{ width:70vw; max-width:600px; aspect-ratio:1; background:radial-gradient(circle,#06446C,transparent 68%); bottom:-220px; left:-130px }
.kp-b3{ width:46vw; max-width:380px; aspect-ratio:1; background:radial-gradient(circle,#7fc3d6,transparent 68%); top:42%; left:52% }
@keyframes kp-flota1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,52px) scale(1.12)}}
@keyframes kp-flota2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(58px,-42px) scale(1.08)}}
@keyframes kp-flota3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,-56px) scale(1.15)}}
.kp-bg--vivo .kp-blob{ will-change:transform }
.kp-bg--vivo .kp-b1{ animation:kp-flota1 22s ease-in-out infinite }
.kp-bg--vivo .kp-b2{ animation:kp-flota2 27s ease-in-out infinite }
.kp-bg--vivo .kp-b3{ animation:kp-flota3 19s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){ .kp-blob{ animation:none } }
.kp-glass{ background:var(--kp-glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--kp-glass-brd); box-shadow:var(--kp-shadow-glass) }
.kp-btn--grad{ background:var(--kp-grad); color:#fff; box-shadow:0 8px 22px rgba(6,68,108,.26) }
