/* ════════════════════════════════════════════════════════════════════
   El Amigo Papelero — sistema visual v1 (28 sep 2026)
   Una papelería de barrio, digital: papel punteado, tinta azul marino,
   marcatextos amarillo, fichas con cinta washi, etiquetas de precio y
   sellos de goma. Modo oscuro = "Pizarrón".
   Mantiene todos los IDs y clases que usa el JavaScript.
════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── MODO OSCURO · Pizarrón (se usa cuando el body NO tiene .light-mode) ── */
:root{
  --bg:#0f1b16;
  --bg2:#172720;
  --bg3:#1f3329;
  --bg4:#2a4236;
  --paper:#edf3ec;
  --card:var(--bg2);

  --text:#edf3ec;
  --text1:var(--text);
  --text2:#b7c6bb;
  --text3:#8fa196;
  --text4:#6d8075;
  --textmuted:var(--text3);

  --border:rgba(237,243,236,.09);
  --border2:rgba(237,243,236,.15);
  --border3:rgba(237,243,236,.26);

  --ink:#edf3ec;               /* trazos y contornos */
  --ink-line:#060d0a;          /* borde de calcomanías */
  --ink-shadow:rgba(237,243,236,.22);

  --accent:#8fa6ff;
  --accent2:#a9baff;
  --accent-deep:#6f88f5;
  --accentbg:rgba(143,166,255,.14);
  --accentborder:rgba(143,166,255,.36);
  --purple:var(--accent);

  --marca:#ffe066;             /* marcatextos / gis amarillo */
  --marca-ink:#16213e;
  --marca-soft:rgba(255,224,102,.26);

  --peach:#ff9b7a;--peachbg:rgba(255,155,122,.14);--peachborder:rgba(255,155,122,.36);
  --mint:#5fd3a0;--mintbg:rgba(95,211,160,.14);--mintborder:rgba(95,211,160,.36);
  --sky:#7cc4f5;--skybg:rgba(124,196,245,.14);

  --success:#5fd3a0;--successbg:rgba(95,211,160,.13);
  --warning:#f2b24c;--warningbg:rgba(242,178,76,.13);
  --danger:#ff7a84;--dangerbg:rgba(255,122,132,.13);
  --info:#8fa6ff;--infobg:rgba(143,166,255,.13);

  --radius:14px;
  --radius1:10px;
  --radius2:12px;
  --radius3:9px;
  --radius-pill:999px;

  --shadow-sm:0 1px 0 rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.18);
  --shadow:0 14px 32px -14px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.25);
  --shadow-lg:0 34px 70px -24px rgba(0,0,0,.75),0 10px 24px rgba(0,0,0,.3);
  --hard:3px 3px 0 var(--ink-shadow);
  --glow:0 0 0 4px var(--marca-soft);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.22s;

  --topbar-h:64px;
  --sidebar-w:252px;
  --bottomnav-h:66px;

  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --f-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;

  --dots:rgba(237,243,236,.055);
  --rule:rgba(143,166,255,.10);
  --margin-line:rgba(255,122,132,.35);
}

/* ── MODO CLARO · Cuaderno (por defecto; el body arranca con .light-mode) ── */
body.light-mode{
  --bg:#f3f5fa;
  --bg2:#ffffff;
  --bg3:#ebeef6;
  --bg4:#dde2ee;
  --paper:#16213e;

  --text:#16213e;
  --text2:#475069;
  --text3:#69728c;
  --text4:#8d95ab;

  --border:rgba(22,33,62,.09);
  --border2:rgba(22,33,62,.15);
  --border3:rgba(22,33,62,.27);

  --ink:#16213e;
  --ink-line:#16213e;
  --ink-shadow:#16213e;

  --accent:#2448e0;
  --accent2:#2448e0;
  --accent-deep:#1733b0;
  --accentbg:rgba(36,72,224,.08);
  --accentborder:rgba(36,72,224,.28);

  --marca:#ffd43b;
  --marca-soft:rgba(255,212,59,.42);

  --peach:#f0643f;--peachbg:rgba(240,100,63,.10);--peachborder:rgba(240,100,63,.30);
  --mint:#0f9a70;--mintbg:rgba(15,154,112,.10);--mintborder:rgba(15,154,112,.30);
  --sky:#1d86d0;--skybg:rgba(29,134,208,.10);

  --success:#12805a;--successbg:rgba(18,128,90,.10);
  --warning:#a85f00;--warningbg:rgba(230,140,0,.13);
  --danger:#cc2f3b;--dangerbg:rgba(204,47,59,.09);
  --info:#2448e0;--infobg:rgba(36,72,224,.08);

  --shadow-sm:0 1px 0 rgba(22,33,62,.07),0 2px 6px rgba(22,33,62,.05);
  --shadow:0 14px 30px -14px rgba(22,33,62,.28),0 2px 6px rgba(22,33,62,.06);
  --shadow-lg:0 34px 64px -22px rgba(22,33,62,.38),0 10px 22px rgba(22,33,62,.08);

  --dots:rgba(22,33,62,.075);
  --rule:rgba(36,72,224,.09);
  --margin-line:rgba(204,47,59,.30);
}

