:root{--bg:#0B1220;--panel:#121A2B;--card:#1A2438;--card2:#22304A;--txt:#E8EDF7;--sub:#93A0B8;--acento:#4C8DFF;--rojo:#FF5C6C;--naranja:#FFA94D;--verde:#3DD68C;--borde:#26324A;--r:12px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:#0B1220ee;border-bottom:1px solid var(--borde)}
.marca{display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.salir{margin-left:auto}.salir button,.icono{background:none;border:0;color:var(--sub);font-size:22px;min-width:44px;min-height:44px;cursor:pointer;border-radius:10px}
.icono:hover,.salir button:hover{background:var(--card)}
.tabtit{display:flex;align-items:center;gap:8px;min-width:0}
.tabtit h1{font-size:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.punto{width:12px;height:12px;border-radius:50%;background:var(--c,var(--acento));flex:none}
.tabtit .punto{background:var(--c)}
main{padding:14px}
h2{font-size:15px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin:22px 4px 10px}
.btn{background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}
.btn:hover{background:var(--card2)}
.primario{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600}
.primario:hover{background:#3b7cf0}
.peligro{color:var(--rojo)}
.gris{color:var(--sub)}.rojo{color:var(--rojo)}
/* login */
body.login{display:grid;place-items:center;min-height:100vh;padding:20px}
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:18px;padding:28px;width:min(360px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}
.caja h1{margin:0 0 6px}.caja img{margin:0 auto}
.caja input{background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:12px;min-height:48px}
.error{color:var(--rojo);margin:0}
/* inicio */
.inicio{max-width:900px;margin:0 auto}
.buscador input{width:100%;background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;min-height:48px}
.lista{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fila{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:12px;min-height:48px}
.fila .tit{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .meta{color:var(--sub);font-size:13px;white-space:nowrap}
.fila.vencida .fecha{color:var(--rojo);font-weight:600}
.prio{color:var(--naranja)}.prio.p3{color:var(--rojo)}
.tableros{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tablero{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:104px;padding:14px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--c) 45%,var(--borde));cursor:pointer;text-align:left}
.tablero .nombre{font-weight:700;font-size:17px}
.tablero .cuentas{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--sub)}
.tablero.nuevo{background:transparent;border:2px dashed var(--borde);color:var(--sub);justify-content:center;align-items:center;font-size:16px}
/* tablero */
main:has(.tablero-vista){padding:0}
.tablero-vista{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:14px;min-height:calc(100vh - 66px);scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.columna{flex:0 0 300px;background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 100px);scroll-snap-align:start}
@media (max-width:640px){.columna{flex-basis:86vw}.tablero-vista{scroll-padding:14px}}
.columna>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}
.columna h2{margin:0;font-size:14px;cursor:pointer}
.num{color:var(--sub);font-size:13px;background:var(--card);border-radius:20px;padding:2px 9px}
.tarjetas{flex:1;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:8px;min-height:40px}
.tarjeta{background:var(--card);border:1px solid var(--borde);border-left:4px solid transparent;border-radius:10px;padding:10px 12px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tarjeta:hover{background:var(--card2)}
.tarjeta.p2{border-left-color:var(--naranja)}.tarjeta.p3{border-left-color:var(--rojo)}
.columna.hecho .tarjeta .tit{color:var(--sub);text-decoration:line-through}
.tarjeta .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tarjeta .chips:empty{display:none}
.chip{font-size:12px;background:var(--bg);border-radius:6px;padding:2px 7px;color:var(--sub)}
.chip.rojo{color:#fff;background:var(--rojo)}.chip.naranja{color:#111;background:var(--naranja)}.chip.verde{color:#111;background:var(--verde)}
.fantasma{opacity:.35}.elegida{transform:rotate(2deg);box-shadow:0 10px 30px #0008}
.anadir{padding:8px 10px 12px}
.anadir input{width:100%;background:transparent;border:1px dashed var(--borde);border-radius:10px;padding:10px 12px;min-height:44px}
.anadir input:focus{background:var(--card);border-style:solid;outline:none;border-color:var(--acento)}
.pestanas{display:none}
@media (max-width:640px){
 .pestanas{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 0;scrollbar-width:none}
 .pestanas button{flex:none;background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:6px 12px;min-height:38px;color:var(--sub);cursor:pointer}
 .pestanas button.activa{background:var(--acento);border-color:var(--acento);color:#fff}
 .pestanas button.activa .num{background:#ffffff30;color:#fff}
 .marca span{display:none}
 .tableros{grid-template-columns:1fr 1fr;gap:10px}
 .tablero{min-height:88px;padding:12px}.tablero .nombre{font-size:15px}
 .tablero-vista{min-height:calc(100vh - 116px)}
 .columna{max-height:calc(100vh - 150px)}
}
.nueva-col{background:transparent;border:0;flex-basis:200px}
.nueva-col .btn{width:100%;border-style:dashed;color:var(--sub);background:transparent}
.flash{animation:flash 1.6s}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--acento)}100%{box-shadow:none}}
/* modal */
dialog{background:var(--panel);color:var(--txt);border:1px solid var(--borde);border-radius:16px;padding:0;width:min(600px,94vw);max-height:92vh}
dialog::backdrop{background:#000a}
#fTarjeta{display:flex;flex-direction:column;gap:14px;padding:16px;overflow-y:auto;max-height:92vh}
.mcab{display:flex;gap:8px;align-items:flex-start}
#mTitulo{flex:1;background:transparent;border:1px solid transparent;border-radius:8px;font-size:19px;font-weight:700;resize:none;padding:6px;overflow:hidden}
#mTitulo:focus{border-color:var(--borde);outline:none}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--sub)}
.mgrid select,.mgrid input,.bloque textarea,#mCkNuevo{background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:10px;min-height:44px;color:var(--txt);width:100%}
.bloque textarea{resize:vertical}
.lbl{font-size:13px;color:var(--sub);margin-bottom:6px}
.ck{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.ck li{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:8px;padding:6px 8px}
.ck input[type=checkbox]{width:22px;height:22px;accent-color:var(--verde);flex:none}
.ck span{flex:1}.ck li.hecho span{text-decoration:line-through;color:var(--sub)}
.ck button{background:none;border:0;color:var(--sub);min-width:36px;min-height:36px;cursor:pointer}
.mpie{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.menu{display:flex;flex-direction:column;gap:10px;padding:16px}
.menu .color{flex-direction:row;align-items:center;justify-content:space-between;font-size:15px;color:var(--txt);padding:4px 6px}
.menu input[type=color]{width:56px;height:36px;border:0;background:none}
#aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--card2);border:1px solid var(--borde);padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
#aviso.ver{opacity:1}