/* STARLIKE VISUAL 177.0
   SOLO SALON / BUFFET.
   Sin JS. Sin backend. Sin Supabase. */

#view-restaurant{
  --sl-pink:#ff2f91;
  --sl-pink2:#ff68b4;
  --sl-yellow:#ffd43b;
  --sl-cream:#fff6df;
  --sl-text:#f7f2ea;
  --sl-muted:#b9b2aa;
  --sl-bg:#0d0d12;
  --sl-panel:#17171e;
  --sl-panel2:#202029;
  --sl-line:#373742;
  --sl-free:#123521;
  --sl-free-line:#2f8c59;
  --sl-occupied:#372015;
  --sl-occupied-line:#d78032;
  --sl-buffet:#321129;
  --sl-buffet-line:#ff2f91;
  position:relative;
}

/* Textura urbana discreta, sin afectar otras pantallas */
#view-restaurant::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:-1;
  pointer-events:none;
  border-radius:18px;
  background:
    radial-gradient(circle at 9% 10%,rgba(255,47,145,.12),transparent 24%),
    radial-gradient(circle at 92% 4%,rgba(255,212,59,.09),transparent 24%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 16px),
    linear-gradient(180deg,#0c0c11,#101017);
}

/* Encabezado */
#view-restaurant .toolbar{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:12px;
  background:
    linear-gradient(90deg,rgba(255,47,145,.08),rgba(255,212,59,.04)),
    #131319;
}

#view-restaurant .section-title,
#view-restaurant h2,
#view-restaurant h3,
#view-restaurant h4{
  color:var(--sl-cream)!important;
}

#view-restaurant .eyebrow{
  color:var(--sl-yellow)!important;
  letter-spacing:.09em;
  font-weight:900;
}

#view-restaurant .muted,
#view-restaurant small{
  color:var(--sl-muted)!important;
}

/* KPI superiores */
#view-restaurant .cards .metric,
#view-restaurant .mini-cards .metric,
#view-restaurant .metric{
  border:1px solid var(--sl-line)!important;
  border-radius:14px!important;
  background:
    linear-gradient(155deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),
    var(--sl-panel)!important;
  box-shadow:none!important;
}

#view-restaurant .metric span{
  color:var(--sl-muted)!important;
}

#view-restaurant .metric strong{
  color:#fff!important;
  font-size:20px!important;
}

#restFree{color:#64e89d!important;}
#restOccupied{color:#ffb153!important;}
#restBuffets{color:var(--sl-pink2)!important;}
#restOpenSales{color:var(--sl-yellow)!important;}

/* Filtros por area */
#view-restaurant #restaurantAreaChips{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}

#view-restaurant #restaurantAreaChips .chip{
  min-height:35px;
  padding:7px 13px;
  border:1px solid #3a3a44!important;
  border-radius:999px!important;
  background:#181820!important;
  color:#c8c1ba!important;
  font-weight:800;
}

#view-restaurant #restaurantAreaChips .chip.active{
  background:var(--sl-yellow)!important;
  border-color:var(--sl-yellow)!important;
  color:#18120a!important;
  box-shadow:0 5px 16px rgba(255,212,59,.14);
}

/* MAPA: las mesas deben entenderse con una mirada */
#view-restaurant #restaurantTableGrid{
  gap:10px!important;
}

#view-restaurant .restaurant-table{
  min-height:112px!important;
  padding:13px!important;
  border-radius:14px!important;
  text-align:left!important;
  box-shadow:none!important;
  transition:transform .10s ease,border-color .10s ease,filter .10s ease;
}

#view-restaurant .restaurant-table:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

#view-restaurant .restaurant-table.free{
  background:linear-gradient(145deg,#11311f,#0e2518)!important;
  border:1px solid var(--sl-free-line)!important;
}

#view-restaurant .restaurant-table.occupied{
  background:linear-gradient(145deg,#382114,#29180f)!important;
  border:1px solid var(--sl-occupied-line)!important;
}

#view-restaurant .restaurant-table.buffet{
  background:
    radial-gradient(circle at 92% 14%,rgba(255,212,59,.12),transparent 25%),
    linear-gradient(145deg,#35112c,#24101f)!important;
  border:1px solid var(--sl-buffet-line)!important;
  box-shadow:inset 0 0 0 1px rgba(255,47,145,.10)!important;
}

#view-restaurant .restaurant-table .table-code{
  color:var(--sl-yellow)!important;
  font-size:9px!important;
  letter-spacing:.08em;
  font-weight:900;
}

#view-restaurant .restaurant-table b{
  display:block;
  margin-top:3px;
  color:#fff!important;
  font-size:15px!important;
}

#view-restaurant .restaurant-table small{
  display:block;
  margin-top:5px;
  color:#d0c8c0!important;
  font-size:10px!important;
}

#view-restaurant .restaurant-table em{
  display:block;
  margin-top:7px;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(255,47,145,.13);
  color:#ffd7ea!important;
  font-style:normal!important;
  font-size:10px!important;
  font-weight:850;
}

#view-restaurant .restaurant-table strong{
  display:block;
  margin-top:7px;
  color:var(--sl-yellow)!important;
  font-size:15px!important;
}

#view-restaurant .rest-timer{
  color:#fff!important;
  font-weight:900;
}

/* Panel de sesion/mesa */
#view-restaurant .panel,
#view-restaurant .restaurant-session-panel{
  border:1px solid var(--sl-line)!important;
  border-radius:15px!important;
  background:
    linear-gradient(155deg,rgba(255,47,145,.025),rgba(255,212,59,.018)),
    var(--sl-panel)!important;
  color:var(--sl-text)!important;
}