/* ── PALETAS (botón de la paleta): cambian pluma y marcatexto ── */
body.light-mode[data-theme="chicle"]{--accent:#c2255c;--accent2:#c2255c;--accent-deep:#96184a;--accentbg:rgba(194,37,92,.08);--accentborder:rgba(194,37,92,.28);--marca:#ffb3cf;--marca-soft:rgba(255,179,207,.45)}
body.light-mode[data-theme="menta"]{--accent:#0b7a5e;--accent2:#0b7a5e;--accent-deep:#075c46;--accentbg:rgba(11,122,94,.08);--accentborder:rgba(11,122,94,.28);--marca:#8ce8c5;--marca-soft:rgba(140,232,197,.45)}
body.light-mode[data-theme="crayon"]{--accent:#c2410c;--accent2:#c2410c;--accent-deep:#9a3309;--accentbg:rgba(194,65,12,.08);--accentborder:rgba(194,65,12,.28);--marca:#ffb37a;--marca-soft:rgba(255,179,122,.45)}
body.light-mode[data-theme="uva"]{--accent:#6741d9;--accent2:#6741d9;--accent-deep:#4c2fb0;--accentbg:rgba(103,65,217,.08);--accentborder:rgba(103,65,217,.28);--marca:#cdb8ff;--marca-soft:rgba(205,184,255,.5)}
body.light-mode[data-theme="grafito"]{--accent:#2b303b;--accent2:#2b303b;--accent-deep:#12151b;--accentbg:rgba(43,48,59,.08);--accentborder:rgba(43,48,59,.28);--marca:#d7dce5;--marca-soft:rgba(215,220,229,.6)}
body:not(.light-mode)[data-theme="chicle"]{--accent:#ff8fb7;--accent2:#ffa9c8;--accent-deep:#f06a9b;--accentbg:rgba(255,143,183,.14);--accentborder:rgba(255,143,183,.36);--marca:#ff9cc2}
body:not(.light-mode)[data-theme="menta"]{--accent:#6fe0b6;--accent2:#8ce8c5;--accent-deep:#44c898;--accentbg:rgba(111,224,182,.14);--accentborder:rgba(111,224,182,.36);--marca:#8ce8c5}
body:not(.light-mode)[data-theme="crayon"]{--accent:#ffa36b;--accent2:#ffb887;--accent-deep:#f58540;--accentbg:rgba(255,163,107,.14);--accentborder:rgba(255,163,107,.36);--marca:#ffc08f}
body:not(.light-mode)[data-theme="uva"]{--accent:#b39bff;--accent2:#c7b5ff;--accent-deep:#9679fb;--accentbg:rgba(179,155,255,.14);--accentborder:rgba(179,155,255,.36);--marca:#cdb8ff}
body:not(.light-mode)[data-theme="grafito"]{--accent:#d0d5de;--accent2:#e1e5ec;--accent-deep:#aab2c0;--accentbg:rgba(208,213,222,.12);--accentborder:rgba(208,213,222,.32);--marca:#c3cad6}

/* Estilos en línea heredados: se pasan a la tipografía nueva */
[style*="Syne"],[style*="DM Sans"],[style*="Instrument"],[style*="JetBrains"],[style*="Cormorant"]{font-family:var(--f-body)!important;font-style:normal!important}
[style*="Courier New"]{font-family:var(--f-mono)!important}

html,body{font-family:var(--f-body)}
html{overflow-x:clip;max-width:100vw}
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 1.1px,transparent 1.4px);
  background-size:22px 22px;
  color:var(--text);font-size:15px;min-height:100vh;overflow-x:clip;max-width:100vw;position:relative;line-height:1.55;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
::selection{background:var(--marca);color:var(--marca-ink)}
h1,h2,h3,h4,.brand{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.08}
a{color:var(--accent)}
.hidden{display:none!important}

*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:padding-box;border:3px solid transparent}
.noscroll-x{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.noscroll-x::-webkit-scrollbar{display:none}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ── Utilidades de marca ── */
.amg-mark{background:linear-gradient(transparent 58%,var(--marca) 58%,var(--marca) 90%,transparent 90%);background-repeat:no-repeat;background-size:100% 100%;padding:0 .08em;color:inherit;border-radius:2px}
.amg-mark-anim{background-size:0% 100%;animation:amgMark .9s .35s var(--ease) forwards}
@keyframes amgMark{to{background-size:100% 100%}}
.amg-hand{font-family:var(--f-hand);font-weight:700;letter-spacing:0}
.amg-mono{font-family:var(--f-mono)}
.amg-eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}

/* Logotipo (SVG en línea + texto) */
.amg-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);line-height:1}
.amg-logo svg{flex-shrink:0;display:block}
.amg-logo .amg-logo-txt{display:flex;flex-direction:column;gap:1px}
.amg-logo .amg-logo-el{font-family:var(--f-hand);font-size:17px;font-weight:700;color:var(--accent);line-height:.9;transform:rotate(-3deg);transform-origin:left bottom}
.amg-logo .amg-logo-name{font-family:var(--f-display);font-size:19px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.amg-logo-lg .amg-logo-el{font-size:24px}
.amg-logo-lg .amg-logo-name{font-size:28px}

/* Nota tipo post-it */
.amg-note{position:relative;background:var(--marca);color:var(--marca-ink);border-radius:4px 4px 14px 4px;padding:16px 20px;box-shadow:0 12px 22px -14px rgba(0,0,0,.45);transform:rotate(-.6deg);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.amg-note::after{content:'';position:absolute;right:0;bottom:0;width:18px;height:18px;background:linear-gradient(135deg,rgba(0,0,0,.18) 50%,transparent 50%);border-radius:0 0 12px 0}
.amg-note b,.amg-note strong{font-family:var(--f-display);font-weight:800}
.amg-note p{font-size:13px;opacity:.8}

/* ── Botón de tema claro/oscuro ── */
#themeToggle{background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--radius-pill);padding:8px 14px;color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;transition:transform var(--dur) var(--ease-spring),background var(--dur),border-color var(--dur);display:flex;align-items:center;gap:7px;font-family:var(--f-body)}
#themeToggle:hover{background:var(--bg3);color:var(--text);border-color:var(--border3);transform:translateY(-1px) rotate(-1deg)}

/* ── Aviso superior ── */
#noticeBanner{display:none;padding:10px 44px;background:var(--marca);color:var(--marca-ink);font-size:13px;font-weight:700;text-align:center;position:relative;z-index:9;border-bottom:2px solid var(--ink-line)}
#noticeBanner.visible{display:block}
#noticeBannerClose{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--marca-ink);cursor:pointer;opacity:.7;padding:4px;line-height:1;font-size:18px;transition:opacity .15s}
#noticeBannerClose:hover{opacity:1}

/* ════════════════════════════════════════════════
   SELLOS (badges)
═══════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;background:transparent;line-height:1.35;transform:rotate(-1.5deg);white-space:nowrap}
.badge-success{color:var(--success);background:var(--successbg)}
.badge-warning{color:var(--warning);background:var(--warningbg)}
.badge-danger{color:var(--danger);background:var(--dangerbg)}
.badge-info,.badge-blue{color:var(--info);background:var(--infobg)}
.badge-purple{color:var(--accent);background:var(--accentbg)}
.badge-gray{color:var(--text2);background:var(--bg3)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot-success{background:var(--success)}.dot-warning{background:var(--warning)}.dot-danger{background:var(--danger)}.dot-info{background:var(--info)}.dot-gray{background:var(--text3)}

/* ── Campana de notificaciones ── */
#notifBell{position:relative;display:none;align-items:center}
#notifBtn{background:var(--bg2);border:1.5px solid var(--border2);border-radius:12px;width:40px;height:40px;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease-spring),background var(--dur)}
#notifBtn:hover{background:var(--bg3);color:var(--text);transform:rotate(-8deg)}
#notifBadge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:99px;display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1;border:2px solid var(--bg)}
#notifDropdown{position:absolute;right:0;top:calc(100% + 10px);width:340px;background:var(--bg2);border:2px solid var(--ink-line);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink-shadow);z-index:500;overflow:hidden;animation:dropIn .28s var(--ease-spring)}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:760px){#notifDropdown{position:fixed;top:64px;right:10px;left:10px;width:auto;max-height:70vh;overflow-y:auto}}
#notifDropdown.hidden{display:none!important}
.notif-item{padding:14px 18px;border-bottom:1px dashed var(--border2);cursor:pointer;transition:background var(--dur)}
.notif-item:hover{background:var(--bg3)}
.notif-item:last-child{border-bottom:none}

/* ── Pantalla de carga ── */
#loadingOverlay{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:18px}
#loadingOverlay p{color:var(--text2);font-size:14px;font-weight:600}
.spinner{width:38px;height:38px;border-radius:50%;border:3px dashed var(--accent);animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════
   BOTONES — calcomanía con sombra dura
═══════════════════════════════════════════════════ */
.btn-primary,.btn-confirm,.sc-cta,.credits-pill .add-btn,.amg-btn{
  --btn-bg:var(--marca);--btn-fg:var(--marca-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--ink-line);border-radius:11px;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.005em;
  cursor:pointer;box-shadow:3px 3px 0 var(--ink-shadow);
  transition:transform .18s var(--ease-spring),box-shadow .18s var(--ease),filter .18s;
  position:relative;white-space:nowrap;text-decoration:none
}
.btn-primary:hover,.btn-confirm:hover,.sc-cta:hover,.credits-pill .add-btn:hover,.amg-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink-shadow)}
.btn-primary:active,.btn-confirm:active,.sc-cta:active,.credits-pill .add-btn:active,.amg-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink-shadow);transition-duration:.06s}
.btn-primary:disabled,.btn-confirm:disabled,.sc-cta:disabled,.amg-btn:disabled{background:var(--bg4);color:var(--text3);border-color:var(--border3);box-shadow:none;cursor:not-allowed;transform:none}
.btn-primary{width:100%;padding:14px;font-size:16px;margin-top:14px}
.btn-confirm{padding:11px 22px;font-size:14px}
.amg-btn{padding:11px 20px;font-size:14px}
.amg-btn-ink{--btn-bg:var(--ink);--btn-fg:var(--bg2)}
body:not(.light-mode) .amg-btn-ink{--btn-bg:var(--text);--btn-fg:#0f1b16}
.amg-btn-paper{--btn-bg:var(--bg2);--btn-fg:var(--text)}
.amg-btn-sm{padding:7px 13px;font-size:13px;border-radius:9px}

.btn-cancel{background:var(--bg2);border:1.5px solid var(--border3);border-radius:11px;padding:10px 20px;color:var(--text);font-family:var(--f-body);font-size:14px;font-weight:700;cursor:pointer;transition:transform .18s var(--ease-spring),background .18s,box-shadow .18s}
.btn-cancel:hover{background:var(--bg3);transform:translateY(-1px);box-shadow:2px 2px 0 var(--border3)}

.btn-sm{background:var(--bg2);border:1.5px solid var(--border2);border-radius:9px;padding:6px 13px;color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--f-body);transition:transform .18s var(--ease-spring),background .18s,border-color .18s}
.btn-sm:hover{background:var(--bg3);border-color:var(--border3);transform:translateY(-1px)}
.btn-sm.success{background:var(--success);border-color:transparent;color:#fff}
.btn-sm.danger{background:var(--danger);border-color:transparent;color:#fff}
.btn-sm.success:hover,.btn-sm.danger:hover{filter:brightness(1.08)}
.btn-sm.btn-active{background:var(--marca);border-color:var(--ink-line);color:var(--marca-ink)}

/* ════════════════════════════════════════════════
   LOGIN — cuaderno a la izquierda, hoja de registro a la derecha
═══════════════════════════════════════════════════ */
#app,#loginPage{position:relative;z-index:1}
#loginPage{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bg)}
.amg-login-hero{position:relative;overflow:hidden;padding:28px 22px 8px;display:flex;flex-direction:column;gap:18px}
.amg-login-hero .amg-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;max-width:640px}
.amg-login-h1{font-family:var(--f-display);font-size:clamp(34px,4.3vw,60px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--text)}
.amg-login-sub{font-size:16px;color:var(--text2);max-width:520px;line-height:1.6}
.amg-checklist{list-style:none;display:grid;gap:10px;margin-top:4px}
.amg-checklist li{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;color:var(--text);opacity:0;animation:amgRise .5s var(--ease) forwards}
.amg-checklist li:nth-child(1){animation-delay:.25s}.amg-checklist li:nth-child(2){animation-delay:.4s}.amg-checklist li:nth-child(3){animation-delay:.55s}.amg-checklist li:nth-child(4){animation-delay:.7s}
.amg-checklist svg{flex-shrink:0;margin-top:1px}
.amg-checklist svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:amgDraw .5s var(--ease) forwards}
.amg-checklist li:nth-child(1) svg path{animation-delay:.45s}.amg-checklist li:nth-child(2) svg path{animation-delay:.6s}.amg-checklist li:nth-child(3) svg path{animation-delay:.75s}.amg-checklist li:nth-child(4) svg path{animation-delay:.9s}
@keyframes amgDraw{to{stroke-dashoffset:0}}
@keyframes amgRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.amg-cats{display:flex;flex-wrap:wrap;gap:8px}
.amg-cat-chip{font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 11px;border:1.5px solid var(--border3);border-radius:8px;background:var(--bg2);color:var(--text);transform:rotate(var(--r,0deg))}
.amg-cat-chip:nth-child(odd){--r:-1.2deg}.amg-cat-chip:nth-child(3n){--r:1.4deg}

/* Ticket (recibo) decorativo */
.amg-ticket{position:relative;width:260px;background:var(--bg2);color:var(--text);padding:18px 18px 22px;font-family:var(--f-mono);font-size:12px;box-shadow:var(--shadow);border-radius:4px;
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x}
.amg-ticket .t-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.amg-ticket .t-sep{border-top:1.5px dashed var(--border3);margin:8px 0}
.amg-ticket .t-total{font-weight:700;font-size:15px}
.amg-ticket .t-head{text-align:center;font-weight:700;letter-spacing:.14em;margin-bottom:6px}
.amg-stamp{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--success);border:2.5px solid currentColor;border-radius:8px;padding:4px 10px;transform:rotate(-8deg);opacity:.9;mix-blend-mode:multiply}
body:not(.light-mode) .amg-stamp{mix-blend-mode:normal}
.amg-login-art{position:relative;display:none}
.amg-login-art .amg-ticket{animation:amgFloat 7s ease-in-out infinite;transform:rotate(3deg)}
.amg-login-art .amg-stamp{position:absolute;right:-22px;bottom:-16px;z-index:2;background:var(--bg2)}
.amg-sticker{position:absolute;z-index:2;top:-22px;left:-26px;background:var(--accent);color:#fff;font-family:var(--f-hand);font-size:22px;font-weight:700;padding:8px 14px;border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;transform:rotate(-14deg);box-shadow:var(--shadow)}
@keyframes amgFloat{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(2deg)}}

/* Hoja de registro (formulario) */
.login-box{position:relative;width:100%;max-width:460px;margin:0 auto 28px;padding:30px 28px 26px;background:var(--bg2);border:2px solid var(--ink-line);border-radius:18px;box-shadow:8px 8px 0 var(--ink-shadow);animation:formIn .55s var(--ease-spring)}
@keyframes formIn{from{opacity:0;transform:translateY(18px) rotate(1deg)}to{opacity:1;transform:none}}
.login-box::before{content:'';position:absolute;top:-13px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(-2deg);background:var(--marca);opacity:.85;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.amg-form-title{font-family:var(--f-display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.amg-form-sub{font-size:13.5px;color:var(--text2);margin-bottom:18px}
.amg-auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg3);border-radius:12px;padding:4px;margin-bottom:20px;border:1.5px solid var(--border2)}
.amg-auth-tabs button{background:none;border:none;border-radius:9px;padding:9px;font-family:var(--f-display);font-size:14px;font-weight:800;color:var(--text3);cursor:pointer;transition:background .2s var(--ease),color .2s,box-shadow .2s,transform .2s var(--ease-spring)}
.amg-auth-tabs button.is-active{background:var(--bg2);color:var(--text);box-shadow:0 2px 0 var(--border3),0 0 0 1.5px var(--border2)}
.login-logo{text-align:center;margin-bottom:22px}
.lh-sec-line{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 4px;font-size:12px;color:var(--text3);font-weight:600}
.amg-login-help{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--border2);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text3)}
.amg-login-help button,.amg-login-help a{background:none;border:none;color:var(--accent);font-weight:700;font-size:12.5px;cursor:pointer;font-family:var(--f-body);text-decoration:none}

.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:6px;font-weight:700}
.form-group input{width:100%;background:var(--bg);border:1.5px solid var(--border2);border-radius:11px;padding:13px 15px;color:var(--text);font-family:var(--f-body);font-size:15px;outline:none;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);font-weight:600}
.form-group input:hover{border-color:var(--border3)}
.form-group input:focus{border-color:var(--ink);background:var(--bg2);box-shadow:var(--glow)}
.form-group input::placeholder{color:var(--text4);font-weight:500}

@media(min-width:1000px){
  #loginPage{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);height:100dvh;overflow:hidden}
  .amg-login-hero{padding:48px 56px 40px 96px;justify-content:center;
    background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--rule) 35px,var(--rule) 36px);
    border-right:2px solid var(--ink-line)}
  .amg-login-hero::before{content:'';position:absolute;top:0;bottom:0;left:64px;width:2px;background:var(--margin-line);box-shadow:5px 0 0 var(--margin-line)}
  .amg-login-hero .amg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;align-items:center}
  .amg-login-art{display:block;margin-right:10px}
  .amg-login-side{display:flex;flex-direction:column;justify-content:center;overflow-y:auto;padding:40px 36px;scrollbar-width:none}
  .amg-login-side::-webkit-scrollbar{display:none}
  .login-box{margin:0 auto}
  .login-logo-formside{display:none}
}

/* ════════════════════════════════════════════════
   ARMAZÓN DE LA APP
═══════════════════════════════════════════════════ */
#app{display:flex;height:100vh;height:100dvh;overflow:hidden;background:transparent}
#app.hidden{display:none!important}

/* Barra lateral (roles de staff) — carpeta de argollas */
#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:2px solid var(--ink-line);display:flex;flex-direction:column;overflow:hidden;position:relative}
.sidebar-header{padding:18px 18px 14px;border-bottom:1.5px dashed var(--border2);text-align:left}
.sidebar-role{font-family:var(--f-mono);font-size:10.5px;color:var(--text3);font-weight:700;margin-top:8px;letter-spacing:.1em;text-transform:uppercase}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav-section{font-family:var(--f-mono);font-size:10.5px;color:var(--text3);font-weight:700;padding:0 12px;margin:18px 0 6px;letter-spacing:.1em;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--text2);font-size:14px;font-weight:700;transition:background var(--dur),color var(--dur),transform .2s var(--ease-spring);margin-bottom:2px;position:relative;border:1.5px solid transparent}
.nav-item:hover{background:var(--bg3);color:var(--text);transform:translateX(2px)}
.nav-item.active{background:var(--marca);color:var(--marca-ink);border-color:var(--ink-line);box-shadow:2px 2px 0 var(--ink-shadow)}
.nav-item .nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.8}
.nav-item.active .nav-icon{opacity:1}
.sidebar-footer{border-top:1.5px dashed var(--border2);padding:10px}
.user-card{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;transition:background var(--dur);cursor:pointer}
.user-card:hover{background:var(--bg3)}
.avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex-shrink:0;font-family:var(--f-display);border:2px solid var(--ink-line);transform:rotate(-3deg)}
.avatar-client{background:var(--marca);color:var(--marca-ink)}
.avatar-provider{background:var(--peach);color:#fff}
.avatar-admin,.avatar-atencion,.avatar-recargas{background:var(--accent);color:#fff}
.user-info{flex:1;min-width:0}
.user-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.user-role-label{font-size:11px;color:var(--text3);margin-top:1px;font-weight:600}
.logout-btn{background:transparent;border:1.5px solid var(--border2);border-radius:10px;padding:7px 10px;color:var(--text2);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--f-body);transition:all var(--dur);width:100%;margin-top:6px}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);background:var(--dangerbg)}
.amg-support-btn{display:flex;align-items:center;gap:7px;margin-top:6px;padding:7px 10px;background:var(--successbg);border:1.5px solid transparent;border-radius:10px;color:var(--success);font-size:12.5px;font-weight:800;font-family:var(--f-body);cursor:pointer;transition:border-color .15s,transform .2s var(--ease-spring);width:100%}
.amg-support-btn:hover{border-color:var(--success);transform:translateY(-1px)}
#pwaInstallBtn{display:none;align-items:center;gap:7px;margin-top:6px;padding:7px 10px;background:var(--accentbg);border:1.5px solid transparent;border-radius:10px;color:var(--accent);font-size:12.5px;font-weight:800;font-family:var(--f-body);cursor:pointer;width:100%}

