/* TOLVI Design System · Uso interno · Créditos de diseño: @soyjulianvalbuena */
/* =====================================================================
   TOLVI Design System · v0.5 (en construcción)
   Dirección: blanco + negro + acento morado. Grilla 8px. Mobile-first reglas
   en 3 breakpoints: Desktop (>1024) · Tablet (<=1024) · Mobile (<=767).
   Mapeo Elementor: cada token :root => Global Color / Global Font / Variable.
   Cada clase .tl-* => una Class de Elementor (manage-classes).
   ===================================================================== */

/* ---------- 1. FUENTES LOCALES (Assets / Tipografías Tolvi) ---------- */
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("Tipograf%C3%ADas%20Tolvi/DMSans-Regular.woff2") format("woff2"),
      url("Tipograf%C3%ADas%20Tolvi/DMSans-Regular.woff") format("woff");}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;
  src:url("Tipograf%C3%ADas%20Tolvi/DMSans-Bold.woff2") format("woff2"),
      url("Tipograf%C3%ADas%20Tolvi/DMSans-Bold.woff") format("woff");}
@font-face{font-family:"Audiowide";font-weight:400;font-style:normal;font-display:swap;
  src:url("Tipograf%C3%ADas%20Tolvi/Audiowide-Regular.woff2") format("woff2"),
      url("Tipograf%C3%ADas%20Tolvi/Audiowide-Regular.woff") format("woff");}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Color · primitivos (Guía de estilos TOLVI®) */
  --tl-black:#010101;      /* Vivid Black */
  --tl-white:#ffffff;      /* Full White */
  --tl-graphite:#313131;   /* Mine Shaft */
  --tl-violet:#673de6;     /* Krishna · acento sobre claro */
  --tl-violet-hover:#5428cf;
  --tl-violet-dark:#9160f4;/* Simple Violet · acento sobre oscuro */
  --tl-violet-dark-hover:#a67ff7;
  /* Color · neutrales de trabajo (derivados, sin matiz) */
  --tl-paper:#f6f6f6;
  --tl-line:#e4e4e4;
  --tl-mute:#5c5c5c;       /* 6.9:1 sobre blanco */
  --tl-mute-dark:#a8a8a8;  /* 8.9:1 sobre negro */
  --tl-line-dark:#2a2a2a;
  /* Color · resto de la paleta de la Guía (definidos; los prototipos fase 1 aún no los usan) */
  --tl-mint:#0a9c76;       /* Dark Mint · verde sobre claro: red, conexión, éxito */
  --tl-mint-dark:#0eeab2;  /* Medium Spring Green · verde sobre oscuro */
  --tl-selago:#eff1fe;     /* Selago · superficie clara con matiz (modo claro) */
  /* Nota AA: Dark Mint sobre blanco = 3.5:1 → solo texto grande (≥24px o ≥19px bold), iconos y trazos. Para texto sobre relleno mint usar negro (6.0:1). */

  /* Color · semánticos (tema claro por defecto) */
  --tl-bg:var(--tl-white);
  --tl-bg-alt:var(--tl-paper);
  --tl-fg:var(--tl-black);
  --tl-fg-mute:var(--tl-mute);
  --tl-border:var(--tl-line);
  --tl-acc:var(--tl-violet);
  --tl-acc-hover:var(--tl-violet-hover);
  --tl-on-acc:var(--tl-white);
  --tl-ok:var(--tl-mint);           /* éxito · conexión · red */
  --tl-on-ok:var(--tl-black);
  --tl-tint:var(--tl-selago);       /* superficie con matiz */

  /* Espaciado · múltiplos de 8 */
  --tl-s1:8px; --tl-s2:16px; --tl-s3:24px; --tl-s4:32px; --tl-s5:40px;
  --tl-s6:48px; --tl-s8:64px; --tl-s12:96px; --tl-s16:128px;
  --tl-section-y:var(--tl-s16);
  --tl-gutter:var(--tl-s6);
  --tl-gap:var(--tl-s3);
  --tl-boxed:1200px;
  --tl-nav-h:72px;

  /* Radios */
  --tl-r1:8px; --tl-r2:16px; --tl-r3:24px; --tl-pill:999px;

  /* Tipografía */
  --tl-font:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --tl-font-display:var(--tl-font); /* alias de DM Sans: Audiowide ya NO se usa en títulos ni etiquetas */
  --tl-font-acro:"Audiowide","DM Sans",system-ui,sans-serif; /* SOLO el acrónimo T·O·L·V·I */
  --tl-fs-display:clamp(2.5rem,1.2rem + 5.6vw,5.5rem);   /* 40 → 88 */
  --tl-fs-h2:clamp(2rem,1.2rem + 3.2vw,4rem);            /* 32 → 64 */
  --tl-fs-h3:clamp(1.25rem,1rem + 1vw,1.75rem);          /* 20 → 28 */
  --tl-fs-lead:clamp(1.125rem,1rem + .5vw,1.5rem);       /* 18 → 24 */
  --tl-fs-body:1rem;                                      /* 16 */
  --tl-fs-small:.875rem;                                  /* 14 */
  --tl-fs-label:.75rem;                                   /* 12 */

  /* Movimiento */
  --tl-ease:cubic-bezier(.2,.7,.2,1);
  --tl-t:.24s;
}
@media (max-width:1024px){
  :root{--tl-section-y:var(--tl-s12);--tl-gutter:var(--tl-s4);}
}
@media (max-width:767px){
  :root{--tl-section-y:var(--tl-s8);--tl-gutter:var(--tl-s3);--tl-gap:var(--tl-s2);--tl-nav-h:64px;}
}

/* Tema oscuro por contenedor (Elementor: clase en el Container) */
.tl-dark{
  --tl-bg:var(--tl-black);
  --tl-bg-alt:#0d0d0d;
  --tl-fg:var(--tl-white);
  --tl-fg-mute:var(--tl-mute-dark);
  --tl-border:var(--tl-line-dark);
  --tl-acc:var(--tl-violet-dark);
  --tl-acc-hover:var(--tl-violet-dark-hover);
  --tl-on-acc:var(--tl-black);
  --tl-ok:var(--tl-mint-dark);
  --tl-on-ok:var(--tl-black);
  --tl-tint:#141414;
}
.tl-alt{--tl-bg:var(--tl-paper);}
.tl-tint{background:var(--tl-tint)}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--tl-font);font-size:var(--tl-fs-body);line-height:1.5;
  color:var(--tl-fg);background:var(--tl-bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--tl-acc);outline-offset:4px;border-radius:4px}
::selection{background:var(--tl-acc);color:var(--tl-on-acc)}
.tl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 4. LAYOUT (Container → Container → Widget) ---------- */
.tl-section{background:var(--tl-bg);color:var(--tl-fg);padding-block:var(--tl-section-y)}
.tl-boxed{width:100%;max-width:calc(var(--tl-boxed) + var(--tl-gutter)*2);margin-inline:auto;padding-inline:var(--tl-gutter)}
.tl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--tl-gap);row-gap:var(--tl-s6)}
.tl-col-12{grid-column:span 12}.tl-col-8{grid-column:span 8}.tl-col-7{grid-column:span 7}
.tl-col-6{grid-column:span 6}.tl-col-5{grid-column:span 5}.tl-col-4{grid-column:span 4}.tl-col-3{grid-column:span 3}
.tl-grid--center{align-items:center}
.tl-stack{display:flex;flex-direction:column;gap:var(--tl-s3)}
.tl-stack--lg{gap:var(--tl-s4)}
.tl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tl-s2)}
@media (max-width:1024px){
  .tl-col-t-12{grid-column:span 12}.tl-col-t-6{grid-column:span 6}
  .tl-col-8,.tl-col-7,.tl-col-5{grid-column:span 12}
  .tl-col-4,.tl-col-3{grid-column:span 6}
}
@media (max-width:767px){
  .tl-col-4,.tl-col-3,.tl-col-6,.tl-col-t-6{grid-column:span 12}
  .tl-grid{row-gap:var(--tl-s4)}
}

/* ---------- 5. TIPOGRAFÍA ---------- */
.tl-display{font-size:var(--tl-fs-display);line-height:1.04;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.tl-h2{font-size:var(--tl-fs-h2);line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.tl-h3{font-size:var(--tl-fs-h3);line-height:1.25;letter-spacing:-.015em;font-weight:700}
.tl-lead{font-size:var(--tl-fs-lead);line-height:1.5;color:var(--tl-fg-mute);max-width:40ch}
.tl-body{font-size:var(--tl-fs-body);line-height:1.5;color:var(--tl-fg-mute);max-width:56ch}
.tl-small{font-size:var(--tl-fs-small);line-height:1.5;color:var(--tl-fg-mute)}
.tl-label{font-family:var(--tl-font);font-weight:700;font-size:var(--tl-fs-label);letter-spacing:.12em;text-transform:uppercase}
.tl-fg{color:var(--tl-fg)}
.tl-acc{color:var(--tl-acc)}
.tl-strong{font-weight:700;color:var(--tl-fg)}
.tl-measure{max-width:16ch}

/* ---------- 6. BOTONES ---------- */
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tl-s1);
  min-height:48px;padding:0 var(--tl-s3);border-radius:var(--tl-pill);border:1px solid transparent;
  font-weight:700;font-size:var(--tl-fs-body);line-height:1;white-space:nowrap;
  transition:background var(--tl-t) var(--tl-ease),color var(--tl-t) var(--tl-ease),border-color var(--tl-t) var(--tl-ease)}
