/* =====================================================================
   peruvoto.com
   Lenguaje visual: la cédula de votación — cuadrícula de casillas,
   filetes de imprenta, numerales tabulares.
   ===================================================================== */

:root {
  --papel:        #f2f3ef;
  --papel-alto:   #fafaf8;
  --tinta:        #17211d;
  --tinta-suave:  #56605b;
  --tinta-tenue:  #8b938e;
  --linea:        #d3d6cf;
  --linea-fuerte: #17211d;
  --bosque:       #1e4b39;
  --violeta:      #584a86;
  --arcilla:      #a8443a;

  /* Marca: turquesa. No lo usa ningun partido, asi que la identidad del
     sitio nunca se confunde con la de un candidato. */
  --marca:        #0e6f6b;

  /* Lavados de seccion. Siempre como fondo palido + filete; el color de
     candidato siempre como relleno solido. Dos registros que no se cruzan. */
  --arena:        #EDF2F6;  --arena-filete: #6B5FA8;
  --bruma:        #edf2f6;  --bruma-filete: #1f5e7a;
  --musgo:        #eff3ee;  --musgo-filete: #1e4b39;

  --medida:  1080px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);

  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "tnum" 0;
}

img { max-width: 100%; display: block; }

a {
  color: var(--violeta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--violeta);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: 1.08rem; }

p { margin: 0 0 1rem; max-width: 68ch; }

.envoltura {
  width: 100%;
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- aviso */

.aviso {
  background: var(--arcilla);
  color: #fdf4f3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.aviso__cuerpo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 0.85rem;
}
.aviso__marca {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15rem;
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1;
}
.aviso__texto { font-size: 0.86rem; line-height: 1.5; }
.aviso__texto strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.aviso__texto p { margin: 0; max-width: 82ch; }

/* ------------------------------------------------------------ cabecera */

.cabecera {
  border-bottom: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
}
.cabecera__cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.marca {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}
.marca span { color: var(--marca); }

.nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.94rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--marca);
}

/* ---------------------------------------------------------------- reloj */

