/* =========================================================
   Sistema de diseño — Promoción Alfred Nobel, 25 años
   Paleta y motivo (la cinta/banner) tomados directamente del
   escudo real del colegio: rojo Perú, vino del borde, dorado
   de la cinta "SAN HILARION UGEL-05" y verde de los laureles.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --rojo-peru: #C8102E;
  --vino: #5B3550;
  --crema: #FBF6EC;
  --crema-2: #F3EADA;
  --dorado: #E3B23C;
  --verde-laurel: #2F6B47;
  --tinta: #241F1C;
  --tinta-suave: #5A5450;

  --display: 'Fraunces', serif;
  --cuerpo: 'Work Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radio: 14px;
  --sombra: 0 8px 24px rgba(36, 31, 28, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--cuerpo);
  line-height: 1.55;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  margin: 0 0 .4em 0;
  letter-spacing: -0.01em;
}

.contenedor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Barra superior ---------- */
.barra {
  background: var(--tinta);
  color: var(--crema);
}
.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.barra-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.barra-marca img { height: 40px; width: auto; }
.barra nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.barra nav a {
  text-decoration: none;
  font-size: .92rem;
  color: var(--crema-2);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.barra nav a:hover { border-color: var(--dorado); }
.btn-mini {
  background: var(--rojo-peru);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Cinta (motivo firma, tomado del banner del escudo) ---------- */
.cinta {
  position: relative;
  display: inline-block;
  background: var(--dorado);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 18px;
  clip-path: polygon(0% 0%, 100% 0%, 92% 50%, 100% 100%, 0% 100%, 8% 50%);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  border-bottom: 4px solid var(--rojo-peru);
  padding: 64px 0 48px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}
.hero-eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.02;
}
.hero h1 .num {
  color: var(--rojo-peru);
  display: block;
  font-size: 1.3em;
}
.hero p.lead {
  font-size: 1.05rem;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin: 14px 0 26px;
}
.hero-escudo {
  display: flex;
  justify-content: center;
}
.hero-escudo img {
  width: 100%;
  max-width: 260px;
  filter: drop-shadow(var(--sombra));
}

.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
}
.btn-primario { background: var(--rojo-peru); color: #fff; }
.btn-primario:hover { background: #a80d25; }
.btn-secundario { background: transparent; border-color: var(--vino); color: var(--vino); }
.btn-secundario:hover { background: var(--vino); color: #fff; }

/* ---------- Marcador / countdown ---------- */
.marcador {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.marcador .celda {
  background: var(--tinta);
  color: var(--crema);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 84px;
  text-align: center;
}
.marcador .celda .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--dorado);
  display: block;
}
.marcador .celda .etq {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--crema-2);
}

/* ---------- Secciones ---------- */
.seccion { padding: 56px 0; }
.seccion-titulo { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.seccion-titulo h2 { font-size: 1.7rem; }

/* ---------- Estadísticas de asistencia ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.stat {
  background: #fff;
  border: 1px solid var(--crema-2);
  border-left: 5px solid var(--verde-laurel);
  border-radius: var(--radio);
  padding: 18px 20px;
}
.stat .cifra { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--vino); }
.stat .etq { font-size: .84rem; color: var(--tinta-suave); }

/* ---------- Tarjetas de propuestas ---------- */
.propuestas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.propuesta {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.propuesta h3 { font-size: 1.05rem; }
.propuesta p { color: var(--tinta-suave); font-size: .92rem; margin: 0; }
.propuesta-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--tinta-suave);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--crema-2);
}
.puntaje { font-family: var(--mono); font-weight: 700; color: var(--rojo-peru); }

.votos { display: flex; gap: 8px; }
.voto-btn {
  border: 1px solid var(--crema-2);
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  font-size: .85rem;
}
.voto-btn.activo { background: var(--rojo-peru); color: #fff; border-color: var(--rojo-peru); }

/* ---------- Filtros de categoría ---------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filtro {
  text-decoration: none;
  font-size: .84rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--crema-2);
  color: var(--tinta);
  background: #fff;
}
.filtro.activo { background: var(--vino); border-color: var(--vino); color: #fff; }

/* ---------- Formularios ---------- */
.tarjeta-form {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px;
  max-width: 560px;
}
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #DCD3C4;
  border-radius: 8px;
  font-family: var(--cuerpo);
  font-size: .95rem;
  background: var(--crema);
}
.campo-check { display: flex; align-items: center; gap: 8px; }
.ayuda { font-size: .8rem; color: var(--tinta-suave); }

/* ---------- Galería ---------- */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.galeria-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--sombra);
}

/* ---------- Footer ---------- */
footer {
  background: var(--tinta);
  color: var(--crema-2);
  padding: 34px 0;
  margin-top: 40px;
  font-size: .85rem;
  text-align: center;
}

.mensajes { list-style: none; padding: 0; margin: 0 0 20px; }
.mensajes li {
  background: var(--dorado);
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: .9rem;
}

/* ---------- Música: tarjeta "sonando ahora" compacta ---------- */
.musica-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}
.musica-player { order: 2; }
.musica-lista-wrap { order: 1; }

