/* Panel de autogestión — Ocoa Pack
   Reutiliza la paleta y tipografías del sitio público. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root{
  --cream: #FCF9F2;
  --cream-2: #F5F0E3;
  --ink: #1B1B14;
  --ink-soft: #55523F;
  --gold: #E3A61A;
  --gold-deep: #B9800F;
  --green: #3F7D1E;
  --green-deep: #22350F;
  --line: #E4DDC9;
  --rojo: #A32817;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{ font-family:'Outfit', sans-serif; font-weight:600; margin:0; line-height:1.2; letter-spacing:-0.02em; }
h1{ font-size: 28px; }
h2{ font-size: 19px; }
p{ margin: 0; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

.adm-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Barra superior ---------- */
.adm-top{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.adm-top .adm-wrap{
  display:flex; align-items:center; gap: 28px;
  min-height: 70px; flex-wrap: wrap;
}
.adm-brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.adm-brand img{ height: 42px; width:auto; }
.adm-brand span{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--green);
}
.adm-nav{ display:flex; gap: 22px; margin-right:auto; flex-wrap:wrap; }
.adm-nav a{
  font-size:14px; font-weight:500; color: var(--ink-soft);
  padding: 5px 2px; border-bottom: 2px solid transparent;
}
.adm-nav a:hover{ color: var(--ink); }
.adm-nav a.is-active{ color: var(--ink); border-color: var(--gold); }
.adm-user{ display:flex; align-items:center; gap:14px; }
.adm-user span{ display:flex; flex-direction:column; line-height:1.25; text-align:right; }
.adm-user b{ font-size:13.5px; }
.adm-user i{ font-style:normal; font-size:12px; color: var(--ink-soft); }

/* ---------- Estructura ---------- */
.adm-main{ padding-top: 34px; padding-bottom: 70px; }
.adm-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.adm-head p{ font-size:14px; margin-top:6px; max-width: 62ch; }

