/* ============================================================
   CloudMailin — sistema de diseño monocromo (estilo consola)
   ============================================================ */

@font-face{font-family:'Geist';src:url('/static/fonts/Geist-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/static/fonts/Geist-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/static/fonts/Geist-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/static/fonts/GeistMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/static/fonts/GeistMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#ffffff; --panel:#fafafa; --panel-2:#f4f4f5;
  --line:#eaeaea; --line-strong:#d8d8d8;
  --ink:#0a0a0a; --muted:#666666; --faint:#9a9a9a;
  --inv-bg:#0a0a0a; --inv-ink:#ffffff;
  --radius:6px; --radius-sm:4px;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --panel:#0a0a0a; --panel-2:#111111;
    --line:#1f1f1f; --line-strong:#2e2e2e;
    --ink:#ededed; --muted:#8f8f8f; --faint:#5c5c5c;
    --inv-bg:#ffffff; --inv-ink:#0a0a0a;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --panel:#0a0a0a; --panel-2:#111111;
  --line:#1f1f1f; --line-strong:#2e2e2e;
  --ink:#ededed; --muted:#8f8f8f; --faint:#5c5c5c;
  --inv-bg:#ffffff; --inv-ink:#0a0a0a;
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#fafafa; --panel-2:#f4f4f5;
  --line:#eaeaea; --line-strong:#d8d8d8;
  --ink:#0a0a0a; --muted:#666666; --faint:#9a9a9a;
  --inv-bg:#0a0a0a; --inv-ink:#ffffff;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:13px;line-height:1.55;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint)}
.muted{color:var(--muted)}
.hint{color:var(--faint);font-size:11.5px}

/* ---------- topbar ---------- */
.topbar{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:52px;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:560;letter-spacing:-0.02em;font-size:14px;color:var(--ink)}
.brand .mk{width:17px;height:17px;background:var(--ink);border-radius:3px;position:relative;flex:none}
.brand .mk::after{content:"";position:absolute;inset:5px 5px auto auto;width:5px;height:5px;background:var(--bg);border-radius:1px}
nav.main{display:flex;gap:1px;align-items:center;flex-wrap:wrap}
nav.main a{font-family:var(--mono);font-size:11.5px;letter-spacing:0.01em;color:var(--muted);
  padding:6px 10px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:7px}
nav.main a:hover{color:var(--ink);background:var(--panel)}
nav.main a::before{content:"";width:6px;height:6px;border:1px solid var(--line-strong);border-radius:1.5px;flex:none}
nav.main a.active{color:var(--ink)}
nav.main a.active::before{background:var(--ink);border-color:var(--ink)}
.topright{display:flex;gap:10px;align-items:center;flex:none}
.usr{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:9px;align-items:center}
.usr a:hover{color:var(--ink)}
.toggle{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);
  background:var(--bg);border-radius:var(--radius-sm);padding:5px 9px;cursor:pointer}
.toggle:hover{border-color:var(--line-strong);color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
main.wrap{padding-top:32px;padding-bottom:60px}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.phead h1{font-size:21px;font-weight:580;margin:5px 0 0;letter-spacing:-0.03em}
.phead p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
h2.sect{font-size:13px;font-weight:560;margin:26px 0 12px;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:12px}
h2.sect::after{content:"";height:1px;background:var(--line);flex:1}

/* ---------- stats ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;background:var(--panel)}
.stat .k{font-size:26px;font-weight:600;letter-spacing:-0.04em;margin-top:10px}
.stat .d{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px;display:flex;align-items:center;gap:6px}
.stat .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);display:inline-block;flex:none}

/* ---------- panel + tabla ---------- */
.panel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:9px 14px;font-weight:400;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--line);font-size:12.5px;vertical-align:middle}
tbody tr:hover{background:var(--panel)}
tbody tr.is-editing{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--ink)}
td.mono,.td-mono{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.kv{font-size:12px}
.kv b{color:var(--faint);font-weight:500;font-family:var(--mono);font-size:11px}
.cellsub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px;
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts{text-align:right;white-space:nowrap}
.acts form{display:inline}

/* ---------- pills (estado sin color) ---------- */
.pill{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:20px;border:1px solid var(--line-strong);color:var(--ink);
  background:var(--bg);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.7}
.pill--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill--wait{color:var(--muted)}
.pill--err{color:var(--ink);border-color:var(--ink);font-weight:600}
.pill--err::before{content:"\00d7";font-weight:700}
.pill--wait::before{content:"";width:5px;height:5px;border-radius:50%;border:1px solid currentColor;display:inline-block;flex:none}
.tag{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;display:inline-block;margin:0 3px 3px 0}

/* ---------- botones ---------- */
.btn{font-family:var(--sans);font-size:12px;font-weight:500;border-radius:var(--radius-sm);
  padding:7px 13px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  cursor:pointer;letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;transition:border-color .12s,opacity .12s}
.btn:hover{border-color:var(--ink)}
.btn--pri{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--inv-bg)}
.btn--pri:hover{opacity:.85;color:var(--inv-ink)}
.btn--sm{padding:4px 10px;font-size:11px}
.btn--ghost{border-color:transparent;color:var(--muted)}
.btn--ghost:hover{color:var(--ink);border-color:var(--line)}