#main{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;position:relative;max-width:100%}
.topbar{padding:16px 32px;display:flex;justify-content:space-between;align-items:center;gap:14px;position:sticky;top:0;z-index:10;min-height:var(--topbar-h);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1.5px dashed var(--border2)}
.topbar-title{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.1;display:inline;background:linear-gradient(transparent 60%,var(--marca-soft) 60%,var(--marca-soft) 92%,transparent 92%);padding:0 .1em}
.topbar-sub{font-size:13px;color:var(--text2);margin-top:4px;font-weight:600}

/* Saldo en la barra superior: talón de boleto */
.credits-pill{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1.5px solid var(--border3);border-radius:10px;padding:5px 5px 5px 14px;position:relative;transition:transform .2s var(--ease-spring)}
.credits-pill::before{content:'';position:absolute;left:-7px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--bg);border-right:1.5px solid var(--border3);transform:translateY(-50%)}
.credits-pill:hover{transform:rotate(-1deg)}
.credits-pill .clabel{font-family:var(--f-mono);font-size:10.5px;color:var(--text3);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.credits-pill .amount{font-family:var(--f-mono);font-size:18px;font-weight:700;color:var(--text)}
.credits-pill .amount::before{content:'$'}
.credits-pill .add-btn{padding:7px 13px;font-size:13px;border-radius:8px;box-shadow:2px 2px 0 var(--ink-shadow)}

#hamburgerBtn{display:none;align-items:center;justify-content:center;background:var(--bg2);border:1.5px solid var(--border2);border-radius:11px;padding:8px;cursor:pointer;color:var(--text);flex-shrink:0;width:40px;height:40px}

/* ── Paneles ── */
.panel{display:none;padding:28px 34px 40px;flex-direction:column;gap:22px;max-width:1360px;width:100%;margin:0 auto}
.panel.active{display:flex;animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── CLIENTE en escritorio: la barra lateral se vuelve una fila de pestañas arriba ── */
@media(min-width:1280px){
  body[data-rol="client"] #app{flex-direction:column}
  body[data-rol="client"] #sidebar{width:100%;min-width:0;height:auto;flex-direction:row;align-items:flex-end;border-right:none;border-bottom:2px solid var(--ink-line);padding:0 24px;gap:18px;overflow:visible;z-index:20}
  body[data-rol="client"] .sidebar-header{border:none;padding:12px 0;align-self:center}
  body[data-rol="client"] .sidebar-role{display:none}
  body[data-rol="client"] .sidebar-nav{display:flex;flex-direction:row;align-items:flex-end;gap:3px;padding:10px 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  body[data-rol="client"] .sidebar-nav::-webkit-scrollbar{display:none}
  body[data-rol="client"] .nav-item{margin:0 0 -2px;padding:10px 15px 12px;border-radius:12px 12px 0 0;border:2px solid transparent;border-bottom:none;white-space:nowrap;font-size:13.5px;transform:none}
  body[data-rol="client"] .nav-item:hover{background:var(--bg3);transform:translateY(-2px)}
  body[data-rol="client"] .nav-item.active{background:var(--bg);color:var(--text);border-color:var(--ink-line);box-shadow:inset 0 5px 0 var(--marca)}
  body[data-rol="client"] .nav-item .nav-icon{width:16px;height:16px}
  body[data-rol="client"] .sidebar-footer{border:none;padding:0;display:flex;align-items:center;gap:8px;align-self:center}
  body[data-rol="client"] .sidebar-footer .user-card{padding:5px 8px}
  body[data-rol="client"] .sidebar-footer .user-name{max-width:120px}
  body[data-rol="client"] .sidebar-footer .user-role-label{display:none}
  body[data-rol="client"] .sidebar-footer .amg-support-btn,
  body[data-rol="client"] .sidebar-footer .logout-btn,
  body[data-rol="client"] .sidebar-footer #pwaInstallBtn{width:auto;margin:0;white-space:nowrap}
  /* Botones del menú superior del cliente: solo ícono (el texto queda como título) */
  body[data-rol="client"] .sidebar-footer .amg-support-btn,
  body[data-rol="client"] .sidebar-footer #pwaInstallBtn{font-size:0;gap:0;padding:9px;border-radius:11px}
  body[data-rol="client"] .sidebar-footer .amg-support-btn svg,
  body[data-rol="client"] .sidebar-footer #pwaInstallBtn svg{width:17px;height:17px}
  body[data-rol="client"] .sidebar-footer .logout-btn{padding:8px 11px;font-size:12px}
  body[data-rol="client"] .nav-item{padding:10px 12px 12px}
  body[data-rol="client"] #main{height:auto;flex:1}
}
@media(min-width:1280px) and (max-width:1599px){
  body[data-rol="client"] .sidebar-footer .user-info{display:none}
  body[data-rol="client"] .nav-item .nav-icon{display:none}
  body[data-rol="client"] .nav-item{padding:10px 11px 12px;font-size:13px}
}

/* ════════════════════════════════════════════════
   TARJETAS — hojas de papel
═══════════════════════════════════════════════════ */
.card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur),transform .3s var(--ease-spring)}
.card-title{font-family:var(--f-display);font-size:16px;font-weight:800;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.card-title svg,.card-title .nav-icon{width:17px!important;height:17px!important;color:var(--accent)}

/* Estadísticas: fichas con pestaña */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,45%),1fr));gap:16px}
.stat-card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:4px 14px 14px 14px;padding:26px 20px 18px;position:relative;transition:transform .3s var(--ease-spring),box-shadow .25s;min-height:132px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;box-shadow:var(--shadow-sm);margin-top:12px}
.stat-card::before{content:'';position:absolute;left:-1.5px;top:-13px;width:46%;height:14px;background:inherit;border:1.5px solid var(--border2);border-bottom:none;border-radius:8px 10px 0 0}
.stat-card::after{content:'';position:absolute;left:0;top:0;width:46%;height:4px;background:var(--marca)}
.stat-card.blue::after{background:var(--sky)}.stat-card.green::after{background:var(--mint)}.stat-card.amber::after{background:var(--peach)}.stat-card.purple::after{background:var(--marca)}
.stat-card[onclick]{cursor:pointer}
.stat-card[onclick]:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--shadow)}
.stat-label{font-family:var(--f-mono);font-size:11px;color:var(--text3);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.stat-value{font-family:var(--f-display);font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--text);font-feature-settings:"lnum","tnum"}
.stat-value.purple,.stat-value.green,.stat-value.amber,.stat-value.blue{color:var(--text)}
.stat-sub{font-size:12.5px;color:var(--text3);margin-top:6px;font-weight:600}

/* ── Tablas: hoja rayada ── */
.table-wrap{overflow-x:auto;background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:13px 18px;color:var(--text3);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--ink-line);font-weight:700;background:var(--bg2)}
td{padding:14px 18px;border-bottom:1px dashed var(--border2);color:var(--text2);transition:background var(--dur)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--accentbg);color:var(--text)}
.service-name{color:var(--text);font-weight:800}
.price{font-family:var(--f-mono);font-weight:700;color:var(--text)}

