/* ============================================================
   panel.css — panel del expositor y administración.
   Se carga DESPUÉS de css/style.css y hereda sus variables.

   Pensado para el pulgar: campos altos, botones que se alcanzan con una mano
   y nada de tablas que obliguen a hacer zoom.
   ============================================================ */

.panel-body{padding-bottom:3rem}
.panel{max-width:40rem;margin:0 auto;padding:1.4rem var(--gutter) 2rem}

.panel__titulo{
  margin:0 0 .5rem;font-family:var(--titular);text-transform:uppercase;
  font-size:clamp(1.8rem,8vw,2.6rem);line-height:.95;
}
.panel__bajada{margin:0 0 1.4rem;color:var(--humo);font-size:.95rem}

.cargando{color:var(--humo);text-align:center;padding:2.5rem 0;font-size:.9rem}

/* ─────────────── pestañas ─────────────── */
.pestanas{display:flex;gap:.35rem;margin-bottom:1.1rem;flex-wrap:wrap}
.pestana{
  flex:1 1 auto;min-width:max-content;
  background:var(--tinta-2);border:2px solid var(--linea);color:var(--humo);
  padding:.65rem .7rem;cursor:pointer;
  font:700 .78rem/1 var(--texto);text-transform:uppercase;letter-spacing:.06em;
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
}
.pestana[aria-selected="true"]{background:var(--neon);border-color:var(--neon);color:#000}

.globo{
  background:var(--magenta);color:#fff;border-radius:999px;
  padding:.1rem .4rem;font-size:.7rem;line-height:1.4;
}

/* ─────────────── tarjetas y formularios ─────────────── */
.tarjeta{
  border:2px solid var(--linea);background:var(--tinta-2);
  padding:1.1rem;margin-bottom:1.2rem;
}
.tarjeta__titulo{
  margin:0 0 .9rem;font-family:var(--titular);text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.03em;
}

.campo{display:block;margin-bottom:.95rem}
.campo > span{
  display:block;margin-bottom:.35rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo);font-weight:700;
}
.campo > span small{
  display:inline;text-transform:none;letter-spacing:0;font-weight:400;color:#5d5967;
}
.campo input[type=text],
.campo input[type=tel],
.campo input[type=password],
.campo select,
.campo textarea{
  width:100%;padding:.75rem .8rem;
  background:var(--tinta);color:var(--papel);
  border:2px solid var(--linea);border-radius:2px;
  font-size:1rem;font-family:var(--texto);
}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--neon);outline:none}
.campo input[type=file]{
  width:100%;padding:.6rem;background:var(--tinta);color:var(--humo);
  border:2px dashed var(--linea);font-size:.85rem;
}
.campo--fila{display:flex;align-items:center;gap:.6rem}
.campo--fila input{width:1.15rem;height:1.15rem;accent-color:var(--neon)}
.campo--fila span{margin:0;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--papel)}