#view-restaurant .panel p,
#view-restaurant .panel div,
#view-restaurant .panel span,
#view-restaurant .panel label{
  color:inherit;
}

#view-restaurant .panel table th{
  color:#bfb7af!important;
}

#view-restaurant .panel table td{
  color:#f3ede6!important;
}

/* Acciones: rosa = accion principal, amarillo = buffet */
#view-restaurant .btn.primary,
#view-restaurant #restClose{
  background:linear-gradient(135deg,var(--sl-pink),#dc1f77)!important;
  border-color:transparent!important;
  color:white!important;
  font-weight:900!important;
}

#view-restaurant #restBuffetRound{
  background:var(--sl-yellow)!important;
  border-color:var(--sl-yellow)!important;
  color:#17120c!important;
  font-weight:950!important;
}

#view-restaurant .btn{
  border-radius:9px!important;
}

/* ======================================================
   DIALOGOS SALON / BUFFET
   Corrige especificamente texto negro sobre fondo negro.
   ====================================================== */
#restaurantDialog{
  width:min(680px,calc(100vw - 28px))!important;
  max-height:88vh!important;
  padding:0!important;
  border:1px solid #464651!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,47,145,.14),transparent 28%),
    linear-gradient(180deg,#191920,#101015)!important;
  color:var(--sl-text,#f7f2ea)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.58)!important;
}

#restaurantDialog::backdrop{
  background:rgba(0,0,0,.72)!important;
  backdrop-filter:blur(2px);
}

#restaurantDialog form,
#restaurantDialog .dialog-body,
#restaurantDialog > div{
  color:#f7f2ea!important;
}

#restaurantDialog h1,
#restaurantDialog h2,
#restaurantDialog h3,
#restaurantDialog h4,
#restaurantDialog #restaurantDialogTitle{
  color:#fff!important;
}

#restaurantDialog #restaurantDialogEyebrow,
#restaurantDialog .eyebrow{
  color:#ffd43b!important;
  font-weight:950!important;
  letter-spacing:.08em;
}

#restaurantDialog p,
#restaurantDialog small,
#restaurantDialog label,
#restaurantDialog span,
#restaurantDialog div{
  color:#e9e0d7;
}

#restaurantDialog .muted{
  color:#c0b7ae!important;
}

/* El bloque que en la captura se veia negro con texto negro */
#restaurantDialog .notice,
#restaurantDialog .empty,
#restaurantDialog [class*="notice"]{
  background:#24242d!important;
  border:1px solid #454550!important;
  border-left:3px solid #ff2f91!important;
  color:#fff4e6!important;
  border-radius:9px!important;
}

#restaurantDialog .notice *,
#restaurantDialog .empty *,
#restaurantDialog [class*="notice"] *{
  color:#fff4e6!important;
}

#restaurantDialog input,
#restaurantDialog select,
#restaurantDialog textarea{
  width:100%;
  min-height:42px;
  background:#0e0e13!important;
  border:1px solid #4a4a55!important;
  border-radius:8px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

#restaurantDialog input::placeholder,
#restaurantDialog textarea::placeholder{
  color:#8f8990!important;
  -webkit-text-fill-color:#8f8990!important;
}

#restaurantDialog input:focus,
#restaurantDialog select:focus,
#restaurantDialog textarea:focus{
  outline:none!important;
  border-color:#ffd43b!important;
  box-shadow:0 0 0 3px rgba(255,212,59,.11)!important;
}

#restaurantDialog option{
  background:#16161d!important;
  color:#fff!important;
}

#restaurantDialog .form-grid{
  gap:10px!important;
}

#restaurantDialog .form-grid label{
  color:#ddd4ca!important;
  font-weight:800!important;
  font-size:11px!important;
}

/* Pie del dialogo */
#restaurantDialog .dialog-actions,
#restaurantDialog .button-row{
  border-top:1px solid #303039;
  padding-top:10px;
}

#restaurantDialog button,
#restaurantDialog .btn{
  min-height:38px;
  border-radius:9px!important;
  color:#fff!important;
}

#restaurantDialog #restaurantDialogSave,
#restaurantDialog .btn.primary{
  background:linear-gradient(135deg,#ff2f91,#d91f76)!important;
  border-color:transparent!important;
  color:#fff!important;
  font-weight:950!important;
}

#restaurantDialog #restaurantDialogCancel{
  background:#292932!important;
  border-color:#464650!important;
  color:#ddd5cd!important;
}

/* Buffets: selección más reconocible */
#restaurantDialog #rdBuffet,
#restaurantDialog #rdProduct{
  border-color:rgba(255,47,145,.52)!important;
}

#restaurantDialog #rdBuffet:focus,
#restaurantDialog #rdProduct:focus{
  border-color:#ffd43b!important;
}

/* Tablas/listas dentro del dialog */
#restaurantDialog table{
  color:#f7f2ea!important;
}

#restaurantDialog th{
  color:#bdb5ad!important;
  border-color:#34343d!important;
}

#restaurantDialog td{
  color:#f4ede5!important;
  border-color:#2d2d36!important;
}

/* Móvil / pantalla angosta */
@media(max-width:760px){
  #view-restaurant .restaurant-table{
    min-height:100px!important;
  }
  #restaurantDialog{
    width:calc(100vw - 18px)!important;
  }
}