/* =============== Base y temas =============== */
*{box-sizing:border-box}
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e2e8f0; --card:#ffffff; --footer:#f8fafc;
  --shadow:0 6px 20px rgba(2,6,23,.08);

  /* Fallbacks de color de texto para botones (si el navegador NO soporta color-contrast) */
  --btn-text-primary:#ffffff;
  --btn-text-secondary:#ffffff;
  --btn-text-danger:#ffffff;

  /* Fallback nav text */
  --nav-text:#ffffff;
}
html[data-theme="dark"]{
  --bg:#0b1220; --text:#e5e7eb; --muted:#9aa4b2; --border:#334155; --card:#0f172a; --footer:#0b1220;
  --shadow:0 6px 20px rgba(0,0,0,.35);
}
body{
  margin:0; font-family:Inter,system-ui,'Segoe UI',Roboto,Arial; background:var(--bg); color:var(--text); line-height:1.5
}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* =============== Navbar =============== */
.site-header{background:var(--primary);color:var(--nav-text);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--nav-text);font-weight:700;letter-spacing:.2px}
.brand img{height:36px;border-radius:.5rem;box-shadow:var(--shadow)}
.menu{display:flex;gap:.5rem}
.menu a{
  color:var(--nav-text);
  text-decoration:none;
  padding:.45rem .7rem;
  border-radius:.6rem;
  opacity:.95;
  line-height:1;
  border:1px solid transparent;
}
.menu a:hover{opacity:1;background:rgba(255,255,255,.12)}
.menu a:focus-visible{outline:3px solid rgba(255,255,255,.55);outline-offset:2px}
.nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;padding:.4rem;border-radius:.5rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--nav-text);margin:5px 0;transition:.2s}

@media (max-width:720px){
  .hamburger{display:block}
  .menu{position:absolute;top:56px;right:0;background:var(--primary);flex-direction:column;padding:.6rem;border-bottom-left-radius:.8rem;display:none;box-shadow:var(--shadow)}
  .nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle:checked ~ .menu{display:flex}
}

/* Contraste automático para navbar si el navegador lo soporta */
@supports (color: color-contrast(black vs white)) {
  .site-header,.brand,.menu a{ color: color-contrast(var(--primary) vs #000, #fff); }
  .hamburger span{ background: color-contrast(var(--primary) vs #000, #fff); }
}

/* utilidades visuales */
.shadow{box-shadow:var(--shadow)}
.fade-in{animation:fade .25s ease-in}
@keyframes fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* =============== Footer =============== */
.site-footer{background:var(--footer);margin-top:2rem;padding:1rem 0;color:var(--muted)}

/* =============== Tipografía =============== */
h1,h2{color:var(--text);margin:.2rem 0 1rem}
.muted{color:var(--muted);font-size:.95rem}

/* =============== Botones (con contraste automático) =============== */
/* Fallback (sin color-contrast): texto blanco con sombra sutil */
.btn{
  background:var(--primary);
  border:none;
  color:var(--btn-text-primary);
  padding:.55rem .9rem;
  border-radius:.6rem;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  box-shadow:var(--shadow);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid rgba(59,130,246,.45);outline-offset:2px}

.btn-secondary{
  background:var(--secondary);
  color:var(--btn-text-secondary);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.btn-danger{
  background:#ef4444;
  color:var(--btn-text-danger);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

/* Outline: texto en color primario (siempre legible en fondos claros/osc.) */
.btn-outline{
  border:1px solid var(--primary);
  color:var(--primary);
  background:transparent;
  padding:.5rem .8rem;
  border-radius:.6rem;
  text-decoration:none;
}
.btn-outline:hover{background:rgba(0,0,0,.06)}
html[data-theme="dark"] .btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:.35rem .6rem;border-radius:.5rem}

/* ——— Contraste automático con color-contrast() (si está soportado) ——— */
@supports (color: color-contrast(black vs white)) {
  .btn{ color: color-contrast(var(--primary) vs #000, #fff); text-shadow:none; }
  .btn-secondary{ color: color-contrast(var(--secondary) vs #000, #fff); text-shadow:none; }
  .btn-danger{ color: color-contrast(#ef4444 vs #000, #fff); text-shadow:none; }
}

/* Forzar manualmente si hace falta */
.btn--text-dark{ color:#0f172a !important; text-shadow:none !important; }
.btn--text-light{ color:#ffffff !important; text-shadow:0 1px 0 rgba(0,0,0,.18) !important; }

/* =============== Disposición y tarjetas =============== */
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.input-inline{width:160px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{border:1px solid var(--border);border-radius:.9rem;overflow:hidden;background:var(--card)}
.card.hover:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card img{width:100%;height:180px;object-fit:cover}
.card .p{padding:1rem}
.detail .hero{width:100%;max-height:420px;object-fit:cover;border-radius:.8rem}
.detail .content{margin-top:1rem}

/* =============== Tablas y formularios =============== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:.7rem;text-align:left}

label{display:block;margin:.6rem 0}
input,select,textarea{
  width:100%;
  padding:.6rem;
  border:1px solid var(--border);
  border-radius:.6rem;
  background:var(--card);
  color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(59,130,246,.3)}
.row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (max-width:720px){.row-2{grid-template-columns:1fr}}

.admin-bar{
  background:var(--footer);
  border-bottom:1px solid var(--border);
  padding:.6rem 1rem;
  display:flex;gap:.6rem;flex-wrap:wrap
}

.alert{
  background:#ecfccb;
  color:#3f6212;
  padding:.6rem .8rem;
  border-radius:.6rem;
  border:1px solid #d9f99d;
  margin:.8rem 0
}

/* =============== Accesibilidad =============== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* =============== Login (centrado y compacto) =============== */
.auth{
  min-height:calc(100vh - 140px);
  display:grid; place-items:center; padding:1rem
}
.auth-card{width:100%;max-width:420px;padding:1.25rem !important;border-radius:.9rem}
.auth-title{text-align:center;margin:.3rem 0 1rem}
.auth-form{display:grid;gap:.8rem}
.auth-form label{font-weight:600}
.auth-form input{width:100%}
.auth-btn{width:100%;margin-top:.3rem}

/* =============== Contenido enriquecido del evento =============== */
.detail .content h2 { margin: 1rem 0 .5rem; }
.detail .content h3 { margin: .9rem 0 .4rem; }
.detail .content p  { margin: .6rem 0; }
.detail .content ul, .detail .content ol { margin: .6rem 0 .6rem 1.2rem; }
.detail .content a { text-decoration: underline; }

/* =============== Layout con sidebar (timeline) =============== */
.layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:1.2rem;
}
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar-col{order:-1} /* sidebar arriba en móvil (opcional) */
}

/* Timeline y chips */
.timeline{list-style:none;padding:0;margin:0;max-height:60vh;overflow:auto}
.timeline li+li{margin-top:.35rem}
.timeline a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--border);
  padding:.45rem .6rem;
  border-radius:.55rem;
}
.timeline a:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.pill{
  display:inline-block;
  padding:.1rem .45rem;
  border-radius:999px;
  font-size:.8rem;
  background:var(--footer);
  border:1px solid var(--border);
  margin-left:.35rem;
}