:root { --bg:#0b0b0d; --card:#141418; --text:#e7e7ea; --muted:#a9a9b3; --brand:#00b6f0; --danger:#d84b4b; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter,system-ui,Arial,sans-serif; background:var(--bg); color:var(--text); }
.container{ width:min(1100px, 92%); margin:0 auto; }
.header{ position:sticky; top:0; background:#0f0f12e6; border-bottom:1px solid #1f1f23; backdrop-filter:blur(10px); }
.header .container{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logo{ color:var(--text); text-decoration:none; font-weight:700; }
nav a{ color:var(--muted); margin-left:16px; text-decoration:none; }
nav a:hover{ color:var(--text); }

h1{ font-size:28px; margin:28px 0; }
.card{ background:var(--card); padding:16px; border:1px solid #24242a; border-radius:14px; margin:14px 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } }

input, select, button{ font:inherit; }
input, select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #31313a; background:#0f0f12; color:var(--text); }
label{ display:block; margin-bottom:10px; }
.btn{ background:var(--brand); border:none; color:#001019; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn:hover{ filter:brightness(1.08); }
.btn.outline{ background:transparent; color:var(--text); border:1px solid #2e2e36; }
.btn.mini{ padding:6px 10px; font-size:12px; }
.link{ background:none; border:none; color:var(--brand); cursor:pointer; }
.link.danger{ color:var(--danger); }

.flash{ margin:14px 0; }
.flash-item{ padding:8px 12px; border-radius:10px; margin-bottom:8px; }
.flash-item.error{ background:#3a1e1e; color:#ffdede; }
.flash-item.info{ background:#1e2c3a; }
.flash-item.success{ background:#1e3a2a; }

/* Slots */
#slots{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:8px 12px; background:#101014; border:1px solid #2c2c33; color:var(--text); border-radius:999px; cursor:pointer; }
.chip.active{ background:var(--brand); color:#001019; border-color:transparent; }
.actions{ display:flex; gap:10px; margin:10px 0; }

/* Carrusel */
.carousel {
  position: relative;
  width: 100vw;                 /* ocupa TODO el ancho visible del navegador */
  left: 50%;                    /* centrado absoluto */
  right: 50%;
  margin-left: -50vw;           /* truco para extender más allá del .container */
  margin-right: -50vw;
  height: 260px;                /* mantiene el alto actual */
  overflow: hidden;
  border-radius: 0;             /* eliminamos bordes redondeados para estilo banner */
  border: none;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* mantiene proporciones, sin recortes */
  opacity: 0;
  transition: opacity .6s ease;
}

.carousel img.active {
  opacity: 1;
}

.carousel-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  color: var(--muted);
}