/* ════════════════════════════════════════════════════════════════════════
   FÉNIX 39 · CONTRATO DE PIEL  (f39-skin.css)
   4-oct-2026 · opus-5-planner-1

   PARA QUÉ EXISTE ESTE FICHERO
   Para que las 10 modalidades de plantilla NO sean 10 programas distintos, y
   para que las 10 versiones de cada una NO sean 10 copias del HTML.

     · MODALIDAD  = estructura distinta  → otro fichero HTML (10 en total).
     · PIEL       = misma estructura     → un atributo: <html data-skin="...">.

   Una modalidad se encarga. Una piel se elige. Si el diseñador entrega 100
   ficheros, el día que cambie un botón hay que tocarlo 100 veces y la marca
   se parte. Con esto son 10 ficheros + 1 atributo.

   LOS 11 EJES DE PIEL (todo lo que un diseñador puede mover sin romper nada):
     E1  color base ......... --bg --surface --surface-2 --surface-3
     E2  acento ............. --gold --gold-2 --gold-ink
     E3  tonalidad .......... --skin-hue --skin-sat  (gira y satura TODO)
     E4  combinación ........ --accent-2 (armonía: mono/análoga/complementaria)
     E5  grosor de trazo .... --stroke (iconos) · --line-w (bordes)
     E6  espesor de letra ... --w-body --w-title --tracking --font --mono
     E7  forma .............. --r-scale (0 = esquina viva, 1 = cápsula)
     E8  densidad / aire .... --density (0.85 compacto … 1.25 señorial)
     E9  rugosidad .......... --grain (0..1) · --tex (none|lino|papel|malla)
     E10 luz y elevación .... --shadow-depth (0..1) · --glow (0..1)
     E11 movimiento ......... --motion (0 = quieto … 1 = vivo)

   REGLA DE ORO: la piel NO cambia jerarquía, ni tamaños de fuente relativos,
   ni posiciones, ni IDs, ni el contrato de datos. Cambia materia, no anatomía.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Valores por defecto: la piel "Obsidiana Oro" (la de casa) ───────────── */
:root {
  --skin-name: "Obsidiana Oro";
  --skin-hue: 0deg;
  --skin-sat: 1;

  --accent-2: #6aa8ff;

  --stroke: 1.8;      /* grosor del trazo de los iconos SVG */
  --line-w: 1px;      /* grosor de los bordes de tarjeta/campo */

  --w-body: 400;
  --w-medium: 500;
  --w-bold: 600;
  --w-title: 600;
  --tracking: 0px;

  --r-scale: 1;       /* multiplica todos los radios */
  --density: 1;       /* multiplica alturas y paddings */

  --grain: 0;         /* 0 = liso · .5 = tela · 1 = papel de estraza */
  --tex: none;

  --shadow-depth: 1;
  --glow: 1;
  --motion: 1;
}

/* ── Derivados: nadie los toca a mano ────────────────────────────────────── */
:root {
  --r-sm: calc(8px * var(--r-scale));
  --r: calc(12px * var(--r-scale));
  --r-lg: calc(18px * var(--r-scale));
  --r-pill: calc(99px * var(--r-scale));

  --pad: calc(14px * var(--density));
  --pad-lg: calc(18px * var(--density));
  --h-ctl: calc(36px * var(--density));
  --h-ctl-sm: calc(30px * var(--density));
  --top: calc(56px * var(--density));

  --shadow: 0 calc(18px * var(--shadow-depth)) calc(50px * var(--shadow-depth))
            rgba(0, 0, 0, calc(.5 * var(--shadow-depth)));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: calc(150ms * var(--motion));
  --t-base: calc(220ms * var(--motion));
  --t-slow: calc(320ms * var(--motion));
}

/* ── Puentes sobre la estructura existente ───────────────────────────────
   Sólo se tocan propiedades de MATERIA. Ni un `display`, ni un `grid-area`.
   Por eso una piel nunca puede romper una modalidad.                       */
