/* AIM OFFICE · AIM Tablas. Solo variables del estilo elegido (estilo.css y aim-app.css); los colores
   de las opciones y de las bases llegan como --c y se mezclan con el fondo para servir en todos los
   estilos, también en el oscuro. Prefijo tb-. */
.ap[data-app="tablas"] .ap-cuerpo { display: flex; flex-direction: column; overflow: hidden; }
.tb-inicio { overflow-y: auto; }
.ap[data-app="tablas"] .ap-cuerpo > .ap-pagina { overflow-y: auto; height: 100%; max-width: 1180px; width: 100%; }
.ap-sr, .tb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-nota { display: flex; align-items: center; gap: 8px; color: var(--tinta-3); font-size: 14px; }
.tb-nota svg { width: 18px; height: 18px; }

/* Inicio */
.tb-seccion { display: flex; flex-direction: column; gap: 12px; }
.tb-seccion-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tb-seccion-cab h2 { font: 750 20px/1.2 var(--titulo); }
.tb-bases, .tb-plantillas, .tb-lista-papelera { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tb-tarjeta-base { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; transition: border-color .12s, box-shadow .12s; }
.tb-tarjeta-base:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--linea)); box-shadow: 0 6px 20px color-mix(in srgb, var(--tinta) 8%, transparent); }
.tb-tarjeta-abrir { display: flex; align-items: center; gap: 14px; padding: 16px 48px 16px 16px; color: var(--tinta); text-decoration: none; min-height: 84px; border-radius: 14px; }
.tb-tarjeta-menu { position: absolute; top: 8px; right: 6px; }
.tb-icono-base { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c, var(--ap-acento)); color: #fff; flex: 0 0 auto; }
.tb-icono-base svg { width: 24px; height: 24px; stroke: #fff; }
.tb-icono-peq { width: 30px; height: 30px; border-radius: 8px; }
.tb-icono-peq svg { width: 18px; height: 18px; }
.tb-tarjeta-texto { display: flex; flex-direction: column; min-width: 0; gap: 2px; text-align: left; }
.tb-tarjeta-texto b { font: 650 16px/1.25 var(--cuerpo); overflow: hidden; text-overflow: ellipsis; }
.tb-tarjeta-texto small { color: var(--tinta-3); font-size: 13.5px; line-height: 1.35; }
.tb-chip-ejemplo { align-self: flex-start; margin-top: 4px; font-size: 12px; }
.tb-plantillas li { display: flex; }
.tb-plantilla { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); color: var(--tinta); cursor: pointer; font: inherit; text-align: left; }
.tb-plantilla:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--linea)); }
.tb-plantilla .tb-icono-base { width: 38px; height: 38px; border-radius: 10px; }
.tb-plantillas-dialogo { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tb-bienvenida { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tb-bienvenida h3 { font: 700 18px/1.25 var(--titulo); }
.tb-fila-papelera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; }
.tb-lista-papelera { grid-template-columns: 1fr; }
.tb-fila-papelera .tb-tarjeta-texto { flex: 1; }
.tb-crear-opciones { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tb-crear-op { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--blanco); color: var(--tinta); cursor: pointer; font: inherit; text-align: left; }
.tb-crear-op:hover { border-color: var(--ap-acento); background: var(--ap-suave); }
.tb-crear-op small { color: var(--tinta-3); }
.tb-subtitulo { font: 650 15px/1.3 var(--cuerpo); margin-top: 6px; }
.tb-iconos { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-icono-op { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--blanco); color: var(--tinta-2); display: grid; place-items: center; cursor: pointer; }
.tb-icono-op[aria-checked="true"] { border-color: var(--ap-acento); box-shadow: 0 0 0 2px var(--ap-acento); color: var(--tinta); }
.tb-paleta { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-muestra { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--blanco); background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--linea-2); padding: 0; }
.tb-muestra[aria-checked="true"] { box-shadow: 0 0 0 2px var(--tinta); }
.tb-muestra-fija { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: 0 0 auto; }

/* Pantalla de una base */
.tb-base { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tb-cab-base { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: color-mix(in srgb, var(--c) 9%, var(--blanco)); border-bottom: 1px solid color-mix(in srgb, var(--c) 25%, var(--linea)); flex-wrap: wrap; }
.tb-volver { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--tinta-2); }
.tb-volver:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.tb-nombre-base { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: 750 18px/1.2 var(--titulo) !important; color: var(--tinta); padding: 6px 8px; border-radius: 8px; cursor: pointer; max-width: 40vw; }
.tb-nombre-base span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-nombre-base:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.tb-nombre-base svg { width: 16px; height: 16px; }
.tb-modos { display: flex; gap: 2px; margin-left: 10px; background: color-mix(in srgb, var(--tinta) 6%, transparent); padding: 3px; border-radius: 10px; }
.tb-modo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.tb-modo svg { width: 17px; height: 17px; }
.tb-modo[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 15%, transparent); }
.tb-guardado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-3); padding: 0 6px; }
.tb-guardado svg { width: 17px; height: 17px; }
.tb-guardado.es-error { color: var(--error-tinta); }

/* Pestañas de tablas */
.tb-tablas { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px 0; background: color-mix(in srgb, var(--c) 9%, var(--blanco)); border-bottom: 1px solid var(--linea); min-height: 42px; }
.tb-pestanas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.tb-pestana-grupo { display: flex; align-items: center; border-radius: 9px 9px 0 0; border: 1px solid transparent; border-bottom: 0; }
.tb-pestana-grupo.activa { background: var(--blanco); border-color: var(--linea); margin-bottom: -1px; padding-bottom: 1px; }
.tb-pestana { display: block; padding: 8px 12px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; border-radius: 9px 9px 0 0; }
.tb-pestana:hover { color: var(--tinta); }
.tb-pestana-grupo.activa .tb-pestana { color: var(--tinta); padding-right: 2px; }
.tb-pestana-menu { border: 0; background: none; color: var(--tinta-3); padding: 4px 6px; margin-right: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.tb-pestana-menu:hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--tinta); }
.tb-pestana-menu svg { width: 15px; height: 15px; }
.tb-anadir-tabla { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--tinta-2); padding: 8px 10px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; border-radius: 8px; margin-bottom: 2px; }
.tb-anadir-tabla:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.tb-anadir-tabla svg { width: 16px; height: 16px; }
.tb-soltar { outline: 2px dashed var(--ap-acento); outline-offset: -2px; }

