:root{
  --bg:#faf6fb; --card:#fff; --ink:#111827; --muted:#6b7280;
  --brand:#ec4899; --accent:#fb7185; --ok:#10b981;
  --border:#e5e7eb; --occupied:#c7c9d1;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* ---------- Layout/UI ---------- */
.hero{ text-align:center; padding:28px 16px 10px; }
.hero h1{ margin:0 0 6px; font-size:clamp(22px,3.5vw,34px); }
.hero p{ margin:0; color:var(--muted); }

.layout{
  display:grid; gap:18px; grid-template-columns:2fr 1fr;
  padding:10px 16px 28px; max-width:1100px; margin:0 auto;
}
@media (max-width:900px){ .layout{ grid-template-columns:1fr; } }

.grid-card,.video-card,.stats-card,.welcome,.images-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.04); padding:16px;
}
.grid-card h2,.video-card h3,.stats-card h3,.welcome h3,.images-card h3{ margin:0 0 12px; }

.grid-nums{ display:grid; grid-template-columns:repeat(10,1fr); gap:10px; }
@media (max-width:480px){ .grid-nums{ grid-template-columns:repeat(5,1fr); } }

.num{
  aspect-ratio:1/1;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  font-weight:600; font-size:16px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease, opacity .3s ease, color .3s ease;
}
.num:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.06); }

/* Estado ocupado: gris + tachado, clic permitido para alternar si usas JS */
.num.ocupado{
  background:var(--occupied);
  color:#3f3f46;
  text-decoration:line-through;
  opacity:.65;
  position:relative;
  box-shadow:none;
  cursor:not-allowed; /* solo apariencia */
}
.num.ocupado:hover{ transform:none; box-shadow:none; }
.num.ocupado::after{
  content:"✖";
  font-size:18px; color:#8b0000;
  position:absolute; top:4px; right:6px; opacity:.8;
}

.side{ display:grid; gap:18px; }

.video-box{
  width:100%; height:188px;
  border-radius:12px; overflow:hidden; background:#000;
}

/* Imágenes */
.images-card h3{ margin:0 0 12px; }

/* Opción A: una imagen */
.img-box{
  width:100%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#000;
}
.img-box img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Opción B: dos imágenes */
.img-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
}
.img-grid figure{
  margin:0; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#000;
}
.img-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px){ .img-grid{ grid-template-columns:1fr; } }

.stats{ display:grid; gap:10px; }
.stats .k{ color:var(--muted); font-size:13px; }
.stats .v{ font-weight:700; font-size:22px; }

/* SweetAlert2 (si más adelante lo usas) */
.sw-popup{ border-radius:16px !important; }
.swal2-input{ margin:8px 0 !important; height:42px; border-radius:12px !important; border:1px solid var(--border) !important; }
.sw-btn-confirm{ background:var(--ink) !important; border-radius:999px !important; }
.sw-btn-cancel{ border-radius:999px !important; }

/* Nota */
.note{ color:var(--muted); font-size:13px; margin-top:10px; }
/* Fondo global con imagen */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0; /* detrás de todo */
  pointer-events: none; /* no bloquea clics */
  
  /* Imagen + capa oscura sutil */
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('../img/negra_calieqnte.jpeg') center center / cover no-repeat fixed;
}

/* Asegura que tarjetas y numeros queden encima */
.hero, .layout {
  position: relative;
  z-index: 1;
}

/* Opcional: efecto vidrio en tarjetas para que se integre con el fondo */
.grid-card, .video-card, .stats-card, .welcome, .images-card{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.6);
}







/* ============================
   SweetAlert2 - Tema Elegante
   ============================ */
.swal2-container{
  padding: 1.25rem !important;
  backdrop-filter: blur(2px);
}

.swal2-popup{
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
  padding: 22px 22px 18px !important;
}

.swal2-title{
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  margin-bottom: 10px !important;
}

.swal2-html-container{
  color: var(--ink) !important;
  font-size: 15px !important;
  margin-top: 6px !important;
}

/* Inputs */
.swal2-input, .swal2-textarea, .swal2-select{
  height: 46px;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,.18) !important; /* --brand */
}

/* Acciones */
.swal2-actions{
  gap: 10px !important;
  margin-top: 14px !important;
}

/* Botones base (SweetAlert2 usa .swal2-styled) */
.swal2-styled{
  min-width: 120px;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
  transition: transform .08s ease, box-shadow .12s ease, opacity .15s ease !important;
}

/* Confirmar = primario */
.swal2-styled.swal2-confirm{
  background: linear-gradient(180deg, var(--brand), var(--accent)) !important;
  color: #fff !important;
  border: 0 !important;
}
.swal2-styled.swal2-confirm:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(236,72,153,.25) !important;
}

/* Cancelar = neutro oscuro */
.swal2-styled.swal2-cancel{
  background: #4b5563 !important; /* gris oscuro */
  color: #fff !important;
  border: 0 !important;
}
.swal2-styled.swal2-cancel:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(75,85,99,.28) !important;
}

/* Barra de tiempo */
.swal2-timer-progress-bar{
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  height: 4px !important;
  border-radius: 999px !important;
}

/* Iconos */
.swal2-icon{
  box-shadow: none !important;
  border: 0 !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"]{
  background: var(--ok) !important;
}
.swal2-icon.swal2-success .swal2-success-ring{
  border-color: rgba(16,185,129,.35) !important;
}

/* ============================
   Botones generales a juego
   ============================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .15s ease;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-primary{
  color:#fff; background: linear-gradient(180deg, var(--brand), var(--accent));
  box-shadow: 0 6px 16px rgba(236,72,153,.22);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(236,72,153,.32); }

.btn-dark{
  color:#fff; background:#111827;
  box-shadow: 0 6px 16px rgba(17,24,39,.2);
}
.btn-dark:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(17,24,39,.3); }

.btn-light{
  color: var(--ink); background:#fff; border:1px solid var(--border);
}
.btn-light:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.08); }





    .num{ user-select:none; }
    .num.ocupado{ pointer-events:none; opacity:.55; }
    .badge{ display:inline-block; padding:.25rem .5rem; border-radius:999px;
            background:#111827; color:#fff; font-size:12px; font-weight:700; }
            

.carousel{
  position:relative; width:100%; height:260px; border-radius:14px; overflow:hidden;
  background:#0b0f1a12;
}
@media(min-width:768px){ .carousel{ height:320px; } }

.carousel-track{
  display:flex; width:100%; height:100%; transition:transform .45s ease;
}
.carousel img{
  width:100%; height:100%; object-fit:cover; flex:0 0 100%;
  user-select:none; pointer-events:none;
}
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:none; border-radius:999px; background:#111827cc; color:#fff;
  font-size:22px; line-height:40px; text-align:center; cursor:pointer; outline:none;
}
.car-btn:hover{ background:#111827; }
.car-btn.prev{ left:10px; }
.car-btn.next{ right:10px; }

.car-dots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.car-dots button{
  width:8px; height:8px; border-radius:999px; border:none; background:#ffffff66; cursor:pointer;
}
.car-dots button.active{ background:#fff; width:18px; border-radius:6px; transition:width .2s; }