/* Recepta · Tareas (tareas.js, tareas-tarjeta.js): tableros kanban con la estética de Recepta. */

/* ---- Pantalla de tableros ---- */
.ta-inicio .encabezado { margin-bottom: 18px; }
.tb-seccion { margin: 26px 0 0; }
.tb-seccion h2 { font-size: 1rem; margin: 0 0 12px; letter-spacing: -0.01em; }
.tb-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tb-tile { position: relative; display: flex; align-items: flex-start; height: 104px; padding: 12px 14px; border-radius: 14px; background: var(--fondo); color: #fff;
  text-decoration: none; font-weight: 800; box-shadow: var(--sombra); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; border: 0; text-align: left; }
.tb-tile::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.15s; pointer-events: none; }
.tb-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(20, 26, 51, 0.45); text-decoration: none; color: #fff; }
.tb-tile:hover::after { background: rgba(0, 0, 0, 0.12); }
.tb-tile-nombre { position: relative; z-index: 1; font-size: 1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
.tb-estrella { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem; box-shadow: none; opacity: 0; transform: translateX(6px); transition: opacity 0.15s, transform 0.15s; }
.tb-tile:hover .tb-estrella, .tb-estrella.activa, .tb-estrella:focus-visible { opacity: 1; transform: none; }
.tb-estrella.activa { color: #ffd23f; }
.tb-estrella:hover { background: rgba(255, 255, 255, 0.18); color: #ffd23f; }
@media (hover: none) { .tb-estrella { opacity: 1; transform: none; } }
.tb-tile-nuevo { background: var(--perla-suave); color: var(--tinta); flex-direction: column; justify-content: center; align-items: center; gap: 2px; font-weight: 700; box-shadow: none; border: 1px dashed var(--perla); cursor: pointer; }
.tb-tile-nuevo:hover { color: var(--tinta); background: var(--cobalto-suave); border-color: var(--cobalto); }
.tb-tile-nuevo small { color: var(--pizarra); font-weight: 600; }
.tb-tile-nuevo::after { display: none; }
.tb-cerrados-enlace { margin: 22px 0 0; font-size: 0.88rem; }
.tb-cerrados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tb-cerrados li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--hoja); border: 1px solid var(--perla); border-radius: 12px; }
.tb-cerrados b { flex: 1; }
.tb-mini { width: 34px; height: 24px; border-radius: 6px; flex: none; }

/* Mis tarjetas */
.ta-mias h2 small { font-weight: 600; color: var(--pizarra); font-size: 0.8rem; margin-left: 6px; }
.ta-mias-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ta-mias-grupo h3 { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pizarra); display: flex; gap: 6px; align-items: center; }
.ta-mias-grupo h3 span { background: var(--perla-suave); border-radius: 999px; padding: 0 7px; }
.ta-mias-grupo h3.vencida { color: var(--error); } .ta-mias-grupo h3.pronto { color: var(--ambar-texto); }
.ta-mias-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ta-mias-grupo a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--perla-suave); color: inherit; text-decoration: none; }
.ta-mias-grupo a:hover { background: var(--cobalto-suave); text-decoration: none; }
.ta-mias-titulo { font-weight: 700; font-size: 0.88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-mias-donde { grid-column: 1; font-size: 0.75rem; color: var(--pizarra); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-mias-grupo .tj-insignia { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ---- Tablero: ocupa toda la pantalla ---- */
body.en-tablero main#vista { max-width: none; padding: 0; }
body.en-tablero .tarea-rapida { display: none; }
.tb-pantalla { --alto-cab: 56px; background: var(--fondo); min-height: 100vh; height: 100vh; display: flex; flex-direction: column; color: #fff; position: relative; }
.tb-pantalla > .aviso-boceto { margin: 10px 14px 0; color: var(--tinta); }
@media (max-width: 900px) { .tb-pantalla { height: calc(100vh - 58px); min-height: 0; } }
.tb-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(6px); flex-wrap: wrap; }
.tb-volver { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 1.5rem; text-decoration: none; line-height: 1; }
.tb-volver:hover { background: rgba(255, 255, 255, 0.2); color: #fff; text-decoration: none; }
.tb-nombre { width: auto; flex: 0 1 auto; background: transparent; border: 0; color: #fff; font: inherit; font-size: 1.15rem; font-weight: 800; padding: 4px 8px; border-radius: 8px; min-width: 60px; max-width: 46vw; box-shadow: none; }
.tb-nombre:hover { background: rgba(255, 255, 255, 0.18); }
.tb-nombre:focus { background: var(--hoja); color: var(--tinta); outline: none; box-shadow: var(--foco); }
.tb-boton { background: rgba(255, 255, 255, 0.18); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 0.85rem; box-shadow: none; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.tb-boton:hover, .tb-boton.activo { background: rgba(255, 255, 255, 0.32); color: #fff; }
[data-tema='oscuro'] .tb-boton:hover { background: rgba(255, 255, 255, 0.32); border-color: transparent; }
.tb-estrella-cab { font-size: 1rem; padding: 6px 9px; }
.tb-estrella-cab.activa { color: #ffd23f; }
.tb-espacio { flex: 1; }
.tb-filtro-n:empty { display: none; }
.tb-filtro-n { background: #fff; color: var(--cobalto-hondo); border-radius: 999px; padding: 0 6px; font-size: 0.72rem; }
.tb-buscar { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 0 10px; margin: 0; min-height: 32px; font-weight: 400; }
.tb-buscar span { font-size: 0.8rem; opacity: 0.85; }
.tb-buscar input { background: transparent; border: 0; color: #fff; width: 150px; padding: 6px 0; font-size: 0.85rem; box-shadow: none; }
.tb-buscar input::placeholder { color: rgba(255, 255, 255, 0.75); }
.tb-buscar:focus-within { background: var(--hoja); }
.tb-buscar:focus-within input, .tb-buscar:focus-within span { color: var(--tinta); }
.tb-miembros { display: inline-flex; padding-left: 6px; }
.tb-miembros .ta-avatar { margin-left: -6px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); }
@media (max-width: 700px) { .tb-buscar input { width: 90px; } .tb-miembros { display: none; } .tb-nombre { max-width: 60vw; } }

/* Lienzo con las listas */
.tb-lienzo { flex: 1; display: flex; align-items: flex-start; gap: 12px; padding: 14px; overflow-x: auto; overflow-y: hidden; min-height: 0; scroll-padding: 14px; }
.tb-lienzo.paneando { cursor: grabbing; user-select: none; }
.tb-lienzo::-webkit-scrollbar { height: 12px; }
.tb-lienzo::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.tb-lienzo::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); border-radius: 999px; margin: 0 14px; }
.tl { flex: none; width: 272px; max-height: 100%; display: flex; flex-direction: column; background: var(--perla-suave); color: var(--tinta); border-radius: 14px; box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25); }
[data-tema='oscuro'] .tl { background: #101425; }
.tl-cab { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px 12px; cursor: grab; touch-action: pan-x pan-y; }
.tl-nombre { flex: 1; margin: 0; font-size: 0.92rem; font-weight: 800; padding: 4px 6px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.tl-nombre:hover { background: rgba(9, 30, 66, 0.06); }
.tl-nombre-input { flex: 1; font-size: 0.92rem; font-weight: 800; padding: 4px 6px; }
.tl-cuenta { font-size: 0.72rem; color: var(--pizarra); font-weight: 700; padding: 0 4px; }
.tl-menu { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; border-radius: 8px; color: var(--pizarra); font-weight: 800; box-shadow: none; font-size: 1.1rem; }
.tl-menu:hover { background: rgba(9, 30, 66, 0.08); color: var(--tinta); }
.tl-tarjetas { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 4px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 6px; }
.tl-pie { padding: 4px 8px 8px; }
.tl-agregar, .tl-agregar-lista { width: 100%; text-align: left; border: 0; background: transparent; color: var(--pizarra); font-weight: 700; padding: 8px 10px; border-radius: 10px; box-shadow: none; justify-content: flex-start; }
.tl-agregar:hover { background: rgba(9, 30, 66, 0.07); color: var(--tinta); }
.tl-nueva-lista { background: rgba(255, 255, 255, 0.24); box-shadow: none; }
.tl-nueva-lista:has(.tl-composer) { background: var(--perla-suave); }
.tl-agregar-lista { color: #fff; padding: 12px 14px; }
.tl-agregar-lista:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tl-composer { display: grid; gap: 8px; }
.tl-composer.lista { padding: 8px; }
.tl-composer textarea { resize: none; border: 0; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25); font-size: 0.9rem; background: var(--hoja); }
.tl-composer-acciones { display: flex; align-items: center; gap: 6px; }
.tl-x { border: 0; background: transparent; box-shadow: none; font-size: 1.1rem; padding: 4px 10px; color: var(--pizarra); }
.tl-x:hover { color: var(--tinta); }

/* ---- Tarjetas ---- */
.tj { background: var(--hoja); border-radius: 10px; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.22), 0 0 1px rgba(9, 30, 66, 0.2); cursor: pointer; position: relative; flex: none;
  outline: 2px solid transparent; transition: outline-color 0.1s, box-shadow 0.15s; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-tema='oscuro'] .tj { background: #1d2337; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
.tj:hover { outline-color: var(--cobalto); }
.tj:focus-visible { outline-color: var(--cobalto); box-shadow: var(--foco); }
.tj.filtrada { display: none; }
.tj-portada { height: 32px; border-radius: 10px 10px 0 0; }
.tj-cuerpo { padding: 8px 10px 6px; display: grid; gap: 6px; }
.tj-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-etq { display: inline-block; min-width: 40px; height: 8px; border-radius: 999px; background: var(--etq); }
.tl-etq:not(.con-texto) { font-size: 0; color: transparent; overflow: hidden; vertical-align: middle; }
.tl-etq.con-texto { height: auto; min-height: 18px; padding: 1px 8px; color: var(--etq-texto); font-size: 0.72rem; font-weight: 800; line-height: 16px; }
.tl-etq.con-texto:empty { min-width: 40px; }
.tl-etq.vacia { background: var(--perla-suave); color: var(--pizarra); height: auto; padding: 1px 8px; font-size: 0.75rem; font-weight: 700; }
.tj-fila { display: flex; align-items: flex-start; gap: 6px; }
.tj-titulo { margin: 0; font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; flex: 1; }
.tj-check { flex: none; width: 0; height: 18px; padding: 0; margin-top: 1px; border: 2px solid var(--pizarra); border-radius: 50%; background: transparent; color: #fff; font-size: 0.7rem; font-weight: 900;
  display: inline-grid; place-items: center; box-shadow: none; opacity: 0; transition: width 0.15s, opacity 0.15s, margin 0.15s; overflow: hidden; margin-right: -6px; min-height: 0; }
.tj:hover .tj-check, .tj:focus-within .tj-check, .tj.completa .tj-check { width: 18px; opacity: 1; margin-right: 0; }
.tj-check:hover { border-color: var(--menta); }
.tj.completa .tj-check { background: var(--menta); border-color: var(--menta); }
.tj.completa .tj-titulo { color: var(--pizarra); }
@media (hover: none) { .tj-check { width: 18px; opacity: 0.55; margin-right: 0; } }
.tj-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tj-insignias { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tj-insignia { display: inline-flex; align-items: center; gap: 3px; font-size: 0.74rem; color: var(--pizarra); font-weight: 600; border-radius: 6px; white-space: nowrap; }
.tj-insignia.fecha { padding: 1px 6px; }
.tj-insignia.fecha.vencida { background: var(--error); color: #fff; }
.tj-insignia.fecha.pronto { background: var(--ambar); color: #2a1c00; }
.tj-insignia.fecha.hecha, .tj-insignia.hecha { background: var(--menta); color: #04261d; padding: 1px 6px; }
.tj-gente { display: flex; margin-left: auto; }
.tj-gente .ta-avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--hoja); }

/* Avatares */
.ta-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 0.72rem; font-weight: 800; flex: none; letter-spacing: 0; }
.ta-avatar.chico { width: 24px; height: 24px; font-size: 0.64rem; }
.ta-avatar.grande { width: 32px; height: 32px; font-size: 0.78rem; }
.ta-avatar.vacio { background: var(--perla); color: var(--pizarra); }
.ta-avatar.mas { background: rgba(255, 255, 255, 0.3); }

/* Arrastrar */
.tj-hueco { flex: none; border-radius: 10px; background: rgba(9, 30, 66, 0.1); }
[data-tema='oscuro'] .tj-hueco { background: rgba(255, 255, 255, 0.08); }
.tl-hueco { flex: none; width: 272px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.tj-fantasma, .tl-fantasma { position: fixed !important; left: 0; top: 0; z-index: 2500; pointer-events: none; margin: 0; will-change: transform;
  box-shadow: 0 18px 40px -8px rgba(9, 30, 66, 0.5) !important; outline: none !important; opacity: 0.97; }
.tl-fantasma { overflow: hidden; }
body.arrastrando-tareas, body.arrastrando-tareas * { cursor: grabbing !important; user-select: none !important; }

/* ---- Popovers ---- */
.tpop { position: fixed; z-index: 3000; background: var(--hoja); color: var(--tinta); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(9, 30, 66, 0.4), 0 0 0 1px rgba(9, 30, 66, 0.08);
  max-height: calc(100vh - 16px); overflow-y: auto; animation: tpop-entra 0.12s ease-out; }
@keyframes tpop-entra { from { opacity: 0; transform: translateY(-4px); } }
.tpop header { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 8px 8px 0; position: sticky; top: 0; background: var(--hoja); z-index: 1; }
.tpop h3 { margin: 0; text-align: center; font-size: 0.88rem; color: var(--pizarra); font-weight: 700; }
.tpop-cerrar, .tpop-volver { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 8px; color: var(--pizarra); font-size: 1rem; min-height: 0; }
.tpop-volver { font-size: 1.4rem; }
.tpop-cerrar:hover, .tpop-volver:hover { background: var(--perla-suave); color: var(--tinta); }
.tpop-cuerpo { padding: 8px 12px 12px; display: grid; gap: 6px; }
.tpop-cuerpo > input, .tpop-cuerpo > select, .tpop-cuerpo > textarea { width: 100%; }
.tpop-etiqueta { margin: 8px 0 0; font-size: 0.72rem; font-weight: 800; color: var(--pizarra); text-transform: none; }
.tpop-chico { font-size: 0.75rem; color: var(--pizarra); margin: 0 0 2px; }
.tpop-nota { margin: 4px 0; font-size: 0.78rem; color: var(--pizarra); }
.tpop hr { border: 0; border-top: 1px solid var(--perla); margin: 6px 0; width: 100%; }
.tpop .primario, .tpop .ancho { width: 100%; justify-content: center; }
.tpop-item { width: 100%; text-align: left; justify-content: flex-start; border: 0; background: transparent; box-shadow: none; padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; }
.tpop-item:hover { background: var(--perla-suave); }
.tpop-item.actual { color: var(--pizarra); }
.tpop-item.peligro { color: var(--error); }
.tpop-opcion { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; border-radius: 8px; font-weight: 500; font-size: 0.86rem; cursor: pointer; }
.tpop-opcion:hover { background: var(--perla-suave); }
.tpop-opcion input { width: auto; margin: 0; }
.tpop-persona { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; box-shadow: none; padding: 6px 8px; border-radius: 8px; }
.tpop-persona:hover, .tpop-persona.elegida { background: var(--perla-suave); }
.tpop-persona span { display: grid; font-weight: 700; font-size: 0.86rem; min-width: 0; }
.tpop-persona small { color: var(--pizarra); font-weight: 500; font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; }
.tpop-persona b { color: var(--cobalto); }
.tpop-etq-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.tpop-etq-fila:not(:has(input)) { grid-template-columns: 1fr auto; }
.tpop-etq-fila input { width: auto; margin: 0; }
.tpop-etq { display: block; width: 100%; min-height: 32px; border: 0; border-radius: 6px; background: var(--etq); color: var(--etq-texto); font-weight: 800; font-size: 0.85rem; text-align: left; padding: 6px 12px; box-shadow: none; }
.tpop-etq:hover { filter: brightness(0.95); background: var(--etq); color: var(--etq-texto); }
.tpop-editar { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--pizarra); border-radius: 8px; }
.tpop-editar:hover { background: var(--perla-suave); color: var(--tinta); }
.tpop-etq-preview { background: var(--perla-suave); border-radius: 10px; padding: 18px 22px; }
.tpop-colores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tpop-colores button { height: 32px; border: 0; border-radius: 6px; box-shadow: none; padding: 0; min-height: 0; outline: 2px solid transparent; outline-offset: 2px; }
.tpop-colores button.activo { outline-color: var(--cobalto); }
.tpop-colores.grandes button { height: 40px; }
.tpop-pie { display: flex; gap: 8px; margin-top: 6px; }
.tpop-pie .primario { width: auto; flex: 1; }
.tpop-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tpop-doble select, .tpop-doble input { width: 100%; }
.tpop-atajos { display: flex; flex-wrap: wrap; gap: 4px; }
.tpop-atajos button { font-size: 0.78rem; padding: 4px 8px; min-height: 0; }
.tpop-res { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; box-shadow: none; padding: 7px 8px; border-radius: 8px; }
.tpop-res:hover { background: var(--perla-suave); }
.tpop-res.elegida { background: var(--menta-suave); }
.tpop-res b { font-size: 0.86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpop-res small { grid-column: 2; color: var(--pizarra); font-size: 0.72rem; }
.tpop-archivo { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; background: var(--perla-suave); }
.tpop-archivo span, .tpop-archivo b { flex: 1; min-width: 0; font-size: 0.85rem; display: grid; }
.tpop-archivo small { color: var(--pizarra); font-size: 0.72rem; }
.tpop-archivo button { font-size: 0.76rem; padding: 4px 8px; min-height: 0; }
.tb-fondos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tb-fondos button { height: 34px; border: 0; border-radius: 8px; padding: 0; box-shadow: none; outline: 2px solid transparent; outline-offset: 2px; min-height: 0; }
.tb-fondos.grandes button { height: 52px; }
.tb-fondos button.activo { outline-color: var(--cobalto); }
.tb-preview { height: 110px; border-radius: 10px; display: flex; gap: 6px; padding: 12px; align-items: flex-start; justify-content: center; }
.tb-preview span { width: 54px; height: 70px; background: rgba(255, 255, 255, 0.85); border-radius: 6px; }
.tb-preview span:nth-child(2) { height: 50px; } .tb-preview span:nth-child(3) { height: 34px; }

/* ---- Ventana de la tarjeta ---- */
.tj-modal-fondo { position: fixed; inset: 0; z-index: 2000; background: rgba(9, 14, 34, 0.62); overflow-y: auto; padding: 48px 16px; opacity: 0; transition: opacity 0.18s; }
.tj-modal-fondo.abierta { opacity: 1; }
.tj-modal { position: relative; max-width: 780px; margin: 0 auto; background: var(--niebla); color: var(--tinta); border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55); transform: translateY(10px); transition: transform 0.2s; }
.tj-modal-fondo.abierta .tj-modal { transform: none; }
[data-tema='oscuro'] .tj-modal { background: #141a2e; }
.tjm-portada { height: 116px; border-radius: 16px 16px 0 0; position: relative; }
.tjm-boton-flotante { position: absolute; right: 12px; bottom: 10px; background: rgba(0, 0, 0, 0.32); color: #fff; border: 0; box-shadow: none; font-size: 0.8rem; padding: 5px 10px; }
.tjm-boton-flotante:hover { background: rgba(0, 0, 0, 0.45); color: #fff; }
.tjm-cerrar { position: absolute; right: 10px; top: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 0; background: rgba(9, 30, 66, 0.08); color: var(--tinta); box-shadow: none; font-size: 1rem; }
.tjm-portada + .tjm-cerrar { background: rgba(0, 0, 0, 0.3); color: #fff; }
.tjm-cerrar:hover { background: rgba(9, 30, 66, 0.16); }
.tjm-archivada { background: var(--ambar-suave); color: var(--ambar-texto); padding: 12px 56px 12px 20px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-radius: 16px 16px 0 0; }
.tjm-portada ~ .tjm-archivada { border-radius: 0; }
.tjm-archivada button { min-height: 0; padding: 4px 10px; font-size: 0.8rem; }
.tjm-cab { display: flex; gap: 12px; padding: 22px 56px 6px 22px; align-items: flex-start; }
.tjm-check { flex: none; width: 26px; height: 26px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--pizarra); background: transparent; padding: 0; color: #fff; font-weight: 900; box-shadow: none; min-height: 0; }
.tjm-check:hover { border-color: var(--menta); }
.tjm-check.hecha { background: var(--menta); border-color: var(--menta); }
.tjm-titulo-caja { flex: 1; min-width: 0; }
.tjm-titulo { min-height: 0; width: 100%; resize: none; overflow: hidden; border: 0; background: transparent; font: inherit; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; padding: 4px 8px; margin-left: -8px; border-radius: 8px; box-shadow: none; line-height: 1.3; color: inherit; }
.tjm-titulo:hover { background: rgba(9, 30, 66, 0.05); }
.tjm-titulo:focus { background: var(--hoja); box-shadow: var(--foco); outline: none; }
.tj-modal.completa .tjm-titulo { text-decoration: line-through; text-decoration-color: rgba(107, 116, 137, 0.6); }
.tjm-donde { margin: 2px 0 0; font-size: 0.85rem; color: var(--pizarra); }
.tjm-lista { border: 0; background: transparent; box-shadow: none; padding: 1px 6px; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; min-height: 0; }
.tjm-lista:hover { background: rgba(9, 30, 66, 0.07); }
.tjm-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; padding: 10px 22px 24px 60px; }
@media (max-width: 760px) {
  .tj-modal-fondo { padding: 0; }
  .tj-modal { border-radius: 0; min-height: 100%; }
  .tjm-portada { border-radius: 0; }
  .tjm-grilla { grid-template-columns: 1fr; padding: 10px 16px 24px; }
  .tjm-cab { padding: 18px 56px 4px 16px; }
  .tjm-lateral { order: -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tjm-lateral button { font-size: 0.78rem; padding: 7px 6px; flex-direction: column; align-items: center; text-align: center; gap: 2px; justify-content: center; }
  .tjm-lateral .tjm-rotulo { margin: 4px 0 0; }
  .tjm-lateral .tjm-rotulo, .tjm-creada { grid-column: 1 / -1; }
}
.tjm-rotulo { margin: 0 0 6px; font-size: 0.74rem; font-weight: 800; color: var(--pizarra); }
.tjm-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 4px; }
.tjm-meta:empty { display: none; }
.tjm-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tjm-persona, .tjm-etq { border: 0; padding: 0; background: transparent; box-shadow: none; min-height: 0; border-radius: 50%; }
.tjm-etq { border-radius: 6px; }
.tjm-etq .tl-etq { min-height: 32px; line-height: 30px; padding: 0 12px; font-size: 0.85rem; border-radius: 6px; }
.tjm-mas { width: 32px; height: 32px; border-radius: 50%; padding: 0; border: 0; background: rgba(9, 30, 66, 0.07); box-shadow: none; font-weight: 800; color: var(--pizarra); min-height: 0; }
.tjm-etq ~ .tjm-mas { border-radius: 6px; }
.tjm-mas:hover { background: rgba(9, 30, 66, 0.14); color: var(--tinta); }
.tjm-hecha input { width: 18px; height: 18px; margin: 0; }
.tjm-fecha { border: 0; background: rgba(9, 30, 66, 0.07); box-shadow: none; font-weight: 700; font-size: 0.85rem; padding: 6px 10px; display: inline-flex; gap: 8px; align-items: center; min-height: 0; }
.tjm-fecha:hover { background: rgba(9, 30, 66, 0.14); }
.tjm-estado { font-size: 0.72rem; padding: 1px 6px; border-radius: 4px; font-weight: 800; }
.tjm-estado.vencida { background: var(--error); color: #fff; } .tjm-estado.pronto { background: var(--ambar); color: #2a1c00; } .tjm-estado.hecha { background: var(--menta); color: #04261d; }
.tjm-seccion { margin-top: 22px; }
.tjm-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; margin-left: -38px; }
.tjm-seccion-cab h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tjm-seccion-cab h3 > span:first-child { width: 26px; text-align: center; color: var(--pizarra); flex: none; }
.tjm-seccion-cab button { font-size: 0.8rem; padding: 5px 10px; min-height: 0; background: rgba(9, 30, 66, 0.07); border: 0; box-shadow: none; margin-left: 4px; }
.tjm-seccion-cab button:hover { background: rgba(9, 30, 66, 0.14); }
@media (max-width: 760px) { .tjm-seccion-cab { margin-left: 0; } }
.tjm-desc { cursor: pointer; padding: 2px 0; font-size: 0.92rem; }
.tjm-desc :first-child { margin-top: 0; }
.tjm-desc h4 { margin: 10px 0 4px; }
.tjm-desc ul, .tjm-desc ol, .tjm-comentario ul, .tjm-comentario ol { margin: 4px 0; padding-left: 22px; }
.tjm-desc p, .tjm-comentario p { margin: 0 0 6px; }
.tjm-desc-vacia { width: 100%; min-height: 56px; text-align: left; align-items: flex-start; justify-content: flex-start; background: rgba(9, 30, 66, 0.06); border: 0; box-shadow: none; color: var(--pizarra); font-weight: 600; padding: 10px 12px; }
.tjm-desc-vacia:hover { background: rgba(9, 30, 66, 0.11); }
.tjm-desc-edit { width: 100%; min-height: 120px; resize: vertical; }
.tjm-acciones-fila { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.tjm-vinculos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tjm-vinculos li { display: flex; align-items: center; gap: 6px; }
.tjm-vinculos a { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--hoja); border: 1px solid var(--perla); color: inherit; text-decoration: none; }
.tjm-vinculos a:hover { border-color: var(--cobalto); text-decoration: none; }
.tjm-vinculos .ico { width: 34px; height: 34px; border-radius: 8px; background: var(--cobalto-suave); display: grid; place-items: center; }
.tjm-vinculos .txt { display: grid; min-width: 0; }
.tjm-vinculos .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.tjm-vinculos small { color: var(--pizarra); font-size: 0.74rem; }
.tjm-vinculos .ir { font-size: 0.78rem; font-weight: 800; color: var(--cobalto); }
.tjm-quitar { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--pizarra); border-radius: 8px; flex: none; min-height: 0; opacity: 0.6; }
.tjm-quitar:hover { background: var(--error-suave); color: var(--error); opacity: 1; }
.tjm-ck-titulo { cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.tjm-ck-titulo:hover { background: rgba(9, 30, 66, 0.06); }
.tjm-progreso { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: center; margin: 0 0 6px -38px; font-size: 0.72rem; color: var(--pizarra); font-weight: 700; }
.barra-ck { height: 8px; background: rgba(9, 30, 66, 0.1); border-radius: 999px; overflow: hidden; }
.barra-ck span { display: block; height: 100%; background: var(--cobalto); border-radius: 999px; transition: width 0.3s; }
.barra-ck span.completo { background: var(--menta); }
@media (max-width: 760px) { .tjm-progreso { margin-left: 0; } }
.tjm-items { list-style: none; margin: 0 0 0 -38px; padding: 0; display: grid; gap: 2px; }
@media (max-width: 760px) { .tjm-items { margin-left: 0; } }
.tjm-items li { display: grid; grid-template-columns: 34px 1fr auto; align-items: flex-start; padding: 4px 0; border-radius: 8px; }
.tjm-items li:hover { background: rgba(9, 30, 66, 0.04); }
.tjm-items label { display: grid; place-items: center; margin: 0; padding-top: 2px; }
.tjm-items input { width: 16px; height: 16px; margin: 0; }
.tjm-item-texto { padding: 2px 6px; cursor: text; font-size: 0.9rem; border-radius: 6px; overflow-wrap: anywhere; }
.tjm-items li.hecho .tjm-item-texto { text-decoration: line-through; color: var(--pizarra); }
.tjm-items .tjm-quitar { opacity: 0; }
.tjm-items li:hover .tjm-quitar, .tjm-items .tjm-quitar:focus { opacity: 0.7; }
.tjm-item-nuevo textarea, .tjm-en-linea, .tjm-comentar textarea { min-height: 0; }
.tjm-item-nuevo textarea, .tjm-en-linea { width: 100%; resize: none; overflow: hidden; font-size: 0.9rem; padding: 6px 10px; }
.tjm-item-nuevo { margin-top: 4px; }
.tjm-comentar { display: grid; grid-template-columns: 32px 1fr; gap: 8px; margin-left: -38px; }
@media (max-width: 760px) { .tjm-comentar, .tjm-actividad { margin-left: 0 !important; } }
.tjm-comentar textarea { width: 100%; resize: none; overflow: hidden; background: var(--hoja); }
.tjm-comentar-acciones { display: none; }
.tjm-comentar.activo .tjm-comentar-acciones { display: flex; }
.tjm-actividad { list-style: none; margin: 14px 0 0 -38px; padding: 0; display: grid; gap: 14px; }
.tjm-actividad li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.tjm-actividad li p { margin: 0; font-size: 0.86rem; }
.tjm-actividad li.actividad p { color: var(--tinta); }
.tjm-actividad li.actividad .ta-avatar { width: 28px; height: 28px; }
.tjm-comentario { background: var(--hoja); border: 1px solid var(--perla); border-radius: 10px; padding: 8px 12px; margin-top: 4px; font-size: 0.9rem; overflow-wrap: anywhere; }
.tjm-com-acc { font-size: 0.76rem !important; margin-top: 4px !important; color: var(--pizarra); }
.tjm-com-acc button { border: 0; background: transparent; box-shadow: none; padding: 0; font-size: 0.76rem; color: var(--pizarra); text-decoration: underline; min-height: 0; }
.tjm-com-edit { width: 100%; }
.tjm-lateral { display: flex; flex-direction: column; gap: 6px; }
.tjm-lateral .tjm-rotulo { margin-top: 8px; }
.tjm-lateral button { justify-content: flex-start; text-align: left; border: 0; background: rgba(9, 30, 66, 0.07); box-shadow: none; padding: 7px 10px; font-weight: 600; font-size: 0.86rem; display: flex; gap: 8px; }
.tjm-lateral button:hover { background: rgba(9, 30, 66, 0.14); }
.tjm-lateral button span { width: 18px; text-align: center; }
.tjm-lateral button.peligro { background: var(--error-suave); color: var(--error); }
[data-tema='oscuro'] .tjm-lateral button, [data-tema='oscuro'] .tjm-seccion-cab button, [data-tema='oscuro'] .tjm-mas, [data-tema='oscuro'] .tjm-fecha, [data-tema='oscuro'] .tjm-desc-vacia { background: rgba(255, 255, 255, 0.07); }
[data-tema='oscuro'] .tjm-lateral button:hover, [data-tema='oscuro'] .tjm-seccion-cab button:hover { background: rgba(255, 255, 255, 0.13); }
.tjm-creada { font-size: 0.74rem; margin: 12px 0 0; }

/* ---- Nueva tarea rápida (desde cualquier pantalla) ---- */
.tr-rapida { max-width: 520px; margin: 8vh auto 0; background: var(--hoja); color: var(--tinta); border-radius: 16px; padding: 18px 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55); display: grid; gap: 12px;
  transform: translateY(10px); transition: transform 0.2s; }
.tj-modal-fondo.abierta .tr-rapida { transform: none; }
.tr-rapida header { display: flex; align-items: center; justify-content: space-between; }
.tr-rapida h2 { margin: 0; font-size: 1.1rem; }
.tr-rapida textarea { width: 100%; resize: none; font-size: 1rem; font-weight: 600; }
.tr-campos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tr-campos select, .tr-campos input { width: 100%; }
.tr-campos label { font-size: 0.78rem; }
@media (max-width: 520px) { .tr-campos { grid-template-columns: 1fr; } .tr-rapida { margin: 0; border-radius: 0; min-height: 100%; } }
.tr-vinculo { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 0.88rem; background: var(--perla-suave); padding: 8px 10px; border-radius: 10px; }
.tr-vinculo input { width: auto; margin: 0; }
.tr-rapida footer { display: flex; justify-content: flex-end; gap: 8px; }
.aviso-enlace { color: inherit; font-weight: 800; text-decoration: underline; margin-left: 6px; }

/* Botón flotante ＋ Tarea */
.tarea-rapida { position: fixed; right: 22px; bottom: 22px; z-index: 900; height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--tinta); color: var(--hoja); box-shadow: 0 10px 28px -8px rgba(20, 26, 51, 0.55); display: inline-flex; align-items: center; gap: 0; font-weight: 800;
  transition: transform 0.15s, gap 0.2s, padding 0.2s; }
.tarea-rapida span { font-size: 1.3rem; line-height: 1; }
.tarea-rapida b { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.25s; }
.tarea-rapida:hover, .tarea-rapida:focus-visible { transform: translateY(-2px); gap: 6px; background: var(--cobalto); color: #fff; }
.tarea-rapida:hover b, .tarea-rapida:focus-visible b { max-width: 80px; }
.tarea-rapida[hidden] { display: none; }
/* Si hay un aviso abajo a la derecha, el botón sube para no taparlo */
#avisos:not(:empty) ~ .tarea-rapida { bottom: 92px; }
[data-tema='oscuro'] .tarea-rapida { background: var(--cobalto); color: #fff; }
@media (max-width: 760px) { .tarea-rapida { right: 14px; bottom: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .tj-modal, .tr-rapida, .tpop, .tb-tile { transition: none; animation: none; }
}