.tl-btn--primary{background:var(--tl-acc);color:var(--tl-on-acc)}
.tl-btn--primary:hover{background:var(--tl-acc-hover)}
.tl-btn--solid{background:var(--tl-fg);color:var(--tl-bg)}
.tl-btn--solid:hover{background:var(--tl-acc);color:var(--tl-on-acc)}
.tl-btn--ghost{border-color:var(--tl-fg);color:var(--tl-fg);background:transparent}
.tl-btn--ghost:hover{background:var(--tl-fg);color:var(--tl-bg)}
.tl-btn--sm{min-height:40px;padding:0 var(--tl-s2);font-size:var(--tl-fs-small)}
.tl-btn--block{width:100%}
.tl-link{display:inline-flex;align-items:center;gap:var(--tl-s1);font-weight:700;color:var(--tl-fg);
  border-bottom:1px solid var(--tl-fg);padding-bottom:4px;transition:color var(--tl-t),border-color var(--tl-t)}
.tl-link:hover{color:var(--tl-acc);border-color:var(--tl-acc)}
@media (max-width:767px){.tl-btn{min-height:48px}.tl-row--stack-m{flex-direction:column;align-items:stretch}.tl-row--stack-m .tl-btn{width:100%}}

/* ---------- 7. FORMULARIOS ---------- */
.tl-field{display:flex;flex-direction:column;gap:var(--tl-s1)}
.tl-field label{font-size:var(--tl-fs-small);font-weight:700}
.tl-input{width:100%;min-height:56px;padding:0 var(--tl-s2);border:1px solid var(--tl-border);border-radius:var(--tl-r1);
  background:var(--tl-white);color:var(--tl-black);font-size:1rem;transition:border-color var(--tl-t),box-shadow var(--tl-t)}
textarea.tl-input{padding:var(--tl-s2);min-height:144px;resize:vertical}
.tl-input::placeholder{color:#8a8a8a}
.tl-input:hover{border-color:#bdbdbd}
.tl-input:focus{outline:none;border-color:var(--tl-violet);box-shadow:0 0 0 3px rgba(103,61,230,.2)}
.tl-input[aria-invalid="true"]{border-color:var(--tl-black);box-shadow:0 0 0 3px rgba(1,1,1,.12)}
.tl-help{font-size:var(--tl-fs-small);color:var(--tl-fg-mute)}
.tl-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tl-s3)}
@media (max-width:767px){.tl-form-grid{grid-template-columns:1fr}}
.tl-state{display:none;padding:var(--tl-s2);border:1px solid var(--tl-fg);border-radius:var(--tl-r1);font-size:var(--tl-fs-small);font-weight:700}
.tl-state.is-on{display:block}

/* ---------- 8. ESTADO DE SISTEMA (único uso permitido de “pill”) ---------- */
.tl-status{display:inline-flex;align-items:center;gap:var(--tl-s1);min-height:24px;padding:0 var(--tl-s1);
  border:1px solid var(--tl-border);border-radius:var(--tl-pill);font-size:var(--tl-fs-label);font-weight:700;color:var(--tl-fg)}
.tl-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tl-acc)}
.tl-status--muted::before{background:var(--tl-fg-mute)}
.tl-status--ok::before{background:var(--tl-ok)}

