/* Hoja compartida por el aviso de privacidad, el contrato de licencia y el deslinde.
   Identidad de la demo: tinta #12223A, franja de semáforo y Figtree local.
   Sin sombras, filtros ni máscaras, por si algún día se imprimen a PDF. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/figtree-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fuentes/figtree-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fuentes/figtree-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fuentes/figtree-latin-800-normal.woff2') format('woff2');
}

:root {
  --tinta: #12223A;
  --rojo: #E5534B;
  --ambar: #E8A93B;
  --verde: #22A578;
  --verde-texto: #167A58;
  --texto: #1F2A3B;
  --suave: #5B6677;
  --linea: #D9DEE6;
  --fondo: #FFFFFF;
  --papel: #F5F7FA;
  --pendiente-fondo: #FFF3B0;
  --pendiente-borde: #C99A00;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.franja {
  height: 8px;
  background: linear-gradient(90deg,
    var(--rojo) 0, var(--rojo) 33.333%,
    var(--ambar) 33.333%, var(--ambar) 66.666%,
    var(--verde) 66.666%, var(--verde) 100%);
}

.borrador {
  background: var(--tinta);
  color: #FFFFFF;
  border-bottom: 4px solid var(--ambar);
  padding: 14px 20px;
  text-align: center;
}
.borrador strong {
  display: block;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.borrador p { margin: 4px auto 0; max-width: 72ch; font-size: 0.95rem; }

.hoja {
  max-width: 72ch;
  overflow-wrap: anywhere;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.marca {
  margin: 0 0 4px;
  color: var(--verde-texto);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 8px;
  color: var(--tinta);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.2;
}

.version {
  margin: 0 0 24px;
  color: var(--suave);
  font-size: 0.95rem;
}

.navegacion {
  margin: 0 0 28px;
  padding: 12px 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  font-size: 0.95rem;
}
.navegacion ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.navegacion a { color: var(--tinta); font-weight: 600; }
.navegacion [aria-current="page"] {
  color: var(--verde-texto);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.indice {
  margin: 0 0 32px;
  padding: 16px 20px;
  border-left: 4px solid var(--verde);
  background: var(--papel);
}
.indice h2 { margin: 0 0 8px; font-size: 1rem; }
.indice ol { margin: 0; padding-left: 1.4em; }
.indice a { color: var(--tinta); }

main { counter-reset: seccion; }

section { margin: 0 0 28px; scroll-margin-top: 16px; }

section > h2 {
  counter-increment: seccion;
  margin: 0 0 10px;
  color: var(--tinta);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
}
section > h2::before {
  content: counter(seccion) ". ";
  color: var(--verde-texto);
  font-weight: 800;
}

p, li { margin: 0 0 12px; }
ul, ol { padding-left: 1.4em; }

a { color: var(--tinta); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.pendiente {
  display: block;
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--pendiente-fondo);
  border: 2px solid var(--pendiente-borde);
  border-radius: 6px;
  color: #3A2E00;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.nota {
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  overflow-wrap: anywhere;
}

.pie {
  background: var(--tinta);
  color: #E6EAF0;
  padding: 28px 20px;
  text-align: center;
  font-size: 0.9rem;
}
.pie p { margin: 0 0 10px; }
.pie .sello { margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.pie img { height: 22px; width: auto; vertical-align: middle; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  .hoja { padding: 20px 16px 40px; }
  section > h2 { font-size: 1.15rem; }
}

@media print {
  body { font-size: 11pt; }
  .franja, .borrador, .pendiente, .pie {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .borrador { display: block; border: 2px solid #12223A; }
  .pendiente { display: block; break-inside: avoid; }
  .navegacion { display: none; }
  .hoja { max-width: none; padding: 0 0 24px; }
  a { color: inherit; }
}