.reproductor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--tinta);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
}
.reproductor-box {
  position: relative;
  width: 160px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.reproductor-box img,
.reproductor-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.reproductor-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}
.reproductor-info { color: var(--crema-2); min-width: 0; }
.reproductor-info .titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reproductor-box-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: var(--vino);
}
.reproductor-info .sub { font-size: .8rem; opacity: .78; margin: 0 0 2px; }
.reproductor-abrir {
  display: inline-block;
  margin-top: 8px;
  background: var(--rojo-peru);
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.musica-lista-wrap {
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px;
  min-height: 120px;
}
.musica-lista-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  margin: 4px 6px 10px;
  color: var(--vino);
}
.musica-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cancion-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--cuerpo);
  font-size: .88rem;
  cursor: pointer;
  color: var(--tinta);
  flex: 1;
  min-width: 0;
}
.cancion-item:hover { background: var(--crema-2); }
.cancion-item.activa { background: var(--rojo-peru); color: #fff; font-weight: 600; }
.cancion-autor {
  font-size: .76rem;
  opacity: .7;
  font-weight: 400;
  display: block;
}

.cancion-fila {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cancion-borrar-form { flex-shrink: 0; }
.cancion-borrar {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: .55;
}
.cancion-borrar:hover { opacity: 1; background: var(--crema-2); }

@media (max-width: 760px) {
  .musica-layout { grid-template-columns: 1fr; }
  .musica-lista { max-height: 260px; }
}

/* ---------- Directorio de compañeros ---------- */
.directorio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 18px;
}
.persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.persona img, .persona-sin-foto {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sombra);
}
.persona-sin-foto {
  background: var(--vino);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.6rem;
}
.persona span { font-size: .84rem; font-weight: 600; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-escudo { order: -1; }
}

/* =========================================================
   V2 — navegación lateral + jukebox colaborativa
   ========================================================= */
