/* Estilos de la aplicacion. La paleta y la tipografia vienen de assets/marca.css.
 * Solo escritorio (D-033): sin breakpoints de mobile ni landscape. El layout es
 * fluido dentro del rango de escritorio -- una notebook de 1280 y un monitor de
 * 1920 tienen que verse bien los dos.
 * La accesibilidad SI se mantiene completa: no es exclusiva de mobile. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* UI-199 (gotcha 30): el foco y los saltos a un ancla quedan por debajo de la
 * cabecera fija. --alto-cabecera lo mide el JS (finanzas.html); los 8px dejan
 * a la vista el contorno de foco. */
html{scroll-padding-top:calc(var(--alto-cabecera, 0px) + 8px)}
body{background:radial-gradient(900px circle at 12% -10%,var(--accent-08),transparent 55%),radial-gradient(700px circle at 100% 10%,var(--accent-05),transparent 50%),var(--bg);color:var(--text);font:var(--fs-md)/var(--lh-cuerpo) var(--fuente);-webkit-font-smoothing:antialiased}   /* propuesta: fondo con degrade sutil, estilo Project Manager */
/* UI-174: topbar y franja de pestanas comparten un contenedor fijo arriba (vidrio esmerilado + borde con tinte de acento, estilo Project Manager). */
.cabecera{position:sticky;top:0;z-index:40;background:var(--superficie);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--accent-16)}
/* UI-196: tres zonas. Titulo a la izquierda, badges globales centrados en la
 * pantalla y estado de conexion contra el borde derecho: las dos columnas de
 * los costados miden lo mismo (1fr), asi el centro queda en el medio. */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--gap);
  padding:8px 16px;border-bottom:1px solid var(--accent-16)}   /* UI-174: solo titulo, badges globales y estado de conexion */
.topbar h1{margin:0;font-size:var(--fs-lg);line-height:var(--lh-titulo);font-weight:650;letter-spacing:-.01em;justify-self:start}
/* UI-200: el titulo es un boton que se ve igual que el titulo. */
.titulo-inicio{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.badges{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
/* UI-065: el estado de conexion es su propio item del topbar, separado de #badges: los indicadores financieros no lo desplazan.
 * ARQ-031: a su derecha van el email del usuario y el boton de cerrar sesion. */
.topbar-conexion{justify-self:end;display:flex;align-items:center;gap:12px}
.usuario-badge{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
/* UI-061: fila de subpildoras bajo la pildora primaria activa (patron de dos
 * niveles, ver comentario en finanzas.html). Clona .nav-btn tal cual para las
 * subpildoras -- lo unico nuevo es este contenedor de layout. El [hidden] va
 * aparte porque display:flex le gana a [hidden] en especificidad (mismo bug
 * ya visto en UI-043). */
.subnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;
  background:var(--superficie-franja);border-top:1px solid var(--accent-16)}   /* UI-199: dentro de la cabecera fija; el borde de abajo lo pone .cabecera */
.subnav[hidden]{display:none}
.badge{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.badge b{color:var(--text);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--sem-verde)}.dot.warn{background:var(--sem-amarillo)}.dot.acc{background:var(--accent)}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;   /* propuesta: antes 6px -- alineado a Project Manager */
  -webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent)}   /* #000 de mascara: solo cuenta su opacidad, no es un color visible */
.tabs::-webkit-scrollbar{display:none}
.cabecera .tabs{padding:10px 16px}   /* UI-174: las pestanas principales salen del topbar a su propia franja (deja sin efecto la fusion de UI-048) */
.nav-btn{flex:0 0 auto;min-height:var(--h-pill);display:inline-flex;align-items:center;padding:0 16px;   /* propuesta: alto 32px (--h-pill) y padding, antes 44px/0 9px -- alineado a Project Manager */
  border:1px solid var(--accent-55);border-radius:var(--r-pill);background:var(--card-alto);   /* propuesta: relleno solido + borde con tinte de acento, antes transparent + border-fuerte */
  color:var(--muted);font:600 var(--fs-sm)/1 var(--fuente);cursor:pointer;white-space:nowrap}
.nav-btn[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text);box-shadow:0 0 28px var(--accent-55)}   /* propuesta: halo mas amplio, antes 10px/.45 */
.nav-btn:disabled{opacity:.4;cursor:not-allowed}
/* UI-171: la subpildora activa se distingue de la primaria con el tinte tenue del acento, sin relleno solido ni halo. */
.subnav .nav-btn[aria-selected="true"]{background:var(--accent-14);border-color:var(--accent);color:var(--accent);box-shadow:none}
.nav-btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}   /* propuesta: lista de selectores ampliada, estilo Project Manager */
main{padding:12px 20px;max-width:min(calc(50vw + 660px),1600px);margin:0 auto}   /* UI-175: ancho fluido del skill -- la mitad del margen lateral de un tope fijo de 1280px, con techo de 1600px */
.header-row{display:flex;align-items:flex-end;gap:var(--gap);margin-bottom:8px;flex-wrap:wrap}
.header-row h2{margin:0;font-size:var(--fs-lg);line-height:var(--lh-titulo);font-weight:650}
.header-row .titulo{flex:1 1 300px;min-width:0;min-height:var(--h-ctrl);display:flex;align-items:center}   /* UI-173: sin subtitulo; el titulo ocupa el alto de un control y, con el contenedor en flex-end, queda centrado con el filtro de la derecha aunque este lleve etiqueta arriba */
.header-row .filters{display:flex;align-items:center;gap:var(--gap-sm);flex-wrap:wrap;margin-left:auto}
.sub{margin:4px 0 0;color:var(--muted);font-size:var(--fs-sm)}
.filtros-fila{display:flex;gap:var(--gap-sm);flex-wrap:wrap;margin-bottom:10px}
.filtro{min-height:var(--h-ctrl);display:inline-flex;align-items:center;gap:8px;padding:0 14px;   /* propuesta: alto 38px (--h-ctrl), antes 44px */
  background:var(--card);border:1px solid var(--border-fuerte);border-radius:var(--r-ctrl);   /* propuesta: radio 9px (--r-ctrl), antes 7px */
  color:var(--text);font:var(--fs-sm)/1 var(--fuente);cursor:pointer}
.filtro.acc{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:650}
.filtro:disabled{opacity:.45;cursor:not-allowed}
select.filtro,input.filtro{cursor:auto}
.kpis{display:flex;flex-wrap:wrap;gap:var(--gap);margin-bottom:8px}   /* UI-178: el JS (ui.js, distribuirKpis) las reparte en filas parejas */
.kpis.kpis-repartido{flex-direction:column;flex-wrap:nowrap}
.kpis-fila{display:flex;justify-content:flex-start;gap:var(--gap)}
/* UI-065: en Clasificar, sin el parrafo de ayuda que antes separaba las tarjetas de la tabla (UI-064), el espacio quedaba mas apretado que en el resto de las vistas -- se duplica solo aca, no en el resto de las vistas que reusan .kpis. */
.kpis-clasificar{margin-bottom:16px}
/* UI-050 (alternativa A): icono a la izquierda en circulo tenue + num/lbl apilados a la derecha */
.kpi{flex:0 0 auto;min-width:0;background:var(--card);border:1px solid var(--accent-16);border-radius:var(--r-card);padding:8px 10px;   /* propuesta: borde con tinte de acento, antes var(--border) */
  display:flex;align-items:center;gap:10px}
