/* =========================================================
   RYKO STUDIO /admin — estilos del panel
   Reutiliza las variables y componentes de css/style.css
   (colores, botones, tipografía, .field, .toast).
   ========================================================= */

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

/* -------------------- login -------------------- */
.admin-login-body{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:380px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:44px 36px;
  text-align:center;
}
.login-card h1{ font-family:var(--font-display); font-weight:700; font-size:26px; margin-bottom:26px; }
.login-card__hint{ font-size:13px; color:#6b6355; margin-bottom:26px; }
.login-card form{ display:grid; gap:18px; text-align:left; }
.login-card .field input{ border:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 12px; color:var(--ink); }
.login-card .field input:focus{ border-color:var(--sun); }
.login-card .field label{ color:#6b6355; }
.login-card__back{ display:inline-block; margin-top:26px; font-size:13px; color:#6b6355; border-bottom:1px solid var(--line); }

/* -------------------- shell -------------------- */
.admin-shell{ display:flex; min-height:100svh; }
.admin-sidebar{
  width:230px; flex:none;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column;
  padding:26px 18px; position:sticky; top:0; height:100svh;
}
.admin-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.03em; margin-bottom:34px; color:var(--paper); }
.admin-logo .seal{ width:30px; height:30px; font-size:14px; }
.admin-nav{ display:grid; gap:4px; flex:1; }
.admin-nav button{
  text-align:left; background:none; border:none; color:rgba(247,243,232,.68);
  padding:11px 12px; border-radius:3px; font-size:14px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.admin-nav button:hover{ background:rgba(247,243,232,.06); color:var(--paper); }
.admin-nav button.is-active{ background:var(--sun); color:var(--paper); }
.admin-sidebar__foot{ display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line-soft); }
.admin-user-email{ font-family:var(--font-mono); font-size:11px; color:rgba(247,243,232,.5); word-break:break-all; }
.admin-view-site{ font-size:12.5px; color:rgba(247,243,232,.6); }
.admin-view-site:hover{ color:var(--paper); }

.admin-main{ flex:1; padding:44px clamp(20px,4vw,56px); max-width:1180px; }
.admin-panel{ display:none; }
.admin-panel.is-active{ display:block; animation:panel-in .35s ease; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.admin-panel__head{ margin-bottom:30px; }
.admin-panel__head h2{ font-family:var(--font-display); font-weight:700; font-size:24px; }
.admin-panel__head p{ color:#6b6355; font-size:13.5px; margin-top:6px; }

/* -------------------- form + preview split -------------------- */
.admin-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
.admin-form{ display:grid; gap:18px; background:var(--paper); border:1px solid var(--line); padding:28px; }
.admin-form .field label{ color:#6b6355; }
.admin-form .field input, .admin-form .field select, .admin-form .field textarea{
  border:1px solid var(--line); border-radius:2px; padding:10px 12px; color:var(--ink); background:var(--paper);
}
.admin-form .field input:focus, .admin-form .field select:focus, .admin-form .field textarea:focus{ border-color:var(--sun); }
.admin-form .field textarea{ resize:vertical; }
.admin-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.admin-form .checkline{ display:flex; align-items:center; gap:10px; font-size:13.5px; }

.admin-preview{ position:sticky; top:24px; }
.admin-preview__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b6355; display:block; margin-bottom:10px; }
.admin-preview__frame{ border:1px solid var(--line); background:var(--paper); padding:26px; overflow:hidden; }

.mini-hero{ position:relative; padding:20px 0; min-height:180px; }
.mini-hero__sun{ position:absolute; top:-10px; right:0; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #C33C2C 0%, var(--sun) 55%, var(--sun-dim) 100%); }
.mini-hero__photo{ position:absolute; top:-10px; right:0; width:90px; height:90px; border-radius:50%; object-fit:cover; }
.mini-hero h3{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.15; max-width:75%; margin:10px 0 8px; }
.mini-hero p{ max-width:75%; font-size:13px; color:#4A453A; }

.mini-about h3{ font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:8px; }
.mini-about p{ font-size:13px; color:#4A453A; margin-bottom:14px; }
.mini-about blockquote{ background:var(--indigo); color:var(--paper); padding:18px; font-family:var(--font-display); font-size:14px; line-height:1.5; }

.mini-contact-list{ display:grid; gap:8px; font-size:13px; }
.mini-contact-list div{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.mini-contact-list span:first-child{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#6b6355; }

.mini-service{ border:1px solid var(--line); padding:16px 18px; }
.mini-service h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:6px; }
.mini-service p{ font-size:12.5px; color:#4A453A; margin-bottom:10px; }
.mini-service .service__tags span{ font-size:10px; }

.mini-card{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.mini-card img{ width:100%; height:100%; object-fit:cover; }
.mini-card__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(20,17,13,.86) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:14px; color:var(--paper); }
.mini-card__tag{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#D9866F; }
.mini-card__title{ font-family:var(--font-display); font-weight:700; font-size:14px; margin-top:4px; }

/* -------------------- dropzone de imagen -------------------- */
.image-drop{
  border:1.5px dashed var(--line); border-radius:3px; padding:22px;
  text-align:center; cursor:pointer; position:relative; background:var(--paper-2);
  transition:border-color .2s ease, background .2s ease;
}
.image-drop:hover, .image-drop.is-dragover{ border-color:var(--sun); background:#F2E6DE; }
.image-drop__preview{ max-width:100%; max-height:160px; margin:0 auto 10px; border-radius:2px; display:block; object-fit:cover; }
.image-drop__label{ display:block; font-size:12.5px; color:#6b6355; }
.image-drop__meta{ display:block; font-size:11px; color:var(--ok); margin-top:6px; font-family:var(--font-mono); }

/* -------------------- listas tipo acordeón (servicios / portafolio) -------------------- */
.admin-list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:14px; flex-wrap:wrap; }
.accordion{ display:grid; gap:12px; }
.accordion-item{ border:1px solid var(--line); background:var(--paper); }
.accordion-item__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.accordion-item__title{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.accordion-item__sub{ font-family:var(--font-mono); font-size:11px; color:#6b6355; margin-top:2px; }
.accordion-item__chev{ transition:transform .25s ease; color:#6b6355; }
.accordion-item.is-open .accordion-item__chev{ transform:rotate(180deg); }
.accordion-item__body{ display:none; padding:0 20px 22px; }
.accordion-item.is-open .accordion-item__body{ display:block; animation:panel-in .25s ease; }
.accordion-item__body .admin-split{ grid-template-columns:1.2fr .8fr; gap:28px; margin-top:14px; }
.accordion-item__body .admin-form{ border:none; padding:0; background:none; }
.accordion-item__actions{ display:flex; gap:10px; margin-top:6px; }
.accordion-item__actions .btn--danger{ border-color:var(--sun); color:var(--sun); }
.accordion-item__actions .btn--danger:hover{ background:var(--sun); color:var(--paper); }

.gallery-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gallery-thumbs__item{ position:relative; width:64px; height:64px; }
.gallery-thumbs__item img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.gallery-thumbs__item button{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--sun); color:var(--paper); border:none; font-size:11px; line-height:1; cursor:pointer; }

/* -------------------- mensajes -------------------- */
.messages-list{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); }
.message-row{ background:var(--paper); padding:20px 22px; display:grid; gap:6px; }
.message-row.is-unread{ box-shadow:inset 3px 0 0 var(--sun); }
.message-row__top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; }
.message-row__name{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.message-row__meta{ font-family:var(--font-mono); font-size:11px; color:#6b6355; }
.message-row__service{ font-size:12px; color:var(--wave); }
.message-row__text{ font-size:14px; color:#3B362D; max-width:760px; }
.message-row__actions{ display:flex; gap:10px; margin-top:6px; }
.empty-note{ padding:40px; text-align:center; color:#6b6355; font-size:13.5px; border:1px dashed var(--line); }

/* -------------------- responsive -------------------- */
@media (max-width: 980px){
  .admin-split, .accordion-item__body .admin-split{ grid-template-columns:1fr; }
  .admin-preview{ position:static; }
}
@media (max-width: 760px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; }
  .admin-nav{ flex-direction:row; flex-wrap:wrap; }
  .admin-sidebar__foot{ border-top:none; padding-top:0; flex-direction:row; align-items:center; }
  .admin-main{ padding:30px 20px; }
}