/* ---------- formularios ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--panel)}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field .hint{text-transform:none;letter-spacing:0;color:var(--faint);font-weight:400}
input[type=text],input[type=url],input[type=password],select,textarea,.input{
  width:100%;padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;outline:none}
textarea{resize:vertical;min-height:70px;font-family:var(--mono);font-size:12px;line-height:1.5}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--ink)}
input[type=checkbox]{width:auto;accent-color:var(--ink);vertical-align:-1px;margin-right:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:inline-flex;align-items:center;font-family:var(--sans);font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0}

/* ---------- campos repetidos (plantilla) ---------- */
.campos-head,.campo-fila{display:grid;gap:8px;align-items:center;
  grid-template-columns:1.2fr .8fr 1.2fr 1.2fr .8fr 1fr .8fr auto}
.campos-head{font-family:var(--mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px;padding:0 2px}
.campo-fila{margin-bottom:8px}
.campo-fila input,.campo-fila select{padding:6px 8px;font-size:12px}
.btn-icono{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius-sm);width:30px;height:32px;cursor:pointer;font-size:13px}
.btn-icono:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- utilidades ---------- */
.toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:34px;
  text-align:center;color:var(--muted);font-size:12.5px}
.error{border:1px solid var(--ink);border-radius:var(--radius-sm);padding:10px 13px;margin-bottom:16px;
  font-size:12.5px;color:var(--ink);display:flex;gap:9px;align-items:flex-start}
.error::before{content:"\00d7";font-family:var(--mono);font-weight:700}
.note{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:10px}
.codeblock{font-family:var(--mono);font-size:11.5px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px;margin:0;white-space:pre;overflow-x:auto;color:var(--ink);line-height:1.55}
code{font-family:var(--mono);font-size:11.5px;background:var(--panel-2);padding:1px 5px;border-radius:3px}
.dl th{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--faint);
  font-size:11px;width:150px;padding:8px 0;border:none;font-weight:400}
.dl td{border:none;padding:8px 0}