/* UI-153: KPI que hace de atajo hacia un filtro relacionado (ui.kpi con onClick) */
.kpi-clickable{cursor:pointer;transition:border-color .15s,background .15s}
.kpi-clickable:hover{border-color:var(--accent);background:var(--accent-14)}
.kpi-icono{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-ico);background:var(--accent-14);border:1px solid var(--accent-32);   /* propuesta: cuadrado redondeado 44px con borde, antes circulo 32px sin borde */
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.kpi-icono svg{width:20px;height:20px}
.kpi-texto{display:flex;flex-direction:column;min-width:0}
/* UI-178: un solo tamano de valor, en el acento; semaforo solo para un dato critico (warn: pendientes > 0; neg: saldo o resultado negativo) */
.kpi .num{font-size:var(--fs-num);line-height:var(--lh-num);font-weight:680;letter-spacing:-.02em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent)}
.kpi .lbl{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:1.25;white-space:nowrap;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .num.warn{color:var(--sem-amarillo)}.kpi .num.neg{color:var(--sem-rojo)}
/* UI-188: pildora de estado (Pill del LNB): el estado puntual de un registro,
 * en el color del semaforo sobre su tinte, con borde intermedio. Verde
 * confirmado o conectado; amarillo pendiente de revisar o por vencer; rojo
 * sin clasificar o desconectado. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:var(--fs-xs);font-weight:600;line-height:1.25;white-space:nowrap}
.pill.verde{background:var(--sem-verde-12);border-color:var(--sem-verde-40);color:var(--sem-verde)}
.pill.amarillo{background:var(--sem-amarillo-12);border-color:var(--sem-amarillo-40);color:var(--sem-amarillo)}
.pill.rojo{background:var(--sem-rojo-10);border-color:var(--sem-rojo-35);color:var(--sem-rojo)}
.tabla-wrap{overflow-x:auto;border-radius:var(--r-card)}
.tabla{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--accent-16);border-radius:var(--r-card);overflow:hidden}   /* propuesta: borde con tinte de acento */
.tabla th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600;padding:6px 12px;border-bottom:1px solid var(--border);background:var(--card-alto);white-space:nowrap}
.tabla td{padding:5px 12px;border-bottom:1px solid var(--border);font-size:var(--fs-sm);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tr.sel td{background:var(--accent-14)}
.tabla td.der,.tabla th.der{text-align:right;font-variant-numeric:tabular-nums}
.tabla td.centro,.tabla th.centro{text-align:center;font-variant-numeric:tabular-nums}   /* UI-198: fecha, periodo, identificador, estado, cantidad y acciones */
.tabla .comercio{font-weight:600;color:var(--text)}
.tabla .meta{color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
/* UI-034: solo en Clasificar (373 comercios en lista densa) el nombre se
   trunca a una linea (elipsis + title con el nombre completo) para que la
   fila nunca supere las dos lineas (nombre + rango de fechas), con un
   interlineado propio mas ajustado que --lh-cuerpo (pensado para prosa) para
   achicar el espacio libre entre filas. Escopeado a .vista-clasificar porque
   .comercio/.meta se reusan en Egresos, Ingresos, Posicion, Manual y
   Catalogo, donde el texto no debe truncarse igual.
   La densidad de fila (padding) se dejo de fijar aca cuando Clasificar migro
   al motor compartido `tabla-transferencias.js` (D-052): ahora su tabla es
   `.ax-tabla`, con la misma densidad que ya usan Transferencias entrantes/
   salientes (`.ax-tabla td{padding:3px 10px;...}`, mas abajo) -- una sola
   regla en vez de dos numeros que podian desalinearse. `.vista-clasificar
   .tabla td` ya no hace falta (UI-106: "Modo foco", la unica otra pantalla
   que existia dentro de esta vista, se elimino), asi que se retira en vez de
   dejarla sin uso. */
.vista-clasificar .tabla .comercio{line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:34ch}
.vista-clasificar .tabla .meta{line-height:1.25;margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.tabla tfoot td{background:var(--card-alto);font-weight:700;white-space:nowrap;border-top:2px solid var(--accent)}   /* UI-202: fila de totales de project:design */
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}
.chk{display:inline-flex;align-items:center;justify-content:center;width:var(--tactil);height:var(--tactil);cursor:pointer;border-radius:var(--r-card-sm)}
.chk:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.chkcell{width:var(--tactil);padding:0 !important;text-align:center}
/* ---------- boton de combo: periodo (.combo-filtro) y "+ Etiqueta" ---------- */
.combo{position:relative;display:inline-block}
.combo-btn{min-height:var(--h-ctrl);display:inline-flex;align-items:center;padding:0 14px;   /* propuesta: alto 38px, antes 44px */
  background:transparent;border:1px solid var(--border-fuerte);border-radius:var(--r-ctrl);   /* propuesta: radio 9px, antes 7px */
  color:var(--text);font:var(--fs-sm)/1 var(--fuente);cursor:pointer;max-width:250px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* UI-170: el motor de tabla ancla sus paneles flotantes a su contenedor */
.tabla-anclaje{position:relative}
/* UI-181: .combo-filtro en modo con texto (project:design) -- embudo + valor
   elegido; borde y texto en acento cuando filtra (el de periodo siempre filtra). */
.combo-filtro-btn{gap:8px}
.combo-filtro-btn svg{width:14px;height:14px;flex:none}
.combo-filtro-txt{overflow:hidden;text-overflow:ellipsis}
.combo-filtro-btn:hover{background:var(--accent-08)}
.combo-filtro-btn.activo{border-color:var(--accent);color:var(--accent)}
/* ---------- selector de etiquetas: boton + panel multiseleccion (UI-084) ---------
 * UI-181: el panel es el mismo .panel-filtro del filtro por columna; lo propio
 * es la fila para crear una etiqueta nueva cuando la busqueda no matchea. */
.et-selector{display:flex;flex-direction:column;gap:8px}
/* UI-090: columna "Etiquetas" de Clasificar -- la sugerencia pendiente
 * (.chip-sugerida), lo ya asignado (.chip/.chip-quitar, dentro de
 * .et-selector) y el boton "+ Etiqueta" (.combo-btn) conviven en una sola
 * fila, todos del MISMO alto/tipografia -- pedido explicito del usuario tras
 * ver el preview: "todos los chips... tengan el mismo tamaño. La diferencia
 * de colores está bien". Desde UI-188 el chip tiene un solo tamaño en toda
 * la app; aca solo se achica el boton "+ Etiqueta" (.combo-btn), que en
 * Carga manual y la barra de ajuste masivo conserva el alto de control. */
.et-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px}
.et-fila .et-selector{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 6px}
.et-fila .chips{margin-top:0;gap:8px 6px}
.et-fila .combo-btn{position:relative;overflow:visible;min-height:24px;height:auto;padding:2px 9px;font-size:var(--fs-xs);
  border-radius:var(--r-pill);border-style:dashed;color:var(--muted);font-weight:650}
.et-fila .combo-btn:hover,.et-fila .combo-btn:focus-visible{color:var(--text);border-color:var(--text)}
.et-fila .combo-btn::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--h-ico);transform:translateY(-50%)}
/* UI-181: los paneles que cuelgan de `body` (periodo y etiquetas) reusan
   .panel-filtro sin la clase .abierto, que el motor de tablas usa para ubicar
   y cerrar el suyo. El de etiquetas va `fixed` porque tambien vive dentro de
   celdas de .ax-tabla (UI-104). */
