/* ============================================================
   MBP v2 · Sistema brutalista editorial (documento maestro §8)
   Tinta #111 · Papel #F4F1EA · Azul eléctrico #1F3BFF · radius 0
   ============================================================ */
/* Fuentes autoalojadas (sin llamadas a Google Fonts: mas rapido y RGPD-friendly) */
@font-face{font-family:'Space Grotesk';src:url('/public/fonts/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/public/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/public/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{
  --tinta:#111111; --papel:#F4F1EA; --acento:#1F3BFF; --alerta:#E1372B; --ok:#0E8A45; --ambar:#B76E00;
  --borde:3px solid var(--tinta); --sombra:6px 6px 0 var(--tinta);
  --display:'Space Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box; border-radius:0 !important}
html{font-size:15px}
body{margin:0; background:var(--papel); color:var(--tinta); font-family:var(--display); line-height:1.45}
a{color:var(--acento); text-decoration:none; border-bottom:2px solid var(--acento)}
a:hover{background:var(--acento); color:#fff}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.02em; margin:.2em 0 .4em}
h1{font-size:1.9rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
.mono,label,th,.badge,.eyebrow,button,input,select,textarea{font-family:var(--mono)}
.eyebrow{text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600}

/* Barra superior */
.topbar{background:var(--tinta); color:var(--papel); display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.5rem .8rem; position:sticky; top:0; z-index:50}
.topbar .logo{font-weight:700; letter-spacing:-.03em; font-size:1.05rem; color:var(--papel); border:0; margin-right:.6rem}
.topbar .logo b{color:var(--acento); background:#fff; padding:0 .25rem; margin-left:.2rem}
.topbar a{color:var(--papel); border:0; padding:.25rem .5rem; font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.topbar a:hover, .topbar a.activa{background:var(--acento); color:#fff}
.topbar details{position:relative}
.topbar summary{cursor:pointer; list-style:none; padding:.25rem .5rem; font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.topbar summary::-webkit-details-marker{display:none}
.topbar details[open] summary{background:var(--acento)}
.topbar .menu{position:absolute; left:0; top:110%; background:#fff; color:var(--tinta); border:var(--borde); box-shadow:var(--sombra); min-width:250px; max-height:65vh; overflow:auto; padding:.4rem}
.topbar .menu a{display:block; color:var(--tinta); padding:.3rem .4rem; text-transform:none; letter-spacing:0; font-size:.8rem; border-bottom:1px solid #ddd}
.topbar .menu .grupo{background:var(--papel); font-weight:600; padding:.35rem .4rem; text-transform:uppercase; font-size:.68rem; letter-spacing:.08em}
.topbar .spacer{flex:1}
.pill{background:var(--alerta); color:#fff; padding:0 .35rem; font-weight:600}

.wrap{max-width:1240px; margin:1.2rem auto; padding:0 1rem}
.grid{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.card{background:#fff; border:var(--borde); box-shadow:var(--sombra); padding:.9rem}
.card.plana{box-shadow:none}
.card h3{margin-top:0}
.kpi{display:flex; flex-direction:column; gap:.15rem}
.kpi .valor{font-size:1.6rem; font-weight:700; letter-spacing:-.03em}
.kpi .meta{font-family:var(--mono); font-size:.72rem; color:#444}
.sem{display:inline-block; width:.75rem; height:.75rem; border:2px solid var(--tinta); margin-right:.35rem; vertical-align:baseline}
.sem.verde{background:var(--ok)} .sem.ambar{background:var(--ambar)} .sem.rojo{background:var(--alerta)} .sem.gris{background:#bbb}

table{width:100%; border-collapse:collapse; background:#fff; border:var(--borde)}
th{background:var(--tinta); color:var(--papel); text-transform:uppercase; font-size:.68rem; letter-spacing:.07em; text-align:left; padding:.45rem .5rem}
td{padding:.4rem .5rem; border-bottom:1px solid #ccc; font-size:.86rem; vertical-align:top}
tr:hover td{background:#faf7ee}
.tnum{text-align:right; font-family:var(--mono)}

.badge{display:inline-block; border:2px solid var(--tinta); padding:.05rem .4rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; background:#fff}
.badge.azul{background:var(--acento); color:#fff; border-color:var(--tinta)}
.badge.ok{background:var(--ok); color:#fff}
.badge.rojo{background:var(--alerta); color:#fff}
.badge.gris{background:#ddd}

button,.btn{display:inline-block; background:var(--acento); color:#fff; border:var(--borde); box-shadow:4px 4px 0 var(--tinta); padding:.45rem .8rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; font-weight:600}
button:hover,.btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--tinta); background:var(--acento); color:#fff}
button.sec,.btn.sec{background:#fff; color:var(--tinta)}
button.peligro{background:var(--alerta)}
button.mini{padding:.2rem .5rem; box-shadow:3px 3px 0 var(--tinta); font-size:.7rem}

input,select,textarea{width:100%; border:var(--borde); background:#fff; padding:.45rem .5rem; font-size:.85rem}
textarea{min-height:110px; resize:vertical}
label{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; margin:.6rem 0 .25rem}
.inline{display:flex; gap:.5rem; flex-wrap:wrap; align-items:end}
.inline > div{flex:1; min-width:140px}
form.linea{display:inline}

.flash{border:var(--borde); box-shadow:var(--sombra); padding:.6rem .8rem; margin-bottom:1rem; font-family:var(--mono); font-size:.82rem; background:#fff}
.flash.ok{border-left:12px solid var(--ok)} .flash.error{border-left:12px solid var(--alerta)} .flash.aviso{border-left:12px solid var(--ambar)}

/* Kanban */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:.8rem; overflow-x:auto; padding-bottom:.5rem}
.kcol{background:#fff; border:var(--borde); min-height:220px}
.kcol h4{background:var(--tinta); color:var(--papel); margin:0; padding:.4rem .5rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; display:flex; justify-content:space-between}
.kcard{border-bottom:2px solid var(--tinta); padding:.5rem; font-size:.82rem}
.kcard b{display:block; font-size:.88rem}
.kcard .mono{font-size:.68rem; color:#444}

/* Bandeja y tabs */
.tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem}
.tabs a{border:var(--borde); background:#fff; color:var(--tinta); padding:.3rem .7rem; font-family:var(--mono); font-size:.75rem; text-transform:uppercase; box-shadow:3px 3px 0 var(--tinta)}
.tabs a.activa{background:var(--acento); color:#fff}
.salida{white-space:pre-wrap; background:#fff; border:var(--borde); box-shadow:var(--sombra); padding:.9rem; font-size:.88rem}
.hr{border:0; border-top:var(--borde); margin:1.2rem 0}
.ayuda{float:right; font-family:var(--mono); font-size:.75rem}
footer{margin:2rem 0 1rem; text-align:center; font-family:var(--mono); font-size:.7rem; color:#555}
@media (max-width:720px){ .topbar{font-size:.9rem} .wrap{margin-top:.8rem} h1{font-size:1.4rem} }