/* =========================================================
   MONO SAPIENS STUDIO — panel de administración
   Reutiliza las variables de color/tipografía de assets/css/style.css
   ========================================================= */

.admin-body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
}

.admin-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:0 24px 80px;
}

.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:14px;
}
.admin-header .brand{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.15;
  text-transform:uppercase;
}
.admin-header .brand span{ display:block; }
.admin-header .brand .sub{ color:var(--text-dim); font-size:14px; letter-spacing:1px; }

.admin-main h1{
  font-family:var(--font-display);
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-bottom:20px;
}

.admin-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
}
.admin-toolbar h1{ margin-bottom:0; }

/* ---------- botones / enlaces ---------- */
.admin-btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.6px;
  padding:11px 18px;
  border-radius:6px;
  border:1px solid var(--border);
  cursor:pointer;
  text-transform:uppercase;
  transition:all .15s ease;
}
.admin-btn-accent{
  background:var(--accent);
  color:#1a1208;
  border-color:var(--accent);
}
.admin-btn-accent:hover{ filter:brightness(1.08); }
.admin-btn-ghost{
  background:var(--panel-2);
  color:var(--text-dim);
}
.admin-btn-ghost:hover{ background:var(--knob); color:var(--text); }

.admin-link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.4px;
  color:var(--accent);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
  text-underline-offset:2px;
}
.admin-link-danger{ color:#c9584f; }
.admin-inline-form{ display:inline; margin-left:14px; }

/* ---------- mensajes ---------- */
.admin-flash{
  background:rgba(111,220,111,0.12);
  border:1px solid var(--led);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:12px 16px;
  border-radius:6px;
  margin-bottom:20px;
}
.admin-error{
  background:rgba(201,88,79,0.12);
  border:1px solid #c9584f;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:12px 16px;
  border-radius:6px;
  margin-bottom:20px;
}
.admin-error ul{ margin:0; padding-left:18px; }

.admin-empty{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:13px;
  padding:30px 0;
}

/* ---------- tabla ---------- */
.admin-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-soft);
  border-radius:8px;
}
.admin-table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  font-size:13.5px;
}
.admin-table th,
.admin-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.admin-table th{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:var(--text-dim);
  background:var(--card-header);
}
.admin-table tbody tr:last-child td{ border-bottom:none; }
.admin-table tbody tr:hover{ background:var(--panel-2); }

.admin-col-title{
  white-space:normal;
  max-width:280px;
  font-weight:600;
}
.admin-col-file{ text-align:center; color:var(--text-dim); }
.admin-col-actions{ text-align:right; }

.admin-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.5px;
  padding:4px 9px;
  border-radius:4px;
  border:1px solid var(--border);
  color:var(--text-dim);
  text-transform:uppercase;
}
.admin-badge-produccion{ border-color:var(--accent); color:var(--accent); }
.admin-badge-web{ border-color:#7fa8c9; color:#7fa8c9; }
.admin-badge-marketing{ border-color:#c9a35a; color:#c9a35a; }
.admin-badge-blog{ border-color:#9db67f; color:#9db67f; }

/* ---------- formulario ---------- */
.admin-form{
  background:var(--card);
  border:1px solid var(--border-soft);
  border-radius:9px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:640px;
}

.admin-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-field-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.admin-field-row .admin-field{ flex:1 1 200px; }

.admin-field label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.admin-hint-inline{
  text-transform:none;
  letter-spacing:0;
  color:var(--text-faint);
  font-family:var(--font-body);
}

.admin-field input[type="text"],
.admin-field input[type="date"],
.admin-field select,
.admin-field textarea{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
}
.admin-field textarea{ resize:vertical; }
.admin-field input[type="file"]{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
}

.admin-hint{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
}
.admin-hint code,
.admin-current-file code{
  background:var(--panel-2);
  padding:2px 5px;
  border-radius:3px;
}

.admin-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
}

.admin-current-file{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
}

.admin-current-image{
  display:flex;
  gap:14px;
  align-items:center;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:6px;
  padding:10px;
}
.admin-current-image img{
  width:88px;
  height:60px;
  object-fit:cover;
  border-radius:4px;
  flex:none;
}

.admin-form-actions{
  display:flex;
  gap:12px;
  padding-top:6px;
}

@media (max-width: 560px){
  .admin-current-image{ flex-direction:column; align-items:flex-start; }
}