/* =========================================================================
   Museo Sitio de Memoria ESMA — Prototipo de reservas de visitas guiadas
   Paleta e identidad tomadas del tema real del sitio (Enfold).
   ========================================================================= */

:root {
  --c-negro:        #231f20;
  --c-marron:       #584a48; /* principal / títulos */
  --c-taupe:        #918565; /* acento cálido */
  --c-terracota:    #a66156; /* acento / feriados */
  --c-teal:         #88bbc8; /* acento secundario */
  --c-bg:           #f5f4f2;
  --c-panel:        #ffffff;
  --c-borde:        #e3e0dc;
  --c-borde-fuerte: #cfc9c2;
  --c-texto:        #2b2724;
  --c-texto-suave:  #6b6560;
  --c-ok:           #4f7a5b;
  --c-ok-bg:        #e8f0ea;
  --c-alerta:       #a66156;
  --c-alerta-bg:    #f6e9e5;
  --sombra:         0 1px 3px rgba(35,31,32,.08), 0 6px 20px rgba(35,31,32,.05);
  --radio:          8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--c-texto);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--c-negro); font-weight: 700; line-height: 1.2; letter-spacing: -.2px; }
h2 { font-size: 1.35rem; margin: 0 0 .35rem; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--c-terracota); }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: #fff;
  color: var(--c-negro);
  padding: .9rem 1.8rem;
  border-bottom: 1px solid var(--c-borde);
}
.cabecera__marca { display: flex; align-items: center; gap: .9rem; }
.cabecera__logo { height: 52px; width: auto; display: block; }
.cabecera__titulos { display: flex; flex-direction: column; }
.cabecera__nombre { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; color: var(--c-negro); }
.cabecera__sub { font-size: .8rem; color: var(--c-texto-suave); }

.cabecera__nav { display: flex; gap: .6rem; }
.modo-btn {
  border: 1px solid transparent; background: transparent; color: var(--c-negro);
  padding: .5rem 1rem; border-radius: 2px; cursor: pointer;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; transition: .15s;
}
.modo-btn:hover { color: var(--c-terracota); }
.modo-btn.is-activo { border-color: var(--c-negro); color: var(--c-negro); }

/* ---------- Layout general ---------- */
.contenido { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.5rem 3rem; }
.intro { margin-bottom: 1.4rem; }
.intro p { color: var(--c-texto-suave); max-width: 62ch; }

.grid-2 { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.05fr); gap: 1.4rem; align-items: start; }
@media (max-width: 880px){ .grid-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--c-panel);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.15rem 1.2rem;
}
.panel + .panel { margin-top: 1.2rem; }
.panel__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }

/* ---------- Calendario ---------- */
.cal__barra { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal__mes { font-weight: 700; color: var(--c-marron); text-transform: capitalize; font-size: 1.05rem; }
.cal__nav { display: flex; gap: .35rem; }
.cal__nav button {
  border: 1px solid var(--c-borde-fuerte); background: #fff; color: var(--c-marron);
  width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.cal__nav button:hover { background: var(--c-bg); }

/* minmax(0,1fr) permite que las columnas se achiquen: el contenido largo no ensancha la grilla */
.cal__grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--c-texto-suave); text-transform: uppercase; padding: 4px 0; letter-spacing: .5px; }

.dia {
  position: relative; aspect-ratio: 1 / 1; min-width: 0; border: 1px solid var(--c-borde);
  border-radius: 6px; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: default; padding: 2px;
  font-size: .95rem; user-select: none;
}
.dia--vacio { border: none; background: transparent; }
.dia__num { font-weight: 600; }
.dia__cupo { font-size: .62rem; color: var(--c-texto-suave); line-height: 1; margin-top: 2px; }

.dia--pasado { color: #c4beb8; background: #faf9f8; }
.dia--bloqueado { background: #f0efed; color: #b8b2ac; }
.dia--finde { background: #f4f2f0; color: #b8b2ac; }
.dia--feriado { background: var(--c-alerta-bg); color: var(--c-terracota); }
.dia--feriado .dia__cupo { color: var(--c-terracota); }
.dia--fuera-apertura { background: #f0f0f0; color: #999; border-color: #ddd; }
.dia--fuera-apertura .dia__cupo { color: #999; }

.dia--disponible { cursor: pointer; border-color: var(--c-taupe); }
.dia--disponible .dia__num { color: var(--c-marron); }
.dia--disponible:hover { background: #f3efe9; border-color: var(--c-marron); }
.dia--disponible.dia--completo { cursor: not-allowed; opacity: .55; }

.dia--sel { background: var(--c-marron) !important; border-color: var(--c-marron) !important; color: #fff !important; }
.dia--sel .dia__num, .dia--sel .dia__cupo { color: #fff !important; }
.dia--hoy { outline: 2px solid var(--c-teal); outline-offset: -3px; }

.dia__badge {
  position: absolute; top: 2px; right: 3px; background: var(--c-terracota); color: #fff;
  font-size: .6rem; min-width: 15px; height: 15px; border-radius: 999px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Leyenda */
.leyenda { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; margin-top: .85rem; font-size: .78rem; color: var(--c-texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.ll { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--c-borde); display: inline-block; }
.ll--disp { background: #fff; border-color: var(--c-taupe); }
.ll--bloq { background: #f0efed; }
.ll--fer { background: var(--c-alerta-bg); border-color: #e7cfc7; }
.ll--sel { background: var(--c-marron); border-color: var(--c-marron); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: .8rem; }
.campo label { display: block; font-size: .82rem; font-weight: 600; color: var(--c-marron); margin-bottom: .25rem; }
.campo .req { color: var(--c-terracota); }
input, select, textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--c-borde-fuerte);
  border-radius: 6px; font: inherit; color: var(--c-texto); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-teal); border-color: var(--c-teal); }
textarea { resize: vertical; min-height: 64px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px){ .fila { grid-template-columns: 1fr; } }

/* Secciones y párrafos del formulario (réplica de Amelia) */
.form-sec { margin: 1.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--c-borde);
  color: var(--c-marron); font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; }
.form-parrafo { background: var(--c-bg); border-left: 3px solid var(--c-taupe); border-radius: 4px;
  padding: .6rem .7rem; font-size: .82rem; color: var(--c-texto-suave); margin: .3rem 0 .9rem; line-height: 1.5; }
.form-parrafo--imp { border-left-color: var(--c-terracota); background: var(--c-alerta-bg); color: #7d4a40; }

/* Radios estilo "chip" */
.radios { display: flex; gap: .5rem; flex-wrap: wrap; }
.radio-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--c-borde-fuerte);
  border-radius: 6px; padding: .4rem .8rem; cursor: pointer; font-size: .88rem; background: #fff; }
.radio-chip:hover { border-color: var(--c-marron); }
.radio-chip.is-sel { border-color: var(--c-marron); background: #f3efe9; box-shadow: inset 0 0 0 1px var(--c-marron); }
.radio-chip input { width: auto; margin: 0; }

.turnos { display: flex; gap: .6rem; margin: .3rem 0 .2rem; flex-wrap: wrap; }
.turno-chip {
  flex: 1 1 130px; border: 1px solid var(--c-borde-fuerte); border-radius: 6px; background: #fff;
  padding: .55rem .6rem; cursor: pointer; text-align: left; transition: .12s;
}
.turno-chip:hover { border-color: var(--c-marron); }
.turno-chip.is-sel { border-color: var(--c-marron); background: #f3efe9; box-shadow: inset 0 0 0 1px var(--c-marron); }
.turno-chip.is-off { opacity: .5; cursor: not-allowed; }
.turno-chip strong { display: block; color: var(--c-marron); }
.turno-chip small { color: var(--c-texto-suave); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .4rem; border: none; border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 600; padding: .6rem 1.05rem; transition: .12s; }
.btn--primario { background: var(--c-marron); color: #fff; }
.btn--primario:hover { background: #473a38; }
.btn--secundario { background: #fff; color: var(--c-marron); border: 1px solid var(--c-borde-fuerte); }
.btn--secundario:hover { background: var(--c-bg); }
.btn--terracota { background: var(--c-terracota); color: #fff; }
.btn--terracota:hover { background: #944f45; }
.btn--peligro { background: #fff; color: #a8433a; border: 1px solid #e2c2bc; }
.btn--peligro:hover { background: #f6e9e5; }
.btn--sm { padding: .38rem .7rem; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-fila { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }

/* ---------- Carrito de reservas ---------- */
.vacio { color: var(--c-texto-suave); font-size: .9rem; padding: .5rem 0; }
.reserva-item { border: 1px solid var(--c-borde); border-radius: 6px; padding: .6rem .7rem; margin-bottom: .55rem; background: #fbfaf9; }
.reserva-item__top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.reserva-item__esc { font-weight: 700; color: var(--c-marron); }
.reserva-item__meta { font-size: .82rem; color: var(--c-texto-suave); }
.reserva-item__acc { display: flex; gap: .5rem; margin-top: .4rem; }
.link-btn { background: none; border: none; color: var(--c-terracota); cursor: pointer; font: inherit; font-size: .82rem; padding: 0; text-decoration: underline; }
.link-btn--gris { color: var(--c-texto-suave); }

/* ---------- Avisos ---------- */
.aviso { border-radius: 6px; padding: .6rem .8rem; font-size: .88rem; margin-bottom: .9rem; }
.aviso--info { background: #eef4f6; border: 1px solid #cfe1e7; color: #35606c; }
.aviso--ok { background: var(--c-ok-bg); border: 1px solid #cfe0d5; color: var(--c-ok); }

/* ---------- Panel de guías: pestañas ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--c-borde); margin-bottom: 1.2rem; flex-wrap: wrap; }
.tab-btn { border: none; background: none; padding: .65rem .95rem; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--c-texto-suave); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: var(--c-marron); }
.tab-btn.is-activo { color: var(--c-marron); border-bottom-color: var(--c-terracota); }

/* ---------- Subtabs (Configuración) ---------- */
.subtabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.1rem; background: var(--c-bg); padding: .3rem; border-radius: 8px; border: 1px solid var(--c-borde); }
.subtab-btn { border: none; background: transparent; color: var(--c-texto-suave); padding: .45rem .9rem; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem; }
.subtab-btn:hover { color: var(--c-marron); }
.subtab-btn.is-sel { background: #fff; color: var(--c-marron); box-shadow: var(--sombra); }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th, .tabla td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--c-borde); vertical-align: top; }
.tabla th { color: var(--c-texto-suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; }
.tabla tr:hover td { background: #fbfaf9; }

/* Badges de estado con punto indicador (mejor legibilidad) */
.chip-estado { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: capitalize; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; }
.chip-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.estado-pendiente { background: #fdf3e3; color: #9a6b1f; border-color: #f0dcb4; }
.estado-confirmada { background: var(--c-ok-bg); color: var(--c-ok); border-color: #cfe0d5; }
.estado-cancelada { background: #f2eeed; color: #8a827c; border-color: #e2dcd9; }
.estado-cancelada::before { background: #b7aca7; }
.estado-modificada { background: #eef4f6; color: #35606c; border-color: #cfe1e7; }
.estado-rechazada { background: #f7e7e4; color: #9a3f34; border-color: #e5c3bc; }

/* Chips secundarios: asistencia (asistió / no asistió) y reconfirmación */
.chip-asis, .chip-reconf { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; margin-top: .2rem; }
.chip-asis::before, .chip-reconf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.asis-asistio { background: var(--c-ok-bg); color: var(--c-ok); border-color: #cfe0d5; }
.asis-no-asistio { background: #f7e7e4; color: #9a3f34; border-color: #e5c3bc; }
.reconf-pendiente { background: #fdf3e3; color: #9a6b1f; border-color: #f0dcb4; }
.reconf-confirmada { background: var(--c-ok-bg); color: var(--c-ok); border-color: #cfe0d5; }
.reconf-cancelada { background: #f2eeed; color: #8a827c; border-color: #e2dcd9; }

/* Fila resaltada: reserva que espera aprobación (prioridad de gestión) */
.fila--prioridad td { background: #fffaf0; }
.fila--prioridad td:first-child { box-shadow: inset 3px 0 0 #d99a3a; }
tr.fila--prioridad:hover td { background: #fff5e6; }

/* Aviso de solicitudes pendientes (color de "por aprobar") */
.aviso--pend { background: #fdf3e3; border: 1px solid #f0dcb4; color: #7a5310; }

/* Pills clickeables (atajo de filtro) */
.pill--click { cursor: pointer; }
.pill--click:hover { border-color: var(--c-terracota); }
.pill--click:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }

/* Botones del correo de reconfirmación y de la pantalla pública de decisión */
.reconf-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.reconf-botones .btn { text-decoration: none; }
.reconf-decision { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0 .2rem; }

/* Badge genérico (turnos, etiquetas) */
.badge { display: inline-flex; align-items: center; padding: .18rem .6rem; border-radius: 6px;
  font-size: .76rem; font-weight: 700; background: var(--c-bg); color: var(--c-marron); border: 1px solid var(--c-borde); }
.badge--turno { background: #f0ece6; color: var(--c-marron); border-color: var(--c-borde-fuerte); }

.acciones-celda { display: flex; gap: .35rem; flex-wrap: wrap; }

.filtros { display: flex; gap: .7rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 160px; }

/* ---------- Tarjetas de correos ---------- */
.mail-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.mail-card { border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 1rem; background: #fbfaf9; }
.mail-card h3 { margin-bottom: .3rem; }
.mail-card p { font-size: .85rem; color: var(--c-texto-suave); }
.mail-card .etiqueta { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  background: var(--c-teal); color:#173840; padding:.1rem .5rem; border-radius:999px; margin-bottom:.5rem; }

/* ---------- Editor de disponibilidad ---------- */
.disp-editor { background: #fbfaf9; border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 1rem; }
.disp-editor__fecha { font-weight: 700; color: var(--c-marron); text-transform: capitalize; margin-bottom: .6rem; }
.switch-linea { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.switch-linea input { width: auto; }

/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(35,31,32,.55); display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 50; }
.modal-fondo[hidden] { display: none; }
.modal { background: #fff; border-radius: 10px; max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.modal__cab { display:flex; justify-content: space-between; align-items:center; gap:1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--c-borde); position: sticky; top: 0; background: #fff; }
.modal__cab h2 { margin: 0; }
.modal__x { border:none; background:none; font-size:1.5rem; line-height:1; cursor:pointer; color: var(--c-texto-suave); }
.modal__cuerpo { padding: 1.1rem 1.2rem; }
.modal__pie { padding: .9rem 1.2rem; border-top: 1px solid var(--c-borde); display:flex; justify-content:flex-end; gap:.6rem; }

/* Vista previa de correo */
.email { border: 1px solid var(--c-borde); border-radius: 8px; overflow: hidden; font-size: .88rem; }
.email__cab { background: var(--c-bg); padding: .7rem .9rem; border-bottom: 1px solid var(--c-borde); }
.email__cab div { margin: .1rem 0; }
.email__cab .k { color: var(--c-texto-suave); display: inline-block; min-width: 62px; font-size: .8rem; }
.email__cuerpo { padding: 1rem; background:#fff; }
.email__cuerpo .marca { color: var(--c-marron); font-weight: 700; border-bottom: 2px solid var(--c-terracota); padding-bottom: .4rem; margin-bottom: .7rem; }
.email__datos { width:100%; font-size:.85rem; border-collapse: collapse; margin:.5rem 0; }
.email__datos td { padding: .2rem .3rem; border-bottom: 1px solid #f0eeec; }
.email__datos td:first-child { color: var(--c-texto-suave); width: 42%; }

/* ---------- Pie ---------- */
.pie { text-align:center; color: var(--c-texto-suave); font-size: .78rem; padding: 1.4rem 1rem 2rem; display:flex; flex-direction:column; gap:.2rem; }
.pie__nota { font-size: .74rem; }
.powered-by { font-size: .72rem; color: #b3aca6; letter-spacing: .3px; margin-top: .35rem; }
.powered-by a { color: var(--c-taupe); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: .15s; }
.powered-by a:hover { color: var(--c-marron); border-bottom-color: var(--c-taupe); }

/* ---------- Número de reserva destacado ---------- */
.nro-destacado { background: var(--c-bg); border: 1px dashed var(--c-borde-fuerte); border-radius: 8px;
  padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.nro-destacado span { font-size: .78rem; color: var(--c-texto-suave); }
.nro-destacado strong { font-size: 1.2rem; color: var(--c-marron); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.nro-destacado ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.nro-destacado ul li { font-size: 1rem; margin-bottom: .2rem; }

/* ---------- Login ---------- */
.login-wrap { display: flex; justify-content: center; padding: 2.5rem 1rem; }
.login-card { background: var(--c-panel); border: 1px solid var(--c-borde); border-top: 4px solid var(--c-terracota);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.8rem 1.7rem; max-width: 400px; width: 100%; }
.login-titulo { font-size: 1.3rem; margin: 0 0 .3rem; }
.login-sub { color: var(--c-texto-suave); font-size: .9rem; margin-bottom: 1.2rem; }
.login-demo { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px dashed var(--c-borde);
  font-size: .8rem; color: var(--c-texto-suave); line-height: 1.7; }
.login-demo code { background: var(--c-bg); border: 1px solid var(--c-borde); border-radius: 4px; padding: .05rem .35rem; color: var(--c-marron); }
.aviso--error { background: #f7e7e4; border: 1px solid #e5bcb4; color: #9a3f34; }

/* ---------- Barra de sesión ---------- */
.sesion-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--c-panel); border: 1px solid var(--c-borde); border-radius: var(--radio);
  padding: .7rem 1rem; margin-bottom: 1.1rem; box-shadow: var(--sombra); }
.sesion-user { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.sesion-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-marron); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.sesion-user small { color: var(--c-texto-suave); }

/* ---------- Tablero (dashboard) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat-card { background: var(--c-panel); border: 1px solid var(--c-borde); border-left: 4px solid var(--c-taupe);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--c-marron); line-height: 1; }
.stat-txt { font-size: .82rem; color: var(--c-texto-suave); margin-top: .3rem; }
.stat--pend { border-left-color: #d99a3a; }
.stat--ok { border-left-color: var(--c-ok); }
.stat--no { border-left-color: #a8433a; }
.stat--sem { border-left-color: var(--c-teal); }

.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }

/* Totales rápidos como pills (arriba del listado de reservas) */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; background: var(--c-bg); border: 1px solid var(--c-borde);
  border-radius: 8px; padding: .6rem .7rem; margin-bottom: 1rem; }
.pill { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--c-borde);
  border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; color: var(--c-texto-suave); }
.pill strong { color: var(--c-negro); font-size: .95rem; font-variant-numeric: tabular-nums; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-taupe); }
.pill--total::before { background: var(--c-marron); }
.pill--pend::before { background: #d99a3a; }
.pill--ok::before { background: var(--c-ok); }
.pill--no::before { background: #a8433a; }
.pill--sem::before { background: var(--c-teal); }

/* Badge de número de reserva en listados */
.badge-nro { display: inline-block; background: var(--c-bg); border: 1px solid var(--c-borde-fuerte);
  border-radius: 4px; padding: .05rem .4rem; font-size: .72rem; font-weight: 700; color: var(--c-marron); }

/* Buscador */
.buscador { max-width: 340px; }
.pend-lista { display: flex; flex-direction: column; gap: .6rem; }
.pend-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--c-borde); border-radius: 6px; padding: .6rem .8rem; background: #fbfaf9; }

/* ---------- Botón éxito + estado rechazada ---------- */
.btn--exito { background: var(--c-ok); color: #fff; }
.btn--exito:hover { background: #416a4c; }
.estado-rechazada { background: #f7e7e4; color: #9a3f34; }

/* ---------- Control segmentado (Lista / Calendario) ---------- */
.seg-control { display: inline-flex; border: 1px solid var(--c-borde-fuerte); border-radius: 6px; overflow: hidden; }
.seg-btn { border: none; background: #fff; color: var(--c-texto); padding: .5rem 1rem; cursor: pointer; font: inherit; font-weight: 600; }
.seg-btn + .seg-btn { border-left: 1px solid var(--c-borde-fuerte); }
.seg-btn.is-sel { background: var(--c-marron); color: #fff; }

/* ---------- Calendario de reservas (admin) estilo Google Calendar ---------- */
.dia-resv { aspect-ratio: auto; min-height: 96px; cursor: default; align-items: stretch; justify-content: flex-start; padding: 4px 5px; }
.dia-resv[data-tiene="1"] { cursor: pointer; }
.dia-resv[data-tiene="1"]:hover { border-color: var(--c-marron); }
.dia--vacia-resv { background: #faf9f8; color: #b8b2ac; }
.dia-resv__evs { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; width: 100%; min-width: 0; overflow: hidden; }
.ev { display: block; box-sizing: border-box; border: none; text-align: left; width: 100%; max-width: 100%; min-width: 0;
  border-radius: 4px; padding: 2px 5px; font: inherit; font-size: .68rem;
  line-height: 1.25; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.ev__h { font-weight: 700; font-variant-numeric: tabular-nums; }
.ev__t { opacity: .95; }
.ev:hover { filter: brightness(.96); }
.ev-pendiente { background: #fdf3e3; color: #7a5310; border-left-color: #d99a3a; }
.ev-modificada { background: #eef4f6; color: #2b5563; border-left-color: var(--c-teal); }
.ev-confirmada { background: var(--c-ok-bg); color: #2f5a3c; border-left-color: var(--c-ok); }
.ev-rechazada  { background: #f7e7e4; color: #8a352c; border-left-color: #a8433a; text-decoration: line-through; }
.ev-cancelada  { background: #f2eeed; color: #7a726c; border-left-color: #b7aca7; text-decoration: line-through; }
.ev-mas { font-size: .66rem; color: var(--c-texto-suave); font-weight: 700; padding-left: 4px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; }

/* ---------- Días cerrados / feriado abierto ---------- */
.dia--cerrado { background: #efe7e5; color: #9a7d76; }
.dia--cerrado .dia__cupo { color: #b08a80; }
.dia--abierto-fer { box-shadow: inset 0 0 0 2px var(--c-teal); }

/* ---------- Cabecera del flujo (botón volver) ---------- */
.flujo-cab { margin-bottom: .6rem; }
.flujo-cab .link-btn { font-size: .88rem; font-weight: 600; text-decoration: none; }
.flujo-cab .link-btn:hover { text-decoration: underline; }

/* ---------- Bloque "Sobre las visitas" ---------- */
.sobre-visitas { border-top: 3px solid var(--c-terracota); }
.lista-puntos { margin: .3rem 0 .5rem; padding-left: 1.1rem; }
.lista-puntos li { margin-bottom: .35rem; font-size: .9rem; color: var(--c-texto); }

/* ---------- Info del Museo (visitante) ---------- */
.info-museo { margin-top: 1.2rem; }
.info-museo .tabla td { padding: .3rem .4rem; }

/* ---------- Estadísticas: barras ---------- */
.barra-row { display: grid; grid-template-columns: 160px 1fr 32px; align-items: center; gap: .6rem; margin-bottom: .45rem; font-size: .85rem; }
.barra-lbl { color: var(--c-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-track { background: var(--c-bg); border-radius: 999px; height: 14px; overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
.barra-num { text-align: right; font-weight: 700; color: var(--c-marron); }
@media (max-width: 520px) { .barra-row { grid-template-columns: 110px 1fr 28px; } }

/* ---------- Manual ---------- */
.manual-item { border-left: 3px solid var(--c-taupe); padding: .3rem 0 .3rem .9rem; margin: .9rem 0; }
.manual-item h3 { margin: 0 0 .2rem; font-size: 1rem; }
.manual-item p { margin: 0; font-size: .9rem; color: var(--c-texto); }

/* ---------- FAQs ---------- */
.faqs { display: flex; flex-direction: column; gap: .5rem; }
.faq { border: 1px solid var(--c-borde); border-radius: 6px; padding: .1rem .3rem; background: #fbfaf9; }
.faq summary { cursor: pointer; padding: .6rem .5rem; font-weight: 600; color: var(--c-marron); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+ '; color: var(--c-terracota); font-weight: 700; }
.faq[open] summary::before { content: '– '; }
.faq-a { padding: 0 .6rem .7rem 1.2rem; font-size: .88rem; color: var(--c-texto); }

/* ---------- Accesibilidad ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Foco visible consistente para teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-teal); outline-offset: 2px; border-radius: 4px;
}
.campo-fieldset { border: none; margin: 0 0 .8rem; padding: 0; }
.campo-fieldset legend { font-size: .82rem; font-weight: 600; color: var(--c-marron); margin-bottom: .25rem; padding: 0; }
th[scope="row"] { text-align: left; }

/* Grid de cupos por turno (editor de disponibilidad) */
.cupos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: .3rem 0 .2rem; }

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.oculto { display: none !important; }

/* ==================================================================
   Guía interactiva del panel (recorrido para guías nuevos)
   ================================================================== */
/* El fondo NO oscurece: es sólo el contenedor que posiciona el globo.
   El oscurecido lo hace .tour-hueco, para que el elemento enfocado quede
   realmente iluminado y no debajo de una capa gris. */
.tour-fondo {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

.tour-globo {
  pointer-events: auto;
  background: #fff; border-radius: 10px; max-width: 460px; width: 100%;
  padding: 1.1rem 1.3rem 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  border-top: 4px solid var(--c-terracota);
  max-height: 80vh; overflow-y: auto;
}
.tour-globo__cab { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.tour-paso { font-size: .76rem; letter-spacing: .04em; margin-left: auto;
  color: var(--c-texto-suave); font-weight: 700; }
/* Identidad del guía: presente pero discreta. */
.tour-quien { font-size: .8rem; font-weight: 600; color: var(--c-texto-suave); }
.tour-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; color: var(--c-terracota);
  border: 1.5px solid var(--c-terracota);
  font-weight: 700; font-size: .72rem;
}

/* Firma de autoría: discreta y sólo al principio y en Ayuda. */
.tour-firma {
  margin: 1rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--c-borde);
  font-size: .75rem; color: var(--c-texto-suave); text-align: right;
}
.tour-x { background: none; border: 0; font-size: 1.5rem;
  line-height: 1; cursor: pointer; color: var(--c-texto-suave); padding: 0 .2rem; }
.tour-x:hover { color: var(--c-terracota); }
.tour-globo h2 { font-size: 1.05rem; margin: .1rem 0 .5rem; color: var(--c-negro); }
.tour-texto { font-size: .89rem; line-height: 1.5; color: var(--c-texto); }
.tour-progreso { height: 4px; background: var(--c-borde); border-radius: 2px;
  margin: .9rem 0 .7rem; overflow: hidden; }
.tour-progreso span { display: block; height: 100%; background: var(--c-terracota);
  transition: width .25s ease; }
.tour-botones { display: flex; gap: .4rem; align-items: center; }

/* El "hueco": un recuadro fijo del tamaño exacto del elemento enfocado.
   Su centro es transparente y su sombra gigante oscurece TODO lo demás, así que
   el elemento se ve a plena luz en vez de quedar bajo una capa gris.
   Se dibuja por encima de la página y por debajo del globo. */
.tour-hueco {
  position: fixed; z-index: 10000;
  pointer-events: none;
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(35, 31, 32, .62),
    0 0 0 3px var(--c-terracota),
    0 0 22px 6px rgba(166, 97, 86, .55);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

/* Marcador del elemento enfocado. Sin efectos visuales propios: el realce lo
   aporta .tour-hueco, y superponer ambos era lo que lo dejaba opaco. */
.tour-destacado { position: relative; z-index: 10001; }

@media (min-width: 900px) {
  .tour-fondo { align-items: center; justify-content: flex-end; padding: 2rem; }
}

/* El globo se corre al extremo opuesto del elemento resaltado para no taparlo.
   Va después del media query y con doble clase para ganarle en cascada. */
.tour-fondo.tour-fondo--abajo  { align-items: flex-end; }
.tour-fondo.tour-fondo--arriba { align-items: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .tour-progreso span { transition: none; }
}