/* ═══════════════════════════════════════════════════════════
   Mr. HandyHub — hoja de estilo
   Sistema editorial de bloques: bermellón, negro y blush.
   Sin radios, sin sombras. Diseño MRHS (Dropbox /00-WIP/).
   ═══════════════════════════════════════════════════════════ */

/* ── Tipografía ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-variable-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Variables ─────────────────────────────────────────── */
:root {
  /* Paleta — muestreada de los mockups.

     --brand es el naranja del logotipo (el círculo de assets/logoHandyHub.svg).
     Si el logotipo cambia de color, este valor sale de ahí y no al revés.
     Los otros dos se derivan de él y conservan la relación que tenían con el
     naranja anterior: --brand-dk baja 9.6 puntos de luminosidad a igual tono y
     saturación, y --brand-lt es la misma mezcla al 11.2% sobre blanco. */
  --brand:      #EB3100;
  --brand-dk:   #BA2700;
  --brand-lt:   #FDE8E2;
  --ink:        #000000;
  --bg:         #F3F3F1;
  --blush:      #EBCDC3;
  --blush-dk:   #E0BAAC;
  --surface:    #FFFFFF;
  --surface-2:  #E8E8E5;
  --text:       #000000;
  --text-muted: #5A5754;
  --border:     #D3D2CE;
  --edge:       #000000;
  --line:       #000000;
  --success:    #1E7A47;
  --danger:     #C0281B;
  --warning:    #96631A;

  /* Compatibilidad con reglas heredadas */
  --primary:    var(--brand);
  --primary-dk: var(--brand-dk);
  --primary-lt: var(--brand-lt);
  --accent:     var(--brand);
  --tool-bg:    #FFFFFF;
  --tool-border:#000000;

  /* El diseño es de esquina viva */
  --radius-sm: 0; --radius: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 999px;
  --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none;

  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --w:         1280px;   /* ancho del contenido */
  --gutter:    32px;
  --nav-h:     72px;
  --unit:      135px;               /* lado del cuadrado de icono en las filas */
  --tile:      calc(var(--unit) * 2); /* tile de categoría: dos unidades, como en el diseño */
  --overhang:  96px;                /* cuánto sobresale el tile por debajo de la banda */
  --card-unit: 84px;                /* lado del cuadrado de icono en las tarjetas */
  /* Proporción del glifo dentro de su caja, medida sobre los mockups */
  --glyph-row:  68%;
  --glyph-tile: 66%;
  --glyph-card: 56%;
  /* Grosor de trazo de los iconos: fijo en píxeles de pantalla, no relativo al
     tamaño del icono. Los símbolos llevan vector-effect="non-scaling-stroke",
     así que este valor se pinta igual de grueso sea cual sea el tamaño de uso o
     el breakpoint. Eso hace que el peso óptico dependa del tamaño de la caja, y
     de ahí los tres escalones: a igual trazo, el icono pequeño se ve más gordo.

       178px (cat-hero) → 1.12%     92px (tool-row)  → 2.17%
       134px (cat-tile) → 1.49%     47px (tool-card) → 2.77% con 1.3px
        20px (sidebar)  → 3.50%

     Los grandes van a 2px, que es el trazo del diseño. La tarjeta es la más
     pequeña de esa familia y a 2px salía al 4.26%, el trazo más pesado del
     sitio, por encima incluso del sidebar; 1.3px la deja entre tool-row y el
     sidebar, sin cantar y sin quedarse en un hilo.
     El sidebar baja a 0.7px porque 2px a 20px de icono empasta los glifos
     densos.
     Ojo: para que estos valores manden, las formas del sprite no deben llevar
     stroke-width como atributo; un valor especificado en la forma gana sobre el
     heredado desde el <use> y anula estas variables. */
  --icon-stroke: 2;
  --icon-stroke-card: 1.2;
  --icon-stroke-tiny: .7;
  --transition: .16s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg { max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.sprite { display: none; }
/* Cada símbolo lleva overflow="visible" (ver sprite() en scripts/build.mjs) para
   que el trazo de las formas que llegan al borde del viewBox no se recorte a la
   mitad. El <svg> exterior es un viewport más, y recorta igual, así que hay que
   levantarlo aquí también: si no, el arreglo del símbolo no se ve. */
.ico, .cat-tile__icon, .cat-hero__icon, .all-group__icon, .nav__logo-mark { overflow: visible; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
/* Iconos pequeños (16–20px). A este tamaño los 2px del sistema son un 10-12% de
   la caja —el triple que en el sidebar— y los glifos densos se empastan, así que
   todos los contextos reducidos comparten el mismo grosor fino. Si se añade otro
   sitio con iconos a esta escala, va aquí. */
.sidebar__item-ico .ico, .sidebar__group-ico .ico,
.related-grid .ico, .cat-badge .ico, .nav__sb-btn .ico,
.all-group__icon { stroke-width: var(--icon-stroke-tiny); }

/* Escalón intermedio (47px): las tarjetas de "Top tools" en la home y toda la
   rejilla de all-tools.html. Si se añade otro sitio con iconos a esta escala,
   va aquí. */
.tool-card__icon .ico { stroke-width: var(--icon-stroke-card); }

/* ── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.section { padding-block: 56px; }
.section--alt { background: var(--surface); }

.section-head { margin-bottom: 28px; }
.eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brand); margin-bottom: 8px;
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.section-head h2 i { font-style: italic; font-weight: 300; }

/* Titular del sistema: bold + itálica light en la misma línea */
.dual b { font-weight: 800; }
.dual i { font-style: italic; font-weight: 300; }

/* ── Botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; font-size: .9rem; font-weight: 700;
  border: 1.5px solid var(--edge); transition: all var(--transition);
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--ink); border-color: var(--edge); }
.btn-outline { background: transparent; color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--bg); }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: .8rem; }

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100; background: var(--surface);
  height: var(--nav-h); display: flex; align-items: center;
}
.nav.scrolled { box-shadow: 0 1px 0 var(--border); }
.nav__inner {
  width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 28px; height: 100%;
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* El bigote desborda el círculo a los dos lados, así que la marca ya no es
   cuadrada: 76.06 × 52.25 del original. Se fija el alto y el aspect-ratio pone
   el ancho, para que el recuadro no recorte las puntas.

   El círculo naranja va dentro del símbolo; el bigote hereda `color`, así que
   las reglas de abajo son las mismas que las del <b> del wordmark: los dos se
   aclaran sobre fondo oscuro y la marca nunca queda negra sobre negro. */
.nav__logo-mark {
  height: 34px; aspect-ratio: 76.06 / 52.25; flex-shrink: 0;
  color: var(--text);
}
.nav__logo-text { font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.nav__logo-text b { font-weight: 800; color: var(--text); }
.nav__logo-text i { font-style: italic; font-weight: 500; color: var(--brand); }
/* Con nueve categorías más los tres controles de la derecha, el nav ya no cabe
   a 1280px cuando además está la barra lateral: la última entrada se metía
   debajo de "Sign in". En vez de esconder enlaces —que es esconder secciones
   enteras del sitio— la lista se desplaza en horizontal. La barra de scroll se
   oculta porque aquí estorba más de lo que informa. */
.nav__links {
  display: flex; align-items: center; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links li { flex-shrink: 0; }
.nav__links li + li { border-left: 1px solid var(--border); }
.nav__links a {
  display: block; padding: 4px 12px; font-size: .92rem; white-space: nowrap;
  color: var(--text); white-space: nowrap; transition: color var(--transition);
}
.nav__links a:hover { color: var(--brand); }
.nav__links a.active { color: var(--brand); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); transition: all .2s; }
.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.nav__mobile {
  display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--surface); border-block: 1px solid var(--border);
  flex-direction: column; padding: 8px var(--gutter) 16px;
}
.nav__mobile.open { display: flex; }
.nav__mobile a { padding: 12px 0; font-size: .95rem; border-bottom: 1px solid var(--border); }

/* ── Hero de la home ────────────────────────────────────── */
.hero { background: var(--brand); color: #fff; padding: 76px 0 84px; text-align: center; }
.hero__title {
  font-size: clamp(1.5rem, 3.2vw, 2.43rem); letter-spacing: -.03em;
  max-width: 26ch; margin-inline: auto;
}
.hero__title b { font-weight: 800; }
.hero__title i { font-style: italic; font-weight: 300; }
.hero__subtitle {
  font-size: clamp(.9rem, 1.3vw, 1.04rem); font-weight: 300; line-height: 1.55;
  max-width: 52ch; margin: 20px auto 0;
}

/* Las tres reglas — cuelgan del borde inferior de la banda */
.rules {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: min(100% - var(--gutter) * 2, calc(var(--w) * .70));
  margin-inline: auto;
}
.rule { background: var(--ink); color: #fff; padding: 22px 26px; display: flex; gap: 16px; }
.rule__num { font-size: clamp(1.75rem, 3.4vw, 3.05rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; flex-shrink: 0; }
.rule h3 { font-size: .81rem; font-weight: 700; margin-bottom: 4px; }
.rule p { font-size: .73rem; font-weight: 300; line-height: 1.45; }

/* ── Tiles de categoría (home) ──────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; }
.cat-tile {
  position: relative; aspect-ratio: 1; background: var(--brand); color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: background var(--transition);
}
.cat-tile:hover { background: var(--ink); }
.cat-tile__icon { width: var(--glyph-tile); height: var(--glyph-tile); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.cat-tile__label {
  position: absolute; right: 16px; bottom: 12px;
  font-size: clamp(.85rem, 1.33vw, 1.2rem); font-weight: 400;
}

/* ── Hero de categoría ──────────────────────────────────── */
.cat-hero { position: relative; background: var(--ink); color: #fff; }
.cat-hero__inner {
  position: relative; width: 100%; max-width: var(--w); margin-inline: auto;
  padding-inline: var(--gutter); padding-left: calc(var(--gutter) + var(--tile) + 48px);
  min-height: calc(var(--tile) - var(--overhang));
}
.cat-hero__tile {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(var(--overhang) * -1);
  width: var(--tile); height: var(--tile);
  background: var(--brand); display: flex; align-items: center; justify-content: center;
}
.cat-hero__icon { width: var(--glyph-tile); height: var(--glyph-tile); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.cat-hero__tile-label { position: absolute; right: 14px; bottom: 12px; font-size: clamp(.85rem, 1.33vw, 1.2rem); }
.cat-hero__text { min-height: calc(var(--tile) - var(--overhang)); display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
.cat-hero__text h1 { font-size: clamp(1.5rem, 3.2vw, 2.41rem); letter-spacing: -.03em; }
.cat-hero__text h1 b { font-weight: 800; }
.cat-hero__text h1 i { font-style: italic; font-weight: 300; }
.cat-hero__text p { font-size: clamp(.9rem, 1.3vw, 1.03rem); font-weight: 300; margin-top: 12px; max-width: 56ch; }
.cat-hero--plain .cat-hero__inner { padding-left: var(--gutter); min-height: 0; }

.cat-body {
  width: 100%; max-width: var(--w); margin-inline: auto;
  padding: calc(var(--overhang) + 44px) var(--gutter) 72px;
}

/* ── Filas de herramienta ───────────────────────────────── */
/* El alto de la fila es el lado del cuadrado del icono: en el diseño todas las
   filas de una categoría miden lo mismo y el bloque naranja es siempre cuadrado. */
.tool-rows { display: flex; flex-direction: column; gap: 10px; padding-left: var(--unit); }
.tool-row {
  display: grid; grid-template-columns: var(--unit) minmax(0, 34%) 1fr;
  height: var(--unit); min-height: 0; overflow: hidden;
  background: var(--blush); transition: background var(--transition);
}
.tool-row:hover { background: var(--blush-dk); }
.tool-row__icon {
  width: var(--unit); background: var(--brand); color: #fff;
  display: grid; place-items: center; transition: background var(--transition);
}
.tool-row:hover .tool-row__icon { background: var(--ink); }
.tool-row__icon .ico { width: var(--glyph-row); height: auto; aspect-ratio: 1; }
.tool-row__name {
  display: flex; align-items: center; padding: 10px 24px; min-width: 0; min-height: 0;
  font-size: clamp(1.08rem, 2.32vw, 2.09rem); font-weight: 400; line-height: 1.15;
  letter-spacing: -.02em;
}
.tool-row__name b { font-weight: 800; }
.tool-row__desc {
  display: flex; align-items: center; padding: 10px 24px; min-width: 0; min-height: 0;
  border-left: 1px solid var(--edge); font-size: clamp(.85rem, 1.13vw, 1.01rem); line-height: 1.45;
}
/* El texto se recorta para que ninguna descripción larga rompa el cuadrado. */
.tool-row__name > span { -webkit-line-clamp: 3; }
.tool-row__desc > span { -webkit-line-clamp: 3; }
.tool-row__name > span, .tool-row__desc > span {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Tarjetas de herramienta (home y all-tools) ─────────── */
.tool-grid, .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tool-card {
  display: grid; grid-template-columns: var(--card-unit) 1fr; grid-template-rows: 1fr 1fr;
  height: var(--card-unit); min-height: 0; overflow: hidden;
  background: var(--blush); transition: background var(--transition);
}
.tool-card:hover { background: var(--blush-dk); }
.tool-card__icon {
  grid-row: 1 / 3; width: var(--card-unit); background: var(--brand); color: #fff;
  display: grid; place-items: center; transition: background var(--transition);
}
.tool-card:hover .tool-card__icon { background: var(--ink); }
.tool-card__icon .ico { width: var(--glyph-card); height: auto; aspect-ratio: 1; }
.tool-card__name {
  grid-column: 2; font-size: .98rem; font-weight: 400; line-height: 1.25;
  padding: 0 16px 3px; align-self: end;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tool-card__name b { font-weight: 800; }
.tool-card__desc {
  grid-column: 2; font-size: .8rem; line-height: 1.4; padding: 0 16px; align-self: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── all-tools ──────────────────────────────────────────── */
.all-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.all-jump a { padding: 7px 16px; border: 1.5px solid var(--edge); font-size: .84rem; font-weight: 600; }
.all-jump a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.all-group { margin-bottom: 44px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.all-group__title { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin-bottom: 16px; }
.all-group__icon { width: 34px; height: 34px; padding: 6px; background: var(--brand); color: #fff; fill: none; stroke: currentColor; }
.all-group__title em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--text-muted); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { font-size: .8rem; color: var(--text-muted); padding-block: 20px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb span { opacity: .5; }
.breadcrumb em { font-style: normal; color: var(--text); }

/* ── Hero de página de herramienta ──────────────────────── */
.tool-hero { padding: 20px 0 32px; border-bottom: 1px solid var(--edge); margin-bottom: 36px; }
.tool-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 14px 0 10px; letter-spacing: -.03em; }
.tool-desc { font-size: 1.02rem; font-weight: 300; color: var(--text); max-width: 66ch; line-height: 1.6; }

.cat-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; padding: 7px 14px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  transition: background var(--transition);
}
.cat-badge:hover { background: var(--ink); }
.cat-badge .ico { width: 16px; height: 16px; }

/* ── Caja de herramienta ────────────────────────────────── */
.tool-box { background: var(--surface); border: 1.5px solid var(--edge); padding: 24px; }
.tool-box__inner { padding: 24px; }
.tool-box__split { display: grid; grid-template-columns: 1fr 1fr; }
.tool-box__split > * + * { border-left: 1px solid var(--edge); }
.tool-box__half { padding: 24px; }
.tool-box__label, .tool-label {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px;
}
.tool-box .tool-textarea { margin-bottom: 0; }
.tool-box .tool-box__split { margin: 0 -24px; }
.tool-box .tool-box__split > div { padding: 16px 24px; }
.tool-box .tool-stats { margin: 0 -24px; padding: 14px 24px; }
.tool-box .tool-actions { margin-top: 16px; }

/* ── Campos ─────────────────────────────────────────────── */
.tool-textarea, .tool-input, .tool-select {
  width: 100%; font-family: var(--font); font-size: .94rem; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--edge); padding: 12px 14px;
  transition: border-color var(--transition);
}
.tool-textarea { font-family: var(--font-mono); line-height: 1.6; resize: vertical; min-height: 140px; }
.tool-textarea:focus, .tool-input:focus, .tool-select:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.tool-textarea--output { background: var(--blush); }
.tool-select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.6' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }

.tool-file-input {
  width: 100%; padding: 40px 24px; border: 2px dashed var(--edge);
  text-align: center; cursor: pointer; background: var(--blush);
  transition: background var(--transition);
}
.tool-file-input:hover { background: var(--blush-dk); }
.tool-file-input input { display: none; }
.tool-file-input__text { font-size: .9rem; color: var(--text-muted); margin-top: 8px; }
.tool-file-input__icon { font-size: 2rem; }

.color-preview { width: 48px; height: 48px; border: 1.5px solid var(--edge); }
.tool-range { width: 100%; accent-color: var(--brand); }
.tool-range-row { display: flex; align-items: center; gap: 12px; }
.tool-range-val {
  min-width: 44px; text-align: center; font-weight: 700; font-size: .88rem;
  background: var(--brand); color: #fff; padding: 3px 8px;
}

/* ── Botones de herramienta ─────────────────────────────── */
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; font-size: .86rem; font-weight: 700;
  border: 1.5px solid var(--edge); background: var(--surface); color: var(--text);
  transition: all var(--transition);
}
.tool-btn:hover { background: var(--text); color: var(--bg); }
.tool-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tool-btn--primary:hover { background: var(--ink); border-color: var(--edge); color: #fff; }
.tool-btn--secondary { background: var(--surface); color: var(--text); }
.tool-btn--danger { border-color: var(--danger); color: var(--danger); }
.tool-btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.tool-btn--success { border-color: var(--success); color: var(--success); }
.tool-btn--success:hover, .tool-btn--success.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* ── Stats ──────────────────────────────────────────────── */
.tool-stats { display: flex; flex-wrap: wrap; gap: 10px; background: var(--blush); border-top: 1.5px solid var(--edge); }
.tool-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 84px;
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--edge); font-size: .78rem;
}
.tool-stat__value { font-weight: 800; font-size: 1.05rem; color: var(--brand); line-height: 1.1; }
.tool-stat__label { color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; }

/* ── Opciones ───────────────────────────────────────────── */
.tool-options { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.tool-option { display: flex; align-items: center; gap: 7px; font-size: .86rem; cursor: pointer; }
.tool-option input[type="checkbox"], .tool-option input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; }

/* ── Salida ─────────────────────────────────────────────── */
.tool-result {
  margin-top: 16px; padding: 16px; background: var(--blush); border: 1.5px solid var(--edge);
  font-family: var(--font-mono); font-size: .88rem; color: var(--text);
  min-height: 60px; word-break: break-word; white-space: pre-wrap; line-height: 1.6;
}
.tool-result--light { background: var(--surface); }

/* ── Docs ───────────────────────────────────────────────── */
.docs-section { margin-bottom: 44px; }
.docs-section h2 { font-size: 1.35rem; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1.5px solid var(--edge); }
.docs-section h3 { font-size: 1rem; margin: 22px 0 8px; }
.docs-section p { font-size: .95rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.7; }
.docs-section ul, .docs-section ol { padding-left: 22px; margin-bottom: 12px; }
.docs-section li { font-size: .93rem; color: var(--text-muted); margin-bottom: 6px; }
.docs-section ul { list-style: disc; }
.docs-section ol { list-style: decimal; }
.docs-section code { font-family: var(--font-mono); font-size: .85em; background: var(--blush); padding: 2px 6px; color: var(--brand-dk); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1.5px solid var(--edge); background: var(--surface); }
.faq-item + .faq-item { margin-top: 8px; }
.faq-item summary {
  padding: 15px 18px; font-weight: 700; font-size: .93rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--blush); }
.faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--brand); line-height: 1; }
.faq-item[open] summary { background: var(--blush); border-bottom: 1.5px solid var(--edge); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p, .faq-item__body { padding: 15px 18px; font-size: .9rem; color: var(--text-muted); line-height: 1.7; }

/* ── Related ────────────────────────────────────────────── */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.related-grid a {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--edge); font-size: .84rem; font-weight: 600;
  transition: all var(--transition);
}
.related-grid a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.related-grid .ico { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Disclaimer ─────────────────────────────────────────── */
.disclaimer { background: var(--blush); border-left: 5px solid var(--brand); padding: 14px 18px; margin-bottom: 20px; font-size: .86rem; line-height: 1.6; }
.disclaimer strong { font-weight: 800; }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--edge); margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn { padding: 10px 20px; font-weight: 700; font-size: .87rem; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: all var(--transition); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-btn:hover { color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert { padding: 12px 16px; font-size: .88rem; margin-bottom: 12px; border-left: 5px solid; }
.alert--error { background: #FBE9E7; border-color: var(--danger); color: #7A1810; }
.alert--success { background: #E6F4EC; border-color: var(--success); color: #14512F; }

/* ── "Why" cards ────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.why-card { background: var(--blush); padding: 26px 24px; }
.why-card__icon { width: 44px; height: 44px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.why-card h3 { font-size: 1rem; margin-bottom: 8px; }
.why-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--ink); color: #B9B6B2; font-size: .85rem; margin-top: 72px; }
.footer__inner {
  width: 100%; max-width: var(--w); margin-inline: auto; padding: 56px var(--gutter) 40px;
  display: grid; grid-template-columns: 240px 1fr; gap: 48px;
}
.footer__brand .nav__logo-text { font-size: 1.1rem; }
.footer__brand .nav__logo-text b { color: #fff; }
.footer__brand .nav__logo-mark { display: inline-block; vertical-align: middle; margin-right: 8px; color: #fff; }
.footer__brand p { margin-top: 12px; font-size: .82rem; line-height: 1.6; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px; }
.footer__col h3 { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 12px; }
.footer__col h3 a:hover { color: var(--brand); }
.footer__col li { margin-bottom: 7px; }
.footer__col a { font-size: .8rem; transition: color var(--transition); }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  width: 100%; max-width: var(--w); margin-inline: auto;
  padding: 18px var(--gutter); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: .78rem;
}
.footer__meta { display: flex; gap: 18px; }
.footer__meta a:hover { color: #fff; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  background: var(--ink); color: #fff; padding: 13px 22px; font-size: .88rem; font-weight: 600;
  transform: translateY(90px); opacity: 0; transition: all .25s ease; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav__links a { padding: 4px 10px; font-size: .86rem; }
  .cat-grid { gap: 28px; }
}
@media (max-width: 900px) {
  :root { --unit: 108px; --overhang: 74px; --card-unit: 76px; --gutter: 20px; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__inner { gap: 12px; }
  .nav__logo { min-width: 0; }
  .nav__logo-text { overflow: hidden; text-overflow: ellipsis; }
  .rules { grid-template-columns: 1fr; width: min(100% - 40px, 560px); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  :root { --unit: 84px; --overhang: 0px; --card-unit: 70px; --gutter: 16px; --nav-h: 64px;
           --tile: 130px; }
  .nav__inner { gap: 6px; }
  .nav__logo-mark { height: 28px; }
  .nav__logo-text { font-size: .94rem; }
  .nav__actions { gap: 6px; }
  .nav__auth-btn { padding: 5px 9px; font-size: .78rem; }
  .dark-toggle, .lang-toggle { width: 32px; height: 32px; }
  .nav__hamburger { padding: 4px; }
  .hero { padding: 48px 0 56px; }
  .section { padding-block: 40px; }
  .tool-rows { padding-left: 0; }
  .tool-row { grid-template-columns: var(--unit) 1fr; height: var(--unit); }
  .tool-row__icon { grid-row: 1 / 3; }
  .tool-row__name { grid-column: 2; align-items: end; padding: 12px 16px 2px; }
  .tool-row__desc { grid-column: 2; align-items: start; border-left: none; padding: 0 16px 12px; font-size: .82rem; }
  .tool-row__name > span { -webkit-line-clamp: 1; }
  .tool-row__desc > span { -webkit-line-clamp: 2; }
  .cat-hero__inner { padding-left: var(--gutter); min-height: 0; }
  .cat-hero__tile { position: relative; left: auto; bottom: auto; margin: 0; }
  .cat-hero__text { min-height: 0; padding-block: 24px 30px; }
  .cat-body { padding-top: 32px; }
  .tool-box { padding: 16px; }
  .tool-box .tool-box__split { margin: 0 -16px; }
  .tool-box .tool-stats { margin: 0 -16px; padding: 12px 16px; }
  .tool-box__split { grid-template-columns: 1fr; }
  .tool-box__split > * + * { border-left: none; border-top: 1px solid var(--edge); }
  .tool-grid, .tools-grid { grid-template-columns: 1fr; }
  .tool-actions { flex-direction: column; align-items: stretch; }
  .tool-actions .tool-btn { justify-content: center; }
  .footer { margin-top: 48px; }
}
@media (max-width: 420px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — persistente y plegable
   ═══════════════════════════════════════════════════════════ */
:root { --sb-w: 268px; --sb-col-w: 68px; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 150;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--edge);
  transform: translateX(-100%);
  transition: width .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.is-open { transform: none; }
@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .sidebar.is-collapsed { width: var(--sb-col-w); }
  /* Con el sidebar desplegado la marca ya está a la izquierda: no se repite en la barra. */
  body.ths-sb:not(.ths-sb-col) .nav__logo { display: none; }
  body.ths-sb { padding-left: var(--sb-w); transition: padding-left .22s cubic-bezier(.4,0,.2,1); }
  body.ths-sb.ths-sb-col { padding-left: var(--sb-col-w); }
  body.ths-sb .contact-fab { display: none; }
}

/* ── Cabecera ─────────────────────────────────────────── */
.sidebar__hd {
  display: flex; align-items: center; gap: 10px;
  height: var(--nav-h); padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--edge);
}
.sidebar__logo { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.sidebar__logo-lbl {
  font-size: 1rem; white-space: nowrap; overflow: hidden;
  transition: opacity .15s, max-width .22s cubic-bezier(.4,0,.2,1); max-width: 180px;
}
.sidebar.is-collapsed .sidebar__logo-lbl { opacity: 0; max-width: 0; }
/* Plegado no cabe marca + botón: la marca ya vuelve a la barra superior. */
.sidebar.is-collapsed .sidebar__logo { display: none; }
.sidebar.is-collapsed .sidebar__hd { justify-content: center; padding-inline: 8px; }
.sidebar__colbtn {
  width: 28px; height: 28px; flex-shrink: 0; margin-left: auto;
  display: grid; place-items: center; color: var(--text-muted);
  border: 1px solid var(--border); transition: all var(--transition);
}
.sidebar__colbtn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.sidebar__colbtn svg { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.sidebar.is-collapsed .sidebar__colbtn svg { transform: rotate(180deg); }
@media (max-width: 1023px) { .sidebar__colbtn { display: none; } }

/* ── Cuerpo ───────────────────────────────────────────── */
.sidebar__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0; }
.sidebar__ft { flex-shrink: 0; padding: 10px 0; border-top: 1px solid var(--edge); }

.sidebar__item, .sidebar__group-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; font-size: .88rem; color: var(--text);
  white-space: nowrap; cursor: pointer; transition: background var(--transition);
}
.sidebar__item:hover, .sidebar__group-hd:hover { background: var(--blush); }
.sidebar__item.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.sidebar__item-ico, .sidebar__group-ico {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; color: var(--brand);
}
.sidebar__item.is-active .sidebar__item-ico { color: #fff; }
.sidebar__item-ico .ico, .sidebar__group-ico .ico { width: 20px; height: 20px; }
.sidebar__item-lbl, .sidebar__group-lbl {
  overflow: hidden; transition: opacity .15s; min-width: 0;
}
.sidebar.is-collapsed .sidebar__item-lbl,
.sidebar.is-collapsed .sidebar__group-lbl,
.sidebar.is-collapsed .sidebar__group-chevron,
.sidebar.is-collapsed .sidebar__all-toggle { opacity: 0; pointer-events: none; width: 0; }

/* ── Grupos de categoría ──────────────────────────────── */
.sidebar__group-hd { font-weight: 600; }
.sidebar__group-chevron { margin-left: auto; flex-shrink: 0; color: var(--text-muted); transition: transform .18s; }
.sidebar__group.is-closed .sidebar__group-chevron { transform: rotate(-90deg); }
.sidebar__group-links-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s cubic-bezier(.4,0,.2,1); }
.sidebar__group.is-closed .sidebar__group-links-wrap { grid-template-rows: 0fr; }
.sidebar__group-links { overflow: hidden; display: flex; flex-direction: column; }
.sidebar__group-links a {
  padding: 7px 14px 7px 48px; font-size: .82rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all var(--transition);
}
.sidebar__group-links a:hover { background: var(--blush); color: var(--text); }
.sidebar__group-links a.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.sidebar__group-all { font-weight: 600; color: var(--text) !important; }
.sidebar__group-all.is-active { color: #fff !important; }
.sidebar.is-collapsed .sidebar__group-links-wrap { display: none; }

/* ── Expandir / plegar todo ───────────────────────────── */
.sidebar__all-toggle { padding: 4px 14px 8px; }
.sidebar__all-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  border: 1px solid var(--border); transition: all var(--transition);
}
.sidebar__all-btn:hover { background: var(--blush); color: var(--text); }
.sidebar__all-btn svg { flex-shrink: 0; }

/* ── Tooltips, sólo cuando está plegado ───────────────── */
.sidebar.is-collapsed [data-tip] { position: relative; }
.sidebar.is-collapsed [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); z-index: 200;
  background: var(--ink); color: #fff; padding: 5px 10px;
  font-size: .76rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}

/* ── Panel emergente en modo plegado ──────────────────── */
.sidebar__flyout {
  position: fixed; left: var(--sb-col-w); z-index: 160; display: none;
  min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--edge); padding: 8px 0;
}
.sidebar__flyout.is-open { display: block; }
.sidebar__flyout-title {
  padding: 6px 16px 8px; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--brand);
}
.sidebar__flyout a {
  display: block; padding: 7px 16px; font-size: .84rem; color: var(--text-muted);
  white-space: nowrap; transition: all var(--transition);
}
.sidebar__flyout a:hover { background: var(--blush); color: var(--text); }
.sidebar__flyout a.is-active { background: var(--brand); color: #fff; font-weight: 600; }

/* ── Velo en móvil ────────────────────────────────────── */
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.sidebar-overlay.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .sidebar-overlay { display: none; } }

/* ── Disparador en la barra superior ──────────────────── */
.nav__sb-btn {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 6px 12px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--edge); color: var(--text); transition: all var(--transition);
}
.nav__sb-btn .ico { width: 16px; height: 16px; }
.nav__sb-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (min-width: 1024px) { .nav__sb-btn { display: none; } }
@media (max-width: 640px) { .nav__sb-btn span { display: none; } .nav__sb-btn { padding: 5px 7px; } }

/* ═══════════════════════════════════════════════════════════
   CONTACT FAB + MODAL
   ═══════════════════════════════════════════════════════════ */
.contact-fab {
  position: fixed; bottom: 20px; left: 20px; z-index: 260;
}
.contact-fab__btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-full);
  background: var(--primary); color: #fff;
  font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 4px 18px rgba(124,58,237,.38);
  transition: all var(--transition);
}
.contact-fab__btn:hover { background: var(--primary-dk); transform: translateY(-2px); }

.ths-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15,23,42,.52); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ths-backdrop.is-open { opacity: 1; pointer-events: all; }

.ths-modal {
  background: var(--surface); border-radius: var(--radius-xl);
  width: 100%; max-width: 440px; box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(.97); transition: transform .2s;
}
.ths-backdrop.is-open .ths-modal { transform: translateY(0) scale(1); }

.ths-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 22px 0;
}
.ths-modal__head h3 { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.ths-modal__emoji { font-size: 1.5rem; display: block; margin-bottom: 3px; }
.ths-modal__close {
  width: 30px; height: 30px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-muted);
  display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
  transition: all var(--transition);
}
.ths-modal__close:hover { background: var(--border); color: var(--text); }

