/* Admin henrymartinez.es — misma identidad visual que la landing pública
   (apps/web/public/index.html): Fraunces + Inter + JetBrains Mono, negro/bone,
   acento azul. Mobile-first: Henry administra sobre todo desde el móvil, así
   que el layout base es de una columna y los breakpoints AÑADEN, no quitan. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:        #0A0A0A;
  --black-soft:   #121212;
  --line:         rgba(232,226,213,0.10);
  --line-strong:  rgba(232,226,213,0.22);
  --text:         #F2F0EC;
  --text-soft:    #B6B0A6;
  --text-faint:   #6E6960;
  --bone:         #E8E2D5;
  --accent:       #0C28E0;
  --accent-soft:  #5A75F9;
  --danger:       #E0492C;
  --ok:           #3FB56B;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  --pad-x: 1.1rem;
  --tap:   48px; /* objetivo táctil mínimo cómodo, por encima del 44px de referencia */
  --ease:  cubic-bezier(.2,.7,.2,1);
}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--black);line-height:1.5;min-height:100vh;min-height:100dvh}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
::selection{background:var(--bone);color:var(--black)}
:focus-visible{outline:2px solid var(--bone);outline-offset:2px;border-radius:2px}

/* ---------- topbar (mismo lenguaje que .nav de la landing) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem var(--pad-x);
  background:rgba(10,10,10,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0}
.brand .mark{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--bone);color:var(--bone);
  font-family:var(--font-display);font-style:italic;font-size:.9rem;font-weight:500;
  border-radius:50%;
}
.brand .word{
  display:flex;flex-direction:column;line-height:1.1;min-width:0;
}
.brand .word .name{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);font-weight:500;white-space:nowrap;
}
.brand .word .name em{font-family:var(--font-display);font-style:italic;text-transform:none;color:var(--bone);letter-spacing:0;font-size:.85rem}
.brand .word .sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

.topbar__right{display:flex;align-items:center;gap:.6rem;flex:none}
.user-email{
  display:none; /* en móvil sobra — el email no cabe ni hace falta junto al logout */
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-soft);
  max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (min-width:640px){ .user-email{display:inline} }

/* ---------- botones — área táctil generosa siempre ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:var(--tap);padding:0 1.1rem;
  border-radius:3px;border:1px solid transparent;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
  background:none;color:var(--text);
}
.btn--ghost{border-color:var(--line-strong)}
.btn--ghost:hover,.btn--ghost:active{border-color:var(--bone)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover,.btn--primary:active{background:var(--accent-soft)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- layout ---------- */
.layout{padding:1.4rem var(--pad-x) 3rem;max-width:920px;margin:0 auto}
.hello{margin-bottom:1.6rem}
.hello .kicker{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:.5rem}
.hello h1{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,7vw,2.6rem);line-height:1.05;letter-spacing:-.02em}
.hello h1 em{font-style:italic;font-weight:400;color:var(--bone)}

/* ---------- cards — una columna en móvil, rejilla desde tablet ---------- */
.modules{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:640px){ .modules{grid-template-columns:1fr 1fr} }

.card{
  display:block;padding:1.2rem 1.1rem;
  border:1px solid var(--line-strong);border-radius:4px;background:var(--black-soft);
  min-height:var(--tap);
}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.card__title{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:1.15rem;color:var(--bone)}
.card__badge{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .5rem;border:1px solid var(--line-strong);border-radius:2px;color:var(--text-faint);
  white-space:nowrap;
}
.card__badge--live{color:var(--ok);border-color:var(--ok)}
.card p{color:var(--text-soft);font-size:.88rem;line-height:1.55}

/* ---------- vistas (dashboard / textos / campo) ---------- */
.view-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.btn--back{min-width:var(--tap);padding:0 .9rem;font-size:.95rem}
.view-head__title{font-family:var(--font-display);font-weight:300;font-style:italic;color:var(--bone);font-size:1.4rem}

.card--link{width:100%;text-align:left;background:var(--black-soft)}
.card--link:active{background:#181818}

/* ---------- tabs de idioma ---------- */
.lang-tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.lang-tab{
  min-height:40px;padding:0 1rem;border-radius:3px;border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-soft);
}
.lang-tab.is-active{border-color:var(--bone);color:var(--bone)}

/* ---------- lista de campos ---------- */
.field-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem}
.field-row{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  width:100%;min-height:var(--tap);padding:.9rem 1rem;
  border:1px solid var(--line-strong);border-radius:4px;background:var(--black-soft);
  text-align:left;
}
.field-row__label{font-size:.92rem;color:var(--text)}
.field-row__meta{display:flex;align-items:center;gap:.5rem;flex:none}
.field-row__pending{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-soft);border:1px solid var(--accent-soft);border-radius:2px;padding:.2rem .45rem;
}
.field-row__arrow{color:var(--text-faint)}

/* ---------- barra de publicar (pulgar, fija abajo en móvil) ---------- */
.publish-bar{
  position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:1rem;margin:0 calc(var(--pad-x) * -1) 0;background:rgba(10,10,10,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.publish-bar__hint{font-size:.78rem;color:var(--text-faint);flex:1;min-width:0}

/* ---------- editor de campo ---------- */
.field-hint{font-size:.78rem;color:var(--text-faint);margin:.5rem 0 1.1rem;line-height:1.5}
.field-hint code{font-family:var(--font-mono);background:var(--black-soft);padding:.05rem .3rem;border-radius:2px}
.field-textarea{
  width:100%;min-height:9rem;padding:.9rem 1rem;
  background:var(--black-soft);border:1px solid var(--line-strong);border-radius:4px;color:var(--text);
  font-family:var(--font-body);font-size:.95rem;line-height:1.6;resize:vertical;
}
.field-textarea:focus-visible{border-color:var(--bone)}

.preview-box{border:1px solid var(--line);border-radius:4px;padding:1rem;margin-bottom:1.4rem}
.preview-box__label{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.6rem}
.preview-box__content{font-family:var(--font-display);font-style:italic;color:var(--bone);font-size:1.05rem;line-height:1.5}
.preview-box__content strong{color:var(--text);font-style:normal;font-weight:600}
.preview-box__content em{color:var(--bone)}

.field-actions{display:flex;gap:.7rem;justify-content:flex-end}
.field-actions .btn{flex:1}
@media (min-width:480px){ .field-actions .btn{flex:none} }

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--black);z-index:100;transition:opacity .3s var(--ease)}
.boot.is-hidden{opacity:0;pointer-events:none}
.boot__mark{font-family:var(--font-display);font-style:italic;color:var(--bone);font-size:1.4rem}
.boot__spinner{width:22px;height:22px;border:2px solid var(--line-strong);border-top-color:var(--bone);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .boot__spinner{animation:none} }

/* ---------- callback (pantalla de "autenticando…") ---------- */
.callback-body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;background:var(--black);padding:1.5rem}
.callback{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;max-width:320px}
.callback__mark{font-family:var(--font-display);font-style:italic;color:var(--bone);font-size:1.6rem}
.callback__msg{color:var(--text-soft);font-size:.9rem}
.callback__err{color:var(--danger);font-size:.85rem;line-height:1.5}
.callback__link{margin-top:.4rem;min-height:var(--tap);display:inline-flex;align-items:center;padding:0 1rem;border:1px solid var(--line-strong);border-radius:3px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}