/* Panel de la tienda (/acceder/ y /gestion/): mismo estilo oscuro del sitio, pensado para gente
   que no es de informática: letras grandes, botones claros, una cosa por fila. */
:root{
  --bg:#0A0A0B; --surface:#151516; --surface-alt:#1D1D1F; --border:#2B2B2D;
  --text:#F5F4F1; --text-muted:#A7A6A2; --accent:#E3241C; --accent-hover:#FF3B2E;
  --ok:#2FA36B; --warn:#E0A526;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
a{ color:var(--accent); }
h1, h2{ font-family:"Oswald", sans-serif; text-transform:uppercase; letter-spacing:.01em; line-height:1.1; }
h1{ font-size:clamp(26px,4vw,36px); margin:0 0 6px; }
h2{ font-size:20px; margin:0 0 12px; }
.p-wrap{ width:100%; max-width:1100px; margin:0 auto; padding:0 16px; }
.p-main{ padding-top:28px; padding-bottom:64px; }
.muted{ color:var(--text-muted); }
.chico{ font-size:13.5px; }

/* encabezado */
.p-cab{ border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:5; }
.p-cab-in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.p-logo img{ display:block; height:34px; width:auto; }
.p-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.p-nav a{ color:var(--text-muted); text-decoration:none; padding:8px 12px; border-radius:6px; font-weight:600; font-size:14.5px; }
.p-nav a:hover{ color:var(--text); background:var(--surface); }
.p-nav a[aria-current]{ color:var(--text); background:var(--surface-alt); }
.p-user{ margin-left:auto; display:flex; gap:14px; align-items:center; font-size:14px; }
.p-user small{ display:inline-block; margin-left:4px; padding:2px 7px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); font-size:11.5px; }
.p-user a{ color:var(--text-muted); }