.btn            { height: var(--h-ctl); border-radius: var(--r-sm); font-weight: var(--w-bold); letter-spacing: var(--tracking); transition-duration: var(--t-fast); }
.btn-sm         { height: var(--h-ctl-sm); }
.input, .textarea, .select,
.cmdk           { border-width: var(--line-w); border-radius: var(--r-sm); }
.card-soft, .kpi, .task, .tl-card, .board,
.toast, .code   { border-width: var(--line-w); border-radius: var(--r); }
.cap, .gen-card, .creator-form, .modal, .cmd { border-width: var(--line-w); border-radius: var(--r-lg); }
.chip, .pill, .live-pill, .lead-chip, .niche-tag { border-radius: var(--r-pill); }
.panel-head     { height: calc(52px * var(--density)); }
.panel-body     { padding: var(--pad-lg); }
.cap, .creator-form { padding: var(--pad-lg); }
h1, h2, h3,
.view-head h1, .empty h2 { font-weight: var(--w-title); letter-spacing: var(--tracking); }
body            { font-weight: var(--w-body); }
.seal svg, i[data-icon] svg { stroke-width: var(--stroke); }

/* E3 · tonalidad global: gira el matiz de TODA la interfaz de una vez.
   Se aplica al contenedor, no a <html>, para no girar los modales dos veces. */
.app, dialog > *, .toasts {
  filter: hue-rotate(var(--skin-hue)) saturate(var(--skin-sat));
}

/* E9 · rugosidad: grano real en la superficie, no una imagen pesada. */
.app::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: var(--tex-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"));
}
[data-tex="lino"]  { --tex-img: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); }
[data-tex="malla"] { --tex-img: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); }
[data-tex="papel"] { --tex-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.7'/%3E%3C/svg%3E"); }

/* E10 · el halo del acento (el "oro encendido"). */
.seal, .empty .seal-xl { filter: drop-shadow(0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--gold) calc(35% * var(--glow)), transparent)); }