.sitio-layout {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
.sitio-contenido {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sitio-contenido main { flex: 1; }

.barra {
  width: 248px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-shrink: 0;
  background: var(--tinta);
  color: var(--crema);
  z-index: 20;
}
.barra-contenido {
  min-height: 100vh;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
}
.barra-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.barra-marca img { width: 46px; height: 46px; object-fit: contain; }
.barra-marca small {
  font-family: var(--cuerpo);
  font-size: .72rem;
  font-weight: 500;
  opacity: .7;
}
.barra nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-top: 20px;
}
.barra nav a {
  display: block;
  border: 0;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--crema-2);
  text-decoration: none;
  font-size: .91rem;
}
.barra nav a:hover,
.barra nav a.activo {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 0;
}
.barra nav a.activo { box-shadow: inset 3px 0 0 var(--dorado); }
.barra-cuenta {
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cuenta-nombre {
  color: var(--crema-2);
  text-decoration: none;
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-cuenta .btn-mini { text-align: center; text-decoration: none; }
.mensajes-wrap { margin-top: 20px; }

button.btn { cursor: pointer; }
.campo input[type="url"],
.campo input[type="tel"],
.campo input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #DCD3C4;
  border-radius: 8px;
  font-family: var(--cuerpo);
  font-size: .95rem;
  background: var(--crema);
}
.form-error {
  color: var(--rojo-peru);
  font-size: .82rem;
  margin: 7px 0 0;
}
.form-error ul { margin: 0; padding-left: 18px; }

/* Jukebox */
.musica-seccion { padding-top: 42px; }
.musica-encabezado { margin-bottom: 8px; }
.musica-intro { max-width: 780px; margin: 0 0 24px; }
.jukebox-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: 22px;
  align-items: start;
}
.jukebox-player {
  min-width: 0;
  background: var(--tinta);
  color: var(--crema-2);
  border-radius: 18px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.jukebox-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
}
.jukebox-kicker {
  display: block;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .10em;
  color: var(--dorado);
  margin-bottom: 4px;
}
.jukebox-player-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.2;
}
.jukebox-player-head p {
  margin: 5px 0 0;
  font-size: .82rem;
  opacity: .72;
}
.jukebox-posicion,
.cola-justa {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .72rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 6px 9px;
}
.player-panel { background: #0b0b0b; }
.youtube-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.youtube-stage > img,
.youtube-stage > iframe,
.youtube-stage > #reproductor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.reproductor-play-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.34);
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  z-index: 3;
}
.spotify-stage { min-height: 152px; padding: 12px 12px 0; }
.spotify-stage iframe { border-radius: 12px; }
.audio-stage {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  background: linear-gradient(145deg, #171412, #34242e);
}
.audio-icon { font-size: 3.2rem; }
.audio-stage audio { width: min(520px, 100%); }
.player-status {
  margin: 0;
  padding: 9px 16px;
  font-size: .75rem;
  color: rgba(255,255,255,.68);
}
.jukebox-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px 7px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.control-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.control-btn:hover { background: rgba(255,255,255,.14); }
.control-btn-main { width: 48px; height: 48px; }
.jukebox-start { margin-left: auto; padding: 10px 18px; font-size: .84rem; }

.musica-lista-wrap {
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 0;
  min-height: 160px;
  overflow: hidden;
}
.cola-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 14px 11px;
  border-bottom: 1px solid var(--crema-2);
}
.cola-cabecera .jukebox-kicker { color: var(--rojo-peru); }
.musica-lista-titulo { margin: 0; font-size: 1rem; color: var(--vino); }
.cola-justa { color: var(--verde-laurel); border-color: rgba(47,107,71,.2); background: rgba(47,107,71,.07); }
.musica-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 570px;
  overflow-y: auto;
}
.cancion-fila {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid #eee6da;
}
.cancion-fila:last-child { border-bottom: 0; }
.cancion-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 11px 12px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  text-align: left;
  font-family: var(--cuerpo);
}
.cancion-item:hover { background: var(--crema); }
.cancion-item.activa {
  background: #fff0f2;
  color: var(--tinta);
  box-shadow: inset 4px 0 0 var(--rojo-peru);
}
.cancion-titulo-linea {
  width: 100%;
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
}
.cancion-titulo-linea > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plataforma-icono { flex-shrink: 0; font-size: .8rem; }
.cancion-autor {
  display: block;
  width: 100%;
  padding-left: 22px;
  font-size: .73rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cancion-borrar-form { display: flex; align-items: center; padding-right: 5px; }
.cancion-borrar {
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .48;
  padding: 9px;
  border-radius: 8px;
}
.cancion-borrar:hover { opacity: 1; background: #fff0f2; }

.agregar-musica {
  margin-top: 28px;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--sombra);
}
.agregar-musica-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.agregar-musica-head .jukebox-kicker { color: var(--rojo-peru); }
.agregar-musica-head h3 { margin: 0; }
.cupo-musica {
  min-width: 78px;
  text-align: center;
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--crema-2);
}
.cupo-musica strong { display: block; font-family: var(--mono); color: var(--vino); }
.cupo-musica span { display: block; font-size: .68rem; color: var(--tinta-suave); }
.cupo-musica.cupo-lleno { background: #ffe4e8; }
.musica-form {
  box-shadow: none;
  padding: 14px 0 0;
  max-width: none;
}
.limite-aviso {
  margin-top: 14px;
  padding: 13px 15px;
  background: #fff0f2;
  color: #8d1830;
  border-radius: 10px;
  font-size: .88rem;
}
.jukebox-vacia {
  text-align: center;
  background: #fff;
  padding: 44px 20px;
  border-radius: 18px;
  border: 1px solid var(--crema-2);
  box-shadow: var(--sombra);
}
.jukebox-vacia > span { font-size: 2.6rem; }
.jukebox-vacia h3 { margin-top: 8px; }
.login-musica { margin-top: 24px; }

/* Directorio privado */
.seccion-cabecera-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.directorio-intro { margin-top: -14px; margin-bottom: 22px; }
.directorio-grid-detalle {
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px;
}
.persona-detalle {
  align-items: stretch;
  text-align: left;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--sombra);
}
.persona-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
}
.persona-cabecera h3 { margin: 0; font-size: 1rem; }
.persona-cabecera img,
.persona-cabecera .persona-sin-foto { width: 66px; height: 66px; flex-shrink: 0; }
.persona-usuario { display: block; font-size: .74rem; color: var(--tinta-suave); }
.persona-badge,
.persona-comite {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .68rem;
  background: var(--crema-2);
  color: var(--vino);
}
.persona-datos { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--crema-2); }
.persona-datos p { margin: 5px 0; font-size: .79rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.persona-bio { font-style: italic; }
.persona-comite { background: rgba(47,107,71,.10); color: var(--verde-laurel); font-weight: 600; }
.perfil-form { margin-top: 20px; }

@media (max-width: 980px) {
  .barra { width: 210px; }
  .jukebox-shell { grid-template-columns: 1fr; }
  .musica-lista { max-height: 360px; }
}

@media (max-width: 760px) {
  .sitio-layout { display: block; }
  .barra {
    width: 100%;
    min-height: 0;
    position: static;
  }
  .barra-contenido { min-height: 0; padding: 12px 14px; }
  .barra-marca { padding: 0 2px 10px; border: 0; }
  .barra-marca img { width: 36px; height: 36px; }
  .barra nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin-top: 4px;
    padding-bottom: 5px;
  }
  .barra nav a { white-space: nowrap; padding: 8px 10px; background: rgba(255,255,255,.05); }
  .barra nav a.activo { box-shadow: inset 0 -3px 0 var(--dorado); }
  .barra-cuenta {
    margin-top: 6px;
    padding: 8px 2px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .barra-cuenta .btn-mini { padding: 6px 12px; }
  .jukebox-player-head { padding: 15px; }
  .jukebox-player-head h3 { font-size: 1.12rem; }
  .jukebox-controls { flex-wrap: wrap; }
  .jukebox-start { width: 100%; margin: 4px 0 0; text-align: center; }
  .seccion-cabecera-flex { align-items: flex-start; flex-direction: column; }
  .directorio-intro { margin-top: 0; }
}

/* =========================================================
   V3 — Propuestas tipo bitácora + compañeros simples
   ========================================================= */
.propuestas-bitacora-seccion { padding-top: 42px; }
.propuestas-cabecera { margin-bottom: 18px; }
.propuestas-cabecera .seccion-titulo { margin-bottom: 7px; }
.bitacora-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
}
.bitacora-propuesta {
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 16px;
  box-shadow: var(--sombra);
  overflow: hidden;
  scroll-margin-top: 20px;
}
.bitacora-principal {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px 13px;
}
.avatar {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vino);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-autor { width: 50px; height: 50px; font-size: 1.15rem; }
.avatar-mini {
  width: 32px;
  height: 32px;
  font-size: .78rem;
  border: 2px solid #fff;
  margin-left: -7px;
  box-shadow: 0 1px 4px rgba(36,31,28,.13);
}
.avatar-mini:first-child { margin-left: 0; }
.avatar-comentario { width: 38px; height: 38px; font-size: .82rem; }
.avatar-mas {
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  margin-left: -7px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--crema-2);
  color: var(--vino);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
}
.bitacora-superior {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 5px;
}
.bitacora-categoria {
  color: var(--rojo-peru);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bitacora-fecha { color: var(--tinta-suave); font-size: .72rem; white-space: nowrap; }
.bitacora-contenido h3 { font-size: 1.18rem; margin: 0 0 4px; }
.bitacora-descripcion { margin: 4px 0 7px; color: var(--tinta-suave); font-size: .9rem; }
.bitacora-autor { color: var(--tinta-suave); font-size: .76rem; }
.opiniones-resumen {
  min-height: 48px;
  padding: 7px 20px 10px 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.avatares-opinadores { min-height: 32px; display: flex; align-items: center; }
.sin-opiniones { color: var(--tinta-suave); font-size: .76rem; }
.contador-opiniones {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--vino);
}
.opiniones-panel { border-top: 1px solid var(--crema-2); }
.opiniones-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--vino);
  background: #fffdfa;
  user-select: none;
}
.opiniones-panel > summary::-webkit-details-marker { display: none; }
.opiniones-panel > summary::before {
  content: '▸';
  margin-right: 8px;
  color: var(--rojo-peru);
}
.opiniones-panel[open] > summary::before { content: '▾'; }
.opiniones-panel > summary span:first-child { margin-right: auto; }
.summary-contador {
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--crema-2);
  color: var(--vino);
  font-family: var(--mono);
  font-size: .68rem;
}
.opiniones-cuerpo { background: var(--crema); padding: 16px 20px 18px; }
.comentarios-lista { display: flex; flex-direction: column; gap: 11px; }
.comentario-bitacora { display: flex; align-items: flex-start; gap: 10px; }
.comentario-burbuja {
  min-width: 0;
  flex: 1;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 4px 12px 12px 12px;
  padding: 9px 11px;
}
.comentario-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}
.comentario-meta strong { font-size: .8rem; }
.comentario-meta time { font-size: .67rem; color: var(--tinta-suave); white-space: nowrap; }
.comentario-burbuja p { margin: 0; font-size: .84rem; color: var(--tinta); }
.comentario-vacio { margin: 0; }
.opinion-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5dccd;
}
.opinion-form-campo { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: stretch; }
.opinion-form textarea {
  min-width: 0;
  flex: 1;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #d8cdbc;
  border-radius: 9px;
  font-family: var(--cuerpo);
  font-size: .86rem;
  background: #fff;
}
.opinion-form .btn { padding: 9px 16px; align-self: flex-end; }
.bitacora-vacia {
  max-width: 700px;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 14px;
  padding: 26px;
}
.opcional { color: var(--tinta-suave); font-weight: 400; }

