/* Tornillo Suelto · componentes v1.2.0
   Requiere tokens.css antes que este archivo, y Material Symbols Outlined para .ts-icono.
   El marcado de cada componente está en COMPONENTES.md. Las reglas de uso, en CLAUDE.md. */
.ts-btn {
  font: 600 var(--ts-t-sm)/1 var(--ts-font-texto);
  padding: 12px 18px; border-radius: var(--ts-r-boton); border: 1px solid var(--ts-tinta);
  background: var(--ts-tinta); color: var(--ts-papel); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: .01em;
  transition: transform .12s, background .12s, color .12s;
}
.ts-btn:hover { transform: translateY(-1px); }
.ts-btn:active { transform: translateY(0); }
.ts-btn--sec { background: var(--ts-papel); color: var(--ts-tinta); }
.ts-btn--sec:hover { background: var(--ts-superficie); }
.ts-btn--fantasma { background: transparent; color: var(--ts-tinta); border-color: transparent; text-decoration: underline; text-decoration-color: var(--ts-borde); text-underline-offset: 4px; }
.ts-btn--fantasma:hover { text-decoration-color: var(--ts-tinta); }
.ts-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
/* botón con contorno de color separado: el único sitio donde el color toca un botón */
.ts-btn--raya { box-shadow: 0 0 0 2px var(--ts-papel), 0 0 0 3px var(--c, var(--ts-rojo)); }
.ts-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 var(--ts-t-xs)/1 var(--ts-font-texto); letter-spacing: .02em;
  padding: 6px 10px; border: 1px solid var(--ts-borde); border-radius: var(--ts-r-pill);
  background: var(--ts-papel); color: var(--ts-tinta);
}
.ts-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ts-tinta-3)); flex: none; }
.ts-campo { display: grid; gap: 6px; }
.ts-campo label { font-size: var(--ts-t-sm); font-weight: 600; }
.ts-campo .ayuda { font-size: var(--ts-t-xs); color: var(--ts-tinta-3); }
.ts-campo .error { font-size: var(--ts-t-xs); color: var(--ts-rojo-texto); font-weight: 600; }
.ts-input {
  font: 400 var(--ts-t-md)/1.4 var(--ts-font-texto); color: var(--ts-tinta);
  background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2);
  padding: 10px 12px; width: 100%;
}
.ts-input:hover { border-color: var(--ts-tinta-3); }
.ts-input:focus, .ts-input:focus-visible { outline: none; border-color: var(--ts-tinta); }
.ts-input.invalido { border-color: var(--ts-rojo); }
.ts-tabs { display: flex; gap: var(--ts-e-6); border-bottom: 1px solid var(--ts-borde); overflow-x: auto; }
.ts-tab { font: 600 var(--ts-t-sm)/1 var(--ts-font-texto); background: none; border: 0; padding: 12px 0; color: var(--ts-tinta-3); cursor: pointer; position: relative; white-space: nowrap; }
.ts-tab[aria-selected="true"] { color: var(--ts-tinta); }
.ts-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ts-tinta); border-radius: 2px; }
.ts-aviso { padding: var(--ts-e-3) var(--ts-e-4); background: var(--ts-elevado); border: var(--ts-borde-fino) solid var(--c); border-radius: var(--ts-r-2); font-size: var(--ts-t-sm); }
.ts-aviso b { display: block; }
.ts-aviso span { color: var(--ts-tinta-2); }
.ts-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ts-t-sm); cursor: pointer; }
.ts-switch input { appearance: none; width: 38px; height: 22px; border-radius: var(--ts-r-pill); border: 1px solid var(--ts-tinta); background: var(--ts-papel); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ts-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ts-tinta); transition: transform .15s; }
.ts-switch input:checked { background: var(--ts-tinta); }
.ts-switch input:checked::after { transform: translateX(16px); background: var(--ts-papel); }
.ts-progreso { display: grid; gap: 6px; font-size: var(--ts-t-xs); color: var(--ts-tinta-2); }
.ts-progreso .barra { height: 6px; background: var(--ts-superficie); border-radius: var(--ts-r-pill); overflow: hidden; border: 1px solid var(--ts-borde); }
.ts-progreso .barra i { display: block; height: 100%; background: var(--c); }
.ts-progreso .fila-p { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
/* Tarjeta de experimento: componente ejemplo del laboratorio */
.ts-tarjeta { border: var(--ts-borde-fino) solid var(--c, var(--ts-borde)); border-radius: var(--ts-r-2); background: var(--ts-elevado); overflow: hidden; display: grid; }
.ts-tarjeta .cuerpo { padding: var(--ts-e-4) var(--ts-e-6) var(--ts-e-6); display: grid; gap: var(--ts-e-3); }
.ts-tarjeta .id { font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); color: var(--ts-tinta-3); }
.ts-tarjeta h3 { font-size: var(--ts-t-lg); font-weight: 800; font-stretch: 108%; }
.ts-tarjeta p { color: var(--ts-tinta-2); font-size: var(--ts-t-sm); }
.ts-tarjeta .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ts-e-3); border-top: 1px solid var(--ts-borde); padding-top: var(--ts-e-3); }
.ts-tarjeta .dato b { display: block; font-size: var(--ts-t-lg); font-variant-numeric: tabular-nums; font-weight: 700; }
.ts-tarjeta .dato span { font-size: var(--ts-t-xs); color: var(--ts-tinta-3); }
.ts-tabla { width: 100%; border-collapse: collapse; font-size: var(--ts-t-sm); min-width: 520px; }
.ts-tabla th { text-align: left; font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-tinta-3); padding: 12px 16px; border-bottom: 1px solid var(--ts-tinta); white-space: nowrap; }
.ts-tabla td { padding: 12px 16px; border-bottom: 1px solid var(--ts-borde); }
.ts-tabla tr:last-child td { border-bottom: 0; }
.ts-tabla td.num { font-variant-numeric: tabular-nums; text-align: right; }
.ts-tabla th.num { text-align: right; }
/* Tabla completa: barra, orden, selección, paginación */
.ts-tabla-caja { border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); background: var(--ts-elevado); overflow: hidden; min-width: 0; }
.ts-tabla-barra { display: flex; flex-wrap: wrap; gap: var(--ts-e-3); align-items: center; justify-content: space-between; padding: var(--ts-e-3) var(--ts-e-4); border-bottom: 1px solid var(--ts-borde); }
.ts-tabla-barra .ts-input { max-width: 260px; padding: 8px 12px; font-size: var(--ts-t-sm); }
.ts-tabla-caja .tabla-scroll { overflow-x: auto; }
.ts-tabla-caja .ts-tabla th { background: var(--ts-elevado); }
.ts-tabla tbody tr { transition: background .12s; }
.ts-tabla tbody tr:hover { background: var(--ts-papel); }
.ts-tabla tbody tr[aria-selected="true"] td { background: var(--ts-papel); box-shadow: inset 0 1px 0 var(--ts-azul), inset 0 -1px 0 var(--ts-azul); }
.ts-tabla tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 0 1px 0 var(--ts-azul), inset 0 -1px 0 var(--ts-azul), inset 1px 0 0 var(--ts-azul); }
.ts-tabla tbody tr[aria-selected="true"] td:last-child { box-shadow: inset 0 1px 0 var(--ts-azul), inset 0 -1px 0 var(--ts-azul), inset -1px 0 0 var(--ts-azul); }
.ts-tabla td.casilla, .ts-tabla th.casilla { width: 44px; padding-right: 0; }
.ts-orden { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ts-orden:hover { color: var(--ts-tinta); }
.ts-orden .flecha { font-size: 10px; color: var(--ts-tinta-3); }
.ts-tabla-pie { display: flex; flex-wrap: wrap; gap: var(--ts-e-3); align-items: center; justify-content: space-between; padding: var(--ts-e-3) var(--ts-e-4); border-top: 1px solid var(--ts-borde); font-size: var(--ts-t-xs); color: var(--ts-tinta-2); font-variant-numeric: tabular-nums; }
.ts-btn--chico { padding: 8px 12px; font-size: var(--ts-t-xs); }
.ts-vacio { display: grid; justify-items: center; text-align: center; gap: var(--ts-e-2); padding: var(--ts-e-12) var(--ts-e-6); }
.ts-vacio .icono { width: 44px; height: 44px; border: 1px dashed var(--ts-tinta-3); border-radius: var(--ts-r-2); display: grid; place-items: center; color: var(--ts-tinta-3); margin-bottom: var(--ts-e-2); }
.ts-vacio b { font-size: var(--ts-t-md); }
.ts-vacio span { font-size: var(--ts-t-sm); color: var(--ts-tinta-2); max-width: 40ch; }
.ts-vacio .ts-btn { margin-top: var(--ts-e-2); }
/* Casillas */
.ts-casilla { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ts-t-sm); cursor: pointer; }
.ts-casilla input { appearance: none; margin: 0; width: 18px; height: 18px; border: 1px solid var(--ts-tinta); border-radius: 4px; background: var(--ts-elevado); display: grid; place-items: center; cursor: pointer; flex: none; }
.ts-casilla input[type="radio"] { border-radius: 50%; }
.ts-casilla input:checked { background: var(--ts-tinta); }
.ts-casilla input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--ts-papel); border-bottom: 2px solid var(--ts-papel); transform: rotate(-45deg) translate(1px, -1px); }
.ts-casilla input[type="radio"]:checked { background: var(--ts-elevado); }
.ts-casilla input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ts-tinta); }
.ts-casilla input:indeterminate { background: var(--ts-tinta); }
.ts-casilla input:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--ts-papel); }
.ts-modal { position: relative; width: 100%; max-width: 420px; background: var(--ts-elevado); color: var(--ts-tinta); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); display: grid; }
.ts-modal--peligro { border-color: var(--ts-rojo); }
.ts-modal .cabeza { display: flex; align-items: start; gap: var(--ts-e-3); padding: var(--ts-e-6) var(--ts-e-6) 0; }
.ts-modal h3 { font-size: var(--ts-t-lg); font-weight: 800; flex: 1; }
.ts-modal .cuerpo { padding: var(--ts-e-3) var(--ts-e-6) var(--ts-e-6); display: grid; gap: var(--ts-e-3); font-size: var(--ts-t-sm); color: var(--ts-tinta-2); }
.ts-modal .acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ts-e-3); padding: var(--ts-e-4) var(--ts-e-6); border-top: 1px solid var(--ts-borde); }
.ts-cerrar { width: 32px; height: 32px; border-radius: var(--ts-r-boton); border: 1px solid transparent; background: none; color: var(--ts-tinta-2); cursor: pointer; display: grid; place-items: center; flex: none; margin: -4px -8px 0 0; }
.ts-cerrar:hover { border-color: var(--ts-borde); color: var(--ts-tinta); }
dialog.ts-modal { padding: 0; margin: auto; }
dialog.ts-modal::backdrop { background: rgba(15, 17, 18, 0.45); }
.ts-toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ts-e-3); align-items: center; width: 100%; max-width: 380px; padding: 12px 12px 12px 14px; background: var(--ts-elevado); color: var(--ts-tinta); border: 1px solid var(--c, var(--ts-borde)); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); font-size: var(--ts-t-sm); }
.ts-toast .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ts-tinta-3)); }
.ts-toast .accion { font: 600 var(--ts-t-xs)/1 var(--ts-font-texto); background: none; border: 0; color: var(--ts-tinta); text-decoration: underline; text-decoration-color: var(--c, var(--ts-tinta)); text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
.ts-menu { position: relative; display: inline-grid; justify-items: start; gap: 6px; }
.ts-menu-lista { min-width: 220px; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); box-shadow: var(--ts-sombra); padding: 4px; display: grid; }
.ts-menu-lista button { font: 400 var(--ts-t-sm)/1.2 var(--ts-font-texto); color: var(--ts-tinta); background: none; border: 1px solid transparent; border-radius: 4px; text-align: left; padding: 9px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: var(--ts-e-4); }
.ts-menu-lista button:hover, .ts-menu-lista button:focus-visible { border-color: var(--ts-borde); background: var(--ts-papel); outline: none; }
.ts-menu-lista button kbd { font-family: var(--ts-font-mono); font-size: 11px; color: var(--ts-tinta-3); }
.ts-menu-lista .peligro { color: var(--ts-rojo-texto); }
.ts-menu-lista hr { border: 0; height: 1px; background: var(--ts-borde); margin: 4px 0; }
.ts-tooltip { position: relative; background: var(--ts-tinta); color: var(--ts-papel); font-size: var(--ts-t-xs); padding: 7px 10px; border-radius: var(--ts-r-2); max-width: 220px; text-align: center; }
.ts-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ts-tinta); transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.ts-ayuda-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ts-tinta-3); background: var(--ts-elevado); color: var(--ts-tinta-2); font-weight: 700; font-size: var(--ts-t-sm); cursor: help; }
/* ---------- Logo ---------- */
.ts-marca { display: block; }
/* Carga: contenedor de la animación Lottie (cargando-negro.json en claro, cargando-blanco.json en oscuro) */
.ts-cargando { display: block; width: 64px; height: 64px; flex: none; }
.ts-cargando svg { display: block; }
/* ---------- Iconos ---------- */
.ts-icono { font-family: "Material Symbols Outlined"; font-weight: 300; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; user-select: none; }
.ts-icono--lleno { font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 20; }
.ts-icono--16 { font-size: 16px; }
.ts-icono--24 { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }
/* ---------- Select ---------- */
.ts-select { position: relative; }
.ts-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.ts-select .ts-icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ts-tinta-2); }
.ts-menu-lista .elegida { font-weight: 600; border-color: var(--ts-tinta); }
/* ---------- Fila de lista ---------- */
.ts-lista { display: grid; gap: var(--ts-e-2); }
.ts-lista-titulo { font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); padding: var(--ts-e-2) 14px 0; }
.ts-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ts-e-4); align-items: center; width: 100%; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--ts-r-2); background: transparent; color: var(--ts-tinta); font: inherit; text-align: left; cursor: pointer; transition: background var(--ts-mov-rapido), border-color var(--ts-mov-rapido); }
.ts-fila:hover { background: var(--ts-elevado); border-color: var(--ts-borde); }
.ts-fila[aria-current="true"] { background: var(--ts-elevado); border-color: var(--ts-tinta); }
.ts-fila .chip-icono { width: 40px; height: 40px; border-radius: var(--ts-r-2); border: 1px solid var(--c, var(--ts-borde)); background: var(--ts-elevado); display: grid; place-items: center; color: var(--ts-tinta); flex: none; }
.ts-fila .textos { display: grid; gap: 3px; min-width: 0; }
.ts-fila .titulo { display: flex; align-items: center; gap: var(--ts-e-2); min-width: 0; }
.ts-fila .titulo b { font-size: var(--ts-t-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ts-fila .titulo .ts-chip { flex: none; }
.ts-fila .sub { font-size: var(--ts-t-sm); color: var(--ts-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-fila .fin { display: flex; align-items: center; gap: var(--ts-e-3); color: var(--ts-tinta-3); font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); }
@media (max-width: 560px) { .ts-fila .fin .meta { display: none; } }
/* ---------- Tarjeta de cifra ---------- */
.ts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ts-e-4); }
.ts-stat { background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); padding: var(--ts-e-4) var(--ts-e-4) var(--ts-e-3); display: grid; gap: 6px; min-width: 0; }
.ts-stat .etq { font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); }
.ts-stat .valor { font-size: var(--ts-t-2xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.ts-stat .pie { display: flex; justify-content: space-between; align-items: end; gap: var(--ts-e-3); }
.ts-stat .cambio { font-size: var(--ts-t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-stat svg { width: 88px; height: 28px; flex: none; }
.ts-panel { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 30; width: min(380px, calc(100% - 24px)); background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
@media (max-width: 767px) { .ts-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; border-radius: 0; } }
.ts-panel .cabeza { display: flex; align-items: start; gap: var(--ts-e-3); padding: var(--ts-e-6) var(--ts-e-6) var(--ts-e-4); }
.ts-panel .cabeza h3 { flex: 1; font-size: var(--ts-t-lg); font-weight: 800; }
.ts-panel .cabeza p { font-size: var(--ts-t-sm); color: var(--ts-tinta-3); margin-top: 4px; }
.ts-panel .cuerpo { padding: 0 var(--ts-e-6) var(--ts-e-6); display: grid; gap: var(--ts-e-6); align-content: start; overflow-y: auto; }
.ts-panel .dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-e-3); }
.ts-panel .acciones { display: flex; justify-content: flex-end; gap: var(--ts-e-3); padding: var(--ts-e-4) var(--ts-e-6); border-top: 1px solid var(--ts-borde); }
textarea.ts-input { resize: vertical; min-height: 84px; }
.ts-lateral { border-right: 1px solid var(--ts-borde); padding: var(--ts-e-4) var(--ts-e-3); display: grid; grid-template-rows: auto 1fr auto; gap: var(--ts-e-6); }
.ts-lateral .marca-l { display: flex; align-items: center; gap: 8px; font-family: var(--ts-font-display); font-weight: 800; font-stretch: 112%; font-size: var(--ts-t-sm); padding: 4px 8px; }
.ts-nav { display: grid; gap: 2px; align-content: start; }
.ts-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--ts-r-2); font-size: var(--ts-t-sm); font-weight: 500; color: var(--ts-tinta-2); text-decoration: none; }
.ts-nav-item:hover { color: var(--ts-tinta); background: var(--ts-elevado); }
.ts-nav-item[aria-current="page"] { color: var(--ts-tinta); font-weight: 700; background: var(--ts-elevado); border-color: var(--ts-borde); }
.ts-nav-item[aria-current="page"] .ts-icono { font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 20; }
.ts-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ts-borde); background: var(--ts-elevado); display: grid; place-items: center; font-size: var(--ts-t-xs); font-weight: 700; flex: none; }
.ts-cabecera { height: 56px; display: flex; align-items: center; gap: var(--ts-e-3); padding: 0 var(--ts-e-6); border-bottom: 1px solid var(--ts-linea); }
.ts-buscador { position: relative; flex: 1; max-width: 400px; }
.ts-buscador .ts-icono { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ts-tinta-3); pointer-events: none; }
.ts-buscador .ts-input { padding: 8px 12px 8px 36px; font-size: var(--ts-t-sm); }
.ts-icono-btn { width: 36px; height: 36px; border-radius: var(--ts-r-boton); border: 1px solid transparent; background: none; color: var(--ts-tinta-2); display: grid; place-items: center; cursor: pointer; }
.ts-icono-btn:hover { border-color: var(--ts-borde); color: var(--ts-tinta); }
.ts-barra-inferior { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ts-borde); background: var(--ts-elevado); padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ts-barra-inferior a { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--ts-tinta-3); text-decoration: none; font-weight: 500; }
.ts-barra-inferior a[aria-current="page"] { color: var(--ts-tinta); font-weight: 700; }
.ts-barra-inferior a[aria-current="page"] .ts-icono { font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; }
.ts-fab { position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 15; width: 52px; height: 52px; border-radius: var(--ts-r-boton); border: 0; background: var(--ts-tinta); color: var(--ts-papel); box-shadow: var(--ts-sombra); display: grid; place-items: center; cursor: pointer; }
.ts-auth-fondo { display: grid; place-items: center; padding: var(--ts-e-8) var(--ts-e-4); background: var(--ts-papel); min-height: 100%; }
.ts-auth { width: 100%; max-width: 400px; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); padding: var(--ts-e-8); display: grid; gap: var(--ts-e-6); }
.ts-auth .marca-a { display: flex; align-items: center; gap: 10px; font-family: var(--ts-font-display); font-weight: 800; font-stretch: 112%; font-size: var(--ts-t-sm); }
.ts-auth .titulos { display: grid; gap: 4px; }
.ts-auth h3 { font-family: var(--ts-font-display); font-size: var(--ts-t-xl); font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em; }
.ts-auth .titulos p { font-size: var(--ts-t-sm); color: var(--ts-tinta-2); }
.ts-auth .campos { display: grid; gap: var(--ts-e-4); }
.ts-auth .etq-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ts-e-2); }
.ts-auth .etq-fila label { font-size: var(--ts-t-sm); font-weight: 600; }
.ts-auth .ts-btn { width: 100%; justify-content: center; }
.ts-auth .pie-auth { text-align: center; font-size: var(--ts-t-sm); color: var(--ts-tinta-2); }
.ts-auth--movil { max-width: none; min-height: 100%; border: 0; border-radius: 0; background: var(--ts-papel); padding: var(--ts-e-12) var(--ts-e-6) var(--ts-e-6); align-content: start; }
.ts-enlace { color: var(--ts-tinta); text-decoration: underline; text-decoration-color: var(--ts-tinta-3); text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: var(--ts-t-sm); }
.ts-enlace:hover { text-decoration-color: var(--ts-tinta); }
.ts-sidebar { width: 240px; display: grid; grid-template-rows: auto 1fr auto; gap: var(--ts-e-4); padding: var(--ts-e-3); border-right: 1px solid var(--ts-borde); background: var(--ts-papel); transition: width var(--ts-mov-base) var(--ts-curva); overflow: hidden; }
.ts-sidebar-cab { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.ts-sidebar-cab .nombre { font-family: var(--ts-font-display); font-weight: 800; font-stretch: 112%; font-size: var(--ts-t-sm); white-space: nowrap; flex: 1; }
.ts-sidebar-cuerpo { display: grid; gap: var(--ts-e-4); align-content: start; overflow-y: auto; }
.ts-sidebar-grupo { display: grid; gap: 2px; }
.ts-sidebar-titulo { font-family: var(--ts-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); padding: 4px 10px; white-space: nowrap; }
.ts-sidebar .ts-nav-item { position: relative; white-space: nowrap; cursor: pointer; }
.ts-sidebar .ts-nav-item .etq { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ts-contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ts-r-pill); border: 1px solid var(--ts-borde); background: var(--ts-elevado); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; color: var(--ts-tinta-2); }
.ts-contador--alerta { border-color: var(--ts-rojo); color: var(--ts-rojo-texto); }
.ts-nav-sub > summary { list-style: none; }
.ts-nav-sub > summary::-webkit-details-marker { display: none; }
.ts-nav-sub > summary .flecha { transition: transform var(--ts-mov-base); color: var(--ts-tinta-3); }
.ts-nav-sub[open] > summary .flecha { transform: rotate(180deg); }
.ts-nav-sub .hijos { display: grid; gap: 2px; padding: 2px 0 4px 30px; }
.ts-nav-sub .hijos .ts-nav-item { padding: 6px 10px; font-size: var(--ts-t-sm); }
.ts-sidebar-pie { display: grid; gap: 2px; border-top: 1px solid var(--ts-borde); padding-top: var(--ts-e-3); }
/* colapsada: solo íconos, el nombre aparece en un tooltip */
.ts-sidebar--colapsada { width: 64px; }
.ts-sidebar--colapsada .nombre, .ts-sidebar--colapsada .etq, .ts-sidebar--colapsada .ts-sidebar-titulo, .ts-sidebar--colapsada .flecha, .ts-sidebar--colapsada .hijos, .ts-sidebar--colapsada .ts-nav-item .ts-contador { display: none; }
.ts-sidebar--colapsada .ts-sidebar-titulo + * { margin-top: 0; }
.ts-sidebar--colapsada .ts-sidebar-grupo + .ts-sidebar-grupo { border-top: 1px solid var(--ts-borde); padding-top: var(--ts-e-3); }
.ts-sidebar--colapsada .ts-nav-item { justify-content: center; padding: 8px; }
.ts-sidebar--colapsada .ts-nav-item[data-cuenta]::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ts-tinta); border: 1.5px solid var(--ts-papel); }
.ts-sidebar--colapsada .ts-nav-item:hover::before, .ts-sidebar--colapsada .ts-nav-item:focus-visible::before { content: attr(data-etq); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ts-tinta); color: var(--ts-papel); font-size: var(--ts-t-xs); font-weight: 500; padding: 6px 9px; border-radius: var(--ts-r-2); white-space: nowrap; z-index: 3; pointer-events: none; }
.ts-sidebar--colapsada .ts-sidebar-cab { justify-content: center; }
.ts-sidebar--colapsada .ts-sidebar-cab .ts-marca { display: none; }
.ts-sidebar--colapsada { overflow: visible; }
/* drawer móvil: en la app es fijo sobre un velo */
.ts-sidebar--drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 82vw); z-index: 30; background: var(--ts-elevado); border-right: 0; box-shadow: var(--ts-sombra); border-radius: 0 var(--ts-r-boton) var(--ts-r-boton) 0; }
.ts-velo { position: fixed; inset: 0; background: var(--ts-velo); z-index: 25; }
/* ---------- Navbar superior ---------- */
.ts-navbar { display: flex; align-items: center; gap: var(--ts-e-6); height: 60px; padding: 0 var(--ts-e-6); background: var(--ts-papel); border-bottom: 1px solid var(--ts-linea); min-width: 0; }
.ts-navbar .marca-n { display: flex; align-items: center; gap: 8px; font-family: var(--ts-font-display); font-weight: 800; font-stretch: 112%; font-size: var(--ts-t-sm); white-space: nowrap; }
.ts-navbar-links { display: flex; gap: var(--ts-e-6); align-self: stretch; }
.ts-navbar-link { display: flex; align-items: center; font-size: var(--ts-t-sm); font-weight: 500; color: var(--ts-tinta-2); text-decoration: none; position: relative; white-space: nowrap; }
.ts-navbar-link:hover { color: var(--ts-tinta); }
.ts-navbar-link[aria-current="page"] { color: var(--ts-tinta); font-weight: 700; }
.ts-navbar-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ts-tinta); border-radius: 2px; }
.ts-navbar .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--ts-e-2); }
/* ---------- Migas, segmentado, pasos, paginación ---------- */
.ts-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ts-t-sm); color: var(--ts-tinta-3); }
.ts-migas a { color: var(--ts-tinta-2); text-decoration: none; }
.ts-migas a:hover { color: var(--ts-tinta); text-decoration: underline; text-underline-offset: 3px; }
.ts-migas [aria-current="page"] { color: var(--ts-tinta); font-weight: 600; }
.ts-migas .sep { color: var(--ts-tinta-3); }
.ts-segmentado { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); background: var(--ts-superficie); }
.ts-segmentado button { font: 500 var(--ts-t-sm)/1 var(--ts-font-texto); color: var(--ts-tinta-2); background: none; border: 1px solid transparent; border-radius: calc(var(--ts-r-boton) - 3px); padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ts-segmentado button[aria-pressed="true"] { background: var(--ts-elevado); border-color: var(--ts-borde); color: var(--ts-tinta); font-weight: 600; }
.ts-segmentado--iconos button { padding: 6px 8px; }
.ts-pasos { display: flex; flex-wrap: wrap; gap: var(--ts-e-2) var(--ts-e-4); align-items: center; list-style: none; margin: 0; padding: 0; font-size: var(--ts-t-sm); }
.ts-pasos li { display: flex; align-items: center; gap: 8px; color: var(--ts-tinta-3); }
.ts-pasos li .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ts-borde); display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--ts-elevado); }
.ts-pasos li.hecho { color: var(--ts-tinta-2); }
.ts-pasos li.hecho .n { background: var(--ts-tinta); border-color: var(--ts-tinta); color: var(--ts-papel); }
.ts-pasos li[aria-current="step"] { color: var(--ts-tinta); font-weight: 600; }
.ts-pasos li[aria-current="step"] .n { border-color: var(--ts-tinta); }
.ts-pasos li + li::before { content: ""; width: 24px; height: 1px; background: var(--ts-borde); margin-right: 8px; }
.ts-paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--ts-t-sm); font-variant-numeric: tabular-nums; }
.ts-paginacion button { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--ts-r-boton); border: 1px solid transparent; background: none; color: var(--ts-tinta-2); font: inherit; cursor: pointer; display: inline-grid; place-items: center; }
.ts-paginacion button:hover { border-color: var(--ts-borde); color: var(--ts-tinta); }
.ts-paginacion button[aria-current="page"] { border-color: var(--ts-tinta); color: var(--ts-tinta); font-weight: 700; background: var(--ts-elevado); }
.ts-paginacion button[disabled] { opacity: .4; cursor: not-allowed; }
.ts-paginacion .puntos { padding: 0 4px; color: var(--ts-tinta-3); }
/* ---------- Menús de aplicación ---------- */
.ts-menu-lista .cab-menu { padding: 10px 10px 8px; display: grid; gap: 2px; font-size: var(--ts-t-sm); }
.ts-menu-lista .cab-menu span { color: var(--ts-tinta-3); font-size: var(--ts-t-xs); }
.ts-menu-lista button .izq { display: inline-flex; align-items: center; gap: 10px; }
.ts-menu-lista button .ts-icono { color: var(--ts-tinta-2); }
.ts-menu-lista .grupo-titulo { font-family: var(--ts-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); padding: 8px 10px 4px; }
.ts-comandos { width: 100%; max-width: 560px; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); overflow: hidden; }
.ts-comandos .buscar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ts-borde); font-size: var(--ts-t-md); color: var(--ts-tinta); }
.ts-comandos .buscar .ts-icono { color: var(--ts-tinta-3); }
.ts-comandos .lista { padding: 6px; display: grid; }
.ts-comandos .op { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--ts-r-2); font-size: var(--ts-t-sm); }
.ts-comandos .op[aria-selected="true"] { border-color: var(--ts-tinta); background: var(--ts-papel); }
.ts-comandos .op .fin { margin-left: auto; }
.ts-kbd { font-family: var(--ts-font-mono); font-size: 11px; color: var(--ts-tinta-2); border: 1px solid var(--ts-borde); border-radius: 4px; padding: 2px 5px; background: var(--ts-papel); }
.ts-cab-pagina { display: grid; gap: var(--ts-e-3); }
.ts-cab-pagina .fila-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--ts-e-4); }
.ts-cab-pagina h1, .ts-cab-detalle h1 { font-family: var(--ts-font-display); font-size: var(--ts-t-2xl); font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; }
.ts-cab-pagina .desc { color: var(--ts-tinta-2); font-size: var(--ts-t-sm); margin-top: 4px; max-width: 60ch; }
.ts-cab-pagina .acciones, .ts-cab-detalle .acciones { display: flex; flex-wrap: wrap; gap: var(--ts-e-2); align-items: center; }
.ts-cab-detalle { display: grid; gap: var(--ts-e-3); }
.ts-volver { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ts-t-sm); color: var(--ts-tinta-2); text-decoration: none; justify-self: start; }
.ts-volver:hover { color: var(--ts-tinta); }
.ts-cab-detalle .fila-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ts-e-4); }
.ts-cab-detalle .titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-e-3); min-width: 0; }
.ts-cab-detalle .meta { display: flex; flex-wrap: wrap; gap: var(--ts-e-2) var(--ts-e-4); font-size: var(--ts-t-sm); color: var(--ts-tinta-3); }
.ts-cab-detalle .meta span { display: inline-flex; align-items: center; gap: 6px; }
.ts-cab-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-e-3); flex-wrap: wrap; }
.ts-cab-seccion h2 { font-size: var(--ts-t-lg); font-weight: 700; }
.ts-cab-seccion a { font-size: var(--ts-t-sm); color: var(--ts-tinta); }
.ts-cab-movil { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; height: 52px; padding: 0 6px; border-bottom: 1px solid var(--ts-linea); background: var(--ts-papel); }
.ts-cab-movil .t { text-align: center; font-weight: 700; font-size: var(--ts-t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-cab-condensada { display: flex; align-items: center; gap: var(--ts-e-3); height: 52px; padding: 0 var(--ts-e-4); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); background: var(--ts-elevado); box-shadow: var(--ts-sombra); }
.ts-cab-condensada b { flex: 1; font-size: var(--ts-t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Listados ---------- */
.ts-listado-barra { display: flex; flex-wrap: wrap; gap: var(--ts-e-3); align-items: center; justify-content: space-between; }
.ts-listado-barra .izq, .ts-listado-barra .der { display: flex; flex-wrap: wrap; gap: var(--ts-e-2); align-items: center; }
.ts-filtro { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--ts-t-xs)/1 var(--ts-font-texto); padding: 7px 11px; border: 1px solid var(--ts-borde); border-radius: var(--ts-r-pill); background: var(--ts-elevado); color: var(--ts-tinta-2); cursor: pointer; }
.ts-filtro:hover { border-color: var(--ts-tinta-3); color: var(--ts-tinta); }
.ts-filtro[aria-pressed="true"] { border-color: var(--ts-tinta); color: var(--ts-tinta); font-weight: 600; }
.ts-filtro .ts-icono { font-size: 16px; }
.ts-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ts-e-4); }
.ts-tarjeta-item { display: grid; gap: var(--ts-e-3); align-content: start; padding: var(--ts-e-4); background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); color: var(--ts-tinta); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--ts-mov-rapido); min-width: 0; }
.ts-tarjeta-item:hover { border-color: var(--ts-tinta-3); }
.ts-tarjeta-item[aria-current="true"] { border-color: var(--ts-tinta); }
.ts-tarjeta-item .arriba { display: flex; align-items: start; justify-content: space-between; gap: var(--ts-e-2); }
.ts-tarjeta-item .chip-icono { width: 40px; height: 40px; border-radius: var(--ts-r-2); border: 1px solid var(--c, var(--ts-borde)); background: var(--ts-elevado); display: grid; place-items: center; }
.ts-tarjeta-item b { font-size: var(--ts-t-md); font-weight: 700; }
.ts-tarjeta-item .desc { font-size: var(--ts-t-sm); color: var(--ts-tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-tarjeta-item .pie { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-e-2); padding-top: var(--ts-e-3); border-top: 1px solid var(--ts-borde); font-family: var(--ts-font-mono); font-size: var(--ts-t-xs); color: var(--ts-tinta-3); }
.ts-avatares { display: inline-flex; }
.ts-avatares .ts-avatar { width: 24px; height: 24px; font-size: 10px; margin-left: -6px; border-color: var(--ts-elevado); box-shadow: 0 0 0 1px var(--ts-borde); }
.ts-avatares .ts-avatar:first-child { margin-left: 0; }
.ts-esqueleto { display: block; border-radius: 4px; background: var(--ts-superficie); animation: ts-latido 1.4s ease-in-out infinite; }
@keyframes ts-latido { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ts-esqueleto { animation: none; } }
.ts-barra-seleccion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-e-3); padding: 8px 8px 8px 16px; background: var(--ts-elevado); border: 1px solid var(--ts-tinta); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); font-size: var(--ts-t-sm); width: fit-content; max-width: 100%; }
.ts-barra-seleccion--fija { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; }
.ts-toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; display: grid; gap: var(--ts-e-2); width: calc(100% - 32px); max-width: 380px; }
.ts-cab-condensada--fija { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.ts-barra-seleccion b { font-variant-numeric: tabular-nums; margin-right: var(--ts-e-2); }
/* ---------- Más componentes ---------- */
.ts-acordeon { border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); background: var(--ts-elevado); overflow: hidden; }
.ts-acordeon details + details { border-top: 1px solid var(--ts-borde); }
.ts-acordeon summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ts-e-3); padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: var(--ts-t-sm); }
.ts-acordeon summary::-webkit-details-marker { display: none; }
.ts-acordeon summary .ts-icono { color: var(--ts-tinta-3); transition: transform var(--ts-mov-base); }
.ts-acordeon details[open] summary .ts-icono { transform: rotate(180deg); }
.ts-acordeon .contenido { padding: 0 16px 16px; font-size: var(--ts-t-sm); color: var(--ts-tinta-2); }
.ts-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-e-3); padding: 10px 10px 10px 16px; border: 1px solid var(--c, var(--ts-borde)); border-radius: var(--ts-r-2); background: var(--ts-elevado); font-size: var(--ts-t-sm); }
.ts-banner .ts-icono { color: var(--c-texto, var(--ts-tinta-2)); }
.ts-banner p { flex: 1; min-width: 200px; }
.ts-subir { display: grid; justify-items: center; gap: 6px; text-align: center; padding: var(--ts-e-8) var(--ts-e-4); border: 1px dashed var(--ts-tinta-3); border-radius: var(--ts-r-2); background: var(--ts-elevado); font-size: var(--ts-t-sm); color: var(--ts-tinta-2); cursor: pointer; }
.ts-subir:hover, .ts-subir.encima { border-color: var(--ts-tinta); color: var(--ts-tinta); }
.ts-subir .ts-icono { font-size: 28px; color: var(--ts-tinta); }
.ts-subir b { color: var(--ts-tinta); }
.ts-archivo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ts-e-3); align-items: center; padding: 10px 12px; border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); background: var(--ts-elevado); font-size: var(--ts-t-sm); }
.ts-archivo .barra { height: 4px; border-radius: 2px; background: var(--ts-superficie); overflow: hidden; margin-top: 6px; }
.ts-archivo .barra i { display: block; height: 100%; background: var(--ts-tinta); }
.ts-deslizador { display: grid; gap: 8px; }
.ts-deslizador .fila-d { display: flex; justify-content: space-between; font-size: var(--ts-t-sm); }
.ts-deslizador .fila-d b { font-variant-numeric: tabular-nums; }
.ts-deslizador input[type="range"] { width: 100%; accent-color: var(--ts-tinta); }
.ts-combo { display: grid; gap: 6px; }
.ts-combo .ts-menu-lista mark { background: none; color: var(--ts-tinta); font-weight: 700; }
.ts-combo .ts-menu-lista button[aria-selected="true"] { border-color: var(--ts-tinta); background: var(--ts-papel); }
/* Texto en mono: códigos, IDs y datos */
.ts-mono { font-family: var(--ts-font-mono); font-size: .8em; }
/* ---------- Selectores: simple, con búsqueda y múltiple ---------- */
.ts-selector { position: relative; }
.ts-selector-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ts-e-2); padding: 10px 12px; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); font: 400 var(--ts-t-md)/1.4 var(--ts-font-texto); color: var(--ts-tinta); text-align: left; cursor: pointer; }
.ts-selector-btn:hover { border-color: var(--ts-tinta-3); }
.ts-selector-btn[aria-expanded="true"] { border-color: var(--ts-tinta); }
.ts-selector-btn .valor { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-selector-btn .valor.vacio { color: var(--ts-tinta-3); }
.ts-selector-btn .ts-icono { color: var(--ts-tinta-2); transition: transform var(--ts-mov-base); }
.ts-selector-btn[aria-expanded="true"] .ts-icono { transform: rotate(180deg); }
.ts-desplegable { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; z-index: 10; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-2); box-shadow: var(--ts-sombra); display: grid; max-height: 320px; overflow: hidden; grid-template-rows: auto 1fr auto; }
.ts-desplegable-buscar { padding: 6px; border-bottom: 1px solid var(--ts-borde); }
.ts-desplegable-buscar .ts-buscador { max-width: none; }
.ts-desplegable-opciones { overflow-y: auto; padding: 4px; display: grid; align-content: start; }
.ts-opcion { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 4px; background: none; font: 400 var(--ts-t-sm)/1.2 var(--ts-font-texto); color: var(--ts-tinta); text-align: left; cursor: pointer; }
.ts-opcion:hover, .ts-opcion:focus-visible { border-color: var(--ts-borde); background: var(--ts-papel); outline: none; }
.ts-opcion .txt { flex: 1; min-width: 0; }
.ts-opcion .txt small { display: block; color: var(--ts-tinta-3); font-size: var(--ts-t-xs); margin-top: 2px; }
.ts-opcion .ok { visibility: hidden; color: var(--ts-tinta); }
.ts-opcion[aria-selected="true"] { font-weight: 600; }
.ts-opcion[aria-selected="true"] .ok { visibility: visible; }
.ts-opcion .caja { width: 16px; height: 16px; border: 1px solid var(--ts-tinta); border-radius: 4px; display: grid; place-items: center; flex: none; background: var(--ts-elevado); }
.ts-opcion[aria-selected="true"] .caja { background: var(--ts-tinta); }
.ts-opcion[aria-selected="true"] .caja::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--ts-papel); border-bottom: 2px solid var(--ts-papel); transform: rotate(-45deg) translate(1px, -1px); }
.ts-opcion .cuenta { font-size: var(--ts-t-xs); color: var(--ts-tinta-3); font-variant-numeric: tabular-nums; }
.ts-desplegable-vacio { padding: 12px 10px; font-size: var(--ts-t-sm); color: var(--ts-tinta-3); }
.ts-desplegable-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--ts-e-2); padding: 6px; border-top: 1px solid var(--ts-borde); }
.ts-desplegable .grupo-titulo { font-family: var(--ts-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); padding: 8px 10px 4px; }
/* ---------- Filtros ---------- */
.ts-filtro .ts-contador { height: 18px; min-width: 18px; font-size: 10px; padding: 0 5px; background: var(--ts-tinta); color: var(--ts-papel); border-color: var(--ts-tinta); }
.ts-filtros-aplicados { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-e-2); font-size: var(--ts-t-sm); }
.ts-filtros-aplicados .resultado { color: var(--ts-tinta-2); font-variant-numeric: tabular-nums; margin-right: var(--ts-e-2); }
.ts-filtro-aplicado { display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 10px; border: 1px solid var(--ts-tinta); border-radius: var(--ts-r-pill); background: var(--ts-elevado); font-size: var(--ts-t-xs); color: var(--ts-tinta-2); }
.ts-filtro-aplicado b { color: var(--ts-tinta); font-weight: 600; }
.ts-filtro-aplicado button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--ts-tinta-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ts-filtro-aplicado button:hover { border-color: var(--ts-borde); color: var(--ts-tinta); }
.ts-filtro-aplicado button .ts-icono { font-size: 14px; }
.ts-limpiar { font: 600 var(--ts-t-xs)/1 var(--ts-font-texto); background: none; border: 0; color: var(--ts-tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
.ts-filtros-panel { width: 100%; max-width: 360px; background: var(--ts-elevado); border: 1px solid var(--ts-borde); border-radius: var(--ts-r-boton); box-shadow: var(--ts-sombra); display: grid; }
.ts-filtros-panel .cab { display: flex; align-items: center; justify-content: space-between; padding: var(--ts-e-3) var(--ts-e-4); border-bottom: 1px solid var(--ts-borde); font-weight: 700; font-size: var(--ts-t-sm); }
.ts-filtros-panel .cuerpo { padding: var(--ts-e-4); display: grid; gap: var(--ts-e-6); }
.ts-filtros-grupo { display: grid; gap: var(--ts-e-2); }
.ts-filtros-grupo > .t { font-family: var(--ts-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-tinta-3); }
.ts-filtros-grupo .ts-casilla { justify-content: space-between; width: 100%; }
.ts-filtros-grupo .ts-casilla .cuenta { margin-left: auto; font-size: var(--ts-t-xs); color: var(--ts-tinta-3); font-variant-numeric: tabular-nums; }
.ts-filtros-grupo .fechas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-e-2); }
.ts-filtros-panel .pie { display: flex; justify-content: space-between; align-items: center; padding: var(--ts-e-3) var(--ts-e-4); border-top: 1px solid var(--ts-borde); }
.ts-th-filtro { display: inline-flex; align-items: center; gap: 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; margin: -3px -5px; cursor: pointer; }
.ts-th-filtro:hover { border-color: var(--ts-borde); color: var(--ts-tinta); }
.ts-th-filtro .ts-icono { font-size: 14px; }
.ts-th-filtro.activo { color: var(--ts-tinta); }
.ts-th-filtro.activo .ts-icono { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.ts-hoja { position: fixed; left: 0; right: 0; bottom: 0; top: 12vh; z-index: 30; background: var(--ts-elevado); border-radius: 20px 20px 0 0; border-top: 1px solid var(--ts-borde); box-shadow: var(--ts-sombra); display: grid; grid-template-rows: auto auto 1fr auto; z-index: 2; }
.ts-hoja .asa { width: 36px; height: 4px; border-radius: 2px; background: var(--ts-borde); justify-self: center; margin-top: 8px; }
.ts-hoja .cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; border-bottom: 1px solid var(--ts-borde); font-weight: 700; }
.ts-hoja .cuerpo { padding: 16px; display: grid; gap: var(--ts-e-6); align-content: start; overflow: hidden; }
.ts-hoja .pie { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ts-borde); display: grid; grid-template-columns: auto 1fr; gap: var(--ts-e-3); align-items: center; }
.ts-hoja .pie .ts-btn { justify-content: center; }