/* Panel de Celero Social — sistema visual de celeroai.co (manual de identidad, agosto 2026).
   Anton en titulares, Plus Jakarta Sans en interfaz, Raleway en texto corrido.
   El interletrado va en CADA regla que fija la familia: letter-spacing se hereda en píxeles. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/static/web/anton-normal-400-latin.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/web/plus-jakarta-sans-normal-500-latin.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/web/plus-jakarta-sans-normal-600-latin.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:400;font-display:swap;src:url(/static/web/raleway-normal-400-latin.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:600;font-display:swap;src:url(/static/web/raleway-normal-600-latin.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#F6F5F3;--card:#FFFFFF;--text:#1E1C1D;--muted:#5B5959;--line:#E6E3E0;--line-strong:#CFCBC7;
  --brand:#668EFF;          /* azul aciano: bloques, botones (con letra en tinta: 5,55:1) */
  --brand-ink:#2F55D4;      /* azul legible sobre papel: enlaces y textos */
  --brand-wash:#EFF3FF;
  --marker:#FCF981;         /* amarillo claro */
  --ok:#166534;--ok-bg:#DCFCE7;--warn:#92400E;--warn-bg:#FEF3C7;--bad:#B91C1C;--bad-bg:#FEE2E2;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --sans:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --texto:"Raleway","Segoe UI",Helvetica,Arial,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#131214;--card:#1B1A1C;--text:#F2F0F1;--muted:#ADAAA8;--line:#2B292B;--line-strong:#403D40;
  --brand:#668EFF;--brand-ink:#A9C0FF;--brand-wash:#191F2E;
  --ok:#86EFAC;--ok-bg:#12301E;--warn:#FCD34D;--warn-bg:#3A2A0C;--bad:#FCA5A5;--bad-bg:#3B1515;
}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:15px/1.55 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink)}

header{position:sticky;top:0;z-index:5;background:color-mix(in oklab,var(--card) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center;padding:10px 16px;overflow-x:auto}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);white-space:nowrap}
.brand img{height:22px;width:auto;display:block}
.brand .logo-dark{display:none}
@media (prefers-color-scheme:dark){.brand .logo-light{display:none}.brand .logo-dark{display:block}}
/* rótulo del producto, separado del logotipo por un filete: no se recompone el logotipo (manual, pág. 11) */
.brand .producto{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-left:12px;border-left:1px solid var(--line-strong)}
nav{display:flex;gap:4px}
nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--muted);white-space:nowrap;font:500 14px/1.2 var(--sans);letter-spacing:.01em}
nav a:hover{color:var(--text);background:var(--brand-wash)}
nav a.on{background:var(--brand);color:#1E1C1D;font-weight:600}

main{max-width:1100px;margin:0 auto;padding:18px 16px 40px}
h1{font:400 30px/1.1 var(--display);letter-spacing:.025em;margin:10px 0 16px}
h2{font:400 21px/1.15 var(--display);letter-spacing:.025em;margin:26px 0 10px}
p{font-family:var(--texto);letter-spacing:.01em}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:hidden;box-shadow:0 1px 2px rgba(30,28,29,.04),0 12px 32px -22px rgba(30,28,29,.22)}
.media{display:flex;gap:8px;overflow-x:auto;margin:-2px 0 10px;scroll-snap-type:x mandatory}
.media video,.media img{max-height:420px;max-width:100%;border-radius:10px;background:#1E1C1D;scroll-snap-align:start;flex:0 0 auto}
.media img{max-width:260px}
.cap{white-space:pre-wrap;font:14px/1.55 var(--texto);letter-spacing:.01em;max-height:220px;overflow:auto;border-left:3px solid var(--brand);padding-left:10px;margin:8px 0}
.meta{color:var(--muted);font-size:13px}
.tags{color:var(--brand-ink);font-size:13px;word-break:break-word}
.pill{display:inline-block;font:600 11px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--line);color:var(--text);margin-right:4px}
.pill.ig{background:#FDE7F3;color:#A3125F}.pill.li{background:#E3EFFF;color:#0A58CA}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
form.inline{display:inline}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
button,.btn{appearance:none;border:1px solid var(--line-strong);background:var(--card);color:var(--text);padding:9px 16px;border-radius:999px;font:600 14px/1.2 var(--sans);letter-spacing:.01em;cursor:pointer;text-decoration:none;display:inline-block;min-height:40px}
button:hover,.btn:hover{border-color:var(--text)}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* el azul de marca lleva letra en tinta: blanco sobre #668EFF da 3,05:1 y no cumple AA */
button.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#1E1C1D}
button.good{background:#1E1C1D;border-color:#1E1C1D;color:#FFFFFF}
@media (prefers-color-scheme:dark){button.good{background:#F2F0F1;border-color:#F2F0F1;color:#1E1C1D}}
button.danger{color:var(--bad)}
input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);color:var(--text);font:15px/1.4 var(--sans);letter-spacing:.01em}
textarea{min-height:80px}
details{margin-top:10px}summary{cursor:pointer;color:var(--muted);font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1 1 160px}
.flash{background:var(--brand-wash);color:var(--text);border:1px solid var(--brand);border-left-width:4px;padding:10px 12px;border-radius:10px;margin-bottom:12px}
.problems{color:var(--bad);font-size:13px;margin:6px 0}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:30px;font-family:var(--texto)}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:120px;font-size:13px;color:var(--muted)}
.stat b{display:block;font:400 28px/1.1 var(--display);letter-spacing:.025em;color:var(--text)}
.login{max-width:400px;margin:10vh auto}
.login .logo-login{display:block;height:110px;width:auto;margin:6px auto 18px}
.login h1{text-align:center;font-size:26px}
code{background:var(--line);padding:2px 6px;border-radius:6px;font-size:13px;word-break:break-all}
mark{background:var(--marker);color:#1E1C1D;padding:0 .15em}
.w90{width:90px}
.full{flex:1 1 100%}