/* Tipografías Geist y Geist Mono (licencia SIL OFL: assets/fonts/LICENSE-Geist-OFL.txt).
   Se sirven desde este mismo sitio y no desde Google Fonts: así no se envía la
   dirección IP de quien visita Kanlane a Google solo por cargar una fuente. */
@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ----------
   Estilo «cristal limpio»: base neutra, un solo acento y cristal solo en la barra
   lateral, la barra de cada vista y lo que se superpone (ficha, diálogos, menús).
   Los nombres de siempre se mantienen (los plugins dependen de ellos); los nuevos
   son --glass*, --sheet, --overlay, --wash, --hue-a/b, --surface-solid, --late y --today. */
:root{
  /* Acento y velo del fondo: los sobreescribe Ajustes (SettingsView.applyAccent). Por defecto, Grafito. */
  --acc-solid-l:#18181B; --acc-ink-l:#FFFFFF; --acc-text-l:#18181B; --acc-soft-l:rgba(23,24,28,0.07);
  --acc-solid-d:#F4F4F5; --acc-ink-d:#0A0A0C; --acc-text-d:#F4F4F5; --acc-soft-d:rgba(255,255,255,0.09);
  --hue-a:#71717A; --hue-b:#71717A;

  --font:'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --bg:#F4F5F7;
  /* Intensidad del velo de color de las dos esquinas del fondo. */
  --wash:.18;
  --sidebar:rgba(255,255,255,0.62);
  --surface:#FFFFFF;
  /* Igual que --surface pero siempre opaca: para lo que tapa contenido al desplazarse. */
  --surface-solid:#FFFFFF;
  --surface-2:rgba(23,24,28,0.055);
  --surface-3:rgba(23,24,28,0.09);
  --hover:rgba(23,24,28,0.045);
  --ink:#17181C;
  --ink-soft:#5D6068;
  --ink-faint:#686C76;
  --line:rgba(23,24,28,0.08);
  --line-strong:rgba(23,24,28,0.14);

  /* Cristal: barra lateral y barra de vista. */
  --glass:rgba(255,255,255,0.62);
  --glass-line:rgba(255,255,255,0.9);
  --glass-shadow:0 1px 2px rgba(20,22,40,0.04), 0 12px 32px -12px rgba(20,22,40,0.12);
  --glass-blur:blur(24px) saturate(1.4);
  /* Ficha de tarea, diálogos y menús, y el velo de detrás. */
  --sheet:rgba(255,255,255,0.82);
  --sheet-blur:blur(32px) saturate(1.5);
  --overlay:rgba(230,232,238,0.55);
  --seg-on:#FFFFFF;

  --accent:var(--acc-text-l);
  --accent-solid:var(--acc-solid-l);
  --accent-ink:var(--acc-ink-l);
  --accent-soft:var(--acc-soft-l);
  --focus:var(--accent-soft);
  --focus:color-mix(in srgb, var(--accent-solid) 24%, transparent);

  --st-pend:#686C76;  --st-pend-bg:rgba(23,24,28,0.055);
  --st-proc:#2563EB;  --st-proc-bg:rgba(37,99,235,0.09);
  --st-wait:#92580A;  --st-wait-bg:rgba(202,138,4,0.12);
  --st-done:#147A3A;  --st-done-bg:rgba(22,163,74,0.1);
  --danger:#D32222;   --danger-bg:rgba(220,38,38,0.08);
  --meet:#6D4AE0;     --meet-bg:rgba(124,58,237,0.09);
  /* Fechas: vencida y hoy (la hecha usa --st-done). */
  --late:#C2410C;     --late-bg:rgba(234,88,12,0.1);
  --today:#92580A;    --today-bg:rgba(202,138,4,0.12);
  /* Anillo de estado de cada columna (igual en claro y oscuro). */
  --dot-pend:#9498A2; --dot-proc:#3B82F6; --dot-wait:#F59E0B; --dot-done:#22C55E; --dot-red:#EF4444; --dot-violet:#A855F7;

  --shadow-sm:0 1px 2px rgba(20,22,40,0.05);
  --shadow:0 2px 4px rgba(20,22,40,0.05), 0 10px 22px -12px rgba(20,22,40,0.2);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.5);
  --shadow-pop:0 16px 36px -12px rgba(20,22,40,0.28);
  --shadow-drag:0 18px 36px -12px rgba(20,22,40,0.3), 0 0 0 1px rgba(23,24,28,0.06);
  /* etiqueta, control, tarjeta, panel; el cristal y la ficha salen del panel. */
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:14px;
  --r-glass:calc(var(--r-xl) + 2px);
  --r-sheet:calc(var(--r-xl) + 4px);
  /* Etiquetas de cliente: el tono (--h) sale del cliente. */
  --chip-s:46%; --chip-bg-l:95%; --chip-fg-l:32%; --chip-dot-l:52%;
  /* Avatares: iniciales oscuras sobre un pastel. */
  --av-l:86%; --av-s:78%;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* Tema oscuro: por sistema (si no se ha elegido claro) o elegido en Ajustes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0C;
    --wash:.16;
    --sidebar:rgba(255,255,255,0.04);
    --surface:rgba(255,255,255,0.045);
    --surface-solid:#17171B;
    --surface-2:rgba(255,255,255,0.07);
    --surface-3:rgba(255,255,255,0.11);
    --hover:rgba(255,255,255,0.05);
    --ink:#EDEDF0;
    --ink-soft:#A0A3AD;
    --ink-faint:#8B8F99;
    --line:rgba(255,255,255,0.075);
    --line-strong:rgba(255,255,255,0.14);
    --glass:rgba(255,255,255,0.04);
    --glass-line:rgba(255,255,255,0.08);
    --glass-shadow:0 12px 32px -12px rgba(0,0,0,0.6);
    --sheet:rgba(22,22,27,0.78);
    --overlay:rgba(4,4,6,0.6);
    --seg-on:rgba(255,255,255,0.11);
    --accent:var(--acc-text-d);
    --accent-solid:var(--acc-solid-d);
    --accent-ink:var(--acc-ink-d);
    --accent-soft:var(--acc-soft-d);
    --st-pend:#A0A3AD;  --st-pend-bg:rgba(255,255,255,0.07);
    --st-proc:#7AA9FF;  --st-proc-bg:rgba(96,165,250,0.13);
    --st-wait:#FBBF24;  --st-wait-bg:rgba(251,191,36,0.12);
    --st-done:#4ADE80;  --st-done-bg:rgba(74,222,128,0.11);
    --danger:#F87171;   --danger-bg:rgba(248,113,113,0.13);
    --meet:#B9A5FF;     --meet-bg:rgba(167,139,250,0.14);
    --late:#FB923C;     --late-bg:rgba(251,146,60,0.13);
    --today:#FBBF24;    --today-bg:rgba(251,191,36,0.12);
    --shadow-sm:none;
    --shadow:0 12px 26px -14px #000;
    --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.7);
    --shadow-pop:0 18px 40px -12px rgba(0,0,0,0.7);
    --shadow-drag:0 20px 40px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
    --chip-s:38%; --chip-bg-l:17%; --chip-fg-l:78%; --chip-dot-l:62%;
    --av-l:82%; --av-s:70%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0C;
  --wash:.16;
  --sidebar:rgba(255,255,255,0.04);
  --surface:rgba(255,255,255,0.045);
  --surface-solid:#17171B;
  --surface-2:rgba(255,255,255,0.07);
  --surface-3:rgba(255,255,255,0.11);
  --hover:rgba(255,255,255,0.05);
  --ink:#EDEDF0;
  --ink-soft:#A0A3AD;
  --ink-faint:#8B8F99;
  --line:rgba(255,255,255,0.075);
  --line-strong:rgba(255,255,255,0.14);
  --glass:rgba(255,255,255,0.04);
  --glass-line:rgba(255,255,255,0.08);
  --glass-shadow:0 12px 32px -12px rgba(0,0,0,0.6);
  --sheet:rgba(22,22,27,0.78);
  --overlay:rgba(4,4,6,0.6);
  --seg-on:rgba(255,255,255,0.11);
  --accent:var(--acc-text-d);
  --accent-solid:var(--acc-solid-d);
  --accent-ink:var(--acc-ink-d);
  --accent-soft:var(--acc-soft-d);
  --st-pend:#A0A3AD;  --st-pend-bg:rgba(255,255,255,0.07);
  --st-proc:#7AA9FF;  --st-proc-bg:rgba(96,165,250,0.13);
  --st-wait:#FBBF24;  --st-wait-bg:rgba(251,191,36,0.12);
  --st-done:#4ADE80;  --st-done-bg:rgba(74,222,128,0.11);
  --danger:#F87171;   --danger-bg:rgba(248,113,113,0.13);
  --meet:#B9A5FF;     --meet-bg:rgba(167,139,250,0.14);
  --late:#FB923C;     --late-bg:rgba(251,146,60,0.13);
  --today:#FBBF24;    --today-bg:rgba(251,191,36,0.12);
  --shadow-sm:none;
  --shadow:0 12px 26px -14px #000;
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.7);
  --shadow-pop:0 18px 40px -12px rgba(0,0,0,0.7);
  --shadow-drag:0 20px 40px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
  --chip-s:38%; --chip-bg-l:17%; --chip-fg-l:78%; --chip-dot-l:62%;
  --av-l:82%; --av-s:70%;
  color-scheme:dark;
}

