/* ============================================================
   LabsPep — Tienda y panel de administración
   Se carga después de styles.css y reutiliza sus variables.
   ============================================================ */

a.brand { text-decoration: none; color: inherit; }

.menu { display: flex; gap: 6px; align-items: center; }
.menu a {
  padding: 8px 15px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: all 0.18s;
}
.menu a:hover { color: var(--ink); border-color: rgba(120, 200, 255, 0.3); }
.menu a.on {
  color: #04121a;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  border-color: transparent;
}

/* ---------- Botón hamburguesa ----------
   En escritorio no existe: los destinos caben de sobra y un menú a la vista
   se navega mejor que uno que hay que abrir. Aparece por debajo de 960 px,
   que es donde el quinto destino deja de caber al lado de la marca.
   Se dibuja siempre —también en escritorio— para que el CSS de móvil solo
   tenga que mostrarlo, y va oculto aquí. */
.menu-btn {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(120, 200, 255, 0.24);
  border-radius: 12px;
  background: rgba(34, 230, 255, 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.menu-btn:hover { border-color: rgba(120, 200, 255, 0.45); }

/* Las tres barras. Se dibujan con elementos y no con un SVG porque así la
   de arriba y la de abajo pueden girar hasta formar la equis. */
.menu-btn-barras {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 16px;
}
.menu-btn-barras i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s, opacity 0.16s;
}

/* Abierto: la de en medio se va y las otras dos se cruzan sobre ella. Los
   6 px del translate son la mitad del alto total menos el grosor. */
.topbar.abierto .menu-btn { border-color: rgba(120, 200, 255, 0.5); }
.topbar.abierto .menu-btn-barras i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.abierto .menu-btn-barras i:nth-child(2) { opacity: 0; }
.topbar.abierto .menu-btn-barras i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-btn-barras i { transition: none; }
}

.btn-chico { padding: 9px 16px; font-size: 11px; }

/* ---------- Menú del sitio ----------
   El mismo HTML sirve para los dos anchos. En escritorio solo se ven los
   nombres, en línea, como siempre; el icono, la línea que dice qué hace
   cada destino, la foto del catálogo, los grupos y el pie existen para
   el teléfono, donde el menú es una hoja completa (movil.css). Se
   generan con herramientas/menu.mjs: son ocho copias del mismo bloque. */
.menu-icono, .menu-desc, .menu-flecha, .menu-grupo, .menu-pie, .menu-tag,
.menu-entrar, .menu-catalogo-foto, .menu-nombre-largo, .menu-btn-texto { display: none; }
.menu a { display: inline-flex; align-items: center; white-space: nowrap; }

/* En escritorio «Certificados» va pegado al catálogo: es su comprobante.
   El orden del HTML es el del teléfono (herramientas juntas). */
.menu a { order: 2; }
/* «.menu a» pesa más que una clase sola: por eso van con la etiqueta */
.menu a.menu-inicio { order: 0; }
.menu a.menu-catalogo, .menu a.menu-certificados { order: 1; }
.menu a.menu-bitacora { order: 3; }
.menu .salir-cliente { order: 4; }

/* La bitácora es el área de clientes: una pastilla aparte, en ámbar */
.menu-bitacora {
  gap: 8px;
  margin-left: 10px;
  color: var(--ink);
  border-color: rgba(255, 199, 102, 0.4);
}
.menu-bitacora .menu-icono { display: inline-flex; }
.menu-bitacora .menu-icono svg { width: 16px; height: 16px; }
.menu-bitacora:hover { border-color: var(--amber); }
.menu-bitacora.on { color: #04121a; border-color: transparent; }

/* ---------- Vitrina ---------- */
.cargando-tienda {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 17px;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}

.producto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-br);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: rise 0.4s ease both;
}
.producto:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 230, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(34, 230, 255, 0.12);
}

.prod-foto {
  width: 100%;
  /* La etiqueta trae height="400" para que el navegador reserve el hueco antes
     de cargar la foto. Sin este height:auto ese 400 manda y la proporción de
     abajo se ignora: la foto salía de 400 px de alto en cualquier ancho. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #0a1220;
}
.prod-sin-foto {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(34, 230, 255, 0.14), transparent 65%),
    linear-gradient(160deg, #0c1526, #070c16);
}
.prod-sin-foto span {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.36em;
  color: rgba(120, 200, 255, 0.35);
}

.prod-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.prod-nombre {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
}
.prod-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.prod-chip {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 255, 0.22);
  background: rgba(4, 8, 16, 0.6);
  color: var(--ink-dim);
}
.prod-nota { margin: 0; font-size: 14.5px; color: var(--ink-faint); line-height: 1.45; }

.prod-pie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(120, 200, 255, 0.16);
}
.prod-precio {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
}
.prod-consultar { font-size: 15px; color: var(--ink-dim); }
.prod-btn { width: 100%; }
.prod-sin-numero { font-size: 13px; color: var(--rose); }

.foot-tienda { flex-direction: column; align-items: stretch; gap: 18px; }
.foot-legal { max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.foot-legal p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-faint); }
.foot-legal b { color: var(--ink-dim); }
.foot-linea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 200, 255, 0.1);
}
.foot-linea a { color: var(--ink-faint); text-decoration: none; }
.foot-linea a:hover { color: var(--cyan); }

/* ---------- Panel ---------- */
.wrap-admin { max-width: 940px; }
.panel-login { max-width: 440px; margin: 40px auto; }
.form-login { display: grid; gap: 16px; }
.form-login input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 11px;
  outline: none;
}
.form-login input[type="password"]:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.14);
}
.login-error {
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 139, 0.35);
  background: rgba(255, 107, 139, 0.09);
  color: var(--rose);
  font-size: 14.5px;
}
.login-error[hidden] { display: none; }