/* Directorio reducido a Nombre + Foto */
.directorio-simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.companero-simple {
  min-height: 185px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 14px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.companero-simple img,
.companero-sin-foto {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
}
.companero-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vino);
  color: #fff;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
}
.companero-simple strong { font-size: .9rem; line-height: 1.25; }
.perfil-simple-wrap { max-width: 720px; }
.perfil-foto-actual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 2px;
  color: var(--tinta-suave);
  font-size: .8rem;
}
.perfil-foto-actual img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

@media (max-width: 760px) {
  .bitacora-principal { grid-template-columns: 44px minmax(0,1fr); padding: 15px; gap: 10px; }
  .avatar-autor { width: 42px; height: 42px; }
  .opiniones-resumen { padding-left: 69px; padding-right: 15px; }
  .bitacora-superior { align-items: flex-start; flex-direction: column; gap: 2px; }
  .opinion-form-campo { flex-direction: column; }
  .opinion-form .btn { width: 100%; text-align: center; }
  .opiniones-cuerpo { padding: 14px 15px 16px; }
  .directorio-simple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .companero-simple { min-height: 160px; padding: 14px 8px; }
  .companero-simple img, .companero-sin-foto { width: 88px; height: 88px; }
}

/* =========================================================
   V4 — Menos es más: propuestas tipo registro, directorio
   compacto y asistencia simplificada.
   ========================================================= */
.propuestas-simple-seccion { padding-top: 38px; }
.propuestas-simple-cabecera,
.directorio-compacto-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.propuestas-simple-cabecera .seccion-titulo,
.directorio-compacto-cabecera .seccion-titulo { margin-bottom: 4px; }
.filtros-compactos { margin: 10px 0 16px; }

