/* Tablero Diseño · Táctica — paleta de marca: coral #ED6F4C, carbón, gris cálido */
:root{
  --bg:#F4F1EE; --panel:#FFFFFF; --col:#ECE7E2; --line:#E2DBD4; --ink:#1D1B19; --body:#4F4A45; --mute:#8F8780;
  --coral:#ED6F4C; --coral-suave:#FCE9E2; --carbon:#1D1C1B;
  --rojo:#C0392B; --rojo-suave:#F8E1DE; --ambar:#C98A12; --ambar-suave:#FBF0DA; --verde:#2E8B57; --verde-suave:#E2F2E8;
  --sombra:0 1px 2px rgba(29,27,25,.06),0 4px 14px rgba(29,27,25,.06);
  --f-tit:"Montserrat",Arial,sans-serif; --f-txt:"Inter",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#161514; --panel:#211F1D; --col:#1B1A18; --line:#34302C; --ink:#F4F1EE; --body:#CFC8C1; --mute:#8E867F;
  --coral-suave:#3A2620; --rojo-suave:#3A1F1C; --ambar-suave:#3A2E17; --verde-suave:#1C3025; --carbon:#0E0D0C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#161514; --panel:#211F1D; --col:#1B1A18; --line:#34302C; --ink:#F4F1EE; --body:#CFC8C1; --mute:#8E867F;
  --coral-suave:#3A2620; --rojo-suave:#3A1F1C; --ambar-suave:#3A2E17; --verde-suave:#1C3025; --carbon:#0E0D0C; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--body);font:14px/1.45 var(--f-txt)}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.marca-t{font:800 16px var(--f-tit);color:var(--ink);display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.marca-t .punto{width:12px;height:12px;border-radius:4px;background:var(--coral)}
.btn-primario{background:var(--coral);color:#fff;border:0;border-radius:999px;padding:12px 22px;font:700 14px var(--f-tit)}
.btn-primario.chico{padding:8px 14px;font-size:13px}
.btn-sec{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600}

/* ingreso */
.ingreso{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 80% -10%,var(--coral-suave),transparent),var(--bg)}
.ingreso-caja{max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--sombra)}
.ingreso h1{font:800 28px/1.1 var(--f-tit);color:var(--ink);margin:18px 0 8px}
.ingreso p{margin:0 0 20px}
.nota{color:var(--mute);font-size:13px;margin-top:14px}

/* barra */
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.vistas{display:flex;gap:4px;background:var(--col);padding:4px;border-radius:999px}
.vistas button{border:0;background:transparent;color:var(--body);padding:7px 14px;border-radius:999px;font-weight:600}
.vistas button.activo{background:var(--panel);color:var(--ink);box-shadow:var(--sombra)}
.barra-der{margin-left:auto;display:flex;align-items:center;gap:10px}
#buscar{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 14px;width:220px;font:inherit}
.usuario{width:32px;height:32px;border-radius:50%;background:var(--carbon);color:#fff;display:grid;place-items:center;font:700 12px var(--f-tit)}

.filtros{display:flex;align-items:center;gap:14px;padding:12px 20px 0;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:5px 12px 5px 6px;display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.chip .av{width:20px;height:20px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 10px var(--f-tit)}
.chip.off{opacity:.45}
.toggle{display:flex;gap:6px;align-items:center;color:var(--body);font-size:13px}
.sync{margin-left:auto;color:var(--mute);font-size:12px}
.sync.err{color:var(--rojo)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px 20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi b{display:block;font:800 24px var(--f-tit);color:var(--ink)}
.kpi span{font-size:12px;color:var(--mute)}
.kpi.rojo b{color:var(--rojo)} .kpi.ambar b{color:var(--ambar)}

/* tablero */
.tablero{display:flex;gap:14px;padding:6px 20px 28px;overflow-x:auto;align-items:flex-start;min-height:60vh}
.columna{flex:0 0 300px;background:var(--col);border-radius:16px;display:flex;flex-direction:column;max-height:calc(100vh - 230px)}
.columna.ancha{flex-basis:320px}
.col-cab{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font:700 13px var(--f-tit);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.col-cab .cuenta{margin-left:auto;background:var(--panel);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--body)}
.col-cab .pin{width:10px;height:10px;border-radius:3px}
.columna.armado{background:var(--rojo-suave)}
.columna.armado .col-cab{color:var(--rojo)}
.col-cuerpo{padding:4px 10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:80px}
.col-cuerpo.sobre{outline:2px dashed var(--coral);outline-offset:-4px;border-radius:12px}
.vacio{color:var(--mute);font-size:12px;text-align:center;padding:18px 6px}

.tarjeta{background:var(--panel);border-radius:12px;padding:10px 12px 10px 14px;box-shadow:var(--sombra);border:1px solid transparent;cursor:grab;position:relative}
.tarjeta:hover{border-color:var(--line)}
.tarjeta.arrastrando{opacity:.5}
.tarjeta::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--acento,#ccc)}
.t-marca{font:700 11px var(--f-tit);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);display:flex;gap:6px;align-items:center}
.t-titulo{font-weight:600;color:var(--ink);margin:3px 0 8px;line-height:1.3}
.t-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--col);color:var(--body);white-space:nowrap}
.pill.rojo{background:var(--rojo-suave);color:var(--rojo)}
.pill.ambar{background:var(--ambar-suave);color:var(--ambar)}
.pill.verde{background:var(--verde-suave);color:var(--verde)}
.pill.coral{background:var(--coral-suave);color:var(--coral)}
.pill.sug{border:1px dashed currentColor}
.av-mini{width:22px;height:22px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 10px var(--f-tit);margin-left:auto}
.urg{color:var(--rojo);font-weight:800}

/* panel lateral */
.panel{position:fixed;inset:0;z-index:20}
.panel-fondo{position:absolute;inset:0;background:rgba(20,18,16,.35)}
.panel-caja{position:absolute;right:0;top:0;bottom:0;width:min(520px,100%);background:var(--panel);padding:26px 26px 40px;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.15)}
.cerrar{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:28px;color:var(--mute)}
.p-marca{font:700 12px var(--f-tit);text-transform:uppercase;letter-spacing:.06em;color:var(--coral)}
.p-titulo{font:800 22px/1.2 var(--f-tit);color:var(--ink);margin:6px 0 14px}
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:16px 0}
.p-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);font-weight:600}
.p-grid select,.p-grid input,.p-grid textarea,.p-full textarea,.p-full input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.p-full{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);font-weight:600;margin-top:10px}
.p-detalle{white-space:pre-wrap;background:var(--bg);border-radius:12px;padding:12px;color:var(--body);font-size:13px}
.p-links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.p-links a{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px}
.p-acciones{display:flex;gap:8px;margin-top:18px}
.p-meta{font-size:12px;color:var(--mute);margin-top:14px;line-height:1.7}

/* vista carga */
.carga{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:6px 20px 28px;width:100%}
.carga-caja{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.carga-caja h3{margin:0 0 4px;font:800 16px var(--f-tit);color:var(--ink);display:flex;align-items:center;gap:8px}
.barra-carga{height:10px;background:var(--col);border-radius:999px;overflow:hidden;margin:10px 0}
.barra-carga i{display:block;height:100%;background:var(--coral);border-radius:999px}
.carga-caja ul{margin:8px 0 0;padding:0;list-style:none;font-size:13px}
.carga-caja li{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--line)}

.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--carbon);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;z-index:30;box-shadow:var(--sombra)}
@media (max-width:700px){ #buscar{width:140px} .barra{padding:10px 14px} .tablero{padding:6px 14px 24px} .columna{flex-basis:84vw} }