body{ background:var(--crema-2); }
[hidden]{ display:none !important; }

/* ============ Login ============ */
.admin-login{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.admin-login-card{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:44px 36px;
  max-width:380px;
  width:100%;
  text-align:center;
}
.admin-login-logo{ height:48px; margin:0 auto 24px; }
.admin-login-card h1{ font-size:1.4rem; margin-bottom:8px; }
.admin-login-card p{ color:var(--azul-gris); font-size:.9rem; margin-bottom:24px; }
.admin-login-card form{ display:flex; flex-direction:column; gap:14px; }
.admin-login-card input{
  padding:13px 16px;
  border-radius:var(--radius-sm);
  border:2px solid var(--borde);
  font-family:inherit; font-size:.95rem;
  outline:none;
}
.admin-login-card input:focus{ border-color:var(--verde); }

.admin-error{
  background:#FCE6E0; color:#B0331A;
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:.85rem;
  font-weight:600;
  text-align:left;
}

/* ============ Layout ============ */
.admin-header{
  background:var(--blanco);
  border-bottom:1px solid var(--borde);
  position:sticky; top:0; z-index:20;
}
.admin-header-inner{
  max-width:1100px; margin:0 auto;
  padding:0 24px;
  height:76px;
  display:flex; align-items:center; justify-content:space-between;
}
.admin-header-inner .brand img{ height:42px; }
.admin-header-actions{ display:flex; gap:10px; }

.admin-main{ max-width:1100px; margin:0 auto; padding:40px 24px 80px; }
.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:28px;
}
.admin-toolbar h1{ font-size:1.6rem; }
.admin-subtitle{ color:var(--azul-gris); font-size:.9rem; margin-top:4px; }

/* ============ Tabla ============ */
.admin-table-wrap{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th{
  text-align:left;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--azul-gris);
  padding:16px 20px;
  border-bottom:1px solid var(--borde);
}
.admin-table td{
  padding:14px 20px;
  border-bottom:1px solid var(--borde);
  font-size:.92rem;
  vertical-align:middle;
}
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:var(--crema-2); }

.admin-product-cell{ display:flex; align-items:center; gap:12px; }
.admin-product-cell .art{ width:44px; height:44px; border-radius:12px; font-size:1.2rem; flex-shrink:0; }
.admin-product-cell strong{ font-weight:600; }

.admin-tag{
  display:inline-flex; padding:4px 10px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
}
.admin-tag--nuevo{ background:#E9F5DC; color:var(--verde-fuerte); }
.admin-tag--top{ background:#FCEECB; color:#9A7212; }
.admin-tag--none{ color:var(--azul-gris); }

.admin-row-actions{ display:flex; gap:8px; justify-content:flex-end; }
.icon-action{
  width:34px; height:34px; border-radius:10px; border:none;
  background:var(--crema-2); color:var(--carbon);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.icon-action:hover{ background:var(--verde); color:#fff; }
.icon-action.danger:hover{ background:#E4553A; color:#fff; }
.icon-action svg{ width:15px; height:15px; }

.admin-empty{ text-align:center; padding:60px 20px; }
.admin-empty .art{ width:100px; height:100px; margin:0 auto 16px; font-size:2.4rem; }
.admin-empty p{ color:var(--azul-gris); }

/* ============ Modal de producto (admin) ============ */
.admin-modal{
  position:fixed; inset:0; z-index:96;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.admin-modal.show{ opacity:1; pointer-events:auto; }
.admin-modal-card{
  background:var(--crema);
  border-radius:var(--radius-lg);
  max-width:440px; width:100%;
  padding:36px;
  box-shadow:var(--shadow-lg);
  position:relative;
  transform:translateY(20px) scale(.98);
  transition:transform .25s ease;
}
.admin-modal.show .admin-modal-card{ transform:translateY(0) scale(1); }
.admin-modal-card h3{ font-size:1.25rem; margin-bottom:22px; }
#productForm{ display:flex; flex-direction:column; gap:16px; }
#productForm label{
  display:flex; flex-direction:column; gap:6px;
  font-size:.85rem; font-weight:600; color:var(--azul-gris);
}
#productForm input, #productForm select{
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:2px solid var(--borde);
  font-family:inherit; font-size:.92rem; color:var(--carbon);
  outline:none;
}
#productForm input:focus, #productForm select:focus{ border-color:var(--verde); }
.admin-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }

@media (max-width:720px){
  .admin-table thead{ display:none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
  .admin-table tr{ padding:14px 16px; border-bottom:1px solid var(--borde); }
  .admin-table td{ border:none; padding:4px 0; }
  .admin-row-actions{ justify-content:flex-start; margin-top:10px; }
}