/* Zona de trabajo: lista de vistas + vista */
.tb-trabajo { flex: 1; min-height: 0; display: flex; position: relative; background: var(--blanco); }
.tb-vistas { width: 0; overflow: hidden; flex: 0 0 auto; border-right: 1px solid transparent; background: var(--papel); transition: width .18s; display: flex; flex-direction: column; }
.tb-trabajo.con-vistas .tb-vistas { width: 250px; border-right-color: var(--linea); overflow-y: auto; padding: 8px; }
.tb-vistas-cab { display: flex; align-items: center; justify-content: space-between; }
.tb-cerrar-vistas { display: none; }
.tb-lista-vistas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.tb-vista-fila { display: flex; align-items: center; border-radius: 8px; }
.tb-vista-fila:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.tb-vista-fila.activa { background: var(--ap-suave); }
.tb-vista-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px; color: var(--tinta-2); text-decoration: none; font-size: 14.5px; }
.tb-vista-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-vista-fila.activa .tb-vista-item { color: var(--tinta); font-weight: 650; }
.tb-vista-item svg { width: 18px; height: 18px; color: var(--ap-acento); }
.tb-vista-menu { border: 0; background: none; color: var(--tinta-3); width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.tb-vista-fila:hover .tb-vista-menu, .tb-vista-fila.activa .tb-vista-menu, .tb-vista-menu:focus-visible, .tb-vista-menu[aria-expanded="true"] { opacity: 1; }
.tb-vista-menu svg { width: 16px; height: 16px; }
.tb-crear-vistas { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.tb-crear-vista { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 8px; border-radius: 8px; color: var(--tinta-2); cursor: pointer; font: 14.5px/1.3 var(--cuerpo); text-align: left; }
.tb-crear-vista:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); color: var(--tinta); }
.tb-crear-vista span { flex: 1; }
.tb-crear-vista svg { width: 18px; height: 18px; }
.tb-crear-vista .tb-mas { width: 15px; height: 15px; color: var(--tinta-3); }
.tb-zona-vista { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Barra de la vista */
.tb-barra { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--linea); background: var(--blanco); overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.tb-barra::-webkit-scrollbar { display: none; }
.tb-btn-barra { min-height: 34px !important; padding: 5px 9px !important; font: 600 14px/1.2 var(--cuerpo) !important; color: var(--tinta-2) !important; white-space: nowrap; gap: 6px !important; }
.tb-btn-barra svg { width: 17px; height: 17px; }
.tb-btn-barra:hover { color: var(--tinta) !important; }
.tb-nombre-vista { color: var(--tinta) !important; }
.tb-nombre-vista svg:first-child { color: var(--ap-acento); }
.tb-nombre-vista svg:last-child { width: 14px; height: 14px; }
.tb-btn-barra.tb-activo { background: var(--ap-suave) !important; color: var(--tinta) !important; }
.tb-btn-barra[aria-expanded="true"] { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.tb-sep { width: 1px; height: 20px; background: var(--linea); margin: 0 4px; flex: 0 0 auto; }
.tb-buscar { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 9px; padding: 0 8px; height: 34px; color: var(--tinta-3); background: var(--blanco); flex: 0 0 auto; }
.tb-buscar:focus-within { border-color: var(--ap-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-acento) 20%, transparent); }
.tb-buscar svg { width: 16px; height: 16px; }
.tb-buscar-campo { border: 0; outline: none; background: none; width: 150px; font: 14px/1.2 var(--cuerpo); color: var(--tinta); }
.tb-buscar.con-texto { border-color: var(--ap-acento); }
.tb-vista { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--papel); }

/* Paneles flotantes */
.tb-pop { position: fixed; z-index: 70; min-width: 220px; max-width: calc(100vw - 16px); max-height: min(70vh, 640px); overflow: auto; padding: 12px; border-radius: 12px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 16px 44px rgba(10, 14, 24, .22); display: flex; flex-direction: column; gap: 10px; }
.tb-pop:focus { outline: none; }
.tb-pop-titulo { font: 700 15px/1.3 var(--cuerpo); }
.tb-pop-menu { padding: 6px; gap: 0; min-width: 230px; }
.tb-pop-menu hr { border: 0; border-top: 1px solid var(--linea); margin: 5px 4px; width: auto; }
.tb-pop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tb-pop .ap-menu-item svg { color: var(--tinta-3); }
.tb-filtro { display: flex; flex-direction: column; gap: 8px; }
.tb-filtro-grupo { padding: 8px; border: 1px solid var(--linea); border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, var(--blanco)); flex: 1; min-width: 0; }
.tb-filtro-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-filtro-fila > .ap-campo, .tb-filtro-fila select { min-height: 36px; padding: 5px 8px; font-size: 14px !important; width: auto; }
.tb-filtro-donde { width: 62px; font-size: 13.5px; color: var(--tinta-3); flex: 0 0 auto; }
.tb-filtro-conj { width: 62px !important; }
.tb-filtro-campo { max-width: 170px; }
.tb-filtro-valor { flex: 1; min-width: 140px; }
.tb-filtro-valor.ap-fila { gap: 6px; flex-wrap: nowrap; }
.tb-filtro-valor .ap-campo { min-height: 36px; padding: 5px 8px; font-size: 14px !important; }
.tb-filtro-n { width: 76px !important; }
.tb-filtro-hueco { flex: 1; }
.tb-filtro-acciones { gap: 4px; }
.tb-orden { display: flex; flex-direction: column; gap: 8px; }
.tb-orden-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-orden-fila .ap-campo { width: auto; min-height: 36px; padding: 5px 8px; font-size: 14px !important; max-width: 180px; }
.tb-ocultos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow: auto; }
.tb-oculto-fila { display: flex; align-items: center; gap: 2px; }
.tb-oculto-fila .ap-boton { min-height: 32px; width: 32px; }
.tb-interruptor { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; min-width: 0; }
.tb-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tb-interruptor-pista { width: 30px; height: 18px; border-radius: 9px; background: var(--linea-2); position: relative; flex: 0 0 auto; transition: background .12s; }
.tb-interruptor-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); transition: transform .12s; }
.tb-interruptor input:checked + .tb-interruptor-pista { background: var(--ap-acento); }
.tb-interruptor input:checked + .tb-interruptor-pista::after { transform: translateX(12px); }
.tb-interruptor input:focus-visible + .tb-interruptor-pista { outline: 3px solid var(--ap-acento); outline-offset: 2px; }
.tb-etq-campo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 14.5px; }
.tb-etq-campo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-etq-campo svg { width: 16px; height: 16px; color: var(--tinta-3); }
.tb-principal-nota { font-size: 13px; }
.tb-radios { display: flex; flex-direction: column; gap: 8px; }
.tb-regla-color { border: 1px solid var(--linea); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tb-regla-color .tb-muestra { width: 22px; height: 22px; }

/* Chips */
.tb-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 9px; border-radius: 999px; font: 600 13px/1.6 var(--cuerpo); background: color-mix(in srgb, var(--c, var(--tinta-3)) 22%, var(--blanco)); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--c, var(--tinta-3)) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-chip-enlace { --c: var(--ap-acento); border-radius: 6px; background: color-mix(in srgb, var(--ap-acento) 10%, var(--blanco)); }
.tb-chips { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; max-width: 100%; }
.tb-chips > .tb-chip { flex: 0 0 auto; max-width: 180px; }
.tb-chips-elegir { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-chip-elegible { cursor: pointer; font-size: 13.5px; padding: 3px 10px; background: var(--blanco); }
.tb-chip-elegible[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--ap-acento)) 30%, var(--blanco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--ap-acento)) 70%, transparent); }
.tb-chip-campo { --c: var(--tinta-3); background: var(--blanco); cursor: pointer; }
.tb-chip-campo svg { width: 14px; height: 14px; }
.tb-chip-quitar { padding-right: 2px; }
.tb-chip-quitar button { border: 0; background: none; color: inherit; cursor: pointer; padding: 1px; display: grid; place-items: center; border-radius: 50%; }
.tb-chip-quitar button svg { width: 13px; height: 13px; }
.tb-chip-abrir { font: inherit !important; text-decoration: underline; text-underline-offset: 2px; }

