/* Manuelina — Panel de administración */

.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

/* Barra lateral */
.side {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding: 22px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side .logo { text-align: center; padding: 6px 0 20px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 16px; }
.side .logo .wordmark { font-size: 2rem; color: #fff; }
.side .logo small { display: block; color: rgba(255,255,255,.6); font-weight: 800; letter-spacing: 2px; font-size: .68rem; text-transform: uppercase; }
.side nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side nav a {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 11px;
  color: rgba(255,255,255,.82); text-decoration: none; font-weight: 700; font-size: .96rem; transition: all .15s;
}
.side nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.side nav a.active { background: var(--gold); color: #3a2a06; }
.side nav a .ic { font-size: 1.15rem; }
.side .logout { color: rgba(255,255,255,.65); text-decoration: none; font-weight: 700; font-size: .9rem; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.12); }
.side .logout:hover { color: #fff; }

/* Contenido */
.main { padding: 0; background: var(--cream); }
.topbar {
  background: #fff; border-bottom: 1px solid var(--line); padding: 18px 30px;
  display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 1.35rem; color: var(--navy-ink); font-weight: 800; }
.topbar .today { color: var(--muted); font-weight: 700; font-size: .92rem; }
.content { padding: 26px 30px 60px; max-width: 1150px; }

/* Tarjetas de estadística */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat .n { font-size: 2rem; font-weight: 800; color: var(--navy-ink); line-height: 1.1; }
.stat .l { color: var(--muted); font-weight: 700; font-size: .88rem; margin-top: 2px; }
.stat.gold { background: linear-gradient(160deg,#fff6e6,#fdeccb); border-color: #f2dcae; }
.stat.gold .n { color: var(--gold-deep); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.card-head h2 { margin: 0; font-size: 1.1rem; color: var(--navy-ink); font-weight: 800; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fcfaf6; }
.t-code { font-weight: 800; color: var(--navy); }
.t-muted { color: var(--muted); font-size: .9rem; }

/* Filtros / tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tabs a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 800; font-size: .9rem; }
.tabs a:hover { border-color: var(--navy); color: var(--navy); }
.tabs a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabs a .c { opacity: .7; }

.pill-type { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: .76rem; background: #eef2f8; color: var(--navy); }
.pill-type.dom { background: #e0f2fe; color: #075985; }

/* Selector de estado en línea */
select.estado-sel { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; font-family: var(--font); font-weight: 800; font-size: .85rem; cursor: pointer; background: #fff; }

/* Formularios admin */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.plato-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.plato-row:last-child { border-bottom: none; }
.plato-row .em { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; background: linear-gradient(160deg,#fff6e6,#fdeccb); }
.plato-row .pnombre { font-weight: 800; color: var(--navy-ink); }
.plato-row .pcat { font-size: .82rem; color: var(--muted); font-weight: 700; }

.toggle { position: relative; display: inline-block; width: 46px; height: 26px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: #cfd6df; border-radius: 999px; transition: .2s; cursor: pointer; }
.toggle .track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle input:checked + .track { background: var(--ok); }
.toggle input:checked + .track::before { transform: translateX(20px); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.detail-grid .k { color: var(--muted); font-weight: 700; font-size: .85rem; }
.detail-grid .v { font-weight: 700; color: var(--navy-ink); margin-bottom: 8px; }

.link-btn { color: var(--navy); font-weight: 800; text-decoration: none; font-size: .88rem; }
.link-btn:hover { color: var(--gold-deep); }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state .big { font-size: 2.6rem; margin-bottom: 8px; }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 20px; }
.login-card { background: #fff; border-radius: 22px; padding: 38px 34px; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.login-card .brand { text-align: center; margin-bottom: 22px; }
.login-card .brand .wordmark { font-size: 2.6rem; color: var(--navy); }
.login-card .brand small { display: block; color: var(--muted); font-weight: 800; letter-spacing: 2px; font-size: .72rem; text-transform: uppercase; }

@media (max-width: 780px) {
  .admin { grid-template-columns: 1fr; }
  .side {
    position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center;
    gap: 8px; padding: 10px 12px; flex-wrap: nowrap; overflow-x: auto;
  }
  .side .logo { padding: 0 8px 0 4px; border-bottom: none; margin: 0; border-right: 1px solid rgba(255,255,255,.14); }
  .side .logo .wordmark { font-size: 1.4rem; }
  .side .logo small { display: none; }
  .side nav { flex-direction: row; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .side nav a { white-space: nowrap; padding: 9px 12px; font-size: .9rem; }
  .side nav a .ic { display: none; }
  .side > .head-link { display: none; }
  .side .logout { border-top: none; padding: 9px 12px; white-space: nowrap; }

  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 14px 16px; }
  .stat .n { font-size: 1.6rem; }
  .content { padding: 16px 14px 60px; }
  .topbar { padding: 14px 16px; }
  .topbar h1 { font-size: 1.15rem; }
  .topbar .today { display: none; }

  /* Tablas normales: scroll horizontal dentro de la tarjeta */
  .card-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 11px 12px; }

  /* Tablas marcadas como tarjetas: cada fila se apila y se lee fácil */
  table.table-cards { min-width: 0; }
  table.table-cards thead { display: none; }
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td { display: block; width: 100%; }
  table.table-cards tr {
    border: 1px solid var(--line); border-radius: 14px; margin: 12px; padding: 6px 4px;
    background: #fff; box-shadow: var(--shadow-sm);
  }
  table.table-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 14px; border-bottom: 1px solid var(--line-soft); text-align: right;
  }
  table.table-cards tr td:last-child { border-bottom: none; }
  table.table-cards td::before {
    content: attr(data-label); text-align: left; color: var(--muted);
    font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
  }
  table.table-cards td[data-label=""]::before { content: none; }
  table.table-cards td.cell-ver { justify-content: center; padding-top: 12px; }
  table.table-cards td.cell-ver .link-btn { font-size: 1rem; }
  table.table-cards .t-muted { font-size: .82rem; }
  table.table-cards select.estado-sel { width: 100%; max-width: 190px; }

  .detail-grid { grid-template-columns: 1fr; gap: 6px 0; }
  .notif-bar { flex-direction: column; align-items: stretch; }
}

/* Badge de pedidos por atender en el menú lateral */
.nav-badge {
  margin-left: auto; background: var(--gold); color: #3a2a06;
  border-radius: 999px; font-size: .74rem; font-weight: 800; padding: 1px 8px; min-width: 20px; text-align: center;
}
.side nav a.active .nav-badge { background: var(--navy); color: #fff; }
@media (max-width: 780px) {
  .nav-badge { margin-left: 6px; }
}

/* Barra de notificaciones (panel) */
.notif-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 20px;
}
.notif-bar strong { display: block; color: var(--navy-ink); font-size: 1rem; }
.notif-bar .t-muted { font-size: .88rem; }
.notif-bar .btn { flex-shrink: 0; }

/* Etiqueta "adicional" en el detalle del pedido */
.tag-add {
  display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--gold-deep); background: #fff6e6; border-radius: 6px; padding: 1px 6px; vertical-align: middle;
}