*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:#243750;font:15px system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #d4deea;background:white;color:#23405f;border-radius:9px;padding:10px 15px}button:hover{filter:brightness(.96)}button.primary{background:#1254a0;color:white;border-color:#1254a0}header{background:#103d78;color:white;padding:20px 4%;display:flex;align-items:center;gap:24px}header img{width:210px;max-height:62px;object-fit:contain}header small{color:#c5d9f3}header .account{margin-left:auto;display:flex;align-items:center;gap:12px}nav{display:flex;padding:0 4%;background:white;border-bottom:1px solid #dce3ec;gap:25px}nav button{border:0;border-radius:0;padding:20px 8px;color:#6a7b90}nav button.active{color:#1458a4;border-bottom:3px solid #1458a4;font-weight:700}main{max-width:1600px;margin:auto;padding:32px 4%}.intro{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}h1{font-size:28px;margin:5px 0 8px;letter-spacing:-.7px}p{color:#718096}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#7e91a8}.columns{display:grid;grid-template-columns:1fr 1fr;gap:25px}.column{background:#eaf0f6;border:1px solid #dce5ef;border-radius:15px;padding:20px;min-height:380px}.column h2{font-size:17px;display:flex;align-items:center;gap:10px;margin:0 0 22px}.count{background:white;padding:4px 9px;border-radius:8px;color:#64809e;font-size:12px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:start}.sticky{padding:20px;border:0;border-radius:2px 2px 17px 2px;box-shadow:1px 5px 8px #34486419;background:#fff0ae;position:relative;overflow-wrap:anywhere;cursor:pointer}.sticky:before{content:'';display:block;width:56px;height:17px;background:#ffffff70;position:absolute;top:-7px;left:40%;transform:rotate(-4deg)}.sticky.pink{background:#ffdae2}.sticky.blue{background:#d6eafa}.sticky.green{background:#dceecf}.sticky h3{font-size:17px;margin:10px 0}.sticky p{color:#536176;font-size:13px;white-space:pre-wrap}.sticky footer{border-top:1px solid #00000013;margin-top:17px;padding-top:12px;font-size:11px;color:#677186;display:flex;justify-content:space-between;gap:12px}.urgent{color:#bf284c;font-size:11px;font-weight:800;letter-spacing:1px}.empty{text-align:center;color:#7d90a6;padding:65px 15px;border:1px dashed #cbd8e6;border-radius:10px;font-size:14px}details.completed{background:white;border:1px solid #dce5ef;border-radius:12px;padding:18px;margin-top:24px}summary{cursor:pointer;font-weight:600}details .cards{margin-top:20px}.activity{margin-top:30px;background:white;border:1px solid #e2e7ee;border-radius:12px;padding:20px}.activity h2{font-size:16px}.event{padding:10px 0;border-bottom:1px solid #f0f2f5;font-size:13px}.event small{color:#8997a8;float:right}.login{max-width:420px;margin:9vh auto;background:white;padding:35px;border-radius:20px;box-shadow:0 12px 50px #203d6612}.login img{background:#103d78;width:100%;padding:15px;border-radius:9px}.login h1{margin-top:28px}label{display:block;font-size:13px;font-weight:600;margin:17px 0 7px}input,select,textarea{width:100%;border:1px solid #d2dce8;border-radius:8px;padding:11px;background:white;color:#243750}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:auto}.login button{width:100%;margin-top:22px}.error{color:#bf284c}.status{color:#647c51;font-size:12px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px;align-items:center}.toolbar input{width:45px;padding:3px}.board-scroll{overflow:auto;border:1px solid #dbe3ed;border-radius:14px;background:white}.whiteboard{position:relative;width:1600px;height:1200px;background-image:radial-gradient(#c9d7e6 1px,transparent 1px);background-size:23px 23px;touch-action:none}.whiteboard svg{position:absolute;inset:0;width:1600px;height:1200px}.whiteboard .note{position:absolute;width:210px;touch-action:none;cursor:grab;user-select:none}.note .delete{position:absolute;right:4px;top:4px;padding:0 5px;border:0;background:transparent}.note small{font-size:11px;color:#788394}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.panel{background:white;border:1px solid #dde5ee;border-radius:12px;padding:25px}.avatar{width:45px;height:45px;border-radius:50%;background:#e3edf9;color:#1458a4;display:grid;place-items:center;font-weight:bold}.file{display:block;margin:15px 0;color:#1458a4}dialog{border:0;border-radius:16px;padding:28px;width:min(580px,94vw);max-height:90vh;box-shadow:0 15px 70px #152e4540}dialog::backdrop{background:#14283f77}.row{display:flex;gap:14px}.row>*{flex:1}fieldset{border:0;padding:0;margin:0}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.comment{background:#f0f4f8;padding:12px;margin:10px 0;border-radius:8px;white-space:pre-wrap}.muted{font-size:12px;color:#75859a}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#193b63;color:white;padding:14px 22px;border-radius:10px;z-index:10;display:none}:focus-visible{outline:3px solid #4a94e8;outline-offset:3px}@media(max-width:700px){header{padding:15px;gap:10px;flex-wrap:wrap}header img{width:170px}header .tagline{display:none}header .account{font-size:12px}nav{gap:10px;justify-content:space-between}main{padding:25px 15px}.columns{grid-template-columns:1fr}.intro{align-items:start}h1{font-size:24px}.cards{grid-template-columns:1fr}.row{display:block}.column{min-height:230px}.event small{float:none;display:block}}

