/* ===========================================================
   PACAS HERRERA — Componentes de la app (cuenta, auth, admin)
   Reutiliza las variables de marca definidas en styles.css
   =========================================================== */

/* ---------- Avatares (iniciales centradas sin Bootstrap) ---------- */
.acct__avatar,.avatar-lg,.thumb{display:flex !important;align-items:center;justify-content:center;overflow:hidden;line-height:1;}

/* ---------- Cuenta (header) ---------- */
.acct{position:relative;}
.acct__btn{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--paper);transition:background .15s;}
.acct__btn:hover{background:var(--paper-2);}
.acct__avatar{width:36px;height:36px;border-radius:10px;object-fit:cover;font-size:1rem;}
.acct__name{font-weight:800;font-size:.92rem;color:var(--ink);}
.acct__menu{position:absolute;top:calc(100% + 10px);right:0;min-width:212px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.18s var(--ease);z-index:120;}
.acct__menu.open{opacity:1;transform:none;pointer-events:auto;}
.acct__menu a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;font-weight:700;font-size:.92rem;color:var(--ink);}
.acct__menu a:hover{background:var(--paper);}
.acct__menu a svg{width:18px;height:18px;color:var(--blue);}
.acct__menu-out{color:#e23b3b !important;}
.acct__menu-out svg{color:#e23b3b !important;}
.acct-login svg{width:18px;height:18px;}
@media (max-width:980px){.acct__name{display:none;}.acct-login span{display:none;}}

/* ---------- Tarjeta de producto (extra) ---------- */
.card__img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;}
.card__media-link{display:block;width:100%;height:100%;}
.card__ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--line-strong);background:var(--paper);}
.card__ph svg{width:42px;height:42px;}
.card__ph span{font-size:.82rem;font-weight:700;color:var(--ink-soft);}
.card__badge--out{background:#e23b3b;color:#fff;left:auto;right:12px;top:auto;bottom:12px;}
.card__fav.is-fav{color:#e23b3b;}
.add-btn[disabled]{opacity:.45;cursor:not-allowed;}
.add-btn[disabled]:hover{transform:none;background:var(--navy);}

/* ---------- Catálogo (orden + layout) ---------- */
.cat-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.cat-toolbar select{padding:11px 16px;border-radius:999px;border:2px solid var(--line);font-weight:700;color:var(--ink);background:#fff;}

/* ---------- Página de producto (PDP) ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.pdp__media{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);}
.pdp__media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.pdp__media .card__badge{top:16px;left:16px;}
.pdp__title{font-size:clamp(1.7rem,3vw,2.4rem);text-transform:none;letter-spacing:-.02em;margin:8px 0;color:var(--navy);}
.pdp__price{display:flex;align-items:baseline;gap:10px;margin:6px 0 18px;}
.pdp__price .now{font-size:2.4rem;font-weight:900;color:var(--navy);}
.pdp__price .mxn{font-size:.8rem;font-weight:800;color:var(--ink-soft);}
.pdp__price .was{color:var(--ink-soft);text-decoration:line-through;font-weight:600;}
.pdp__desc{color:var(--ink-soft);font-weight:500;line-height:1.65;margin-bottom:24px;}
.pdp__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
@media (max-width:880px){.pdp{grid-template-columns:1fr;gap:28px;}}

/* ---------- Página de autenticación ---------- */
.auth-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:60px 20px;background:var(--paper);}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:40px;}
.auth-card__head{text-align:center;margin-bottom:26px;}
.auth-card__head h1{font-size:1.7rem;text-transform:uppercase;color:var(--navy);}
.auth-card__head p{margin-top:8px;color:var(--ink-soft);font-weight:500;}
.auth-card .field{margin-bottom:16px;}
.auth-foot{text-align:center;margin-top:22px;font-size:.92rem;color:var(--ink-soft);font-weight:600;}
.auth-foot a{color:var(--blue);font-weight:800;}
.auth-alt{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-soft);font-size:.82rem;font-weight:700;}
.auth-alt::before,.auth-alt::after{content:"";flex:1;height:1px;background:var(--line);}