.panel-filtro.panel-flotante{display:block;z-index:60}   /* dentro de un <dialog>, el de etiquetas cuelga del propio dialogo (UI-182) */
.panel-filtro.panel-etiquetas{position:fixed}
.et-panel-crear{display:flex;align-items:center;gap:6px;padding:8px 10px;margin-top:4px;border-top:1px solid var(--border);
  border-radius:var(--r-ico);cursor:pointer;font-size:var(--fs-sm);color:var(--accent)}
.et-panel-crear:hover,.et-panel-crear:focus-visible{background:var(--accent-14)}
.et-panel-crear .mas{font-weight:700}
.et-panel-crear[hidden]{display:none}
/* UI-170: el boton "+ Etiqueta" del selector no se trunca a 250px como el resto de .combo-btn */
.combo-btn.combo-btn--libre{max-width:none}

.acum{width:54px;height:6px;border-radius:var(--r-pill);background:var(--border);display:inline-block;vertical-align:middle;overflow:hidden;margin-left:8px}
.acum i{display:block;height:100%;background:var(--accent)}
.aviso{border-radius:var(--r-card-sm);padding:9px 14px;margin-bottom:10px;font-size:var(--fs-sm);border:1px solid}
.aviso.info{background:var(--accent-14);border-color:var(--accent);color:var(--text)}
.aviso.ok{background:var(--sem-verde-12);border-color:var(--sem-verde);color:var(--text)}
.aviso.warn{background:var(--sem-amarillo-12);border-color:var(--sem-amarillo);color:var(--text)}
.aviso.err{background:var(--sem-rojo-10);border-color:var(--sem-rojo);color:var(--text)}
/* UI-062: estado de conexion del topbar -- reemplaza el badge de texto "sin
 * datos cargados" y el panel-conexion (eliminado, ver vista-cargar.js). Icono
 * propio (no emoji: un emoji de color no se puede tenir con CSS, ver
 * decisiones.md D-046) -- fondo en --accent (mismo verde de las pildoras
 * activas), flechas en --accent-text (variable ya definida para texto sobre
 * fondo de acento, no se hardcodea negro). */
.estado-conexion{display:flex;align-items:center;gap:8px}
/* UI-188: es la pildora de estado (.pill.verde / .pill.rojo) con el alto del
 * boton de reconexion que tiene al lado. */
.badge-estado{height:var(--h-ico);padding:0 12px}
.icon-btn.reconexion{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.icon-btn.reconexion:hover,.icon-btn.reconexion:focus-visible{filter:brightness(1.1)}

.zona{border:2px dashed var(--border-fuerte);border-radius:var(--r-card);padding:20px 16px;text-align:center;
  cursor:pointer;margin-bottom:12px;display:flex;flex-direction:column;gap:7px;background:var(--card)}
.zona:hover,.zona.sobre,.zona:focus-visible{border-color:var(--accent);background:var(--accent-14)}
.zona strong{font-size:var(--fs-lg)}
.m{color:var(--muted);font-size:var(--fs-sm)}
.archivos h3{font-size:var(--fs-md);margin:20px 0 10px;font-weight:650}
/* ---------- tarjeta de control (UI-186, .control-card de project:design) ----------
 * Franja de semaforo en un ::before con degradado (sigue la curva de las
 * esquinas sin overflow:hidden) e icono de estado con forma propia por estado,
 * para no depender solo del color. */
.control-card{position:relative;background:var(--card);border:1px solid var(--accent-16);border-left:4px solid transparent;
  border-radius:var(--r-card);padding:14px 16px}
.control-card::before{content:"";position:absolute;inset:-1px -1px -1px -4px;border-radius:inherit;pointer-events:none;
  background:var(--franja,none) left top / 4px 100% no-repeat}
.control-card.verde{--franja:linear-gradient(180deg,var(--sem-verde),transparent 85%)}
.control-card.amarillo{--franja:linear-gradient(180deg,var(--sem-amarillo),transparent 85%)}
.control-card.rojo{--franja:linear-gradient(180deg,var(--sem-rojo),transparent 85%)}
.control-card .titulo{margin:0;display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);font-weight:650;color:var(--text)}
.control-card .detalle{margin:4px 0 0 26px;font-size:var(--fs-xs);color:var(--muted)}
.control-card .detalle.rojo{color:var(--sem-rojo)}
.control-card .detalle.amarillo{color:var(--sem-amarillo)}
.estado-ico{display:inline-flex;flex-shrink:0}
.estado-ico svg{width:18px;height:18px}
.estado-ico.verde{color:var(--sem-verde)}
.estado-ico.amarillo{color:var(--sem-amarillo)}
.estado-ico.rojo{color:var(--sem-rojo)}
.lista-control{display:flex;flex-direction:column;gap:10px}
.vacio{background:var(--card);border:1px dashed var(--border-fuerte);border-radius:var(--r-card);
  padding:40px 20px;text-align:center;display:flex;flex-direction:column;gap:7px}
/* ---------- seccion colapsable (UI-017, primer uso en este proyecto) ---------- */
.colapsable-header{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  min-height:var(--tactil);padding:0 14px;margin-top:12px;background:var(--card);
  border:1px solid var(--border-fuerte);border-radius:var(--r-card-sm)}