/* Cuadrícula */
.tb-rejilla { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--blanco); outline: none; overscroll-behavior: contain; }
.tb-rejilla:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ap-acento) 50%, transparent); }
.tb-lienzo { position: relative; min-width: 100%; }
.tb-cab { position: sticky; top: 0; z-index: 4; display: flex; height: 34px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border-bottom: 1px solid var(--linea-2); }
.tb-cuerpo { position: relative; }
.tb-fila { position: absolute; left: 0; top: 0; display: flex; min-width: 100%; will-change: transform; }
.tb-celda { flex: 0 0 auto; height: 100%; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 14px; color: var(--tinta); background: var(--blanco); position: relative; }
.tb-celda.fija, .tb-num { position: sticky; z-index: 2; }
.tb-num { left: 0; width: 66px; padding: 0 4px 0 6px; justify-content: space-between; gap: 2px; color: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; z-index: 3; }
.tb-celda.ultima-fija { border-right: 2px solid var(--linea-2); }
.tb-celda.derecha { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.tb-celda.alta { align-items: flex-start; padding-top: 6px; white-space: normal; }
.tb-celda.alta .tb-texto { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; line-height: 1.4; }
.tb-celda.alta .tb-chips { flex-wrap: wrap; }
.tb-texto { overflow: hidden; text-overflow: ellipsis; }
.tb-fila:hover .tb-celda { background: color-mix(in srgb, var(--tinta) 2.5%, var(--blanco)); }
.tb-fila.marcada .tb-celda { background: color-mix(in srgb, var(--ap-acento) 7%, var(--blanco)); }
.tb-fila.activa .tb-num { color: var(--tinta); }
.tb-celda.en-rango { background: color-mix(in srgb, var(--ap-acento) 11%, var(--blanco)) !important; }
.tb-celda.en-rango.r-arriba { box-shadow: inset 0 2px 0 var(--ap-acento); }
.tb-celda.en-rango.r-abajo { box-shadow: inset 0 -2px 0 var(--ap-acento); }
.tb-celda.en-rango.r-arriba.r-abajo { box-shadow: inset 0 2px 0 var(--ap-acento), inset 0 -2px 0 var(--ap-acento); }
.tb-celda.en-rango.r-izq::before, .tb-celda.en-rango.r-der::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ap-acento); }
.tb-celda.en-rango.r-izq::before { left: 0; }
.tb-celda.en-rango.r-der::after { right: 0; }
.tb-celda.activa { box-shadow: inset 0 0 0 2px var(--ap-acento) !important; z-index: 2; }
.tb-celda.fija.activa { z-index: 3; }
.tb-celda.en-relleno { background: color-mix(in srgb, var(--ap-acento) 6%, var(--blanco)) !important; outline: 1px dashed var(--ap-acento); outline-offset: -2px; }
.tb-relleno { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; background: var(--ap-acento); border: 1px solid var(--blanco); cursor: ns-resize; z-index: 3; }
.tb-num.con-color::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 0 3px 3px 0; background: var(--fila); }
.tb-fila[style*="--fila"] .tb-celda:not(.tb-num) { background: color-mix(in srgb, var(--fila) 7%, var(--blanco)); }
.tb-marcar { width: 15px; height: 15px; margin: 0; accent-color: var(--ap-acento); display: none; }
.tb-fila:hover .tb-marcar, .tb-fila.marcada .tb-marcar, .tb-cabnum .tb-marcar { display: block; }
.tb-fila:hover .tb-num-texto, .tb-fila.marcada .tb-num-texto { display: none; }
.tb-num-texto { padding-left: 3px; }
.tb-expandir { border: 0; background: none; color: var(--tinta-3); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; opacity: 0; padding: 0; }
.tb-expandir svg { width: 14px; height: 14px; }
.tb-fila:hover .tb-expandir, .tb-fila.activa .tb-expandir { opacity: 1; }
.tb-expandir:hover { background: color-mix(in srgb, var(--ap-acento) 15%, transparent); color: var(--ap-acento); }
.tb-celda-cab { height: 34px; font: 600 13px/1.2 var(--cuerpo); color: var(--tinta-2); gap: 6px; padding: 0 4px 0 8px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); cursor: default; user-select: none; border-bottom: 0; }
.tb-celda-cab svg { width: 15px; height: 15px; color: var(--tinta-3); flex: 0 0 auto; }
.tb-celda-cab.activa { background: color-mix(in srgb, var(--ap-acento) 12%, var(--blanco)); color: var(--tinta); }
.tb-celda-cab.principal .tb-cab-nombre { font-weight: 750; }
.tb-cab-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tb-cab-menu { border: 0; background: none; color: var(--tinta-3); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; padding: 0; opacity: 0; }
.tb-celda-cab:hover .tb-cab-menu, .tb-cab-menu[aria-expanded="true"] { opacity: 1; }
.tb-cab-menu:hover { background: color-mix(in srgb, var(--tinta) 9%, transparent); }
.tb-asa { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.tb-asa:hover { background: var(--ap-acento); }
.tb-cabnum { height: 34px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border-bottom: 0; justify-content: center; }
.tb-cab-mas { justify-content: flex-start; padding: 0 4px; border-right: 0; }
.tb-boton-mas { border: 0; background: none; color: var(--tinta-2); width: 34px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.tb-boton-mas:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); }
.tb-marca-col { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ap-acento); z-index: 6; pointer-events: none; }
.tb-fantasma { position: fixed; z-index: 80; padding: 6px 10px; border-radius: 8px; background: var(--blanco); border: 1px solid var(--ap-acento); box-shadow: 0 8px 24px rgba(10, 14, 24, .2); font: 600 13px/1.2 var(--cuerpo); color: var(--tinta); pointer-events: none; }
.tb-fila-anadir .tb-celda, .tb-anadir-reg { border-bottom: 1px solid var(--linea); }
.tb-anadir-reg { position: sticky; left: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; border: 0; border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-2); cursor: pointer; font: 14px/1.2 var(--cuerpo); }
.tb-anadir-reg:hover { background: color-mix(in srgb, var(--ap-acento) 6%, var(--blanco)); color: var(--tinta); }
.tb-anadir-reg svg { width: 16px; height: 16px; }
.tb-fila-grupo .tb-celda { background: color-mix(in srgb, var(--tinta) 5%, var(--blanco)); border-right: 0; }
.tb-fila-grupo.nivel-1 .tb-celda { background: color-mix(in srgb, var(--tinta) 3%, var(--blanco)); }
.tb-fila-grupo.nivel-2 .tb-celda { background: color-mix(in srgb, var(--tinta) 1.5%, var(--blanco)); }
.tb-grupo-celda { position: sticky; left: 0; z-index: 3; padding: 0; }
.tb-grupo-etq { display: flex; align-items: center; gap: 8px; height: 100%; min-width: 0; overflow: hidden; }
.tb-grupo-campo { font-size: 12px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 650; }
.tb-grupo-valor { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tb-grupo-n { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.tb-plegar { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--tinta-2); flex: 0 0 auto; }
.tb-plegar:hover { background: color-mix(in srgb, var(--tinta) 9%, transparent); }
.tb-plegar svg { width: 16px; height: 16px; }
.tb-subtotal { font-size: 13px; justify-content: flex-end; color: var(--tinta-2); }
.tb-subtotal small, .tb-pie-celda small { color: var(--tinta-3); font-size: 11.5px; margin-right: 4px; }
.tb-pie { position: sticky; bottom: 0; z-index: 4; display: flex; height: 34px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border-top: 1px solid var(--linea-2); }
.tb-pie-num { width: 66px; z-index: 5; font-size: 11.5px; white-space: normal; line-height: 1.1; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); }
.tb-pie-celda { border: 0; border-right: 1px solid var(--linea); background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); font: 13px/1.2 var(--cuerpo); color: var(--tinta-2); justify-content: flex-end; cursor: pointer; }
.tb-pie-celda:hover .tb-pie-pista, .tb-pie-celda:focus-visible .tb-pie-pista { opacity: 1; }
.tb-pie-pista { opacity: 0; color: var(--tinta-3); }
.tb-pie-celda.con-valor b { color: var(--tinta); }
.tb-barra-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; background: var(--ap-suave); border-bottom: 1px solid var(--linea); }
.tb-barra-sel .ap-boton { min-height: 32px; padding: 4px 10px; font-size: 14px !important; }
.tb-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--linea-2); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.tb-check.si { background: var(--ok-tinta, var(--ap-acento)); border-color: transparent; color: var(--blanco); }
.tb-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.tb-c-casilla { justify-content: center; }
.tb-estrellas { display: inline-flex; gap: 1px; color: var(--linea-2); }
.tb-estrellas .tb-estrella svg { width: 16px; height: 16px; }
.tb-estrella.llena { color: #e8a317; }
.tb-estrella.llena svg { fill: currentColor; }
.tb-estrellas-grandes { gap: 4px; }
.tb-estrellas-grandes .tb-estrella { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--linea-2); border-radius: 6px; }
.tb-estrellas-grandes .tb-estrella.llena { color: #e8a317; }
.tb-estrellas-grandes .tb-estrella svg { width: 26px; height: 26px; }
.tb-adjuntos { display: inline-flex; gap: 4px; align-items: center; overflow: hidden; }
.tb-mini { border-radius: 4px; border: 1px solid var(--linea); object-fit: cover; aspect-ratio: 1; background: var(--papel); flex: 0 0 auto; }
.tb-mini-archivo { display: inline-grid; place-items: center; font: 700 9px/1 var(--cuerpo); color: var(--tinta-2); background: color-mix(in srgb, var(--tinta) 6%, var(--blanco)); }
.tb-usuario { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tb-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--cuerpo); background: var(--ap-suave); color: var(--tinta); flex: 0 0 auto; }
.tb-enlace { color: var(--enlace); overflow: hidden; text-overflow: ellipsis; }
.tb-error { color: var(--error-tinta); font-weight: 650; font-size: 13px; cursor: help; }
.tb-c-adjuntos.tb-soltar { outline: 2px dashed var(--ap-acento); outline-offset: -3px; }