.reloj {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.reloj__punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bosque);
}
@media (prefers-reduced-motion: no-preference) {
  .reloj__punto { animation: latido 2s ease-in-out infinite; }
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ------------------------------------------------------------ portada */

.portada { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }

/* Portada oscura: mismo registro que el dia de la votacion, de modo que
   la pagina abre y cierra con el mismo tratamiento. */
.portada--tinta {
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(2.6rem, 6.5vw, 4.2rem);
}
.portada--tinta h1 { max-width: 22ch; }
.portada--tinta .portada__bajada { color: #b9c2bc; }
.portada--tinta .envoltura {
  border-left: 5px solid #7fb79c;
  padding-left: calc(var(--gutter) - 5px);
}
.portada__bajada {
  font-size: 1.05rem;
  color: var(--tinta-suave);
  margin-top: 1rem;
}

/* La cuenta regresiva: el reloj de la sala de escrutinio. */
.regresiva { margin-top: clamp(2rem, 5vw, 3rem); }
.regresiva__rotulo {
  font-size: 0.9rem;
  color: #b9c2bc;
  margin-bottom: 0.8rem;
}
.regresiva__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #2c3a34;
  background: #2c3a34;
  gap: 1px;
}
.regresiva__celda {
  background: var(--tinta);
  padding: clamp(0.9rem, 2.5vw, 1.5rem) 0.5rem;
  text-align: center;
}
.regresiva__cifra {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #7fb79c;
}
.regresiva__unidad {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: #b9c2bc;
}
.regresiva__pie {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: #b9c2bc;
}
.regresiva--fin .regresiva__cifra { color: var(--tinta-tenue); }

/* ------------------------------------------------------------ secciones */

.seccion { padding-block: clamp(2.75rem, 7vw, 4.5rem); }

.seccion--arena { background: var(--arena); }
.seccion--bruma { background: var(--bruma); }
.seccion--musgo { background: var(--musgo); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta .nota { color: #b9c2bc; }

.seccion__encabezado {
  margin-bottom: 1.75rem;
  border-left: 5px solid var(--linea-fuerte);
  padding-left: 1rem;
}
.seccion--arena .seccion__encabezado { border-color: var(--arena-filete); }
.seccion--bruma .seccion__encabezado { border-color: var(--bruma-filete); }
.seccion--musgo .seccion__encabezado { border-color: var(--musgo-filete); }
.seccion--tinta .seccion__encabezado { border-color: #7fb79c; }
.seccion--tinta .seccion__encabezado p { color: #b9c2bc; }
.seccion__encabezado p {
  margin-top: 0.6rem;
  margin-bottom: 0;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------- la cédula */

.cedula {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  border: 1px solid var(--linea-fuerte);
  /* Este fondo dibuja las lineas divisorias a traves del gap. Va en tono
     claro porque tambien es lo que se ve en el hueco que deja la ultima
     fila cuando no se completa. */
  background: var(--linea);
  gap: 1px;
  /* 70% del ancho de la medida: las casillas dejan de dominar la pagina */
  max-width: 756px;
}
/* Tipografia proporcional al nuevo tamano de casilla */
.cedula .casilla { padding: 0.8rem 0.8rem 0.95rem; gap: 0.6rem; }
.cedula .casilla__partido { font-size: 0.82rem; }
.cedula .casilla__candidato { font-size: 0.79rem; margin-top: -0.35rem; }
.cedula .casilla__enlaces { font-size: 0.76rem; gap: 0.22rem; }
.cedula .casilla__vacio { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
.cedula .casilla__simbolo img { padding: 0.45rem; }

@media (max-width: 800px) {
  /* En movil el bloque ocupa el ancho disponible, pero cada casilla se
     achica: entran tres por fila en vez de dos, asi que el conjunto se
     lee mas compacto sin dejar espacio muerto al costado. */
  .cedula {
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .cedula .casilla { padding: 0.6rem 0.55rem 0.7rem; gap: 0.45rem; }
  .cedula .casilla__partido { font-size: 0.72rem; line-height: 1.25; }
  .cedula .casilla__candidato { font-size: 0.7rem; margin-top: -0.25rem; }
  .cedula .casilla__enlaces { font-size: 0.68rem; }
  .cedula .casilla__vacio { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
  .cedula .casilla__simbolo img { padding: 0.3rem; }
}
.casilla {
  background: var(--papel-alto);
  padding: 1.15rem 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.casilla__simbolo {
  width: 100%;
  flex: none;                   /* nunca se comprime dentro de la casilla */
  aspect-ratio: 1 / 1;          /* cuadrado: coincide con los símbolos del JNE */
  border: 1px solid var(--linea);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--papel);
}
.casilla__simbolo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.75rem;
}
@supports not (aspect-ratio: 1 / 1) {
  .casilla__simbolo { height: 0; padding-bottom: 100%; position: relative; }
  .casilla__simbolo img { position: absolute; inset: 0; }
  .casilla__retrato { height: 0; padding-bottom: 125%; }
}
.casilla__vacio {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #fff;
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  letter-spacing: 0.02em;
}
.casilla__partido {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.3;
}
.casilla__candidato {
  font-size: 0.92rem;
  color: var(--tinta-suave);
  margin-top: -0.5rem;
}
.casilla__franja {
  height: 4px;
  margin-top: auto;
}
.casilla__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.casilla__enlaces span { color: var(--tinta-tenue); }

/* ---------------------------------------------------- tabla de rondas */

.rondas {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.rondas caption {
  text-align: left;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  padding-bottom: 0.75rem;
}
.rondas th, .rondas td {
  text-align: left;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: baseline;
}
.rondas thead th {
  border-bottom: 1px solid var(--linea-fuerte);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.rondas td:first-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 3.5rem;
}
.rondas tr[data-estado="en_campo"] td { background: rgba(30, 75, 57, 0.055); }

.pildora {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.1rem 0.6rem;
  border: 1px solid currentColor;
}
.pildora--en_campo  { color: var(--bosque); }
.pildora--cerrada   { color: var(--tinta-tenue); }
.pildora--pendiente { color: var(--tinta-suave); }

/* ------------------------------------------------------ estado vacío */

.vacio {
  border: 1px dashed var(--linea-fuerte);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--papel-alto);
}
.vacio h3 { margin-bottom: 0.5rem; }
.vacio p { color: var(--tinta-suave); margin-bottom: 0; }

/* ---------------------------------------------------------- enlaces */

.recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.recurso {
  background: var(--papel-alto);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
}
.recurso:hover { background: var(--papel); }
.recurso__fuente { font-size: 0.78rem; color: var(--tinta-tenue); }
.recurso__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--violeta);
}
.recurso:hover .recurso__titulo { color: var(--tinta); }
.recurso p { font-size: 0.89rem; color: var(--tinta-suave); margin: 0; }
.recurso--destacado {
  grid-column: 1 / -1;
  border-left: 4px solid var(--bosque);
}

/* ------------------------------------------------------------ ficha */

.ficha {
  border-top: 1px solid var(--linea-fuerte);
  font-size: 0.94rem;
}
.ficha div {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
}
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; }
@media (max-width: 540px) {
  .ficha div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------- pie */

.pie {
  border-top: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
  padding-block: 2rem 2.5rem;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}
.pie p { max-width: 76ch; }
.pie p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- utilidades */

.prosa > * + h2 { margin-top: 2.5rem; }
.prosa > * + h3 { margin-top: 1.75rem; }
.prosa ul { max-width: 68ch; padding-left: 1.15rem; }
.prosa li { margin-bottom: 0.4rem; }

.nota {
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------- resultados */

.resultados {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
/* Cada resultado es una tarjeta con el color del candidato como franja
   solida. El color llega por la variable --col que escribe index.php. */
.resultado {
  background: #ffffff;
  border: 1px solid var(--linea);
  border-left: 7px solid var(--col, var(--tinta-tenue));
  padding: 0.85rem 1.1rem;
}
.resultado__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.6rem;
}
.resultado__nombre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}
.resultado__nombre small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-top: 0.1rem;
}
.resultado__cifra {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--col, var(--tinta-suave));
}
.resultado__barra {
  height: 8px;
  background: rgba(23, 33, 29, 0.09);
}
.resultado__barra span {
  display: block;
  height: 100%;
}

/* Retrato del candidato en la ficha ampliada */
.casilla__retrato {
  width: 100%;
  flex: none;
  aspect-ratio: 4 / 5;          /* vertical: coincide con las fotos de origen */
  object-fit: cover;
  object-position: center 25%;  /* si hubiera recorte, conserva el rostro */
  background: var(--papel);
  border: 1px solid var(--linea);
}

/* Nota sobre proporciones:
   - simbolos de partido: contenedor 1:1, object-fit contain -> la imagen
     entra completa, sin recorte ni deformacion, cualquiera sea su tamano.
   - fotos de candidatos: contenedor 4:5, object-fit cover -> si la foto
     llega en otra proporcion se recorta al centro-superior en vez de
     deformarse. No hay que recortar nada a mano. */

/* ------------------------------------------------- rondas publicadas */

.ronda {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 5px solid var(--tinta-suave);
}
.ronda:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.25rem; }

/* Las rondas cerradas no cambian de color: bajan de intensidad. Se leen
   como pasos de una misma serie y no como categorias distintas. */
.ronda--previa { opacity: 0.62; }
.ronda--previa:hover, .ronda--previa:focus-within { opacity: 1; }
.ronda--previa .ronda__cabeza { border-bottom-width: 1px; border-bottom-color: var(--tinta-tenue); }
.ronda--previa .resultado__cifra { font-size: 1.6rem; }
.ronda--previa .resultado__retrato { width: 2.3rem; }
.ronda--previa .resultado { padding: 0.6rem 1.1rem; }

.ronda__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--linea-fuerte);
}
.ronda__cabeza h3 { font-size: 1.25rem; }
.ronda__meta {
  margin: 0;
  font-size: 0.89rem;
  color: var(--tinta-suave);
  flex: 1 1 auto;
}
.ronda--vigente .ronda__cabeza { border-bottom-color: var(--arena-filete); }

/* Retrato y logo dentro de cada fila de resultado */
.resultado__cabeza {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.resultado__retrato {
  flex: none;
  width: 2.9rem;
  aspect-ratio: 4 / 5;          /* vertical, igual que la ficha de Candidatos */
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--papel);
  display: grid;
  place-items: center;
}
/* Cuando enlaza a la hoja de vida */
a.resultado__retrato--enlace {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.resultado__retrato--enlace:hover,
a.resultado__retrato--enlace:focus-visible {
  border-color: var(--violeta);
  box-shadow: 0 0 0 2px rgba(88, 74, 134, 0.25);
}
.resultado__retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.resultado__iniciales {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: #fff;
}
.resultado__nombre { flex: 1 1 auto; }
.resultado__nombre small {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.resultado__logo {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  flex: none;
}
.resultado--extra .resultado__nombre {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}
.resultado--extra { border-left-color: var(--tinta-tenue); }
.resultado--extra .resultado__cifra { font-size: 1.3rem; color: var(--tinta-suave); }

@media (max-width: 480px) {
  .resultado__retrato { width: 2.4rem; }
  .resultado__cifra { font-size: 1.8rem; }
}

/* ------------------------------------------------------------- fases */

.fases { display: flex; flex-direction: column; gap: 0.4rem; }
.fases__etiqueta {
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.fases__etiqueta.es-publicada { color: var(--bosque); font-weight: 600; }
.fases__segmentos {
  display: flex;
  gap: 3px;
  width: 8.5rem;
  max-width: 100%;
}
.fases__segmento {
  flex: 1 1 0;
  height: 6px;
  background: rgba(23, 33, 29, 0.12);
}
.fases__segmento.es-activo { background: var(--tinta-suave); }
.fases__segmento.es-activo.es-final { background: var(--bosque); }


/* ------------------------------------------------------------- boton */

.boton {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bruma-filete);
  color: #fff;
  border: 2px solid var(--bruma-filete);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.boton:hover, .boton:focus-visible {
  background: transparent;
  color: var(--bruma-filete);
}

/* ------------------------------------------- tabla sobre fondo lavado */

.seccion--bruma .rondas { background: var(--papel-alto); }
.seccion--bruma .rondas thead th {
  background: var(--bruma-filete);
  color: #fff;
  border: 0;
  padding: 0.7rem 1rem 0.7rem 0.9rem;
}
.seccion--bruma .rondas th,
.seccion--bruma .rondas td { padding-left: 0.9rem; }
.seccion--bruma .fases__segmento.es-activo { background: var(--bruma-filete); }
.seccion--bruma .fases__segmento.es-activo.es-final { background: var(--musgo-filete); }

/* Enlaces del pie */
.pie__enlaces a { color: var(--marca); }

/* ======================================================= aviso plegable */

.aviso__plegable { padding-block: 0.7rem; }
.aviso__resumen {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
}
.aviso__resumen::-webkit-details-marker { display: none; }
.aviso__resumen:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aviso__titulo { font-weight: 600; }
/* Flecha que gira al abrir */
.aviso__pista {
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.15rem;
  transition: transform 0.15s ease;
}
.aviso__plegable[open] .aviso__pista { transform: rotate(-135deg); }
.aviso__plegable .aviso__texto {
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 82ch;
  margin: 0.6rem 0 0.2rem 2.3rem;
}
.aviso__plegable .aviso__marca { margin-top: 0; }

/* ===================================================== acción de portada */

.portada__accion { margin-top: 1.75rem; }
.portada__pie {
  margin: 0.7rem 0 0;
  font-size: 0.87rem;
  color: #b9c2bc;
  max-width: 54ch;
}
/* Botón sobre el fondo oscuro de la portada */
.boton--claro {
  margin-top: 0;
  background: #7fb79c;
  border-color: #7fb79c;
  color: var(--tinta);
}
.boton--claro:hover, .boton--claro:focus-visible {
  background: transparent;
  color: #7fb79c;
}

/* ================================================== resultados cerrados */

.reservado {
  border: 1px solid var(--linea-fuerte);
  border-left: 7px solid var(--arena-filete);
  background: var(--papel-alto);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.reservado h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.reservado p { color: var(--tinta-suave); }
.reservado p:last-of-type { margin-bottom: 0; }
.reservado .boton { background: var(--arena-filete); border-color: var(--arena-filete); }
.reservado .boton:hover, .reservado .boton:focus-visible {
  background: transparent;
  color: var(--arena-filete);
}

/* Aviso que sólo ve el administrador */
.vista-previa {
  border: 1px dashed var(--arcilla);
  background: rgba(168, 68, 58, 0.06);
  color: var(--arcilla);
  font-size: 0.87rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  max-width: none;
}
.vista-previa code {
  background: rgba(0, 0, 0, 0.07);
  padding: 0.05rem 0.3rem;
  font-size: 0.92em;
}