/* Sin backdrop-filter el cristal no desenfoca: se sube la opacidad para que el texto siga leyéndose. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,0.94);--sheet:#FFFFFF;--overlay:rgba(230,232,238,0.88);}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){--glass:#131316;--sheet:#17171B;--overlay:rgba(4,4,6,0.88);}
  }
  :root[data-theme="dark"]{--glass:#131316;--sheet:#17171B;--overlay:rgba(4,4,6,0.88);}
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:13px;
  line-height:1.45;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Fondo: color plano y dos velos muy difusos del tono del acento, uno en cada esquina. Nada más. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 70% at 0% 0%, color-mix(in srgb, var(--hue-a) calc(var(--wash) * 100%), transparent) 0, transparent 70%),
    radial-gradient(55% 65% at 100% 100%, color-mix(in srgb, var(--hue-b) calc(var(--wash) * 70%), transparent) 0, transparent 70%);
}
/* Cambio de tema (Workhub.utils.ui.themeSwitch): un círculo de luz que se abre desde el
   botón (encender) o se cierra hacia él (apagar). El script anima el radio (--theme-r);
   aquí van las máscaras. La vista de dentro del círculo se desvanece en una franja ancha
   y la de fuera empieza un poco después: por el hueco asoma el fondo del par, que es el
   aro de luz del borde, como el canto de una gota de cristal. */
@property --theme-r{syntax:'<length>';inherits:true;initial-value:0px;}
html.theme-vt *,html.theme-vt *::before,html.theme-vt *::after{transition:none !important;}
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal;}
html.theme-vt::view-transition-image-pair(root){
  background:radial-gradient(circle at var(--theme-x) var(--theme-y),
    transparent calc(var(--theme-r) - 120px),
    rgba(255,255,255,0.95) calc(var(--theme-r) - 46px),
    rgba(190,200,220,0.5) calc(var(--theme-r) - 14px),
    transparent var(--theme-r));
}
/* Dentro del círculo: el tema claro (el nuevo al encender, el viejo al apagar). */
html.theme-vt:not(.theme-off)::view-transition-new(root),
html.theme-vt.theme-off::view-transition-old(root){
  z-index:1;
  -webkit-mask-image:radial-gradient(circle at var(--theme-x) var(--theme-y), #000 calc(var(--theme-r) - 120px), rgba(0,0,0,0.5) calc(var(--theme-r) - 62px), transparent calc(var(--theme-r) - 22px));
  mask-image:radial-gradient(circle at var(--theme-x) var(--theme-y), #000 calc(var(--theme-r) - 120px), rgba(0,0,0,0.5) calc(var(--theme-r) - 62px), transparent calc(var(--theme-r) - 22px));
}
/* Fuera del círculo: el tema oscuro. */
html.theme-vt:not(.theme-off)::view-transition-old(root),
html.theme-vt.theme-off::view-transition-new(root){
  z-index:0;
  -webkit-mask-image:radial-gradient(circle at var(--theme-x) var(--theme-y), transparent calc(var(--theme-r) - 70px), rgba(0,0,0,0.6) calc(var(--theme-r) - 26px), #000 var(--theme-r));
  mask-image:radial-gradient(circle at var(--theme-x) var(--theme-y), transparent calc(var(--theme-r) - 70px), rgba(0,0,0,0.6) calc(var(--theme-r) - 26px), #000 var(--theme-r));
}
/* Cristal: solo en la barra lateral, la barra de cada vista y lo que se superpone.
   Nunca se anida: dentro de un cristal, los elementos van con --surface o --surface-2. */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.mono{font-family:var(--mono);font-size:12px;}
h1,h2,h3{font-family:inherit;color:var(--ink);letter-spacing:-0.012em;font-weight:600;}
a{color:var(--accent);text-underline-offset:2px;}
::selection{background:var(--accent-soft);background:color-mix(in srgb, var(--accent-solid) 22%, transparent);color:inherit;}
svg{flex:none;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px;}
.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  line-height:1;
  color:var(--ink-faint);
  background:transparent;
  border:0;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
}

/* Mientras se traduce la página (ver src/boot.js). */
html.i18n-pending body{visibility:hidden;}
/* El acceso ya traducido se enseña sin esperar al resto de la página (src/views/auth-early.js). */
html.i18n-pending.auth-early .auth-screen{visibility:visible;}
/* Texto solo para lectores de pantalla. */
/* Enlace para saltar al contenido: solo se ve al recibir el foco con el teclado. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 14px;border-radius:var(--r-md);background:var(--accent-solid);color:var(--accent-ink);text-decoration:none;}
.skip-link:focus{top:12px;}
#contenido:focus{outline:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Páginas legales (privacidad, términos y cookies) ----------
   Documentos de lectura: una columna estrecha, texto cómodo y tablas que se
   desplazan en pantallas pequeñas. Usan los mismos tokens que la app. */
body.legal{margin:0;background:var(--bg);color:var(--ink);}
.legal-wrap{max-width:760px;margin:0 auto;padding:18px 20px 64px;}

.legal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 16px;}
.legal-brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;}
.legal-brand img{display:block;border-radius:8px;}
.legal-back{font-size:13px;color:var(--ink-soft);text-decoration:none;}
.legal-back:hover{color:var(--accent);}
.legal-nav{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:12px;margin-bottom:30px;border-bottom:1px solid var(--line);}
.legal-nav a{padding:7px 12px;border-radius:var(--r-md);font-size:13px;color:var(--ink-soft);text-decoration:none;}
.legal-nav a:hover{background:var(--hover);color:var(--ink);}
.legal-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:500;}

