/* ==========================================================================
   KWELLOS · Sistema de diseño compartido (login, dashboard, catálogo)
   Una sola fuente de verdad: colores, tipografía, botones, campos, tarjetas
   "doble bisel", esqueletos, avisos y movimiento.
   ========================================================================== */
:root{
  /* marca */
  --ink:#15181A; --ink-2:#1E2224; --ink-3:#2A2F31;
  --bone:#F1EDE4; --bone-2:#F7F4EE; --paper:#FFFFFF;
  --accent:#D9673F;                      /* el cliente puede cambiarlo: se pisa desde su organización */
  --accent-ink:color-mix(in oklab,var(--accent) 74%,#150a05);
  --accent-soft:color-mix(in oklab,var(--accent) 11%,#fff);
  --accent-line:color-mix(in oklab,var(--accent) 30%,#fff);
  --petrol:#1F6F78; --petrol-soft:#E1EEEF;
  --ok:#2F7D5B; --ok-soft:#E3F1EA; --warn:#A8701A; --warn-soft:#F8EBD3; --bad:#B8402F; --bad-soft:#F8E3DF;
  /* texto */
  --t1:#1B1E20; --t2:#5B5F5E; --t3:#8A8D88;
  /* superficies */
  --bg:#F1EDE4; --surface:#FFFFFF; --surface-2:#FAF8F3;
  --line:rgba(21,24,26,.09); --line-2:rgba(21,24,26,.15);
  /* sombras tintadas (nunca negro puro) */
  --sh-1:0 1px 2px rgba(60,40,25,.06),0 2px 6px -2px rgba(60,40,25,.06);
  --sh-2:0 1px 2px rgba(60,40,25,.05),0 10px 28px -10px rgba(60,40,25,.18);
  --sh-3:0 2px 4px rgba(60,40,25,.06),0 24px 56px -16px rgba(60,40,25,.28);
  /* forma y movimiento */
  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1600px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);color:var(--t1);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--accent-ink)}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-sm);
  height:42px;padding:0 18px;font-weight:600;font-size:14px;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .18s var(--ease-out),background-color .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s var(--ease-out),opacity .18s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -6px rgba(21,24,26,.5)}
.btn-accent{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 92%,#fff),var(--accent-ink));color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 20px -8px color-mix(in oklab,var(--accent) 70%,#000)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--t1)}
.btn-quiet{background:transparent;color:var(--t2)}
.btn-danger{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in oklab,var(--bad) 25%,#fff)}
.btn-sm{height:34px;padding:0 13px;font-size:13px}
.btn-lg{height:50px;padding:0 24px;font-size:15px;border-radius:12px}
.btn-icon{width:38px;padding:0}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--ink-3)}
  .btn-accent:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 12px 24px -8px color-mix(in oklab,var(--accent) 75%,#000)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--surface-2)}
  .btn-quiet:hover{background:rgba(21,24,26,.06);color:var(--t1)}
}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:kwspin .7s linear infinite;flex:none}
@keyframes kwspin{to{transform:rotate(360deg)}}

/* ---- campos ---- */
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{font-size:12.5px;font-weight:600;color:var(--t2);letter-spacing:.01em}
.input,.select,.textarea{width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:14.5px;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.textarea{height:auto;min-height:92px;padding:11px 14px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--t3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 16%,transparent)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.hint{font-size:12px;color:var(--t3)}

/* ---- doble bisel ---- */
.bezel{padding:6px;border-radius:calc(var(--r-lg) + 6px);background:rgba(21,24,26,.045);border:1px solid var(--line)}
.bezel>.bezel-in{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1),0 1px 0 rgba(255,255,255,.9) inset;padding:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* ---- chips / estados ---- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:600;letter-spacing:.01em;background:rgba(21,24,26,.06);color:var(--t2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
.chip.petrol{background:var(--petrol-soft);color:var(--petrol)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---- esqueleto de carga ---- */
.skel{position:relative;overflow:hidden;background:rgba(21,24,26,.07);border-radius:8px;min-height:12px}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:kwshimmer 1.3s var(--ease-io) infinite}
@keyframes kwshimmer{to{transform:translateX(100%)}}

/* ---- avisos (toasts) ---- */
.toasts{position:fixed;z-index:9999;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--ink);color:#F5F1E8;padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-3);
  animation:kwtoast .32s var(--ease-out) both;max-width:100%}
.toast.ok .dot{color:#59C08F} .toast.bad .dot{color:#FF8A75} .toast.bad{background:#3A1F1A}
.toast.out{animation:kwtoastout .2s var(--ease-out) both}
@keyframes kwtoast{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes kwtoastout{to{opacity:0;transform:translateY(6px) scale(.97)}}

/* ---- entrada escalonada ---- */
.rise{opacity:0;transform:translateY(14px);animation:kwrise .6s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*60ms + 40ms)}
@keyframes kwrise{to{opacity:1;transform:none}}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(21,24,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay.open{display:flex;animation:kwfade .22s var(--ease-out)}
@keyframes kwfade{from{opacity:0}}
.modal{width:min(100%,440px);max-height:calc(100dvh - 40px);overflow:auto}
.overlay.open .modal{animation:kwpop .34s var(--ease-out)}
@keyframes kwpop{from{opacity:0;transform:translateY(14px) scale(.97)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}
[hidden]{display:none!important}