.propuestas-registro {
  max-width: 980px;
  background: #fff;
  border: 1px solid #e4dacb;
  border-radius: 12px;
  overflow: hidden;
}
.registro-propuesta + .registro-propuesta { border-top: 1px solid #e9e0d4; }
.registro-fila {
  display: grid;
  grid-template-columns: 48px 175px minmax(0,1fr) 86px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.registro-fila-principal { padding: 12px 14px; }
.registro-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vino);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  flex-shrink: 0;
}
.registro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.registro-avatar-respuesta { width: 36px; height: 36px; font-size: .78rem; }
.registro-nombre { min-width: 0; line-height: 1.2; }
.registro-nombre strong { display: block; font-size: .86rem; overflow-wrap: anywhere; }
.registro-nombre small { display: block; margin-top: 3px; color: var(--tinta-suave); font-size: .68rem; }
.registro-texto { min-width: 0; font-size: .9rem; color: var(--tinta); }
.registro-texto span { overflow-wrap: anywhere; }
.registro-texto small { display: block; margin-top: 3px; color: var(--tinta-suave); }
.registro-fecha {
  text-align: right;
  color: var(--tinta-suave);
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1.35;
  white-space: nowrap;
}
.registro-fecha span { color: #8c8179; }

.respuestas-desplegable { border-top: 1px solid #f0e8dd; }
.respuestas-desplegable > summary {
  min-height: 38px;
  padding: 6px 14px 6px 74px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  background: #fffdf9;
  color: var(--vino);
  font-size: .78rem;
  user-select: none;
}
.respuestas-desplegable > summary::-webkit-details-marker { display: none; }
.respuestas-desplegable > summary::before { content: '▸'; margin-right: 7px; color: var(--rojo-peru); }
.respuestas-desplegable[open] > summary::before { content: '▾'; }
.respuestas-etiqueta { margin-right: auto; font-weight: 600; }
.respuestas-caritas { display: flex; align-items: center; min-height: 26px; }
.mini-cara,
.mini-mas {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-left: -6px;
  border: 2px solid #fff;
  background: var(--vino);
  color: #fff;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
}
.mini-cara:first-child { margin-left: 0; }
.mini-cara img { width: 100%; height: 100%; object-fit: cover; }
.mini-mas { width: auto; min-width: 26px; padding: 0 5px; background: var(--crema-2); color: var(--vino); }
.respuestas-contenido { background: #faf6ef; }
.registro-respuesta {
  padding: 10px 14px 10px 74px;
  grid-template-columns: 38px 175px minmax(0,1fr) 86px;
  border-top: 1px solid #eee4d7;
}
.sin-respuestas { padding: 12px 14px 12px 74px; color: var(--tinta-suave); font-size: .8rem; }
.respuesta-rapida {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px 74px;
  border-top: 1px solid #e6dccf;
}
.respuesta-rapida textarea {
  width: 100%;
  min-height: 40px;
  resize: vertical;
  border: 1px solid #d6caba;
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  font: inherit;
  font-size: .82rem;
}
.respuesta-rapida .btn { padding: 9px 15px; }

/* Compañeros: solo círculo + nombre, sin tarjetas grandes. */
.directorio-compacto-seccion { padding-top: 38px; }
.companeros-lista-simple {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 12px;
  max-width: 980px;
}
.companero-fila-simple {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 10px;
  border-bottom: 1px solid #e7ddcf;
}
.companero-fila-simple img,
.companero-inicial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.companero-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vino);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.companero-fila-simple strong { font-size: .87rem; line-height: 1.2; }

/* Asistencia: tres opciones y nada más. */
.asistencia-simple-wrap { max-width: 650px; }
.asistencia-simple-form {
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 14px;
  padding: 20px;
}
.asistencia-opciones { display: grid; gap: 9px; margin-bottom: 18px; }
.asistencia-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #ddd1c1;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  background: #fffdf9;
}
.asistencia-opcion:hover { border-color: var(--dorado); }
.asistencia-opcion input { width: 18px; height: 18px; accent-color: var(--rojo-peru); }

@media (max-width: 760px) {
  .propuestas-simple-cabecera,
  .directorio-compacto-cabecera { align-items: flex-start; flex-direction: column; }
  .registro-fila,
  .registro-respuesta {
    grid-template-columns: 42px minmax(0,1fr) 72px;
    gap: 8px;
  }
  .registro-fila-principal { padding: 10px; }
  .registro-avatar { width: 40px; height: 40px; }
  .registro-nombre { grid-column: 2; }
  .registro-texto { grid-column: 2 / 4; padding-top: 2px; }
  .registro-fecha { grid-column: 3; grid-row: 1; }
  .respuestas-desplegable > summary { padding-left: 60px; }
  .registro-respuesta { padding: 9px 10px 9px 60px; }
  .registro-respuesta .registro-texto { grid-column: 2 / 4; }
  .sin-respuestas { padding-left: 60px; }
  .respuesta-rapida {
    padding: 10px 10px 12px 60px;
    grid-template-columns: 34px minmax(0,1fr);
  }
  .respuesta-rapida .registro-avatar { width: 34px; height: 34px; }
  .respuesta-rapida .btn { grid-column: 2; justify-self: start; }
  .companeros-lista-simple { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .companeros-lista-simple { grid-template-columns: 1fr; }
  .respuestas-caritas { display: none; }
}

.home-propuestas-simple {
  max-width: 980px;
  background: #fff;
  border: 1px solid #e4dacb;
  border-radius: 12px;
  overflow: hidden;
}
.home-propuesta-fila {
  display: grid;
  grid-template-columns: 38px 170px minmax(0,1fr) 120px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  border-bottom: 1px solid #ece3d7;
}
.home-propuesta-fila:last-child { border-bottom: 0; }
.home-propuesta-fila:hover { background: #fffaf3; }
.home-propuesta-fila img,
.home-propuesta-inicial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.home-propuesta-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vino);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.home-propuesta-fila strong { font-size: .82rem; }
.home-propuesta-texto { font-size: .88rem; }
.home-propuesta-fila time { text-align: right; font-family: var(--mono); font-size: .64rem; color: var(--tinta-suave); }

@media (max-width: 760px) {
  .home-propuesta-fila { grid-template-columns: 36px minmax(0,1fr) 92px; }
  .home-propuesta-texto { grid-column: 2 / 4; }
}

/* =========================================================
   V7 — Visor de fotos + estado de asistencia compacto
   ========================================================= */
.foto-ampliable {
  cursor: zoom-in;
}

.visor-foto {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 9, 8, .90);
  backdrop-filter: blur(3px);
}
.visor-foto.abierto { display: flex; }
.visor-foto img {
  display: block;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.visor-foto-cerrar {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.visor-foto-cerrar:hover { background: rgba(255,255,255,.22); }
body.visor-foto-activo { overflow: hidden; }

.asistencia-listado-wrap {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--crema-2);
  border-radius: 14px;
  overflow: hidden;
}
.asistencia-listado-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #e9dfd2;
  background: #fffdf9;
}
.asistencia-listado-cabecera h3 {
  margin: 0;
  font-size: 1rem;
}
.asistencia-listado-cabecera span {
  color: var(--tinta-suave);
  font-size: .74rem;
}
.asistencia-listado {
  display: flex;
  flex-direction: column;
}
.asistencia-fila {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 8px 13px;
  border-bottom: 1px solid #eee5d9;
}
.asistencia-fila:last-child { border-bottom: 0; }
.asistencia-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vino);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
}
.asistencia-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asistencia-nombre {
  min-width: 0;
  font-size: .88rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.asistencia-condicion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}