.legal h1{margin:0 0 8px;font-size:28px;font-weight:600;letter-spacing:-0.03em;line-height:1.2;}
.legal-lead{margin:0 0 6px;font-size:15px;line-height:1.65;color:var(--ink-soft);}
.legal-meta{margin:0 0 28px;font-size:12.5px;color:var(--ink-faint);}
.legal section{margin:34px 0 0;scroll-margin-top:16px;}
.legal h2{margin:0 0 12px;font-size:18px;font-weight:600;letter-spacing:-0.02em;}
.legal h3{margin:20px 0 6px;font-size:14.5px;font-weight:600;}
.legal p,.legal li{font-size:14.5px;line-height:1.7;color:var(--ink-soft);}
.legal p{margin:0 0 12px;}
.legal strong{color:var(--ink);font-weight:600;}
.legal ul,.legal ol{margin:0 0 12px;padding-left:22px;}
.legal li{margin:4px 0;}
.legal a{color:var(--accent);text-underline-offset:2px;}
.legal code{font-family:var(--mono, ui-monospace, monospace);font-size:12.5px;padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink);overflow-wrap:anywhere;}

/* Índice */
.legal-toc{margin:0 0 6px;padding:14px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);}
.legal-toc ol{margin:0;columns:2;column-gap:28px;}
.legal-toc li{font-size:13.5px;break-inside:avoid;}
.legal-toc a{text-decoration:none;}
.legal-toc a:hover{text-decoration:underline;}