/* Editores */
.tb-editor { position: fixed; z-index: 75; background: var(--blanco); box-shadow: 0 0 0 2px var(--ap-acento), 0 10px 30px rgba(10, 14, 24, .25); border-radius: 3px; display: flex; flex-direction: column; }
.tb-editor-campo { flex: 1; width: 100%; border: 0; outline: none; padding: 6px 8px; font: 14px/1.4 var(--cuerpo); background: var(--blanco); color: var(--tinta); }
.tb-editor-largo .tb-editor-campo { min-height: 140px; resize: vertical; }
.tb-editor-pista { font-size: 12px; color: var(--tinta-3); padding: 4px 8px; border-top: 1px solid var(--linea); }
.tb-pop-opciones { padding: 8px; gap: 6px; }
.tb-op-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow: auto; }
.tb-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.tb-op.activo { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.tb-op-marca { width: 18px; display: grid; place-items: center; color: var(--ap-acento); flex: 0 0 auto; }
.tb-op-vacio { padding: 6px 8px; }
.tb-enlaces-elegidos { flex-wrap: wrap; min-height: 28px; }
.tb-enlaces-lista { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border: 1px solid var(--linea); border-radius: 10px; }
.tb-enlace-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.tb-enlace-op:last-child { border-bottom: 0; }
.tb-enlace-op:hover, .tb-enlace-op:focus { background: color-mix(in srgb, var(--tinta) 4%, transparent); outline: none; }
.tb-enlace-op.marcado { background: var(--ap-suave); }
.tb-enlace-texto { display: flex; flex-direction: column; min-width: 0; }
.tb-enlace-texto small { color: var(--tinta-3); }
.tb-lista-adjuntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tb-adjunto { display: flex; align-items: center; gap: 10px; }
.tb-adjunto .tb-tarjeta-texto { flex: 1; }
.tb-adjunto-abrir { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); display: grid; place-items: center; overflow: hidden; cursor: pointer; padding: 0; flex: 0 0 auto; color: var(--tinta-2); }
.tb-adjunto-abrir img { width: 100%; height: 100%; object-fit: cover; }
.tb-vista-previa { max-width: 100%; max-height: 66vh; object-fit: contain; margin: 0 auto; border-radius: 8px; }
.tb-vista-pdf { width: 100%; height: 66vh; border: 1px solid var(--linea); border-radius: 8px; }
.tb-vista-archivo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; color: var(--tinta-3); }
.tb-vista-archivo svg { width: 48px; height: 48px; }

/* Editor de campos */
.tb-opciones-campo { display: flex; flex-direction: column; gap: 12px; }
.tb-editor-opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.tb-opcion-fila { display: flex; align-items: center; gap: 6px; }
.tb-opcion-fila .ap-campo { min-height: 36px; padding: 5px 9px; }
.tb-opcion-fila .ap-boton { min-height: 34px; width: 34px; }
.tb-aviso-conv { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--aviso-fondo); color: var(--aviso-tinta); border: 1px solid var(--aviso-borde); }
.tb-detalles summary { cursor: pointer; color: var(--tinta-2); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.tb-formula { font: 14.5px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace !important; min-height: 92px; }
.tb-formula-estado { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); }
.tb-formula-estado.es-error { background: var(--error-fondo); color: var(--error-tinta); }
.tb-formula-estado.es-ok { background: var(--ok-fondo); color: var(--ok-tinta); }
.tb-formula-estado svg { width: 18px; height: 18px; margin-top: 1px; }
.tb-formula-marca { display: block; margin-top: 4px; font: 13px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; color: var(--tinta-2); }
.tb-formula-marca mark { background: color-mix(in srgb, var(--pdf) 30%, transparent); color: var(--tinta); border-bottom: 2px solid var(--pdf); }
.tb-ayuda-formula { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; }
.tb-ayuda-formula summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.tb-ayuda-cols { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
@media (min-width: 700px) { .tb-ayuda-cols { grid-template-columns: 1fr 1.4fr; } }
.tb-ayuda-campos { display: flex; flex-wrap: wrap; gap: 5px; max-height: 190px; overflow: auto; }
.tb-ayuda-funciones { max-height: 190px; overflow: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.tb-ayuda-botones { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-fn { border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta); border-radius: 6px; padding: 2px 7px; font: 600 12.5px/1.5 ui-monospace, Consolas, monospace; cursor: pointer; }
.tb-fn:hover, .tb-fn:focus-visible { border-color: var(--ap-acento); background: var(--ap-suave); }
.tb-ayuda-detalle { margin-top: 8px; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--tinta) 3%, var(--blanco)); font-size: 14px; min-height: 48px; }
.tb-ayuda-detalle code { font: 600 13px/1.4 ui-monospace, Consolas, monospace; color: var(--tinta); }