.condicion-solo,
.condicion-pareja {
  color: #27613e;
  background: rgba(47,107,71,.10);
  border: 1px solid rgba(47,107,71,.18);
}
.condicion-virtual {
  color: #24567a;
  background: rgba(48,112,158,.10);
  border: 1px solid rgba(48,112,158,.18);
}
.condicion-no {
  color: #9a2334;
  background: rgba(210,17,48,.08);
  border: 1px solid rgba(210,17,48,.16);
}
.asistencia-vacia {
  margin: 0;
  padding: 18px 15px;
  color: var(--tinta-suave);
  font-size: .84rem;
}

@media (max-width: 520px) {
  .visor-foto { padding: 18px; }
  .asistencia-fila { grid-template-columns: 44px minmax(0,1fr); }
  .asistencia-condicion {
    grid-column: 2;
    justify-self: start;
    margin-top: -5px;
  }
}

/* =========================================================
   V8 — Roles, gestión compacta y galería tipo collage
   ========================================================= */
.directorio-acciones-cabecera,
.form-acciones-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.roles-ayuda { margin: -2px 0 14px; }
.companero-identidad {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.companero-identidad img,
.companero-identidad .companero-inicial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.companero-nombre-wrap { min-width: 0; }
.companero-nombre-wrap strong { display: block; font-size: .87rem; line-height: 1.2; }
.companero-nombre-wrap small { display: block; margin-top: 3px; color: var(--tinta-suave); font-size: .68rem; }
.companeros-lista-gestion {
  grid-template-columns: 1fr;
  max-width: 1120px;
}
.companeros-lista-gestion .companero-fila-simple {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(300px, auto) auto;
  gap: 14px;
  min-height: 62px;
}
.roles-inline { min-width: 0; }
.rol-form-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rol-form-inline label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.rol-form-inline input { accent-color: var(--rojo-peru); }
.rol-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}
.rol-admin { color: #8b1d2f; background: rgba(210,17,48,.08); border: 1px solid rgba(210,17,48,.17); }
.rol-editor { color: #6b4a12; background: rgba(217,164,42,.12); border: 1px solid rgba(217,164,42,.25); }
.rol-usuario { color: #315d43; background: rgba(47,107,71,.09); border: 1px solid rgba(47,107,71,.18); }
.usuario-acciones-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.usuario-acciones-inline form { margin: 0; }
.accion-mini,
.accion-boton {
  border: 0;
  background: transparent;
  padding: 4px 2px;
  color: var(--vino);
  font: inherit;
  font-size: .69rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.accion-mini:hover,
.accion-boton:hover { text-decoration: underline; }
.usuario-inactivo { opacity: .55; }
.campo-rol > div {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.campo-rol > div > div label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.campo-rol input { accent-color: var(--rojo-peru); }

.cuenta-rol {
  display: inline-block;
  margin: -2px 0 5px;
  color: var(--dorado);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cuenta-link {
  color: rgba(255,255,255,.72);
  font-size: .69rem;
  text-decoration: none;
  margin-bottom: 7px;
}
.cuenta-link:hover { color: #fff; }
.volver-admin-form { margin: 0; }
.btn-volver-admin { width: 100%; }

.asistencia-persona { min-width: 0; }
.asistencia-persona small {
  display: block;
  margin-top: 3px;
  color: var(--tinta-suave);
  font-family: var(--mono);
  font-size: .62rem;
}
.asistencia-gestion-form { margin: 0; }
.asistencia-gestion-form select {
  min-width: 118px;
  padding: 7px 9px;
  border: 1px solid #d8cdbf;
  border-radius: 8px;
  background: #fffdf9;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
}

.registro-fecha-acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}
.registro-eliminar {
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .45;
  padding: 3px;
  font-size: .74rem;
}
.registro-eliminar:hover { opacity: 1; }

.cancion-editar {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--vino);
  text-decoration: none;
  font-weight: 800;
  opacity: .58;
}
.cancion-editar:hover { opacity: 1; background: var(--crema-2); }

/* Galería: cada foto es independiente; Antes y Ahora forman dos collages. */
.galeria-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.galeria-cabecera .seccion-titulo { margin-bottom: 0; }
.galeria-collage {
  columns: 4 220px;
  column-gap: 12px;
}
.galeria-foto {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  break-inside: avoid;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sombra);
}
.galeria-foto > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}
.galeria-foto figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: var(--tinta-suave);
  font-size: .68rem;
}
.galeria-foto figcaption form { margin: 0 0 0 auto; }
.galeria-foto figcaption button {
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}
.galeria-foto figcaption button:hover { opacity: 1; }

@media (max-width: 900px) {
  .companeros-lista-gestion .companero-fila-simple {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, auto);
  }
  .usuario-acciones-inline { grid-column: 1 / -1; justify-content: flex-start; padding-left: 54px; }
}

@media (max-width: 680px) {
  .directorio-acciones-cabecera,
  .galeria-cabecera { align-items: flex-start; flex-direction: column; }
  .companeros-lista-gestion .companero-fila-simple { grid-template-columns: 1fr; }
  .roles-inline,
  .usuario-acciones-inline { padding-left: 54px; }
  .usuario-acciones-inline { grid-column: auto; }
  .rol-form-inline { gap: 10px; }
  .asistencia-fila-gestion { grid-template-columns: 44px minmax(0,1fr); }
  .asistencia-gestion-form { grid-column: 2; }
  .galeria-collage { columns: 2 150px; column-gap: 9px; }
  .galeria-foto { margin-bottom: 9px; }
}

/* =========================================================
   V10 — Ubicación del reencuentro
   ========================================================= */
.ubicacion-seccion { padding-top: 42px; }
.ubicacion-titulo {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.ubicacion-titulo h1 {
  margin: -3px 0 4px;
  font-size: clamp(1.8rem, 3.5vw, 2.55rem);
}
.ubicacion-titulo p { margin: 0; color: var(--tinta-suave); }

.ubicacion-datos {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}
.ubicacion-fachada-card,
.ubicacion-info-card,
.ubicacion-mapa-card {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 18px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ubicacion-fachada-card { margin: 0; }
.ubicacion-fachada-link {
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  background: #ddd;
}
.ubicacion-fachada-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 73% 52%;
  display: block;
  transition: transform .25s ease;
}
.ubicacion-fachada-link:hover img { transform: scale(1.02); }
.ubicacion-fachada-etiqueta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(36,31,28,.90);
  color: #fff;
  font-weight: 600;
  font-size: .84rem;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.ubicacion-foto-nota {
  margin: 0;
  padding: 10px 16px 12px;
  color: var(--tinta-suave);
  font-size: .73rem;
}
.ubicacion-info-card {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ubicacion-kicker {
  display: block;
  font-family: var(--mono);
  color: var(--rojo-peru);
  font-size: .67rem;
  letter-spacing: .11em;
  font-weight: 700;
  margin-bottom: 4px;
}
.ubicacion-info-card h2,
.ubicacion-mapa-head h2 { margin: 0; }
.ubicacion-info-card h2 { font-size: 1.75rem; }
.ubicacion-direccion {
  margin: 12px 0 3px;
  font-weight: 600;
}
.ubicacion-coordenadas {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--tinta-suave);
}
.ubicacion-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.ubicacion-btn {
  width: 100%;
  padding: 10px 12px;
  text-align: center;
  font-size: .82rem;
  cursor: pointer;
}
button.ubicacion-btn { font-family: var(--cuerpo); }
.ubicacion-ayuda {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: var(--verde-laurel);
  font-size: .76rem;
}

.ubicacion-mapa-card { padding: 18px; }
.ubicacion-mapa-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 0 2px 14px;
}
.ubicacion-mapa-hint {
  font-size: .75rem;
  color: var(--tinta-suave);
  text-align: right;
}
#mapa-reencuentro {
  width: 100%;
  height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: #ddd;
  border: 1px solid #ded4c5;
  z-index: 1;
}
.ubicacion-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 11px 2px 0;
  font-size: .75rem;
  color: var(--tinta-suave);
}
#mapa-reencuentro .leaflet-popup-content-wrapper,
#mapa-reencuentro .leaflet-control-layers {
  font-family: var(--cuerpo);
}