/* ---------- Botones ---------- */
.btn-admin{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13.5px;
  padding: 10px 18px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; background: none; color: var(--ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-admin-primary{ background: var(--green); color: var(--cream); }
.btn-admin-primary:hover{ background: var(--green-deep); }
.btn-admin-ghost{ border-color: var(--line); color: var(--ink-soft); }
.btn-admin-ghost:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-admin-mini{
  font-size:12.5px; padding: 6px 11px;
  border-color: var(--line); background: var(--cream); color: var(--ink-soft);
}
.btn-admin-mini:hover:not(:disabled){ border-color: var(--green); color: var(--green); }
.btn-admin-danger:hover:not(:disabled){ border-color: var(--rojo); color: var(--rojo); }
.btn-admin:disabled{ opacity: .35; cursor: default; }

/* ---------- Avisos ---------- */
.adm-flash{
  padding: 13px 18px; border-radius: 3px; font-size:14px;
  margin-bottom: 22px; border-left: 3px solid;
}
.adm-flash-ok{ background:#EFF4E8; border-color: var(--green); color: var(--green-deep); }
.adm-flash-error{ background:#FBEDEA; border-color: var(--rojo); color: var(--rojo); }

.adm-vacio{
  border: 1px dashed var(--line); border-radius: 4px;
  padding: 56px 24px; text-align:center; background: var(--cream-2);
}
.adm-vacio p{ margin-bottom: 18px; }

/* ---------- Tabla ---------- */
.adm-tabla-scroll{
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.adm-tabla{ width:100%; border-collapse: collapse; min-width: 940px; }
.adm-tabla th{
  text-align:left; font-family:'Outfit',sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase;
  color: var(--ink-soft); padding: 13px 14px;
  background: var(--cream-2); border-bottom: 1px solid var(--line);
}
.adm-tabla td{
  padding: 13px 14px; border-bottom: 1px solid var(--line);
  vertical-align: middle; font-size: 14px;
}
.adm-tabla tr:last-child td{ border-bottom: none; }
.adm-tabla tbody tr:hover{ background: #FDFCF8; }
.adm-tabla td b{ display:block; font-weight:600; }
.adm-tabla td small{ display:block; font-size:12px; color: var(--ink-soft); margin-top:2px; }
.adm-nowrap{ white-space: nowrap; font-size:13px; }
.adm-mute{ color: var(--ink-soft); opacity: .65; }

.col-img{ width: 78px; }
.col-acc{ width: 1%; }

.adm-thumb{
  width: 62px; height: 46px; object-fit: cover;
  border-radius: 3px; background: var(--cream-2);
}
.adm-thumb-vacio{
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color: var(--ink-soft); border: 1px dashed var(--line);
}

.adm-tag{
  display:inline-block; margin-top:3px;
  font-family:'Outfit',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color: var(--gold-deep); background: #FAF2DC;
  padding: 2px 7px; border-radius: 2px;
}

.adm-estado{
  display:inline-block; font-size:12px; font-weight:500;
  padding: 3px 10px; border-radius: 20px; white-space:nowrap;
}
.adm-estado-on{ background:#EFF4E8; color: var(--green-deep); }
.adm-estado-off{ background:#EEEBE1; color: var(--ink-soft); }
.adm-estado-wait{ background:#FAF2DC; color: var(--gold-deep); }

.adm-acciones{ display:flex; gap:6px; align-items:center; }
.adm-acciones form{ margin:0; }
.adm-orden button{ padding: 6px 9px; }
.adm-inline{ display:flex; gap:6px; }
.adm-inline input{ width: 160px; }

/* ---------- Formularios ---------- */
.adm-form{ background:#fff; border:1px solid var(--line); border-radius:4px; padding: 28px; }
.adm-form-grid{ display:grid; grid-template-columns: 1fr 300px; gap: 32px; align-items:start; }
.adm-form-grid-3{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adm-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f-full{ grid-column: 1 / -1; }

label, .f-label{
  display:block;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px; color: var(--ink);
}
.req{ color: var(--rojo); }

input[type=text], input[type=password], input[type=number], input[type=date],
select, textarea, input[type=file]{
  display:block; width:100%; margin-top:6px;
  font-family:'DM Sans', sans-serif; font-size:14.5px; font-weight:400;
  color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 10px 12px;
}
textarea{ resize: vertical; line-height:1.55; }
input:focus, select:focus, textarea:focus{ border-color: var(--green); outline:none; background:#fff; }
label small{
  display:block; margin-top:5px;
  font-family:'DM Sans',sans-serif; font-weight:400; font-size:12px; color: var(--ink-soft);
}

.f-check{ display:flex; align-items:center; gap:9px; margin-top: 4px; }
.f-check input{ width:auto; margin:0; }
.f-check span{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:14.5px; }

.adm-col-img{ display:flex; flex-direction:column; gap: 8px; }
.adm-preview{
  position:relative; width:100%; aspect-ratio: 4 / 3;
  background: var(--cream-2); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.adm-preview img{ width:100%; height:100%; object-fit: cover; }
.adm-preview span{ font-size:13px; color: var(--ink-soft); }

.adm-form-pie{
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display:flex; gap: 12px; align-items:center;
}

.adm-panel{ margin-top: 42px; }
.adm-panel h2{ margin-bottom: 16px; }

/* ---------- Panel de inicio ---------- */
.adm-kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.adm-kpi{
  background:#fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 4px;
  padding: 22px 22px 20px;
  display:block;
  transition: border-color .18s ease, transform .18s ease;
}
.adm-kpi:hover{ border-color: var(--gold); transform: translateY(-2px); }
.adm-kpi b{
  display:block;
  font-family:'Outfit',sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.adm-kpi span{ font-size: 13px; color: var(--ink-soft); }
.adm-kpi-on{ border-top-color: var(--green); }
.adm-kpi-on b{ color: var(--green); }
.adm-kpi-alerta{ border-top-color: var(--rojo); }
.adm-kpi-alerta b{ color: var(--rojo); }

.adm-dos-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items:start;
}
.adm-bloque{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 26px 24px;
}
.adm-bloque h2{ margin-bottom: 4px; }
.adm-bloque-vacio{ font-size: 14px; margin-top: 12px; }
.adm-bloque .btn-admin{ margin-top: 18px; }

.adm-sub{
  font-family:'Outfit',sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 20px;
}
.adm-sub-alerta{ color: var(--rojo); }

.adm-lista{ list-style:none; margin: 8px 0 0; padding: 0; }
.adm-lista li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.adm-lista li:last-child{ border-bottom: none; }
.adm-lista li > span:last-child{
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.adm-lista a{ border-bottom: 1px solid transparent; }
.adm-lista a:hover{ color: var(--green); border-color: var(--green); }

.adm-lista-fotos li{ justify-content: flex-start; }
.adm-lista-txt{ display:flex; flex-direction:column; line-height:1.35; }
.adm-lista-txt small{ font-size: 12px; color: var(--ink-soft); }

/* ---------- Pie del panel ---------- */
.adm-pie{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  margin-top: 20px;
}
.adm-pie .adm-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}
.adm-pie a:hover{ color: var(--green); }

/* ---------- Login e instalador ---------- */
.auth-body{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px; background: var(--cream-2);
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 5px;
  padding: 40px 36px; box-shadow: 0 18px 44px rgba(27,27,20,0.09);
}
.auth-logo{ height: 54px; width:auto; margin-bottom: 22px; }
.auth-card h1{ font-size: 22px; margin-bottom: 24px; }
.auth-card form{ display:grid; gap: 16px; }
.auth-card .btn-admin{ width:100%; margin-top: 4px; }
.auth-error, .auth-ok, .auth-nota{
  font-size:13.5px; padding: 11px 14px; border-radius:3px;
  border-left: 3px solid; margin-bottom: 18px;
}
.auth-error{ background:#FBEDEA; border-color: var(--rojo); color: var(--rojo); }
.auth-ok{ background:#EFF4E8; border-color: var(--green); color: var(--green-deep); }
.auth-nota{ background: var(--cream-2); border-color: var(--line); color: var(--ink-soft); }
.auth-nota code{ font-size:12.5px; background:#fff; padding:1px 5px; border-radius:2px; }
.auth-volver{ display:block; margin-top: 22px; font-size:13px; color: var(--ink-soft); }
.auth-volver:hover{ color: var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .adm-kpis{ grid-template-columns: repeat(2, 1fr); }
  .adm-dos-col{ grid-template-columns: 1fr; }
  .adm-form-grid, .adm-form-grid-3{ grid-template-columns: 1fr; gap: 24px; }
  .adm-col{ grid-template-columns: 1fr; }
  .adm-col-img{ max-width: 320px; }
  .adm-top .adm-wrap{ padding-top: 12px; padding-bottom: 12px; }
  .adm-user span{ display:none; }
}
@media (max-width: 560px){
  .adm-wrap{ padding: 0 16px; }
  .adm-form{ padding: 20px; }
  h1{ font-size: 23px; }
  .adm-head{ align-items: flex-start; }
  .adm-kpis{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .adm-kpi{ padding: 16px 16px 14px; }
  .adm-kpi b{ font-size: 27px; }
  .adm-bloque{ padding: 20px; }
}