/* ---------- 9. NAV ---------- */
.tl-nav{position:sticky;top:0;z-index:50;height:var(--tl-nav-h);background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--tl-line);color:var(--tl-black)}
.tl-nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--tl-s3)}
.tl-nav__logo{display:flex;align-items:center;height:40px}
.tl-nav__logo img{height:32px;width:auto}
.tl-nav__links{display:flex;align-items:center;gap:var(--tl-s4);font-size:var(--tl-fs-small);font-weight:700}
.tl-nav__links a{position:relative;padding-block:var(--tl-s1)}
.tl-nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tl-violet);transform:scaleX(0);transform-origin:left;transition:transform var(--tl-t) var(--tl-ease)}
.tl-nav__links a:hover::after,.tl-nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.tl-nav__actions{display:flex;align-items:center;gap:var(--tl-s1)}
.tl-nav__toggle{display:none;width:48px;height:48px;border:0;background:none;border-radius:var(--tl-r1);place-items:center;color:var(--tl-black)}
.tl-nav__toggle .tl-icon{width:24px;height:24px}
.tl-nav__toggle [data-lucide="x"]{display:none}
.tl-nav__toggle[aria-expanded="true"] [data-lucide="menu"]{display:none}
.tl-nav__toggle[aria-expanded="true"] [data-lucide="x"]{display:block}
@media (max-width:1024px){
  .tl-nav__toggle{display:grid}
  .tl-nav__links{position:fixed;inset:var(--tl-nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--tl-white);
    padding:var(--tl-s2) var(--tl-gutter) var(--tl-s4);border-bottom:1px solid var(--tl-line);display:none;max-height:calc(100dvh - var(--tl-nav-h));overflow:auto}
  .tl-nav__links.is-open{display:flex}
  .tl-nav__links a{padding:var(--tl-s2) 0;font-size:1.125rem;border-bottom:1px solid var(--tl-line)}
  .tl-nav__links a::after{display:none}
}
@media (max-width:767px){.tl-nav__actions .tl-hide-m{display:none}}

/* ---------- 10. SUPERFICIES ---------- */
.tl-window{border:1px solid var(--tl-border);border-radius:var(--tl-r2);background:var(--tl-white);color:var(--tl-black);overflow:hidden}
.tl-window__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-s2);min-height:48px;padding:0 var(--tl-s2);border-bottom:1px solid var(--tl-line)}
.tl-window__body{padding:var(--tl-s3)}
.tl-hair{border-top:1px solid var(--tl-border)}
.tl-media{border-radius:var(--tl-r3);overflow:hidden;background:var(--tl-paper)}
.tl-media img{width:100%;height:100%;object-fit:cover}
.tl-rows>*{border-top:1px solid var(--tl-border)}
.tl-rows>*:last-child{border-bottom:1px solid var(--tl-border)}

/* ---------- 11. MODAL ---------- */
.tl-modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(1,1,1,.72);padding:var(--tl-s2);place-items:center}
.tl-modal.is-open{display:grid}
.tl-modal__card{width:min(100%,640px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--tl-white);color:var(--tl-black);border-radius:var(--tl-r3);padding:var(--tl-s4)}
.tl-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tl-s2);margin-bottom:var(--tl-s3)}
.tl-modal__close{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--tl-line);border-radius:50%;background:none;color:var(--tl-black);flex:none}
.tl-modal__close .tl-icon{width:24px;height:24px}
.tl-modal__close:hover{border-color:var(--tl-black)}
@media (max-width:767px){.tl-modal{padding:0;align-items:end}.tl-modal__card{border-radius:var(--tl-r3) var(--tl-r3) 0 0;padding:var(--tl-s3);max-height:92dvh}}

/* ---------- 12. TABS (accesibles) ---------- */
.tl-tabs{display:flex;gap:var(--tl-s1);overflow-x:auto;scrollbar-width:none}
.tl-tabs::-webkit-scrollbar{display:none}
.tl-tab{min-height:48px;padding:0 var(--tl-s3);border:1px solid var(--tl-border);border-radius:var(--tl-pill);background:transparent;font-weight:700;color:var(--tl-fg-mute);white-space:nowrap;transition:all var(--tl-t)}
.tl-tab:hover{color:var(--tl-fg);border-color:var(--tl-fg)}
.tl-tab[aria-selected="true"]{background:var(--tl-fg);color:var(--tl-bg);border-color:var(--tl-fg)}
.tl-panel[hidden]{display:none}

/* ---------- 13. FOOTER ---------- */
.tl-footer{background:var(--tl-black);color:var(--tl-white);padding-block:var(--tl-s12) var(--tl-s4)}
.tl-footer a{color:var(--tl-mute-dark);font-size:var(--tl-fs-small);transition:color var(--tl-t)}
.tl-footer a:hover{color:var(--tl-white)}