.colapsable-header h3{margin:0;font-size:var(--fs-md);font-weight:650;color:var(--text)}
.colapsable-header:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.colapsable-chevron{color:var(--muted);transition:transform .15s;display:inline-block;font-size:var(--fs-lg)}
.colapsable-header.abierto .colapsable-chevron{transform:rotate(90deg)}
.colapsable-header.aviso{border-color:var(--sem-amarillo)}
.colapsable-header.aviso h3{color:var(--sem-amarillo)}
.colapsable-header.aviso .colapsable-chevron{color:var(--sem-amarillo)}
.colapsable-contenido{padding-top:10px}
.colapsable-contenido[hidden]{display:none}
.colapsable-header h3{flex:none}
.colapsable-resumen{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* UI-179: resumen real con la seccion cerrada */
.colapsable{margin-bottom:10px}
.colapsable > .colapsable-header{margin-top:0}
/* ---------- eliminar archivo cargado (UI-015) ---------- */
.icon-btn{width:var(--h-ico);height:var(--h-ico);display:inline-flex;align-items:center;justify-content:center;   /* propuesta: 32px, antes 44px */
  border-radius:var(--r-ico);border:1px solid var(--border-fuerte);background:transparent;   /* propuesta: radio 8px, antes 7px */
  color:var(--text);cursor:pointer;flex:0 0 auto;font-size:var(--fs-md)}   /* UI-111: blanco, antes var(--sem-rojo) */
.icon-btn:hover,.icon-btn:focus-visible{background:var(--card-alto);border-color:var(--muted)}
.icon-btn--peligro:hover,.icon-btn--peligro:focus-visible{background:var(--sem-rojo-10);border-color:var(--sem-rojo);color:var(--sem-rojo)}   /* UI-184: solo la accion que borra se pone roja */
.icon-btn svg{width:16px;height:16px;display:block}
/* ---------- dialogo modal unico (UI-182, dialog.dialogo de project:design) ---------- */
.dialogo{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:24px;
  background:var(--card);color:var(--text);border:1px solid var(--border-fuerte);border-radius:var(--r-card);
  box-shadow:var(--sombra-panel)}
.dialogo::backdrop{background:var(--overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dialogo-titulo{margin:0 0 14px;font-size:var(--fs-lg)}
.dialogo-cuerpo{display:flex;flex-direction:column;gap:14px}
.dialogo .dialogo-cuerpo>*{flex:none}   /* .campo-bloque trae flex-basis de la fila del formulario: en columna seria alto */
.dialogo-texto{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.dialogo-acciones{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:20px}
/* Dialogo de edicion: mas ancho para que el selector de etiquetas no quede apretado. */
.dialogo.editar{width:min(480px,calc(100vw - 32px))}
/* ---------- botones (UI-184): un solo patron --------------------------
 * .btn           accion neutra (Cancelar, una alternativa, un cambio de modo)
 * .btn-primario  la accion principal: la unica rellena de acento
 * .btn-peligro   la accion que borra (LNB): rojo tenue, no relleno
 * Los dos modificadores van siempre sobre .btn. */
.btn{min-height:var(--h-ctrl);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;
  border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);background:transparent;color:var(--text);
  font:var(--fs-sm)/1 var(--fuente);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted);background:var(--card-alto)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primario{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:650}
.btn-primario:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.1)}
.btn-primario:disabled{filter:none}
.btn-peligro{background:var(--sem-rojo-10);border-color:var(--sem-rojo);color:var(--sem-rojo);font-weight:650}
.btn-peligro:hover{background:var(--sem-rojo-10);border-color:var(--sem-rojo);filter:brightness(1.15)}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- secciones de vista ---------- */
.seccion{margin-bottom:14px}
.seccion h3{margin:0 0 4px;font-size:var(--fs-lg);font-weight:650}
.bajada{margin:0 0 12px}   /* UI-033: sin tope de 86ch, usa el ancho real del contenedor */
.nota-pie{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);max-width:86ch}
.tabla tr.subtotal td{font-weight:650;border-top:1px solid var(--border-fuerte)}
.tabla td.m{color:var(--muted)}
/* ---------- nota de contexto (patrimonio neto de Posicion, D-020; recibo de Sueldo) ---------- */
/* UI-177: el patrimonio neto pasa a tarjetas KPI; salen .patrimonio, .pat-fila y .pat-num */
.pat-contexto{background:var(--accent-14);border-top:1px solid var(--border);padding:14px 20px;
  display:flex;flex-direction:column;gap:5px}
.pat-contexto strong{font-size:var(--fs-md)}
.pat-contexto .m{max-width:86ch}
/* ---------- graficos ---------- */
.chart-card{background:var(--card);border:1px solid var(--accent-16);border-radius:var(--r-card);padding:10px 12px;margin-bottom:8px}   /* propuesta: borde con tinte de acento */
.chart-card h3{margin:0 0 8px;font-size:var(--fs-lg);font-weight:650}
/* UI-046: header interno de chart-card con un control a la derecha del titulo */
/* UI-053: min-height fijo para que el header de "Ingreso y egreso mes a mes"
   y el de "Comparación de meses" (que reusa esta misma clase, ver
   vista-evolucion.js) arranquen a la misma altura aunque uno tenga botones
   y el otro no -- condicion para que sus graficos queden con la misma base. */
.chart-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);flex-wrap:wrap;min-height:var(--h-ico);margin-bottom:8px}
.chart-card-head h3{margin:0}
.canvas-box{position:relative;height:180px}   /* UI-031: alternativa B, antes 230px (UI-016) */
.canvas-box.canvas-box--dona{height:170px}   /* UI-170: dona de la fila 50/50 (Egresos, Ingresos, Sueldo) */

/* UI-053 (Evolución): "Ingreso y egreso mes a mes" y ese grafico + "Comparación de meses" (antes "Qué
 * tan comparables son estos meses") lado a lado en una fila 50/50 con la
 * misma base y la misma altura. Pedido explicito del usuario (Camino B),
 * ver ChangeLogUI UI-053. Todo lo que sigue es exclusivo de estas dos
 * tarjetas de Evolución -- no toca .chart-card, .canvas-box ni .bajada
 * (compartidas por Dashboard/Deuda/Egresos/Ingresos y por el resto de la
 * app), por eso va con selectores propios en vez de tocar esas reglas. */
.grupo-derecha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* "Ver tasa de ahorro (%)" dentro del encabezado del grafico: --h-ico (UI-053). */
.chart-card-head .filtro.compacto{min-height:var(--h-ico);padding:0 12px;gap:6px}
/* UI-060: vuelve a stretch -- UI-054 habia probado sin stretch (align-items:
   flex-start) para que el aviso de meses flojos, adentro de "Comparación de
   meses", no le sumara espacio en blanco abajo a "Ingreso y egreso mes a
   mes". Pedido explicito del usuario tras verlo: las DOS TARJETAS (no solo
   los dos graficos de adentro) tienen que terminar a la misma altura, asi
   que se acepta el espacio en blanco a cambio del borde exterior parejo. */