.admin-lede { margin: 0 0 18px; color: var(--ink-dim); font-size: 15.5px; }
.admin-avisos:empty { display: none; }
.admin-aviso {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14.5px;
  border: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(34, 230, 255, 0.07);
  color: var(--ink-dim);
}
.admin-aviso.ok {
  border-color: rgba(125, 255, 155, 0.4);
  background: rgba(125, 255, 155, 0.09);
  color: var(--lime);
}
.admin-aviso.error {
  border-color: rgba(255, 199, 102, 0.45);
  background: rgba(255, 199, 102, 0.09);
  color: var(--amber);
}

.productos-admin { display: grid; gap: 14px; }
.admin-vacio { padding: 30px; text-align: center; color: var(--ink-faint); }

.producto-admin {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 13px;
  background: rgba(6, 10, 20, 0.6);
}

.admin-foto-col { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.admin-foto {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(120, 200, 255, 0.2);
  background: #0a1220;
}
.admin-sin-foto {
  display: grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.admin-subir { cursor: pointer; margin: 0; }
.admin-subir span {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--cyan);
  border: 1px solid rgba(34, 230, 255, 0.3);
  border-radius: 999px;
  transition: all 0.18s;
}
.admin-subir:hover span { background: rgba(34, 230, 255, 0.12); }

.admin-quitar,
.admin-mover button {
  background: none;
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 8px;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.18s;
}
.admin-quitar:hover,
.admin-mover button:hover { color: var(--ink); border-color: var(--cyan); }
.admin-borrar:hover { color: var(--rose); border-color: var(--rose); }

.prod-estado-img {
  font-size: 11.5px;
  color: var(--cyan);
  min-height: 14px;
  text-align: center;
}
.prod-estado-coa { font-size: 11.5px; color: var(--cyan); }

/* El error se queda junto al botón que lo produjo, no solo arriba del panel.
   En ámbar y no en cian: al lado de un "Subiendo…" del mismo color, un fallo
   se lee como si fuera otro paso más. */
.prod-estado-img.estado-error,
.prod-estado-coa.estado-error {
  color: var(--amber);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Certificado de análisis, en la fila del producto ----------
   Va con el verde del respaldo, igual que en la página pública: en este
   proyecto ese color es el de la prueba comprobable. */
.admin-coa {
  padding: 12px 14px;
  border: 1px solid rgba(125, 255, 155, 0.2);
  border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0;
  background: rgba(125, 255, 155, 0.05);
}
.admin-coa-fila { display: flex; gap: 14px; align-items: flex-start; }
.admin-coa-lado { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.admin-coa-lamina { flex: none; width: 90px; }
.admin-coa-ver { display: block; }
.admin-coa-ver img,
.admin-coa-sin {
  width: 90px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid rgba(125, 255, 155, 0.3);
}
.admin-coa-ver img { object-fit: cover; object-position: top center; background: #f4f7fb; }
.admin-coa-sin {
  display: grid;
  place-items: center;
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-faint);
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
}

.admin-coa-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* El aviso del proveedor. Va en ámbar y no en rojo: no es un error, es algo
   que hay que mirar antes de publicar. */
.admin-coa-nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.admin-coa-nota b { color: var(--amber); }

@media (max-width: 640px) {
  .admin-coa-fila { flex-direction: column; }
  .admin-coa-lamina { width: 100%; }
  .admin-coa-ver img, .admin-coa-sin { width: 110px; height: 146px; }
}

.admin-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.campo-admin { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo-admin label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.campo-admin input[type="text"],
.campo-admin input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.7);
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 9px;
  outline: none;
}
.campo-admin input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.12);
}

.admin-fila-final {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.01em;
}
.admin-check input { width: 17px; height: 17px; accent-color: var(--cyan); }
.admin-check span { font-size: 14px; color: var(--ink-dim); }
.admin-mover { display: flex; gap: 6px; }

.admin-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.admin-acciones .btn { text-decoration: none; }

@media (max-width: 640px) {
  .producto-admin { grid-template-columns: 1fr; }
  .admin-campos { grid-template-columns: 1fr; }
  .admin-foto-col { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .menu a { padding: 7px 11px; font-size: 10px; }
}

/* ---------- Estado del sistema ---------- */
.panel-estado { margin-bottom: 20px; }
.estado-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.estado-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 11px;
  background: rgba(4, 8, 16, 0.55);
}
.estado-item b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.estado-item span:not(.estado-punto) {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.estado-punto {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  flex: none;
}
.estado-item.si { border-color: rgba(125, 255, 155, 0.3); }
.estado-item.si .estado-punto { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.estado-item.no { border-color: rgba(255, 199, 102, 0.4); background: rgba(255, 199, 102, 0.06); }
.estado-item.no .estado-punto { background: var(--amber); box-shadow: 0 0 10px var(--amber); }