.ayuda{margin:.5rem 0 0;font-size:.78rem;color:#5d5967;line-height:1.4}

.error{
  margin:.6rem 0;padding:.65rem .8rem;
  border-left:4px solid var(--magenta);background:rgba(255,46,136,.1);
  font-size:.88rem;color:var(--papel);
}
.ok{
  margin:.6rem 0;padding:.65rem .8rem;
  border-left:4px solid var(--neon);background:rgba(215,255,62,.1);
  font-size:.88rem;color:var(--papel);
}
.aviso-privacidad{
  margin:.8rem 0;font-size:.78rem;color:#5d5967;line-height:1.45;
  border-left:2px solid var(--linea);padding-left:.7rem;
}

.btn--bloque{display:block;width:100%;text-align:center;padding:.85rem}
.acciones{display:flex;gap:.5rem;flex-wrap:wrap}

.previa{margin:-.4rem 0 .95rem;border:2px solid var(--linea);background:var(--tinta)}
.previa img{width:100%;max-height:14rem;object-fit:contain;display:block}

/* ─────────────── estado de la tienda ─────────────── */
.estado{
  padding:.85rem 1rem;margin-bottom:1.2rem;font-size:.9rem;line-height:1.5;
  border:2px solid var(--linea);border-left-width:6px;background:var(--tinta-2);
}
.estado a{color:var(--neon)}
.estado--ok{border-left-color:var(--neon)}
.estado--espera{border-left-color:#ffb03e}
.estado--mal{border-left-color:var(--magenta)}

/* ─────────────── lista de productos del panel ─────────────── */
.lista-prod{display:grid;gap:.7rem}
.fila-prod{
  display:grid;grid-template-columns:4.5rem 1fr;gap:.8rem;
  border:2px solid var(--linea);background:var(--tinta-2);padding:.7rem;
}
.fila-prod--agotado{opacity:.6}
.fila-prod__foto{
  width:4.5rem;height:4.5rem;background:var(--tinta);
  display:grid;place-items:center;overflow:hidden;
}
.fila-prod__foto img{width:100%;height:100%;object-fit:cover}
.minisin{font-size:.6rem;color:#5d5967;text-transform:uppercase;letter-spacing:.1em}
.fila-prod__datos{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fila-prod__datos strong{font-size:1rem;overflow-wrap:anywhere}
.fila-prod__precio{color:var(--neon);font-weight:700;font-size:.9rem}
.fila-prod__acciones{grid-column:1/-1;display:flex;gap:.4rem;flex-wrap:wrap}
.fila-prod__acciones .btn{padding:.45rem .7rem;font-size:.72rem}

.agotado{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--magenta);
}

/* ─────────────── pedidos ─────────────── */
.lista-ped{display:grid;gap:.9rem}
.ped{border:2px solid var(--linea);background:var(--tinta-2);padding:.9rem}
.ped--nuevo{border-color:var(--neon)}
.ped--atendido{opacity:.65}
.ped__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.5rem}
.ped__cliente{font-size:1.05rem}
.ped__fecha{font-size:.72rem;color:#5d5967;white-space:nowrap}
.ped__lineas{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.2rem}
.ped__lineas li{font-size:.9rem;display:flex;justify-content:space-between;gap:.6rem}
.linea__precio{color:var(--humo);white-space:nowrap}
.ped__total{margin:.4rem 0;font-size:.95rem;padding-top:.4rem;border-top:2px dashed var(--linea)}
.ped__total strong{color:var(--neon)}
.ped__recado{margin:.5rem 0;font-size:.9rem;color:var(--humo);font-style:italic}
.ped__acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.ped__sello{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#5d5967;align-self:center}

/* ─────────────── administración ─────────────── */
.resumen{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.resumen__d{
  border:2px solid var(--linea);background:var(--tinta-2);padding:.5rem .8rem;
  font-size:.78rem;color:var(--humo);
}
.resumen__d strong{color:var(--neon);font-size:1.05rem}

.lista-adm{display:grid;gap:.9rem}
.adm{border:2px solid var(--linea);background:var(--tinta-2);padding:.9rem;border-left-width:6px}
.adm--pendiente{border-left-color:#ffb03e}
.adm--aprobado{border-left-color:var(--neon)}
.adm--suspendido{border-left-color:var(--magenta);opacity:.75}
.adm__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.35rem}
.adm__head strong{font-size:1.1rem}
.adm__sello{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo);white-space:nowrap}
.adm__meta{margin:0 0 .4rem;font-size:.8rem;color:var(--humo)}
.adm__meta a{color:var(--neon)}
.adm__desc{margin:0 0 .5rem;font-size:.88rem;color:var(--papel)}
.adm__motivo{margin:0 0 .5rem;font-size:.8rem;color:var(--magenta)}
.adm__acciones{display:flex;gap:.45rem;flex-wrap:wrap}
.adm__acciones .btn{padding:.5rem .75rem;font-size:.74rem}