.fila-charts{display:flex;align-items:stretch;gap:var(--gap)}
.fila-charts>.chart-card,.fila-charts>.seccion.cob{flex:1 1 0;min-width:0;margin-bottom:0}
.fila-charts .bajada{min-height:2.7em}
.fila-charts.fila-charts--sep{margin-bottom:14px}   /* UI-170: fila de graficos seguida de la tabla (Egresos, Ingresos, Sueldo) */
.zona-grafico{height:250px;overflow:hidden}
.zona-grafico .canvas-box{height:100%}
/* UI-124: sin el buscador global (`.ax-toolbar`, margin-bottom:10px) la tabla
   "Mes a mes" quedaba pegada a `.fila-charts` -- se repone un espacio chico
   propio en vez de tocar `.seccion` (usado por el resto de las vistas). */
.evo-tabla-mes{margin-top:10px}
/* UI-134: color del valor clickeable de Ingreso/Egreso en la tabla "Mes a
   mes" -- mismos tokens que ya usan las series homonimas del grafico de
   barras de arriba (dibujar(), --sem-verde/--sem-rojo), sin introducir ningun
   color nuevo. Scopeado a la vista para no afectar otras tablas que reusen
   `.valor-link` con otro sentido a futuro. */
.vista-evolucion .evo-tabla-mes td.ing .valor-link{color:var(--sem-verde)}
.vista-evolucion .evo-tabla-mes td.egr .valor-link{color:var(--sem-rojo)}

