/* ============================================================
   EXPRESS AL PASO · Panel de administración
   Mismos tokens que el sitio público, densidad de herramienta.
   ============================================================ */
:root{
  --rojo:#E4362B; --rojo-oscuro:#B82921;
  --negro:#171412; --negro-fuerte:#0A0908; --carbon:#2B2724;
  --blanco:#FFFFFF; --hueso:#FAF7F5; --tinta:#171412; --gris:#6B6560;
  --linea:rgba(23,20,18,.16);
  --display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;
  --texto:'Karla',system-ui,sans-serif;
  --dato:'DM Mono',ui-monospace,monospace;
  --radio:16px; --sombra:0 10px 30px rgba(10,9,8,.10);
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--hueso); color:var(--tinta); font-family:var(--texto); line-height:1.55; }
h1,h2,h3{ font-family:var(--display); letter-spacing:-.03em; margin:0 0 .4rem; font-weight:800; line-height:1.05; }
p{ margin:0 0 .8rem; }
a{ color:var(--rojo); }
button{ font:inherit; cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--rojo); outline-offset:2px; border-radius:4px; }

.env{ width:100%; max-width:1120px; margin-inline:auto; padding:1.2rem; }

/* ---------- Botones ---------- */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.68rem 1.1rem; border-radius:11px; font-weight:700; font-size:.94rem;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.b:hover{ transform:translateY(-1px); }
.b:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.b--p{ background:var(--rojo); color:var(--blanco); }
.b--p:hover{ background:var(--rojo-oscuro); }
.b--q{ background:var(--blanco); color:var(--negro-fuerte); }
.b--peligro{ background:#fff; color:var(--rojo); border:1.5px solid var(--rojo); }
.b--peligro:hover{ background:var(--rojo); color:#fff; }
.b--fantasma{ border:1.5px solid var(--linea); color:var(--tinta); background:var(--blanco); }
.b--bloque{ width:100%; }
.b--chico{ padding:.45rem .8rem; font-size:.85rem; border-radius:9px; }

/* ---------- Login ---------- */
.login{ min-height:100dvh; display:grid; place-items:center; padding:1.2rem; background:var(--negro); }
.login__caja{
  width:100%; max-width:400px; background:var(--blanco); border-radius:22px;
  padding:2rem 1.6rem; box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.login__marca{
  width:52px; height:52px; border-radius:15px; background:var(--rojo); color:var(--blanco);
  display:grid; place-items:center; font-family:var(--display); font-size:1.6rem; font-weight:800;
  margin-bottom:1.1rem;
}
.login__pie{ text-align:center; margin-top:1.2rem; font-size:.85rem; color:var(--gris); }

/* ---------- Formularios ---------- */
.campo{ margin-bottom:.95rem; }
.campo__label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:.35rem; }
.campo__ayuda{ font-size:.76rem; color:var(--gris); margin:.3rem 0 0; }
.input, .select, .textarea{
  width:100%; padding:.72rem .85rem; border-radius:11px; border:1.5px solid var(--linea);
  background:#fff; font-family:var(--texto); font-size:.95rem; color:var(--tinta);
  transition:border-color .15s ease;
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--rojo); outline:none; }
.textarea{ resize:vertical; min-height:88px; }
.fila{ display:grid; gap:.8rem; }
@media (min-width:620px){ .fila--2{ grid-template-columns:1fr 1fr; } .fila--3{ grid-template-columns:1fr 1fr 1fr; } }

.alerta{ padding:.75rem .9rem; border-radius:11px; font-size:.88rem; margin-bottom:.9rem; }
.alerta--error{ background:#FDE8EC; color:#A32540; border:1px solid #F3B9C6; }
.alerta--ok{ background:#E6F4EA; color:#1B5E36; border:1px solid #B7DFC5; }
.alerta--info{ background:#FFF3D2; color:#6B4C00; border:1px solid #F0D68A; }
.alerta[hidden]{ display:none; }

/* ---------- Cabecera del panel ---------- */
.tope{ background:var(--negro); color:var(--blanco); position:sticky; top:0; z-index:40; }
.tope__barra{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.2rem; max-width:1120px; margin-inline:auto; }
.tope__marca{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:1.1rem; }
.tope__punto{ width:32px; height:32px; border-radius:10px; background:var(--rojo); color:var(--blanco); display:grid; place-items:center; font-family:var(--display); }
.tope__acciones{ display:flex; align-items:center; gap:.5rem; }
.tope__usuario{ font-family:var(--dato); font-size:.74rem; opacity:.75; display:none; }
@media (min-width:760px){ .tope__usuario{ display:block; } }

.pestanas{ display:flex; gap:.3rem; overflow-x:auto; padding:0 1.2rem; max-width:1120px; margin-inline:auto; }
.pestana{
  flex:none; padding:.6rem .95rem; font-size:.9rem; font-weight:700; color:rgba(255,255,255,.7);
  border-bottom:3px solid transparent; white-space:nowrap;
}
.pestana[aria-selected="true"]{ color:var(--blanco); border-bottom-color:var(--rojo); }

/* ---------- Barra de herramientas ---------- */
.herramientas{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.buscador{ flex:1; min-width:200px; }

/* ---------- Lista de productos ---------- */
.productos{ display:grid; gap:.8rem; }
.pro{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:.8rem; display:grid; grid-template-columns:72px 1fr; gap:.85rem; align-items:start;
}
.pro__foto{ width:72px; height:72px; border-radius:11px; object-fit:cover; background:#EDEBE9; }
.pro__nombre{ font-family:var(--display); font-size:1.06rem; margin:0 0 .15rem; }
.pro__meta{ font-family:var(--dato); font-size:.74rem; color:var(--gris); }
.pro__precios{ display:flex; align-items:baseline; gap:.5rem; margin:.35rem 0; flex-wrap:wrap; }
.pro__final{ font-family:var(--display); font-size:1.15rem; color:var(--negro); }
.pro__viejo{ font-family:var(--dato); font-size:.8rem; color:var(--gris); text-decoration:line-through; }
.pro__tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0; }
.tag{ font-family:var(--dato); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; padding:.22rem .45rem; border-radius:6px; background:var(--negro-fuerte); color:var(--blanco); }
.tag--off{ background:#EDEBE9; color:var(--gris); }
.tag--vendido{ background:var(--negro); color:var(--blanco); }
.tag--oferta{ background:var(--rojo); color:#fff; }
.tag--nuevo{ background:var(--blanco); color:var(--rojo); border:1px solid var(--rojo); }
.pro__acciones{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.pro--inactivo{ opacity:.6; }
@media (min-width:760px){ .pro{ grid-template-columns:88px 1fr auto; align-items:center; } .pro__foto{ width:88px; height:88px; } .pro__acciones{ margin:0; flex-direction:column; } }

/* ---------- Palancas de marketing ---------- */
.palancas{ display:grid; gap:.55rem; margin-top:.4rem; }
@media (min-width:620px){ .palancas{ grid-template-columns:1fr 1fr; } }
.palanca{
  display:flex; gap:.65rem; align-items:flex-start; padding:.7rem .8rem;
  border:1.5px solid var(--linea); border-radius:12px; background:#fff; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.palanca:hover{ border-color:var(--negro); }
.palanca input{ margin-top:.22rem; width:18px; height:18px; accent-color:var(--rojo); flex:none; }
.palanca__t{ font-weight:700; font-size:.9rem; display:block; }
.palanca__d{ font-size:.76rem; color:var(--gris); }
.palanca:has(input:checked){ border-color:var(--rojo); background:#FBEAE9; }

/* ---------- Modal ---------- */
.capa{
  position:fixed; inset:0; z-index:60; background:rgba(10,9,8,.6);
  display:grid; place-items:end center; opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.capa[data-abierto="true"]{ opacity:1; pointer-events:auto; }
.hoja{
  background:var(--hueso); width:100%; max-width:660px; max-height:94dvh; overflow-y:auto;
  border-radius:22px 22px 0 0; padding:1.3rem; transform:translateY(16px); transition:transform .22s ease;
}
.capa[data-abierto="true"] .hoja{ transform:none; }
@media (min-width:760px){ .capa{ place-items:center; } .hoja{ border-radius:22px; } }
.hoja__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }

/* ---------- Subida de imagen ---------- */
.subida{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; }
.subida__vista{ width:96px; height:96px; border-radius:13px; object-fit:cover; background:#EDEBE9; border:1.5px dashed var(--linea); }
.subida__acciones{ flex:1; min-width:180px; }

/* ---------- Vista previa del precio ---------- */
.previa{
  background:var(--negro); color:var(--blanco); border-radius:13px; padding:.85rem 1rem;
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:baseline; margin:.6rem 0 1rem;
}
.previa__final{ font-family:var(--display); font-size:1.5rem; color:var(--blanco); }
.previa__viejo{ font-family:var(--dato); font-size:.85rem; text-decoration:line-through; opacity:.7; }
.previa__nota{ font-family:var(--dato); font-size:.74rem; opacity:.8; width:100%; }

/* ---------- Vacío / cargando ---------- */
.vacio{ text-align:center; padding:3rem 1rem; border:2px dashed var(--linea); border-radius:var(--radio); color:var(--gris); }
.cargando{ text-align:center; padding:2.4rem; color:var(--gris); font-family:var(--dato); font-size:.85rem; }

/* ---------- Categorías ---------- */
.cats{ display:grid; gap:.6rem; }
.cat{ display:flex; align-items:center; gap:.8rem; background:var(--blanco); border:1px solid var(--linea); border-radius:13px; padding:.7rem .9rem; }
.cat__emoji{ font-size:1.4rem; }
.cat__nombre{ font-weight:700; flex:1; }

/* ---------- Aviso flotante ---------- */
.toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%, 140%);
  background:var(--negro-fuerte); color:var(--blanco); padding:.8rem 1.2rem; border-radius:12px;
  font-size:.9rem; z-index:80; box-shadow:var(--sombra); transition:transform .3s ease; max-width:90vw;
}
.toast[data-visible="true"]{ transform:translate(-50%, 0); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}