/* Ficha de registro */
.tb-ficha { width: min(1040px, calc(100vw - 24px)); padding: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.tb-ficha[open] { display: flex; }
.tb-ficha-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.tb-ficha-nav { display: flex; gap: 2px; }
.tb-ficha-tit { flex: 1; min-width: 0; }
.tb-ficha-tit small { color: var(--tinta-3); font-size: 13px; }
.tb-ficha-tit h2 { font: 750 20px/1.2 var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ficha-cuerpo { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .tb-ficha-cuerpo { grid-template-columns: 1fr 320px; } .tb-actividad { border-left: 1px solid var(--linea); } }
.tb-ficha-campos { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.tb-ficha-campo { display: flex; flex-direction: column; gap: 6px; }
.tb-ficha-campo.oculto-en-vista { opacity: .7; }
.tb-etq-ficha { display: flex; align-items: center; gap: 6px; }
.tb-etq-ficha svg { width: 15px; height: 15px; color: var(--tinta-3); }
.tb-solo-lectura { min-height: 40px; padding: 8px 11px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-con-sufijo { display: flex; align-items: center; gap: 6px; }
.tb-sufijo { color: var(--tinta-3); font-weight: 600; }
.tb-casilla-ficha { font-weight: 600; }
.tb-adjuntos-ficha { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; border: 1px dashed var(--linea-2); border-radius: 10px; }
.tb-adjunto-ficha { position: relative; width: 96px; display: flex; flex-direction: column; gap: 4px; }
.tb-adjunto-ficha .tb-adjunto-abrir { width: 96px; height: 80px; }
.tb-adjunto-ficha small { font-size: 12px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-adjunto-quitar { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--blanco); color: var(--tinta-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tb-adjunto-quitar svg { width: 13px; height: 13px; }
.tb-adjunto-anadir { width: 96px; height: 80px; border: 1px dashed var(--linea-2); border-radius: 8px; background: none; color: var(--tinta-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 12px; }
.tb-enlaces-ficha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tb-enlace-anadir { min-height: 32px; padding: 4px 10px; font-size: 14px !important; }
.tb-actividad { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--tinta) 2%, var(--blanco)); }
.tb-actividad h3 { font: 700 16px/1.3 var(--titulo); }
.tb-lista-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tb-act { display: flex; flex-direction: column; gap: 3px; font-size: 14px; border-left: 2px solid var(--linea-2); padding-left: 10px; }
.tb-act small { color: var(--tinta-3); font-size: 12.5px; }
.tb-act-valores { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-act-valores svg { width: 14px; height: 14px; color: var(--tinta-3); }
.tb-act-antes { text-decoration: line-through; color: var(--tinta-3); overflow-wrap: anywhere; }
.tb-act-despues { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }

/* Formulario: editor y página */
.tb-vista-formulario { overflow: auto; }
.tb-form-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--linea); background: var(--blanco); }
.tb-form-nota { font-size: 13.5px; flex: 1; min-width: 220px; }
.tb-form-editor { flex: 1; min-height: 0; display: flex; }
.tb-form-lateral { width: 270px; flex: 0 0 auto; padding: 12px; border-right: 1px solid var(--linea); background: var(--blanco); overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.tb-form-lienzo { flex: 1; overflow: auto; padding: 20px 16px 60px; }
.tb-form-tarjeta, .tb-fp-tarjeta { max-width: 680px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 0 22px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.tb-form-banda { height: 10px; margin: 0 -22px 6px; background: var(--c, var(--ap-acento)); }
.tb-form-titulo-ed { font: 750 24px/1.2 var(--titulo); border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin: 0 -6px; background: none; color: var(--tinta); }
.tb-form-titulo-ed:hover, .tb-form-titulo-ed:focus { border-color: var(--linea-2); outline: none; }
.tb-form-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-form-campo-ed { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tb-form-campo-cab { display: flex; align-items: center; gap: 6px; }
.tb-form-campo-cab .ap-boton { min-height: 32px; width: 32px; }
.tb-form-muestra { pointer-events: none; opacity: .75; }
.tb-form-campo-ed .ap-fila .ap-campo { flex: 1; min-width: 160px; min-height: 36px; padding: 5px 9px; font-size: 14px !important; }
.tb-obligatorio { font-size: 12px; font-weight: 700; color: var(--aviso-tinta); background: var(--aviso-fondo); padding: 1px 8px; border-radius: 999px; }
.tb-form-vacio { text-align: center; padding: 24px; }
.tb-form-dialogo { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--c) 10%, var(--papel)); color: var(--tinta); overflow: auto; }
.tb-form-dialogo::backdrop { background: var(--papel); }
.tb-fp-cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 650; position: sticky; top: 0; background: color-mix(in srgb, var(--c) 10%, var(--papel)); z-index: 2; }
.tb-fp-caja { padding: 12px 16px 24px; }
.tb-fp-tarjeta { box-shadow: 0 12px 40px color-mix(in srgb, var(--tinta) 10%, transparent); }
.tb-fp-tarjeta h1 { font: 800 clamp(24px, 4vw, 32px)/1.15 var(--titulo); }
.tb-fp-desc { color: var(--tinta-2); white-space: pre-wrap; }
.tb-fp-campo { display: flex; flex-direction: column; gap: 6px; }
.tb-fp-etq { font-weight: 650; }
.tb-fp-ob { color: var(--error-tinta); }
.tb-fp-pie { display: flex; justify-content: flex-start; padding-top: 6px; }
.tb-fp-enviar { min-width: 140px; }
.tb-fp-gracias { align-items: center; text-align: center; padding: 36px 22px; }
.tb-fp-gracias h2 { font: 750 22px/1.25 var(--titulo); }
.tb-fp-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fondo); color: var(--ok-tinta); }
.tb-fp-ok svg { width: 30px; height: 30px; stroke-width: 2.4; }
.tb-fp-marca { text-align: center; font-size: 13px; color: var(--tinta-3); padding: 0 16px 24px; }
.tb-fp-marca a { color: var(--tinta-2); }

/* Controles de las vistas (kanban, calendario…) */
.tb-ctls-vista { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--linea); background: var(--blanco); }
.tb-ctl-vista { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-2); font-weight: 600; }
.tb-ctl-vista .ap-campo { width: auto; min-height: 34px; padding: 4px 8px; font-size: 14px !important; max-width: 200px; }
.tb-ctls-vista .ap-boton { min-height: 34px; padding: 4px 10px; font-size: 14px !important; }
.tb-ctls-vista .ap-solo-icono { width: 34px; padding: 0; }