/* ---------- egresos / ingresos (UI-004, UI-005) ---------- */
/* barra de cobertura de la clasificacion: confirmada / automatica / sin clasificar */
.prog{height:9px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;display:flex}
.prog i{display:block;height:100%}
.prog i.conf{background:var(--sem-verde)}.prog i.auto{background:var(--accent)}.prog i.sin{background:var(--sem-amarillo)}
.leyenda-cob{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;font-size:var(--fs-xs);color:var(--muted)}
.leyenda-cob span{display:inline-flex;align-items:center;gap:6px}
.pt{width:9px;height:9px;border-radius:2px;display:inline-block}   /* cuadradito de leyenda de 9px, igual que .punto */
.pt.conf{background:var(--sem-verde)}.pt.auto{background:var(--accent)}.pt.sin{background:var(--sem-amarillo)}
/* espaciado alineado con .chart-card (UI-016, alternativa Compacto) */
.seccion.cob{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:10px 12px}
.seccion.cob h3{margin-bottom:10px}
.punto{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:9px;vertical-align:baseline;background:var(--punto)}   /* UI-170: el color de la serie llega como --punto */
.barra-mini{display:block;width:100%;min-width:90px;height:7px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.barra-mini i{display:block;height:100%}
/* Referencia de la rosca "Consumo por etiqueta" (D-060, Egresos) / "Ingreso por categoría" (D-061, Ingresos): etiqueta / % / valor. */
.leyenda-etq{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.leyenda-etq-fila{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);min-width:0}
.leyenda-etq-nombre{flex:1 1 auto;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leyenda-etq-valor{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Dos columnas (3 y 3), solo "Consumo por etiqueta": baja la altura de la tarjeta con hasta 6 filas de referencia. */
.leyenda-etq.dos-col{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto);column-gap:14px;row-gap:7px}
.tabla-sueldo td{font-size:var(--fs-md)}
.tabla td.neg{color:var(--sem-rojo)}
/* D-065: linea de anticipo de SAC/sueldo ya percibido dentro del desglose
 * de un recibo -- no es una retencion real, se distingue en ambar en vez
 * de rojo (que el proyecto reserva para un descuento real, D-031/D-044). */
.tabla td.warn{color:var(--sem-amarillo)}
.tabla td.sangria{padding-left:30px}

/* ---------- evolución y dashboard ---------- */
/* UI-119: semaforo de resultado mes a mes (reemplaza a la franja de
 * cobertura de clasificacion, D-025/D-052 la dejaron sin filo). Mismo
 * layout de columnas que tenia la franja vieja (.cob-*, retirada); la caja
 * usa la paleta de semaforo del proyecto (D-031), igual patron que
 * `.pill.verde`/`.pill.rojo`: fondo tenue + texto del color fuerte, sin
 * intensidad variable por magnitud -- "respetar los colores actuales" fue
 * pedido explicito del usuario. */
.sem-franja{display:flex;gap:6px;align-items:stretch;margin-top:10px;flex-wrap:wrap;height:100%}
.sem-mes{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;flex:1 1 44px}
.sem-caja{width:100%;height:52px;border-radius:var(--r-card-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:650;font-variant-numeric:tabular-nums}
.sem-caja.pos{background:var(--sem-verde-12);color:var(--sem-verde)}
.sem-caja.neg{background:var(--sem-rojo-10);color:var(--sem-rojo)}
.sem-lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:capitalize}
/* panel de advertencias (UI-001), sobre el patrón de UI-017 -- migrado por
 * completo de Dashboard a "Carga de archivos" (ver vista-cargar.js), mismo
 * formato agrupado por tipo. Cada advertencia suma un combo de verificación
 * manual: `.adv-item` la pone en fila con el `<select>` a la derecha. El
 * grupo "Verificadas" reusa `.adv-tipo` con el modificador `.ok` (verde en
 * vez de ámbar) para distinguirse del grupo de pendientes. */
.adv-tipo{margin:14px 0 6px;font-size:var(--fs-sm);font-weight:650;color:var(--sem-amarillo)}
.adv-tipo.ok{color:var(--sem-verde)}
.adv-lista{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.adv-lista li{font-size:var(--fs-sm);line-height:1.45}
.adv-lista .meta{display:block;font-size:var(--fs-xs);color:var(--tenue);margin-top:2px}
.adv-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.adv-texto{flex:1 1 auto;min-width:0}
.adv-verif{flex:0 0 auto;height:var(--h-ico);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);
  background:var(--card-alto);font:600 var(--fs-xs)/1 var(--fuente);padding:0 8px;margin-top:1px;cursor:pointer}
.adv-verif.pendiente{color:var(--sem-amarillo)}
.adv-verif.verificado{color:var(--sem-verde)}
.tabla td.der.neg{color:var(--sem-rojo)}
.ax-tabla td .neg{color:var(--sem-rojo)}

/* ---------- carga manual y editor de categorías ---------- */
.form-fila{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.campo-bloque{display:flex;flex-direction:column;gap:6px;flex:1 1 170px;min-width:150px}
.campo-lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:650}
.campo{min-height:var(--tactil);padding:0 12px;background:var(--bg);border:1px solid var(--border-fuerte);
  border-radius:var(--r-card-sm);color:var(--text);font:var(--fs-sm)/1 var(--fuente);width:100%}
.campo:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* UI-078: sin color-scheme, el navegador pinta los controles internos del
   date picker nativo (segmentos dia/mes/anio, icono y desplegable) con su
   esquema claro por default -- ni color ni background del proyecto se le
   aplican, aunque el resto de .campo si los herede. Acotado al input, no a
   :root, para no afectar otros controles nativos que no tengan el problema. */
input[type=date].campo,select.campo{color-scheme:dark}   /* UI-181: el desplegable nativo del select, oscuro */
/* UI-084 (D-052): sugerencia del motor de reglas en Clasificar -- el chip
 * con borde punteado en el acento y cursor de boton, para leer "todavia no
 * confirmada, clic para aplicarla" y no confundirla con una etiqueta ya
 * asignada. */
.chip.chip-sugerida{background:transparent;border:1px dashed var(--accent);color:var(--accent);font-weight:650;cursor:pointer}
.chip.chip-sugerida:hover,.chip.chip-sugerida:focus-visible{background:var(--accent-14)}
.cat-bloque{border:1px solid var(--border);border-radius:var(--r-card);margin-bottom:10px;overflow:hidden}
.cat-header{margin-top:0;border:0;border-bottom:1px solid var(--border);border-radius:0;
  background:var(--card-alto);gap:12px}
.cat-header h3{flex:0 0 auto}
.cat-header .meta{flex:1 1 auto;font-size:var(--fs-xs);color:var(--muted)}
.cat-acciones{padding:10px 14px 0;margin-bottom:0}
.cat-bloque .colapsable-contenido{padding:10px 14px 14px}
.cat-sub{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.cat-sub-nom{flex:1 1 auto;font-size:var(--fs-sm)}
.cat-sub .meta{font-size:var(--fs-xs);color:var(--tenue);white-space:nowrap}

/* UI-081: el boton "+ Etiqueta" dentro del formulario (Carga manual) tiene
   que verse IDÉNTICO a los demás .campo de la fila -- antes solo igualaba ancho/alineación, pero seguía
   con la altura (38px, --h-ctrl) y el radio (9px, --r-ctrl) de
   BOTÓN, no de CAMPO (44px --tactil, 7px --r-card-sm), y con fondo
   transparent en vez de --bg -- tres detalles que lo hacían ver mas bajo,
   con esquinas mas redondeadas y algo mas claro que sus vecinos. Fuera de
   un .campo-bloque (ej. la fila de una tabla) el combo sigue siendo un
   control de 38px como corresponde -- esto NO toca esa regla general. */
.campo-bloque .combo,.campo-bloque .combo-btn{width:100%;max-width:none}
.campo-bloque .combo-btn{min-height:var(--tactil);justify-content:flex-start;
  border-radius:var(--r-ctrl);background:var(--bg)}
.tabla td.sangria2{padding-left:48px}

/* ---------- Ajustes x Efectivo (UI-068): tabla con autofiltro por columna ---------- */
.ax-toolbar{display:flex;gap:var(--gap);margin-bottom:10px}
.ax-busc-global{flex:1 1 auto}
.th-inner{display:flex;align-items:center;gap:6px}
/* UI-198: el titulo sigue la alineacion de su columna. En una de importe el
 * embudo va a la izquierda, asi el texto del titulo termina donde terminan
 * los importes. */
th.der .th-inner{justify-content:flex-end}
th.der .th-inner .filtro-btn{order:-1}
th.centro .th-inner{justify-content:center}
/* El texto del titulo (padding de la celda + los 4px del boton de orden)
 * arranca y termina a la misma distancia del borde que el de las celdas (10px). */
.ax-tabla th{padding-left:6px;padding-right:6px}
.filtro-btn{position:relative;background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;
  border-radius:var(--r-ico);display:inline-flex;font-size:var(--fs-sm);line-height:1}
.filtro-btn svg{width:12px;height:12px;display:block}  /* UI-180: embudo */
.filtro-btn:hover{color:var(--accent);background:var(--accent-14)}
.filtro-btn.activo{color:var(--accent)}
/* UI-076: `left`/`top` ya no vienen de acá -- se calculan en JS
 * (getBoundingClientRect(), togglePanel() en vista-ajustes-efectivo.js) para
 * que el panel cuelgue de `raiz` en vez del <th> y no quede recortado por
 * `.ax-tabla-wrap` (`overflow-x:auto`, heredado de `.tabla-wrap`, obliga al
 * navegador a recortar también el eje vertical aunque `overflow-y` nunca se
 * haya tocado -- gotcha del spec de overflow).
 * Propuesta "filtros ampliados" (18/09/2026): ancho 230->280px -- el fijo
 * anterior dejaba valores largos (un nombre de contraparte, el arbol de
 * Fecha) apretados. `ubicarPanel()` en tabla-transferencias.js corrige la
 * posicion horizontal en JS si a este ancho no entra a la derecha de la
 * columna. */
.panel-filtro{position:absolute;z-index:20;background:var(--card-alto);
  border:1px solid var(--border-fuerte);border-radius:var(--r-card-sm);box-shadow:var(--sombra-panel);
  width:280px;padding:8px;display:none}
.panel-filtro.abierto{display:block}
.panel-filtro .busc-panel{width:100%;height:var(--h-ico);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);
  background:var(--bg);color:var(--text);font-size:var(--fs-xs);padding:0 8px;margin-bottom:6px}
/* UI-136: panel de una columna `filtroTexto` -- mismo `.panel-filtro`, sin
   `.lista-valores` (no hay checklist). `.lbl-panel` y `.conteo` son las
   unicas piezas nuevas. */
.panel-filtro .lbl-panel{display:block;font-size:11px;color:var(--muted);text-transform:none;
  letter-spacing:normal;margin-bottom:6px}
.panel-filtro .conteo{font-size:11px;color:var(--muted);margin:-2px 0 6px}
/* Techo/default 180->340px -- `ubicarPanel()` en tabla-transferencias.js
 * ajusta el `max-height` real en linea segun el espacio libre hasta el
 * borde del viewport en cada apertura; este valor solo importa como
 * fallback (JS deshabilitado) o mientras el panel recien se inserta. */
.lista-valores{max-height:340px;overflow-y:auto}
.lista-valores label{display:flex;align-items:center;gap:7px;min-height:var(--h-ico);font-size:var(--fs-xs);padding:4px 2px;cursor:pointer}
.panel-acciones{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
/* UI-072 (vigente tras UI-076, aunque el panel ya no cuelga de un <th>):
 * reset defensivo de .panel-acciones para que no herede text-transform:uppercase +
 * letter-spacing de `.tabla th` por ningún contexto futuro -- en mayúsculas
 * y con letras separadas, "Limpiar filtro"+"Seleccionar todos" no entran uno
 * a cada lado del panel (230px) y quedan pegados pese al space-between. */
.panel-acciones button{font:inherit;background:none;border:none;padding:0;   /* UI-195: boton con aspecto de enlace */
  font-size:11px;text-transform:none;letter-spacing:normal;font-weight:500;
  color:var(--accent);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;min-height:var(--h-ico)}
/* fila compacta -- pedido explicito del usuario tras ver la propuesta */
.ax-tabla td{padding:3px 10px;line-height:1.2}
.ax-tabla td .campo{min-height:var(--h-ico);width:100%}   /* UI-111: .campo entero (44px, D-031) no entra en una fila compacta de esta tabla */
/* UI-079: la regla `.ax-tabla td.meta` se elimina -- era la causa de que la
 * columna "CBU / CUIT" se viera con letra mas chica y color apagado que el
 * resto (`clase:'meta'` ya no se usa en ninguna celda de esta tabla, ver
 * vista-ajustes-efectivo.js). */
/* UI-079 (D-051 addendum): panel de autofiltro de la columna Fecha, agrupado
 * por año y por mes, colapsado por defecto -- pedido explicito del usuario
 * tras ver el ejemplo visual. `.grupo-anio`/`.grupo-mes` son contenedores
 * genericos (no exclusivos de `.ax-tabla`) por si otra columna de otra
 * vista necesita el mismo agrupado a futuro. */
.grupo-anio > .grupo-cab, .grupo-mes > .grupo-cab{
  display:flex;align-items:center;gap:6px;min-height:var(--h-ico);cursor:pointer;user-select:none;padding:4px 2px;border-radius:var(--r-ico)}
.grupo-anio > .grupo-cab:hover, .grupo-mes > .grupo-cab:hover{background:var(--accent-08)}
.grupo-toggle{width:16px;height:16px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  font:inherit;background:none;padding:0;cursor:pointer;   /* UI-195: es un <button> */
  border:1px solid var(--border-fuerte);border-radius:4px;font-size:11px;line-height:1;color:var(--muted)}   /* caja de 16px, como un checkbox */
.grupo-anio > .grupo-cab .grupo-toggle{color:var(--accent);border-color:var(--accent-32)}
.grupo-anio .grupo-nombre{font-size:var(--fs-xs);font-weight:700;color:var(--text)}
.grupo-mes .grupo-nombre{font-size:var(--fs-xs);font-weight:600;color:var(--text);text-transform:capitalize}
.grupo-cuenta{margin-left:auto;font-size:11px;color:var(--tenue)}
.grupo-mes{margin-left:16px;margin-top:2px}
.grupo-anio .grupo-hijos{display:none}
.grupo-anio.abierto > .grupo-hijos{display:block}
.grupo-mes .grupo-hijos{display:none;margin-left:16px}
.grupo-mes.abierto > .grupo-hijos{display:block}
select.ax-clasif{height:var(--h-ico);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);
  background:var(--card-alto);font-size:var(--fs-xs);padding:0 6px;width:100%;background-color:var(--card-alto)}
/* Solo el TEXTO cambia de color por estado -- nunca el borde (pedido explicito del usuario). */
select.ax-clasif.pendiente{color:var(--sem-amarillo)}
select.ax-clasif.gasto{color:var(--muted)}
select.ax-clasif.efectivo{color:var(--chart-3)}
select.ax-clasif.propia{color:var(--sem-verde)}
/* UI-082: "Transferencia de tercero" en Transferencias entrantes -- cuenta como ingreso normal, mismo peso visual que "Gasto". */
select.ax-clasif.ingreso{color:var(--muted)}
.ax-pie{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:var(--fs-sm);color:var(--muted)}
.ax-pie select{height:var(--h-ico);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);background:var(--card-alto);
  color:var(--text);font-size:var(--fs-xs);padding:0 8px;margin:0 6px}
.ax-pie .paginacion{display:flex;align-items:center;gap:10px}
.ax-pie .paginacion button{height:var(--h-ico);width:var(--h-ico);border-radius:var(--r-ico);border:1px solid var(--border-fuerte);
  background:var(--card-alto);color:var(--text);cursor:pointer}
.ax-pie .paginacion button:disabled{opacity:.4;cursor:default}

/* Ordenar columnas (UI-070) -- botón de header, mismo patrón visual que .filtro-btn */
.th-orden{position:relative;background:none;border:none;color:var(--tenue);cursor:pointer;padding:2px 4px;
  font:600 var(--fs-xs)/1 var(--fuente);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  min-width:var(--h-ico);text-align:inherit}
.th-orden::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--h-ico);transform:translateY(-50%)}   /* UI-190 */
.th-orden:hover{color:var(--accent)}
.th-orden.activo{color:var(--accent)}
.th-orden:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ico)}

