.admin-body{background:var(--paper);}

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--azul);
  padding:20px;
}
.login-card{
  background:#fff;
  padding:34px 30px;
  border-radius:6px;
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Forzamos que "Comercial San Miguel" (+ logo) quede siempre en una sola
   línea, sin importar cómo esté definido .brand en style.css. El tamaño
   de letra se achica con el ancho disponible en vez de cortarse. */
.login-card .brand{
  color:var(--azul);
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:6px;
  font-size:clamp(1.05rem, 5.2vw, 1.5rem);
  overflow:hidden;
}
.login-card .brand span{color:var(--volt);white-space:nowrap;}
.login-card .brand-logo{flex-shrink:0;width:30px;height:30px;object-fit:contain;}
.login-sub{color:var(--muted);font-size:.85rem;margin:0 0 14px;}
.login-card label{font-size:.8rem;font-weight:600;margin-top:10px;color:var(--azul);}
.login-card input{
  height:42px;border:1px solid var(--line);border-radius:4px;padding:0 12px;
  font-size:.92rem;margin-top:4px;
}
.login-card button{
  margin-top:18px;height:44px;background:var(--celeste);color:#fff;border:none;
  border-radius:4px;font-weight:700;font-size:.94rem;cursor:pointer;
}
.login-card button:hover{background:var(--celeste-dark);}
.login-error{color:var(--rojo);font-size:.82rem;min-height:1.2em;margin:8px 0 0;}
.back-link{display:block;text-align:center;margin-top:14px;font-size:.82rem;color:var(--muted);}

/* ---------- Admin shell ---------- */
.admin-header{
  background:var(--celeste);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  flex-wrap:wrap;
  gap:12px;
}
.admin-header .brand{color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.admin-header .brand span{color:var(--azul);}
.admin-tag{font-size:.75rem;font-weight:400;color:#EAF6FF;margin-left:6px;}
.admin-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn-header-link,
.btn-header-logout{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
  padding:8px 14px;
  border-radius:5px;
  font-size:.85rem;
  font-weight:500;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn-header-link:hover,
.btn-header-logout:hover{background:rgba(255,255,255,.16);border-color:#fff;}
.btn-header-logout svg,
.btn-header-link svg{flex-shrink:0;}

.admin-tabs{
  display:flex;gap:4px;padding:14px 24px 0;max-width:1200px;margin:0 auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tab-btn{
  background:none;border:none;padding:10px 18px;font-size:.9rem;font-weight:600;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;
  flex-shrink:0;
}
.tab-btn.active{color:var(--azul);border-bottom-color:var(--volt);}

.tab-panel{display:none;max-width:1200px;margin:0 auto;padding:20px 24px 60px;}
.tab-panel.active{display:block;}

.admin-toolbar{display:flex;justify-content:flex-end;margin-bottom:16px;}

.btn-primary{
  background:var(--volt);color:#fff;border:none;padding:11px 20px;
  font-weight:700;font-size:.9rem;border-radius:4px;cursor:pointer;
}
.btn-primary:hover{background:var(--volt-dark);}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--azul);
  padding:10px 16px;border-radius:4px;font-size:.88rem;cursor:pointer;
}
.btn-ghost:hover{background:var(--celeste-soft);}
.btn-small{padding:6px 12px;font-size:.8rem;}

/* ---------- Products table ---------- */
/* Contenedor con scroll horizontal para que la tabla nunca desborde
   la pantalla en mobile: el JS ya escribe el <table> adentro de
   #adminProductsTable, así que basta con hacer scrollable ese div. */
#adminProductsTable{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.admin-table{width:100%;min-width:680px;border-collapse:collapse;background:#fff;border:1px solid var(--line);}
.admin-table th, .admin-table td{
  padding:11px 12px;text-align:left;font-size:.85rem;border-bottom:1px solid var(--line);
}
.admin-table th{background:var(--celeste-soft);color:var(--azul);font-weight:700;}
.admin-table img.thumb{width:42px;height:42px;object-fit:contain;background:var(--celeste-soft);border-radius:3px;}
.admin-table .row-actions{display:flex;gap:6px;}
.icon-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  border-radius:5px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn svg{width:16px;height:16px;pointer-events:none;}
.icon-edit{color:var(--celeste-dark);}
.icon-edit:hover{background:var(--celeste-soft);border-color:var(--celeste);}
.icon-delete{color:var(--rojo);}
.icon-delete:hover{background:#FCEAE8;border-color:var(--rojo);}
.status-pill{
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:.72rem;font-weight:700;
}
.status-active{background:#E4F8EC;color:var(--whats-dark);}
.status-inactive{background:#FCEAE8;color:var(--rojo);}
.status-agotado{background:#FDEFE1;color:var(--volt-dark);}

/* ---------- Forms ---------- */
.settings-form{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:22px;margin-bottom:20px;max-width:480px;
}
.settings-form h3{margin:0 0 14px;font-size:1rem;color:var(--azul);}
.settings-form label{display:block;font-size:.8rem;font-weight:600;margin-top:12px;color:var(--azul);}
.settings-form input{
  width:100%;height:40px;border:1px solid var(--line);border-radius:4px;padding:0 12px;
  font-size:.9rem;margin-top:4px;
}
.form-msg{font-size:.82rem;margin-top:10px;min-height:1.2em;}
.form-msg.ok{color:var(--whats-dark);}
.form-msg.err{color:var(--rojo);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,59,107,.55);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;
}
.modal-card{
  background:#fff;border-radius:6px;padding:26px;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;
}
.modal-card h3{margin:0 0 16px;color:var(--azul);}
.modal-card-small{max-width:380px;}
.modal-text{color:var(--muted);font-size:.9rem;margin:0 0 20px;}
.btn-danger{
  background:var(--rojo);color:#fff;border:none;padding:11px 20px;
  font-weight:700;font-size:.9rem;border-radius:4px;cursor:pointer;
}
.btn-danger:hover{background:#C4281E;}
.form-row{margin-bottom:14px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;}
.form-row label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px;color:var(--azul);}
.form-row input[type=text],
.form-row input[type=number],
.form-row input[type=file]{
  width:100%;height:40px;border:1px solid var(--line);border-radius:4px;padding:0 12px;font-size:.9rem;
}
.img-preview{margin-top:10px;width:90px;height:90px;object-fit:contain;background:var(--celeste-soft);border-radius:4px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--azul);}
.installments-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
/* Cant. cuotas / Valor c/cuota / % interés / botón quitar */
.installment-row{display:grid;grid-template-columns:1fr 1fr 90px auto;gap:8px;align-items:center;}
.installment-row input{height:36px;border:1px solid var(--line);border-radius:4px;padding:0 10px;font-size:.85rem;}
.installment-row button{border:none;background:none;color:var(--rojo);cursor:pointer;font-size:1rem;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

/* ---------------------------------------------------------------------
   Responsivo (celulares y pantallas angostas)
   --------------------------------------------------------------------- */
@media (max-width: 640px){
  .login-card{width:100%;max-width:360px;padding:28px 20px;}
  .login-card .brand{font-size:clamp(.95rem, 6vw, 1.3rem);}

  /* Header: apilar logo/nombre arriba, acciones abajo, todo centrado */
  .admin-header{
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-header .brand{font-size:1.05rem;}
  .brand-logo{width:32px;height:32px;}
  .admin-tag{margin-left:0;flex-basis:100%;}
  .admin-header-actions{width:100%;justify-content:flex-start;}

  .admin-tabs{padding:12px 16px 0;}
  .tab-btn{padding:8px 12px;font-size:.85rem;}

  .tab-panel{padding:16px 16px 48px;}
  .tab-panel.active{display:block;}

  .admin-toolbar{justify-content:stretch;}
  .admin-toolbar .btn-primary{width:100%;}

  /* Tabla: el contenedor ya scrollea horizontal (ver #adminProductsTable
     arriba); achicamos un poco el padding para aprovechar más ancho. */
  .admin-table th, .admin-table td{padding:9px 10px;font-size:.8rem;}

  /* Formularios y modal: una sola columna */
  .settings-form{padding:16px;max-width:100%;}
  .modal-card{padding:18px;max-width:100%;}
  .form-row-2, .form-row-3{grid-template-columns:1fr;}
  .installment-row{grid-template-columns:1fr 1fr;grid-template-areas:"n v" "pct btn";}
  .installment-row input.inst-n{grid-area:n;}
  .installment-row input.inst-v{grid-area:v;}
  .installment-row input.inst-pct{grid-area:pct;width:100%;}
  .installment-row button{grid-area:btn;justify-self:end;}

  .modal-actions{flex-direction:column-reverse;}
  .modal-actions button{width:100%;}
}