/* ============================================================
   Panel de administración - Terraza de la 96
   Se apoya en estilos.css; aquí va solo lo propio del panel.
   ============================================================ */

body.admin{background:var(--gris-claro)}

.admin-cab{
  background:#fff;border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:100;
}
.admin-cuerpo{padding:26px 20px 60px;max-width:860px}
.admin-centro{text-align:center;padding:70px 20px;color:var(--gris)}

.admin-caja{
  background:#fff;border-radius:var(--radio);
  padding:30px 26px;max-width:440px;margin:26px auto;
  box-shadow:var(--sombra);
}
.admin-caja h1{font-size:25px;font-weight:800;margin-bottom:8px;letter-spacing:-.5px}
.admin-texto{font-size:15px;color:var(--gris);line-height:1.55;margin-bottom:18px}

/* ---- pestañas ---- */
.admin-tabs{
  display:flex;gap:6px;background:#fff;
  padding:6px;border-radius:999px;margin-bottom:24px;
  box-shadow:var(--sombra);
}
.admin-tab{
  flex:1;padding:11px 14px;border-radius:999px;
  font-size:14.5px;font-weight:700;color:var(--gris);
  transition:background .15s,color .15s;
}
.admin-tab.activo{background:var(--amarillo);color:var(--negro)}

.admin-panel{
  background:#fff;border-radius:var(--radio);
  padding:26px 24px;box-shadow:var(--sombra);
}
.admin-sub{
  font-size:15px;font-weight:800;margin:26px 0 12px;
  letter-spacing:.3px;
}

/* ---- el buscador: nombre + horario + subseccion ----
   El mismo gesto del panel de Megarecarga. */
.filtro-buscar{
  width:100%;border:2px solid var(--borde);border-radius:12px;background:#fff;
  padding:12px 14px;font-size:15px;font-family:inherit;
}
.filtro-buscar:focus{outline:none;border-color:var(--amarillo)}
.filtro-chips{display:flex;gap:7px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.filtro-chips::-webkit-scrollbar{display:none}
.filtro-chips button{
  flex:none;border:1.5px solid var(--borde);background:#fff;color:var(--negro);
  border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:700;
}
.filtro-chips button.on{background:var(--negro);border-color:var(--negro);color:#fff}
.filtro-chips.sub button{border-radius:999px;font-weight:600;font-size:13px;padding:6px 12px}
.filtro-chips.sub button.on{background:var(--verde);border-color:var(--verde)}
.filtro-cuenta{font-size:12.5px;color:var(--gris);margin:8px 0 12px}

/* ---- el menu del dia que esta saliendo ---- */
.md-hoy{
  display:flex;gap:14px;align-items:center;margin-bottom:14px;
  background:#FFF8E1;border:2px solid var(--amarillo-afiche);border-radius:16px;padding:12px;
}
.md-hoy img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:12px;flex:none}
.md-hoy.de-noche img{background:#000}
.md-hoy small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde)}
.md-hoy b{display:block;font-family:var(--gordas);font-weight:800;font-size:22px;line-height:1.05}
.md-hoy .precio{font-family:var(--gordas);font-weight:800;color:var(--rojo);font-size:18px}
.md-hoy .estado{font-size:12.5px;color:var(--gris);margin-top:2px;line-height:1.4}
.md-hoy.apagado{background:var(--gris-claro);border-color:var(--borde)}

