/* ===========================================================================
   Nobell Tweaks — hoja compartida de las páginas internas
   ---------------------------------------------------------------------------
   La usan /contrato/, /preparacion/ y /privacidad/. La landing (index.html)
   NO la usa todavía: lleva su CSS dentro del archivo. Los tokens de :root de
   aquí son copia de los suyos, así que si allá cambia un color, aquí también.

   Incluye el modo impresión (papel blanco, tinta negra, logo en negro), que
   es lo que convierte estas páginas en un PDF membretado con Ctrl+P.
   =========================================================================== */

:root{
  color-scheme: dark;

  /* neutros con sesgo violeta, no grises puros */
  --ink:#07060C; --ink-2:#0B0912; --panel:#120F1E; --panel-2:#191330;
  --rule:#241B3D; --rule-2:#34275C;
  --text:#EDEAF5; --dim:#9B92B6; --dimmer:#857BA6;

  /* marca */
  --v-deep:#370B78; --v-core:#4A0CA6; --v-lit:#6218D6;
  --v-glow:#8633FF; --v-soft:#A96BFF; --v-pale:#CDB0FF;
  --grad: linear-gradient(135deg, #370B78 0%, #4A0CA6 46%, #8633FF 100%);

  /* acento de medición y avisos (naranja): lo único que no es morado */
  --signal:#FF8C32;

  /* El logo, como máscara: el mismo archivo se pinta de cualquier color,
     morado en pantalla y negro al imprimir, sin guardar una copia por color. */
  --logo-src: url("nobell-logo.png");

  --maxw: 820px;
  --pad: clamp(20px, 5vw, 44px);

  --f-display:"Bricolage Grotesque","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-body); font-size:1rem; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
a{ color:var(--v-soft); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--v-soft); outline-offset:2px;
}
b,strong{ color:#fff; font-weight:600; }

/* ---------- membrete ---------- */
.membrete{
  border-bottom:1px solid var(--rule); background:var(--panel);
  padding-block: clamp(26px,5vw,40px);
}
.membrete .wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.marca{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; }
.marca .logo{ position:relative; width:44px; height:38px; flex:none; }
.marca .logo img{ width:44px; height:auto; display:block; }
.marca b{
  font-family:var(--f-display); font-weight:800; font-size:1.0625rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text);
}
.marca b span{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--v-glow);
}
.membrete .meta{ margin-left:auto; text-align:right; }
.membrete .meta .doc{
  font-family:var(--f-mono); font-size:.75rem; color:var(--v-soft);
  letter-spacing:.06em; text-transform:uppercase; display:block;
}
.membrete .meta .ver{ font-family:var(--f-mono); font-size:.75rem; color:var(--dimmer); }

/* ---------- idiomas (ver ../idioma.js) ----------
   Cada texto va dos veces: <t-es>…</t-es><t-en>…</t-en>. Se ve el del
   idioma de <html lang>; sin JavaScript, el español. La landing repite
   estas reglas en su propio CSS. */
t-es, t-en{ display:contents; }
html:not([lang="en"]) t-en, html[lang="en"] t-es{ display:none; }
.lang{ display:flex; flex:none; padding:3px; gap:2px; border:1px solid var(--rule-2); border-radius:8px; }
.lang button{
  appearance:none; border:0; cursor:pointer; background:transparent;
  font-family:var(--f-mono); font-size:.75rem; font-weight:500; letter-spacing:.06em;
  color:var(--dimmer); min-width:36px; height:32px; padding:0 8px; border-radius:6px;
  transition: color .15s ease, background-color .15s ease;
}
.lang button:hover{ color:var(--text); }
.lang button[aria-pressed="true"]{ background:rgba(169,107,255,.16); color:var(--text); }
@media print{ .lang{ display:none; } }

/* ---------- texto ---------- */
main{ padding-block: clamp(34px,6vw,60px) clamp(50px,8vw,84px); }
h1{
  font-family:var(--f-display); font-weight:800; margin:0 0 6px;
  font-size:clamp(1.5rem,4.6vw,2.125rem); line-height:1.16;
  letter-spacing:-.01em; text-wrap:balance;
}
h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.0625rem,2.5vw,1.1875rem); line-height:1.3;
  margin:34px 0 10px; padding-top:22px; border-top:1px solid var(--rule);
  display:flex; gap:12px; align-items:baseline;
}
h2 .n{
  font-family:var(--f-mono); font-size:.8125rem; font-weight:500;
  color:var(--v-soft); flex:none; padding-top:2px;
}
main > h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
h3{ font-family:var(--f-display); font-weight:600; letter-spacing:-.012em; margin:0; }
.sub{ color:var(--dim); margin:0 0 4px; font-size:1.0625rem; }
.vigencia{ font-family:var(--f-mono); font-size:.8125rem; color:var(--dimmer); margin:0; }
p{ margin:0 0 12px; }
ul{ margin:0 0 12px; padding-left:20px; }
li{ margin-bottom:7px; }
li::marker{ color:var(--v-soft); }