/* botones */
.p-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 "IBM Plex Sans", sans-serif; padding:12px 18px; border-radius:6px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; }
.p-btn-rojo{ background:var(--accent); color:#fff; }
.p-btn-rojo:hover{ background:var(--accent-hover); }
.p-btn-borde{ background:transparent; color:var(--text); border-color:var(--border); }
.p-btn-borde:hover{ border-color:var(--text); }
.p-btn-verde{ background:var(--ok); color:#fff; }
.p-btn-chico{ padding:7px 11px; font-size:13.5px; }

/* avisos */
.p-aviso{ padding:12px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); margin:0 0 18px; }
.p-aviso-ok{ border-color:var(--ok); }
.p-aviso-error{ border-color:var(--accent); }
.p-aviso-info{ border-color:var(--warn); }

/* formularios */
.p-caja{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin:0 0 18px; }
.p-campo{ display:grid; gap:6px; margin:0 0 16px; }
.p-campo > span{ font-weight:600; }
.p-campo small{ color:var(--text-muted); font-size:13px; }
.p-campo input[type=text], .p-campo input[type=email], .p-campo input[type=password], .p-campo input[type=number], .p-campo select, .p-campo textarea, .p-buscar{
  font:inherit; font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:11px 12px; width:100%; }
.p-campo input:focus, .p-campo select:focus, .p-campo textarea:focus, .p-buscar:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.p-campo input[readonly]{ color:var(--text-muted); }
.p-dos{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; } /* sin esto, el campo sin texto de ayuda se estiraba */
.p-casillas{ display:flex; flex-wrap:wrap; gap:8px; }
.p-casillas label{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--border); border-radius:999px; cursor:pointer; user-select:none; font-weight:500; }
.p-casillas input{ accent-color:var(--accent); width:17px; height:17px; }
.p-casillas label:has(input:checked){ border-color:var(--accent); background:rgba(227,36,28,.14); }
.p-vista-nombre{ margin:4px 0 0; padding:10px 12px; border:1px dashed var(--border); border-radius:6px; font-weight:600; }
.p-foto-actual{ display:flex; gap:14px; align-items:center; }
.p-foto-actual img{ width:110px; height:110px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; }
.p-acciones{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.p-ficha{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.p-ficha aside{ position:sticky; top:84px; }

/* lista de repuestos */
.p-pestanas{ display:flex; gap:6px; flex-wrap:wrap; margin:18px 0 14px; }
.p-pestanas a{ text-decoration:none; color:var(--text-muted); padding:9px 14px; border:1px solid var(--border); border-radius:999px; font-weight:600; font-size:14.5px; }
.p-pestanas a[aria-current]{ color:#fff; background:var(--accent); border-color:var(--accent); }
.p-pestanas b{ display:inline-block; min-width:22px; margin-left:6px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12.5px; text-align:center; }
.p-lista{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.p-fila{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.p-fila img, .p-fila .p-sinfoto{ width:64px; height:64px; object-fit:contain; background:#fff; border-radius:6px; padding:3px; }
.p-sinfoto{ display:flex; align-items:center; justify-content:center; color:#777; font-size:11px; text-align:center; line-height:1.1; }
.p-fila-info{ display:grid; gap:3px; }
.p-fila-info strong{ line-height:1.25; }
.p-fila-info span{ color:var(--text-muted); font-size:13.5px; }
.p-fila .p-acciones{ justify-content:flex-end; }
.p-fila form{ margin:0; }
.p-etq{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.p-etq-pendiente{ background:rgba(224,165,38,.18); color:var(--warn); }
.p-etq-oculto{ background:var(--surface-alt); color:var(--text-muted); }
.p-vacio{ padding:28px; text-align:center; color:var(--text-muted); border:1px dashed var(--border); border-radius:10px; }

/* tabla del equipo */
.p-tabla{ width:100%; border-collapse:collapse; }
.p-tabla th, .p-tabla td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.p-tabla th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:500; }

/* acceder */
.p-acceso{ max-width:440px; margin:20px auto 0; }

@media (max-width:820px){
  .p-ficha{ grid-template-columns:minmax(0,1fr); }
  .p-ficha aside{ position:static; }
}
@media (max-width:600px){
  .p-dos{ grid-template-columns:1fr; }
  .p-fila{ grid-template-columns:56px minmax(0,1fr); }
  .p-fila img, .p-fila .p-sinfoto{ width:56px; height:56px; }
  .p-fila .p-acciones{ grid-column:1 / -1; justify-content:flex-start; }
  .p-user{ margin-left:0; width:100%; justify-content:space-between; }
  .p-cab{ position:static; } /* en celular el encabezado ocupa mucho: que no quede pegado arriba */
  .p-tabla th:nth-child(2), .p-tabla td:nth-child(2){ display:none; }
}

/* ---------- panel de control del encargado: tarjetas, pedidos pendientes y stock crítico ---------- */
.p-tarjetas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:18px 0 0; }
.p-tarjeta{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text-muted); }
.p-tarjeta b{ font-family:"Oswald",sans-serif; font-size:38px; line-height:1; color:var(--text); }
.p-tarjeta:hover{ border-color:var(--text-muted); }
.p-tarjeta.alerta{ border-color:var(--accent); }
.p-tarjeta.alerta b{ color:var(--accent); }

.p-pedido{ display:grid; grid-template-columns:150px minmax(0,1fr) 170px auto; gap:16px; align-items:center; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--border); border-radius:10px; }
.p-pedido-num{ display:grid; gap:6px; justify-items:start; }
.p-pedido-num strong{ font-family:"Oswald",sans-serif; font-size:20px; }
.p-pedido .p-acciones{ justify-content:flex-end; }
.p-pedido form{ margin:0; }
.p-tiempo{ display:grid; gap:1px; }
.p-tiempo span{ font-weight:700; }
.p-tiempo small{ color:var(--text-muted); font-size:12px; }
/* color según cuánto lleva esperando: verde < 1 día, amarillo 1–2 días, rojo > 2 días */
.p-pedido.urg-normal{ border-left-color:var(--ok); }
.p-pedido.urg-atencion{ border-left-color:var(--warn); }
.p-pedido.urg-atencion .p-tiempo span{ color:var(--warn); }
.p-pedido.urg-atrasado{ border-left-color:var(--accent); }
.p-pedido.urg-atrasado .p-tiempo span{ color:var(--accent-hover); }
.p-leyenda{ display:inline-block; margin-left:10px; padding-left:16px; position:relative; }
.p-leyenda::before{ content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:2px; }
.p-leyenda.urg-normal::before{ background:var(--ok); }
.p-leyenda.urg-atencion::before{ background:var(--warn); }
.p-leyenda.urg-atrasado::before{ background:var(--accent); }

/* estados de pedido */
.p-est-pagado{ background:rgba(227,36,28,.16); color:#ff6b62; }
.p-est-listo_retiro, .p-est-despachado{ background:rgba(224,165,38,.18); color:var(--warn); }
.p-est-entregado{ background:rgba(47,163,107,.18); color:#4cc78a; }
.p-est-pago_pendiente, .p-est-pago_rechazado, .p-est-anulado{ background:var(--surface-alt); color:var(--text-muted); }

/* detalle de pedido */
.p-datos{ margin:0; display:grid; gap:10px; }
.p-datos > div{ display:grid; grid-template-columns:150px 1fr; gap:10px; }
.p-datos dt{ color:var(--text-muted); }
.p-datos dd{ margin:0; }

/* stock */
.p-stock{ color:var(--accent-hover); }
.p-fila.sin-stock{ border-color:var(--accent); }

@media (max-width:860px){
  .p-pedido{ grid-template-columns:minmax(0,1fr) auto; }
  .p-pedido-num{ grid-column:1 / -1; grid-auto-flow:column; justify-content:start; align-items:center; gap:10px; }
  .p-pedido .p-acciones{ grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:600px){ .p-datos > div{ grid-template-columns:1fr; gap:2px; } .p-leyenda{ margin-left:6px; } }

/* ---------- Analytics: tarjetas que se tocan para ver el desglose ---------- */
.p-tarjetas-grandes{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.p-tarjeta-btn{ font:inherit; text-align:left; cursor:pointer; position:relative; }
.p-tarjeta-btn small{ font-size:12.5px; color:var(--text-muted); line-height:1.35; }
.p-tarjeta-btn::after{ content:"Ver detalle ▾"; margin-top:8px; font-size:12px; font-weight:600; color:var(--accent); }
.p-tarjeta-btn.activa{ border-color:var(--text); background:var(--surface-alt); }
.p-tarjeta-btn.activa::after{ content:"Ocultar ▴"; }
.p-tarjetas-grandes .p-tarjeta b{ font-size:32px; }
.p-desglose{ margin:22px 0 0; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; scroll-margin-top:90px; }
.p-desglose h2{ margin-bottom:0; }
.p-desglose > .p-acciones:first-child{ margin-bottom:14px; }
.p-barra{ display:inline-block; height:8px; margin-right:10px; vertical-align:middle; background:var(--accent); border-radius:4px; max-width:120px; }
.p-top .p-fila{ grid-template-columns:34px 64px minmax(0,1fr); }
.p-puesto{ font-family:"Oswald",sans-serif; font-size:26px; color:var(--accent); text-align:center; }
.p-pedido-stock{ border-left:5px solid var(--border); }
.p-pedido-stock.urg-atencion{ border-left-color:var(--warn); }
.p-pedido-stock.urg-atrasado{ border-left-color:var(--accent); }
@media (max-width:600px){ .p-top .p-fila{ grid-template-columns:28px 56px minmax(0,1fr); } .p-barra{ display:none; } }

/* ---------- devoluciones: luces roja (nos toca), amarilla (esperando al cliente), verde (cerrada) ---------- */
.p-luz{ display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle; flex-shrink:0; }
.p-luz-roja{ background:#ff3b2e; box-shadow:0 0 0 3px rgba(255,59,46,.22), 0 0 12px rgba(255,59,46,.7); animation:p-latido 1.6s ease-in-out infinite; }
.p-luz-amarilla{ background:var(--warn); box-shadow:0 0 0 3px rgba(224,165,38,.2); }
.p-luz-verde{ background:var(--ok); box-shadow:0 0 0 3px rgba(47,163,107,.2); }
@keyframes p-latido{ 50%{ box-shadow:0 0 0 6px rgba(255,59,46,.08), 0 0 16px rgba(255,59,46,.9); } }
@media (prefers-reduced-motion:reduce){ .p-luz-roja{ animation:none; } }
.p-luzetq-roja{ background:rgba(227,36,28,.16); color:#ff6b62; }
.p-luzetq-amarilla{ background:rgba(224,165,38,.18); color:var(--warn); }
.p-luzetq-verde{ background:rgba(47,163,107,.18); color:#4cc78a; }
.p-dev{ grid-template-columns:14px 64px minmax(0,1fr) auto; }
.p-badge{ display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; line-height:20px; text-align:center; }
.p-urgente{ display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:14px 16px; border:1.5px solid var(--accent); border-radius:10px; background:rgba(227,36,28,.10); color:var(--text); text-decoration:none; }
.p-urgente b{ margin-left:auto; color:var(--accent-hover); white-space:nowrap; }
.p-urgente:hover{ background:rgba(227,36,28,.16); }
.p-dev-sol{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; align-items:start; }
.p-dev-sol img{ width:100%; border-radius:8px; background:#fff; display:block; }
.p-elige{ display:grid; gap:8px; }
.p-elige-op{ display:grid; grid-template-columns:20px 56px minmax(0,1fr); gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.p-elige-op:has(input:checked){ border-color:var(--accent); background:rgba(227,36,28,.08); }
.p-elige-op input{ accent-color:var(--accent); width:18px; height:18px; }
.p-elige-op img, .p-elige-op .p-sinfoto{ width:56px; height:56px; object-fit:contain; background:#fff; border-radius:6px; padding:3px; }
.p-elige-op small{ display:block; margin-top:2px; }
.p-historial{ list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--border); display:grid; gap:12px; }
.p-historial li{ position:relative; }
.p-historial li::before{ content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--border); }
.p-pasos-lista{ margin:0 0 16px; padding-left:20px; display:grid; gap:6px; }
@media (max-width:600px){
  .p-dev{ grid-template-columns:14px 56px minmax(0,1fr); }
  .p-dev > .p-btn{ grid-column:1 / -1; }
  .p-dev-sol{ grid-template-columns:1fr; }
  .p-urgente{ flex-wrap:wrap; }
}

/* solicitud de devolución: elegir el tipo (retracto / garantía / otro); los vencidos quedan apagados */
.p-tipos{ display:grid; gap:8px; }
.p-tipo{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.p-tipo input{ accent-color:var(--accent); width:18px; height:18px; margin-top:2px; }
.p-tipo small{ display:block; color:var(--text-muted); font-size:13.5px; margin-top:2px; }
.p-tipo:has(input:checked){ border-color:var(--accent); background:rgba(227,36,28,.08); }
.p-tipo-plazo{ display:block; font-style:normal; font-size:12.5px; color:var(--ok); margin-top:4px; }
.p-tipo.vencido{ opacity:.45; cursor:not-allowed; }
.p-tipo.vencido .p-tipo-plazo{ color:var(--accent-hover); }
.p-sub{ margin-top:14px; padding:14px; border-radius:8px; background:var(--surface-alt); }

/* franja de datos de ejemplo (deploy/tienda/demo.php) */
.p-demo{ background:var(--warn); color:#111; text-align:center; font-size:14px; padding:8px 16px; }

/* ---------- Pedidos por etapa (Carolina, 2-oct): pestañas grandes en el orden del trabajo ---------- */
.p-etapas{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:16px 0 6px; }
.p-etapas a{ display:flex; align-items:center; gap:10px; padding:14px 16px; border:1.5px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text-muted); font-weight:600; background:var(--surface); }
.p-etapas a:hover{ border-color:var(--text-muted); color:var(--text); }
.p-etapas a[aria-current]{ border-color:var(--accent); color:var(--text); background:rgba(227,36,28,.10); }
.p-etapas b{ margin-left:auto; min-width:26px; padding:2px 8px; border-radius:999px; background:var(--surface-alt); color:var(--text); text-align:center; font-size:14px; }
.p-etapas a[aria-current] b{ background:var(--accent); color:#fff; }
.p-etapa-num{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1.5px solid currentColor; font-size:14px; flex-shrink:0; }
.p-otros{ margin:0 0 18px; font-size:13.5px; color:var(--text-muted); }
.p-otros a{ color:var(--text-muted); margin-left:6px; }
.p-otros a[aria-current]{ color:var(--text); font-weight:600; }
.p-etapa h2{ margin:8px 0 4px; }
.p-quehacer{ margin:0 0 14px; color:var(--text-muted); }
.p-quehacer strong{ color:var(--text); }
.p-pedido-etapa{ grid-template-columns:90px minmax(0,1fr) 170px auto; }
.p-pedido-etapa .p-acciones{ flex-wrap:nowrap; }
.p-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.p-tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--surface-alt); color:var(--text); }
.p-tag-envio{ background:rgba(224,165,38,.16); color:var(--warn); }
@media (max-width:860px){
  .p-etapas{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .p-etapas a{ padding:12px; gap:8px; font-size:14px; }
  .p-etapas b{ padding:2px 6px; }
  .p-pedido-etapa{ grid-template-columns:minmax(0,1fr) auto; }
  .p-pedido-etapa .p-pedido-num{ grid-column:1 / -1; }
  .p-pedido-etapa .p-acciones{ grid-column:1 / -1; flex-wrap:wrap; }
}

/* aviso amarillo (despachados sin marcar entregados) */
.p-urgente-amarillo{ border-color:var(--warn); background:rgba(224,165,38,.10); }
.p-urgente-amarillo b{ color:var(--warn); }

/* ---------- etapa "Por confirmar" y entrega confirmada (Carolina, 2-oct) ---------- */
.p-etapas{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.p-paso{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0; }
.p-input-chico{ padding:7px 10px !important; font-size:14px !important; width:auto; min-width:180px; }
.p-entrega{ position:relative; }
.p-entrega > summary{ list-style:none; }
.p-entrega > summary::-webkit-details-marker{ display:none; }
.p-entrega[open] > form{ position:absolute; right:0; z-index:5; width:300px; margin-top:6px; padding:14px; background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5); display:block; }
aside .p-entrega[open] > form{ position:static; width:auto; }
.p-confirma{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; line-height:1.4; }
.p-confirma input{ accent-color:var(--ok); width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.p-coment{ color:var(--warn) !important; font-size:13px !important; }
.p-seg{ font-size:13px; color:var(--text-muted); }
.p-seg b{ color:var(--text); font-family:"IBM Plex Mono",monospace; }
.p-seg a{ margin-left:4px; }
.p-copiar{ font:inherit; font-size:12px; padding:1px 7px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text-muted); cursor:pointer; }
.p-copiar:hover{ color:var(--text); border-color:var(--text-muted); }
.p-est-confirmado{ background:rgba(47,120,227,.18); color:#7fb0ff; }
.p-est-pagado{ background:rgba(227,36,28,.16); color:#ff6b62; }

/* estado para el cliente: pasos con el actual marcado */
.p-linea{ list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px; counter-reset:paso; }
.p-linea li{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); }
.p-linea li + li::before{ content:""; width:16px; height:2px; background:var(--border); }
.p-linea li.hecho{ color:var(--ok); }
.p-linea li.hecho + li::before, .p-linea li.actual::before{ background:var(--ok); }
.p-linea li.actual{ color:var(--text); font-weight:700; }
.p-linea li.actual::after{ content:""; order:-1; width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(47,163,107,.25); }
.p-seg-cliente{ display:block; font-size:13px; color:var(--text-muted); }
.p-seg-cliente b{ color:var(--text); font-family:"IBM Plex Mono",monospace; }
.p-estc-pagado{ background:rgba(224,165,38,.18); color:var(--warn); }
.p-estc-confirmado{ background:rgba(47,120,227,.18); color:#7fb0ff; }
.p-estc-listo_retiro, .p-estc-despachado{ background:rgba(47,120,227,.18); color:#7fb0ff; }
.p-estc-entregado{ background:rgba(47,163,107,.18); color:#4cc78a; }
.p-estc-anulado{ background:var(--surface-alt); color:var(--text-muted); }
@media (max-width:860px){ .p-etapas{ grid-template-columns:repeat(2, minmax(0,1fr)); } .p-entrega[open] > form{ position:static; width:auto; } }


.p-sinfoto-grande{ width:100%; aspect-ratio:1/1; border-radius:8px; font-size:14px; }

/* el conector va primero y después el punto del estado actual */
.p-linea li + li::before{ order:-2; }

/* ---------- confirmación de bodega (Carolina, 5-oct) ---------- */
.p-bodega{ border-left:5px solid var(--border); }
.p-bodega.urg-normal{ border-left-color:var(--ok); }
.p-bodega.urg-atencion{ border-left-color:var(--warn); }
.p-bodega.urg-atrasado{ border-left-color:var(--accent); }
.p-bodega-tabla img{ width:52px; height:52px; object-fit:contain; background:#fff; border-radius:6px; padding:2px; display:block; }
.p-bodega-tabla td{ vertical-align:middle; }
.p-bodega-tabla .p-num{ font-size:18px; font-weight:700; text-align:center; }
.p-cant{ width:80px !important; text-align:center; font-size:18px !important; font-weight:700; }
.p-bodega-tabla tr.falta td{ background:rgba(227,36,28,.08); }
.p-bodega-tabla tr.falta .p-cant{ border-color:var(--accent); color:#ff6b62; }
.p-falta{ margin:10px 0 0; color:var(--warn) !important; }
.p-caja-alerta{ border-color:var(--accent); }

/* falta el n° de boleta/factura */
.p-tag-falta{ background:rgba(227,36,28,.16); color:#ff6b62; }

/* ---------- Pedidos: buscador junto al título ---------- */
.p-titulo-busca{ justify-content:space-between; align-items:center; }
.p-titulo-busca h1{ margin:0; }
.p-titulo-busca .p-buscar{ min-width:260px; }

/* ---------- Ventas: historial de repuestos vendidos ---------- */
.p-periodos{ margin:14px 0 0; }
.p-filtros{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:14px 0 0; }
.p-filtros .p-campo{ margin:0; }
.p-filtro-texto{ flex:1 1 240px; }
.p-tarjeta b.p-tarjeta-monto{ font-size:28px; }
.p-tabla-scroll{ overflow-x:auto; }
.p-tabla-ventas td small{ display:block; font-size:12.5px; }
.p-tabla-ventas .p-num-celda{ text-align:right; white-space:nowrap; }
.p-tabla-ventas td{ font-size:14.5px; }
@media (max-width: 640px){
  .p-titulo-busca .p-buscar{ min-width:0; width:100%; }
  .p-tabla-ventas{ min-width:640px; }
}
/* las tablas del panel ocultan la 2ª columna en celular; en Ventas es el n° de pedido o las unidades: se mantiene */
@media (max-width:820px){ .p-tabla-ventas th:nth-child(2), .p-tabla-ventas td:nth-child(2){ display:table-cell; } }

/* ---------- catálogo o tienda: en qué lista se trabaja (Carolina, 6-oct: que no se confundan) ---------- */
.p-destino{ margin:0 0 16px; padding:12px 16px; border-radius:10px; border-left:6px solid; font-size:15px; line-height:1.45; }
.p-destino strong{ letter-spacing:.04em; }
.p-destino-tienda{ background:rgba(227,36,28,.12); border-color:#e3241c; }
.p-destino-catalogo{ background:rgba(59,130,246,.14); border-color:#3b82f6; }
.p-ficha-tienda > div > .p-caja:first-child{ border-top:4px solid #e3241c; }
.p-ficha-catalogo > div > .p-caja:first-child{ border-top:4px solid #3b82f6; }
.p-mover{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.p-mover p{ margin:0 0 8px; }
/* tipos de cuenta en Equipo: uno debajo del otro, con su descripción */
.p-casillas-lista{ display:grid; gap:8px; }
.p-casillas-lista label{ border-radius:10px; align-items:flex-start; }
.p-casillas-lista input{ margin-top:2px; flex:none; }
/* en el catálogo, el botón de guardar también es azul: el color dice a qué lista va */
.p-ficha-catalogo .p-btn-rojo{ background:#2563eb; border-color:#2563eb; }
.p-ficha-catalogo .p-btn-rojo:hover{ background:#1d4ed8; border-color:#1d4ed8; }

/* ---------- interruptor Publicado / No publicado (Carolina, 6-oct) ---------- */
.p-sw{ position:relative; display:inline-block; width:38px; height:22px; border-radius:999px; background:#4b5563; flex:none; transition:background .15s; }
.p-sw::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; }
.p-sw-btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-muted); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.p-sw-btn.on{ color:#4ade80; border-color:rgba(74,222,128,.45); }
.p-sw-btn.on .p-sw, .p-interruptor input:checked + .p-sw{ background:#16a34a; }
.p-sw-btn.on .p-sw::after, .p-interruptor input:checked + .p-sw::after{ transform:translateX(16px); }
.p-interruptor{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.p-interruptor input{ position:absolute; opacity:0; width:1px; height:1px; }
.p-interruptor input:focus-visible + .p-sw{ outline:2px solid var(--accent); outline-offset:2px; }
.p-interruptor small{ display:block; color:var(--text-muted); font-size:12.5px; }
.p-interruptor .p-sw-si{ display:none; color:#4ade80; }
.p-interruptor .p-sw-no{ color:var(--text-muted); }
.p-interruptor:has(input:checked) .p-sw-si{ display:inline; }
.p-interruptor:has(input:checked) .p-sw-no{ display:none; }

/* ======================================================================================================
   EQUILIBRIO DE COLORES (Carolina, 6-oct-2026: "la interfaz está un poco agresiva visualmente").
   El rojo de la marca se usaba para casi todo. Ahora:
   - el rojo queda para lo URGENTE (atrasados, faltantes, stock crítico, avisos) y el botón principal, en un
     tono más suave;
   - lo demás (pestañas activas, enlaces, casillas marcadas, gráficos, foco) va en tonos neutros;
   - fondos y bordes un poco más claros, para que no sea un negro tan duro.
   Va al final para que gane sobre las reglas de arriba sin tener que cambiarlas una por una.
   ====================================================================================================== */
:root{
  --bg:#101113; --surface:#18191c; --surface-alt:#212327; --border:#2e3136;
  --text:#ECEBE7; --text-muted:#A4A6AB;
  --accent:#C9433B; --accent-hover:#D9534A;          /* rojo de marca, más suave */
  --alerta-txt:#EE8C85; --alerta-fondo:rgba(201,67,59,.12); --alerta-borde:rgba(201,67,59,.55);
  --neutro:#5F6670; --neutro-claro:#8E96A3; --foco:#7FA6E8;
}
a{ color:#E9A8A2; }
a:hover{ color:#F4C3BE; }
.p-user a, .p-nav a{ color:var(--text-muted); }
/* foco del teclado: azul suave en vez de rojo */
.p-campo input:focus, .p-campo select:focus, .p-campo textarea:focus, .p-buscar:focus, .p-interruptor input:focus-visible + .p-sw{ outline-color:var(--foco); }
/* casillas y opciones marcadas: gris claro, no rojo */
.p-casillas input, .p-elige-op input, .p-tipo input{ accent-color:var(--neutro-claro); }
.p-casillas label:has(input:checked), .p-elige-op:has(input:checked), .p-tipo:has(input:checked){ border-color:var(--neutro-claro); background:rgba(255,255,255,.05); }
/* pestañas y etapas activas: resaltadas en claro, sin relleno rojo */
.p-pestanas a[aria-current]{ color:var(--text); background:var(--surface-alt); border-color:var(--neutro-claro); }
.p-etapas a[aria-current]{ border-color:var(--neutro-claro); background:var(--surface-alt); }
.p-etapas a[aria-current] b{ background:var(--text); color:#111; }
/* contadores del menú: rojo apagado */
.p-badge{ background:#7E2E29; color:#F6D9D6; }
/* lo urgente sigue en rojo, pero con fondo suave y texto legible */
.p-urgente{ border-color:var(--alerta-borde); background:var(--alerta-fondo); }
.p-urgente:hover{ background:rgba(201,67,59,.18); }
.p-urgente b, .p-stock, .p-pedido.urg-atrasado .p-tiempo span, .p-tipo.vencido .p-tipo-plazo{ color:var(--alerta-txt); }
.p-est-pagado, .p-luzetq-roja, .p-tag-falta{ background:var(--alerta-fondo); color:var(--alerta-txt); }
.p-aviso-error, .p-caja-alerta, .p-tarjeta.alerta, .p-fila.sin-stock{ border-color:var(--alerta-borde); }
.p-tarjeta.alerta b{ color:var(--alerta-txt); }
.p-bodega-tabla tr.falta td{ background:rgba(201,67,59,.07); }
.p-bodega-tabla tr.falta .p-cant{ border-color:var(--alerta-borde); color:var(--alerta-txt); }
/* gráficos y rankings de Analytics: gris azulado */
.p-barra{ background:var(--neutro-claro); }
.p-puesto{ color:var(--neutro-claro); }
.p-tarjeta-btn::after{ color:var(--text-muted); }
/* franja de datos de ejemplo: aviso discreto en vez de una barra amarilla fuerte */
.p-demo{ background:rgba(224,165,38,.10); color:#E2C27A; border-bottom:1px solid rgba(224,165,38,.30); }
.p-demo a{ color:#F0D69A; }
/* tienda (rojo) y catálogo (azul): mismos colores de siempre, más suaves */
.p-destino-tienda{ background:rgba(201,67,59,.08); border-color:var(--accent); }
.p-destino-catalogo{ background:rgba(91,141,239,.10); border-color:#5B8DEF; }
.p-ficha-tienda > div > .p-caja:first-child{ border-top-color:var(--accent); }
.p-ficha-catalogo > div > .p-caja:first-child{ border-top-color:#5B8DEF; }
.p-ficha-catalogo .p-btn-rojo{ background:#3F6FD1; border-color:#3F6FD1; }
.p-ficha-catalogo .p-btn-rojo:hover{ background:#4C7DE0; border-color:#4C7DE0; }
/* verde de "aprobar" y del interruptor, un poco menos brillante */
.p-btn-verde{ background:#2B8A5E; }
.p-sw-btn.on{ color:#7FD3A3; border-color:rgba(127,211,163,.35); }
.p-sw-btn.on .p-sw, .p-interruptor input:checked + .p-sw{ background:#2B8A5E; }
.p-interruptor .p-sw-si{ color:#7FD3A3; }
/* avisos amarillos (menos urgentes): ámbar, no rojo (van después de .p-urgente para ganarle) */
.p-urgente.p-urgente-amarillo{ border-color:rgba(224,165,38,.45); background:rgba(224,165,38,.07); }
.p-urgente.p-urgente-amarillo:hover{ background:rgba(224,165,38,.12); }
.p-urgente.p-urgente-amarillo b{ color:#E2C27A; }
/* buscador de Pedidos: el botón al lado del cuadro, no debajo */
.p-titulo-busca form{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
@media (max-width:640px){ .p-titulo-busca form{ width:100%; } .p-titulo-busca .p-buscar{ flex:1; } }