/* ==========================================================================
   Don Esquite POS — BACKOFFICE (Fase 6)
   Reusa la tabla de Bodega y los modales. Acá va solo lo propio.
   ========================================================================== */

/* ==========================================================================
   FILA DEL LISTADO
   ========================================================================== */
.fila-admin { cursor: pointer; }

.celda-precio {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Producto apagado: sigue en la lista pero no se vende */
tr[data-activo="no"] { opacity: 0.5; }
tr[data-activo="no"]:hover { opacity: 0.85; }
tr[data-activo="no"] .celda-insumo__nombre { text-decoration: line-through; }

/* Interruptor de activo/inactivo */
.switch {
  position: relative;
  display: inline-flex; align-items: center;
  width: 42px; height: 24px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  transition: background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: var(--surface-1);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-spring);
}
.switch[aria-checked="true"] { background: var(--success); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

/* Distintivos de la fila */
.tag-admin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.tag-admin--reventa { background: var(--info-soft); color: var(--info); }
.tag-admin--sinreceta { background: var(--warning-soft); color: var(--warning); }
.tag-admin--espejo { background: var(--brand-soft); color: var(--brand-text); }

.celda-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* ==========================================================================
   FORMULARIO
   ========================================================================== */
.form-admin { display: flex; flex-direction: column; gap: var(--s-4); }
.form-admin__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.form-admin__fila--3 { grid-template-columns: 1fr 1fr 1fr; }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

/* Selector de emoji */
.emojis {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  max-height: 132px;
  overflow-y: auto;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.emoji-op {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  font-size: 1.25rem;
  transition: all var(--t-fast) var(--ease-out);
}
.emoji-op:hover { background: var(--surface-1); transform: scale(1.12); }
.emoji-op[aria-selected="true"] {
  background: var(--brand);
  box-shadow: var(--sh-brand);
}

/* Vista previa de la tarjeta */
.previa {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.previa__tarjeta {
  position: relative;
  width: 120px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.previa__media {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  font-size: 2rem;
}
.previa__nombre {
  padding: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  line-height: var(--leading-snug);
}
.previa__precio {
  position: absolute;
  top: 6px; right: 6px;
  padding: 3px 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  color: #1c1c1e;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.previa__texto { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }

/* Casilla de reventa, con su explicación */
.casilla {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: left;
  width: 100%;
  transition: background var(--t-fast) var(--ease-out);
}
.casilla:hover { background: var(--surface-3); }
.casilla[aria-checked="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.casilla__marca {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
  color: transparent;
  flex-shrink: 0; margin-top: 1px;
}
.casilla__marca svg { width: 14px; height: 14px; }
.casilla[aria-checked="true"] .casilla__marca {
  background: var(--brand); color: var(--on-brand); box-shadow: none;
}
.casilla__txt { flex: 1; min-width: 0; }
.casilla__titulo { font-size: var(--text-md); font-weight: 700; }
.casilla__nota { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); margin-top: 2px; }

/* ==========================================================================
   ESTADO DEL CATÁLOGO (panel derecho)
   ========================================================================== */
.estado-cat { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }

.estado-cat__origen {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
}
.estado-cat__origen--semilla { background: var(--warning-soft); color: var(--warning); }
.estado-cat__origen--firestore { background: var(--success-soft); color: var(--success); }
.estado-cat__origen svg { width: 20px; height: 20px; flex-shrink: 0; }
.estado-cat__origen small {
  display: block;
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  opacity: 0.85;
}
.estado-cat__origen strong { font-size: var(--text-md); font-weight: 700; }

.estado-cat__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.estado-cat__cifra {
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: center;
}
.estado-cat__cifra strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.estado-cat__cifra small { font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; }
.estado-cat__cifra--alerta { background: var(--warning-soft); }
.estado-cat__cifra--alerta strong { color: var(--warning); }

.estado-cat__aviso {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* Barra de avance de la publicación */
.publicando {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
}
.publicando__barra {
  display: block; height: 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.publicando__barra span {
  display: block; height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width var(--t-normal) var(--ease-out);
}
.publicando__txt { font-size: var(--text-xs); font-weight: 700; color: var(--brand-text); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
  .tabla-insumos .col-tags { display: none; }
}

@media (max-width: 920px) {
  .form-admin__fila,
  .form-admin__fila--3 { grid-template-columns: 1fr; }
  .previa { flex-direction: column; align-items: stretch; }

  #panelAdmin {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 88dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.28);
    transform: translateY(101%);
    transition: transform var(--t-slow) var(--ease-out);
    z-index: 520;
    visibility: hidden;
  }
  #panelAdmin.abierto { transform: translateY(0); visibility: visible; }
}

/* ==========================================================================
   GRUPOS DE OPCIONES (ricitos, tamaños, rellenos)
   ========================================================================== */

/* Los checks del formulario del producto */
.grupos-check { display: flex; flex-direction: column; gap: var(--s-2); }
.grupos-check .casilla__titulo {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}

/* Una opción dentro del editor del grupo */
.opciones-edit { display: flex; flex-direction: column; gap: var(--s-3); }

.opcion-edit {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

.opcion-edit__fila {
  display: grid;
  grid-template-columns: 1fr 96px 38px;
  gap: var(--s-2);
  align-items: center;
}

.opcion-edit__fila input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

.opcion-edit__receta {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.opcion-edit__titulo {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

@media (max-width: 480px) {
  .opcion-edit__fila { grid-template-columns: 1fr 78px 38px; }
}

/* ==========================================================================
   CABECERAS QUE ORDENAN
   ========================================================================== */
.th-orden {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}

.th-orden:hover { color: var(--text-primary); }
.th-orden:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-xs); }

.th-orden--activa { color: var(--brand-text); }

.th-orden__flecha {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--text-2xs);
  opacity: 0.35;
  transition: opacity var(--t-fast) var(--ease-out);
}

.th-orden:hover .th-orden__flecha { opacity: 0.7; }
.th-orden--activa .th-orden__flecha { opacity: 1; }

/* ==========================================================================
   FOTO DEL PRODUCTO
   Se sube y se guarda dentro del sistema. Antes era una URL de Drive: no se
   veía sin señal y solo la veía quien tuviera permiso sobre ese archivo.
   ========================================================================== */
.foto-producto { display: flex; align-items: center; gap: var(--s-3); }

.foto-producto__vista {
  width: 96px; height: 72px;              /* 4:3, igual que la tarjeta del POS */
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-2);
  display: grid; place-items: center;
  overflow: hidden;
}
/* `contain`, igual que en el POS: la vista previa tiene que enseñar lo mismo
   que va a ver el cajero, recortes incluidos o ninguno. */
.foto-producto__vista img { width: 100%; height: 100%; object-fit: contain; }
.foto-producto__vista span { font-size: var(--text-xs); color: var(--text-muted); }

.foto-producto__acciones { display: flex; flex-direction: column; gap: var(--s-2); }
.foto-producto__nota { font-size: var(--text-xs); color: var(--text-muted); }

/* ==========================================================================
   LA LÁMINA DEL CÓDIGO QR
   El código se imprime y se pega en el mostrador, así que en pantalla se
   muestra sobre blanco aunque el sistema esté en modo oscuro: es como se va
   a ver en el papel, y un QR en negativo no lo lee ninguna cámara.
   ========================================================================== */
.qr-lamina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  margin: var(--s-2) 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

.qr-lamina__img { display: block; width: 240px; height: 240px; }

.qr-lamina__url {
  margin: 0;
  font-size: var(--text-xs);
  color: #666;              /* fijo: la lámina siempre es blanca */
  word-break: break-all;
  text-align: center;
}