/* ---------- 14. GAMA CROMÁTICA COMPLETA (v0.3) ---------- */
:root{
  --tl-violet-50:#eff1fe;
  --tl-violet-100:#ded7fc;
  --tl-violet-200:#c9b7fa;
  --tl-violet-300:#ad8cf7;
  --tl-violet-400:#9160f4;
  --tl-violet-500:#7c4eed;
  --tl-violet-600:#673de6;
  --tl-violet-700:#5428cf;
  --tl-violet-800:#371a87;
  --tl-violet-900:#1e0f49;
  --tl-mint-50:#e7fdf7;
  --tl-mint-100:#c3faec;
  --tl-mint-200:#7af3d5;
  --tl-mint-300:#0eeab2;
  --tl-mint-400:#0dd09e;
  --tl-mint-500:#0bb78a;
  --tl-mint-600:#0a9c76;
  --tl-mint-700:#087559;
  --tl-mint-800:#064e3c;
  --tl-mint-900:#042c22;
  --tl-neutral-50:#f6f6f6;
  --tl-neutral-100:#e4e4e4;
  --tl-neutral-200:#cfcfcf;
  --tl-neutral-300:#a8a8a8;
  --tl-neutral-400:#8a8a8a;
  --tl-neutral-500:#5c5c5c;
  --tl-neutral-600:#454545;
  --tl-neutral-700:#313131;
  --tl-neutral-800:#1f1f1f;
  --tl-neutral-900:#010101;
  /* Funcionales: solo para estado (error / aviso). No son color de marca [VERIFY con Manual] */
  --tl-danger:#c4261c;--tl-danger-dark:#ff7a6e;--tl-warn:#9a5b00;--tl-warn-dark:#f2b445;
  --tl-violet-active:#4620a8;--tl-violet-dark-active:#bb9bf9;
}
:root{--tl-err:var(--tl-danger);--tl-wrn:var(--tl-warn)}
.tl-dark{--tl-err:var(--tl-danger-dark);--tl-wrn:var(--tl-warn-dark)}

/* ---------- 15. ESTADOS (v0.3) ---------- */
.tl-btn--primary:active,.tl-btn--primary.is-active{background:var(--tl-violet-active)}
.tl-dark .tl-btn--primary:active,.tl-dark .tl-btn--primary.is-active{background:var(--tl-violet-dark-active)}
.tl-btn--primary.is-hover{background:var(--tl-acc-hover)}
.tl-btn--solid.is-hover{background:var(--tl-acc);color:var(--tl-on-acc)}
.tl-btn--ghost.is-hover{background:var(--tl-fg);color:var(--tl-bg)}
.tl-btn:focus-visible,.tl-btn.is-focus{outline:2px solid var(--tl-acc);outline-offset:4px}
.tl-btn[disabled],.tl-btn.is-disabled{background:var(--tl-line);color:#767676;border-color:var(--tl-line);cursor:not-allowed;pointer-events:none}
.tl-dark .tl-btn[disabled],.tl-dark .tl-btn.is-disabled{background:var(--tl-line-dark);color:#8a8a8a;border-color:var(--tl-line-dark)}
.tl-btn.is-loading{position:relative;color:transparent;pointer-events:none}
.tl-btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--tl-on-acc);border-right-color:transparent;border-radius:50%;animation:tl-spin .8s linear infinite}
.tl-btn--solid.is-loading::after{border-color:var(--tl-bg);border-right-color:transparent}
.tl-btn--ghost.is-loading::after{border-color:var(--tl-fg);border-right-color:transparent}
@keyframes tl-spin{to{transform:rotate(360deg)}}
.tl-input.is-hover{border-color:#bdbdbd}
.tl-input.is-focus{outline:none;border-color:var(--tl-violet);box-shadow:0 0 0 3px rgba(103,61,230,.2)}
.tl-input[disabled]{background:var(--tl-paper);color:#767676;cursor:not-allowed;border-color:var(--tl-line)}
.tl-input[readonly]{background:var(--tl-paper)}
.tl-field--error .tl-input{border-color:var(--tl-danger);box-shadow:0 0 0 3px rgba(196,38,28,.14)}
.tl-field--error .tl-help{color:var(--tl-err);font-weight:700}
.tl-field--ok .tl-input{border-color:var(--tl-mint);box-shadow:0 0 0 3px rgba(10,156,118,.16)}
.tl-field--ok .tl-help{color:var(--tl-fg);font-weight:700}
.tl-field--ok .tl-help::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tl-mint);margin-right:8px}
.tl-field--error .tl-help::before{content:"";display:inline-block;width:8px;height:8px;background:var(--tl-danger);margin-right:8px}