/* ════════════════════════════════════════════════
   INICIO DEL CLIENTE
═══════════════════════════════════════════════════ */
.hero-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;background:var(--bg2);border:2px solid var(--ink-line);border-radius:18px;padding:28px 30px;box-shadow:6px 6px 0 var(--ink-shadow);overflow:visible}
.hero-banner::before{content:'';position:absolute;top:-12px;left:36px;width:110px;height:24px;background:var(--marca);opacity:.85;transform:rotate(-3deg);border-radius:3px}
.amg-hello{font-family:var(--f-hand);font-size:26px;font-weight:700;color:var(--accent);line-height:1;transform:rotate(-2deg);transform-origin:left;display:inline-block}
.amg-hero-name{font-family:var(--f-display);font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:6px 0 14px}
.amg-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.amg-level{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--border3);border-radius:8px;padding:4px 9px;margin-left:10px;vertical-align:middle;color:var(--text2)}
/* Recibo con el saldo */
.amg-balance{width:230px;background:var(--bg);border:1.5px dashed var(--border3);border-radius:10px;padding:16px 18px;font-family:var(--f-mono);position:relative;transform:rotate(2deg);transition:transform .4s var(--ease-spring)}
.amg-balance:hover{transform:rotate(0) scale(1.02)}
.amg-balance .b-lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--text3);text-transform:uppercase}
.amg-balance .b-amt{font-size:34px;font-weight:700;color:var(--text);line-height:1.15;margin:4px 0 2px}
.amg-balance .b-cur{font-size:11px;color:var(--text3)}
.amg-balance .b-sep{border-top:1.5px dashed var(--border3);margin:12px 0}
.amg-balance .amg-btn{width:100%}

/* ════════════════════════════════════════════════
   CATÁLOGO
═══════════════════════════════════════════════════ */
.amg-tabs{display:flex;gap:4px;overflow-x:auto;flex-wrap:nowrap;border-bottom:2px solid var(--ink-line);padding:0 4px;margin-bottom:14px}
.amg-tab{flex-shrink:0;white-space:nowrap;padding:10px 16px 11px;margin-bottom:-2px;border:2px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;background:transparent;color:var(--text2);font-family:var(--f-display);font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--ease-spring)}
.amg-tab:hover{background:var(--bg3);transform:translateY(-2px)}
.amg-tab.is-active{background:var(--bg2);color:var(--text);border-color:var(--ink-line);box-shadow:inset 0 5px 0 var(--marca)}
.amg-tab .n{font-family:var(--f-mono);font-size:11px;font-weight:700;opacity:.6;margin-left:3px}
.amg-chips{display:flex;gap:7px;overflow-x:auto;flex-wrap:nowrap;align-items:center;margin-bottom:12px}
.amg-chips .lbl{font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;margin-right:2px}
.tiempo-chip,.amg-chip{flex-shrink:0;white-space:nowrap;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:var(--f-body);font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .2s var(--ease-spring),background .15s,border-color .15s,color .15s}
.tiempo-chip:hover,.amg-chip:hover{transform:translateY(-1px);border-color:var(--border3)}
.tiempo-chip.is-active,.amg-chip.is-active{background:var(--marca);color:var(--marca-ink);border-color:var(--ink-line)}
.amg-searchrow{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.amg-search{position:relative;flex:1;min-width:220px}
.amg-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text3)}
.amg-search input{width:100%;background:var(--bg2);border:2px solid var(--border2);border-radius:12px;padding:11px 38px 11px 40px;color:var(--text);font-family:var(--f-body);font-size:14.5px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s}
.amg-search input:focus{border-color:var(--ink);box-shadow:var(--glow)}
.amg-search .clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;padding:4px;line-height:1;display:none}
.amg-toggle{padding:10px 14px;border-radius:12px;border:2px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:var(--f-body);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:transform .2s var(--ease-spring),background .15s,border-color .15s}
.amg-toggle:hover{transform:translateY(-1px)}
.amg-toggle.is-on{background:var(--marca);border-color:var(--ink-line);color:var(--marca-ink)}

/* Cajones de categoría */
.amg-drawer{border:1.5px solid var(--border2);border-radius:14px;background:var(--bg2);margin-bottom:10px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.amg-drawer:hover{border-color:var(--border3)}
.amg-drawer.is-open{box-shadow:var(--shadow-sm)}
.amg-drawer-head{width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;background:none;border:none;cursor:pointer;text-align:left;color:var(--text);transition:background .15s}
.amg-drawer-head:hover{background:var(--bg3)}
.amg-drawer-head .t{flex:1;font-family:var(--f-display);font-size:16px;font-weight:800}
.amg-drawer-head .n{font-family:var(--f-mono);font-size:11.5px;font-weight:700;background:var(--marca);color:var(--marca-ink);border-radius:6px;padding:2px 8px}
.amg-drawer-head .chev{flex-shrink:0;transition:transform .3s var(--ease-spring);color:var(--text3)}
.amg-drawer-body .services-grid{padding:18px 16px 20px}

.cat-section{margin-bottom:32px}
.cat-label{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cat-label-text{font-family:var(--f-display);font-size:20px;font-weight:800;color:var(--text)}
.cat-label-count{font-family:var(--f-mono);font-size:12px;color:var(--marca-ink);background:var(--marca);border-radius:6px;padding:2px 9px;font-weight:700}
.cat-label-line{flex:1;height:0;border-top:1.5px dashed var(--border2)}

/* Fichas de servicio */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:22px 18px}
.service-card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:6px 6px 14px 14px;padding:22px 18px 16px;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:10px;min-height:178px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-spring),box-shadow .3s,border-color .2s;animation:amgCardIn .5s var(--ease) both}
.service-card::before{content:'';position:absolute;top:-9px;left:50%;width:74px;height:18px;transform:translateX(-50%) rotate(-3deg);background:var(--marca);opacity:.8;border-radius:2px;pointer-events:none}
.service-card:nth-child(3n+2)::before{transform:translateX(-40%) rotate(2deg);background:var(--accent);opacity:.25}
.service-card:nth-child(3n)::before{transform:translateX(-55%) rotate(-1deg);background:var(--mint);opacity:.35}
.service-card:hover{transform:translateY(-5px) rotate(-.7deg);box-shadow:var(--shadow);border-color:var(--border3)}
.service-card:nth-child(even):hover{transform:translateY(-5px) rotate(.7deg)}
.service-card.sc-disabled:hover{transform:none;box-shadow:var(--shadow-sm)}
@keyframes amgCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.services-grid .service-card:nth-child(2){animation-delay:.04s}.services-grid .service-card:nth-child(3){animation-delay:.08s}.services-grid .service-card:nth-child(4){animation-delay:.12s}.services-grid .service-card:nth-child(5){animation-delay:.16s}.services-grid .service-card:nth-child(6){animation-delay:.2s}.services-grid .service-card:nth-child(7){animation-delay:.24s}.services-grid .service-card:nth-child(8){animation-delay:.28s}
.sc-img{display:block;width:calc(100% + 36px);height:124px;object-fit:cover;margin:-22px -18px 6px;border-radius:5px 5px 0 0;border-bottom:1.5px solid var(--border2)}
.sc-name{font-family:var(--f-display);font-size:15px;font-weight:800;color:var(--text);line-height:1.22;letter-spacing:-.015em;padding-right:22px}
.sc-desc{font-size:13.5px;color:var(--text2);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.sc-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:10px;border-top:1.5px dashed var(--border2)}
.sc-price-wrap{min-width:0}
/* Etiqueta de precio colgante */
.sc-price{display:inline-flex;align-items:baseline;gap:4px;position:relative;font-family:var(--f-mono);font-size:17px;font-weight:700;color:var(--marca-ink);background:var(--marca);padding:4px 10px 4px 20px;border-radius:4px 8px 8px 4px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);transform:rotate(-2deg);transform-origin:left center}
.sc-price::before{content:'';position:absolute;left:7px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--bg2);transform:translateY(-50%)}
.sc-price span{color:inherit!important;opacity:.75}
.sc-meta{font-size:11.5px;color:var(--text3);margin-top:7px;font-weight:600}
.sc-cta{padding:8px 15px;font-size:13px;border-radius:9px;box-shadow:2px 2px 0 var(--ink-shadow)}
.amg-cob{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:2px 7px;white-space:nowrap;border:1.5px solid currentColor}
.amg-cob-nac{color:var(--accent);background:var(--accentbg)}
.amg-cob-est{color:var(--warning);background:var(--warningbg)}
.amg-fav{position:absolute;top:8px;right:8px;z-index:2;background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:3px;transition:transform .25s var(--ease-spring)}
.amg-fav:hover{transform:scale(1.3) rotate(-10deg)}
.amg-ex{background:var(--bg3);border:1.5px solid var(--border2);border-radius:8px;padding:4px 9px;color:var(--text2);text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap;transition:border-color .15s,color .15s}
.amg-ex:hover{border-color:var(--accentborder);color:var(--accent)}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}