/* bloque destacado sobre fondo de panel, con filete de marca a la izquierda */
.destacado{
  margin-block: clamp(26px,4.5vw,38px);
  padding:20px 22px; border:1px solid var(--rule); border-left:3px solid var(--v-lit);
  border-radius:0 8px 8px 0; background:var(--panel);
}
.destacado > :last-child{ margin-bottom:0; }

/* aviso importante, en el naranja de "medición" para que no se confunda con la marca */
.ojo{
  margin:16px 0; padding:15px 18px; border-radius:8px;
  border:1px solid rgba(255,140,50,.30); background:rgba(255,140,50,.07);
}
.ojo b{ color:var(--signal); }
.ojo > :last-child{ margin-bottom:0; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:.9375rem;
  padding:11px 20px; border-radius:8px; border:1px solid var(--rule-2);
  background:transparent; color:var(--text); cursor:pointer; text-decoration:none;
  min-height:44px; transition:border-color .18s ease, background .18s ease;
}
.btn:hover{ border-color:var(--v-lit); background:rgba(98,24,214,.14); }
.btn-grad{ background:var(--grad); border-color:transparent; color:#fff; }
.btn-grad:hover{ filter:brightness(1.1); background:var(--grad); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- barra pegada abajo, fuera del papel ---------- */
.acciones{
  position:sticky; bottom:0; z-index:5;
  border-top:1px solid var(--rule); background:rgba(18,15,30,.94);
  backdrop-filter:blur(8px); padding:13px 0;
}
.acciones .wrap{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.acciones .nota{ color:var(--dim); font-size:.875rem; margin:0; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- el logo como máscara ---------- */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .marca .logo img{ visibility:hidden; }
  .marca .logo::before{
    content:""; position:absolute; inset:0; background:var(--v-glow);
    -webkit-mask:var(--logo-src) center/contain no-repeat;
            mask:var(--logo-src) center/contain no-repeat;
  }
}

/* ===========================================================================
   Impresión — papel blanco, tinta negra. Es lo que hace que "Imprimir →
   Guardar como PDF" saque un documento membretado.
   =========================================================================== */
@media print{
  @page{ margin:18mm 16mm; }
  :root{ color-scheme: light; }
  body{ background:#fff; color:#111; font-size:10.5pt; line-height:1.55; }
  .wrap{ max-width:none; padding-inline:0; }
  .acciones, .no-imprimir{ display:none !important; }

  .membrete{
    background:none; border-bottom:1.5pt solid #111;
    padding:0 0 10pt; margin-bottom:18pt;
  }
  .marca b{ color:#111; }
  .marca b span{ -webkit-text-fill-color:#111; color:#111; background:none; }
  .marca .logo::before{ background:#111; }
  .membrete .meta .doc{ color:#111; }
  .membrete .meta .ver{ color:#444; }

  main{ padding-block:0; }
  h1{ font-size:17pt; color:#111; }
  .sub{ color:#333; font-size:11pt; }
  .vigencia{ color:#555; }
  h2{
    font-size:11.5pt; color:#111; border-top:.5pt solid #bbb;
    margin:14pt 0 5pt; padding-top:9pt;
    break-after:avoid; page-break-after:avoid;
  }
  h2 .n{ color:#111; }
  h3{ color:#111; }
  p, li{ orphans:3; widows:3; }
  b,strong{ color:#000; }
  li::marker{ color:#111; }
  a{ color:#111; text-decoration:none; }

  .destacado{
    background:none; border:.5pt solid #999; border-left:2pt solid #111;
    padding:9pt 11pt; margin-block:12pt;
  }
  .ojo{
    background:none; border:.5pt solid #111; padding:8pt 10pt;
    break-inside:avoid; page-break-inside:avoid;
  }
  .ojo b{ color:#000; }
}