/* ==========================================================
   Shopify-like Admin Theme (con dropdown y alerts)
   ========================================================== */

/* Tokens */
:root{
  --bg: #f6f6f7;
  --surface: #ffffff;
  --line: #e1e3e8;

  --text: #202223;
  --muted:#6d7175;

  --primary:#008060;     /* Verde Shopify */
  --primary-600:#006e52;

  --link:#2c6ecb;
  --link-600:#1f5199;

  --topbar:#111213;      /* negro Shopify */
  --topbar-txt:#e6e6e6;

  --danger:#d82c0d;

  --shadow-sm: 0 1px 1px rgba(22,29,37,.04), 0 1px 3px rgba(22,29,37,.06);
  --shadow-md: 0 1px 2px rgba(22,29,37,.06), 0 8px 16px rgba(22,29,37,.08);

  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:14px;
}

/* Reset suave */
*{box-sizing:border-box}
html,body{height:100%}
html,body,h1,h2,h3,p,ul,ol,dl,dd{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* Base */
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
       Roboto, "Helvetica Neue", Arial, "Noto Sans";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-600);text-decoration:underline}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{outline:2px solid #94c6ff; outline-offset:2px}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 12px;
  background:var(--topbar); color:var(--topbar-txt);
  border-bottom:1px solid #1c1d1f;
}
.tb-left{display:flex;align-items:center;gap:10px}
.brand{width:24px;height:24px;border-radius:6px}
.brand-name{font-weight:700;color:#fff}
.tb-center{flex:1;max-width:720px;margin:0 12px}
.search{display:flex}
.search input{
  width:100%; background:#303238; color:#fff;
  border:1px solid #3a3d42; padding:8px 12px; border-radius:10px;
}
.tb-right{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;background:#2a2c31;color:#e6e6e6;
  border:1px solid #3a3d42; cursor:pointer;
}
.icon-btn:hover{filter:brightness(1.05)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:#24a27a;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700
}

/* Layout */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 56px)}
.sidebar{
  background:#fff;border-right:1px solid var(--line);
  padding:12px 8px; position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto;
}
.content{padding:20px 24px}