/* Recuadro destacado (resumen, avisos) */
.legal-box{margin:0 0 14px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);}
.legal-box p:last-child,.legal-box ul:last-child{margin-bottom:0;}
.legal-box strong:first-child{display:block;margin-bottom:4px;}

/* Tablas: se desplazan si no caben */
.legal-table{margin:0 0 14px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.legal-table table{width:100%;border-collapse:collapse;min-width:520px;}
.legal-table th,.legal-table td{padding:10px 14px;text-align:left;vertical-align:top;font-size:13.5px;line-height:1.55;border-bottom:1px solid var(--line);}
.legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:none;}
.legal-table th{font-weight:600;color:var(--ink);background:var(--surface-2);white-space:nowrap;}
.legal-table td{color:var(--ink-soft);}
.legal-table.is-keyvalue th{width:34%;white-space:normal;}

/* Dato del titular que falta por rellenar (src/config/legal-config.js) */
.legal-missing{padding:0 5px;border-radius:4px;font-style:normal;background:rgba(245, 180, 0, .28);color:inherit;}

/* Pie */
.legal-foot{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);}
.legal-foot p{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-faint);}
.legal-footlinks{display:flex;flex-wrap:wrap;gap:6px 18px;}
.legal-footlinks a{color:var(--ink-soft);text-decoration:none;}
.legal-footlinks a:hover{color:var(--accent);text-decoration:underline;}
.legal-link-btn{padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;}
.legal-link-btn:hover{color:var(--accent);text-decoration:underline;}
.legal-link-btn.is-inline{font-size:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

@media (max-width:600px){
  .legal-wrap{padding:12px 16px 48px;}
  .legal h1{font-size:23px;}
  .legal-toc ol{columns:1;}
  .legal-table th,.legal-table td{padding:9px 11px;}
}
@media print{
  .legal-nav,.legal-back,.consent,.legal-link-btn{display:none !important;}
  body.legal{background:#fff;color:#000;}
  .legal p,.legal li,.legal-table td{color:#222;}
}

/* ---------- Aviso de cookies ----------
   Tarjeta flotante abajo a la izquierda (hoja inferior en móvil). No tapa la página
   ni bloquea: se puede usar la aplicación sin responder. «Aceptar» y «Rechazar»
   tienen exactamente el mismo aspecto. Usa los tokens de la app, con valores de
   respaldo por si se carga en una página que no los tenga. */
.consent{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:80;
  width:min(432px, calc(100vw - 32px));
  font-family:var(--font, system-ui, sans-serif);
}
.consent-card{
  padding:18px 18px 16px;
  background:var(--sheet, var(--surface, #fff));
  -webkit-backdrop-filter:var(--sheet-blur, none);
  backdrop-filter:var(--sheet-blur, none);
  color:var(--ink, #18181b);
  border:1px solid var(--line-strong, var(--line, #d4d4d8));
  border-radius:var(--r-sheet, var(--r-xl, 12px));
  box-shadow:var(--shadow-pop, 0 12px 32px rgba(0,0,0,.18));
  /* Llega cuando la página ya está pintada: entra suave en lugar de aparecer de golpe. */
  animation:consent-in .32s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes consent-in{from{opacity:0;transform:translateY(10px);}}
.consent-title{margin:0 0 6px;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;}
.consent-text{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-soft, #52525b);}
.consent-links{margin:0 0 14px;font-size:12.5px;color:var(--ink-faint, #71717a);}
.consent-links a{color:var(--ink-soft, #52525b);text-underline-offset:2px;}
.consent-links a:hover{color:var(--ink, #18181b);}

.consent-actions{display:flex;flex-wrap:wrap;gap:8px;}
.consent-btn{
  flex:1 1 0;
  min-width:96px;
  height:34px;
  padding:0 14px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:var(--ink, #18181b);
  background:var(--surface, #fff);
  border:1px solid var(--line-strong, #d4d4d8);
  border-radius:var(--r-md, 9px);
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.consent-btn:hover{background:var(--hover, #f4f4f5);}
.consent-btn:focus-visible{outline:2px solid var(--accent-solid, #18181b);outline-offset:2px;}
.consent-btn.is-text{flex:1 1 100%;height:34px;border-color:transparent;background:none;color:var(--ink-soft, #52525b);}
.consent-btn.is-text:hover{background:var(--hover, rgba(0,0,0,.05));border-color:transparent;color:var(--ink, #18181b);}
.consent-btn.is-primary{color:var(--accent-ink, #fff);background:var(--accent-solid, #18181b);border-color:transparent;}
.consent-btn.is-primary:hover{opacity:.88;background:var(--accent-solid, #18181b);border-color:transparent;}

/* Configuración */
.consent-dialog{
  width:min(520px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  padding:0;
  color:var(--ink, #18181b);
  background:var(--sheet, var(--surface, #fff));
  -webkit-backdrop-filter:var(--sheet-blur, none);
  backdrop-filter:var(--sheet-blur, none);
  border:1px solid var(--glass-line, var(--line-strong, #d4d4d8));
  border-radius:var(--r-sheet, var(--r-xl, 12px));
  box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.2));
  font-family:var(--font, system-ui, sans-serif);
}
.consent-dialog::backdrop{background:var(--overlay, rgba(0,0,0,.5));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.consent-dialog-inner{position:relative;padding:22px 22px 20px;overflow-y:auto;max-height:calc(100dvh - 26px);}
.consent-dialog h2{margin:0 36px 8px 0;font-size:17px;font-weight:600;letter-spacing:-0.02em;}
.consent-cat{margin:12px 0;padding:14px 16px;background:var(--surface, #fff);border:1px solid var(--line, #e4e4e7);border-radius:var(--r-lg, 12px);}
.consent-cat .consent-text{margin:6px 0 0;}
.consent-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;cursor:default;}
label.consent-cat-head{cursor:pointer;}
.consent-badge{flex:none;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ink-soft, #52525b);background:var(--surface, #fff);border:1px solid var(--line, #e4e4e7);}
.consent-actions.is-dialog{margin-top:6px;}
.consent-actions.is-dialog .consent-btn.is-primary{flex-basis:100%;order:3;}
.consent-x{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;font-size:22px;line-height:1;color:var(--ink-faint, #71717a);background:none;border:0;border-radius:var(--r-md, 7px);cursor:pointer;}
.consent-x:hover{background:var(--hover, rgba(0,0,0,.06));color:var(--ink, #18181b);}

/* Interruptor (casilla con role="switch") */
.consent-switch{position:relative;flex:none;display:inline-block;width:34px;height:20px;}
.consent-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.consent-slider{position:absolute;inset:0;border-radius:999px;background:var(--line-strong, #d4d4d8);transition:background .15s ease;pointer-events:none;}
.consent-slider::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;}
.consent-switch input:checked + .consent-slider{background:var(--accent-solid, #18181b);}
.consent-switch input:checked + .consent-slider::after{transform:translateX(14px);background:var(--accent-ink, #fff);}
.consent-switch input:focus-visible + .consent-slider{outline:2px solid var(--accent-solid, #18181b);outline-offset:2px;}

@media (max-width:900px){
  /* Por encima de la barra de pestañas de la app. */
  .consent{left:12px;right:12px;width:auto;bottom:76px;}
  body.is-authing .consent,body.legal .consent{bottom:12px;}
}
@media (max-width:480px){
  .consent-card{padding:14px 14px 12px;}
  .consent-title{margin-bottom:4px;}
  .consent-text{font-size:12.5px;line-height:1.5;margin-bottom:8px;}
  .consent-links{margin-bottom:10px;}
  .consent-btn{min-width:0;}
  .consent-btn.is-text{height:30px;}
  .consent-dialog-inner{padding:18px 16px 16px;}
}
@media (prefers-reduced-motion:reduce){
  .consent-btn,.consent-slider,.consent-slider::after{transition:none;}
  .consent-card{animation:none;}
}
@media print{.consent{display:none;}}