/* E11 · movimiento a cero = interfaz de cristal, sin animación ninguna. */
[data-motion="0"] *, [data-motion="0"] *::before, [data-motion="0"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* ════════════════════════════════════════════════════════════════════════
   LAS 10 PIELES.  <html data-skin="..." data-tex="...">
   Ninguna cambia una sola línea de estructura. Son las MISMAS pantallas.
   ════════════════════════════════════════════════════════════════════════ */

/* 01 · OBSIDIANA ORO — la de casa. Noche, oro, aire. */
[data-skin="obsidiana"] {
  --skin-name: "Obsidiana Oro";
  --bg: #090d14; --surface: #0f1724; --surface-2: #131d2d; --surface-3: #192538;
  --text: #e7ecf3; --muted: #8a97a9; --faint: #5d6a7c;
  --line: rgba(148,163,184,.10); --line-2: rgba(148,163,184,.18);
  --gold: #d4a64a; --gold-2: #f1cf7a; --gold-ink: #1b1406; --accent-2: #6aa8ff;
  --stroke: 1.8; --line-w: 1px; --r-scale: 1; --density: 1;
  --w-title: 600; --tracking: 0px; --grain: 0; --shadow-depth: 1; --glow: 1;
  color-scheme: dark;
}

/* 02 · SAL Y TINTA — claro, editorial, mucho blanco. Para consejos y comités. */
[data-skin="sal"] {
  --skin-name: "Sal y Tinta";
  --bg: #f7f6f3; --surface: #ffffff; --surface-2: #f1efea; --surface-3: #e5e2db;
  --text: #16181d; --muted: #5f6672; --faint: #9aa1ad;
  --line: rgba(22,24,29,.09); --line-2: rgba(22,24,29,.16);
  --gold: #1d1f24; --gold-2: #3b3f49; --gold-ink: #ffffff; --accent-2: #9a6b2f;
  --stroke: 1.5; --line-w: 1px; --r-scale: .35; --density: 1.1;
  --w-body: 400; --w-title: 700; --tracking: -.2px;
  --grain: .05; --shadow-depth: .35; --glow: 0; --motion: .8;
  color-scheme: light;
}

/* 03 · COBRE TALLER — cálido, industrial, trazo grueso. Oficios y fábrica. */
[data-skin="cobre"] {
  --skin-name: "Cobre Taller";
  --bg: #15100c; --surface: #1d1611; --surface-2: #261d16; --surface-3: #33271d;
  --text: #f2e9df; --muted: #a8968a; --faint: #75675d;
  --line: rgba(216,160,106,.12); --line-2: rgba(216,160,106,.24);
  --gold: #c0703a; --gold-2: #e39b60; --gold-ink: #18100a; --accent-2: #4ea08a;
  --stroke: 2.3; --line-w: 2px; --r-scale: .25; --density: .95;
  --w-title: 700; --tracking: .3px;
  --grain: .35; --shadow-depth: .8; --glow: .6;
  color-scheme: dark;
}

/* 04 · ACERO QUIRÓFANO — frío, nítido, cero adorno. Clínicas y laboratorios. */
[data-skin="acero"] {
  --skin-name: "Acero Quirófano";
  --bg: #eef2f5; --surface: #ffffff; --surface-2: #e7edf2; --surface-3: #d8e1e8;
  --text: #0e1a22; --muted: #5a6b78; --faint: #93a3af;
  --line: rgba(14,26,34,.08); --line-2: rgba(14,26,34,.15);
  --gold: #0e7c86; --gold-2: #18a2ae; --gold-ink: #ffffff; --accent-2: #2f6fed;
  --stroke: 1.4; --line-w: 1px; --r-scale: .5; --density: .9;
  --w-body: 400; --w-title: 600; --tracking: 0px;
  --grain: 0; --shadow-depth: .25; --glow: .2; --motion: .6;
  color-scheme: light;
}

/* 05 · VERDE BOTICA — sereno, vegetal, redondeado. Bienestar y alimentación. */
[data-skin="botica"] {
  --skin-name: "Verde Botica";
  --bg: #0a1310; --surface: #0f1d18; --surface-2: #142620; --surface-3: #1b332b;
  --text: #e6f0ea; --muted: #8aa399; --faint: #5e7569;
  --line: rgba(141,194,170,.11); --line-2: rgba(141,194,170,.2);
  --gold: #4fae82; --gold-2: #7fd3a8; --gold-ink: #06160f; --accent-2: #d8a657;
  --stroke: 1.7; --line-w: 1px; --r-scale: 1.6; --density: 1.1;
  --w-title: 600; --tracking: .1px;
  --grain: .12; --shadow-depth: .7; --glow: .8;
  color-scheme: dark;
}

/* 06 · NOCHE BANCARIA — azul profundo, sobrio, poco radio. Finanzas y legal. */
[data-skin="banca"] {
  --skin-name: "Noche Bancaria";
  --bg: #070b16; --surface: #0d1426; --surface-2: #111b33; --surface-3: #182444;
  --text: #e4e9f5; --muted: #8893ad; --faint: #5c6683;
  --line: rgba(140,160,210,.10); --line-2: rgba(140,160,210,.2);
  --gold: #3f6fe0; --gold-2: #7aa0ff; --gold-ink: #060a16; --accent-2: #c9a227;
  --stroke: 1.6; --line-w: 1px; --r-scale: .4; --density: 1;
  --w-title: 600; --tracking: -.1px;
  --grain: 0; --shadow-depth: 1; --glow: .5; --motion: .7;
  color-scheme: dark;
}

/* 07 · ARENA MEDITERRÁNEA — claro cálido, humano. Hostelería y comercio. */
[data-skin="arena"] {
  --skin-name: "Arena Mediterránea";
  --bg: #faf5ec; --surface: #fffdf8; --surface-2: #f3ebdc; --surface-3: #e8dcc6;
  --text: #241d12; --muted: #6d6150; --faint: #a39783;
  --line: rgba(36,29,18,.09); --line-2: rgba(36,29,18,.17);
  --gold: #b4762a; --gold-2: #d79c4d; --gold-ink: #fffdf8; --accent-2: #2f7d8a;
  --stroke: 1.7; --line-w: 1px; --r-scale: 1.3; --density: 1.15;
  --w-title: 600; --tracking: .1px;
  --grain: .25; --shadow-depth: .4; --glow: .3;
  color-scheme: light;
}

/* 08 · GRAFITO BRUTALISTA — esquina viva, borde gordo, cero sombra. Agencias. */
[data-skin="grafito"] {
  --skin-name: "Grafito Brutalista";
  --bg: #0c0c0c; --surface: #141414; --surface-2: #1c1c1c; --surface-3: #262626;
  --text: #f2f2f2; --muted: #9a9a9a; --faint: #6b6b6b;
  --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.28);
  --gold: #e8ff3a; --gold-2: #f4ff8a; --gold-ink: #0c0c0c; --accent-2: #ff4d4d;
  --stroke: 2.6; --line-w: 2px; --r-scale: 0; --density: .9;
  --w-body: 500; --w-title: 700; --tracking: -.4px;
  --grain: .18; --shadow-depth: 0; --glow: 0; --motion: .5;
  color-scheme: dark;
}