/* Sidebar menú */
.menu{display:flex;flex-direction:column;gap:2px}
.group-title{font-size:12px;color:#8a8f95;margin:12px 8px 6px}
.mi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text)}
.mi .ico{width:18px;height:18px;display:inline-flex}
.mi svg{width:18px;height:18px}
.mi:hover{background:#f0f2f4}
.mi.active{background:#eef7f4;border:1px solid #c7e6db}
.spacer{flex:1}

/* Page head */
.page-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.page-head h1{font-size:22px;font-weight:650}
.head-actions{display:flex;gap:8px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;border:1px solid transparent;
  padding:8px 14px;border-radius:var(--r-sm);font-weight:600;box-shadow:var(--shadow-sm)
}
.btn:hover{background:var(--primary-600)}
.btn-ghost{
  background:#fff;color:var(--text);border:1px solid var(--line)
}
.btn-ghost:hover{background:#f6f7f8}
.btn-light{
  background:#fff;color:var(--text);border:1px solid var(--line)
}
.btn.btn-sm{padding:6px 10px;border-radius:var(--r-xs);font-size:13px}

/* Dropdown */
.dropdown{position:relative}
.dd-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  display:none; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-md); padding:8px;
  z-index:1200;                 /* FIX: por delante del thead sticky */
}
.dropdown.open .dd-menu{display:block}
.dd-menu .dd-label{font-size:12px;color:#7a7f84;padding:4px 8px 6px}
.dd-menu button{
  width:100%; text-align:left; background:#fff; border:1px solid transparent;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.dd-menu button:hover{background:#f6f7f8}
.dd-menu hr{border:none;border-top:1px solid var(--line);margin:8px}
.dd-menu .danger{color:var(--danger)}
.dd-menu .danger:hover{background:#fff4f2}

/* Alerts */
.alert{
  background:#eef7f4; color:#0d3b2e; border:1px solid #c7e6db;
  padding:10px 12px; border-radius:10px; margin:10px 0; box-shadow:var(--shadow-sm)
}
.alert-error{background:#fff0ee;border-color:#ffd0c9;color:#8a1f10}

/* Filtros */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid var(--line);
  padding:12px;border-radius:var(--r-md);margin:12px 0;box-shadow:var(--shadow-sm)
}
.filters input,.filters select{
  background:#fff;border:1px solid var(--line);padding:8px 10px;border-radius:var(--r-sm)
}

/* Meta */
.meta{display:flex;align-items:center;justify-content:space-between;margin:6px 0;color:var(--muted)}

/* Table */
.table-wrap{
  position:relative;            /* crea contexto para el z-index del thead */
  overflow:auto;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)
}
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
.table thead th{
  position:sticky;top:0;z-index:10;   /* z-index > 1 para no quedar detrás del contenido */
  background:#fafbfb;                 /* fondo sólido para que no “transparente” */
  color:#3e4348;font-weight:600;font-size:13px;text-align:left;
  border-bottom:1px solid var(--line);
  padding:12px;letter-spacing:.2px
}
.table tbody td{border-bottom:1px solid var(--line);padding:12px;vertical-align:top}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:#fcfcfd}
.ta-right{text-align:right}
.ta-center{text-align:center}
.truncate{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link{color:var(--link)}
.link:hover{color:var(--link-600)}
.link-btn{background:transparent;border:none;padding:0;cursor:pointer}

/* Badges */
.badge{
  display:inline-flex;align-items:center;padding:4px 10px;
  font-size:12px;font-weight:600;color:#2d2f31;background:#f1f2f3;
  border:1px solid var(--line);border-radius:999px
}
.badge[data-status="pagado"]{background:#e9f6f1;border-color:#bfe6d9;color:#085c47}
.badge[data-status="enviado"]{background:#eef4ff;border-color:#cfe0ff;color:#164ea5}
.badge[data-status="en_produccion"]{background:#fff7e5;border-color:#ffe3a3;color:#5b4a00}
.badge[data-status="anulado"]{background:#fff0ee;border-color:#ffd0c9;color:#8a1f10}
.badge[data-status="entregado"]{background:#eefcf1;border-color:#c9f1d6;color:#1b6a2f}

/* Empty state */
.empty{padding:40px}
.empty-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;color:#4f5459}
.empty-illu{width:92px;height:92px;opacity:.7;border-radius:20px}

/* Pager */
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}
.pg{display:inline-block;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);color:var(--text)}
.pg:hover{background:#fafbfb}
.pg.current{background:var(--primary);color:#fff;border-color:transparent}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns:72px 1fr}
  .group-title{display:none}
  .mi{justify-content:center}
  .mi .ico{margin-right:0}
  .mi{padding:10px}
  .sidebar{padding:8px 6px}
}
@media (max-width: 720px){
  .page-head h1{font-size:20px}
  .filters input,.filters select{min-width:100%}
}

/* ====== LOGIN ====== */
.login-body{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.logo-top{display:flex;justify-content:center;padding:24px 0 8px}
.logo-top img{height:54px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.06))}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.login-container{max-width:380px;width:100%;border-radius:12px}
.login-container h2{margin-bottom:10px;text-align:center}
.login-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.input-group{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:10px;opacity:.7}
.input-group input{
  width:100%;padding:10px 12px 10px 34px;background:#fff;border:1px solid var(--line);
  border-radius:10px;outline:none
}
.btn-full{width:100%}
.alert{background:#eef7f4;color:#0d3b2e;border:1px solid #c7e6db;padding:10px 12px;border-radius:10px;margin:10px 0}
.alert-error{background:#fff0ee;border-color:#ffd0c9;color:#8a1f10}
.setup-hint{margin-top:8px;text-align:center;color:var(--muted);font-size:13px}
.main-footer{text-align:center;color:var(--muted);padding:14px 0;font-size:12px}

/* WhatsApp link */
.wa { color:#128c7e; font-weight:600; }
.wa:hover { color:#0f6f65; text-decoration:underline; }

/* Toggle de notificaciones: verde cuando está ON */
.icon-btn[data-on="1"] { background: var(--primary); color:#fff; border-color: transparent; }
.icon-btn .i-bell-off { display: none; }
.icon-btn[data-on="0"] .i-bell { display: none; }
.icon-btn[data-on="0"] .i-bell-off { display: inline; }