/* ===== Seating Finder — Clean & Elegant (Stacked) ===== */
.mi-seating-finder{
  --brand:#255192; /* Azul principal */
  --brand-2:#9ac7ff; /* Tono más claro del azul */
  --bg:#0f1420; /* Fondo muy oscuro */
  --panel:#1d3860; /* Panel ligeramente más claro que el fondo */
  --line:#1b2236; /* Línea separadora */
  --text:#eef2ff; /* Texto blanco/azul claro */
  --muted:#9aa3b2; /* Texto secundario/gris */

  color:var(--text);
  max-width:800px; /* Reducido para mejor enfoque */
  margin:32px auto;
  padding:24px; /* Aumentado padding general */
  border-radius:18px;
  background: #255192;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);

  /* Layout vertical: heading -> search -> result -> meta */
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap:20px; /* Aumentado gap */
}

/* Título */
.mi-seating-heading{
  margin: 4px 0 0;
  font-size: clamp(24px,2.8vw,32px); /* Un poco más grande */
  font-weight: 800;
  letter-spacing:.5px;
  color:#ffffff;
}

/* Panel buscador (Mantenido) */
.mi-seating-input-wrap{
  position:relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius:14px;
  padding: 10px 12px;
}
.mi-seating-input{
  width:100%;
  border:0; outline:0;
  background: transparent;
  color: var(--text);
  padding: 14px 44px 14px 40px;
  font-size: 16px;
  font-weight: 600;
}
.mi-seating-input-wrap::before{
  content:"";
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.mi-seating-input-wrap:has(.mi-seating-input:focus){
  border-color: color-mix(in oklab, var(--brand) 50%, #fff0);
  box-shadow: 0 0 0 6px rgba(37,81,146,.14);
}

/* Sugerencias (Mantenido) */
.mi-seating-suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  max-height: 280px; overflow:auto; display:none;
  z-index: 30;
}
.mi-seating-suggestions button{
  width:100%; text-align:left;
  padding: 10px 12px 10px 40px;
  background: transparent; border:0; color: var(--text);
  font-size:15px; font-weight:600; cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mi-seating-suggestions button:hover{
  background: rgba(37,81,146,.14);
}
.mi-seating-suggestions .sg-name{ font-weight:700; }
.mi-seating-suggestions .sg-company{
  font-size:13px;
  color: var(--muted);
  font-weight:500;
}

/* Panel resultado (DEBAJO) */
.mi-seating-result{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius:14px;
  min-height: 200px; /* Reducido para ser más compacto */
  padding: clamp(20px,4vw,36px);
  display: grid;
  grid-template-rows: auto 1fr; /* Etiqueta arriba, Contenido principal abajo */
  gap: 16px; /* Separación entre label y el contenido principal */
  align-content: start;
}
.mi-seating-result.is-empty{ opacity:.75; }

/* Etiqueta "TU MESA ES" */
.r-label{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  font-weight: 700;
}

/* CONTENEDOR PRINCIPAL: MESA + NOMBRE (NUEVO LAYOUT) */
.r-main-content{
    display: grid;
    /* Columna 1: Mesa, Columna 2: Nombre (ocupa el resto) */
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 3vw, 24px);
    align-items: center; /* Centrar verticalmente el nombre con la mesa */
}

/* Nombre del invitado */
.r-text{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.r-name{
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  /* El nombre ahora se auto-alinea en el centro vertical */
}
.r-company{
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 600;
  color: var(--muted);
}

/* “Badge” de mesa */
.r-table{
  grid-column: 1 / 2; /* Fija la mesa a la izquierda */
  align-self: start;
  justify-self: start;
  display:flex; align-items:center; justify-content:center;
  width: clamp(120px, 20vw, 160px); /* Ligeramente más compacto */
  height: clamp(120px, 20vw, 160px);
  border-radius: 12px;
  background: #F9B233;
  border: 1px solid rgba(255,255,255,.18);
  color: #0c0f18; /* Texto oscuro para alto contraste */
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .35s ease;
}
.r-table.pulse{ animation: pulse .6s ease-out; }
@keyframes pulse{
  0%{ transform: scale(.92) }
  60%{ transform: scale(1.04) }
  100%{ transform: scale(1) }
}

/* Meta (contador) */
.mi-seating-meta{
  font-size: 14px; /* Aumentado un poco */
  color: var(--muted);
  font-weight: 500;
}
.mi-seating-count::before{ content:"👥 "; }

/* Responsivo para móviles: Apilamos la mesa y el nombre */
@media (max-width: 600px){
  .mi-seating-finder{ margin: 16px; padding: 18px; }

  /* En móviles, volvemos a una columna simple dentro del resultado */
  .r-main-content{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .r-table{
    width: 100px;
    height: 100px;
    font-size: 48px;
    margin: 0 auto; /* Centrar la mesa */
    grid-column: auto;
  }
  .r-name{
    text-align: center;
    font-size: clamp(24px, 6vw, 32px);
  }
  .r-text{ align-items:center; }
  .r-company{ font-size: clamp(14px, 4vw, 18px); }
  .r-label{
    text-align: center;
  }
}


.mi-seating-count{
display:none;}