/* ---------- 16. CONTROLES ---------- */
.tl-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22 /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}
.tl-check,.tl-radio{display:inline-flex;align-items:center;gap:var(--tl-s2);min-height:48px;font-size:var(--tl-fs-body);cursor:pointer}
.tl-check input,.tl-radio input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;flex:none;border:2px solid var(--tl-fg);background:transparent;display:grid;place-content:center;cursor:pointer;transition:background var(--tl-t),border-color var(--tl-t)}
.tl-check input{border-radius:8px}.tl-radio input{border-radius:50%}
.tl-check input::after{content:"";width:16px;height:16px;background:var(--tl-on-acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/contain no-repeat;opacity:0}
.tl-radio input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--tl-on-acc);opacity:0}
.tl-check input:checked,.tl-radio input:checked{background:var(--tl-acc);border-color:var(--tl-acc)}
.tl-check input:checked::after,.tl-radio input:checked::after{opacity:1}
.tl-check input:hover,.tl-radio input:hover{border-color:var(--tl-acc)}
.tl-check input:focus-visible,.tl-radio input:focus-visible{outline:2px solid var(--tl-acc);outline-offset:4px}
.tl-check input:disabled,.tl-radio input:disabled{border-color:var(--tl-line);background:var(--tl-paper);cursor:not-allowed}
.tl-check input:disabled+span,.tl-radio input:disabled+span{color:#767676}
.tl-switch{display:inline-flex;align-items:center;gap:var(--tl-s2);min-height:48px;cursor:pointer}
.tl-switch input{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:28px;margin:0;border-radius:var(--tl-pill);background:var(--tl-line);border:1px solid var(--tl-border);cursor:pointer;transition:background var(--tl-t)}
.tl-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--tl-black);transition:transform var(--tl-t) var(--tl-ease),background var(--tl-t)}
.tl-switch input:checked{background:var(--tl-acc);border-color:var(--tl-acc)}
.tl-switch input:checked::after{transform:translateX(20px);background:var(--tl-on-acc)}
.tl-switch input:focus-visible{outline:2px solid var(--tl-acc);outline-offset:4px}
.tl-switch input:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 17. FEEDBACK ---------- */
.tl-alert{display:flex;flex-direction:column;gap:4px;padding:var(--tl-s2) var(--tl-s3);border:1px solid var(--tl-border);border-left-width:4px;border-radius:var(--tl-r1);background:var(--tl-bg);color:var(--tl-fg);font-size:var(--tl-fs-small)}
.tl-alert b{display:flex;align-items:center;gap:var(--tl-s1);font-size:var(--tl-fs-body)}
.tl-alert b .tl-icon{width:20px;height:20px}
.tl-alert--info b .tl-icon{color:var(--tl-acc)}.tl-alert--ok b .tl-icon{color:var(--tl-ok)}.tl-alert--warn b .tl-icon{color:var(--tl-wrn)}.tl-alert--error b .tl-icon{color:var(--tl-err)}
.tl-alert--info{border-left-color:var(--tl-acc)}
.tl-alert--ok{border-left-color:var(--tl-ok)}
.tl-alert--warn{border-left-color:var(--tl-wrn)}
.tl-alert--error{border-left-color:var(--tl-err)}
.tl-toast{display:inline-flex;align-items:center;gap:var(--tl-s2);min-height:56px;padding:0 var(--tl-s3);border-radius:var(--tl-r2);background:var(--tl-black);color:var(--tl-white);border:1px solid var(--tl-line-dark);font-size:var(--tl-fs-small);font-weight:700}
.tl-dark .tl-toast{background:var(--tl-white);color:var(--tl-black);border-color:var(--tl-line)}
.tl-toast button{background:none;border:0;color:var(--tl-violet-dark);font-weight:700;min-height:48px;padding:0 var(--tl-s1)}
.tl-dark .tl-toast button{color:var(--tl-violet)}
.tl-tip{position:relative;display:inline-flex}
.tl-tip[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border-radius:var(--tl-r1);background:var(--tl-black);color:var(--tl-white);font-size:var(--tl-fs-label);font-weight:700;opacity:0;pointer-events:none;transition:opacity var(--tl-t)}
.tl-tip:hover::after,.tl-tip:focus-within::after,.tl-tip.is-open::after{opacity:1}
.tl-progress{height:8px;border-radius:var(--tl-pill);background:var(--tl-border);overflow:hidden}
.tl-progress>i{display:block;height:100%;background:var(--tl-acc);border-radius:inherit}
.tl-skeleton{display:block;height:16px;border-radius:var(--tl-r1);background:var(--tl-border);animation:tl-pulse 1.4s ease-in-out infinite}
@keyframes tl-pulse{50%{opacity:.5}}
.tl-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tl-s2);padding:var(--tl-s6) var(--tl-s4);border:1px dashed var(--tl-fg-mute);border-radius:var(--tl-r2)}

