/*
 * Tema REHIS26: paleta, tipografía y componentes básicos compartidos.
 * Todas las variables y clases llevan el prefijo "rh-" para no chocar con los estilos propios
 * de cada página. Para ajustar los colores de todo el sitio, cambie solo los valores de :root.
 */
:root {
  /* Neutros cálidos: papel, superficie y tinta */
  --rh-paper: #f4f1ea;
  --rh-surface: #fffdf9;
  --rh-surface-alt: #f8f5ef;
  --rh-line: #e7e1d6;
  --rh-line-strong: #d4cbbb;
  --rh-ink: #1f2933;
  --rh-ink-soft: #46525e;
  --rh-muted: #7a838c;
  --rh-faint: #b3b9bf;

  /* Marca: azul noche y oro viejo */
  --rh-navy: #1b2c40;
  --rh-navy-soft: #e6ebf1;
  --rh-gold: #9a7638;
  --rh-gold-soft: #f4ecdc;
  --rh-gold-light: #d4b47a; /* oro sobre fondos oscuros */

  /* Países, en los tonos del mapa (Chile rojo, Perú azul) */
  --rh-chile: #a3282f;
  --rh-chile-soft: #f8e7e5;
  --rh-peru: #21497d;
  --rh-peru-soft: #e4ecf6;

  /* Evaluación: Rechazada, Sin confirmación, Confirmada */
  --rh-bad: #a63a31;
  --rh-bad-soft: #f8e4e0;
  --rh-warn: #a87515;
  --rh-warn-soft: #f9eed4;
  --rh-ok: #2c7351;
  --rh-ok-soft: #e1f0e7;

  /* Tipografía */
  --rh-font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rh-font-serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;

  /* Espaciado, radios y sombras */
  --rh-s1: 4px;
  --rh-s2: 8px;
  --rh-s3: 12px;
  --rh-s4: 16px;
  --rh-s5: 24px;
  --rh-s6: 32px;
  --rh-r-sm: 6px;
  --rh-r: 10px;
  --rh-r-lg: 14px;
  --rh-shadow-sm: 0 1px 2px rgb(27 44 64 / 6%);
  --rh-shadow: 0 1px 2px rgb(27 44 64 / 6%), 0 6px 18px rgb(27 44 64 / 8%);
  --rh-shadow-lg: 0 2px 6px rgb(16 25 35 / 12%), 0 24px 60px rgb(16 25 35 / 28%);
  --rh-focus: 0 0 0 3px rgb(154 118 56 / 35%);
}

/* Botón */
.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rh-s2);
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--rh-line-strong);
  border-radius: var(--rh-r-sm);
  background: var(--rh-surface);
  color: var(--rh-ink);
  font: 500 14px/1.2 var(--rh-font-sans);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.rh-btn:hover:not(:disabled) { background: var(--rh-surface-alt); border-color: var(--rh-muted); }
.rh-btn:focus-visible { outline: none; box-shadow: var(--rh-focus); }
.rh-btn:disabled { opacity: .45; cursor: default; }

/* Etiqueta breve (REF, país…) */
.rh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rh-surface-alt);
  border: 1px solid var(--rh-line);
  color: var(--rh-ink-soft);
  font: 600 12px/1.4 var(--rh-font-sans);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Indicador segmentado de solo lectura: resalta la opción marcada */
.rh-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--rh-surface-alt);
  border: 1px solid var(--rh-line);
}
.rh-seg > span {
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--rh-faint);
  font: 500 12px/1.4 var(--rh-font-sans);
  white-space: nowrap;
}
.rh-seg > span.is-on { color: #fff; font-weight: 600; background: var(--rh-navy); box-shadow: var(--rh-shadow-sm); }
.rh-seg > span.is-on::before { content: "✓ "; }
.rh-seg > span.is-bad { background: var(--rh-bad); }
.rh-seg > span.is-warn { background: var(--rh-warn); }
.rh-seg > span.is-ok { background: var(--rh-ok); }

/* Encabezado de marca: azul noche, trama de hexágonos (la grilla del Visor) y filete dorado */
.rh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 8vh, 88px) 24px clamp(56px, 10vh, 104px);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgb(255 255 255 / 9%), transparent 70%),
    linear-gradient(180deg, #22364d 0%, var(--rh-navy) 100%);
  color: #fff;
  text-align: center;
}
.rh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("hex.svg") center top / 46px auto repeat;
  opacity: .24;
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 30%, #000 5%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 80% at 50% 30%, #000 5%, transparent 70%);
}
.rh-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rh-gold) 20%, var(--rh-gold-light) 50%, var(--rh-gold) 80%, transparent);
}
.rh-hero .rh-eyebrow { color: var(--rh-gold-light); font-size: 12px; letter-spacing: .22em; }
.rh-hero h1 {
  margin: 14px 0 22px;
  color: #fff;
  font: 600 clamp(40px, 6vw, 64px)/1.05 var(--rh-font-serif);
  letter-spacing: .03em;
  text-shadow: 0 2px 24px rgb(0 0 0 / 25%);
}
.rh-hero__sub { margin: 18px 0 0; color: rgb(255 255 255 / 78%); font-size: 15px; line-height: 1.6; }
.rh-ornament {
  position: relative;
  display: block;
  width: 180px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--rh-gold-light), transparent);
}
.rh-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--rh-gold-light);
  transform: rotate(45deg);
}
@media (max-width: 640px) {
  .rh-hero { padding: 44px 20px 56px; }
  .rh-hero .rh-eyebrow { font-size: 11px; letter-spacing: .16em; }
}

/* Título de sección entre dos filetes */
.rh-section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 36px 0 20px;
  color: var(--rh-gold);
  font: 600 12px/1.3 var(--rh-font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rh-section-title::before,
.rh-section-title::after { content: ""; flex: 1; height: 1px; background: var(--rh-line-strong); }

/* Rótulo pequeño en versalitas */
.rh-eyebrow {
  margin: 0;
  color: var(--rh-muted);
  font: 600 11px/1.3 var(--rh-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}