/* ================================
  Variables de diseño
================================ */
:root{
  --bg:#f6f7fb;
  --page:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --accent:#0ea5e9;
  --accent-2:#0369a1;
  --line:#e5e7eb;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:10px;
  --header-h: 0px;
}

/* ================================
  Reset y base
================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f2f6fb 0%, #ffffff 30%, #f8fafc 100%);
  padding-top: var(--header-h);
}

/* ================================
  Encabezado fijo compacto
================================ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: saturate(120%) blur(7px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.container{max-width:1200px;margin:0 auto;padding:6px 12px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.brand img{height:26px;width:auto;display:block}
.brand .title{font-weight:800;letter-spacing:.2px;font-size:.95rem}
.brand .sub{color:var(--muted);font-size:.85rem;margin-top:2px}

/* ================================
  Banner principal
================================ */
.header-banner{
  max-width:1200px;
  margin:0 auto;
  padding:0 12px 6px;
}
@media (min-width: 0){
  .header-banner{ margin-top: 6px; }
}
.banner-frame{
  position:relative; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); background:#fff;
  height: clamp(80px, 15vw, 120px);
}
.banner-track{position:relative;height:100%}
.banner-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0;
  animation: fade 90s infinite;
}
.banner-track img:nth-child(1){ animation-delay: 0s; }
.banner-track img:nth-child(2){ animation-delay: 30s; }
.banner-track img:nth-child(3){ animation-delay: 60s; }
@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === Franja de confianza === */
.trust{max-width:1200px;margin:6px auto;padding:0 12px 8px}
.trust-card{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#fff;border-radius:var(--radius-md);padding:8px 12px;box-shadow:var(--shadow);color:var(--muted);font-weight:600}
.trust-card .actions{display:flex;gap:10px}
.trust-badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{border:1px dashed #d1d5db;background:#f8fafc;color:#111827;border-radius:999px;padding:4px 8px;font-size:.85rem;font-weight:600}

/* ================================
  Contenido principal
================================ */
main{padding:20px 0}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.04);padding:20px}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cols-2,.cols-3{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:14px;padding:14px}
legend{padding:0 8px;color:#111827;font-weight:600}
label{display:block;font-size:.95rem;margin:6px 0 6px 2px}
input[type="text"],input[type="number"],input[type="email"],input[type="date"],input[type="month"],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)
}
textarea{min-height:90px;resize:vertical}
.help{font-size:.85rem;color:var(--muted)}
.row{display:grid;gap:12px;grid-template-columns:1fr}
.row2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.row3{display:grid;gap:12px;grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){.row2,.row3{grid-template-columns:1fr}}
.section-title{font-weight:700;margin:6px 0 12px}
.chipset{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 12px;border-radius:20px}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}
button{appearance:none;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-soft{background:#eef6ff;color:#0b6aa1;border:1px solid #dbeafe}
.subtle{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:10px 0}
.hidden{display:none!important}
label.required::after { content: " *"; color: #dc2626; }

/* ================================
  Overlay de carga
================================ */
#spinner-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background-color: rgba(255,255,255,0.85);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 9999;
}
#spinner-overlay.hidden { display: none; }
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--accent);
  border-radius: 50%;
  width: 54px; height: 54px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
#spinner-overlay p { margin-top:10px; font-size:1rem; color:var(--ink); }

/* ================================
  Pie de página
================================ */
.site-footer{
  margin-top:34px; background:#0b1220; color:#dbeafe;
  border-top:1px solid #0b1220;
}
.footer-inner{max-width:1200px;margin:0 auto;padding:22px 20px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.footer-inner h4{margin:0 0 8px; font-size:1.05rem; color:#e2e8f0}
.footer-inner p, .footer-inner a{color:#bcd3f0; text-decoration:none}
.footer-bottom{border-top:1px solid rgba(203,213,225,.15); padding:10px 20px; text-align:center; color:#93c5fd}
@media (max-width:900px){ .footer-inner{ grid-template-columns:1fr } }

/* ================================
  FIX Plaza/Sede: sin scroll horizontal y chips a 100%
  (no rompe estilos existentes)
================================ */
#plazas-list,
#sedes-list{
  display:flex;              /* por si alguna regla lo cambia */
  flex-direction:column;     /* lista vertical */
  gap:.5rem;
  max-width:100%;
  overflow-y:auto;
  overflow-x:hidden;         /* <-- clave: sin scroll horizontal */
}

/* cada chip ocupa el ancho del contenedor y puede partir línea */
#plazas-list .chip,
#sedes-list .chip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;        /* permite salto de línea en textos largos */
}

/* asegura que el input no estire el chip */
#plazas-list .chip input[type="checkbox"],
#sedes-list .chip input[type="checkbox"]{
  flex:0 0 auto;
}

/* si hubiera un placeholder tipo #plazas-empty, que no haga scroll lateral */
#plazas-empty{
  max-width:100%;
  white-space:normal;
}

/* por si alguna regla global añadiera scroll horizontal en contenedores */
.card{ overflow-x: clip; }   /* puedes usar hidden si lo prefieres */
.wrap{ overflow-x: hidden; }

/* Forzar grid en listas de Plaza/Sede cuando tengan la clase .grid */
#plazas-list.grid,
#sedes-list.grid,
#areas-list.grid{
  display: grid !important;
  overflow-x: hidden;
}

/* 3 columnas en desktop, 2 en tablet, 1 en móvil */
#plazas-list.grid.cols-3,
#sedes-list.grid.cols-3,
#areas-list.grid.cols-3{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

@media (max-width: 1024px){
  #plazas-list.grid.cols-3,
  #sedes-list.grid.cols-3,
  #areas-list.grid.cols-3{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  #plazas-list.grid.cols-3,
  #sedes-list.grid.cols-3,
  #areas-list.grid.cols-3{
    grid-template-columns: 1fr;
  }
}

/* Que cada chip ocupe su celda completa y no fuerce scroll */
#plazas-list.grid .chip,
#sedes-list.grid .chip,
#areas-list.grid .chip{
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

/* ================================
  Modal errores
================================ */

/* ===== Utilidades generales ===== */
.hidden {
  display: none !important;
}

.is-invalid {
  outline: 2px solid #dc2626 !important;
  background: #fff1f2 !important;
}

/* ===== Modal de errores ===== */
.ttt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6vh;
}

.ttt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.ttt-modal__dialog {
  position: relative;
  z-index: 10000;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  overflow: hidden;
  animation: modalIn .25s ease-out;
}

.ttt-modal__header,
.ttt-modal__footer {
  padding: 14px 16px;
  background: #f7f7f8;
}

.ttt-modal__title {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #111827;
}

.ttt-modal__body {
  padding: 16px;
}

.ttt-modal__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  float: right;
  color: #6b7280;
}

.ttt-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: #374151;
}

.ttt-tip {
  margin-top: 12px;
  padding: 10px;
  border-left: 4px solid #d97706;
  background: #fff7ed;
  color: #92400e;
  border-radius: 4px;
}

/* ===== Botón principal ===== */
.btn-primary {
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  transition: background .2s;
}
.btn-primary:hover {
  background: #1d4ed8;
}

/* ===== Animación modal ===== */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}