/* ============================================================
   Portal del cliente — dirección visual "MAREA · WARM" (Stellie)
   Mobile-first. Tokens tomados de web/sitio/stellie.css.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,700;0,6..12,800;0,6..12,900&family=Lora:ital,wght@1,500&display=swap");

:root {
  --canvas:#F4EFE6; --paper:#FBF8F1; --sand:#EBE1CE; --sand-border:#D8CCB2;
  --ink:#12100B; --petrol:#100E0A; --sea-deep:#15332C;
  --gold:#C6A256; --gold-soft:#DCC182; --gold-deep:#9C7C36;
  --sea:#2E7D7B;
  --ink-soft:rgba(18,16,11,.66); --ink-faint:rgba(18,16,11,.44);
  --ivory:#F4ECDD;
  --ok:#2E7D5B; --warn:#A8682A; --bad:#A63D2F;
  --radius:14px;
  --display:"Montserrat",sans-serif; --text:"Hanken Grotesk",sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--text); background:var(--canvas); color:var(--ink);
  min-height:100vh; line-height:1.5;
}
button { font-family:var(--text); cursor:pointer; }
input, select, textarea {
  font-family:var(--text); font-size:16px; /* evita zoom iOS */
  width:100%; padding:11px 13px; border:1px solid var(--sand-border);
  border-radius:10px; background:var(--paper); color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
textarea { resize:vertical; min-height:90px; }
label { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 5px; }
.hidden { display:none !important; }

/* ---------- Marca ---------- */
.brand { font-family:var(--display); font-weight:800; letter-spacing:.18em; }
.brand .dot { color:var(--gold); }

/* ---------- Login ---------- */
#view-login {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:linear-gradient(165deg,var(--petrol) 0%,var(--sea-deep) 130%);
}
.login-card {
  width:100%; max-width:380px; background:var(--paper); border-radius:18px;
  padding:34px 26px 28px; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-card .brand { font-size:22px; text-align:center; display:block; }
.login-card .sub { text-align:center; color:var(--ink-soft); font-size:13.5px; margin-top:6px; }
.login-card form { margin-top:10px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; padding:12px 22px;
  font-weight:700; font-size:14.5px; letter-spacing:.02em;
  background:var(--gold); color:var(--petrol); transition:background .15s, transform .05s;
}
.btn:hover { background:var(--gold-soft); }
.btn:active { transform:scale(.985); }
.btn:disabled { opacity:.55; cursor:default; }
.btn.block { width:100%; margin-top:20px; }
.btn.ghost { background:transparent; border:1px solid var(--sand-border); color:var(--ink); font-weight:600; }
.btn.ghost:hover { border-color:var(--gold-deep); color:var(--gold-deep); }
.btn.danger { background:transparent; border:1px solid rgba(166,61,47,.4); color:var(--bad); font-weight:600; }
.btn.sm { padding:8px 15px; font-size:13px; }

.banner {
  margin-top:16px; padding:10px 13px; border-radius:10px; font-size:13px;
  background:rgba(168,104,42,.1); border:1px solid rgba(168,104,42,.35); color:var(--warn);
}
.error-msg { margin-top:12px; font-size:13.5px; color:var(--bad); min-height:18px; }

/* ---------- Shell de la app ---------- */
#view-app { min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:20;
  background:var(--petrol); color:var(--ivory);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.topbar .brand { font-size:16px; color:var(--ivory); }
.topbar .who { font-size:12px; color:rgba(244,236,221,.6); margin-top:2px; }
.topbar button { background:none; border:1px solid rgba(244,236,221,.25); color:var(--ivory); border-radius:999px; padding:7px 14px; font-size:12.5px; }
.topbar button:hover { border-color:var(--gold); color:var(--gold-soft); }

.tabs {
  position:sticky; top:57px; z-index:19;
  display:flex; gap:6px; padding:10px 14px; overflow-x:auto;
  background:var(--canvas); border-bottom:1px solid var(--sand-border);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab {
  border:1px solid var(--sand-border); background:var(--paper); color:var(--ink-soft);
  border-radius:999px; padding:8px 17px; font-size:13.5px; font-weight:600; white-space:nowrap;
}
.tab.active { background:var(--petrol); border-color:var(--petrol); color:var(--ivory); }

main { flex:1; width:100%; max-width:880px; margin:0 auto; padding:20px 16px 70px; }
.module-title { font-family:var(--display); font-weight:800; font-size:20px; margin:8px 0 4px; }
.module-sub { color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }

/* ---------- Cards / listas ---------- */
.card {
  background:var(--paper); border:1px solid var(--sand-border); border-radius:var(--radius);
  padding:16px; margin-bottom:12px;
}
.card h3 { font-family:var(--display); font-weight:700; font-size:15.5px; }
.card .meta { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row.between { justify-content:space-between; }
.kind-head {
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); margin:22px 0 10px;
}

/* Precio: input compacto */
.price-wrap { display:flex; align-items:center; gap:8px; margin-top:12px; }
.price-wrap .cur { font-weight:700; color:var(--ink-soft); }
.price-wrap input { max-width:120px; text-align:right; font-weight:700; }
.price-wrap .basis { font-size:12px; color:var(--ink-faint); flex:1; }

/* Switch visible */
.switch { position:relative; display:inline-block; width:44px; height:25px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
  position:absolute; inset:0; border-radius:999px; background:var(--sand-2,#E4DAC4);
  border:1px solid var(--sand-border); transition:.15s;
}
.switch .slider::before {
  content:""; position:absolute; width:19px; height:19px; border-radius:50%;
  left:2px; top:2px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s;
}
.switch input:checked + .slider { background:var(--sea); border-color:var(--sea); }
.switch input:checked + .slider::before { transform:translateX(19px); }

/* Chips de estado */
.chip { display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.04em; }
.chip.publicado, .chip.hecha { background:rgba(46,125,91,.13); color:var(--ok); }
.chip.borrador, .chip.nueva { background:rgba(168,104,42,.13); color:var(--warn); }
.chip.en_progreso { background:rgba(46,125,123,.14); color:var(--sea); }
.chip.featured { background:rgba(198,162,86,.18); color:var(--gold-deep); }

/* ---------- Editor blog ---------- */
.lang-cols { display:grid; grid-template-columns:1fr; gap:0 18px; }
.editor-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.empty { text-align:center; color:var(--ink-faint); padding:36px 10px; font-size:14px; }

/* ---------- Módulo Notas: web embebida + pins ---------- */
main:has(#mod-notas:not(.hidden)) { max-width:1280px; }
.notas-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 12px;
}
.pin-hint { font-size:13px; color:var(--gold-deep); font-weight:600; }
.pin-hint a { color:var(--ink-faint); }
.pin-device { margin-left:auto; display:flex; gap:4px; }
.dev-btn {
  border:1px solid var(--sand-border); background:var(--paper); border-radius:8px;
  padding:6px 10px; font-size:14px; opacity:.55;
}
.dev-btn.active { opacity:1; border-color:var(--gold-deep); }
.site-frame-wrap {
  position:relative; background:var(--petrol); border:1px solid var(--sand-border);
  border-radius:var(--radius); overflow:hidden; height:72vh; min-height:420px;
  text-align:center; margin-bottom:18px;
}
#site-frame {
  width:100%; max-width:100%; height:100%; border:0; background:#fff;
  display:inline-block; transition:width .2s;
}
.nota-form {
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(16,14,10,.45); backdrop-filter:blur(2px); padding:18px;
}
.nota-form-card {
  width:100%; max-width:420px; background:var(--paper); border-radius:14px;
  padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.4); text-align:left;
}
.nota-form-card .meta { font-size:12.5px; color:var(--gold-deep); font-weight:600; margin-bottom:10px; }

/* ---------- Toast ---------- */
#toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(80px);
  background:var(--petrol); color:var(--ivory); padding:11px 20px; border-radius:999px;
  font-size:13.5px; opacity:0; transition:.25s; z-index:50; max-width:90vw; text-align:center;
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#toast.err { background:var(--bad); }

/* ---------- Desktop ---------- */
@media (min-width:720px) {
  .topbar { padding:16px 28px; }
  main { padding:28px 24px 80px; }
  .module-title { font-size:24px; }
  .lang-cols { grid-template-columns:1fr 1fr; }
  .card { padding:20px; }
}

/* ---- Módulo Productos: grilla de fotos ---- */
.fotos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:8px; }
.foto-thumb{ position:relative; border-radius:10px; overflow:hidden; border:2px solid transparent; background:var(--sand-2, #eee); }
.foto-thumb.portada{ border-color:var(--gold, #C6A256); }
.foto-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.foto-thumb .badge{ position:absolute; top:6px; left:6px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(18,16,11,.75); color:#F4ECDD; padding:3px 8px; border-radius:99px; }
.foto-thumb .foto-acts{ position:absolute; bottom:6px; right:6px; display:flex; gap:4px; }
.foto-thumb .foto-acts button{ width:26px; height:26px; border:0; border-radius:7px; background:rgba(18,16,11,.75);
  color:#F4ECDD; font-size:13px; line-height:1; cursor:pointer; }
.foto-thumb .foto-acts button:hover{ background:rgba(18,16,11,.95); }
select{ width:100%; padding:11px 12px; border:1px solid var(--sand-border, #D8CCB2); border-radius:10px;
  background:#fff; font:inherit; color:inherit; }

/* ---- Journal: vista previa en vivo (look del sitio) ---- */
.ed-split{ display:grid; gap:18px; align-items:start; }
@media(min-width:1100px){ .ed-split{ grid-template-columns:minmax(0,1fr) minmax(0,620px); } }
.prev-pane{ border:1px solid var(--sand-border, #D8CCB2); border-radius:14px; overflow:hidden; background:#F4EFE6; }
.prev-pane iframe{ width:100%; height:calc(100vh - 120px); min-height:480px; border:0; display:block; background:#fff; }
/* Editor de Journal y Productos: usar el ancho real de la pantalla */
main:has(#mod-blog:not(.hidden)), main:has(#mod-productos:not(.hidden)){ max-width:1500px; }
@media(min-width:1100px){ .prev-pane{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; } }
.prev-bar{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
  background:#12100B; color:#F4ECDD; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  position:sticky; top:0; z-index:2; }
.prev-bar .langs button{ border:1px solid rgba(244,236,221,.3); background:none; color:#F4ECDD;
  font-size:11px; padding:4px 10px; border-radius:99px; margin-left:6px; }
.prev-bar .langs button.on{ background:#C6A256; border-color:#C6A256; color:#1c1606; }
.pv-hero{ height:170px; background:#15332C center/cover no-repeat; }
.pv-pad{ padding:22px 24px 30px; }
.pv-cat{ font-family:"DM Mono", monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#9C7C36; display:block; margin-bottom:10px; }
.pv-pad h1{ font-family:"Nunito Sans", sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em;
  font-size:24px; line-height:1.05; color:#12100B; margin:0 0 12px; }
.pv-lead{ font-family:"Nunito Sans", sans-serif; font-size:14.5px; color:rgba(18,16,11,.66); font-style:italic; margin:0 0 18px; }
.pv-body{ font-family:"Nunito Sans", sans-serif; font-size:14.5px; line-height:1.65; color:rgba(18,16,11,.78); }
.pv-body p{ margin:0 0 13px; }
.pv-body h2{ font-family:"Nunito Sans", sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em;
  font-size:17px; color:#12100B; margin:24px 0 10px; }
.pv-body blockquote{ font-family:"Lora", serif; font-style:italic; font-size:16px; color:#12100B;
  border-left:2px solid #C6A256; margin:20px 0; padding:4px 0 4px 16px; }
.pv-body figure{ margin:20px 0; }
.pv-body figure img{ width:100%; border-radius:10px; display:block; }
.pv-body figcaption{ font-family:"Lora", serif; font-style:italic; font-size:12.5px; color:rgba(18,16,11,.44); margin-top:7px; text-align:center; }

.pv-empty{ opacity:.38; }
.pv-imgph{ border:2px dashed #D8CCB2; border-radius:10px; padding:28px 16px; text-align:center;
  font-size:13px; color:rgba(18,16,11,.45); margin:20px 0; }

/* ---- Notas v3: correcciones de texto ---- */
.cambio-diff{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start; margin-top:10px; }
@media(max-width:640px){ .cambio-diff{ grid-template-columns:1fr; } .cambio-diff .flecha{ transform:rotate(90deg); justify-self:center; } }
.cambio-diff .antes{ font-size:13.5px; color:rgba(18,16,11,.55); text-decoration:line-through; background:#F1EADB;
  border-radius:8px; padding:10px 12px; }
.cambio-diff .flecha{ color:#9C7C36; font-weight:700; align-self:center; }
.cambio-diff .despues{ font-size:13.5px; color:#12100B; background:rgba(198,162,86,.16); border:1px solid rgba(198,162,86,.4);
  border-radius:8px; padding:10px 12px; }
.edit-orig{ font-size:13.5px; color:rgba(18,16,11,.6); background:#F1EADB; border-radius:8px; padding:10px 12px; max-height:110px; overflow:auto; }
.chip.featured{ background:rgba(198,162,86,.2); color:#7a5f26; }