/* Tarjetas */
.tb-tarjeta { list-style: none; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 6%, transparent); }
.tb-tarjeta:hover { border-color: var(--linea-2); box-shadow: 0 6px 18px color-mix(in srgb, var(--tinta) 9%, transparent); }
.tb-tarjeta.con-color { border-left: 4px solid var(--fila); }
.tb-tarjeta.arrastrando { opacity: .5; }
.tb-portada { height: 130px; background: color-mix(in srgb, var(--tinta) 5%, var(--blanco)); display: grid; place-items: center; overflow: hidden; }
.tb-portada img { width: 100%; height: 100%; object-fit: cover; }
.tb-portada span { font: 800 30px/1 var(--titulo); color: var(--tinta-3); }
.tb-portada.sin-imagen { height: 54px; }
.tb-portada.sin-imagen span { font-size: 18px; }
.tb-tarjeta-titulo { border: 0; background: none; text-align: left; padding: 10px 12px 4px; cursor: pointer; color: var(--tinta); font: inherit; }
.tb-tarjeta-titulo b { font-weight: 700; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-tarjeta-titulo:focus-visible { outline: 3px solid var(--ap-acento); outline-offset: -3px; }
.tb-tarjeta-campos { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tb-tarjeta-campo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-tarjeta-campo small { color: var(--tinta-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.tb-tarjeta-campo > :not(small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tarjeta-campo .tb-chips { flex-wrap: wrap; }
.tb-tarjeta-mover { position: absolute; top: 6px; right: 6px; width: 30px !important; min-height: 30px !important; opacity: 0; background: var(--blanco) !important; }
.tb-tarjeta:hover .tb-tarjeta-mover, .tb-tarjeta-mover:focus-visible, .tb-tarjeta-mover[aria-expanded="true"] { opacity: 1; }
.tb-mas-tarjetas { align-self: center; margin: 8px auto; }

/* Kanban */
.tb-kanban { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px; overflow-x: auto; align-items: flex-start; }
.tb-kanban-col { flex: 0 0 280px; max-height: 100%; display: flex; flex-direction: column; background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); border-radius: 12px; border: 1px solid var(--linea); }
.tb-kanban-cab { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
.tb-kanban-cab .ap-boton { min-height: 30px; width: 30px; }
.tb-kanban-n { font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tb-kanban-tarjetas { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; }
.tb-kanban-col.tb-soltar { outline: 2px dashed var(--ap-acento); outline-offset: -2px; background: var(--ap-suave); }

/* Galería */
.tb-vista-galeria { overflow-y: auto; }
.tb-galeria { list-style: none; margin: 0; padding: 14px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-content: start; }
.tb-galeria .tb-tarjeta { cursor: default; }

/* Calendario */
.tb-vista-calendario { overflow: auto; }
.tb-cal-titulo { font: 750 18px/1.2 var(--titulo); min-width: 170px; }
.tb-cal { display: flex; flex-direction: column; flex: 1; min-height: 560px; background: var(--blanco); }
.tb-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linea); }
.tb-cal-cab { padding: 6px 8px; font: 650 12.5px/1.2 var(--cuerpo); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .03em; }
.tb-cal-dias { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); }
.tb-cal-dia { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.tb-cal-dia.fuera { background: color-mix(in srgb, var(--tinta) 3%, var(--blanco)); }
.tb-cal-dia.fuera .tb-cal-num span { color: var(--tinta-3); }
.tb-cal-dia.hoy .tb-cal-num span { background: var(--ap-acento); color: var(--ap-sobre, #fff); }
.tb-cal-dia.tb-soltar { background: var(--ap-suave); }
.tb-cal-num { display: flex; align-items: center; justify-content: space-between; }
.tb-cal-num span { font: 650 13px/1 var(--cuerpo); min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; padding: 0 4px; }
.tb-cal-mas { border: 0; background: none; color: var(--tinta-3); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; opacity: 0; padding: 0; }
.tb-cal-mas svg { width: 15px; height: 15px; }
.tb-cal-dia:hover .tb-cal-mas, .tb-cal-mas:focus-visible { opacity: 1; }
.tb-cal-reg { display: flex; align-items: center; gap: 3px; border: 0; border-left: 3px solid var(--fila, var(--c, var(--ap-acento))); background: color-mix(in srgb, var(--fila, var(--c, var(--ap-acento))) 14%, var(--blanco)); color: var(--tinta); border-radius: 4px; padding: 2px 6px; font: 12.5px/1.35 var(--cuerpo); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 22px; }
.tb-cal-reg span { overflow: hidden; text-overflow: ellipsis; }
.tb-cal-reg small { color: var(--tinta-3); flex: 0 0 auto; }
.tb-cal-mas-regs { border: 0; background: none; color: var(--tinta-2); font: 600 12px/1.2 var(--cuerpo); text-align: left; padding: 2px 4px; cursor: pointer; }
.tb-cal-lista { display: flex; flex-direction: column; gap: 4px; }
.tb-cal-sin { padding: 8px 12px; }
.tb-agenda { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.tb-agenda-dia h3 { font: 650 14px/1.3 var(--cuerpo); margin-bottom: 6px; }
.tb-agenda-regs { display: flex; flex-direction: column; gap: 4px; }
.tb-agenda-regs .tb-cal-reg { min-height: 36px; font-size: 14px; }

/* Cronograma */
.tb-cr { flex: 1; min-height: 0; overflow: auto; background: var(--blanco); position: relative; }
.tb-cr-lienzo { position: relative; }
.tb-cr-cab { position: sticky; top: 0; z-index: 4; height: 56px; background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border-bottom: 1px solid var(--linea-2); }
.tb-cr-esquina { position: sticky; left: 0; z-index: 5; height: 56px; display: flex; align-items: flex-end; padding: 8px 10px; font-size: 12.5px; color: var(--tinta-3); background: color-mix(in srgb, var(--tinta) 4%, var(--blanco)); border-right: 1px solid var(--linea-2); }
.tb-cr-escala { position: absolute; top: 0; height: 56px; }
.tb-cr-mes { position: absolute; top: 4px; font: 650 12.5px/1.2 var(--cuerpo); color: var(--tinta-2); padding-left: 6px; border-left: 1px solid var(--linea-2); white-space: nowrap; height: 50px; }
.tb-cr-marca { position: absolute; top: 30px; height: 26px; font-size: 11.5px; color: var(--tinta-3); padding: 4px 0 0 4px; border-left: 1px solid var(--linea); white-space: nowrap; overflow: hidden; }
.tb-cr-marca.finde { color: var(--tinta-3); }
.tb-cr-hoy, .tb-cr-hoy-cab { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pdf); z-index: 1; }
.tb-cr-fondo { position: absolute; top: 56px; }
.tb-cr-finde { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.tb-cr-filas { position: relative; }
.tb-cr-fila { position: absolute; left: 0; top: 0; right: 0; display: flex; border-bottom: 1px solid var(--linea); }
.tb-cr-etq { position: sticky; left: 0; z-index: 3; border: 0; border-right: 1px solid var(--linea-2); background: var(--blanco); text-align: left; padding: 0 10px; font: 600 13.5px/1.2 var(--cuerpo); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex: 0 0 auto; }
.tb-cr-etq:hover { background: color-mix(in srgb, var(--ap-acento) 7%, var(--blanco)); }
.tb-cr-pista { position: absolute; top: 0; bottom: 0; }
.tb-cr-barra { position: absolute; top: 7px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--fila, var(--c, var(--ap-acento))) 30%, var(--blanco)); border: 1px solid color-mix(in srgb, var(--fila, var(--c, var(--ap-acento))) 70%, transparent); color: var(--tinta); display: flex; align-items: center; cursor: grab; touch-action: none; user-select: none; }
.tb-cr-barra.moviendo { cursor: grabbing; box-shadow: 0 6px 16px rgba(10, 14, 24, .2); z-index: 2; }
.tb-cr-barra.corta-izq { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tb-cr-barra.corta-der { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tb-cr-texto { padding: 0 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tb-cr-asa { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tb-cr-asa.izq { left: -2px; }
.tb-cr-asa.der { right: -2px; }

/* Paneles */
.tb-zona-paneles { flex: 1; min-height: 0; display: flex; background: var(--papel); }
.tb-paneles-lista { width: 250px !important; border-right: 1px solid var(--linea) !important; padding: 8px; overflow-y: auto !important; gap: 6px; }
.tb-panel-zona { flex: 1; min-width: 0; overflow: auto; padding: 18px; }
.tb-panel { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.tb-panel-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-panel-cab h2 { font: 750 24px/1.2 var(--titulo); }
.tb-panel-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-elemento { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tb-elemento.ancho-2 { grid-column: span 2; }
.tb-elemento.ancho-3 { grid-column: 1 / -1; }
.tb-panel-rejilla.editando .tb-elemento { border-style: dashed; border-color: var(--linea-2); }
.tb-el-cab { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tb-el-cab h3 { flex: 1; font: 700 15.5px/1.3 var(--cuerpo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-el-herr { display: flex; align-items: center; gap: 2px; }
.tb-el-herr .ap-boton { min-height: 30px; width: 30px; }
.tb-el-ancho { min-height: 30px !important; padding: 2px 6px !important; font-size: 13px !important; width: auto !important; }
.tb-el-asa { cursor: grab; color: var(--tinta-3); display: grid; place-items: center; width: 24px; }
.tb-el-cifra { display: flex; flex-direction: column; gap: 4px; }
.tb-el-cifra .ap-cifra { font-size: 34px; color: var(--tinta); }
.tb-el-texto p + p { margin-top: 8px; }
.tb-el-lista .ap-tabla th, .tb-el-lista .ap-tabla td { padding: 7px 10px; }
.tb-el-lista .ap-tabla td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-grafico { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-grafico-circular { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.tb-svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
.tb-svg-circular { width: 170px; flex: 0 0 auto; }
.tb-svg-rejilla { stroke: var(--linea); stroke-width: 1; }
.tb-svg-eje { fill: var(--tinta-3); font: 11px var(--cuerpo); }
.tb-svg-valor { fill: var(--tinta-2); font: 600 11px var(--cuerpo); }
.tb-svg-linea { fill: none; stroke: var(--c, var(--ap-acento)); stroke-width: 2.5; stroke-linejoin: round; }
.tb-svg-area { fill: color-mix(in srgb, var(--c, var(--ap-acento)) 14%, transparent); }
.tb-svg-punto { fill: var(--blanco); stroke: var(--c, var(--ap-acento)); stroke-width: 2; }
.tb-svg-sector { stroke: var(--blanco); stroke-width: 2; }
.tb-svg-total { fill: var(--tinta); font: 750 17px var(--titulo); }
.tb-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; font-size: 13.5px; }
.tb-leyenda li { display: flex; align-items: center; gap: 8px; }
.tb-leyenda-etq { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-leyenda small { color: var(--tinta-3); width: 40px; text-align: right; }

/* Importar */
.tb-imp-hoja { display: flex; flex-direction: column; gap: 8px; }
.tb-imp-nombre { max-width: 280px; min-height: 36px; padding: 5px 9px; font-weight: 650; }
.tb-imp-tabla td .ap-campo { min-height: 34px; padding: 3px 8px; font-size: 14px !important; }
.tb-imp-ejemplo { color: var(--tinta-3); font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Móvil */
@media (max-width: 760px) {
  .tb-cab-base { padding: 4px 8px; gap: 4px; }
  .tb-nombre-base { font-size: 16px !important; max-width: calc(100vw - 230px); }
  .tb-cab-base .ap-boton.ap-solo-icono { width: 34px; min-height: 34px; }
  .tb-modos { margin-left: 0; order: 5; width: 100%; justify-content: stretch; }
  .tb-modo { flex: 1; justify-content: center; }
  .tb-guardado span { display: none; }
  .tb-trabajo.con-vistas .tb-vistas { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); box-shadow: 8px 0 30px rgba(10, 14, 24, .25); }
  .tb-cerrar-vistas { display: inline-flex; }
  .tb-btn-barra span { display: none; }
  .tb-nombre-vista span { display: inline; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .tb-buscar-campo { width: 90px; }
  .tb-form-editor { flex-direction: column; }
  .tb-form-lateral { width: auto; max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--linea); }
  .tb-panel-rejilla { grid-template-columns: 1fr; }
  .tb-elemento.ancho-2, .tb-elemento.ancho-3 { grid-column: auto; }
  .tb-zona-paneles { flex-direction: column; }
  .tb-paneles-lista { width: auto !important; max-height: 30vh; border-right: 0 !important; border-bottom: 1px solid var(--linea); }
  .tb-panel-zona { padding: 12px; }
  .tb-kanban-col { flex-basis: 84vw; }
  .tb-filtro-donde { width: auto; }
  .tb-ficha-cab { padding: 10px; }
}
/* Pantallas de 360 px: cuadrícula, ficha del registro y constructor de fórmulas sin scroll horizontal de la página */
@media (max-width: 420px) {
  .tb-num { width: 52px; padding: 0 2px 0 4px; }
  .tb-celda { padding: 0 6px; }
  .tb-celda-cab { padding: 0 2px 0 6px; }
  .tb-ficha { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .tb-ficha-tit h2 { font-size: 17px; }
  .tb-ficha-campos { padding: 12px 12px 20px; gap: 14px; }
  .tb-actividad { padding: 12px; }
  .tb-ficha-nav .ap-boton { min-width: 40px; min-height: 40px; }
  .tb-adjunto-ficha, .tb-adjunto-ficha .tb-adjunto-abrir, .tb-adjunto-anadir { width: 84px; }
  .tb-formula { min-height: 120px; font-size: 16px !important; }
  .tb-formula-estado, .tb-ayuda-detalle { overflow-wrap: anywhere; }
  .tb-formula-marca, .tb-ayuda-detalle code { overflow-wrap: anywhere; word-break: break-word; }
  .tb-ayuda-campos, .tb-ayuda-funciones { max-height: 150px; }
  .tb-fn { padding: 6px 9px; min-height: 36px; }
  .tb-ayuda-formula { padding: 8px; }
  .tb-pop, .tb-pop-menu { min-width: 0; max-width: calc(100vw - 16px); }
  .tb-editor-opciones { max-height: 32vh; }
  .tb-opcion-fila { flex-wrap: wrap; }
  .tb-opcion-fila .ap-campo { min-width: 0; flex: 1 1 120px; }
  .tb-form-campo-ed .ap-fila .ap-campo { min-width: 0; }
  .tb-form-tarjeta, .tb-fp-tarjeta { padding: 0 14px 18px; }
  .tb-form-banda { margin: 0 -14px 6px; }
  .tb-imp-nombre { max-width: 100%; }
  .tb-imp-ejemplo { max-width: 120px; }
  .tb-buscar-campo { width: 72px; }
  .tb-kanban-col { flex-basis: 88vw; }
}
@media (prefers-reduced-motion: reduce) { .tb-vistas { transition: none; } }
@media print { .tb-cab-base, .tb-tablas, .tb-barra, .tb-vistas { display: none !important; } }

/* Elementos flotantes fuera de .ap: mismas variables de acento que la app */
.tb-pop, .tb-editor, .tb-form-dialogo, .tb-ficha, .tb-fantasma { --ap-acento: var(--acento, #1d4ed8); --ap-suave: color-mix(in srgb, var(--ap-acento) 12%, var(--blanco)); --ap-sobre: var(--sobre-acento, #fff); }
.tb-form-dialogo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tb-form-dialogo :focus-visible { outline: 3px solid var(--ap-acento); outline-offset: 2px; }
.tb-form-dialogo button, .tb-form-dialogo input, .tb-form-dialogo select, .tb-form-dialogo textarea { font: inherit; color: inherit; }
.ap .tb-svg, .tb-svg { width: 100%; height: auto; max-height: 300px; fill: currentColor; stroke: none; overflow: visible; }
.ap .tb-svg-circular, .tb-svg-circular { width: 170px; height: 170px; }
.tb-kanban-tarjetas > .tb-tarjeta { flex: 0 0 auto; }
.tb-invalido { text-decoration: underline wavy var(--error-tinta, #b4232a); text-underline-offset: 3px; }