/* ════════════════════════════════════════════════
   MODALES — hoja con cinta
═══════════════════════════════════════════════════ */
#modalBg{position:fixed;inset:0;background:rgba(10,16,30,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:bgIn .25s var(--ease);padding:24px}
body:not(.light-mode) #modalBg{background:rgba(3,8,6,.65)}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg2);border:2px solid var(--ink-line);border-radius:18px;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:8px 8px 0 var(--ink-shadow);animation:modalIn .42s var(--ease-spring)}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) rotate(-1.2deg) scale(.97)}to{opacity:1;transform:none}}
.modal::before{content:'';position:sticky;display:block;top:0;margin:0 auto -8px;width:110px;height:8px;background:var(--marca);border-radius:0 0 4px 4px;z-index:3}
.modal-header{padding:22px 30px 18px;border-bottom:1.5px dashed var(--border2);position:relative}
.modal-header h3{font-family:var(--f-display);font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.15;padding-right:36px}
.modal-header p{font-size:14px;color:var(--text2);margin-top:6px;line-height:1.55;font-weight:500}
.modal-body{padding:22px 30px}
.modal-footer{padding:16px 30px 24px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal-close{position:absolute;top:16px;right:16px;background:var(--bg2);border:1.5px solid var(--border3);border-radius:10px;width:34px;height:34px;color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-spring),background .2s,color .2s;z-index:4}
.modal-close:hover{background:var(--danger);border-color:var(--danger);color:#fff;transform:rotate(90deg)}

.mform-group{margin-bottom:16px}
.mform-group label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:6px;font-weight:700}
.mform-group input,.mform-group textarea,.mform-group select{width:100%;background:var(--bg);border:1.5px solid var(--border2);border-radius:11px;padding:12px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);resize:vertical;font-weight:600}
.mform-group input:hover,.mform-group textarea:hover,.mform-group select:hover{border-color:var(--border3)}
.mform-group input:focus,.mform-group textarea:focus,.mform-group select:focus{border-color:var(--ink);background:var(--bg2);box-shadow:var(--glow)}
.mform-group select option{background:var(--bg2);color:var(--text)}
.mform-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2369728c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.cost-preview{background:var(--bg);border:1.5px dashed var(--border3);border-radius:12px;padding:14px 18px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cost-preview .clabel{font-family:var(--f-mono);font-size:11px;color:var(--text3);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cost-preview .val{font-family:var(--f-mono);font-size:26px;font-weight:700;color:var(--text);background:linear-gradient(transparent 55%,var(--marca-soft) 55%)}

.credit-option{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border:1.5px solid var(--border2);border-radius:12px;padding:16px 20px;margin-bottom:10px;cursor:pointer;transition:transform .25s var(--ease-spring),border-color .2s,box-shadow .2s}
.credit-option:hover{border-color:var(--border3);transform:translateY(-2px)}
.credit-option.selected{border-color:var(--ink-line);background:var(--marca-soft);box-shadow:3px 3px 0 var(--ink-shadow)}
.credit-option .credits{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--text)}
.credit-option .cost{font-size:14px;color:var(--text2);font-weight:700}

.order-detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--border2);font-size:14px;gap:16px}
.order-detail-row:last-child{border-bottom:none}
.order-detail-row .key{color:var(--text3);font-size:13px;font-weight:600;flex-shrink:0;align-self:center}
.order-detail-row .val{color:var(--text);font-weight:700;text-align:right;max-width:60%}

/* ── Aviso flotante (toast): post-it ── */
#toast{position:fixed;bottom:26px;right:26px;background:var(--bg2);color:var(--text);border:2px solid var(--ink-line);border-radius:12px;padding:13px 18px;font-size:14px;box-shadow:5px 5px 0 var(--ink-shadow);z-index:2000;display:flex;align-items:center;gap:12px;transform:translateY(140%) rotate(3deg);opacity:0;transition:transform .45s var(--ease-spring),opacity .3s;max-width:390px;font-weight:700}
#toast.show{transform:rotate(-1deg);opacity:1}
#toast .toast-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;transform:rotate(45deg)}
#toast.t-success .toast-dot{background:var(--success)}
#toast.t-danger .toast-dot,#toast.t-error .toast-dot{background:var(--danger)}
#toast.t-info .toast-dot{background:var(--info)}
#toast.t-warning .toast-dot{background:var(--warning)}

.work-section{margin-bottom:22px}
.work-section h4{font-family:var(--f-display);font-size:15px;color:var(--text);font-weight:800;margin-bottom:12px}
.info-box{background:var(--accentbg);border:1.5px solid var(--accentborder);border-radius:12px;padding:15px 18px;font-size:14px;color:var(--text);line-height:1.6;font-weight:600}
.delivery-area{background:var(--bg);border:1.5px solid var(--border2);border-radius:11px;padding:13px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;transition:border-color var(--dur),box-shadow var(--dur);resize:vertical;width:100%;min-height:96px;font-weight:600}
.delivery-area:focus{border-color:var(--ink);box-shadow:var(--glow)}

.cat-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border:1.5px solid var(--border2);border-radius:11px;padding:13px 16px;margin-bottom:8px;transition:border-color var(--dur)}
.cat-item:hover{border-color:var(--border3)}
.cat-item-name{font-weight:800;font-size:14.5px}
.cat-add-row{display:flex;gap:10px;margin-top:4px}
.cat-add-row input{flex:1;background:var(--bg);border:1.5px solid var(--border2);border-radius:11px;padding:12px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;font-weight:600}
.cat-add-row input:focus{border-color:var(--ink);box-shadow:var(--glow)}

.transfer-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.transfer-left{order:1}.transfer-right{order:2}