/* UI-201: indicador del filtro que llega de un grafico o de otra vista: aspecto
 * de filtro activo (tinte, borde y texto del acento), alto de control. */
.filtro-indicador{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;height:var(--h-ctrl);
  padding:0 12px 0 14px;border:1px solid var(--accent);border-radius:var(--r-ctrl);background:var(--accent-14);
  color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.filtro-indicador:hover{background:var(--accent-32)}
.filtro-indicador-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtro-indicador-x{flex:none;font-size:12px;line-height:1}
/* Header de seccion de una tabla (Egresos, Ingresos): titulo a la izquierda,
 * indicador del filtro contra la derecha. */
.tabla-head{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;min-height:var(--h-ctrl);margin-bottom:8px}
.tabla-head h3{margin:0;font-size:var(--fs-lg);font-weight:650;flex:1 1 auto}
.tabla-head .filtro-indicador{margin-left:auto}

/* Ajuste masivo de clasificación (UI-071, Alternativa A: aplica al filtro activo) */
.ax-masivo-mount:empty{display:none;margin:0}
.ax-masivo-mount{margin-bottom:10px}
.ax-masivo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-14);
  border:1px solid var(--accent);border-radius:var(--r-card);padding:10px 14px}
.ax-masivo-texto{font-size:var(--fs-sm);color:var(--text);font-weight:600;white-space:nowrap}
.ax-masivo-clasif{height:var(--h-ctrl);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);
  background:var(--card-alto);color:var(--text);font:var(--fs-sm)/1 var(--fuente);padding:0 10px;min-width:180px}
/* UI-101: el selector de etiquetas de masivoExtra() (D-052) arranca siempre
 * sin chips asignados -- sin este override, .et-selector queda en columna
 * (default de la regla de arriba) con el div .chips vacio ocupando su
 * margin-top igual, lo que empuja el boton "+ Etiqueta" mas abajo que
 * "Aplicar"/"Confirmar como está" dentro del flex centrado de .ax-masivo.
 * Mismo override que .et-fila ya usa para el mismo componente. */
.ax-masivo .et-selector{flex-direction:row;align-items:center;gap:6px}
.ax-masivo .chips{margin-top:0}
/* UI-073: salida de emergencia -- limpia todos los filtros de columna y el
 * buscador global en un solo clic. Empujada al extremo derecho de la barra
 * (margin-left:auto en un flex) para separarla visualmente de los controles
 * de aplicar clasificación, que son la acción principal de esta barra. */
.ax-masivo-quitar{margin-left:auto;background:none;border:none;color:var(--accent);
  text-decoration:underline;font-size:var(--fs-xs);cursor:pointer;white-space:nowrap;padding:4px 2px}
