/* Modo oscuro fijo para todos los visitantes: no sigue la preferencia
     de sistema del navegador, una sola paleta. */
  /* Las variables de color (--paper, --ink, --gold, etc.) NO se definen acá:
     viven una sola vez en maqueta-home-imae.html. En el sitio real llegan
     heredadas desde estilos.css, que siempre carga antes que la hoja propia
     de esta página (ver layout.js, pagina()). Si esta maqueta se abre sola
     (fuera del generador, ej. publicada como Artifact), se va a ver sin
     colores: es la maqueta de home la que hay que abrir para eso. */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
  h1, h2, h3, .brand-word strong { font-family: Cambria, Constantia, Georgia, "Times New Roman", serif; text-wrap: balance; margin: 0; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  a { color: inherit; text-decoration: none; }
  .section-eyebrow, .eyebrow, .footer-heading { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 0 0 10px; }
  .text-link { color: var(--gold-deep); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
  .text-link:hover { color: var(--gold); }

  .site-header { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--line); }
  .llamados-bar { background: var(--gold); color: var(--navy-deep); }
  .llamados-inner { display: flex; align-items: center; gap: 12px; padding: 9px 28px; font-size: 0.86rem; flex-wrap: wrap; }
  .llamados-tag { font-weight: 800; letter-spacing: 0.02em; }
  .llamados-detail { opacity: 0.85; }
  .llamados-link { margin-left: auto; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

  .header-inner { display: flex; align-items: center; gap: 24px; padding: 18px 28px; transition: padding 0.25s ease; }
  .site-header.is-scrolled .header-inner { padding: 12px 28px; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-mark { width: 46px; height: 46px; flex: none; transition: width 0.25s ease, height 0.25s ease; }
  .site-header.is-scrolled .brand-mark { width: 34px; height: 34px; }
  .brand-word { display: flex; flex-direction: column; line-height: 1.2; }
  .brand-word strong { font-size: 1.2rem; letter-spacing: 0.02em; transition: font-size 0.25s ease; }
  .brand-word em { font-style: normal; font-size: 0.7rem; color: var(--ink-soft); max-width: 260px; transition: font-size 0.25s ease, max-width 0.25s ease; }
  .site-header.is-scrolled .brand-word strong { font-size: 1.04rem; }
  .site-header.is-scrolled .brand-word em { font-size: 0.62rem; max-width: 220px; }
  .main-nav { display: flex; gap: 4px; margin-left: auto; }
  .main-nav a { padding: 8px 14px; font-size: 0.92rem; font-weight: 600; border-radius: 2px; color: var(--ink-soft); transition: font-size 0.25s ease; }
  .main-nav a:hover { color: var(--ink); }
  .main-nav a.active { color: var(--ink); box-shadow: inset 0 -2px var(--gold); }
  .site-header.is-scrolled .main-nav a { font-size: 0.85rem; }
  .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }

  .breadcrumb { border-bottom: 1px solid var(--line); }
  .breadcrumb-inner { display: flex; gap: 8px; align-items: center; padding: 14px 28px; font-size: 0.82rem; color: var(--ink-soft); }
  .breadcrumb-inner a:hover { color: var(--gold-deep); }
  .breadcrumb-inner span[aria-current] { color: var(--ink); font-weight: 600; }

  .hub-hero { position: relative; min-height: 32vh; overflow: hidden; isolation: isolate; }
  .hub-hero-media { position: absolute; inset: -10% 0 -10% 0; background: radial-gradient(ellipse at 70% 20%, rgba(214,172,102,0.3), transparent 55%), linear-gradient(155deg, #232c3a 0%, #141922 55%, #0b0e13 100%); }
  .hub-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,16,0.85) 0%, rgba(10,12,16,0.25) 65%, rgba(10,12,16,0.05) 100%); }
  .hub-hero-content { position: absolute; left: 0; right: 0; bottom: 0; color: #f3f1ea; padding: 40px 28px 36px; }
  .hub-hero .eyebrow { color: var(--gold-bright); }
  .hub-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; line-height: 1.1; margin: 4px 0 12px; }
  .hub-hero-lead { max-width: 620px; color: #d8d4c8; font-size: 1rem; margin: 0; }

  .hub-section { padding: 44px 0 88px; }

  .llamados-selector { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
  .llamados-select-btn { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .llamados-select-btn small { font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
  .llamados-select-btn:hover { border-color: var(--gold-deep); }
  .llamados-select-btn.is-active { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--panel); }
  .llamados-select-btn.is-active small { color: var(--panel); opacity: 0.8; }

  .section-eyebrow small { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: 0.8; }

  .hub-section h2 { font-size: 1.6rem; margin: 0 0 20px; }
  .llamados-empty { color: var(--ink-soft); font-size: 0.9rem; margin: 16px 0 0; }

  /* Página real cuando la última ronda cargada ya cerró del todo (ver
     generarLlamadosVacio() en generador/paginas/llamados.js): centrada,
     con aire arriba y abajo, para que se lea como un estado real de la
     página, no como una sección más entre otras. */
  .llamados-vacio { padding: 100px 0; text-align: center; }
  .llamados-vacio .wrap { max-width: 560px; }
  .llamados-vacio h2 { margin-bottom: 14px; }
  .llamados-vacio p:not(.section-eyebrow) { color: var(--ink-soft); }
  .llamados-vacio a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

  .llamados-list { display: flex; flex-direction: column; gap: 64px; }
  .llamado-escuela-block { scroll-margin-top: 130px; }
  .llamado-escuela-block + .llamado-escuela-block { padding-top: 8px; border-top: 1px solid var(--line); }
  .doc-list li { scroll-margin-top: 130px; }
  .llamado-escuela-block h3 { font-size: 1.25rem; margin-bottom: 6px; }
  /* Fecha propia de un cargo (distinta del default de la ronda, ver
     fechaPersonalizada en generador/contenido.js): va dentro de .doc-meta
     (regla ya existente más abajo), misma línea que el tamaño del archivo,
     no en una franja aparte. Sin regla nueva acá. */

  /* navegador estilo Wikipedia, solo aparece con 2+ escuelas */
  .llamados-toc { display: inline-block; max-width: 420px; margin: 0 0 40px; padding: 16px 22px; border: 1px solid var(--line); background: var(--panel); }
  .llamados-toc-title { margin: 0 0 8px; font-weight: 700; font-size: 0.86rem; }
  .llamados-toc ol { margin: 0; padding-left: 22px; font-size: 0.9rem; }
  .llamados-toc li { margin-bottom: 4px; }
  .llamados-toc a { color: var(--gold-deep); }
  .llamados-toc a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .llamados-toc ul { list-style: none; margin: 4px 0 6px; padding-left: 18px; font-size: 0.86rem; }
  .llamados-toc ul a { color: var(--ink-soft); }
  .llamados-toc ul li { margin-bottom: 2px; }

  .doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .doc-item { background: var(--panel); display: flex; align-items: center; gap: 16px; padding: 16px 18px; transition: background 0.15s; }
  .doc-item:hover { background: var(--paper); }
  .doc-item:hover .doc-cta { color: var(--gold); }
  .doc-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); color: var(--gold-bright); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; }
  .doc-info { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
  .doc-name { font-weight: 600; color: var(--ink); }
  .doc-meta { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .doc-cta { color: var(--gold-deep); font-weight: 700; font-size: 0.88rem; margin-left: 12px; }
  /* Un cargo que cierra mientras la página sigue abierta (ver scriptReveal()
     en generador/paginas/llamados.js): no desaparece de golpe, queda tachado
     y sin link real, para que se note que cerró recién, no que nunca existió. */
  .llamado-cargo--cerrado .doc-item { cursor: default; opacity: 0.6; }
  .llamado-cargo--cerrado .doc-item:hover { background: var(--panel); }
  .llamado-cargo--cerrado .doc-name { text-decoration: line-through; }
  .llamado-cargo--cerrado .doc-cta { color: var(--ink-soft); }

  .site-footer { background: var(--navy-deep); color: #cfd3d6; padding-top: 60px; }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
  .footer-col a { color: #cfd3d6; }
  .footer-col a:hover { color: var(--gold-bright); }
  .footer-col p { margin: 0; color: #9099a1; }
  .footer-heading { color: var(--gold-bright); }
  .footer-col--brand p { color: #cfd3d6; font-family: Cambria, Georgia, serif; font-size: 1rem; margin-top: 14px; }
  .map-placeholder { position: relative; height: 130px; background: #1b212b; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
  .map-placeholder iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
  .footer-bottom { padding: 20px 28px 26px; font-size: 0.78rem; color: #7a828a; }

  @media (max-width: 860px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .doc-item { flex-wrap: wrap; }
  }
  .logo-real { background-image: url("/img/maqueta-llamados-imae-1.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }