/* Rogerio's admin panel (admin/index.html). Mobile-first; sidebar from 900 px. */
@font-face { font-family:Manrope; font-weight:400; font-display:swap; src:url('manrope-400.ttf') format('truetype'); }
@font-face { font-family:Manrope; font-weight:600; font-display:swap; src:url('manrope-600.ttf') format('truetype'); }
@font-face { font-family:Manrope; font-weight:700; font-display:swap; src:url('manrope-700.ttf') format('truetype'); }
:root { --paper:#f8f9f6; --card:#fff; --deep:#1d2825; --ink-2:#505e56; --line:#dce1d8; --accent:#3e6249; --tint:#e8efe3; --ok:#2f7a4b; --ok-bg:#e2f2e7; --warn:#8a5a00; --warn-bg:#fff4d6; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--deep); font:15px/1.5 Manrope, Arial, sans-serif; }
a { color:inherit; }
h1, h2, h3 { letter-spacing:-.03em; line-height:1.15; margin:0; text-wrap:balance; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
:focus-visible { outline:3px solid #608147; outline-offset:3px; }
.muted { color:var(--ink-2); margin:0; }

.adm { min-height:100vh; }
.adm-side { display:none; }
.adm-main { padding:16px 16px 104px; max-width:1100px; margin:0 auto; display:grid; gap:14px; }
.adm-proto { margin:0; padding:10px 14px; border-radius:12px; background:var(--warn-bg); color:var(--warn); font-size:13px; }
.adm-head { padding:8px 0 4px; }
.adm-head h1 { font-size:clamp(26px,6vw,38px); }
.adm-head p { margin:6px 0 0; color:var(--ink-2); }
.adm-tab { display:grid; gap:14px; }
.adm-tab[hidden] { display:none; }

.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.card h2 { font-size:18px; margin-bottom:14px; }
.chip { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; background:var(--tint); color:var(--accent); font-size:12px; font-weight:700; white-space:nowrap; }
.chip.ok { background:var(--ok-bg); color:var(--ok); }
.chip.warn { background:var(--warn-bg); color:var(--warn); }
.row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--deep); background:var(--deep); color:#fff; font:700 14px Manrope, Arial, sans-serif; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--accent); border-color:var(--accent); }
.btn.ghost { background:transparent; color:var(--deep); }
.btn.ghost:hover { background:var(--tint); }
.note, .rule { margin:14px 0 0; padding:12px 14px; border-radius:12px; background:var(--tint); font-size:14px; }
.rule { margin:0; }

/* Resultados */
.adm-kpis { display:grid; grid-template-columns:1fr; gap:10px; }
.kpi { background:var(--deep); color:#fff; border-radius:18px; padding:16px 18px; display:grid; gap:2px; }
.kpi span { font-size:13px; opacity:.8; }
.kpi b { font-size:40px; letter-spacing:-.04em; line-height:1.05; }
.kpi small { font-size:12.5px; opacity:.8; }
.kpi small.up { color:#b9e3a6; opacity:1; }
.adm-grid2 { display:grid; gap:14px; }
.bars { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.bars li { display:grid; grid-template-columns:84px 1fr; gap:4px 10px; align-items:center; font-size:14px; }
.bars .bar { height:10px; border-radius:999px; background:var(--tint); overflow:hidden; }
.bars .bar i { display:block; height:100%; background:var(--accent); border-radius:999px; }
.bars b { grid-column:2; font-size:12.5px; color:var(--ink-2); font-weight:600; }
.best { display:flex; gap:14px; align-items:flex-start; }
.best img { width:88px; height:88px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.best p { margin:0 0 4px; }
.best-num { font-size:14px; }
.weeks { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:end; height:170px; }
.wk { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; font-size:12px; color:var(--ink-2); }
.wk b { color:var(--deep); font-size:14px; }
.wk i { display:block; width:100%; max-width:56px; background:var(--accent); border-radius:8px 8px 3px 3px; min-height:6px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; }
.switch-row small { display:block; color:var(--ink-2); font-size:13px; margin-top:2px; }
.switch-row input { position:absolute; opacity:0; width:1px; height:1px; }
.switch-row i { width:52px; height:30px; border-radius:999px; background:#c9d1c6; position:relative; flex-shrink:0; transition:background .2s; }
.switch-row i::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .2s; }
.switch-row input:checked + i { background:var(--accent); }
.switch-row input:checked + i::after { transform:translateX(22px); }
.switch-row input:focus-visible + i { outline:3px solid #608147; outline-offset:3px; }

/* Mensajes */
.msgs { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.msg-top { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.msg-top time { margin-left:auto; font-size:12.5px; color:var(--ink-2); }
.msg p { margin:10px 0 0; }
.msg.done, .launch-item.done { opacity:.62; }

/* Publicaciones */
.posts { display:grid; gap:12px; }
.post { display:grid; gap:14px; padding:12px; }
.post img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; }
.post-body { padding:0 4px 4px; }
.post-meta { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; color:var(--ink-2); }
.post h3 { font-size:18px; margin:8px 0 4px; }
.safe { margin:8px 0 0; font-size:12.5px; color:var(--ok); font-weight:700; }

/* Fotos */
.slots { display:grid; gap:12px; }
.slot h3 { font-size:17px; margin:12px 0 4px; }
.slot-img { position:relative; }
.slot-img img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }
.slot-img .chip { position:absolute; top:10px; left:10px; }
.slot .btn.file { position:relative; margin:12px 0 6px; width:100%; }
.file input, .folder input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.check { display:flex; gap:10px; align-items:center; min-height:44px; font-size:14px; cursor:pointer; }
.check input { width:20px; height:20px; accent-color:var(--accent); }
.folders { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.folder { position:relative; display:grid; gap:4px; padding:14px; min-height:92px; border:1px dashed #b7c3b3; border-radius:14px; background:var(--paper); cursor:pointer; font-size:14px; font-weight:600; }
.folder svg { color:var(--accent); }
.folder small { color:var(--ink-2); font-weight:400; font-size:12.5px; }
.folder:hover { border-color:var(--accent); background:var(--tint); }

/* Lanzamiento */
.meter { display:flex; align-items:center; gap:12px; }
.meter-bar { flex:1; height:10px; border-radius:999px; background:var(--tint); overflow:hidden; }
.meter-bar i { display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s; }
.meter b { font-size:13px; white-space:nowrap; }
.launch { display:grid; gap:12px; }
.launch-item h3 { font-size:17px; }
.launch-item pre { margin:10px 0 0; padding:12px; border-radius:12px; background:var(--paper); border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; font:14px/1.5 Manrope, Arial, sans-serif; }

/* Más adelante */
.later { display:grid; gap:12px; }
.lock p { margin:0 0 12px; color:var(--ink-2); }

/* Bottom tab bar (phone) */
.adm-tabbar { position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; overflow-x:auto; background:var(--deep); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); scrollbar-width:none; }
.adm-tabbar a { flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; padding:4px; border-radius:12px; color:#ffffffb3; text-decoration:none; font-size:10.5px; font-weight:600; text-align:center; line-height:1.15; }
.adm-tabbar a[aria-current] { background:#ffffff1f; color:#fff; }
.adm-count:empty { display:none; }
.adm-count { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#e0a526; color:var(--deep); font-size:11px; display:inline-grid; place-items:center; }
.adm-tabbar .adm-count { position:absolute; top:4px; right:calc(50% - 26px); }

.toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(92vw,440px); padding:12px 18px; border-radius:14px; background:var(--deep); color:#fff; font-size:14px; transition:opacity .2s, transform .2s; z-index:20; }
.toast.on { opacity:1; transform:translate(-50%,0); }

@media (min-width:640px) {
  .adm-kpis { grid-template-columns:repeat(3,1fr); }
  .post { grid-template-columns:220px 1fr; align-items:start; }
  .post img { aspect-ratio:4/3; }
  .slots { grid-template-columns:1fr 1fr; }
  .folders { grid-template-columns:repeat(3,1fr); }
  .later { grid-template-columns:1fr 1fr; }
}
@media (min-width:900px) {
  .adm { display:grid; grid-template-columns:248px 1fr; }
  .adm-side { display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; padding:22px 16px; background:var(--deep); color:#fff; }
  .adm-brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-weight:700; }
  .adm-brand small { display:block; font-weight:400; font-size:12px; opacity:.7; }
  .adm-mono { width:40px; height:40px; border-radius:50%; background:var(--paper); color:var(--deep); display:grid; place-items:center; font-size:14px; }
  .adm-nav { display:grid; gap:4px; }
  .adm-nav a { display:flex; align-items:center; gap:12px; min-height:46px; padding:0 14px; border-radius:12px; color:#ffffffc7; text-decoration:none; font-weight:600; font-size:14.5px; }
  .adm-nav a:hover { background:#ffffff14; color:#fff; }
  .adm-nav a[aria-current] { background:var(--paper); color:var(--deep); }
  .adm-nav .adm-count { margin-left:auto; }
  .adm-side-foot { margin-top:auto; font-size:12px; opacity:.6; }
  .adm-tabbar { display:none; }
  .adm-main { padding:28px 32px 48px; }
  .adm-grid2 { grid-template-columns:1fr 1fr; }
  .toast { bottom:28px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }