/* PANEL DE ESCRITORIO (Pedro 2026-10-23: "que sea como una aplicación de escritorio").
   Capa aparte: solo actúa con la clase body.ws-on (pantalla ancha + sesión de administrador abierta).
   En celular y en la app de la tienda no cambia nada. Formato de panel ERP (CLAUDE.md §5): barra lateral + barra superior. */
#wsSide, #wsTop, #wsPal{ display:none; }

body.ws-on{
  --ws-bg:#0B0B0C; --ws-panel:#111113; --ws-line:rgba(243,241,236,.10); --ws-ink:#F3F1EC; --ws-soft:#A19C93; --ws-yel:#F6C21C; --ws-yel-ink:#1a1400;
  --ws-hover:rgba(243,241,236,.06); --ws-side:248px; --ws-top:58px;
}
body.ws-on.ws-light{ --ws-bg:#F4F2EC; --ws-panel:#FFFFFF; --ws-line:rgba(20,20,20,.12); --ws-ink:#1A1A1A; --ws-soft:#6B665E; --ws-hover:rgba(20,20,20,.05); }

/* se esconde lo de la tienda: barra de arriba, botones de abajo, ayuda flotante */
body.ws-on .app > .topbar, body.ws-on .bottomnav, body.ws-on .welcome-overlay, body.ws-on #helpFab, body.ws-on .help-fab, body.ws-on .wbox-fab{ display:none !important; }
body.ws-on #screen-admin > .back-row, body.ws-on #screen-admin > .admin-head, body.ws-on #screen-admin .admin-top-actions, body.ws-on #adminTabRow{ display:none !important; }

body.ws-on #wsSide{
  display:flex; flex-direction:column; position:fixed; left:0; top:0; bottom:0; width:var(--ws-side); z-index:60;
  background:var(--ws-panel); border-right:1px solid var(--ws-line); color:var(--ws-ink); font-family:var(--font-body);
}
.ws-brand{ display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--ws-line); }
.ws-brand i{ width:34px; height:34px; border-radius:9px; background:var(--ws-yel); color:var(--ws-yel-ink); display:grid; place-items:center; font:400 21px var(--font-display); font-style:normal; letter-spacing:0; }
.ws-brand b{ display:block; font:400 16px var(--font-display); letter-spacing:.04em; text-transform:uppercase; }
.ws-brand small{ display:block; font:500 10.5px var(--font-mono); color:var(--ws-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.ws-nav{ flex:1; overflow-y:auto; padding:10px 10px 6px; }
.ws-grupo{ font:500 10px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ws-soft); padding:14px 10px 6px; }
.ws-item{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px; margin:1px 0; border:0; border-radius:8px; background:none; color:var(--ws-ink); font:600 13.5px var(--font-body); text-align:left; cursor:pointer; }
.ws-item svg{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.ws-item:hover{ background:var(--ws-hover); }
.ws-item.on{ background:rgba(246,194,28,.14); color:var(--ws-yel); }
body.ws-light .ws-item.on{ color:#8a6500; background:rgba(246,194,28,.30); }
.ws-item.on svg{ opacity:1; }
.ws-item[disabled]{ opacity:.5; cursor:default; }
.ws-item[disabled]:hover{ background:none; }
.ws-pronto{ margin-left:auto; font:500 9px var(--font-mono); letter-spacing:.1em; padding:2px 6px; border-radius:5px; border:1px solid var(--ws-line); color:var(--ws-soft); }
.ws-user{ border-top:1px solid var(--ws-line); padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:12px; }
.ws-user i{ width:30px; height:30px; border-radius:50%; background:var(--ws-yel); color:var(--ws-yel-ink); display:grid; place-items:center; font:700 12px var(--font-body); font-style:normal; flex:none; }
.ws-user span{ min-width:0; flex:1; }
.ws-user b{ display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-user small{ color:var(--ws-soft); font-size:11px; }
.ws-user button{ border:0; background:none; color:var(--ws-soft); cursor:pointer; padding:6px; border-radius:6px; }
.ws-user button:hover{ background:var(--ws-hover); color:var(--ws-ink); }
.ws-user button svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block; }

body.ws-on #wsTop{
  display:flex; align-items:center; gap:14px; position:fixed; left:var(--ws-side); right:0; top:0; height:var(--ws-top); z-index:55; padding:0 24px;
  background:var(--ws-bg); border-bottom:1px solid var(--ws-line); color:var(--ws-ink); font-family:var(--font-body);
}
.ws-ruta{ font-size:13px; color:var(--ws-soft); white-space:nowrap; }
.ws-ruta b{ color:var(--ws-ink); font-weight:700; }
.ws-busca{ flex:1; max-width:460px; margin:0 auto 0 14px; display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--ws-line); border-radius:9px; background:var(--ws-panel); color:var(--ws-soft); font:500 13px var(--font-body); cursor:text; text-align:left; }
.ws-busca svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.ws-busca kbd{ margin-left:auto; font:500 10.5px var(--font-mono); padding:2px 6px; border:1px solid var(--ws-line); border-radius:5px; }
.ws-estado{ display:flex; align-items:center; gap:7px; font:600 12px var(--font-body); color:var(--ws-soft); white-space:nowrap; }
.ws-estado i{ width:8px; height:8px; border-radius:50%; background:#2E7D4F; box-shadow:0 0 0 3px rgba(46,125,79,.22); }
.ws-estado.mal i{ background:#C24463; box-shadow:0 0 0 3px rgba(194,68,99,.25); }
.ws-icono{ width:36px; height:36px; border-radius:9px; border:1px solid var(--ws-line); background:var(--ws-panel); color:var(--ws-ink); display:grid; place-items:center; cursor:pointer; }
.ws-icono:hover{ background:var(--ws-hover); }
.ws-icono svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ws-accion{ border:0; border-radius:9px; padding:9px 16px; background:var(--ws-yel); color:var(--ws-yel-ink); font:700 13px var(--font-body); cursor:pointer; white-space:nowrap; }
.ws-accion:hover{ filter:brightness(1.06); }
.ws-accion[hidden]{ display:none; }

/* el contenido ocupa el resto de la ventana */
body.ws-on #screen-admin{ position:fixed; left:var(--ws-side); top:var(--ws-top); right:0; bottom:0; padding:22px 32px 48px; background:var(--ws-bg); }
body.ws-on #screen-admin #adminContent > div[id^="adminSection"]{ max-width:1320px; margin:0 auto; }
body.ws-on #screen-admin [style*="margin:0 18px"], body.ws-on #screen-admin [style*="margin: 0 18px"]{ margin-left:0 !important; margin-right:0 !important; }
body.ws-on #screen-admin .field{ margin:0 0 12px; }
body.ws-on #screen-admin .field-row{ margin:0 0 4px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; }
body.ws-on #screen-admin .field-row > .field{ margin-bottom:12px; }
body.ws-on #screen-admin .admin-sub{ margin-left:0; margin-right:0; }
body.ws-on #screen-admin .section-title{ padding-left:0; font-size:22px; margin:6px 0 4px; }
body.ws-on #screen-admin .save-status{ margin-left:0; }
body.ws-on #screen-admin .btn-primary, body.ws-on #screen-admin .btn-secondary{ width:auto; min-width:200px; padding-left:22px; padding-right:22px; }
body.ws-on #screen-admin .btn-primary{ background:var(--ws-yel); color:var(--ws-yel-ink); }

/* BOTONES CON ASPECTO DE BOTÓN (Pedro 2026-10-23): relleno, relieve y efecto al presionar; las etiquetas de estado siguen planas */
body.ws-on #screen-admin .btn-primary, body.ws-on #screen-admin .btn-secondary{ cursor:pointer; border-radius:10px; font-weight:700; transition:transform .08s ease, box-shadow .12s ease, filter .12s ease; }
body.ws-on #screen-admin .btn-secondary{ background:linear-gradient(180deg,#34343a,#232327); color:var(--ws-ink); border:1px solid rgba(243,241,236,.28); box-shadow:0 2px 0 rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
body.ws-on #screen-admin .btn-primary{ border:1px solid rgba(0,0,0,.25); box-shadow:0 2px 0 #a37f0a, 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45); }
body.ws-on #screen-admin .btn-primary:hover, body.ws-on #screen-admin .btn-secondary:hover{ filter:brightness(1.12); transform:translateY(-1px); }
body.ws-on #screen-admin .btn-primary:active, body.ws-on #screen-admin .btn-secondary:active{ transform:translateY(2px); box-shadow:0 0 0 rgba(0,0,0,0), inset 0 2px 4px rgba(0,0,0,.45); filter:none; }
body.ws-on #screen-admin .btn-primary:focus-visible, body.ws-on #screen-admin .btn-secondary:focus-visible{ outline:2px solid var(--ws-yel); outline-offset:2px; }
body.ws-on #screen-admin button:disabled{ cursor:not-allowed; opacity:.55; box-shadow:none; transform:none; filter:none; }
body.ws-light #screen-admin .btn-secondary{ background:linear-gradient(180deg,#FFFFFF,#E7E3DA); color:#1A1A1A; border-color:rgba(20,20,20,.30); box-shadow:0 2px 0 rgba(20,20,20,.25), 0 4px 10px rgba(20,20,20,.12), inset 0 1px 0 #fff; }
body.ws-on #screen-admin .dash-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:6px 0 10px; }
body.ws-on #screen-admin .dash-tile{ background:var(--ws-panel); border-color:var(--ws-line); padding:18px; border-radius:14px; }
body.ws-on #screen-admin .dash-tile-value{ font-size:30px; }
body.ws-on #screen-admin .dash-top-list{ margin-left:0; margin-right:0; background:var(--ws-panel); }
body.ws-on #screen-admin .admin-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:0 18px; }
body.ws-on #screen-admin .admin-item{ background:var(--ws-panel); border:1px solid var(--ws-line); border-radius:12px; margin:0 0 10px; padding:12px 16px; }
body.ws-on #screen-admin input, body.ws-on #screen-admin select, body.ws-on #screen-admin textarea{ max-width:100%; }

/* Productos: formulario en dos columnas (datos a la izquierda, colores y fotos a la derecha); la lista de productos va a todo el ancho */
body.ws-on #adminSectionProducts{ column-count:2; column-gap:36px; }
body.ws-on #adminSectionProducts > *{ break-inside:avoid; }
body.ws-on #adminSectionProducts > #adminProductFormHead, body.ws-on #adminSectionProducts > :nth-child(n+23){ column-span:all; }
body.ws-on #adminSectionProducts > :nth-child(18){ break-before:column; margin-top:0; }
body.ws-on #screen-admin [style*="padding:0 18px"]{ padding-left:0 !important; padding-right:0 !important; }
body.ws-on #screen-admin .admin-head{ padding-left:0; padding-right:0; }
body.ws-on #screen-admin .checkbox-field{ margin:0 0 8px; }

/* paleta de búsqueda Ctrl K */
body.ws-on #wsPal{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55); align-items:flex-start; justify-content:center; padding-top:14vh; }
body.ws-on #wsPal.abierta{ display:flex; }
.ws-pal-caja{ width:min(560px, 92vw); background:var(--ws-panel); border:1px solid var(--ws-line); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden; color:var(--ws-ink); font-family:var(--font-body); }
.ws-pal-caja input{ width:100%; border:0; border-bottom:1px solid var(--ws-line); background:none; color:var(--ws-ink); font:500 15px var(--font-body); padding:16px 18px; outline:none; }
.ws-pal-lista{ max-height:320px; overflow-y:auto; padding:6px; }
.ws-pal-lista button{ display:flex; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:none; color:var(--ws-ink); font:600 13.5px var(--font-body); text-align:left; cursor:pointer; }
.ws-pal-lista button small{ color:var(--ws-soft); font:500 11px var(--font-mono); }
.ws-pal-lista button.sel, .ws-pal-lista button:hover{ background:rgba(246,194,28,.14); }
.ws-pal-vacio{ padding:16px; color:var(--ws-soft); font-size:13px; }

/* inicio de sesión del panel en pantalla ancha: tarjeta centrada */
@media (min-width:1024px){
  body.ws-login .app > .topbar, body.ws-login .bottomnav, body.ws-login .welcome-overlay{ display:none !important; }
  body.ws-login #screen-admin{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(90% 70% at 50% 30%, rgba(124,31,53,.35), #0B0B0C 70%); }
  body.ws-login #adminLogin::before{ content:""; display:block; height:70px; margin:0 0 20px; background:url(assets/logo-full.png) center / contain no-repeat; }
  body.ws-login #screen-admin > .back-row, body.ws-login #screen-admin > .admin-head{ display:none; }
  body.ws-login #adminLogin{ width:min(400px, 90vw); padding:28px 26px 30px; border:1px solid var(--line); border-radius:16px; background:var(--surface, #111113); }
  body.ws-login #adminLogin .field{ margin-left:0; margin-right:0; }
  body.ws-login #adminLogin > div[style]{ margin-left:0 !important; margin-right:0 !important; }
}
@media (prefers-reduced-motion:no-preference){ .ws-item, .ws-icono, .ws-accion{ transition:background .15s ease, filter .15s ease, color .15s ease; } }