/* Disposición compacta: el tablero aprovecha la altura de la ventana. */
header{padding:10px 3%;gap:18px}header img{width:185px;max-height:46px}header .account{gap:10px}header .account button{padding:8px 12px}
nav{padding:0 3%;gap:22px}nav button{padding:11px 8px}
main{padding:14px 3%;width:100%}.intro{margin-bottom:12px;gap:12px}h1{font-size:23px;margin:0 0 3px}.eyebrow{display:none}
.columns{gap:16px}.column{padding:14px;min-height:220px}.column h2{margin:0 0 13px;font-size:16px}.cards{gap:14px}
.sticky{padding:15px}.sticky h3{font-size:16px;margin:7px 0}.sticky p{margin:8px 0}.sticky footer{margin-top:11px;padding-top:9px}
.empty{padding:30px 12px}.completed,.activity{margin-top:10px!important;padding:12px 15px!important;border-radius:10px}
.activity-list{padding-top:8px}.event{padding:8px 0}.toolbar{margin-bottom:10px}.toolbar button{padding:8px 12px}
@media(min-width:701px){
 body:has(#app[data-view]){overflow:hidden}
 #app[data-view]{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 #app[data-view]>header,#app[data-view]>nav{flex:none}
 #app[data-view]>main{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 auto}
 #app[data-view] .intro{flex:none}
 #app[data-view] #content{flex:1;min-height:0;overflow:auto}
 #app[data-view="Tablero"] #content{display:flex;flex-direction:column;overflow:hidden}
 #app[data-view="Tablero"] .columns{flex:1;min-height:0}
 #app[data-view="Tablero"] .column{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #app[data-view="Tablero"] .column h2{flex:none}
 #app[data-view="Tablero"] .column>.cards{min-height:0;overflow:auto;align-content:start;padding:7px 5px 9px;scrollbar-gutter:stable}
 #app[data-view="Tablero"] .completed,#app[data-view="Tablero"] details.activity{flex:none}
 .completed>.cards{max-height:20dvh;overflow:auto;margin-top:12px;padding:7px 3px}
 details.activity .activity-list{max-height:18dvh;overflow:auto}
 #app[data-view="Mensajes"] #content{display:flex;flex-direction:column;overflow:hidden}
 #app[data-view="Mensajes"] .toolbar{flex:none}
 #app[data-view="Mensajes"] .board-scroll{flex:1;min-height:0}
}
@media(max-width:700px){
 header{padding:10px 15px}header img{width:150px;max-height:42px}nav{gap:6px;padding:0 12px}nav button{padding:11px 6px}
 main{padding:14px 12px}h1{font-size:20px}.intro{margin-bottom:12px}.intro button{padding:9px 10px;font-size:13px}
 .columns{gap:12px}.column{min-height:160px;padding:12px}.empty{padding:20px 10px}.cards{grid-template-columns:1fr}
 .board-scroll{max-height:65dvh}.completed>.cards,.activity-list{max-height:35dvh;overflow:auto}
}

/* Pizarra protagonista: navegación integrada y papelitos cuadrados. */
#app[data-view]>header{padding:7px 2%;gap:24px;min-height:58px}
header nav{background:transparent;border:0;padding:0;gap:6px;align-self:stretch;align-items:center}
header nav button{color:#dbe9fa;padding:10px 15px;border-radius:7px;border:0;background:transparent;font-size:14px}
header nav button.active{background:#ffffff20;color:white;border:0;box-shadow:inset 0 -2px #9cc9ff}
header nav button:hover{background:#ffffff16}header .status{color:#c8dfc0;font-size:11px;margin-right:8px}
#app[data-view]>main{padding:12px 2% 10px;max-width:none}
#app[data-view="Tablero"] .columns{position:relative;isolation:isolate;gap:0;border:1px solid #d8dfe5;border-radius:12px;background:radial-gradient(ellipse at 9% 84%,#2861b908,transparent 19%),radial-gradient(ellipse at 92% 15%,#479a7608,transparent 15%),linear-gradient(113deg,#fff,#fdfefd 55%,#fff);box-shadow:inset 0 0 12px #40557006,0 2px 6px #203f5a08;padding:10px}
#app[data-view="Tablero"] .columns:before,#app[data-view="Tablero"] .columns:after{content:'';position:absolute;pointer-events:none;z-index:-1;border-radius:50%;opacity:.13}
#app[data-view="Tablero"] .columns:before{width:100px;height:26px;border-bottom:5px solid #6594bf;border-top:2px solid #a2b6c9;left:5%;bottom:8%;transform:rotate(-13deg)}
#app[data-view="Tablero"] .columns:after{width:75px;height:38px;border:3px solid #7da591;border-left-color:transparent;right:6%;top:19%;transform:rotate(15deg)}
#app[data-view="Tablero"] .column{background:transparent;border:0;border-radius:0;padding:8px 13px}
#app[data-view="Tablero"] .column+.column{border-left:1px dashed #dce3e8}
#app[data-view="Tablero"] .column h2{min-height:34px;margin-bottom:9px;gap:9px;color:#2b4e6c}
.column h2 .count{background:#eef3f7}.new-task{margin-left:auto;font-size:12px;font-weight:500;padding:7px 10px;border-radius:6px;white-space:nowrap}
#app[data-view="Tablero"] .column>.cards,.completed>.cards{grid-template-columns:repeat(auto-fill,minmax(190px,230px));gap:18px;align-items:start}
[data-task]{aspect-ratio:1;display:flex;flex-direction:column;min-height:210px;border-radius:2px;box-shadow:2px 5px 8px #203c551a,0 1px 1px #203c5514;background:linear-gradient(170deg,#fff1af,#ffe99b)}
[data-task].pink{background:linear-gradient(170deg,#ffe1e7,#ffd2dd)}[data-task].blue{background:linear-gradient(170deg,#e1f0fd,#cce5f9)}[data-task].green{background:linear-gradient(170deg,#e7f2da,#d6eac2)}
[data-task] h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:none;line-height:1.3}
[data-task] p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:none;line-height:1.4}
[data-task] footer{margin-top:auto;padding-top:10px;min-height:36px;align-items:end}
[data-task]>small{font-size:11px;margin:4px 0 8px}.sticky:before{width:49px;left:calc(50% - 24px);background:#f5f0dc99;box-shadow:0 1px 1px #24375006}
.whiteboard .note{min-height:210px;border-radius:2px}.whiteboard .note .edit-note{font-size:11px;padding:4px 7px;float:right}
.empty{border:0;background:transparent;padding:24px 8px;text-align:left;color:#83939f;font-size:13px}
.board-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none;margin-top:9px;align-items:start}
.board-bottom .completed,.board-bottom details.activity{margin:0!important;padding:10px 13px!important;background:#ffffffd9;border:1px solid #dde5eb;border-radius:8px;min-width:0;font-size:13px}
.board-bottom summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-bottom .muted{font-size:11px}
@media(max-width:1050px){header .status{display:none}#app[data-view]>header{gap:14px}header nav button{padding:9px 11px}}
@media(max-width:700px){
 #app[data-view]>header{gap:7px 12px;flex-wrap:wrap;padding:7px 12px}header img{width:145px}header .account{margin-left:auto}
 header nav{order:3;width:100%;justify-content:space-between}header nav button{flex:1;padding:8px 6px;font-size:13px}
 #app[data-view]>main{padding:10px}.board-bottom{gap:6px}.board-bottom .muted{display:none}.board-bottom summary{font-size:12px}
 #app[data-view="Tablero"] .columns{padding:5px;gap:6px}#app[data-view="Tablero"] .column{padding:8px;min-height:190px}
 #app[data-view="Tablero"] .column+.column{border-left:0;border-top:1px dashed #dce3e8}
 #app[data-view="Tablero"] .column>.cards,.completed>.cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
 [data-task]{min-height:190px}.new-task{font-size:11px;padding:6px 8px}
}

/* Trazo de fibra y lectura de tareas en papel de color. */
.marker-title{font-family:"Segoe Print","Comic Sans MS",cursive;font-size:23px;font-weight:700;letter-spacing:-.9px;transform:rotate(-1.5deg);display:inline-block;color:#244f78;text-shadow:.4px .3px #244f7866}
#app[data-view="Tablero"] .column h2{min-height:40px;position:relative}
#app[data-view="Tablero"] .column+.column{border-left:0;border-top:0}
.marker-divider{position:absolute;left:calc(50% - 5px);top:18px;width:10px;height:calc(100% - 36px);pointer-events:none;overflow:visible}
.marker-divider path{fill:none;stroke:#436e90;stroke-width:2.8;stroke-linecap:round;opacity:.53}.marker-divider path+path{stroke-width:1.3;opacity:.15}
dialog.paper-dialog{width:min(540px,94vw);padding:0;border-radius:3px;background:#fff0ae;overflow:auto;box-shadow:6px 14px 60px #14283f55;max-height:88dvh}
dialog.paper-dialog.yellow{background:linear-gradient(165deg,#fff3b9,#ffe99c)}dialog.paper-dialog.pink{background:linear-gradient(165deg,#ffe6ec,#ffd2dd)}dialog.paper-dialog.blue{background:linear-gradient(165deg,#e7f3fe,#cce5f9)}dialog.paper-dialog.green{background:linear-gradient(165deg,#edf5e3,#d6eac2)}
.task-paper{padding:32px;position:relative;min-height:400px;overflow-wrap:anywhere}.paper-tape{position:absolute;width:84px;height:21px;background:#f8f5e6a6;left:calc(50% - 42px);top:0;transform:rotate(-3deg)}
.paper-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.paper-state{font-size:12px;border:1px solid #30445a26;border-radius:20px;padding:4px 10px;color:#4f5c66}
.task-paper>h2{font-family:"Segoe Print","Comic Sans MS",cursive;font-size:27px;line-height:1.4;margin:22px 0 15px;color:#273d51;white-space:pre-wrap}
.paper-description{white-space:pre-wrap;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:17px;color:#354d5e;line-height:1.8;min-height:80px;margin:0 0 25px}
.paper-meta{border-top:1px solid #31485d25;padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:15px}.paper-meta>div{display:flex;flex-direction:column;gap:4px}.paper-meta span{font-size:11px;color:#65717a}.paper-meta strong,.paper-meta small{font-size:13px;font-weight:500;color:#344e61}
.paper-comments{margin-top:22px;padding-top:15px;border-top:1px solid #31485d25;font-size:13px}.paper-comments summary{font-weight:500}.paper-comments .comment{background:#ffffff50}.paper-comments .comment p{white-space:pre-wrap;color:#344e61;margin-bottom:0}.paper-comments textarea{background:#ffffff80;min-height:65px}.task-paper .actions{margin-top:24px}.task-paper .actions button:not(.primary){background:#ffffff65;border-color:#30445a26}
@media(max-width:700px){.marker-title{font-size:21px}.marker-divider{display:none}#app[data-view="Tablero"] .column+.column{border-top:3px solid #436e9070;border-radius:12% 3% 0 0}.task-paper{padding:25px 22px}.task-paper>h2{font-size:24px}.paper-description{font-size:16px}}