/* ==========================================================================
   Dulcitos Gluten Free  ·  admin.css
   Panel de administrador. Reutiliza a propósito las clases del sitio
   público (.panel-top, .velo, .campo-linea, .chip, .boton*, .entrada,
   .error-personalizar, .etiqueta-anticipado, .tostada): así el panel se ve
   de la misma familia visual sin repetir reglas, y cualquier ajuste de
   paleta que se haga en base.css se refleja acá también.
   ========================================================================== */

.admin-body {
  min-height: 100vh;
  background: var(--bg);
}

/* ---------- Login ---------- */
.admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(178deg, var(--blanco) 0%, var(--crema-100) 55%, var(--tiffany-50) 100%);
}
.admin-login-tarjeta {
  width: min(100%, 380px);
  display: grid;
  justify-items: center;
  gap: .9rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 2.8rem);
  border-radius: var(--r-bloque);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde-tiffany), 0 30px 60px -40px rgb(var(--sombra) / .6);
}
.admin-login-tarjeta img { border-radius: 50%; }
.admin-login-tarjeta h1 { font-size: 1.4rem; margin-top: .2rem; }
.admin-login-tarjeta .campo { width: 100%; text-align: left; display: grid; gap: .4rem; }
.admin-login-tarjeta .campo label { font-size: .89rem; font-weight: 600; }
.admin-login-error {
  display: none;
  align-items: center;
  gap: .4rem;
  font-size: .84rem;
  color: var(--alerta);
  width: 100%;
  text-align: left;
}
.admin-login-error[data-visible="true"] { display: flex; }

/* ---------- Encabezado ---------- */
.admin-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1.1rem, 4vw, 2.2rem);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-tiffany);
}
.admin-header-marca { display: flex; align-items: center; gap: .65rem; }
.admin-header-marca img { border-radius: 50%; }
.admin-header-marca b { display: block; font-family: var(--f-titulo); font-size: 1rem; }
.admin-header-marca span { display: block; font-size: .74rem; color: var(--texto-tenue); }
.admin-header-acciones { display: flex; align-items: center; gap: 1.1rem; }

/* ---------- Contenido ---------- */
.admin-contenido {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2.2rem) 4rem;
}
.admin-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.3rem;
}
.admin-barra h2 { font-size: 1.5rem; }
.admin-barra-acciones { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.admin-buscador {
  position: relative;
  min-width: 220px;
}
.admin-buscador i {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--texto-tenue); font-size: 1.1rem;
}
.admin-buscador input {
  width: 100%;
  min-height: 44px;
  padding: .6rem .9rem .6rem 2.4rem;
  border-radius: var(--r-boton);
  border: 1.5px solid var(--borde-tiffany);
  background: var(--superficie);
  color: var(--texto);
  font-size: .92rem;
}
.admin-buscador input:focus { outline: none; border-color: var(--rosa-300); box-shadow: 0 0 0 4px var(--rosa-100); }

.admin-filtros {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-block: .3rem;
  margin-bottom: 1rem;
}

.admin-aviso {
  display: none;
  padding: .8rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: var(--r-campo);
  background: var(--tinte-rosa);
  color: var(--rosa-700);
  font-size: .88rem;
}
.admin-aviso[data-visible="true"] { display: block; }

.admin-vacio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--texto-tenue);
}