.ax-masivo-quitar:hover{color:var(--accent);opacity:.8}
/* UI-205 (project:design v1.48): fila que lleva a otra vista. Un clic en la
   fila (salvo en sus botones y campos) abre el destino; con el mouse encima o
   el foco adentro, el hover de siempre y la flecha en una columna propia al
   final. La columna ocupa su lugar siempre (solo cambia la opacidad) y la
   flecha no suma alto a la fila (margen negativo): la tabla no se mueve. */
.ax-tabla tbody tr.fila-link{cursor:pointer}
.ax-tabla tbody tr.fila-link:hover td,.ax-tabla tbody tr.fila-link:focus-within td{background:var(--accent-05)}
.ax-tabla .col-ir{width:44px;padding-top:0;padding-bottom:0;text-align:center}
.fila-ir{display:inline-flex;align-items:center;justify-content:center;width:var(--h-ico);height:var(--h-ico);margin:-8px 0;
  padding:0;border:0;border-radius:var(--r-ico);background:none;color:var(--accent);cursor:pointer;opacity:0;vertical-align:middle}
.fila-ir svg{width:18px;height:18px}
.ax-tabla tr.fila-link:hover .fila-ir,.ax-tabla tr.fila-link:focus-within .fila-ir{opacity:1}
/* UI-205: valor que lleva a otra vista (ej. el importe de Evolucion). En
   reposo, igual al texto; con el mouse o el foco pasa al acento y muestra la
   flecha AFUERA del texto, en el relleno derecho de la columna, que por eso
   es mas ancho en toda la columna (titulo, celdas y pie): el importe sigue
   alineado con su total. */
.ax-tabla .col-link{padding-right:30px}
.valor-link{position:relative;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.valor-link-flecha{position:absolute;left:calc(100% + 4px);top:50%;width:18px;height:18px;margin-top:-9px;color:var(--accent);opacity:0}
.valor-link-flecha svg{display:block;width:18px;height:18px}
.valor-link:hover,.valor-link:focus-visible{color:var(--accent)}
.valor-link:hover .valor-link-flecha,.valor-link:focus-visible .valor-link-flecha{opacity:1}

/* Datos propios (UI-069) */
.seccion.dp{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px}
.dp-subtitulo{font-size:var(--fs-sm);font-weight:650;color:var(--text);margin:0 0 6px}
.dp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* UI-188: chip de etiqueta -- un valor dentro de una lista (etiqueta,
 * identificador propio, tipo de operacion). Un solo tamaño en toda la app;
 * lleva .chip-quitar cuando el valor se puede sacar. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tabla .chips{gap:8px 6px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 10px;background:var(--card-alto);
  border:1px solid var(--border-fuerte);border-radius:var(--r-pill);color:var(--text);font-size:var(--fs-xs);line-height:1.25;white-space:nowrap}
.chip:has(.chip-quitar){padding-right:3px}
.chip-quitar{background:none;border:none;color:var(--tenue);cursor:pointer;font-size:12px;
  width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;position:relative}
/* UI-190: area tactil de --h-ico sin agrandar el glifo (accesibilidad.md,
 * "Nada por debajo de la escala"): un pseudo-elemento invisible centrado. */
.chip-quitar::after,.filtro-btn::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--h-ico);height:var(--h-ico);transform:translate(-50%,-50%)}
.chip-quitar:hover{background:var(--sem-rojo-10);color:var(--sem-rojo)}
.dp-cuentas input,.dp-cuentas select{width:100%;height:var(--h-ico);border-radius:var(--r-ctrl);border:1px solid var(--border-fuerte);
  background:var(--card-alto);color:var(--text);font-size:var(--fs-sm);padding:0 8px}
.dp-agregar-cuenta{margin-top:10px}
.dp-probador{background:var(--card-alto);border:1px solid var(--border);border-radius:var(--r-card-sm);padding:14px 16px}
.dp-probador input{margin-bottom:10px}
.dp-resultado{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);min-height:20px}
.dp-resultado.ok{color:var(--sem-verde)}
.dp-resultado.no{color:var(--tenue)}

/* ---------- ARQ-031: pantalla de acceso (.login-card de project:design) ----------
 * Una sola tarjeta que cambia de paso: Google, frase, recuperacion y el alta
 * en tres pasos. Mientras esta abierta, la cabecera y el contenido se ocultan. */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:min(440px,100%);background:var(--card);border:1px solid var(--accent-16);border-radius:var(--r-card);
  padding:28px 28px 18px;box-shadow:var(--sombra-panel);display:flex;flex-direction:column;gap:14px}
.login-marca{margin:0;font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.login-card h1{margin:0;font-size:var(--fs-lg);line-height:var(--lh-titulo);font-weight:650}
.login-ayuda{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.login-card form{display:flex;flex-direction:column;gap:14px;margin:0}
.login-card .campo-bloque{flex:none;min-width:0}
.login-card .campo{width:100%}
.login-card .btn-primario{width:100%;min-height:var(--tactil)}
.campo-ayuda{font-size:var(--fs-xs);color:var(--muted)}
/* Accion secundaria como enlace de texto (Usar la clave, Cerrar sesion, Volver) */
.enlace-texto{align-self:center;min-height:var(--h-ctrl);padding:0 8px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--fs-md);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.enlace-texto:hover{color:var(--text)}
.login-enlaces{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px}

/* Campo de frase con «Mostrar contraseña» adentro */
.campo-clave{position:relative}
.campo-clave .campo{width:100%;padding-right:calc(12px + var(--h-ico))}
.campo-ver-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:var(--h-ico);height:var(--h-ico);
  display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);border-radius:var(--r-ico);cursor:pointer}
.campo-ver-clave:hover{color:var(--text)}
.campo-ver-clave svg{width:18px;height:18px}

/* Clave de recuperacion: se muestra una sola vez, al crear la frase */
.clave-recuperacion{margin:0;padding:14px 12px;text-align:center;font:600 17px/1.7 ui-monospace,Consolas,monospace;
  letter-spacing:.06em;background:var(--bg);border:1px dashed var(--accent-55);border-radius:var(--r-ctrl);user-select:all}
.clave-acciones{display:flex;gap:10px}
.clave-acciones .btn{flex:1}
.campo-clave-mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em}

/* Pasos del alta: Cuenta, Frase secreta, Clave de recuperacion */
.pasos-alta{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.pasos-alta li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
.pasos-alta li::before{content:"";height:4px;border-radius:var(--r-pill);background:var(--border-fuerte)}
.pasos-alta li.hecho::before{background:var(--accent-55)}
.pasos-alta li.actual{color:var(--text);font-weight:650}
.pasos-alta li.actual::before{background:var(--accent)}

/* ---------- ARQ-031: Administracion > Respaldo (alternativa B) ---------- */
.grilla-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);margin-bottom:18px}
.grilla-control .control-card{display:flex;flex-direction:column}
.grilla-control .control-card .accion{margin:10px 0 0 26px;align-self:flex-start}
.acciones-fila{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}