/* 09 · PERLA CLÍNICA — casi blanco, aire máximo, línea finísima. Lujo sobrio. */
[data-skin="perla"] {
  --skin-name: "Perla Clínica";
  --bg: #fbfbfc; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #eceef2;
  --text: #1a1c21; --muted: #70757e; --faint: #a7acb5;
  --line: rgba(26,28,33,.06); --line-2: rgba(26,28,33,.12);
  --gold: #8a7250; --gold-2: #b39a72; --gold-ink: #ffffff; --accent-2: #3d5a80;
  --stroke: 1.2; --line-w: 1px; --r-scale: .8; --density: 1.25;
  --w-body: 400; --w-title: 500; --tracking: .2px;
  --grain: 0; --shadow-depth: .2; --glow: .15; --motion: .9;
  color-scheme: light;
}

/* 10 · VINO EDITORIAL — granate, papel, letra gruesa. Formación y cultura. */
[data-skin="vino"] {
  --skin-name: "Vino Editorial";
  --bg: #130a0e; --surface: #1c0f15; --surface-2: #26151d; --surface-3: #341d27;
  --text: #f4e9ec; --muted: #ac8f99; --faint: #7a626c;
  --line: rgba(220,160,180,.11); --line-2: rgba(220,160,180,.22);
  --gold: #a8324f; --gold-2: #d4607c; --gold-ink: #fff5f7; --accent-2: #c9a227;
  --stroke: 1.9; --line-w: 1px; --r-scale: .2; --density: 1.05;
  --w-body: 400; --w-title: 700; --tracking: -.3px;
  --grain: .4; --shadow-depth: .9; --glow: .7;
  color-scheme: dark;
}

/* ── Accesibilidad: en piel clara, los estados mantienen contraste real. ──
   v2 · 5-oct-2026 — CORRECCIÓN. Hasta ahora este parche vivía DENTRO de
   `.pill`, así que cualquier otro uso del color (un delta de precio, una
   cifra en rojo, un texto de aviso) se quedaba con el valor de piel oscura
   y caía a 2,7:1 sobre blanco. Ahora el token se corrige en la RAÍZ de la
   piel: cura todos los usos a la vez y no obliga a tocar ningún panel.
   Medido sobre --surface #ffffff: err 5,9:1 · warn 4,8:1 · info 5,6:1. */
[data-skin="sal"], [data-skin="acero"],
[data-skin="arena"], [data-skin="perla"] {
  --ok:   #1b7a4f;
  --warn: #8a5d00;
  --err:  #b3261e;
  --info: #1b5fb8;
}
[data-skin="sal"] ::-webkit-scrollbar-thumb,
[data-skin="acero"] ::-webkit-scrollbar-thumb,
[data-skin="arena"] ::-webkit-scrollbar-thumb,
[data-skin="perla"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }

/* ── Selector de piel (sólo visible en la demo de encargo) ──────────────── */
.skin-picker { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.skin-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2);
  cursor: pointer; padding: 0; transition: transform var(--t-fast) var(--ease);
}
.skin-dot:hover { transform: scale(1.15); }
.skin-dot[aria-pressed="true"] { border-color: var(--text); transform: scale(1.2); }