.ths-modal__body { padding: 12px 22px 22px; }
.ths-modal__sub { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }

.ths-opts { display: flex; flex-direction: column; gap: 8px; }
.ths-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); text-decoration: none;
  transition: all var(--transition);
}
.ths-opt:hover { border-color: var(--primary); background: var(--primary-lt); }
.ths-opt__ico { font-size: 1.3rem; flex-shrink: 0; }
.ths-opt__lbl { font-weight: 600; font-size: 0.86rem; color: var(--text); display: block; }
.ths-opt__desc { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; display: block; }


/* ═══════════════════════════════════════════════════════════
   HOME — banda de sugerencias y reviews
   ═══════════════════════════════════════════════════════════ */
.suggest-band { background: var(--brand); color: #fff; padding: 56px 40px; text-align: center; }
.suggest-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.suggest-band h2 i { font-style: italic; font-weight: 300; }
.suggest-band p { font-size: .95rem; font-weight: 300; max-width: 52ch; margin: 0 auto 28px; line-height: 1.6; }
.suggest-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.suggest-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; font-weight: 700; font-size: .88rem;
  border: 1.5px solid #fff; transition: all var(--transition);
}
.suggest-btn--white { background: #fff; color: var(--brand); }
.suggest-btn--white:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.suggest-btn--ghost { background: transparent; color: #fff; }
.suggest-btn--ghost:hover { background: #fff; color: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #141210;
  --surface:    #1D1A18;
  --surface-2:  #282320;
  --text:       #F2EFEA;
  --text-muted: #A9A29A;
  --border:     #3A3430;
  --edge:       #4E4741;
  --line:       #F2EFEA;
  --blush:      #33241E;
  --blush-dk:   #452F26;
  --brand-lt:   rgba(235,49,0,.16);
  --tool-bg:    #1D1A18;
  --success:    #4FBF85;
  --danger:     #F0705F;
}
[data-theme="dark"] .nav { background: var(--surface); }
[data-theme="dark"] .nav.scrolled { box-shadow: 0 1px 0 var(--border); }
[data-theme="dark"] .nav__mobile { background: var(--surface); }
[data-theme="dark"] .cat-hero,
[data-theme="dark"] .rule,
[data-theme="dark"] .footer,
[data-theme="dark"] .toast { background: #0B0A09; }
[data-theme="dark"] .cat-tile:hover,
[data-theme="dark"] .tool-row:hover .tool-row__icon,
[data-theme="dark"] .tool-card:hover .tool-card__icon,
[data-theme="dark"] .cat-badge:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .tool-btn--primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
[data-theme="dark"] .tool-btn:hover,
[data-theme="dark"] .btn-outline:hover { background: var(--text); color: var(--bg); }
[data-theme="dark"] .all-jump a:hover,
[data-theme="dark"] .related-grid a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .tool-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F2EFEA' stroke-width='1.6' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .alert--error { background: rgba(240,112,95,.14); color: #F5B7AE; }
[data-theme="dark"] .alert--success { background: rgba(79,191,133,.14); color: #A9DFC3; }
[data-theme="dark"] .disclaimer { background: var(--surface-2); }
[data-theme="dark"] .docs-section code { background: var(--surface-2); color: #FF8C6C; }
[data-theme="dark"] .why-card { background: var(--surface-2); }
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar__flyout { background: var(--surface); border-color: var(--edge); }
[data-theme="dark"] .sidebar__hd { border-bottom-color: var(--edge); }
[data-theme="dark"] .sidebar__ft { border-top-color: var(--edge); }
[data-theme="dark"] .sidebar.is-collapsed [data-tip]:hover::after { background: #0B0A09; }
[data-theme="dark"] .ths-modal { background: var(--surface); }
[data-theme="dark"] .ths-opt { border-color: var(--edge); }
[data-theme="dark"] .ths-opt:hover { background: var(--brand-lt); border-color: var(--brand); }
[data-theme="dark"] .review-card { background: var(--surface); border-color: var(--edge); }

/* Toggle de tema */
/* El selector de idioma comparte caja y comportamiento con el de tema: son dos
   controles hermanos en la misma esquina y deben leerse como un par. Cambia
   solo el contenido —dos letras en vez de un icono—, de ahí el ajuste de
   tipografía. */
.lang-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  color: var(--text-muted); transition: var(--transition);
}
.lang-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.dark-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all var(--transition);
}
.dark-toggle:hover { background: var(--brand); border-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   QR CARD DESIGNER
   ═══════════════════════════════════════════════════════════ */
.card-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
}
.card-swatch:hover { transform: scale(1.2); }
.card-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
/* ── Reviews ──────────────────────────────────────────── */
.reviews-summary { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.reviews-avg { font-size:1.8rem; font-weight:800; color:var(--text); line-height:1; }
.reviews-stars-lg { font-size:1.2rem; color:#F59E0B; letter-spacing:2px; }
.reviews-count { font-size:0.85rem; color:var(--text-muted); }

/* Scrolling ticker */
.review-ticker {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.review-ticker__track {
  display: flex; gap: 14px; width: max-content;
  animation: review-scroll 38s linear infinite;
}
.review-ticker:hover .review-ticker__track { animation-play-state: paused; }
@keyframes review-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .review-ticker__track { animation: none; }
}
.review-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm); flex-shrink: 0; width: 290px;
  transition: box-shadow var(--transition);
}
.review-card:hover { box-shadow: var(--shadow); }
.review-stars { font-size:0.9rem; color:#F59E0B; letter-spacing:1px; }
.review-text { font-size:0.84rem; color:var(--text); line-height:1.6; flex:1; }
.review-author { display:flex; align-items:center; gap:10px; }
.review-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary-lt); color:var(--primary); display:grid; place-items:center; font-weight:700; font-size:0.82rem; flex-shrink:0; }
.review-name { font-weight:600; font-size:0.82rem; color:var(--text); margin:0; }
.review-source { font-size:0.72rem; color:var(--text-muted); margin:0; }
/* ── Auth nav button ── */
.nav__auth-btn { font-size:0.85rem; font-weight:600; color:var(--text-muted); padding:5px 12px; border-radius:var(--radius-full); border:1px solid var(--border); transition:all .15s; white-space:nowrap; }
.nav__auth-btn:hover { color:var(--text); background:var(--surface-2); }
.nav__avatar { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-size:0.8rem; font-weight:700; }
/* ── User dropdown ── */
.nav__user-wrap { position:relative; }
.nav__avatar-btn { background:none; border:none; padding:4px; cursor:pointer; display:inline-flex; align-items:center; border-radius:50%; transition:box-shadow .15s; }
.nav__avatar-btn:hover { box-shadow:0 0 0 2px var(--primary); }
.nav__dropdown { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); z-index:200; padding:6px 0; }
.nav__dropdown-item { display:block; width:100%; text-align:left; padding:9px 16px; font-size:0.875rem; color:var(--text); background:none; border:none; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .12s; box-sizing:border-box; }
.nav__dropdown-item:hover { background:var(--surface-2); color:var(--text); }
.nav__dropdown-item--admin { color:var(--primary); font-weight:600; }
.nav__dropdown-item--logout { color:#EF4444; }
.nav__dropdown-item--logout:hover { background:rgba(239,68,68,.08); }
.nav__dropdown-sep { height:1px; background:var(--border); margin:4px 0; }
/* -- Save toast -- */
.ths-toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:var(--radius); font-size:0.875rem; font-weight:600; box-shadow:var(--shadow-md); z-index:9999; opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none; }
.ths-toast--show { opacity:1; transform:translateY(0); }
.ths-toast--success { background:var(--primary); color:#fff; }
.ths-toast--warn { background:#F59E0B; color:#fff; }
.ths-toast--error { background:#EF4444; color:#fff; }
/* -- Save button -- */

/* ═══ Herramientas de imagen por lotes ═════════════════════ */

.ib-note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.ib-note:empty { display: none; }

/* Tira de miniaturas: sin ella un lote es una caja negra. */
.ib-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  margin-bottom: 12px; scrollbar-width: thin;
}
.ib-thumb { position: relative; flex: 0 0 auto; width: 124px; }
.ib-thumb__pick {
  display: block; width: 100%; padding: 6px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1.5px solid var(--edge); color: var(--text);
  font: inherit; font-size: 0.72rem; line-height: 1.35;
}
.ib-thumb__pick:hover { background: var(--blush); }
.ib-thumb.is-active .ib-thumb__pick { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.ib-thumb__pick img {
  display: block; width: 100%; height: 76px; object-fit: contain;
  background: var(--surface-2); margin-bottom: 5px;
}
.ib-thumb__name {
  display: block; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ib-thumb__dims { display: block; color: var(--text-muted); }
.ib-thumb__del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 1;
  padding: 0; cursor: pointer; font-size: 15px; font-weight: 700;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--edge);
}
.ib-thumb__del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── Escenario de recorte ── */

.crop-work { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.crop-stage {
  flex: 1 1 380px; min-width: 0; display: block; height: 420px;
  border: 1.5px solid var(--edge); background: var(--surface-2);
  touch-action: none; cursor: crosshair;
}
.crop-stage:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.crop-out { flex: 0 0 auto; width: 228px; }
.crop-out__canvas {
  display: block; max-width: 100%; margin: 4px 0 6px;
  border: 1.5px solid var(--edge);
  /* Tablero de ajedrez: sin él, un fondo transparente se confunde con blanco. */
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

@media (max-width: 640px) {
  .crop-stage { height: 300px; flex-basis: 100%; }
  .crop-out { width: 100%; }
}

/* ── Rejilla de resultados del borrador de fondos ── */

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bg-card { border: 1.5px solid var(--edge); background: var(--surface); padding: 8px; }
.bg-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bg-card__shot {
  display: flex; align-items: center; justify-content: center;
  height: 150px; overflow: hidden; background: var(--surface-2);
}
.bg-card__shot img { max-width: 100%; max-height: 100%; display: block; }
/* Tablero de ajedrez: sin él no se distingue lo transparente de lo blanco. */
.bg-card__shot--alpha {
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.bg-card__shot--msg { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 8px; }
.bg-card__name {
  display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══ Estados que antes vivían en atributos del HTML ═══════

   El CSP del sitio no permite manejadores en línea, así que los
   onmouseenter/onmouseleave que llevaban estos elementos nunca
   llegaban a ejecutarse. Un :hover hace lo mismo y sí funciona.
   ═══════════════════════════════════════════════════════════ */

.drop-zone:hover { border-color: var(--primary); }

/* Filas y tarjetas que se copian al pulsarlas. */
.copy-row, .copy-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s;
}
.copy-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.copy-card { padding: 14px; }
.copy-row:hover, .copy-card:hover { border-color: var(--primary); }

.example-row { cursor: pointer; }
.example-row:hover { background: var(--primary-lt); }

/* ── Lista de documentos de las herramientas de PDF ── */

.doc-list { margin-top: 12px; }
.doc-list:empty { display: none; }
.doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1.5px solid var(--edge); background: var(--surface);
  font-size: 0.82rem;
}
.doc-row + .doc-row { margin-top: 6px; }
.doc-row.is-done { border-color: var(--edge); }
.doc-row__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row__note { color: var(--text-muted); white-space: nowrap; }
.doc-row__bad { color: var(--danger); text-align: right; }
.doc-row__size { white-space: nowrap; }
.doc-row__pct { color: var(--success); font-weight: 700; }
.doc-row__del {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 1; padding: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; background: var(--surface); color: var(--text);
  border: 1.5px solid var(--edge);
}
.doc-row__del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.doc-row__detail {
  padding: 4px 10px 8px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;
  border: 1.5px solid var(--edge); border-top: 0; background: var(--surface);
  margin-top: -6px;
}