/* ---------- 18. NAVEGACIÓN Y DATOS ---------- */
.tl-crumbs{display:flex;flex-wrap:wrap;gap:var(--tl-s1);font-size:var(--tl-fs-small);color:var(--tl-fg-mute)}
.tl-crumbs li+li::before{content:"";display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:var(--tl-s1);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22 /%3E%3C/svg%3E") center/contain no-repeat}
.tl-crumbs a:hover{color:var(--tl-acc)}
.tl-crumbs [aria-current]{color:var(--tl-fg);font-weight:700}
.tl-pager{display:flex;gap:var(--tl-s1);flex-wrap:wrap}
.tl-pager a,.tl-pager span{display:grid;place-items:center;min-width:48px;min-height:48px;padding:0 var(--tl-s1);border:1px solid var(--tl-border);border-radius:var(--tl-r1);font-weight:700;font-size:var(--tl-fs-small)}
.tl-pager a:hover{border-color:var(--tl-fg)}
.tl-pager [aria-current]{background:var(--tl-fg);color:var(--tl-bg);border-color:var(--tl-fg)}
.tl-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--tl-s1)}
.tl-step{display:flex;flex-direction:column;gap:var(--tl-s1);padding-top:var(--tl-s2);border-top:4px solid var(--tl-border);font-size:var(--tl-fs-small);color:var(--tl-fg-mute)}
.tl-step b{font-family:var(--tl-font);font-weight:700;letter-spacing:.12em;font-size:var(--tl-fs-label)}
.tl-step.is-done{border-top-color:var(--tl-fg);color:var(--tl-fg)}
.tl-step.is-now{border-top-color:var(--tl-acc);color:var(--tl-fg)}
.tl-step.is-now b{color:var(--tl-acc)}
.tl-menu{display:flex;flex-direction:column;min-width:240px;padding:var(--tl-s1);border:1px solid var(--tl-border);border-radius:var(--tl-r2);background:var(--tl-bg)}
.tl-menu a,.tl-menu button{display:flex;align-items:center;min-height:48px;padding:0 var(--tl-s2);border:0;background:none;border-radius:var(--tl-r1);font-size:var(--tl-fs-small);font-weight:700;text-align:left;color:var(--tl-fg)}
.tl-menu a:hover,.tl-menu button:hover,.tl-menu .is-hover{background:var(--tl-tint)}
.tl-menu [aria-current]{color:var(--tl-acc)}
.tl-menu [disabled]{color:#767676;pointer-events:none}
.tl-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--tl-s1);border:1px solid var(--tl-border);border-radius:8px;font-size:var(--tl-fs-label);font-weight:700;color:var(--tl-fg)}
.tl-tag--acc{background:var(--tl-acc);border-color:var(--tl-acc);color:var(--tl-on-acc)}
.tl-table{width:100%;border-collapse:collapse;font-size:var(--tl-fs-small)}
.tl-table th{text-align:left;font-family:var(--tl-font);font-weight:700;font-size:var(--tl-fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-fg-mute);padding:var(--tl-s2);border-bottom:1px solid var(--tl-fg)}
.tl-table td{padding:var(--tl-s2);border-bottom:1px solid var(--tl-border);vertical-align:middle}
.tl-table tbody tr:hover{background:var(--tl-tint)}
.tl-table .is-num{text-align:right;font-variant-numeric:tabular-nums}
.tl-accordion>details{border-top:1px solid var(--tl-border)}
.tl-accordion>details:last-child{border-bottom:1px solid var(--tl-border)}
.tl-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-s2);min-height:64px;font-weight:700;font-size:var(--tl-fs-body);cursor:pointer;list-style:none}
.tl-accordion summary::-webkit-details-marker{display:none}
.tl-accordion summary::after{content:"";display:block;width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22M12 5v14%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010101%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22M12 5v14%22 /%3E%3C/svg%3E") center/contain no-repeat;flex:none;transition:transform var(--tl-t) var(--tl-ease)}
.tl-accordion details[open] summary::after{transform:rotate(45deg)}
.tl-accordion summary:hover{color:var(--tl-acc)}
.tl-accordion .tl-accordion__body{padding-bottom:var(--tl-s3)}
.tl-card{display:flex;flex-direction:column;gap:var(--tl-s2);padding:var(--tl-s4);border:1px solid var(--tl-border);border-radius:var(--tl-r2);background:var(--tl-bg);transition:border-color var(--tl-t)}
a.tl-card:hover,.tl-card.is-hover{border-color:var(--tl-fg)}

/* ---------- 19. ACRÓNIMO T·O·L·V·I (v0.3) ---------- */
.tl-acro{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--tl-gap)}
.tl-acro__i{display:flex;flex-direction:column;gap:var(--tl-s2);padding-top:var(--tl-s3);border-top:1px solid var(--tl-border)}
.tl-acro__i img{height:64px;width:auto;align-self:flex-start}
.tl-acro-text{font-family:var(--tl-font-acro);font-weight:400;letter-spacing:.12em}
.tl-acro__i b{font-family:var(--tl-font-acro);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:var(--tl-fs-body)}
.tl-acro__i span{font-size:var(--tl-fs-small);color:var(--tl-fg-mute)}
.tl-acro-marquee{overflow:hidden;border-block:1px solid var(--tl-border);padding-block:var(--tl-s3)}
.tl-acro-marquee__track{display:flex;width:max-content;animation:tl-acro-m 40s linear infinite}
.tl-acro-marquee__group{display:flex;align-items:center;gap:var(--tl-s8);padding-inline-end:var(--tl-s8)}
.tl-acro-marquee__item{display:flex;align-items:center;gap:var(--tl-s2);font-family:var(--tl-font-acro);font-size:var(--tl-fs-body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tl-acro-marquee__item img{height:32px;width:auto}
@keyframes tl-acro-m{to{transform:translateX(-50%)}}
@media (max-width:1024px){.tl-acro{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.tl-acro{grid-template-columns:1fr;gap:var(--tl-s4)}.tl-steps{grid-auto-flow:row}}

/* ---------- 20. ÍCONOS (Lucide, ISC) ---------- */
.tl-icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;stroke-width:2}
.tl-icon--sm{width:16px;height:16px}.tl-icon--md{width:24px;height:24px}.tl-icon--lg{width:32px;height:32px}.tl-icon--xl{width:48px;height:48px}
.tl-link .tl-icon{width:1.1em;height:1.1em;transition:transform var(--tl-t) var(--tl-ease)}
.tl-link:hover .tl-icon{transform:translateX(4px)}
.tl-pager .tl-icon{width:20px;height:20px}

/* 21. Vistas de producto (paneles ilustrativos) */
.tl-pv{display:flex;flex-direction:column;gap:var(--tl-s3)}
.tl-pv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tl-s2)}
.tl-pv-kpis div{border-left:1px solid var(--tl-line);padding-left:var(--tl-s2)}
.tl-pv-kpis small{display:block;font-size:var(--tl-fs-small);color:var(--tl-mute)}
.tl-pv-kpis strong{display:block;font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.03em}
.tl-pv-chart{color:var(--tl-black);width:100%;height:auto}
.tl-pv-chart .is-acc{fill:var(--tl-violet)}
.tl-pv-chart__axis{display:flex;justify-content:space-between;font-size:var(--tl-fs-label);color:var(--tl-mute);padding-top:var(--tl-s1)}
.tl-pv-meter{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) var(--tl-s5);gap:var(--tl-s2);align-items:center;padding-block:var(--tl-s1);font-size:var(--tl-fs-small)}
.tl-pv-meter__bar{height:8px;background:var(--tl-paper);border-radius:var(--tl-r1);overflow:hidden}
.tl-pv-meter__bar i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--tl-black)}
.tl-pv-meter b{text-align:right}
.tl-pv-table{font-size:var(--tl-fs-small)}
.tl-pv-table__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,2fr) minmax(0,2fr);gap:var(--tl-s2);padding-block:var(--tl-s2);border-top:1px solid var(--tl-line);align-items:center}
.tl-pv-table__row--head{color:var(--tl-mute);font-weight:700;border-top:0;padding-top:0}
.tl-pv-dot{display:inline-flex;align-items:center;gap:var(--tl-s1)}
.tl-pv-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tl-mute);flex:none}
.tl-pv-dot--acc::before{background:var(--tl-violet)}
.tl-pv-dot--ink::before{background:var(--tl-black)}
.tl-pv-note{font-size:var(--tl-fs-small);color:var(--tl-mute);border-top:1px solid var(--tl-line);padding-top:var(--tl-s2)}
@media (max-width:767px){
  .tl-pv-kpis strong{font-size:var(--tl-fs-h3)}
  .tl-pv-table__row{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,2fr)}
  .tl-pv-table__row>:nth-child(4){display:none}
  .tl-pv-meter{grid-template-columns:minmax(0,4fr) minmax(0,4fr) var(--tl-s4)}
}