.md-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.md-plato{
  display:flex;flex-direction:column;text-align:left;background:#fff;
  border:2px solid var(--borde);border-radius:14px;padding:8px;
  transition:border-color .15s,box-shadow .15s;
}
.md-plato:hover{border-color:#C9C9C9}
.md-plato-foto{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;overflow:hidden}
.md-plato.de-noche .md-plato-foto{background:#000}
.md-plato-foto img{width:100%;height:100%;object-fit:contain}
.md-plato b{font-size:13.5px;line-height:1.2;margin-top:6px}
.md-plato small{font-size:11.5px;color:var(--gris)}
.md-plato .precio{font-family:var(--gordas);font-weight:800;color:var(--rojo);font-size:15px;margin-top:2px}
.md-plato.es-hoy{border-color:var(--amarillo-afiche)}
.md-plato.escogido{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(216,35,42,.18)}

/* ---- el boton de guardar no se pierde al bajar por la lista ---- */
.admin-pie-fijo{
  position:sticky;bottom:0;margin:18px -24px -26px;padding:16px 24px 18px;
  background:linear-gradient(rgba(255,255,255,0),#fff 32%);
  border-radius:0 0 var(--radio) var(--radio);
}
.admin-pie-fijo .btn{width:100%}

/* ---- precios ---- */
.precios-lista{border-top:1px solid var(--borde)}
.fila-precio{
  display:grid;grid-template-columns:1fr auto auto;gap:6px 16px;align-items:center;
  padding:12px 6px;border-bottom:1px solid var(--borde);
}
.fp-nombre b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.fp-nombre small{font-size:12px;color:var(--gris)}
.fp-acabo{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gris);cursor:pointer;white-space:nowrap}
.fp-acabo input{width:19px;height:19px;accent-color:var(--rojo)}
.fp-precio{text-align:right}
.fp-precio input{
  width:112px;border:2px solid var(--borde);border-radius:10px;padding:9px 10px;
  text-align:right;font-size:15px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums;
}
.fp-precio input:focus{outline:none;border-color:var(--amarillo)}
.fp-antes{display:block;font-size:11.5px;color:#A61B1B;text-decoration:line-through;margin-top:2px}
.fp-base{display:block;font-size:11px;color:var(--gris);margin-top:2px}
.fila-precio.cambio{background:#FFF6D6}
.fila-precio.cambio .fp-precio input{border-color:var(--amarillo-afiche)}
.fila-precio.acabado .fp-nombre b{text-decoration:line-through;color:var(--gris)}
.fila-precio.acabado .fp-acabo{color:var(--rojo)}

/* ---- filtros del reporte ---- */
.admin-filtros{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.admin-filtro{
  padding:9px 18px;border-radius:999px;
  background:var(--gris-claro);color:var(--negro);
  font-size:13.5px;font-weight:700;transition:background .15s;
}
.admin-filtro:hover{background:#E8E8E8}
.admin-filtro.activo{background:var(--negro);color:#fff}

/* ---- tarjetas de resumen ---- */
.admin-tarjetas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;
}
.admin-tarjeta{
  background:var(--gris-claro);border-radius:14px;padding:16px 14px;text-align:center;
}
.admin-tarjeta .num{font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.5px}
.admin-tarjeta .et{font-size:11.5px;color:var(--gris);margin-top:4px;font-weight:600}

/* ---- tabla ---- */
.admin-tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-tabla{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.admin-tabla th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--gris);padding:8px 10px;border-bottom:2px solid var(--borde);
}
.admin-tabla td{padding:11px 10px;border-bottom:1px solid var(--borde)}
.admin-tabla td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.admin-tabla th:nth-child(n+2){text-align:right}
.admin-tabla tbody tr:hover{background:#FAFAFA}
.admin-vacio{text-align:center;color:var(--gris);padding:30px 10px;font-size:14px}

/* ---- top de platos ---- */
.admin-top{list-style:none;counter-reset:t}
.admin-top li{
  counter-increment:t;display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--borde);font-size:14.5px;
}
.admin-top li::before{
  content:counter(t);flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--gris-claro);color:var(--negro);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;
}
.admin-top .veces{margin-left:auto;font-weight:800;color:var(--gris)}

@media (max-width:600px){
  .admin-tarjetas{grid-template-columns:1fr;gap:9px}
  .admin-tarjeta{display:flex;align-items:center;justify-content:space-between;text-align:left}
  .admin-tarjeta .et{margin-top:0}
  .admin-cuerpo{padding:18px 14px 50px}
  .admin-panel{padding:20px 16px}
  .admin-tab{padding:11px 8px;font-size:13.5px}
  .admin-pie-fijo{margin:18px -16px -20px;padding:16px 16px 16px}
  /* En el celular el nombre va arriba y debajo, en un solo renglon,
     "Hoy se acabó" a la izquierda y el precio a la derecha. */
  .fila-precio{grid-template-columns:1fr auto}
  .fp-nombre{grid-column:1 / -1}
}