/* estilos.css — sitio de ayuda de gesaldia (9-oct-2026, ayuda).
   Colores y tipografía de los tokens de core/styles.css de la plataforma.
   Contraste mínimo 4,5:1 en todo el texto: los enlaces y títulos usan el
   teal oscuro (#147a8e), porque el teal de marca (#1995AD) sobre blanco
   no llega a 4,5:1 en texto normal; por lo mismo, el gris secundario es
   algo más oscuro que el de la plataforma. */
:root {
  --color-primary:        #1995AD;
  --color-primary-dark:   #147a8e;
  --color-primary-light:  #A1D6E2;
  --color-success:        #2e9e6b;
  --color-success-bg:     #e6f7f0;
  --color-warning:        #d97706;
  --color-warning-bg:     #fef3c7;
  --color-bg:             #F0F2F3;
  --color-surface:        #ffffff;
  --color-border:         #e3e6e7;
  --color-text:           #1a2b35;
  --color-text-secondary: #5f727c;   /* la plataforma usa #6b7f8a (4,2:1); aquí, un punto más oscuro para llegar a 4,5:1 */
  --color-text-menu:      #2c3b44;
  --font-family:          Verdana, Geneva, Tahoma, sans-serif;
  --radius-md:            8px;
  --ancho-lectura:        720px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.cabecera-interior {
  max-width: calc(var(--ancho-lectura) + 48px);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.enlace-indice { color: var(--color-primary-dark); font-size: 14px; text-decoration: none; font-weight: 600; }
.enlace-indice:hover { text-decoration: underline; }

/* Logotipo gesaldia variante G — copiado de core/styles.css (.marca-*). */
.marca { display: inline-flex; align-items: center; gap: 10px; line-height: 1; text-decoration: none; }
.marca .marca-texto {
  font-family: 'Lexend', Verdana, Geneva, sans-serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #3f4b53;
}
.marca .marca-ia {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 1.19em;
  letter-spacing: -0.06em;
  color: #147a8e;
}
.marca .marca-ayuda {
  font-size: 14px;
  color: var(--color-text-secondary);
  border-left: 1px solid var(--color-border);
  padding-left: 10px;
}

/* ── Contenido ────────────────────────────────────────────── */
.contenido {
  flex: 1;
  width: 100%;
  max-width: calc(var(--ancho-lectura) + 48px);
  margin: 0 auto;
  padding: 32px 24px 48px;
}
h1, h2, h3, h4 { line-height: 1.3; color: var(--color-text); scroll-margin-top: 16px; }
h1 { font-size: 24px; margin: 0 0 20px; }
h2 { font-size: 19px; margin: 36px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); color: var(--color-primary-dark); }
h3 { font-size: 16px; margin: 26px 0 8px; }
h4 { font-size: 15px; margin: 20px 0 6px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 26px; }
li { margin: 4px 0; }
li > p { margin-bottom: 6px; }
a { color: var(--color-primary-dark); }
a:hover { color: var(--color-text); }
a:focus-visible, .enlace-indice:focus-visible, .marca:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 28px 0; }
img { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }

code {
  font-family: Consolas, 'Cascadia Mono', 'SFMono-Regular', monospace;
  font-size: 0.9em;
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: 4px;
}
pre { background: var(--color-bg); padding: 12px 14px; border-radius: var(--radius-md); overflow-x: auto; margin: 0 0 14px; }
pre code { background: none; padding: 0; }

table { max-width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--color-border); padding: 7px 10px; text-align: left; vertical-align: top; }
th { background: var(--color-bg); font-weight: 700; }

/* Citas normales */
blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 3px solid var(--color-primary-light);
  background: #f7f9fa;
  color: var(--color-text-menu);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
blockquote > :last-child { margin-bottom: 0; }

/* Avisos: «Importante» con el naranja de aviso y «Nota» con el verde de
   las notas del punto verde de la plataforma (texto oscuro por contraste). */
blockquote.aviso { border-left-width: 4px; color: var(--color-text); }
blockquote.aviso-importante { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
blockquote.aviso-importante strong:first-child { color: #92400e; }
blockquote.aviso-nota { border-left-color: var(--color-success); background: var(--color-success-bg); }
blockquote.aviso-nota strong:first-child { color: #1d6b48; }

/* Índice */
.indice-seccion h2 { margin-top: 28px; }
.indice-seccion ul { list-style: none; padding-left: 0; }
.indice-seccion li { margin: 0; border-bottom: 1px solid var(--color-border); }
.indice-seccion li a { display: block; padding: 9px 2px; text-decoration: none; }
.indice-seccion li a:hover { text-decoration: underline; }

/* ── Pie ──────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ── Modo incrustado (panel lateral de la plataforma) ─────── */
.embebido .cabecera, .embebido .pie { display: none; }
.embebido body { min-height: 0; font-size: 14px; }
.embebido .contenido { max-width: none; padding: 16px 18px 32px; }
.embebido h1 { font-size: 20px; margin-bottom: 14px; }
.embebido h2 { font-size: 17px; margin-top: 28px; }

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cabecera-interior { padding: 10px 16px; }
  .contenido { padding: 22px 16px 36px; }
  h1 { font-size: 21px; }
  h2 { font-size: 17px; }
  .marca .marca-ayuda { display: none; }
}