:root{--bg:#0B1220;--panel:#141C2E;--card:#1D2639;--card2:#26324A;--lista:#101827;--txt:#E8EDF7;--sub:#97A3BA;--acento:#4C8DFF;--rojo:#F87168;--naranja:#FEA362;--amarillo:#F5CD47;--verde:#4BCE97;--borde:#2A3650;--sombra:0 8px 28px #0009;--r:12px;color-scheme:dark}
[data-theme=light]{--bg:#EEF1F6;--panel:#FFFFFF;--card:#FFFFFF;--card2:#F3F5F9;--lista:#E4E8F0;--txt:#172033;--sub:#5B6782;--borde:#D3D9E4;--sombra:0 8px 28px #0003;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:var(--acento);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--card2);border:1px solid var(--borde);border-radius:8px;padding:8px 10px;min-height:40px;width:100%}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--verde);flex:none;margin:0}
input[type=color]{padding:2px;width:56px}
[hidden]{display:none!important}
.gris{color:var(--sub)}.rojo{color:var(--rojo)}.pequeno{font-size:12.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card2);border:1px solid var(--borde);border-radius:8px;padding:8px 14px;min-height:40px;cursor:pointer;color:var(--txt);white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.primario{background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600}
.btn.peligro{color:#fff;background:#C9372C;border-color:#C9372C}
.btn.plano{background:transparent;border-color:transparent}
.btn.plano:hover{background:var(--card2)}
.btn.bloque{width:100%;justify-content:flex-start}
.btn.mini{min-height:32px;padding:4px 10px;font-size:13px}
.icono{background:none;border:0;color:var(--sub);font-size:18px;min-width:40px;min-height:40px;cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.icono:hover{background:var(--card2);color:var(--txt)}
/* cabecera */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--borde)}
.marca{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--txt);white-space:nowrap}
.buscador{position:relative;flex:1;max-width:520px;margin-left:auto}
.buscador input{min-height:38px;padding-left:34px;background:var(--bg)}
.buscador::before{content:"⌕";position:absolute;left:11px;top:6px;color:var(--sub);font-size:18px}
.resultados{position:absolute;top:44px;left:0;right:0;background:var(--panel);border:1px solid var(--borde);border-radius:10px;box-shadow:var(--sombra);max-height:60vh;overflow:auto;z-index:40;padding:6px}
.res{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--txt)}
.res:hover,.res.sel{background:var(--card2)}
.res .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.punto{width:10px;height:10px;border-radius:50%;flex:none;background:var(--c,var(--acento))}
main{padding:16px}
h2.sec{font-size:13px;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin:26px 2px 10px;display:flex;align-items:center;gap:8px}
/* 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}
.error{color:var(--rojo);margin:0}
/* inicio */
.inicio{max-width:1100px;margin:0 auto}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.tableros{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tablero{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:100px;padding:12px 14px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));cursor:pointer;box-shadow:0 1px 3px #0004}
.tablero:hover{filter:brightness(1.08)}
.tablero .nombre{font-weight:700;font-size:16px;padding-right:28px;text-shadow:0 1px 2px #0005}
.tablero .cuentas{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.tablero .cuentas span{background:#0003;border-radius:6px;padding:1px 7px}
.tablero .estrella{position:absolute;top:6px;right:6px;background:none;border:0;color:#fff;font-size:18px;cursor:pointer;opacity:.55;min-width:34px;min-height:34px}
.tablero .estrella.on{opacity:1;color:var(--amarillo)}
.tablero:hover .estrella{opacity:1}
.tablero.nuevo{background:var(--card2);color:var(--sub);border:2px dashed var(--borde);justify-content:center;align-items:center;box-shadow:none}
.lista-filas{display:flex;flex-direction:column;gap:6px}
.fila{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:10px 12px;min-height:46px;color:var(--txt);cursor:pointer}
.fila:hover{background:var(--card2)}
.fila .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .meta{color:var(--sub);font-size:12.5px;white-space:nowrap}
/* cabecera de tablero */
.barra{display:flex;align-items:center;gap:8px;padding:8px 12px;background:color-mix(in srgb,var(--c) 22%,var(--panel));border-bottom:1px solid var(--borde);flex-wrap:wrap}
.barra h1{font-size:18px;margin:0;padding:4px 8px;border-radius:8px;cursor:pointer;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra h1:hover{background:#ffffff14}
.vistas{display:flex;gap:2px;background:#0002;border-radius:9px;padding:3px}
.vistas button{background:none;border:0;padding:6px 12px;border-radius:7px;cursor:pointer;color:var(--sub);min-height:34px}
.vistas button.on{background:var(--panel);color:var(--txt);font-weight:600;box-shadow:0 1px 2px #0003}
.barra .der{margin-left:auto;display:flex;gap:6px;align-items:center}
.chipfiltro{background:var(--acento);color:#fff;border-radius:10px;padding:0 6px;font-size:12px;margin-left:2px}
/* tablero */
main:has(.vista-tablero),main:has(.vista-cal),main:has(.vista-tabla),main:has(.vista-panel),main:has(.vista-crono){padding:0}
.vista-tablero{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:12px;height:calc(100vh - 112px);height:calc(100dvh - 112px)}
.lista{flex:0 0 280px;background:var(--lista);border-radius:var(--r);display:flex;flex-direction:column;max-height:100%;border:1px solid var(--borde)}
.lista>header{display:flex;align-items:center;gap:4px;padding:8px 6px 4px 12px;cursor:grab}
.lista>header h3{flex:1;margin:0;font-size:14px;font-weight:700;padding:4px 6px;border-radius:6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista>header input{font-weight:700}
.lista .num{color:var(--sub);font-size:12px;padding:1px 7px;border-radius:10px;background:var(--card2)}
.lista .num.exceso{background:var(--rojo);color:#fff}
.lista.coloreada{background:color-mix(in srgb,var(--lc) 38%,var(--lista));border-color:color-mix(in srgb,var(--lc) 60%,var(--borde))}
.lista.coloreada>header{background:var(--lc);border-radius:11px 11px 0 0;margin-bottom:4px;padding-bottom:6px}
.lista.coloreada>header h3{color:#172033}
.lista.coloreada>header .icono{color:#172033}
.lista.coloreada.plegada{background:var(--lc);color:#172033}
.lista.hecho>header h3::after{content:" ✓";color:var(--verde)}
.lista.exceso{background:color-mix(in srgb,var(--rojo) 14%,var(--lista))}
.tarjetas{flex:1;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:8px;min-height:12px}
.lista.plegada{flex:0 0 44px;cursor:pointer;padding:10px 0;align-items:center}
.lista.plegada>*:not(.vertical){display:none}
.vertical{writing-mode:vertical-rl;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
.lista:not(.plegada) .vertical{display:none}
.pie-lista{display:flex;gap:4px;padding:6px 8px 8px}
.pie-lista .btn{flex:1;justify-content:flex-start;color:var(--sub)}
.form-tarjeta{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.nueva-lista{flex:0 0 280px}
.nueva-lista .btn{width:100%;justify-content:flex-start;background:#ffffff18;border-color:transparent}
/* tarjeta */
.tarjeta{position:relative;background:var(--card);border-radius:9px;box-shadow:0 1px 1px #0005;cursor:pointer;user-select:none;-webkit-user-select:none;overflow:hidden;border:1px solid transparent}
.tarjeta:hover{border-color:var(--acento)}
.tarjeta .portada{height:34px}
.tarjeta .portada.img{height:auto;max-height:180px;object-fit:cover;width:100%;display:block}
.tarjeta.grande{color:#fff}
.tarjeta.grande .cuerpo{padding:22px 12px 12px;font-weight:700;font-size:16px}
.tarjeta.grande.imagen{min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;text-shadow:0 1px 3px #000}
.tarjeta .cuerpo{padding:8px 10px}
.etqs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.etq{display:inline-block;min-width:40px;height:8px;border-radius:4px;background:var(--e)}
.etqs.texto .etq,.etq.texto{height:auto;padding:1px 8px;font-size:12px;font-weight:600;color:#172033;line-height:18px}
.tarjeta .tit{display:flex;gap:6px;align-items:flex-start;word-break:break-word}
.tarjeta .tit span{flex:1}
.circulo{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--sub);margin-top:1px;background:none;cursor:pointer;padding:0;display:none}
.tarjeta:hover .circulo,.circulo.on{display:inline-block}
.circulo.on{background:var(--verde);border-color:var(--verde);position:relative}
.circulo.on::after{content:"✓";color:#fff;font-size:11px;position:absolute;inset:0;display:grid;place-items:center;font-weight:700}
.tarjeta.completa .tit span{color:var(--sub)}
.insignias{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:12px;color:var(--sub);align-items:center}
.ins{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border-radius:4px}
.ins.vencida{background:var(--rojo);color:#fff}.ins.pronto{background:var(--amarillo);color:#172033}.ins.completada{background:var(--verde);color:#172033}
.ins.ckok{background:var(--verde);color:#172033}
.campo-frente{font-size:12px;background:var(--card2);border-radius:4px;padding:1px 6px;color:var(--txt)}
.badge-plantilla{font-size:11px;background:var(--acento);color:#fff;border-radius:4px;padding:1px 6px}
.fantasma{opacity:.35}.elegida{transform:rotate(3deg);box-shadow:var(--sombra)}
.tarjeta.oculta{display:none}
.flash{animation:flash 1.8s}
@keyframes flash{0%,50%{box-shadow:0 0 0 3px var(--acento)}100%{box-shadow:none}}
/* móvil: pestañas de listas */
.pestanas{display:none}
@media (max-width:700px){
 .vista-tablero{scroll-snap-type:x mandatory;height:calc(100dvh - 158px);padding-top:8px}
 .lista{flex-basis:86vw;scroll-snap-align:center}
 .lista.plegada{flex-basis:44px}
 .pestanas{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0;scrollbar-width:none}
 .pestanas button{flex:none;background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:4px 12px;min-height:34px;color:var(--sub);cursor:pointer}
 .pestanas button.on{background:var(--acento);border-color:var(--acento);color:#fff}
 .marca span,.top .ocultar-movil{display:none}
 .barra{gap:4px;padding:6px 10px}
 .barra h1{max-width:58vw;font-size:17px}
 .vistas{order:3;width:100%}
 .vistas button{flex:1;padding:6px 4px}
 .vista-tablero{height:calc(100dvh - 196px)}
 .vista-cal,.vista-tabla,.vista-panel,.vista-crono{height:calc(100dvh - 150px)}
 .crono-nombre{flex-basis:120px;width:120px}
 .vistas button{font-size:13px}
 .barra .der .txt{display:none}
 .tableros{grid-template-columns:1fr 1fr;gap:10px}
 .tarjeta .circulo{display:inline-block}
 .fila{flex-wrap:wrap;row-gap:4px}
 .fila .t{flex:1 1 calc(100% - 30px);white-space:normal}
 .fila .meta{margin-left:20px;flex:1}
}
/* popover y diálogos */
.pop{position:fixed;z-index:60;width:320px;max-width:calc(100vw - 16px);max-height:min(80vh,620px);overflow:auto;background:var(--panel);border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra);padding:12px}
.pop header{display:flex;align-items:center;justify-content:center;position:relative;margin:-4px 0 10px;font-weight:600;color:var(--sub);font-size:14px}
.pop header .icono{position:absolute;right:-6px;top:-8px}
.pop header .atras{position:absolute;left:-6px;top:-8px;right:auto}
.pop .grupo{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.pop label{font-size:12.5px;color:var(--sub);display:flex;flex-direction:column;gap:4px}
.pop label.fila-check{flex-direction:row;align-items:center;gap:8px;color:var(--txt);font-size:14px}
.pop .opcion{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--txt)}
.pop .opcion:hover{background:var(--card2)}
.pop hr{border:0;border-top:1px solid var(--borde);margin:6px 0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:700px){.pop{left:8px!important;right:8px;width:auto;top:auto!important;bottom:8px;max-height:75vh}}
.colores{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.colores button{height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;background:var(--e)}
.colores button.on{border-color:var(--txt)}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fotos.grandes{grid-template-columns:repeat(2,1fr)}
.fotos button{aspect-ratio:16/9;border-radius:6px;border:2px solid transparent;cursor:pointer;background-size:cover;background-position:center}
.fotos button.on,.fotos button:hover{border-color:var(--txt)}
.grads{grid-template-columns:repeat(5,1fr)}
.iconos{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:6px}
.iconos button{font-size:18px;background:var(--card2);border:2px solid transparent;border-radius:6px;min-height:34px;cursor:pointer}
.iconos button.on{border-color:var(--acento)}
/* tablero con foto o degradado de fondo */
body.con-fondo{background-size:cover}
body.con-fondo .barra{background:#0008;backdrop-filter:blur(6px);color:#fff;border-bottom-color:#ffffff22}
[data-theme=light] body.con-fondo .barra{background:#fffc;color:var(--txt)}
body.con-fondo main{background:transparent}
body.con-fondo .nueva-lista .btn{background:#0006;color:#fff}
body.con-fondo .vista-panel,body.con-fondo .vista-tabla,body.con-fondo .vista-cal{background:#0005}
[data-theme=light] body.con-fondo .vista-panel,[data-theme=light] body.con-fondo .vista-tabla,[data-theme=light] body.con-fondo .vista-cal{background:#fff9}
body.con-fondo .cal-cab{color:#fff}
.etq-sel{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.etq-sel .barra-e{flex:1;height:34px;border-radius:6px;background:var(--e);color:#172033;font-weight:600;display:flex;align-items:center;padding:0 10px;cursor:pointer;border:0;text-align:left}
dialog{background:var(--panel);color:var(--txt);border:1px solid var(--borde);border-radius:14px;padding:0;max-height:94vh;box-shadow:var(--sombra)}
dialog::backdrop{background:#000b}
#modal{width:min(820px,96vw);margin-top:3vh}
@media (max-width:700px){#modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}}
.m-portada{height:110px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.m-portada img{max-height:220px;width:100%;object-fit:contain;background:#0006}
.m-portada:has(img){height:auto}
.m-cuerpo{padding:16px 18px 24px;display:grid;grid-template-columns:1fr 180px;gap:18px}
@media (max-width:700px){.m-cuerpo{grid-template-columns:1fr;padding:12px}}
.m-cab{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start}
.m-cab textarea{font-size:20px;font-weight:700;background:transparent;border-color:transparent;resize:none;overflow:hidden;min-height:36px;padding:2px 6px}
.m-cab textarea:focus{background:var(--card2)}
.m-cab .donde{font-size:13px;color:var(--sub);padding:0 6px}
.m-cab .donde a{text-decoration:underline;cursor:pointer}
.m-sec{margin-bottom:22px}
.m-sec h4{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}
.m-sec h4 .der{margin-left:auto;display:flex;gap:6px}
.m-datos{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.m-datos .bloque h5{margin:0 0 4px;font-size:12px;color:var(--sub);font-weight:600}
.m-datos .etqs{margin:0}
.m-datos .etq.texto{height:32px;line-height:32px;border-radius:6px;padding:0 12px;cursor:pointer;font-size:13px}
.m-datos .mas{height:32px;width:32px;border-radius:6px;background:var(--card2);border:0;cursor:pointer;color:var(--txt);font-size:18px}
.fecha-btn{display:flex;align-items:center;gap:8px;background:var(--card2);border-radius:6px;padding:0 10px;height:32px;cursor:pointer}
.fecha-btn .estado{font-size:11px;padding:1px 6px;border-radius:4px}
.estado.vencida{background:var(--rojo);color:#fff}.estado.pronto{background:var(--amarillo);color:#172033}.estado.completada{background:var(--verde);color:#172033}
.md{word-break:break-word}
.md p{margin:0 0 8px}.md ul,.md ol{margin:0 0 8px;padding-left:22px}.md pre{background:var(--card2);padding:8px;border-radius:6px;overflow:auto}
.md code{background:var(--card2);padding:1px 4px;border-radius:4px}.md table{border-collapse:collapse}.md td,.md th{border:1px solid var(--borde);padding:4px 8px}
.desc-vacia{background:var(--card2);border-radius:8px;padding:12px;min-height:56px;color:var(--sub);cursor:pointer}
.desc{cursor:pointer;padding:4px;border-radius:6px}.desc:hover{background:var(--card2)}
.lado{display:flex;flex-direction:column;gap:6px}
.lado h5{margin:8px 0 2px;font-size:12px;color:var(--sub)}
.lado .btn{justify-content:flex-start;width:100%;font-size:14px}
@media (max-width:700px){
 .lado{order:-1;grid-row:2;flex-direction:row;overflow-x:auto;gap:6px;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none}
 .lado h5{display:none}
 .lado .btn{width:auto;flex:none;font-size:13px;min-height:36px;padding:6px 10px}
}
.progreso{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--sub)}
.progreso .barra-p{flex:1;height:8px;background:var(--card2);border-radius:4px;overflow:hidden}
.progreso .barra-p i{display:block;height:100%;background:var(--acento);transition:width .2s}
.progreso.ok .barra-p i{background:var(--verde)}
.items{list-style:none;margin:0 0 8px;padding:0}
.items li{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:6px}
.items li:hover{background:var(--card2)}
.items li .txt{flex:1;cursor:pointer;word-break:break-word}
.items li.hecho .txt{text-decoration:line-through;color:var(--sub)}
.items li .acc{display:flex;gap:2px;opacity:0}
.items li:hover .acc,.items li:focus-within .acc{opacity:1}
@media (hover:none){.items li .acc{opacity:1}}
.items li .acc button{min-width:30px;min-height:30px;font-size:14px}
.items .fecha-item{font-size:11.5px;background:var(--card2);border-radius:4px;padding:1px 5px}
.adjunto{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px}
.adjunto:hover{background:var(--card2)}
.adjunto .mini{width:72px;height:52px;border-radius:6px;background:var(--card2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--sub);overflow:hidden;flex:none}
.adjunto .mini img{width:100%;height:100%;object-fit:cover}
.adjunto .info{flex:1;min-width:0}
.adjunto .info a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--txt)}
.adjunto .info .gris{font-size:12px}
.adjunto .info button{background:none;border:0;color:var(--sub);text-decoration:underline;cursor:pointer;font-size:12px;padding:0 6px 0 0}
.comentario{display:flex;gap:10px;margin-bottom:12px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.avatar.h{background:#9F8FEF}.avatar.a{background:#8590A2}
.comentario .caja-c{flex:1;min-width:0}
.comentario .cab{font-size:13px}.comentario .cab b{margin-right:6px}
.comentario .texto{background:var(--card2);border-radius:8px;padding:8px 10px;margin-top:4px}
.comentario .acc button{background:none;border:0;color:var(--sub);text-decoration:underline;cursor:pointer;font-size:12px;padding:2px 6px 0 0}
.act{display:flex;gap:10px;font-size:13px;margin-bottom:10px}.act .avatar{width:28px;height:28px;font-size:12px}
.campos-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.campos-m label{font-size:12px;color:var(--sub);display:flex;flex-direction:column;gap:4px}
/* panel lateral (menú del tablero) */
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--panel);border-left:1px solid var(--borde);z-index:50;box-shadow:var(--sombra);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .2s}
.cajon.abierto{transform:none}
.cajon header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--borde);font-weight:700;gap:6px}
.cajon header .t{flex:1;text-align:center}
.cajon .cont{flex:1;overflow:auto;padding:12px}
.cajon .opcion{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px;border-radius:8px;cursor:pointer;color:var(--txt)}
.cajon .opcion:hover{background:var(--card2)}
.regla{background:var(--card2);border-radius:10px;padding:10px;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.regla .t{flex:1}
.regla.off{opacity:.55}
/* bandeja */
.bandeja-inicio{display:flex;flex-direction:column;gap:6px}
.bandeja-inicio input{min-height:46px;background:var(--panel)}
.panel-bandeja{flex:0 0 270px;background:color-mix(in srgb,var(--acento) 14%,var(--lista));border-style:dashed}
@media (max-width:700px){.panel-bandeja{flex-basis:86vw}}
/* edición rápida */
.tarjeta .lapiz{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:0;background:var(--card2);color:var(--txt);cursor:pointer;opacity:0;font-size:14px}
.tarjeta:hover .lapiz{opacity:1}
@media (hover:none){.tarjeta .lapiz{display:none}}
/* cronograma */
.vista-crono{padding:12px;height:calc(100dvh - 112px);display:flex;flex-direction:column}
.crono{flex:1;overflow:auto;background:var(--panel);border:1px solid var(--borde);border-radius:10px;position:relative}
.crono-fila{display:flex;min-width:max-content}
.crono-nombre{position:sticky;left:0;z-index:3;flex:0 0 190px;width:190px;background:var(--panel);border-right:1px solid var(--borde);padding:6px 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.crono-nombre.tarjeta-n{cursor:pointer;color:var(--sub)}.crono-nombre.tarjeta-n:hover{color:var(--txt)}
.crono-fila.grupo .crono-nombre{font-weight:700;background:var(--card2)}
.crono-fila.grupo .crono-track{background:var(--card2)}
.crono-fila.cab{position:sticky;top:0;z-index:5;background:var(--panel)}
.crono-fila.cab .crono-nombre{z-index:6}
.crono-track{position:relative;height:34px;border-bottom:1px solid var(--borde)}
.crono-track.meses,.crono-track.dias{height:24px}
.crono-track.meses span{position:absolute;top:4px;font-size:12px;font-weight:700;padding-left:4px;white-space:nowrap;border-left:1px solid var(--borde)}
.crono-track.dias span{position:absolute;top:4px;font-size:11px;color:var(--sub);text-align:center}
.crono-track.dias span.finde{opacity:.6}.crono-track.dias span.hoy{color:#fff;background:var(--acento);border-radius:8px}
.crono-fondo{position:absolute;inset:0;pointer-events:none}
.crono-fondo i{position:absolute;top:0;bottom:0;background:#8590a214}
.crono-fondo b{position:absolute;top:0;bottom:0;width:2px;background:var(--rojo);opacity:.7}
.crono-barra{position:absolute;top:5px;height:24px;border-radius:6px;background:var(--c);color:#172033;font-size:12px;font-weight:600;display:flex;align-items:center;cursor:grab;touch-action:none;box-shadow:0 1px 2px #0004;overflow:hidden}
.crono-barra .t{flex:1;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.crono-barra .asa{flex:0 0 7px;align-self:stretch;cursor:ew-resize}
.crono-barra .asa:hover{background:#0003}
.crono-barra.completa{opacity:.5;text-decoration:line-through}
.crono-barra.vencida{outline:2px solid var(--rojo)}
@media (max-width:700px){
 .crono-nombre{flex-basis:118px;width:118px;font-size:12px;padding:6px}
 .cal-cab{flex-wrap:wrap}
 .cal-cab>.gris{display:none}
 .vista-crono,.vista-cal{padding:8px}
}
.sin-fecha{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px}
/* calendario */
.vista-cal{padding:12px;height:calc(100dvh - 112px);display:flex;flex-direction:column}
.cal-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cal-cab h2{margin:0 8px;font-size:18px}
.cal{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:minmax(90px,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:10px;overflow:auto}
.cal .dn{background:var(--panel);text-align:center;font-size:12px;color:var(--sub);padding:4px;position:sticky;top:0;z-index:1}
.cal .dia{background:var(--lista);padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.cal .dia.fuera{opacity:.5}
.cal .dia.hoy .n>span{background:var(--acento);color:#fff;border-radius:10px;padding:0 7px}
.cal .dia .n{font-size:12px;font-weight:600;align-self:flex-start;display:flex;gap:4px;width:100%}
.cal .dia .n button{margin-left:auto;background:none;border:0;color:var(--sub);cursor:pointer;opacity:0}
.cal .dia:hover .n button{opacity:1}
.cal .zona{display:flex;flex-direction:column;gap:3px;min-height:20px;flex:1}
.cal .ct{font-size:12px;background:var(--card);border-left:3px solid var(--c,var(--acento));border-radius:4px;padding:2px 5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ct.completa{text-decoration:line-through;color:var(--sub)}
.cal .ct.vencida{border-left-color:var(--rojo)}
@media (max-width:700px){.cal{grid-auto-rows:minmax(70px,auto)}.cal .ct{font-size:10.5px;padding:1px 3px}}
/* tabla */
.vista-tabla{padding:12px;overflow:auto;height:calc(100dvh - 112px)}
table.tabla{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.tabla th{text-align:left;font-size:12px;color:var(--sub);padding:10px;border-bottom:1px solid var(--borde);cursor:pointer;white-space:nowrap;position:sticky;top:0;background:var(--panel)}
.tabla td{padding:8px 10px;border-bottom:1px solid var(--borde);font-size:13.5px;vertical-align:top}
.tabla tr:hover td{background:var(--card2);cursor:pointer}
/* panel */
.vista-panel{padding:16px;overflow:auto;height:calc(100dvh - 112px);display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-content:start}
.graf{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:14px}
.graf h4{margin:0 0 12px}
.barra-g{display:grid;grid-template-columns:110px 1fr 32px;gap:8px;align-items:center;margin-bottom:8px;font-size:13px}
.barra-g .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-g .b{height:16px;background:var(--card2);border-radius:4px;overflow:hidden}
.barra-g .b i{display:block;height:100%;background:var(--e,var(--acento));border-radius:4px}
.cifra{font-size:34px;font-weight:800}
/* aviso */
#aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--txt);color:var(--bg);padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .2s;z-index:90;display:flex;gap:12px;align-items:center;max-width:92vw}
#aviso.ver{opacity:1}
#aviso button{background:none;border:0;color:var(--acento);font-weight:700;cursor:pointer}
.atajos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
kbd{background:var(--card2);border:1px solid var(--borde);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:inherit;font-size:13px}