@media (max-width: 900px) {
  .ubicacion-datos { grid-template-columns: 1fr; }
  .ubicacion-fachada-link { height: 310px; }
  #mapa-reencuentro { height: 460px; }
}

@media (max-width: 620px) {
  .ubicacion-titulo { display: block; }
  .ubicacion-titulo .cinta { margin-bottom: 14px; }
  .ubicacion-info-card { padding: 20px; }
  .ubicacion-acciones { grid-template-columns: 1fr; }
  .ubicacion-mapa-head { display: block; }
  .ubicacion-mapa-hint { text-align: left; margin-top: 7px; display: block; }
  #mapa-reencuentro { height: 390px; }
  .ubicacion-fachada-link { height: 260px; }
}


/* =========================================================
   V13 — Tema libre en propuestas + foto de sesión en sidebar
   ========================================================= */
.tema-libre[hidden] { display: none !important; }

.cuenta-resumen {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cuenta-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.cuenta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cuenta-identidad {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}
.cuenta-identidad .cuenta-nombre {
  display: block;
  color: var(--crema-2);
}
.cuenta-identidad .cuenta-rol {
  margin: 0;
}

@media (max-width: 900px) {
  .cuenta-resumen { max-width: 55%; }
  .cuenta-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .cuenta-identidad .cuenta-rol { display: none; }
}


/* =========================================================
   V14 — Registro público local
   ========================================================= */
.registro-login-invitacion {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eadfd1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: .8rem;
}
.registro-login-invitacion .btn { text-align: center; }
.campo-check-login {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.campo-check-login label { margin: 0; }
.registro-publico-form .ayuda { margin: 5px 0 0; }


/* =========================================================
   V16 — Inicio compacto + resumen correcto de asistencia
   ========================================================= */
.home-companeros-publicos-seccion {
  padding: 34px 0 42px;
  border-top: 3px solid var(--rojo-peru);
}
.home-companeros-publicos-seccion .contenedor {
  max-width: 900px;
}
.home-companeros-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 18px;
}
.home-companero-publico {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 56px;
  padding: 6px 0;
  border-bottom: 1px solid #e7ddcf;
  overflow: hidden;
}
.home-companero-publico img.foto-ampliable,
.home-companero-inicial {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}
.home-companero-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--vino);
  font-family: var(--display);
  font-weight: 700;
}
.home-companero-publico strong {
  min-width: 0;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companero-nombre-real {
  color: var(--rojo-peru) !important;
  font-size: .68rem !important;
  line-height: 1.2;
}
.companero-estado-cuenta {
  color: var(--tinta-suave) !important;
  font-size: .64rem !important;
}
.accion-peligro {
  color: #a10e25 !important;
  border-color: rgba(161,14,37,.28) !important;
  background: rgba(210,17,48,.05) !important;
}
.accion-peligro:hover {
  color: #fff !important;
  background: #a10e25 !important;
  border-color: #a10e25 !important;
}

.asistencia-simple-wrap { max-width: 980px; }
.asistencia-titulo { margin-bottom: 12px; }
.asistencia-simple-seccion .asistencia-titulo h2 { font-size: 1.35rem; }
.asistencia-superior-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
  align-items: start;
}
.asistencia-simple-form-compacta {
  padding: 14px;
}
.asistencia-opciones-compactas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}
.asistencia-opciones-compactas .asistencia-opcion {
  min-height: 44px;
  padding: 8px 10px;
  font-size: .84rem;
}
.asistencia-simple-form-compacta .btn {
  min-height: 42px;
  padding: 9px 18px;
}
.asistencia-resumen-card {
  background: #fff;
  border: 1px solid #dfd3c3;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.asistencia-resumen-card h3 {
  margin: 0;
  padding: 11px 13px;
  font-size: .92rem;
  background: #fffaf3;
  border-bottom: 1px solid #dfd3c3;
}
.asistencia-resumen-tabla {
  display: flex;
  flex-direction: column;
}
.asistencia-resumen-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #e8ded1;
}
.asistencia-resumen-fila:last-child { border-bottom: 0; }
.asistencia-resumen-fila span {
  padding: 7px 11px;
  font-size: .78rem;
  line-height: 1.15;
}
.asistencia-resumen-fila strong {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e8ded1;
  font-family: var(--display);
  color: var(--vino);
  font-size: 1rem;
  background: #fffdf9;
}
.asistencia-resumen-fila.principal span,
.asistencia-resumen-fila.principal strong {
  font-weight: 800;
  background: #fff8eb;
}

@media (max-width: 900px) {
  .home-companeros-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asistencia-superior-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .home-companeros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asistencia-opciones-compactas { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .home-companeros-grid { grid-template-columns: 1fr; }
}