.alert{padding:13px 16px;border-radius:12px;font-weight:600;font-size:.92rem;margin-bottom:16px;}
.alert--error{background:#fdecec;color:#c0392b;border:1px solid #f5c6c6;}
.alert--ok{background:#eafaf1;color:#1a8f53;border:1px solid #bdeccf;}
.alert--info{background:#eaf4ff;color:#0a5ca8;border:1px solid #c5e0fb;}
.alert--warn{background:#fff8cc;color:#6b5600;border:1px solid #ffe24d;}

.code-inputs{display:flex;gap:12px;justify-content:center;margin:24px 0;}
.code-input{width:58px;height:64px;text-align:center;font-size:1.6rem;font-weight:900;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);transition:.15s;}
.code-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,136,239,.14);}

.dev-banner{background:#062a52;color:#fff;border-radius:12px;padding:13px 16px;margin-bottom:16px;font-size:.9rem;font-weight:600;text-align:center;}
.dev-banner b{color:var(--yellow);font-size:1.2rem;letter-spacing:3px;}

/* ---------- Área de cuenta (cliente) ---------- */
.account{padding:42px 0 80px;background:var(--paper);min-height:70vh;}
.account__grid{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;}
.account__side{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;position:sticky;top:96px;}
.account__user{display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid var(--line);}
.account__user .avatar-lg{width:52px;height:52px;border-radius:14px;object-fit:cover;font-size:1.4rem;}
.account__user b{display:block;font-size:1rem;color:var(--ink);}
.account__user span{font-size:.82rem;color:var(--ink-soft);font-weight:600;}
.account__nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;font-weight:700;font-size:.94rem;color:var(--ink);}
.account__nav a svg{width:18px;height:18px;color:var(--blue);}
.account__nav a:hover{background:var(--paper);}
.account__nav a.active{background:var(--navy);color:#fff;}
.account__nav a.active svg{color:var(--yellow);}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;margin-bottom:22px;}
.panel h2{font-size:1.3rem;text-transform:uppercase;margin-bottom:20px;color:var(--navy);}

.device{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;}
.device__ic{width:46px;height:46px;border-radius:12px;background:var(--paper);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.device__ic svg{width:24px;height:24px;}
.device__info{flex:1;}
.device__info b{font-size:.98rem;}
.device__info span{display:block;font-size:.82rem;color:var(--ink-soft);font-weight:600;}
.device__badge{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:999px;background:#eafaf1;color:#1a8f53;}
.device__badge--this{background:var(--yellow);color:var(--navy);}
.device__del{color:var(--ink-soft);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.device__del:hover{background:#fdecec;color:#c0392b;}
.device__del svg{width:18px;height:18px;}
@media (max-width:880px){.account__grid{grid-template-columns:1fr;}.account__side{position:static;}}

/* ---------- Shell de administración ---------- */
.admin{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--paper);}
.admin-side{background:var(--navy-deep);color:#cdddf2;padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;}
.admin-side__brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;}
.admin-side__brand img{height:34px;}
.admin-side a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.94rem;color:#cdddf2;transition:.15s;}
.admin-side a svg{width:19px;height:19px;opacity:.9;}
.admin-side a:hover{background:rgba(255,255,255,.08);color:#fff;}
.admin-side a.active{background:var(--blue);color:#fff;}
.admin-side a.active svg{color:#fff;}
.admin-side__sp{margin-top:auto;}
.admin-main{padding:26px 30px 60px;min-width:0;}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.admin-top h1{font-size:1.7rem;text-transform:uppercase;color:var(--navy);}
.admin-top .sub{color:var(--ink-soft);font-weight:600;font-size:.92rem;margin-top:4px;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;}
.stat__ic{width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.stat:nth-child(2n) .stat__ic{background:var(--navy);}
.stat:nth-child(3n) .stat__ic{background:var(--yellow);color:var(--navy);}
.stat__ic svg{width:24px;height:24px;}
.stat__n{font-size:2rem;font-weight:900;color:var(--navy);line-height:1;}
.stat__l{font-size:.84rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:6px;}

.adm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.adm-card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.adm-card__head h2{font-size:1.15rem;color:var(--navy);}

.adm-table{width:100%;border-collapse:collapse;}
.adm-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:800;padding:14px 18px;border-bottom:1px solid var(--line);background:#fbfdff;position:sticky;top:0;}
.adm-table td{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);vertical-align:middle;}
.adm-table tr:hover td{background:rgba(10,136,239,.03);}
.adm-table img.thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid var(--line);}
.adm-table .ph-thumb{width:48px;height:48px;border-radius:10px;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--line-strong);}
.adm-table .ph-thumb svg{width:22px;height:22px;}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;padding:5px 11px;border-radius:999px;}
.pill--on{background:#eafaf1;color:#1a8f53;}
.pill--off{background:#f2f1f4;color:#8a8a8a;}
.pill--low{background:#fff3cd;color:#92400e;}
.pill--out{background:#fdecec;color:#c0392b;}
.tag-mini{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700;color:var(--ink-soft);margin:2px 3px 2px 0;}

.iconbtn{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--navy);transition:.15s;}
.iconbtn:hover{background:var(--paper);}
.iconbtn svg{width:17px;height:17px;}
.iconbtn--del{color:#c0392b;}
.iconbtn--del:hover{background:#fdecec;}

/* Switch */
.switch{position:relative;display:inline-block;width:46px;height:26px;}
.switch input{opacity:0;width:0;height:0;}
.switch span{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;transition:.2s;cursor:pointer;}
.switch span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + span{background:#1aa251;}
.switch input:checked + span::before{transform:translateX(20px);}

/* Modal admin */
.adm-modal{position:fixed;inset:0;background:rgba(2,45,94,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:5000;padding:24px;}
.adm-modal.open{display:flex;}
.adm-modal__box{background:#fff;width:min(720px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow-lg);}
.adm-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.adm-modal__head h3{font-size:1.4rem;color:var(--navy);text-transform:uppercase;}
.adm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.adm-foot{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.checks{display:flex;flex-wrap:wrap;gap:9px;}
.checks label{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--ink);}
.checks input{accent-color:var(--blue);}
.checks input:checked + span{color:var(--blue);}

@media (max-width:980px){
  .admin{grid-template-columns:1fr;}
  .admin-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;}
  .admin-side__sp{margin:0;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .adm-grid-2{grid-template-columns:1fr;}
}