/* Canvas claro: cuatro columnas reales y tarjetas con color de estado. */
body.canvas-mode{height:100vh;overflow:hidden;background:#f6f8fc;color:#172033}
body.canvas-mode #app,body.canvas-mode .sheet-app{height:100vh;min-height:100vh;overflow:hidden;background:#f6f8fc}
body.canvas-mode .topbar{height:66px;background:#fff;border-bottom:1px solid #e4e8f0;box-shadow:0 1px 2px #14213d08}
body.canvas-mode .doc-head h1{font-size:17px;color:#182235;font-weight:700}.doc-meta{color:#718096}.cloud{color:#6c63ff}
body.canvas-mode .sheet-mark{background:#6c63ff}.sheet-mark:after{border-color:transparent transparent #e2dfff transparent}
body.canvas-mode .user-chip{background:#eef2ff;color:#4f46e5;border-radius:7px}.user-chip,.logout{font-size:12px}.logout{border:1px solid #e0e6ef;border-radius:7px;color:#526277}
body.canvas-mode .mode-tabs{height:49px;align-items:end;padding:0 24px;gap:18px;background:#fff;border-bottom:1px solid #e4e8f0}
body.canvas-mode .mode-tabs button{height:49px;padding:0 4px;border:0;border-bottom:3px solid transparent;background:transparent;color:#8995a8;font-size:12px;letter-spacing:.08em;font-weight:800}.mode-tabs button.active{color:#4f46e5!important;border-bottom-color:#6c63ff!important;background:transparent!important;box-shadow:none!important}.mode-tabs button:hover{color:#4f46e5!important;background:transparent!important}
body.canvas-mode #canvas-workspace{display:flex;flex:1;min-height:0;flex-direction:column;background:linear-gradient(#e7ebf2 1px,transparent 1px),linear-gradient(90deg,#e7ebf2 1px,transparent 1px),#f6f8fc;background-size:32px 32px}
body.canvas-mode .canvas-head{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;height:64px;flex-shrink:0;padding:0 27px;background:rgba(255,255,255,.9);border-bottom:1px solid #e4e8f0}.canvas-head h2{color:#1b2639;font-size:20px;font-weight:700;letter-spacing:-.02em}.canvas-head p{display:none}.new-card,.save-card{background:#6c63ff;border:0;border-radius:8px;color:#fff;padding:9px 13px;font-weight:700;box-shadow:0 5px 12px #6c63ff2b}.new-card:hover,.save-card:hover{background:#554bd8;box-shadow:0 7px 18px #6c63ff3d}
body.canvas-mode .scrum-board{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;flex:1;min-height:0;overflow:auto;padding:18px 20px;background:transparent}.scrum-column{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f1f4f8;border:1px solid #e1e7ef;border-radius:12px;padding:11px;transition:background .15s,border .15s}.scrum-column.drop-target{background:#edf0ff;border-color:#958eff;box-shadow:0 0 0 3px #6c63ff14}
.scrum-column>header{display:flex;align-items:center;justify-content:space-between;padding:5px 5px 14px;border-bottom:1px solid #e1e6ee}.scrum-column h3{margin:0;font-size:13px;font-weight:800;color:#2c374b}.scrum-column header span{display:grid;place-items:center;min-width:24px;height:24px;border-radius:7px;background:#e5eaf3;color:#66758c;font-size:11px;font-weight:800}
.scrum-column[data-state="backlog"]>header h3{color:#7854c8}.scrum-column[data-state="backlog"]>header span{background:#eee7ff;color:#7854c8}.scrum-column[data-state="por_hacer"]>header h3{color:#2876c7}.scrum-column[data-state="por_hacer"]>header span{background:#e2efff;color:#2876c7}.scrum-column[data-state="en_progreso"]>header h3{color:#bb751b}.scrum-column[data-state="en_progreso"]>header span{background:#fff0d9;color:#bb751b}.scrum-column[data-state="hecho"]>header h3{color:#168268}.scrum-column[data-state="hecho"]>header span{background:#def7ee;color:#168268}
.card-list{display:grid;gap:11px;padding-top:11px;align-content:start;min-height:120px}.scrum-card{height:150px;perspective:1000px;cursor:grab}.scrum-card:active{cursor:grabbing}.scrum-card.dragging{opacity:.4}.card-flip{height:100%;position:relative;transition:transform .32s;transform-style:preserve-3d}.scrum-card.flipped .card-flip{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #e1e7ef;border-radius:10px;padding:13px;background:#fff;box-shadow:0 2px 7px #283c5c0d;transition:border-color .15s,box-shadow .15s}.scrum-card:hover .card-face{border-color:#bbc7d8;box-shadow:0 5px 12px #283c5c12}.card-front{border-left:4px solid #6c63ff}.scrum-column[data-state="backlog"] .card-front{background:linear-gradient(135deg,#fff 55%,#f7f1ff);border-left-color:#926be5}.scrum-column[data-state="por_hacer"] .card-front{background:linear-gradient(135deg,#fff 55%,#eef7ff);border-left-color:#4a9be7}.scrum-column[data-state="en_progreso"] .card-front{background:linear-gradient(135deg,#fff 55%,#fff6e8);border-left-color:#f0a53a}.scrum-column[data-state="hecho"] .card-front{background:linear-gradient(135deg,#fff 55%,#ecfbf5);border-left-color:#35b991}.card-tags{display:flex;justify-content:space-between;align-items:center;color:#77849a;font-size:11px}.card-tags span{background:#f1f3f7;color:#526277;border-radius:6px;padding:4px 7px;font-size:11px;font-weight:800}.scrum-column[data-state="backlog"] .card-tags span{background:#eee7ff;color:#7854c8}.scrum-column[data-state="por_hacer"] .card-tags span{background:#e2efff;color:#2876c7}.scrum-column[data-state="en_progreso"] .card-tags span{background:#fff0d9;color:#bb751b}.scrum-column[data-state="hecho"] .card-tags span{background:#def7ee;color:#168268}.card-front h4{margin:16px 0 8px;color:#253148;font-size:14px;line-height:1.35}.card-front p{margin:0;color:#8792a4;font-size:11px}.card-back{transform:rotateY(180deg);overflow:auto;background:#fff;border-color:#a8b4ff}.criteria-label{font-size:10px;letter-spacing:.08em;font-weight:850;color:#665bdd}.card-back p{white-space:pre-wrap;margin:10px 0;color:#46546a;font-size:12px;line-height:1.45}.card-back small{color:#8792a4;font-size:11px}
body.canvas-mode dialog#card-dialog{background:#fff;border:1px solid #e2e7f0;border-radius:12px;color:#26334a;box-shadow:0 24px 70px #17203335}body.canvas-mode dialog::backdrop{background:#1a254866;backdrop-filter:blur(3px)}body.canvas-mode #card-form header{border-bottom:1px solid #edf0f5;padding-bottom:13px}body.canvas-mode #card-form h3{font-size:17px}body.canvas-mode #card-form label{color:#526277;font-size:12px;font-weight:700}body.canvas-mode #card-form input,body.canvas-mode #card-form textarea{background:#fff;border:1px solid #dce3ed;border-radius:7px;color:#26334a;font:inherit}body.canvas-mode #card-form input:focus,body.canvas-mode #card-form textarea:focus{outline:3px solid #dcd9ff;border-color:#6c63ff}body.canvas-mode #close-card{color:#67758b}
@media(max-width:760px){body.canvas-mode .topbar{padding:8px 13px}body.canvas-mode .mode-tabs{padding:0 13px}.scrum-board{grid-template-columns:repeat(4,82vw)!important;padding:14px!important}.canvas-head{padding:0 14px!important}}

/* --- Indicadores del scrum: sprint, tiles, velocidad, burndown --- */
body.canvas-mode .canvas-head{gap:12px!important}
body.canvas-mode .head-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.sprint-chip{background:#eef2ff;color:#4338ca;border:1px solid #d7dcfb;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.sprint-chip.vacio{background:#f1f4f8;color:#77849a;border-color:#e1e7ef}
.ghost-btn{background:#fff;border:1px solid #dce3ed;border-radius:8px;color:#4a566d;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ghost-btn:hover{border-color:#b9c3d4;color:#28334a}
.ghost-btn.strong{background:#4f46e5;border-color:#4f46e5;color:#fff}
.ghost-btn.strong:hover{background:#4038c9;border-color:#4038c9}
.danger-btn{background:#e5484d;border:1px solid #e5484d;border-radius:8px;color:#fff;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.danger-btn:hover{background:#c9383d;border-color:#c9383d}

.indicadores{flex-shrink:0;background:#fff;border-bottom:1px solid #e4e8f0;padding:14px 20px 12px;display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto}
.indicadores.plegado{display:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.tile{background:#f6f8fc;border:1px solid #e4e8f0;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tile b{font-size:22px;line-height:1.1;color:#1b2639;font-weight:800}
.tile b small{font-size:13px;color:#8792a4;font-weight:700}
.tile span{font-size:11px;font-weight:700;letter-spacing:.03em;color:#66758c;text-transform:uppercase}
.tile i{font-style:normal;font-size:11px;color:#8792a4;display:flex;align-items:center;gap:6px}
.tile.ok{border-color:#c9ebdd;background:#f2fbf7}
.tile.ok b{color:#168268}
.tile.alerta{border-color:#f6ddb5;background:#fffaf1}
.tile.alerta b{color:#bb751b}
.tile-bar{flex:1;height:5px;background:#e2e6f0;border-radius:3px;overflow:hidden;min-width:40px}
.tile-bar i{display:block;height:100%;background:#168268}

.charts{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:12px}
@media(max-width:1180px){.charts{grid-template-columns:1fr 1fr}.chart-narrow{grid-column:1/-1}}
@media(max-width:820px){.charts{grid-template-columns:1fr}}
.chart{margin:0;background:#fff;border:1px solid #e4e8f0;border-radius:10px;padding:10px 12px 8px}
.chart figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;color:#2c374b;margin-bottom:4px}
.chart figcaption small{font-size:10px;font-weight:700;color:#8792a4}
.chart-body svg{width:100%;height:132px;display:block}
.chart-empty{margin:22px 0;text-align:center;font-size:11.5px;color:#8792a4}
.chart-key{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:10.5px;color:#8792a4}
.key{width:10px;height:10px;border-radius:3px;display:inline-block}
.key.hecho{background:#6c63ff}.key.plan{background:#e2e6f0}.key.ideal{background:#c3cad8}
.barras{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.barras li{display:grid;grid-template-columns:78px 1fr 44px;align-items:center;gap:8px;font-size:11.5px;color:#526277}
.barras .quien{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.barras .riel{position:relative;height:9px;background:#eef1f6;border-radius:5px;overflow:hidden}
.barras .riel i{position:absolute;inset:0 auto 0 0;background:#c7cbf7;border-radius:5px}
.barras .riel b{position:absolute;inset:0 auto 0 0;background:#6c63ff;border-radius:5px}
.barras .cifra{text-align:right;font-weight:800;color:#3b4759}

.sprint-bar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;border-top:1px solid #eef1f6;padding-top:10px}
.sprint-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.sprint-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#66758c}
.sprint-form input{background:#fff;border:1px solid #dce3ed;border-radius:7px;padding:7px 9px;font:inherit;font-size:12px;color:#26334a}
.sprint-form input:focus{outline:3px solid #dcd9ff;border-color:#6c63ff}
.sprint-cerrar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#526277;font-weight:600}
.confirma{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8a3d40;font-weight:700}
.inline-error{color:#c9383d;font-size:11.5px;font-weight:700}

.scrum-column header .col-tally{display:flex;align-items:center;gap:5px;min-width:auto;padding:0 7px;height:24px;border-radius:7px}
.col-tally b{font-size:11px;font-weight:800}
.col-tally i{font-style:normal;font-size:10px;opacity:.75;font-weight:700}
.scrum-card.flipped{cursor:default}
.card-back p{user-select:text}

body.canvas-mode #card-form .form-row{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:start}
body.canvas-mode #card-form select{background:#fff;border:1px solid #dce3ed;border-radius:7px;color:#26334a;font:inherit;padding:8px}
.points-picker{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.points-picker button{width:31px;height:29px;border:1px solid #dce3ed;background:#fff;border-radius:7px;color:#526277;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.points-picker button:hover{border-color:#6c63ff;color:#4f46e5}
.points-picker button.activo{background:#6c63ff;border-color:#6c63ff;color:#fff}
.card-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.card-actions .save-card{margin-left:auto}
/* Nuestras reglas de display no pueden pisar el atributo hidden. */
.sprint-form[hidden],.sprint-cerrar[hidden],.confirma[hidden],.card-actions [hidden],#tiles [hidden]{display:none!important}
.col-tally b:after{content:"·";margin:0 1px 0 4px;opacity:.45;font-weight:700}

/* --- Indicadores en su propio índice, ya no encima del tablero --- */
body.canvas-mode #metrics-workspace{display:flex;flex:1;min-height:0;flex-direction:column;background:#f6f8fc}
.metrics-scroll{flex:1;min-height:0;overflow:auto;padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px}
.metrics-scroll .chart-body svg{height:190px}
.metrics-scroll .tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.metrics-scroll .chart{padding:14px 16px 10px}
@media(min-width:1500px){.metrics-scroll .charts{grid-template-columns:1.15fr 1.15fr .8fr}}

/* --- Color propio de la tarjeta (el de la columna es el que manda si no se elige) --- */
.color-picker{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.color-picker button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3ed;cursor:pointer;background:#fff;color:#b6c0cf;font-size:12px;line-height:1;padding:0}
.color-picker button:hover{box-shadow:0 0 0 2px #b9c3d4}
.color-picker button.activo{box-shadow:0 0 0 2px #26334a}

/* --- Participantes --- */
body.canvas-mode dialog#equipo-dialog{background:#fff;border:1px solid #e2e7f0;border-radius:12px;color:#26334a;box-shadow:0 24px 70px #17203335;padding:0;min-width:380px}
body.canvas-mode dialog#equipo-dialog::backdrop{background:#1a254866;backdrop-filter:blur(3px)}
#equipo-panel{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
#equipo-panel header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f5;padding-bottom:12px}
#equipo-panel h3{margin:0;font-size:17px;color:#1b2639}
#close-equipo{border:0;background:transparent;color:#67758b;font-size:18px;cursor:pointer}
.equipo-form{display:flex;gap:8px}
.equipo-form input{flex:1;background:#fff;border:1px solid #dce3ed;border-radius:7px;padding:8px 10px;font:inherit;font-size:13px;color:#26334a}
.equipo-form input:focus{outline:3px solid #dcd9ff;border-color:#6c63ff}
.equipo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto}
.equipo-lista li{display:grid;grid-template-columns:28px 1fr auto 26px;align-items:center;gap:9px;background:#f6f8fc;border:1px solid #e4e8f0;border-radius:9px;padding:8px 10px}
.equipo-lista .inicial{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#6c63ff;color:#fff;font-size:12px;font-weight:800}
.equipo-lista .nombre{font-size:13px;font-weight:700;color:#26334a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.equipo-lista .carga{font-size:11px;color:#8792a4;font-weight:700;white-space:nowrap}
.equipo-lista .quitar{border:0;background:transparent;color:#b6c0cf;font-size:16px;cursor:pointer;line-height:1}
.equipo-lista .quitar:hover{color:#e5484d}
.equipo-vacio{background:transparent!important;border:0!important;display:block!important;text-align:center;color:#8792a4;font-size:12px;padding:14px 0!important}
body.canvas-mode #card-form select[name=responsable]{background:#fff;border:1px solid #dce3ed;border-radius:7px;color:#26334a;font:inherit;padding:8px;width:100%}
body.canvas-mode #canvas-workspace[hidden],body.canvas-mode #metrics-workspace[hidden],body.canvas-mode #sheet-workspace[hidden]{display:none!important}
/* El color elegido manda de verdad: franja ancha y etiqueta de puntos entera. */

/* --- Backlog plegable --- */
.col-fold{border:1px solid #e1e7ef;background:#fff;color:#8995a8;border-radius:6px;width:20px;height:20px;line-height:1;font-size:13px;font-weight:800;cursor:pointer;padding:0;margin-right:6px;flex-shrink:0}
.col-fold:hover{border-color:#b9c3d4;color:#3b4759}
.scrum-column>header{gap:6px}
.scrum-column>header h3{flex:1}
body.canvas-mode .scrum-board.backlog-plegado{grid-template-columns:48px repeat(3,minmax(180px,1fr))}
.scrum-column.plegada{padding:11px 7px;cursor:pointer;align-items:center;overflow:hidden}
.scrum-column.plegada:hover{background:#e9edf4}
.scrum-column.plegada .card-list{display:none}
.scrum-column.plegada>header{flex-direction:column;justify-content:flex-start;gap:12px;padding:0;border-bottom:0;height:100%;width:100%}
.scrum-column.plegada .col-fold{margin:0}
.scrum-column.plegada h3{writing-mode:vertical-rl;transform:rotate(180deg);flex:0 0 auto;font-size:12px;letter-spacing:.04em}
.scrum-column.plegada .col-tally{min-width:26px;padding:0;justify-content:center}
.scrum-column.plegada .col-tally i,.scrum-column.plegada .col-tally b:after{display:none}
@media(max-width:760px){body.canvas-mode .scrum-board.backlog-plegado{grid-template-columns:48px repeat(3,82vw)!important}}
/* Paleta larga: rejilla en vez de fila. */
.color-picker{display:grid;grid-template-columns:repeat(9,23px);gap:5px}
.color-picker button{width:23px;height:23px;font-size:11px}
body.canvas-mode #card-form .form-row:has(.color-picker){grid-template-columns:1fr 200px}
body.canvas-mode #card-form header{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.canvas-mode #close-card{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer}

/* --- Las tres pestañas viven en la barra de arriba: 49 px menos de cromo --- */
.topbar .mode-tabs{display:flex;align-items:center;gap:16px;margin-left:22px}
.topbar .mode-tabs button{border:0;background:transparent;color:#5f6368;font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer;padding:6px 2px;border-bottom:3px solid transparent}
.topbar .mode-tabs button.active{color:#137333;border-bottom-color:#137333}
body.canvas-mode .topbar .mode-tabs{height:auto;padding:0;background:transparent;border:0}
body.canvas-mode .topbar .mode-tabs button{height:auto;color:#8995a8}
body.canvas-mode .topbar .mode-tabs button.active{color:#4f46e5!important;border-bottom-color:#6c63ff!important}
body.canvas-mode .topbar{height:60px}

/* --- La cabecera del canvas se pliega hacia arriba --- */
.fold-head{margin-right:0;margin-left:4px}
body.canvas-mode .canvas-head{transition:height .16s ease,padding .16s ease}
body.canvas-mode .canvas-head.plegada{height:32px;padding:0 20px}
.canvas-head.plegada h2,.canvas-head.plegada p{display:none}
.canvas-head.plegada .sprint-chip{padding:3px 8px;font-size:11px}
.canvas-head.plegada .head-actions{margin-left:auto;gap:6px}
.canvas-head.plegada .ghost-btn,.canvas-head.plegada .new-card{padding:4px 9px;font-size:11px;box-shadow:none}
.canvas-head.plegada .col-fold{width:18px;height:18px;font-size:11px}
/* En SHEET la pestaña activa va del verde de la hoja, no del índigo del canvas. */
body:not(.canvas-mode) .topbar .mode-tabs button.active{color:#137333!important;border-bottom-color:#137333!important;background:transparent!important}
body:not(.canvas-mode) .topbar .mode-tabs button:hover{color:#137333!important;background:transparent!important}

/* --- Tarjeta de color entero: el color ES la tarjeta --- */
.scrum-card[data-color] .card-front{background:var(--card-color)!important;border-color:var(--card-borde)!important;border-left:6px solid var(--card-borde)!important;color:var(--card-texto)}
.scrum-card[data-color] .card-front h4{color:var(--card-texto)}
.scrum-card[data-color] .card-front p,.scrum-card[data-color] .card-tags small{color:var(--card-texto);opacity:.72}
.scrum-card[data-color] .card-tags span{background:var(--card-texto)!important;color:var(--card-color)!important;font-weight:800}
.scrum-card[data-color]:hover .card-face{border-color:var(--card-borde);box-shadow:0 5px 12px #283c5c1f}
.scrum-card[data-color] .card-back{border-color:var(--card-borde);border-left:6px solid var(--card-borde)}
.scrum-card[data-color] .criteria-label{color:var(--card-borde)}

/* --- Perfil: foto redonda arriba, nombre debajo --- */
.perfil{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid #dce3ed;background:#eef2ff;color:#4f46e5;font-size:13px;font-weight:800;cursor:pointer;padding:0;overflow:hidden;display:grid;place-items:center;position:relative}
.avatar:hover{border-color:#6c63ff}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-nombre{font-size:10.5px;font-weight:700;color:#5f6368;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
body.canvas-mode .avatar{background:#eef2ff;color:#4f46e5;border-color:#d7dcfb}
body.canvas-mode .user-nombre{color:#66758c}
body:not(.canvas-mode) .avatar{background:#e6f4ea;color:#137333;border-color:#cbe6d4}

/* --- La cara de quien lleva la tarjeta, dentro de la tarjeta --- */
.card-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;font-size:10.5px;font-weight:800;border:1px solid #dce3ed;flex-shrink:0}
.card-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.scrum-card[data-color] .card-avatar{background:var(--card-texto);color:var(--card-color);border-color:var(--card-borde)}
.equipo-lista .inicial{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer}
.equipo-lista .inicial img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.equipo-lista .inicial i{position:absolute;inset:auto 0 0 0;background:#00000059;color:#fff;font-size:8px;font-style:normal;line-height:9px;opacity:0}
.equipo-lista .inicial:hover i{opacity:1}

/* --- El avatar de la tarjeta: redondo de verdad y más grande.
       Sin esto hereda la pastilla de puntos (.card-tags span) y sale cuadrado. --- */
.card-tags .card-avatar,.scrum-column .card-tags .card-avatar,.scrum-card[data-color] .card-tags .card-avatar{width:34px!important;height:34px!important;border-radius:50%!important;padding:0!important;overflow:hidden;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.card-tags .card-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.scrum-card .card-front h4{margin-top:12px}
.equipo-lista li{grid-template-columns:38px 1fr auto 26px}
.equipo-lista .inicial{width:38px;height:38px;font-size:14px}
.avatar{width:40px;height:40px;font-size:15px}
.user-nombre{font-size:11px}

/* Aviso propio para el canvas (la barra de estado de la hoja no se ve aquí). */
#aviso{position:fixed;right:18px;bottom:18px;z-index:60;background:#26334a;color:#fff;font-size:12.5px;font-weight:700;padding:10px 14px;border-radius:9px;opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s;pointer-events:none;max-width:min(420px,80vw)}
#aviso.visible{opacity:1;transform:translateY(0)}
#aviso.esperando{background:#4f46e5}
/* Con las letras siempre blancas, la pastilla y el avatar usan el tono oscuro:
   el color plano sobre blanco no se leería en los claros. */
.scrum-card[data-color] .card-tags span{color:var(--card-borde)!important}
.scrum-card[data-color] .card-tags .card-avatar{background:#fff;color:var(--card-borde)}


/* Sprint centrado y tarjetas sin desplazamiento: hasta cinco en vertical;
   desde la sexta, una cuadrícula de tarjetas cuadradas. */
body.canvas-mode .canvas-head{position:relative}
body.canvas-mode .canvas-head .sprint-chip.centrado{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;min-width:96px;text-align:center;z-index:1}
body.canvas-mode .sprint-chip.centrado b{font-size:13px;line-height:1.1;color:#3730a3}
body.canvas-mode .sprint-chip.centrado i{font-style:normal;font-size:10px;line-height:1.1;font-weight:650;color:#66758c}
body.canvas-mode .scrum-board{overflow:hidden}
.scrum-column .card-list{--columnas-cards:1;--filas-cards:5;display:grid;grid-template-columns:repeat(var(--columnas-cards),minmax(0,1fr));grid-template-rows:repeat(var(--filas-cards),minmax(0,1fr));column-gap:13px;row-gap:15px;flex:1;min-height:0;overflow:hidden;align-content:stretch;padding:14px 3px 4px}
.scrum-column .card-list[data-densidad="1"]{--columnas-cards:1}
.scrum-column .card-list[data-densidad="2"]{--columnas-cards:2}
.scrum-column .card-list[data-densidad="3"]{--columnas-cards:3}
.scrum-column .card-list[data-densidad="4"]{--columnas-cards:4}
.scrum-column .scrum-card{height:auto;min-height:0;overflow:hidden}
.scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{aspect-ratio:1/1;align-self:start}
.scrum-column .card-face{padding:11px;overflow:hidden}
.scrum-column .card-front h4{margin:11px 0 6px;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.scrum-column .card-front p{font-size:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.scrum-column .card-back{overflow:hidden}
.scrum-column .card-back p{margin:8px 0;font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.scrum-column .card-back small{font-size:10px}

/* Selector de responsables: una tarjeta puede tener varios miembros. */
.equipo-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:32px}
.picker-persona{display:flex;align-items:center;gap:6px;min-width:0;border:1px solid #dce3ed;background:#fff;border-radius:7px;padding:5px 6px;color:#526277;font:inherit;font-size:11px;font-weight:700;cursor:pointer;text-align:left}
.picker-persona:hover{border-color:#9b95ff}
.picker-persona.elegida{background:#eeedff;border-color:#6c63ff;color:#4338ca;box-shadow:inset 0 0 0 1px #6c63ff}
.picker-cara{width:20px;height:20px;display:grid;place-items:center;overflow:hidden;flex:0 0 20px;border-radius:50%;background:#eef2ff;color:#4f46e5;font-size:9px;font-weight:800}
.picker-cara img{width:100%;height:100%;object-fit:cover}
.picker-vacio{color:#8792a4;font-size:11px;font-weight:500}
.card-caras{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.card-caras .card-avatar{margin-left:-7px;border:2px solid #fff}
.card-caras .card-avatar:first-child{margin-left:0}
.card-caras .card-avatar.mas{background:#526277!important;color:#fff!important;font-size:10px!important}
.scrum-card[data-color] .card-caras .card-avatar{border-color:var(--card-color)}
@media(max-width:760px){body.canvas-mode .scrum-board{overflow-x:auto;overflow-y:hidden}body.canvas-mode .canvas-head .sprint-chip.centrado{position:static;transform:none;order:3;margin-left:auto}.canvas-head.plegada .sprint-chip.centrado{display:none}}


/* Con seis o más tarjetas, la separación se refuerza para que cada bloque
   respire claramente dentro de su cuadrícula. */
.scrum-column .card-list[data-densidad="2"]{column-gap:22px;row-gap:24px;padding:18px 10px 12px}
.scrum-column .card-list[data-densidad="2"] .scrum-card{width:calc(100% - 4px);justify-self:center}


/* Indicador vivo del sprint: avance, puntos y tiempo restante. */
.sprint-chip{display:flex;flex-direction:column;width:min(320px,42vw);padding:7px 10px;gap:4px;white-space:normal;box-shadow:0 5px 16px #4338ca12}
.sprint-chip-top,.sprint-chip-meta{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px}
.sprint-chip-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3730a3;font-size:12px}
.sprint-chip-top strong{color:#4f46e5;font-size:12px;font-variant-numeric:tabular-nums}
.sprint-progress{display:block;width:100%;height:7px;overflow:hidden;border-radius:999px;background:#d9def4;box-shadow:inset 0 1px 2px #312e8118}
.sprint-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c63ff,#34b399);transition:width .35s ease}
.sprint-chip-meta{font-size:9.5px;color:#66758c;font-weight:750}
.sprint-chip-meta i,.sprint-chip-meta em,.sprint-chip-dates{font-style:normal}
.sprint-chip-dates{display:block;text-align:center;font-size:9px;color:#8995a8}
.sprint-chip-empty{display:flex;flex-direction:column;align-items:center;gap:1px}
.sprint-chip-empty i{font-style:normal;font-size:9px;color:#8995a8}
body.canvas-mode .canvas-head .sprint-chip.centrado{width:min(320px,42vw);gap:4px}
.canvas-head.plegada .sprint-chip{width:auto;padding:3px 8px}
.canvas-head.plegada .sprint-progress,.canvas-head.plegada .sprint-chip-meta,.canvas-head.plegada .sprint-chip-dates,.canvas-head.plegada .sprint-chip-empty i{display:none}
@media(max-width:760px){body.canvas-mode .canvas-head .sprint-chip.centrado{width:min(58vw,280px)}.sprint-chip-top b{max-width:155px}.sprint-chip-meta{font-size:9px}}

body.canvas-mode .canvas-head{height:78px}
.sprint-chip.completo .sprint-progress span{background:linear-gradient(90deg,#168268,#34b399)}
.sprint-chip.completo .sprint-chip-top strong{color:#168268}
.sprint-chip.vencido{background:#fff1f2;border-color:#fecdd3}
.sprint-chip.vencido .sprint-progress{background:#ffe4e6}
.sprint-chip.vencido .sprint-progress span{background:linear-gradient(90deg,#e5484d,#f0a53a)}
.sprint-chip.vencido .sprint-chip-top strong,.sprint-chip.vencido .sprint-chip-meta em{color:#be123c}

/* --- Estructura móvil: cada grupo conserva su propia fila y jerarquía. --- */
/* La hoja también es un espacio de trabajo completo en escritorio y tablet;
   así el pie no deja un bloque blanco después de la tabla. */
body:not(.canvas-mode) #sheet-workspace{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}
body:not(.canvas-mode) #sheet-workspace .grid-shell{min-height:0}
body:not(.canvas-mode) #sheet-workspace .table-scroll{min-height:0}
@media (max-width:760px){
  .sheet-app{min-height:100dvh}
  .topbar,
  body.canvas-mode .topbar{
    height:auto;
    min-height:64px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-areas:"mark title actions" "tabs tabs tabs";
    align-items:center;
    gap:7px 9px;
    padding:8px 12px 0!important;
  }
  .topbar .sheet-mark{grid-area:mark;width:28px;height:32px;flex:none}
  .topbar .doc-head{grid-area:title;min-width:0}
  .topbar .doc-head h1{margin:0;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .doc-meta{display:none}
  .topbar .top-actions{grid-area:actions;margin:0;gap:0}
  .topbar .perfil{display:none}
  .topbar .logout{padding:6px 8px;font-size:11px;white-space:nowrap}
  .topbar .mode-tabs,
  body.canvas-mode .topbar .mode-tabs{
    grid-area:tabs;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    height:39px;
    margin:0;
    padding:0!important;
    gap:0;
    border-top:1px solid #edf0f5!important;
    background:transparent!important;
  }
  .topbar .mode-tabs button,
  body.canvas-mode .topbar .mode-tabs button{
    width:100%;
    height:39px;
    min-width:0;
    padding:0 3px;
    font-size:10px;
    letter-spacing:.045em;
    white-space:nowrap;
  }

  /* Hoja: la acción principal y la búsqueda siguen accesibles sin apretar iconos. */
  #sheet-workspace{min-height:0;display:flex;flex:1;flex-direction:column}
  .toolbar{height:auto;min-height:46px;gap:6px;padding:7px 10px;overflow-x:auto;scrollbar-width:none}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar .add-row{flex:0 0 auto;white-space:nowrap}
  .toolbar .search{display:block;flex:1 0 150px;width:150px;min-width:150px}
  .toolbar .canvas-card-picker,.toolbar .add-canvas-card{display:none!important}
  .formula-bar{height:36px;padding:0 10px;gap:7px}
  .cell-ref{width:42px}.formula-sep{height:20px}
  .sheet-footer{height:38px;padding:0 8px;gap:2px;align-items:end}
  .sheet-footer .tab{max-width:calc(100vw - 130px);padding:0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet-footer #count{display:none}
  .sheet-footer a{margin-left:auto;white-space:nowrap}

  /* Canvas: título, sprint y acciones ya no compiten en una sola fila. */
  body.canvas-mode .canvas-head{
    height:auto!important;
    min-height:0;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title fold" "sprint sprint" "actions actions";
    gap:9px;
    padding:11px 12px!important;
  }
  body.canvas-mode .canvas-head>div:first-child{grid-area:title;min-width:0}
  body.canvas-mode .canvas-head h2{margin:0;font-size:17px}
  body.canvas-mode .canvas-head .sprint-chip.centrado{
    grid-area:sprint;
    position:static;
    width:100%;
    margin:0;
    transform:none;
    order:initial;
  }
  body.canvas-mode .canvas-head .head-actions{grid-area:actions;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;width:100%;margin:0;gap:8px}
  body.canvas-mode .canvas-head .head-actions button{min-width:0;white-space:nowrap;padding:9px 7px;font-size:11px}
  body.canvas-mode .canvas-head .head-actions .fold-head{grid-area:fold;position:absolute;right:12px;top:12px;width:27px;height:27px;margin:0}
  body.canvas-mode .canvas-head.plegada{display:flex!important;height:38px!important;min-height:38px;padding:5px 12px!important}
  body.canvas-mode .canvas-head.plegada .head-actions{display:flex;width:auto;margin-left:auto}
  body.canvas-mode .canvas-head.plegada .fold-head{position:static}
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,84vw)!important;gap:10px;padding:10px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  body.canvas-mode .scrum-column{scroll-snap-align:start;padding:9px}
  /* En una columna estrecha no se usa la cuadrícula de escritorio: las tarjetas
     se mantienen completas y se desplazan dentro de su propio estado. */
  body.canvas-mode .scrum-column .card-list{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:10px!important;
    padding:10px 2px 4px!important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{
    width:100%!important;
    height:118px!important;
    min-height:118px!important;
    aspect-ratio:auto!important;
    justify-self:stretch!important;
  }
  body.canvas-mode .scrum-column .card-front h4{font-size:14px;-webkit-line-clamp:3}
  body.canvas-mode .scrum-column .card-front p{-webkit-line-clamp:2}

  /* Indicadores y formularios: una columna legible, sin controles cortados. */
  .metrics-scroll{padding:12px;gap:12px}
  .metrics-scroll .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .metrics-scroll .tile{padding:9px}
  .metrics-scroll .tile b{font-size:19px}
  .metrics-scroll .chart{padding:11px 10px 8px}
  .sprint-form{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:8px}
  .sprint-form label:first-child,.sprint-form button{grid-column:1/-1}
  .sprint-form input{min-width:0;width:100%}
  .sprint-cerrar,.confirma{align-items:flex-start}

  body.canvas-mode dialog#equipo-dialog,
  body.canvas-mode dialog#card-dialog{width:calc(100vw - 24px);max-width:560px;min-width:0;max-height:calc(100dvh - 24px)}
  #equipo-panel{padding:15px;gap:10px}
  .equipo-form{flex-wrap:wrap}
  .equipo-form input{min-width:0;width:100%}
  .equipo-form button{width:100%}
  body.canvas-mode #card-form{max-height:calc(100dvh - 52px);overflow:auto}
  body.canvas-mode #card-form .form-row,
  body.canvas-mode #card-form .form-row:has(.color-picker){grid-template-columns:1fr;gap:8px}
  .color-picker{grid-template-columns:repeat(9,23px)}
  .equipo-picker{grid-template-columns:1fr}
  .card-actions{flex-wrap:wrap}
  .card-actions .save-card{width:100%;margin-left:0}
  #aviso{right:12px;bottom:12px;max-width:calc(100vw - 24px)}
}

@media (max-width:360px){
  .topbar .mode-tabs button,body.canvas-mode .topbar .mode-tabs button{font-size:9px;letter-spacing:.02em}
  .metrics-scroll .tiles{grid-template-columns:1fr}
  .color-picker{grid-template-columns:repeat(8,23px)}
}

/* En teléfono acostado el recurso escaso es la altura: se usa una barra compacta,
   no la estructura apilada del retrato. */
@media (max-width:900px) and (max-height:540px) and (orientation:landscape){
  .topbar,
  body.canvas-mode .topbar{
    min-height:54px;
    height:54px;
    display:flex;
    padding:6px 12px!important;
    gap:9px;
  }
  .topbar .sheet-mark{width:25px;height:29px;padding:8px 6px;flex:0 0 auto}
  .topbar .doc-head{min-width:0;flex:0 1 155px}
  .topbar .doc-head h1{font-size:14px}
  .topbar .mode-tabs,
  body.canvas-mode .topbar .mode-tabs{
    display:flex;
    width:auto;
    height:38px;
    flex:1 1 auto;
    justify-content:center;
    border-top:0!important;
  }
  .topbar .mode-tabs button,
  body.canvas-mode .topbar .mode-tabs button{width:auto;height:38px;padding:0 7px;font-size:9.5px}
  .topbar .top-actions{margin-left:auto;flex:0 0 auto}
  .topbar .logout{padding:5px 7px}

  #sheet-workspace{min-height:0}
  .toolbar{min-height:38px;padding:4px 9px}
  .toolbar .add-row{padding:5px 8px}
  .formula-bar{height:30px}
  .sheet-footer{height:32px}
  .sheet-footer .tab{height:28px}

  body.canvas-mode .canvas-head{
    min-height:50px;
    height:50px!important;
    display:flex!important;
    flex-wrap:nowrap;
    padding:6px 12px!important;
    gap:8px;
  }
  body.canvas-mode .canvas-head>div:first-child{flex:0 1 110px}
  body.canvas-mode .canvas-head h2{font-size:15px;white-space:nowrap}
  body.canvas-mode .canvas-head .sprint-chip.centrado{display:flex;flex:1 1 180px;width:auto;min-width:120px;max-width:240px;padding:4px 8px}
  body.canvas-mode .canvas-head .sprint-progress{height:5px}
  body.canvas-mode .canvas-head .sprint-chip-meta,body.canvas-mode .canvas-head .sprint-chip-dates{display:none}
  body.canvas-mode .canvas-head .head-actions{display:flex;width:auto;margin-left:auto;gap:6px}
  body.canvas-mode .canvas-head .head-actions button{padding:6px 8px;font-size:10px}
  body.canvas-mode .canvas-head .head-actions .fold-head{position:static;width:24px;height:24px;padding:0}
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,58vw)!important;padding:8px!important;overflow-x:auto!important;overflow-y:hidden!important}
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{height:96px!important;min-height:96px!important}

  .metrics-scroll{padding:9px 12px}
  .metrics-scroll .tiles{grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto;padding-bottom:2px}
  .metrics-scroll .charts{grid-template-columns:1fr 1fr}.metrics-scroll .chart-narrow{grid-column:1/-1}
}

/* Tablet: tarjetas más contenidas que en teléfono y sin la cuadrícula diminuta
   de escritorio cuando una columna acumula trabajo. */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,42vw);gap:12px;padding:14px;overflow-x:auto;overflow-y:hidden}
  body.canvas-mode .scrum-column .card-list{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:9px!important;padding:10px 2px 4px!important;overflow-y:auto}
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{width:100%!important;height:94px!important;min-height:94px!important;aspect-ratio:auto!important}
  body.canvas-mode .scrum-column .card-front{padding:10px}
  body.canvas-mode .scrum-column .card-front h4{margin:8px 0 5px;font-size:12.5px;-webkit-line-clamp:2}
}
@media (min-width:761px) and (max-width:1180px) and (orientation:landscape){
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,minmax(190px,1fr));gap:10px;padding:12px;overflow:auto}
  body.canvas-mode .scrum-column .card-list{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:8px!important;padding:9px 2px 3px!important;overflow-y:auto}
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{width:100%!important;height:88px!important;min-height:88px!important;aspect-ratio:auto!important}
  body.canvas-mode .scrum-column .card-front{padding:9px}
  body.canvas-mode .scrum-column .card-front h4{margin:6px 0 4px;font-size:12px;-webkit-line-clamp:2}
}

/* Escala común: las tres vistas usan el mismo marco, espaciado y controles.
   Cada tamaño cambia la densidad, nunca la jerarquía de la interfaz. */
:root{--gcc-gutter:clamp(12px,2vw,28px);--gcc-gap:clamp(8px,1vw,14px);--gcc-control:36px}
.topbar{padding-left:var(--gcc-gutter);padding-right:var(--gcc-gutter)}
.toolbar,.formula-bar{padding-left:var(--gcc-gutter);padding-right:var(--gcc-gutter)}
body.canvas-mode .canvas-head{padding-left:var(--gcc-gutter);padding-right:var(--gcc-gutter)}
body.canvas-mode .scrum-board,.metrics-scroll{padding-left:var(--gcc-gutter);padding-right:var(--gcc-gutter)}
body.canvas-mode .head-actions{gap:var(--gcc-gap)}
body.canvas-mode .ghost-btn,body.canvas-mode .new-card,body.canvas-mode .save-card,body.canvas-mode .danger-btn{min-height:var(--gcc-control);display:inline-flex;align-items:center;justify-content:center}
body.canvas-mode .canvas-head h2,body.canvas-mode .canvas-head .sprint-chip,body.canvas-mode .head-actions{min-width:0}

/* Tablet no es un teléfono grande: conserva dos o más bloques útiles, con
   controles equivalentes y sin barras ni diálogos desproporcionados. */
@media (min-width:761px) and (max-width:1180px){
  :root{--gcc-gutter:18px;--gcc-gap:10px;--gcc-control:34px}
  .topbar,body.canvas-mode .topbar{height:64px;padding-top:8px;padding-bottom:8px}
  .topbar .mode-tabs{margin-left:16px;gap:12px}
  .topbar .mode-tabs button{font-size:11px}
  body.canvas-mode .canvas-head{height:68px;padding-top:8px;padding-bottom:8px}
  body.canvas-mode .canvas-head h2{font-size:18px}
  body.canvas-mode .canvas-head .sprint-chip.centrado{width:min(260px,31vw)}
  .metrics-scroll{gap:12px;padding-top:14px;padding-bottom:16px}
  .metrics-scroll .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sprint-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(130px,1fr) minmax(130px,1fr) auto;gap:9px;align-items:end;width:100%}
  .sprint-form label{min-width:0}.sprint-form input{width:100%;min-width:0}
  body.canvas-mode dialog#equipo-dialog,body.canvas-mode dialog#card-dialog{max-width:min(620px,calc(100vw - 40px));max-height:calc(100dvh - 40px)}
}

@media (min-width:1181px){
  :root{--gcc-gutter:26px;--gcc-gap:12px;--gcc-control:36px}
  body.canvas-mode .canvas-head{height:72px}
  .metrics-scroll{padding-top:18px;padding-bottom:22px}
}

/* Laptop horizontal (por ejemplo 1280 × 800): cuatro estados visibles, pero
   tarjetas de lectura vertical. No se reutiliza la cuadrícula cuadrada de PC. */
@media (min-width:1181px) and (max-width:1440px) and (max-height:900px){
  :root{--gcc-gutter:20px;--gcc-gap:10px;--gcc-control:34px}
  body.canvas-mode .topbar{height:60px}
  body.canvas-mode .canvas-head{height:64px;padding-top:7px;padding-bottom:7px}
  body.canvas-mode .canvas-head h2{font-size:18px}
  body.canvas-mode .canvas-head .sprint-chip.centrado{width:min(270px,30vw)}
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:12px;padding-bottom:12px;overflow:hidden}
  body.canvas-mode .scrum-column{padding:9px}
  body.canvas-mode .scrum-column .card-list{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:8px!important;padding:9px 2px 3px!important;overflow-y:auto}
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{width:100%!important;height:100px!important;min-height:100px!important;aspect-ratio:auto!important;justify-self:stretch!important}
  body.canvas-mode .scrum-column .card-front{padding:10px}
  body.canvas-mode .scrum-column .card-front h4{margin:8px 0 5px;font-size:13px;-webkit-line-clamp:2}
  body.canvas-mode .scrum-column .card-front p{-webkit-line-clamp:2}
}

/* Laptop amplia 1440 × 960: al crecer una columna se mantiene la misma tarjeta
   completa; el exceso se recorre dentro de la columna, nunca se parte en cuadros. */
@media (min-width:1181px) and (max-width:1440px) and (min-height:901px){
  body.canvas-mode .scrum-board{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:hidden}
  body.canvas-mode .scrum-column{padding:10px}
  body.canvas-mode .scrum-column .card-list{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:10px!important;padding:11px 3px 4px!important;overflow-y:auto;align-content:start}
  body.canvas-mode .scrum-column .scrum-card,
  body.canvas-mode .scrum-column .card-list[data-densidad]:not([data-densidad="1"]) .scrum-card{width:100%!important;height:108px!important;min-height:108px!important;aspect-ratio:auto!important;justify-self:stretch!important;align-self:auto!important}
  body.canvas-mode .scrum-column .card-front{padding:11px}
  body.canvas-mode .scrum-column .card-front h4{margin:9px 0 5px;font-size:13px;line-height:1.3;-webkit-line-clamp:2}
  body.canvas-mode .scrum-column .card-front p{-webkit-line-clamp:2}
}