/* ── Selector de paleta ── */
#themePaletteBtn{background:var(--bg2);border:1.5px solid var(--border2);border-radius:12px;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-spring);position:relative;flex-shrink:0}
#themePaletteBtn:hover{transform:rotate(-12deg)}
#themePaletteBtn .ring{position:absolute;inset:9px;border-radius:5px;background:conic-gradient(#ffd43b 0 25%,#ffb3cf 0 42%,#8ce8c5 0 58%,#ffb37a 0 75%,#cdb8ff 0 90%,#d7dce5 0);box-shadow:0 0 0 1.5px var(--ink-line);transform:rotate(-8deg)}
#themePopover{position:fixed;background:var(--bg2);border:2px solid var(--ink-line);border-radius:16px;box-shadow:6px 6px 0 var(--ink-shadow);padding:16px;z-index:2500;width:300px;animation:popIn .3s var(--ease-spring)}
#themePopover.hidden{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) rotate(-2deg)}to{opacity:1;transform:none}}
#themePopover .tp-title{font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
#themePopover .tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tp-swatch{border-radius:10px;border:2px solid var(--border2);cursor:pointer;transition:transform .25s var(--ease-spring),border-color .2s;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px;background:var(--bg)}
.tp-swatch:hover{transform:translateY(-2px) rotate(-2deg)}
.tp-swatch.active{border-color:var(--ink-line);box-shadow:2px 2px 0 var(--ink-shadow)}
.tp-swatch i{display:block;width:100%;height:22px;border-radius:5px;background:var(--sw-marca);box-shadow:inset 0 -6px 0 var(--sw-pluma)}
.tp-swatch .tp-name{font-size:11.5px;font-weight:800;color:var(--text)}
.tp-swatch[data-th="marcatextos"]{--sw-marca:#ffd43b;--sw-pluma:#2448e0}
.tp-swatch[data-th="chicle"]{--sw-marca:#ffb3cf;--sw-pluma:#c2255c}
.tp-swatch[data-th="menta"]{--sw-marca:#8ce8c5;--sw-pluma:#0b7a5e}
.tp-swatch[data-th="crayon"]{--sw-marca:#ffb37a;--sw-pluma:#c2410c}
.tp-swatch[data-th="uva"]{--sw-marca:#cdb8ff;--sw-pluma:#6741d9}
.tp-swatch[data-th="grafito"]{--sw-marca:#d7dce5;--sw-pluma:#2b303b}
#themePopoverOverlay{position:fixed;inset:0;z-index:2400}
#themePopoverOverlay.hidden{display:none}

/* ── Barra inferior del cliente (solo celular) ── */
#amgBottomNav{display:none}

/* ════════════════════════════════════════════════
   CELULAR
═══════════════════════════════════════════════════ */
@media(max-width:760px){
  .amg-login-hero{padding:22px 18px 4px}
  .amg-login-h1{font-size:34px}
  .amg-login-sub{font-size:14.5px}
  .amg-checklist,.amg-cats{display:none}
  .login-box{max-width:100%;padding:28px 20px 22px;border-radius:16px;box-shadow:5px 5px 0 var(--ink-shadow);margin:14px 14px 28px;width:auto}

  #app{flex-direction:column}
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:100;width:286px;min-width:286px;transform:translateX(-104%);transition:transform .38s var(--ease-spring)}
  #sidebar.mobile-open{transform:translateX(0);box-shadow:8px 0 0 var(--ink-shadow)}
  #sidebarOverlay{display:none;position:fixed;inset:0;background:rgba(10,16,30,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99;animation:bgIn .25s var(--ease)}
  #sidebarOverlay.visible{display:block}
  #main{width:100%;height:100vh;height:100dvh}
  .topbar{padding:10px 14px;gap:8px;overflow:hidden;max-width:100%}
  .topbar-title{font-size:20px}
  .topbar-sub{display:none}
  #hamburgerBtn{display:flex}

  .panel{padding:18px 14px 28px;gap:16px}
  body[data-rol="client"] .panel{padding-bottom:calc(var(--bottomnav-h) + 28px + env(safe-area-inset-bottom,0px))}

  .hero-banner{grid-template-columns:1fr;padding:24px 18px 20px;box-shadow:4px 4px 0 var(--ink-shadow)}
  .amg-balance{width:100%;transform:none}
  .stats-grid{grid-template-columns:1fr 1fr!important;gap:12px;min-width:0}
  .stat-value{font-size:32px!important}
  .stat-card{padding:22px 15px 14px;min-height:118px}

  #app,#main,.panel{overflow-x:hidden;max-width:100%;box-sizing:border-box}
  .table-wrap{overflow-x:hidden}
  table{min-width:0!important;width:100%}
  .table-wrap.scrollable{overflow-x:auto;-webkit-overflow-scrolling:touch}
  div[style*="min-width:200px"],div[style*="min-width:220px"]{min-width:0!important;width:100%!important}

  #panel_orders .table-wrap table thead{display:none}
  #panel_orders .table-wrap table tbody tr{display:flex;flex-wrap:wrap;gap:4px;padding:14px 16px;border-bottom:1px dashed var(--border2);align-items:center;cursor:pointer}
  #panel_orders .table-wrap table tbody tr td{border:none;padding:2px 0}
  #panel_orders .table-wrap table tbody tr td:nth-child(1){flex:0 0 100%;font-weight:800;color:var(--text);font-size:14px}
  #panel_orders .table-wrap table tbody tr td:nth-child(2){flex:0 0 100%;font-size:12px;color:var(--text3)}
  #panel_orders .table-wrap table tbody tr td:nth-child(3){flex:1;font-size:12px;color:var(--text3)}
  #panel_orders .table-wrap table tbody tr td:nth-child(4){flex:0 0 auto}
  #panel_orders .table-wrap table tbody tr td:nth-child(5){flex:0 0 auto}
  #panel_orders .table-wrap table tbody tr td:nth-child(6){display:none}

  .card{padding:18px}
  .services-grid{grid-template-columns:1fr 1fr!important;gap:18px 12px}
  .service-card{padding:18px 12px 12px;min-height:150px}
  .sc-img{width:calc(100% + 24px);margin:-18px -12px 6px;height:96px}
  .sc-name{font-size:13.5px;padding-right:16px}
  .sc-price{font-size:14px!important}
  .sc-footer{flex-direction:column;align-items:stretch}
  .sc-cta{width:100%}

  .modal{width:100%;max-height:94vh;border-radius:16px;box-shadow:5px 5px 0 var(--ink-shadow)}
  .modal-header{padding:20px 20px 14px}
  .modal-header h3{font-size:21px}
  .modal-body{padding:18px 20px}
  .modal-footer{padding:14px 20px 22px}

  div[style*="grid-template-columns:1fr 1fr"]{display:flex!important;flex-direction:column!important}
  div[style*="max-width:700px"]{max-width:100%!important}
  div[style*="flex-direction:column;gap:8px;flex-shrink:0"]{flex-direction:row!important;flex-wrap:wrap!important}

  .credits-pill .clabel{display:none}
  .credits-pill{padding:4px 4px 4px 12px;gap:8px}
  .credits-pill .amount{font-size:15px}
  .profile-layout{grid-template-columns:1fr!important}
  .transfer-grid{grid-template-columns:1fr!important;display:flex!important;flex-direction:column}
  .transfer-left{order:2}.transfer-right{order:1;position:relative!important;top:auto!important}

  #toast{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;left:14px;max-width:none}
  body[data-rol="client"] #toast{bottom:calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom,0px))}
  #noticeBanner{font-size:12px;padding:9px 40px 9px 16px}
  #themeToggle span{display:none}
  #themeToggle{padding:8px 10px}
  #notifBtn{width:38px;height:38px}
  #themePaletteBtn,.credits-pill .add-btn{display:none}
  .credits-pill{padding:6px 12px}
  #themePopover{width:calc(100vw - 24px);right:12px!important;left:12px!important}

  /* Barra inferior del cliente */
  body[data-rol="client"] #amgBottomNav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:var(--bottomnav-h);background:var(--bg2);border:2px solid var(--ink-line);border-radius:18px;box-shadow:4px 4px 0 var(--ink-shadow);z-index:90;padding:6px}
  #amgBottomNav button{background:none;border:none;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text3);font-family:var(--f-body);font-size:10.5px;font-weight:800;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--ease-spring);padding:0;margin:0}
  #amgBottomNav button svg{width:21px;height:21px}
  #amgBottomNav button.active{background:var(--marca);color:var(--marca-ink);transform:translateY(-3px)}
  #amgBottomNav button:active{transform:scale(.94)}

  /* Admin: pedidos y actividad reciente → tarjetas */
  #panel_admin_orders .table-wrap,#actividadRecienteCard .table-wrap{overflow-x:hidden}
  #panel_admin_orders .table-wrap table,#actividadRecienteCard .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_orders .table-wrap table thead,#actividadRecienteCard .table-wrap table thead{display:none}
  #panel_admin_orders .table-wrap table tbody tr,#actividadRecienteCard .table-wrap table tbody tr{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px dashed var(--border2);cursor:pointer}
  #panel_admin_orders .table-wrap table tbody tr td,#actividadRecienteCard .table-wrap table tbody tr td{border:none;padding:1px 0}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(1),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(1){font-size:11px;color:var(--text3)}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(2),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(2){font-size:14px;font-weight:800;color:var(--text)}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(3),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(3){font-size:12px;color:var(--text2)}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(4),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(4){font-size:11px;color:var(--text3)}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(5),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(5),
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(6),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(6){display:none}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(7),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(7){display:flex}
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(8),#actividadRecienteCard .table-wrap table tbody tr td:nth-child(8){display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}

  /* Admin: usuarios → tarjetas */
  #panel_admin_users .table-wrap{overflow-x:hidden}
  #panel_admin_users .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_users .table-wrap table thead{display:none}
  #panel_admin_users .table-wrap table tbody tr{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-bottom:1px dashed var(--border2)}
  #panel_admin_users .table-wrap table tbody tr td{border:none;padding:1px 0}
  #panel_admin_users .table-wrap table tbody tr td:nth-child(1){font-size:14px;font-weight:700}
  #panel_admin_users .table-wrap table tbody tr td:nth-child(2){font-size:12px;color:var(--text3)}
  #panel_admin_users .table-wrap table tbody tr td:nth-child(3){display:flex}
  #panel_admin_users .table-wrap table tbody tr td:nth-child(4){font-size:12px;color:var(--text2)}
  #panel_admin_users .table-wrap table tbody tr td:nth-child(5){display:flex;gap:6px;flex-wrap:wrap}

  /* Admin: transacciones → tarjetas */
  #panel_admin_credits .table-wrap{overflow-x:hidden}
  #panel_admin_credits .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_credits .table-wrap table thead{display:none}
  #panel_admin_credits .table-wrap table tbody tr{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:10px 14px;border-bottom:1px dashed var(--border2)}
  #panel_admin_credits .table-wrap table tbody tr td{border:none;padding:1px 0}
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(1){grid-row:1;grid-column:1;font-size:11px;color:var(--text3)}
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(2){grid-row:2;grid-column:1/3;font-size:13px;font-weight:700;color:var(--text)}
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(3){grid-row:3;grid-column:1/3;font-size:11px;color:var(--text3)}
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(4){display:none}
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(5){grid-row:1;grid-column:2;font-size:13px;font-weight:700;text-align:right}
  #panel_admin_credits .card div[style*="display:flex"][style*="gap:10px"][style*="align-items:flex-end"]{flex-direction:column!important}
  #panel_admin_credits .card div[style*="display:flex"][style*="gap:10px"][style*="align-items:flex-end"] > *{width:100%!important;min-width:0!important}
  #panel_admin_reports .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #panel_admin_reports .table-wrap table{min-width:600px}
  div[style*="grid-template-columns:1fr 1fr 1fr auto"]{display:flex!important;flex-direction:column!important;gap:10px!important}
  div[style*="grid-template-columns:1fr 1fr 1fr auto"] > *{width:100%!important;min-width:0!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .amg-mark-anim{background-size:100% 100%}
  .amg-checklist li{opacity:1}
  .amg-checklist svg path{stroke-dashoffset:0}
}

/* ════════════════════════════════════════════════
   CATÁLOGO · ESTANTE (índice lateral + repisas)
═══════════════════════════════════════════════════ */
.amg-shop{display:grid;grid-template-columns:268px minmax(0,1fr);gap:30px;align-items:start}
.amg-shop > *,.amg-shelves #catalogBody > *{min-width:0}
.amg-index{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - 110px);overflow-y:auto;scrollbar-width:none;padding:2px 12px 12px 2px}
.amg-index::-webkit-scrollbar{display:none}
.amg-index .amg-search{min-width:0}
.amg-dividers{display:flex;flex-direction:column;gap:7px}
.amg-divider{--div-c:var(--marca);display:flex;align-items:center;gap:10px;padding:11px 14px 11px 12px;border-radius:4px 12px 12px 4px;border:1.5px solid var(--border2);border-left:7px solid var(--div-c);background:var(--bg2);text-align:left;font-family:var(--f-display);font-weight:800;font-size:14.5px;color:var(--text2);cursor:pointer;transition:transform .3s var(--ease-spring),box-shadow .25s,background .2s,color .2s}
.amg-divider:nth-child(6n+2){--div-c:#8ce8c5}.amg-divider:nth-child(6n+3){--div-c:#ffb3cf}.amg-divider:nth-child(6n+4){--div-c:#cdb8ff}.amg-divider:nth-child(6n+5){--div-c:#ffb37a}.amg-divider:nth-child(6n){--div-c:#9cc9ff}
.amg-divider:hover{transform:translateX(5px);color:var(--text)}
.amg-divider.is-active{background:var(--div-c);color:#16213e;border-color:var(--ink-line);transform:translateX(10px);box-shadow:3px 3px 0 var(--ink-shadow)}
.amg-divider .ico{font-size:17px;line-height:1}
.amg-divider .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amg-divider .n{font-family:var(--f-mono);font-size:11px;font-weight:700;opacity:.7}
.amg-filtros{background:var(--bg2);border:1.5px dashed var(--border3);border-radius:14px;padding:13px 15px}
.amg-filtros summary{font-family:var(--f-display);font-weight:800;font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;color:var(--text)}
.amg-filtros summary::-webkit-details-marker{display:none}
.amg-filtros summary::after{content:'+';font-family:var(--f-mono);font-size:18px;line-height:1;transition:transform .3s var(--ease-spring)}
.amg-filtros[open] summary::after{transform:rotate(45deg)}
.amg-f-group{margin-top:14px}
.amg-f-title{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.amg-filtros .tiempo-chip,.amg-filtros .amg-toggle{display:flex;width:100%;justify-content:flex-start;margin-bottom:6px;border-radius:10px;padding:8px 12px;font-size:13px}
.amg-filtros .tiempo-chip.is-active::after{content:'✓';margin-left:auto;font-weight:800}

.amg-shelves{min-width:0}
.amg-shelves #catalogBody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start}
.amg-shelves #catalogBody > .amg-shelf.is-wide,.amg-shelves #catalogBody > .amg-shelf.is-grid,
.amg-shelves #catalogBody > .amg-cob-bar,.amg-shelves #catalogBody > .amg-estados,
.amg-shelves #catalogBody > .amg-note,.amg-shelves #catalogBody > .amg-empty{grid-column:1/-1}
.amg-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.amg-shelf-title{display:flex;align-items:center;gap:12px}
.amg-shelf-title .ico{font-size:32px;line-height:1;transform:rotate(-6deg)}
.amg-shelf-title h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.amg-shelf-count{font-family:var(--f-mono);font-size:12px;color:var(--text3);font-weight:700}
.amg-shelf{margin-bottom:22px}
.amg-shelf-label{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:2px solid var(--ink-line)}
.amg-shelf-label .t{display:inline-block;background:var(--ink);color:var(--bg2);font-family:var(--f-display);font-size:15px;font-weight:800;letter-spacing:-.01em;padding:5px 12px 6px;border-radius:6px 6px 2px 6px;transform:rotate(-1deg)}
.amg-shelf-label .n{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--text3)}
.amg-shelf-more{margin-left:auto;background:none;border:1.5px solid var(--border3);border-radius:999px;padding:5px 12px;font-family:var(--f-body);font-size:12.5px;font-weight:800;color:var(--text);cursor:pointer;transition:transform .25s var(--ease-spring),background .2s}
.amg-shelf-more:hover{background:var(--marca);border-color:var(--ink-line);color:var(--marca-ink);transform:translateY(-1px)}
.amg-shelf .amg-shelf-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:20px 6px 18px;margin:0 -6px;scrollbar-width:thin}
.amg-shelf .amg-shelf-row > .service-card{flex:0 0 250px;scroll-snap-align:start}
.amg-shelf.is-grid .amg-shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));overflow:visible}
.amg-shelf.is-grid .amg-shelf-row > .service-card{flex:initial}
.amg-cob-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.amg-cob-bar .lbl{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.amg-seg{display:inline-flex;background:var(--bg3);border:1.5px solid var(--border2);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.amg-seg button{border:none;background:none;border-radius:9px;padding:7px 13px;font-family:var(--f-body);font-weight:800;font-size:12.5px;color:var(--text2);cursor:pointer;transition:background .2s,color .2s}
.amg-seg button.is-active{background:var(--bg2);color:var(--text);box-shadow:0 0 0 1.5px var(--ink-line),2px 2px 0 var(--ink-shadow)}
.amg-link{background:none;border:none;color:var(--accent);font-weight:800;font-size:12.5px;cursor:pointer;font-family:var(--f-body)}
.amg-estados{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0 0 18px;padding:12px;border:1.5px dashed var(--border3);border-radius:12px;background:var(--bg2);animation:dropIn .3s var(--ease-spring)}
.amg-estados label{display:flex;gap:8px;align-items:center;padding:6px 9px;border-radius:9px;border:1.5px solid var(--border2);font-size:12.5px;font-weight:700;color:var(--text2);cursor:pointer;transition:background .15s,border-color .15s}
.amg-estados label.is-on{background:var(--marca);border-color:var(--ink-line);color:var(--marca-ink)}
.amg-estados input{accent-color:#16213e;width:14px;height:14px}
.amg-empty{text-align:center;padding:48px 20px;border:2px dashed var(--border3);border-radius:16px;background:var(--bg2);color:var(--text2)}
.amg-empty p{margin-top:8px;font-size:14px}

@media(max-width:1023px){
  .amg-shop{grid-template-columns:minmax(0,1fr);gap:14px}
  .amg-index{position:static;max-height:none;overflow:visible;padding:0}
  .amg-dividers{flex-direction:row;overflow-x:auto;padding:4px 2px 8px}
  .amg-divider{flex-shrink:0;border-radius:12px 12px 4px 4px;border-left-width:1.5px;border-top:6px solid var(--div-c);padding:9px 13px}
  .amg-divider:hover{transform:translateY(-2px)}
  .amg-divider.is-active{transform:translateY(-3px);border-top-color:var(--ink-line)}
  .amg-divider .t{white-space:nowrap;overflow:visible}
  .amg-filtros .tiempo-chip,.amg-filtros .amg-toggle{display:inline-flex;width:auto;margin:0 6px 6px 0}
  .amg-shelf .amg-shelf-row > .service-card{flex-basis:74%}
  .amg-shelves #catalogBody{grid-template-columns:minmax(0,1fr)}
}