:root{
  --blue1:#2d7ee6; --blue2:#70b0ff; --blueDeep:#1d4f8f;
  --panel:#ffb400; --ink:#2b2b2b;
}

/* Barra superior e inferior simuladas del mockup */
.mock-topbar{height:36px;background:linear-gradient(#cfcfcf,#b9b9b9);border-bottom:1px solid #9c9c9c}
.mock-footer{height:26px;background:linear-gradient(#b9b9b9,#cfcfcf);border-top:1px solid #9c9c9c}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:var(--ink)}

.top{padding:18px 16px 8px}
.title-emboss{
  margin:0 0 14px; text-align:center; letter-spacing:1px; color:#8c1a1a;
  font-weight:900;
  text-shadow:0 1px 0 #ffd8d8, 0 2px 0 #c53a3a, 0 4px 6px rgba(0,0,0,.25);
}

/* ======= Botones azules 3D ======= */
.rooms{
  display:flex; justify-content:center; gap:120px; margin-top:6px;
}
.room-btn{
  position:relative; cursor:pointer; font-weight:700; color:#fff;
  padding:14px 44px; border-radius:8px; border:1px solid #1e4f8e;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(var(--blue2), #2d7ee6 60%, #235fae 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 6px 0 var(--blueDeep),
    0 10px 18px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:transform .05s ease, box-shadow .05s ease;
}
.room-btn::after{
  content:""; position:absolute; left:18px; right:18px; bottom:-10px; height:8px;
  border-radius:4px; background:#7fd6ff; opacity:0; transition:opacity .15s ease;
}
.room-btn.active::after{ opacity:1; }
.room-btn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 0 var(--blueDeep),
    0 8px 14px rgba(0,0,0,.25);
}

/* ======= Layout principal ======= */
.layout{
  display:grid; grid-template-columns:160px 1fr; gap:22px;
  padding:12px 28px 24px; align-items:start;
}

/* ======= Columna de sillones con marco amarillo ======= */
.chair-rail{
  position:relative; padding:6px 0; border:6px solid var(--panel); border-radius:8px;
}
.rail-border{position:absolute; top:6px; bottom:6px; width:10px; border-radius:4px}
.rail-left{left:6px; background:#5de35d}
.rail-right{right:6px; background:#ff6b6b}

/* Renglones 1:1 con el panel derecho */
.rail-icons{
  display:grid; grid-template-rows:repeat(10,76px); gap:8px; padding:6px 8px;
}
.rail-seat{
  width:64px; height:64px; margin:auto; border-radius:6px; border:2px solid #0002;
  background-repeat:no-repeat; background-position:center; background-size:80%;
}
.rail-seat.free{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327ae60' stroke='%23000' stroke-width='0.5'><path d='M6 10V8a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v2h1a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2h-1v2a1 1 0 0 1-1 1h-2v-3H9v3H7a1 1 0 0 1-1-1v-2H5a2 2 0 0 1-2-2v-3a1 1 0 0 1 1-1h2z'/></svg>");
  background-color:#bdf2c8;
}
.rail-seat.taken{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c' stroke='%23000' stroke-width='0.5'><path d='M6 10V8a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v2h1a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2h-1v2a1 1 0 0 1-1 1h-2v-3H9v3H7a1 1 0 0 1-1-1v-2H5a2 2 0 0 1-2-2v-3a1 1 0 0 1 1-1h2z'/></svg>");
  background-color:#ffc4bf;
}

/* ======= Panel de venta (marco amarillo) ======= */
.sell-panel .panel-frame{border:6px solid var(--panel); border-radius:8px; padding:14px 16px}
.seats{display:grid; grid-template-rows:repeat(10,76px); gap:26px}

/* Fila y elementos */
.row{
  display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center;
  height:76px; position:relative;
}
.btn-3d{
  justify-self:start; cursor:pointer; font-weight:700; letter-spacing:.3px; color:#222;
  padding:10px 18px; border-radius:6px;
  background:linear-gradient(#f2f2f2,#b9b9b9);
  border:1px solid #8a8a8a;
  box-shadow:0 3px 0 #7c7c7c, 0 8px 14px rgba(0,0,0,.15);
}
.btn-3d:active{transform:translateY(2px); box-shadow:0 1px 0 #7c7c7c, 0 6px 10px rgba(0,0,0,.15)}

.input-wrap{
  background:#fff; border:1px solid #cfcfcf; border-radius:6px; padding:10px 12px;
  box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.08);
}
.input-wrap input{width:100%; border:none; outline:none; font-size:15px; color:#333}

.row .sold-name{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  padding-left:4px; font-weight:700; color:#b11f1f; display:none;
}
/* mantenemos hueco para no romper la alineación */
.row.taken .btn-3d, .row.taken .input-wrap{visibility:hidden}
.row.taken .sold-name{display:block}