/* ---------- Grilla de productos ---------- */
.admin-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .admin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.admin-tarjeta {
  display: flex;
  gap: .9rem;
  padding: .9rem;
  border-radius: var(--r-card);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
}
.admin-tarjeta-foto {
  width: 78px; height: 78px;
  flex-shrink: 0;
  border-radius: var(--r-campo);
  overflow: hidden;
  background: var(--superficie-2);
}
.admin-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.admin-tarjeta-sin-foto {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--texto-tenue);
  font-size: 1.4rem;
}
.admin-tarjeta-cuerpo { display: grid; gap: .3rem; min-width: 0; flex: 1; align-content: start; }
.admin-tarjeta-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; }
.admin-tarjeta-cuerpo h3 { font-size: .98rem; line-height: 1.3; }
.admin-tarjeta-precio { font-size: .88rem; font-weight: 600; color: var(--precio); }
.admin-tarjeta-acciones { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.admin-boton-borrar { color: var(--alerta); }
.admin-boton-borrar:hover { background: var(--tinte-rosa); }

/* ---------- Panel de edición (mismo patrón que .panel-carrito) ---------- */
.panel-editor {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-panel) + 1);
  width: min(100%, 520px);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  box-shadow: -34px 0 80px -44px rgba(0, 0, 0, .55);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), visibility .4s;
}
.panel-editor[data-abierto="true"] { transform: translateX(0); visibility: visible; }

.panel-editor-cuerpo {
  overflow-y: auto;
  padding: 1.4rem 1.5rem calc(6rem + env(safe-area-inset-bottom));
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.panel-editor-pie {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: .8rem;
  padding: 1rem 0 0;
  margin-top: .3rem;
  background: var(--bg);
  border-top: 1px solid var(--borde);
}

.admin-separador { border: 0; border-top: 1px dashed var(--borde-tiffany); margin: .2rem 0; }
.admin-subtitulo { font-size: .89rem; font-weight: 600; }
.admin-checks { display: flex; flex-wrap: wrap; gap: .9rem; }
.admin-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.admin-check input { width: 18px; height: 18px; accent-color: var(--tiffany-500); }

.admin-subformulario {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--r-campo);
  background: var(--tinte-tiffany);
}

/* ---------- Subida de foto ---------- */
.admin-foto-subida { display: flex; gap: 1rem; align-items: flex-start; }
.admin-foto-vista {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border-radius: var(--r-campo);
  overflow: hidden;
  background: var(--superficie-2);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--borde);
}
.admin-foto-vista img { width: 100%; height: 100%; object-fit: cover; }
.admin-foto-vista[data-vacia="true"] i { font-size: 1.7rem; color: var(--texto-tenue); }
.admin-foto-vista[data-vacia="false"] i { display: none; }
.admin-foto-controles { display: grid; gap: .4rem; }
.admin-boton-archivo { display: inline-flex; cursor: pointer; }
.admin-foto-error {
  display: none;
  color: var(--alerta);
  font-size: .82rem;
}
.admin-foto-error[data-visible="true"] { display: block; }

/* ---------- Opciones de variante ---------- */
.admin-opciones { display: grid; gap: .6rem; }
.admin-opcion-fila {
  display: grid;
  grid-template-columns: 1fr 1.3fr .8fr auto auto auto;
  gap: .5rem;
  align-items: center;
}
.admin-opcion-fila .entrada { min-height: 42px; padding: .5rem .7rem; font-size: .88rem; }
.admin-opcion-chica { font-size: .76rem; white-space: nowrap; gap: .3rem; }
.admin-opcion-chica input { width: 15px; height: 15px; }
.admin-aviso-peso {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .7rem .9rem;
  border-radius: var(--r-campo);
  background: var(--rosa-50);
  color: var(--rosa-700);
}
.admin-aviso-peso i { flex-shrink: 0; margin-top: .1rem; }
.admin-aviso-peso code {
  background: rgba(0,0,0,.06);
  padding: .05rem .35rem;
  border-radius: 4px;
  font-size: .85em;
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .panel-editor { width: 100%; }
  .admin-opcion-fila { grid-template-columns: 1fr 1fr; grid-template-areas: "id nombre" "precio precio" "sl sa" "quitar quitar"; }
  .admin-opcion-fila .admin-opcion-id { grid-area: id; }
  .admin-opcion-fila .admin-opcion-nombre { grid-area: nombre; }
  .admin-opcion-fila .admin-opcion-precio { grid-area: precio; }
  .admin-header-marca span { display: none; }
}