/* ---------- probador ---------- */
.probador{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.prueba-out{margin-top:12px}
.prueba-out .ok{font-family:var(--mono);font-size:11px;color:var(--ink);text-transform:uppercase;letter-spacing:0.06em}
.prueba-out .warn{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.prueba-out table{max-width:560px;border:1px solid var(--line);border-radius:var(--radius);margin-top:10px}
.prueba-out th{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--muted);width:40%;font-size:11px}
.clave{color:var(--faint);font-family:var(--mono);font-size:11px;margin-top:8px}

/* ---------- auth (login / password) ---------- */
.auth{max-width:350px;margin:11vh auto;padding:0 20px}
.auth .head{text-align:center;margin-bottom:22px}
.auth .lgo{width:26px;height:26px;background:var(--ink);border-radius:5px;position:relative;margin:0 auto 14px}
.auth .lgo::after{content:"";position:absolute;inset:8px 8px auto auto;width:7px;height:7px;background:var(--bg);border-radius:2px}
.auth h1{font-size:18px;font-weight:580;margin:4px 0 0;letter-spacing:-0.02em}
.auth .head p{margin:5px 0 0;color:var(--muted);font-size:12px}

/* ---------- documentación ---------- */
.docs-layout{display:grid;grid-template-columns:172px 1fr;gap:38px;align-items:start}
.toc{position:sticky;top:70px;display:flex;flex-direction:column;gap:1px;font-family:var(--mono);font-size:11.5px}
.toc .grp{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);margin:15px 0 5px}
.toc .grp:first-child{margin-top:0}
.toc a{color:var(--muted);padding:3px 0}
.toc a:hover{color:var(--ink)}
.docs-body{min-width:0}
.docs-body h2{font-size:16px;font-weight:580;letter-spacing:-0.02em;margin:34px 0 8px;scroll-margin-top:66px}
.docs-body h2:first-child{margin-top:0}
.docs-body h3{font-size:12.5px;font-weight:560;margin:22px 0 8px;color:var(--ink)}
.docs-body p{color:var(--muted);font-size:13px;margin:0 0 12px;max-width:66ch}
.docs-body p strong,.docs-body li strong{color:var(--ink);font-weight:560}
.docs-body ul{margin:0 0 12px;padding-left:18px;color:var(--muted);font-size:13px}
.docs-body li{margin:4px 0}
.docs-body .codeblock{margin:0 0 14px}
.ep{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 8px;overflow:hidden;background:var(--bg)}
.ep>summary{display:flex;align-items:center;gap:11px;padding:10px 13px;cursor:pointer;list-style:none}
.ep>summary::-webkit-details-marker{display:none}
.ep>summary:hover{background:var(--panel)}
.ep[open]>summary{background:var(--panel);border-bottom:1px solid var(--line)}
.ep-path{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.ep-sum{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ep .chev{color:var(--faint);font-family:var(--mono);font-size:15px;line-height:1;transition:transform .18s ease;flex:none}
.ep[open] .chev{transform:rotate(90deg)}
.ep-body{padding:14px 13px;animation:epin .18s ease}
@keyframes epin{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.ep-body>p:first-child{margin-top:0}
.ep-body .codeblock{margin:0}
.clabel{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px}
.ep-body>.clabel:first-child{margin-top:0}
.method{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.04em;
  padding:2px 7px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted);flex:none}
.method.post{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.method.put,.method.delete{color:var(--ink);border-color:var(--ink)}
.callout{border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;
  margin:0 0 18px;font-size:12.5px;color:var(--muted);display:flex;gap:11px;line-height:1.55}
.callout b{color:var(--ink);font-weight:560}
.callout::before{content:"i";font-family:var(--mono);font-weight:700;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:50%;min-width:18px;height:18px;display:flex;
  align-items:center;justify-content:center;flex:none;font-size:10.5px;margin-top:1px}
@media(max-width:760px){
  .docs-layout{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 12px;margin-bottom:18px}
  .toc .grp{display:none}
}
@media(max-width:620px){.ep-sum{display:none}}

/* ---------- animación de entrada ---------- */
.fade{opacity:0;transform:translateY(5px);animation:rise .45s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;transform:none}}

@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
  .campos-head{display:none}
  .campo-fila{grid-template-columns:1fr 1fr;border:1px solid var(--line);padding:10px;border-radius:var(--radius-sm)}
}