/* ============================================================
   MUEBLES MAURO — admin.css
   Mismos tokens visuales que el catálogo, en un layout utilitario
   pensado para completar un formulario rápido, sin vueltas.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#211c17; --linen:#f6f1e8; --sand:#ece2d0; --walnut:#a9866b;
  --taupe:#6f6355; --clay:#a3431f; --clay-dark:#832f13; --line:#ddd0ba;
  --white:#fffdf9; --green:#3f7a4f; --red:#a3311f;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--linen); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:.95rem; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:44px 38px; width:100%; max-width:380px; text-align:center;
}
.login-card img{ width:56px; height:56px; border-radius:50%; margin:0 auto 18px; }
.login-card h1{ font-size:1.5rem; margin-bottom:6px; }
.login-card p{ color:var(--taupe); font-size:.9rem; margin-bottom:24px; }
.login-card input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:5px;
  margin-bottom:14px;
}
.login-error{ color:var(--red); font-size:.85rem; min-height:18px; margin-bottom:6px; }

/* ---------- top bar ---------- */
.admin-header{
  background:var(--ink); color:var(--linen); padding:16px 0;
}
.admin-header .container{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.admin-brand{ display:flex; align-items:center; gap:12px; }
.admin-brand img{ width:34px; height:34px; border-radius:50%; }
.admin-brand span{ font-family:var(--font-display); font-size:1.1rem; }
.admin-nav{ display:flex; align-items:center; gap:18px; font-size:.86rem; }
.admin-nav a, .admin-nav button{
  background:none; border:none; color:#d9cfbf; font-weight:600; padding:0;
}
.admin-nav a:hover, .admin-nav button:hover{ color:var(--linen); }

.status-bar{
  padding:12px 0; font-size:.85rem; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:var(--taupe); flex:none; }
.status-dot.dirty{ background:var(--clay); }
.status-dot.clean{ background:var(--green); }

/* ---------- layout ---------- */
.admin-main{ padding:34px 0 90px; }
.admin-grid{ display:grid; grid-template-columns:380px 1fr; gap:32px; align-items:start; }

.panel{
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:26px;
}
.panel h2{ font-size:1.15rem; margin-bottom:4px; }
.panel-sub{ color:var(--taupe); font-size:.85rem; margin-bottom:20px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.field .hint{ font-weight:400; color:var(--taupe); font-size:.78rem; }
.field input[type=text], .field input[type=number], .field textarea, .field select, .field input[list]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:5px; background:var(--linen);
}
.field textarea{ min-height:90px; resize:vertical; }
.checkbox-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.checkbox-row label{ font-size:.86rem; font-weight:600; margin:0; }

.image-drop{
  border:1.5px dashed var(--line); border-radius:6px; padding:18px; text-align:center;
  color:var(--taupe); font-size:.85rem; cursor:pointer; transition:border-color .15s, color .15s;
}
.image-drop:hover{ border-color:var(--clay); color:var(--clay); }
.image-drop input{ display:none; }
.image-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.image-thumb{ position:relative; width:70px; height:70px; border-radius:5px; overflow:hidden; border:1px solid var(--line); }
.image-thumb img{ width:100%; height:100%; object-fit:cover; }
.image-thumb button{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(33,28,23,.75); color:#fff; border:none; font-size:.7rem; line-height:1;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:6px; border:1px solid transparent;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
}
.btn-primary{ background:var(--clay); color:var(--white); }
.btn-primary:hover{ background:var(--clay-dark); }
.btn-outline{ background:none; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.form-actions{ display:flex; gap:10px; margin-top:6px; }

/* ---------- product list ---------- */
.list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.list-head input{ padding:9px 12px; border:1px solid var(--line); border-radius:5px; min-width:200px; }
.product-row{
  display:grid; grid-template-columns:56px 1fr auto auto; gap:14px; align-items:center;
  padding:12px 8px; border-bottom:1px solid var(--line);
}
.product-row:last-child{ border-bottom:none; }
.product-row img{ width:56px; height:56px; object-fit:cover; border-radius:5px; background:var(--sand); }
.product-row .name{ font-weight:700; }
.product-row .meta{ font-size:.8rem; color:var(--taupe); }
.product-row .price{ font-weight:700; font-size:.88rem; white-space:nowrap; }
.product-row .price.muted{ color:var(--taupe); font-weight:600; }
.row-actions{ display:flex; gap:8px; }
.icon-btn{
  width:34px; height:34px; border-radius:5px; border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--taupe);
}
.icon-btn:hover{ border-color:var(--clay); color:var(--clay); }
.icon-btn.danger:hover{ border-color:var(--red); color:var(--red); }
.list-empty{ padding:40px 10px; text-align:center; color:var(--taupe); }

/* ---------- publish box ---------- */
.publish-box{ margin-top:26px; }
.publish-box .steps{ margin:14px 0 20px; padding-left:20px; color:var(--taupe); font-size:.88rem; }
.publish-box .steps li{ margin-bottom:8px; }
.publish-box .steps code{
  background:var(--linen); padding:2px 6px; border-radius:3px; font-size:.82rem;
}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:var(--linen); padding:12px 20px; border-radius:6px;
  font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px){
  .admin-grid{ grid-template-columns:1fr; }
  .product-row{ grid-template-columns:44px 1fr; }
  .product-row .price, .product-row .row-actions{ grid-column:2; }
}