/* ================================================================
   SISTEMA DE DISEÑO — FINANZAS EN ORDEN
   Archivo: css/main_nuevo.css
   Generado en Etapa 0 del rediseño visual.
   Extraído de diseno_referencia.html
   ================================================================ */

/* ================================================================
   1. VARIABLES CSS (custom properties)
   ================================================================ */
:root {
	/* Colores principales */
	--color-dark:      #0f2744;   /* Navbar, login bg, sidebar si aplica */
	--color-dark-lt:   #1a3a5c;   /* Hover en dark */
	--color-accent:    #0ea5e9;   /* Sky blue — botones, links activos, focus */
	--color-accent-dk: #0284c7;   /* Hover de accent */
	--color-accent-lt: #f0f9ff;   /* Fondo tinte accent */

	/* Semantica financiera */
	--color-positive:  #059669;   /* Ingresos, saldos a favor */
	--color-pos-lt:    #ecfdf5;
	--color-negative:  #dc2626;   /* Gastos, saldos negativos */
	--color-neg-lt:    #fef2f2;
	--color-warning:   #d97706;   /* Edicion, advertencias, pendientes */
	--color-warn-lt:   #fffbeb;

	/* Neutros */
	--color-text:      #0f172a;   /* Texto principal */
	--color-text-mid:  #475569;   /* Texto secundario */
	--color-muted:     #94a3b8;   /* Placeholder, labels */
	--color-border:    #e2e8f0;   /* Bordes cards/inputs */
	--color-border-dk: #cbd5e1;   /* Bordes hover */
	--color-bg:        #f8fafc;   /* Fondo de pagina */
	--color-white:     #ffffff;   /* Fondo de cards */

	/* Tipografia */
	--font-base: 'DM Sans', sans-serif;
	--text-xs:   11px;
	--text-sm:   12px;
	--text-base: 13px;
	--text-md:   14px;
	--text-lg:   16px;
	--text-xl:   20px;
	--text-2xl:  24px;
	--text-3xl:  28px;

	/* Radios */
	--radius-sm:  6px;
	--radius-md:  8px;
	--radius-lg: 12px;

	/* Sombras */
	--shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--shadow-login: 0 20px 60px rgba(0,0,0,.25);

	/* Layout */
	--nav-height:   46px;
	--content-max:  1440px;	/* 1200px + 20% (pedido de Jorge 2026-10-02); Cuentas (.content-wide) sigue en 1440px */
	--content-pad:  28px;

	/* Texto sobre los tintes (badges, avisos, etiquetas, bloques de monto) */
	--color-pos-tx:    #065f46;
	--color-neg-tx:    #991b1b;
	--color-warn-tx:   #92400e;
	--color-info-tx:   #075985;
	--color-accent-tx: #0369a1;

	/* Bordes de los tintes */
	--color-pos-bd:    #a7f3d0;
	--color-neg-bd:    #fca5a5;
	--color-warn-bd:   #fde68a;
	--color-info-bd:   #bae6fd;

	/* Botones sólidos: fondo, fondo al pasar el mouse y color del texto.
	   Van aparte de los colores semánticos porque en el tema oscuro el verde
	   y el azul se aclaran para leerse sobre el fondo, y un botón aclarado
	   dejaría de contrastar con su propio texto blanco. */
	--btn-accent-bg:   #0ea5e9;
	--btn-accent-hv:   #0284c7;
	--btn-pos-bg:      #059669;
	--btn-pos-hv:      #047857;
	--btn-neg-bg:      #dc2626;
	--btn-neg-hv:      #b91c1c;
	--btn-warn-bg:     #d97706;
	--btn-warn-hv:     #b45309;
	--btn-login-bg:    #0f2744;
	--btn-login-hv:    #1a3a5c;
	--color-on-accent: #ffffff;

	/* Superficies y detalles */
	--color-surface-2:  #f1f5f9;   /* Fondos sutiles: canal de las barras */
	--color-border-lt:  #f1f5f9;   /* Separador entre filas de una tabla */
	--color-highlight:  #fef3c7;   /* Fila o tarjeta resaltada */
	--color-neg-lt2:    #fecaca;   /* Tinte rojo al pasar el mouse */
	--color-pos-lt2:    #a7f3d0;   /* Tinte verde al pasar el mouse */
	--color-diezmo:     #fefce8;   /* Fila de diezmo */
	--color-diezmo-hv:  #fef9c3;
	--color-pos-soft:   #6ee7b7;   /* Barra de ahorro */
	--color-violeta:    #7c3aed;   /* Icono de cuenta digital */
	--color-violeta-lt: #f5f3ff;
	--logo-fondo:       #ffffff;   /* Plaquita donde se pintan los logos */
	/* Tinta para lo que va SIEMPRE sobre un fondo pastel claro, en los dos
	   temas: la barra del Fondo de Emergencias. A proposito no se redefine
	   en el tema oscuro, porque el degradado de esa barra tampoco cambia. */
	--color-tinta-pastel: #0f172a;

	/* Gráficas: las lee js/tema.js y de ahí las toman Chart.js y Google Charts */
	--grafica-texto:        #475569;
	--grafica-texto-fuerte: #334155;
	--grafica-texto-suave:  #64748b;
	--grafica-rejilla:      #e2e8f0;
	--grafica-linea:        #94a3b8;
	--grafica-eje:          #94a3b8;
	--grafica-base:         #cbd5e1;
	--grafica-fondo:        #ffffff;

	/* Que el navegador pinte del color correcto lo suyo: barras de scroll,
	   selects nativos, calendarios de los campos de fecha */
	color-scheme: light;
}

/* ================================================================
   TEMA OSCURO
   ================================================================
   Solo se redefinen colores: medidas, tipografía, radios y sombras de
   posición son las mismas del tema claro. El atributo data-tema lo pone
   imprimirArranqueTema() (funciones.php) antes del primer pintado, y
   js/tema.js lo cambia cuando el usuario elige otra opción.

   Ojo con dos nombres heredados del tema claro: --color-white es "el
   fondo de las tarjetas" (aquí es azul oscuro, no blanco) y --color-dark
   es "el fondo del navbar y del login", que aquí se hace todavía más
   oscuro que la página para que la barra siga separándose del contenido.
   ================================================================ */
html[data-tema="oscuro"] {
	color-scheme: dark;

	/* Colores principales */
	--color-dark:      #0a1424;
	--color-dark-lt:   #17314e;
	--color-accent:    #38bdf8;
	--color-accent-dk: #7dd3fc;
	--color-accent-lt: #10283c;

	/* Semántica financiera: se aclaran para que el verde y el rojo se lean
	   sobre el fondo oscuro; los tintes pasan a ser fondos oscuros teñidos */
	--color-positive:  #34d399;
	--color-pos-lt:    #0d2b23;
	--color-negative:  #f87171;
	--color-neg-lt:    #301518;
	--color-warning:   #fbbf24;
	--color-warn-lt:   #2c2110;

	/* Neutros */
	--color-text:      #e2e8f0;
	--color-text-mid:  #a5b4c8;
	--color-muted:     #7c8ba1;
	--color-border:    #22314a;
	--color-border-dk: #35486a;
	--color-bg:        #0b1220;
	--color-white:     #141d30;

	/* Sombras: sobre fondo oscuro una sombra suave no se ve, se necesita
	   más negro para que la tarjeta siga despegándose del fondo */
	--shadow-card:  0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
	--shadow-login: 0 20px 60px rgba(0,0,0,.6);

	/* Texto sobre los tintes */
	--color-pos-tx:    #6ee7b7;
	--color-neg-tx:    #fca5a5;
	--color-warn-tx:   #fcd34d;
	--color-info-tx:   #7dd3fc;
	--color-accent-tx: #7dd3fc;

	/* Bordes de los tintes */
	--color-pos-bd:    #14503d;
	--color-neg-bd:    #7f2427;
	--color-warn-bd:   #6b4712;
	--color-info-bd:   #12496b;

	/* Botones sólidos: se quedan con los tonos fuertes del tema claro
	   porque el texto encima sigue siendo blanco */
	--btn-accent-bg:   #0284c7;
	--btn-accent-hv:   #0369a1;
	--btn-pos-bg:      #059669;
	--btn-pos-hv:      #047857;
	--btn-neg-bg:      #dc2626;
	--btn-neg-hv:      #b91c1c;
	--btn-warn-bg:     #b45309;
	--btn-warn-hv:     #92400e;
	/* El navy de la marca se pierde contra la tarjeta oscura, así que el
	   botón de ingresar pasa al azul de la aplicación */
	--btn-login-bg:    #0284c7;
	--btn-login-hv:    #0369a1;
	--color-on-accent: #ffffff;

	/* Superficies y detalles */
	--color-surface-2:  #1a2437;
	--color-border-lt:  #1c2739;
	--color-highlight:  #3b2f10;
	--color-neg-lt2:    #43191d;
	--color-pos-lt2:    #124030;
	--color-diezmo:     #2a2611;
	--color-diezmo-hv:  #383115;
	--color-pos-soft:   #34d399;
	--color-violeta:    #a78bfa;
	--color-violeta-lt: #241f3d;
	/* Los logos de cuentas y atajos son PNG con fondo transparente y muchos
	   vienen en tinta oscura, así que su plaquita se mantiene clara; apenas
	   se apaga un punto para que no encandile de noche */
	--logo-fondo:       #eef2f8;

	/* Gráficas */
	--grafica-texto:        #a5b4c8;
	--grafica-texto-fuerte: #e2e8f0;
	--grafica-texto-suave:  #8496ad;
	--grafica-rejilla:      #22314a;
	--grafica-linea:        #64748b;
	--grafica-eje:          #8496ad;
	--grafica-base:         #35486a;
	--grafica-fondo:        #141d30;
}

/* El logo de la marca es tinta negra sobre transparente: se lee sobre la
   barra clara del tema claro, pero desaparece sobre el fondo oscuro. Se
   invierte para que quede en blanco, y el giro de tono devuelve el rojo del
   sello BETA, que la inversión sola dejaría en cian. */
html[data-tema="oscuro"] .nav-logo,
html[data-tema="oscuro"] .login-logo-wrap img { filter: invert(1) hue-rotate(180deg); }

/* ================================================================
   2. RESET Y BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: var(--font-base);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--text-md);
	line-height: 1.5;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dk); }
select, input, textarea, button { font-family: inherit; }

/* ================================================================
   3. TIPOGRAFIA
   ================================================================ */
/* Escala tipografica aplicada via variables */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.font-600  { font-weight: 600; }
.text-muted { color: var(--color-muted); }

/* ================================================================
   4. LAYOUT PRINCIPAL (.app-main)
   ================================================================ */
.app-main {
	flex: 1;
}
.content {
	flex: 1;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 28px var(--content-pad);
	width: 100%;
}

/* Pagina de cuentas: ancho ampliado y columnas con mas aire */
.content-wide { max-width: 1440px; }

/* Proyectos en Orden: sus tablas traen mas columnas, ocupa el 90% de la pantalla */
.content-proyectos { max-width: 90%; }
/* Home de Proyectos en Orden: tarjetas de clientes (mismas .atajo-card del
   modal de atajos pero más amplias, con logo grande y el conteo de
   desarrollos activos debajo del nombre). */
.clientes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
}
.clientes-grid .atajo-card { padding: 18px 14px; gap: 10px; }
.clientes-grid .atajo-logo { height: 88px; }
.clientes-grid .atajo-nombre { font-size: var(--text-lg); }

/* Principal (mipresupuesto.php): tarjetas de Bancos con las .atajo-card de
   Gasto rápido; saldo total del banco y debajo cuánto es para usar y cuánto
   de ahorros. No son clicables: sin el efecto al pasar el mouse. */
.bancos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
}
.bancos-grid .banco-card:hover {
	border-color: var(--color-border);
	box-shadow: none;
	transform: none;
}
.banco-total { font-size: var(--text-lg); text-align: center; }

/* Menú de tres puntos con las opciones de un cliente (pedido de Jorge del
   2026-09-04). Reemplaza la fila de botones de la barra superior: uno va
   junto al nombre del cliente y otro en la esquina de cada tarjeta. */
.menu-opciones { position: relative; display: inline-block; }
.menu-opciones-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-text-mid);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, background .12s, color .12s;
}
.menu-opciones-boton:hover,
.menu-opciones.open .menu-opciones-boton {
	border-color: var(--color-accent);
	color: var(--color-text);
}
.menu-opciones-lista {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 210px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 6px;
	z-index: 200;
	display: none;
	text-align: left;
}
.menu-opciones.open .menu-opciones-lista { display: block; }
/* La lista se abre hacia la izquierda cuando el botón vive en una esquina. */
.menu-opciones-derecha .menu-opciones-lista { left: auto; right: 0; }
/* Junto al nombre del cliente, dentro del título de la pantalla. */
.menu-opciones-titulo { vertical-align: middle; margin-left: 8px; }
.menu-opciones-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-text-mid);
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s, color .12s;
}
.menu-opciones-item:hover {
	background: var(--color-bg);
	color: var(--color-text);
	text-decoration: none;
}
.menu-opciones-item .bi { font-size: 14px; }

/* Tarjeta de cliente con su menú en la esquina: el enlace sigue ocupando
   toda la tarjeta y el botón va por fuera del enlace, en una franja superior
   que la tarjeta le reserva (padding-top), alineado con el borde derecho del
   recuadro del logo. Así el botón no se monta sobre el logo (pedido de Jorge
   del 2026-09-04). */
.cliente-tarjeta { position: relative; display: flex; }
.cliente-tarjeta > .atajo-card { flex: 1; padding-top: 44px; }
.cliente-tarjeta > .menu-opciones {
	position: absolute;
	top: 8px;
	right: 14px;
	z-index: 5;
}
.cliente-tarjeta > .menu-opciones .menu-opciones-boton {
	border-color: transparent;
	background: transparent;
	color: var(--color-muted);
}
.cliente-tarjeta > .menu-opciones .menu-opciones-boton:hover,
.cliente-tarjeta > .menu-opciones.open .menu-opciones-boton {
	border-color: var(--color-border);
	background: var(--color-white);
	color: var(--color-text);
}
/* Campo "Desarrollos trabajados" de la bitácora de horas (hora_nueva.php y
   hora_editar.php): etiquetas de los desarrollos elegidos y lista de
   sugerencias del buscador. Las etiquetas también salen en las listas de
   proyectos_horas.php. El JavaScript está en js/desarrollos-hora.js. */
.hde-campo { position: relative; }
.hde-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hde-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-accent-lt);
	color: var(--color-text);
	font-size: 13px;
}
.hde-chip .hde-quitar { color: var(--color-text-muted); text-decoration: none; font-size: 15px; line-height: 1; }
.hde-chip .hde-quitar:hover { color: var(--color-negative); }
.hde-sugerencias {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 50;
	background: var(--color-white);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	max-height: 220px;
	overflow-y: auto;
}
.hde-sugerencia { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.hde-sugerencia:hover, .hde-sugerencia-activa { background: var(--color-accent-lt); }
/* Línea de contexto de cada sugerencia (pedido de Jorge del 2026-09-09):
   sistema y módulo, la etiqueta de color del estado y la etapa en curso, en
   un solo renglón que salta de línea si no cabe. */
.hde-sugerencia small {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	color: var(--color-text-muted);
}

/* Tarjeta de acción de Facturación (pedido de Jorge del 2026-09-04): un
   texto a la izquierda y sus botones a la derecha ("Cerrar el mes" / "Mes
   cobrado" en la cuenta de cobro, la jornada en curso en Horas). En
   pantallas angostas los botones bajan a su propia línea. */
.card-accion {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}
/* Botonera alineada al inicio dentro de una tarjeta o un formulario (la
   .page-head-actions normal va al final de la cabecera de la página) */
.page-head-actions.acciones-inicio { justify-content: flex-start; }
/* Formulario en una sola fila: el renombrar en línea de Sistemas y Módulos
   y el "Inicié a trabajar" de Horas. Los campos dejan de ocupar todo el
   ancho; el de texto crece hasta un tope. */
.form-en-linea {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.form-en-linea .form-input { width: auto; }
.form-en-linea input[type="text"].form-input { flex: 1 1 auto; max-width: 320px; }

#cueTabla th:nth-child(1), #cueTabla td:nth-child(1) { width: 28%; }
#cueTabla th:nth-child(2), #cueTabla td:nth-child(2) { display: none; }
#cueTabla th:nth-child(3), #cueTabla td:nth-child(3) { width: 18%; }
#cueTabla th:nth-child(4), #cueTabla td:nth-child(4) { width: 16%; }
#cueTabla th:nth-child(5), #cueTabla td:nth-child(5) { width: 16%; }
#cueTabla th:nth-child(6), #cueTabla td:nth-child(6) { width: 16%; }
#cueTabla th:nth-child(7), #cueTabla td:nth-child(7) { width: 6%; white-space: nowrap; }

/* Pagina de deudas: columnas con anchos definidos */
#deuTabla th:nth-child(1), #deuTabla td:nth-child(1) { width: 46%; }
#deuTabla th:nth-child(2), #deuTabla td:nth-child(2) { width: 22%; }
#deuTabla th:nth-child(3), #deuTabla td:nth-child(3) { width: 22%; }
#deuTabla th:nth-child(4), #deuTabla td:nth-child(4) { width: 10%; white-space: nowrap; }

/* Contenedor de graficos Google Charts (estadisticas.php) */
.gchart { width: 100%; min-height: 340px; }

/* Encabezado de pagina: titulo a la izq, controles a la der */
.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.page-head-left {}
.page-head h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.3px; margin-bottom: 2px; }
.page-head p  { font-size: var(--text-base); color: var(--color-muted); }
.breadcrumb   { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: 6px; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { margin: 0 5px; }

/* Controles de encabezado: filtro mes + CTA */
.page-head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Filtro de mes — en encabezado de pagina */
.month-ctrl {
	display: flex;
	align-items: center;
	gap: 3px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 5px 10px;
	background: var(--color-white);
}
.month-ctrl select {
	background: transparent;
	border: none;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-family: inherit;
	cursor: pointer;
	outline: none;
}
.month-ctrl .mc-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-muted);
	padding: 0 2px;
	line-height: 1;
	font-size: 11px;
}
.month-ctrl .mc-btn:hover { color: var(--color-accent); }
.month-ctrl .mc-label, .month-ctrl .month-label { font-size: var(--text-sm); color: var(--color-text); font-weight: 500; padding: 0 4px; display: inline-block; min-width: 124px; text-align: center; }

/* Grids de layout */
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ================================================================
   5. NAVBAR (.app-nav)
   ================================================================ */
.app-nav {
	background: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--color-border);
}
.nav-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--content-pad);
	display: flex;
	align-items: center;
	height: var(--nav-height);
}
/* Logo en navbar blanco: se usa directamente sin filtro */
.nav-brand {
	display: flex;
	align-items: center;
	margin-right: 24px;
	text-decoration: none;
	flex-shrink: 0;
}
.nav-logo {
	height: 22px;
	width: auto;
}
.nav-links {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: 1;
	overflow-x: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-links li { display: flex; align-items: stretch; }
.nav-links .nav-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	height: var(--nav-height);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text-mid);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: all .15s;
	white-space: nowrap;
}
.nav-links .nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-border-dk); }
.nav-links .nav-link.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* Hover/Active — ingresos (verde) */
.nav-links .nav-link.nav-link-income:hover { color: var(--color-positive); border-bottom-color: var(--color-positive); }
.nav-links .nav-link.nav-link-income.active { color: var(--color-positive); border-bottom-color: var(--color-positive); }
/* Hover/Active — gastos (rojo) */
.nav-links .nav-link.nav-link-expense:hover { color: var(--color-negative); border-bottom-color: var(--color-negative); }
.nav-links .nav-link.nav-link-expense.active { color: var(--color-negative); border-bottom-color: var(--color-negative); }
.nav-links .nav-link i { font-size: 13px; }

.nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Chip de usuario */
.user-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 4px 10px;
	cursor: pointer;
	background: var(--color-bg);
	transition: background .15s;
}
.user-chip:hover { background: var(--color-border); }
.user-chip-name { font-size: var(--text-xs); font-weight: 500; color: var(--color-text); }

/* Menu desplegable del usuario */
.user-menu { position: relative; }
.user-menu .user-chip { font-family: inherit; }
.user-chip-caret { font-size: 10px; color: var(--color-muted); transition: transform .15s; }
.user-menu.open .user-chip-caret { transform: rotate(180deg); }
.user-menu.open .user-chip { background: var(--color-border); }

.user-menu-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 210px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 6px;
	z-index: 200;
	display: none;
}
.user-menu.open .user-menu-dropdown { display: block; }

.user-menu-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 8px 8px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 4px;
}
.user-menu-name  { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.user-menu-email { font-size: var(--text-xs); color: var(--color-muted); word-break: break-all; }

.user-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	color: var(--color-text-mid);
	text-decoration: none;
	transition: background .12s, color .12s;
}
.user-menu-item:hover { background: var(--color-bg); color: var(--color-text); }
.user-menu-item .bi { font-size: 14px; }
.user-menu-sep { height: 1px; background: var(--color-border); margin: 4px 0; }
.user-menu-danger { color: var(--color-negative); }
.user-menu-danger:hover { background: var(--color-neg-lt); color: var(--color-negative); }

/* Control segmentado del tema, dentro del menú del usuario.
   Tres opciones en una misma pista; la activa se levanta con el fondo de la
   tarjeta y una sombra, como una pestaña sobre el riel. */
.user-menu-tema { padding: 4px 8px 8px; }
.user-menu-tema-titulo {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--color-muted);
	margin-bottom: 6px;
}
.tema-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 3px;
}
.tema-opcion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 7px 2px;
	border: none;
	background: transparent;
	border-radius: var(--radius-sm);
	color: var(--color-text-mid);
	cursor: pointer;
	font-family: inherit;
	transition: background .12s, color .12s;
}
.tema-opcion .bi { font-size: 15px; line-height: 1; }
.tema-opcion-texto { font-size: 10px; font-weight: 500; letter-spacing: .2px; }
.tema-opcion:hover { color: var(--color-text); }
.tema-opcion.activa {
	background: var(--color-white);
	color: var(--color-accent);
	box-shadow: var(--shadow-card);
}
.tema-opcion.activa .tema-opcion-texto { font-weight: 600; }
.u-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--btn-accent-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-on-accent);
}
.u-name { font-size: var(--text-xs); font-weight: 500; color: var(--color-text); }
.u-sub  { font-size: 10px; color: var(--color-muted); }

/* ================================================================
   6. FOOTER (.app-footer)
   ================================================================ */
.app-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
	padding: 10px var(--content-pad);
	margin-top: auto;
}
.footer-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--text-xs);
	color: var(--color-muted);
}
.footer-period strong { color: var(--color-text-mid); font-weight: 600; }
.footer-links { display: flex; gap: 12px; margin-left: auto; }
.footer-links a {
	color: var(--color-text-mid);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 4px;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-link {
	color: var(--color-text-mid);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 4px;
}
.footer-link:hover { color: var(--color-accent); }
.footer-version { color: var(--color-muted); }

/* ================================================================
   7. PAGE HEADER (.page-head)
   — ya declarado en seccion 4 (Layout principal)
   ================================================================ */

/* ================================================================
   8. KPI STRIP
   ================================================================ */
.kpi-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
	background: var(--color-white);
}
/* Variantes de columnas */
.kpi-strip.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-strip.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-strip.cols-5 { grid-template-columns: repeat(5, 1fr); }

.kpi-cell { padding: 20px 24px; position: relative; }
.kpi-cell + .kpi-cell { border-left: 1px solid var(--color-border); }
/* Tarjeta KPI con el filtro aplicado (Proyectos): fondo tinte y barra superior,
   porque el texto "Filtrando" solo no se notaba (pedido de Jorge 2026-08-31) */
/* Amarillo pastel para que resalte más que el azul (pedido de Jorge 2026-09-01) */
.kpi-cell.kpi-activa { background: var(--color-highlight); box-shadow: inset 0 3px 0 var(--color-warning); }
.kpi-cell.kpi-activa .kpi-sub { color: var(--color-warn-tx); font-weight: 600; }
/* Fila del desarrollo recién creado o editado (proyectos.php, desmod=) */
.data-table tr.fila-desarrollo-resaltada td { background: var(--color-highlight); box-shadow: inset 3px 0 0 var(--color-warning); }
.kpi-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--color-muted);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.kpi-label i { font-size: 13px; }
.kpi-value {
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: -.6px;
	line-height: 1;
}
.kpi-value.pos  { color: var(--color-positive); }
.kpi-value.neg  { color: var(--color-negative); }
.kpi-value.dark { color: var(--color-text); }
.kpi-value.pos a  { color: inherit; }
.kpi-value.neg a  { color: inherit; }
.kpi-sub  { font-size: var(--text-xs); color: var(--color-muted); margin-top: 6px; }
.kpi-deco { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 36px; opacity: .05; }

/* ================================================================
   9. CARDS
   ================================================================ */
.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.card-head {
	padding: 15px 20px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.card-head h3 { font-size: var(--text-md); font-weight: 600; }
.card-head-actions { display: flex; gap: 8px; align-items: center; }
.card-body { padding: 20px; }

/* ================================================================
   10. TABLAS (.data-table)
   ================================================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead tr { background: var(--color-bg); }
.data-table th {
	padding: 9px 20px;
	text-align: left;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--color-muted);
	border-bottom: 1px solid var(--color-border);
}
.data-table td {
	padding: 11px 20px;
	font-size: var(--text-base);
	border-bottom: 1px solid var(--color-border-lt);
	vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-accent-lt); }
.data-table tfoot td {
	padding: 10px 20px;
	background: var(--color-bg);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-muted);
}

/* Celdas de monto */
.td-pos { color: var(--color-positive); font-weight: 600; text-align: right; }
.td-neg { color: var(--color-negative); font-weight: 600; text-align: right; }
.td-pos a { color: inherit; }
.td-neg a { color: inherit; }
.td-r   { text-align: right; font-weight: 500; }

/* Busqueda inline */
.search-input {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 5px 10px 5px 28px;
	font-size: var(--text-sm);
	outline: none;
	background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 8px center;
	font-family: inherit;
	transition: all .15s;
}
.search-input:focus { border-color: var(--color-accent); background-color: var(--color-white); }

/* ================================================================
   11. FORMULARIOS (.form-card, .form-group, etc.)
   ================================================================ */
.form-wrap { max-width: 660px; margin: 0 auto; }
.req { color: var(--color-negative); font-weight: 700; margin-left: 1px; }
.form-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.form-hidden { display: none; }
.form-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--color-border); }
.form-head h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.2px; margin-bottom: 2px; }
.form-head p  { font-size: var(--text-base); color: var(--color-muted); }
.form-body { padding: 24px 28px; }
.form-foot {
	padding: 16px 28px;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: 1 / -1; }
/* Vigencia de los programados: los selects de mes y anho, uno al lado del otro */
.vigencia-mesanho { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-label .req { color: var(--color-negative); margin-left: 2px; }
.form-input {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 9px 12px;
	font-size: var(--text-base);
	font-family: inherit;
	color: var(--color-text);
	outline: none;
	background: var(--color-white);
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
}
.form-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.form-input::placeholder { color: var(--color-muted); }
.form-hint { font-size: var(--text-xs); color: var(--color-muted); }

/* ================================================================
   12. BOTONES
   ================================================================ */
/* Boton primario CTA */
.btn-primary {
	background: var(--btn-accent-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-sm);
	padding: 7px 16px;
	font-size: var(--text-sm);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background .15s;
}
.btn-primary:hover { background: var(--btn-accent-hv); color: var(--color-on-accent); }

.btn-outline {
	background: transparent;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	font-size: var(--text-sm);
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: all .15s;
}
.btn-outline:hover { background: var(--color-accent-lt); }

.btn-ghost {
	background: transparent;
	color: var(--color-text-mid);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	font-size: var(--text-sm);
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: all .15s;
}
.btn-ghost:hover { background: var(--color-bg); border-color: var(--color-border-dk); }

.btn-icon {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 5px;
	border-radius: 4px;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1;
	transition: all .12s;
}
.btn-icon:hover { background: var(--color-bg); color: var(--color-accent); }
.btn-icon.del:hover { background: var(--color-neg-lt); color: var(--color-negative); }

/* Botones de formulario */
.btn-save {
	background: var(--btn-accent-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-md);
	padding: 10px 24px;
	font-size: var(--text-md);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background .15s;
}
.btn-save:hover { background: var(--btn-accent-hv); }
.btn-save.warn { background: var(--btn-warn-bg); }
.btn-save.warn:hover { background: var(--btn-warn-hv); }

/* Botón outline — ingreso (verde) */
.btn-outline-income {
	background: transparent;
	color: var(--color-positive);
	border: 1px solid var(--color-positive);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background .15s, color .15s;
}
.btn-outline-income:hover { background: var(--color-pos-lt); color: var(--color-positive); text-decoration: none; }

/* Botón primario — gasto (rojo) */
.btn-primary-expense {
	background: var(--btn-neg-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-sm);
	padding: 7px 16px;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background .15s;
}
.btn-primary-expense:hover { background: var(--btn-neg-hv); color: var(--color-on-accent); text-decoration: none; }

/* Botón primario — ingreso (verde) */
.btn-primary-income {
	background: var(--btn-pos-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-sm);
	padding: 7px 16px;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background .15s;
}
.btn-primary-income:hover { background: var(--btn-pos-hv); color: var(--color-on-accent); text-decoration: none; }

/* Botón outline — gasto (rojo) */
.btn-outline-expense {
	background: transparent;
	color: var(--color-negative);
	border: 1px solid var(--color-negative);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background .15s, color .15s;
}
.btn-outline-expense:hover { background: var(--color-neg-lt); color: var(--color-negative); text-decoration: none; }

/* Botón guardar — ingreso (verde) */
.btn-save-income {
	background: var(--btn-pos-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-md);
	padding: 10px 24px;
	font-size: var(--text-md);
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background .15s;
}
.btn-save-income:hover { background: var(--btn-pos-hv); }

/* Botón guardar — gasto (rojo) */
.btn-save-expense {
	background: var(--btn-neg-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-md);
	padding: 10px 24px;
	font-size: var(--text-md);
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background .15s;
}
.btn-save-expense:hover { background: var(--btn-neg-hv); }

.btn-cancel {
	background: transparent;
	color: var(--color-text-mid);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 18px;
	font-size: var(--text-base);
	font-family: inherit;
	cursor: pointer;
	transition: all .15s;
}
.btn-cancel:hover { background: var(--color-bg); }

/* Boton de login */
.btn-login {
	width: 100%;
	background: var(--btn-login-bg);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius-md);
	padding: 12px;
	font-size: var(--text-md);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background .15s;
}
.btn-login:hover { background: var(--btn-login-hv); }

/* ================================================================
   13. BADGES Y TAGS
   ================================================================ */
.tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: var(--text-xs);
	font-weight: 500;
}
.tag-default { background: var(--color-bg); color: var(--color-text-mid); border: 1px solid var(--color-border); }
.tag-pos { background: var(--color-pos-lt); color: var(--color-pos-tx); }
.tag-neg { background: var(--color-neg-lt); color: var(--color-neg-tx); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 10px;
	font-weight: 600;
}
.badge-ok   { background: var(--color-pos-lt); color: var(--color-pos-tx); }
.badge-warn { background: var(--color-warn-lt); color: var(--color-warn-tx); }
.badge-err  { background: var(--color-neg-lt); color: var(--color-neg-tx); }
.badge-info { background: var(--color-accent-lt); color: var(--color-info-tx); }

/* ================================================================
   14. AMOUNT BLOCK
   ================================================================ */
/* Campo de monto grande */
.amount-block {
	border-radius: var(--radius-md);
	padding: 14px 18px;
	margin-bottom: 20px;
	border: 1px solid;
}
.amount-block.income  { background: var(--color-pos-lt); border-color: var(--color-pos-bd); }
.amount-block.expense { background: var(--color-neg-lt); border-color: var(--color-neg-bd); }
.amount-block.neutral { background: var(--color-accent-lt); border-color: var(--color-info-bd); }
.amount-block-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.amount-block.income  .amount-block-label { color: var(--color-pos-tx); }
.amount-block.expense .amount-block-label { color: var(--color-neg-tx); }
.amount-block.neutral .amount-block-label { color: var(--color-accent-tx); }
.amount-prefix { position: relative; }
.amount-prefix .sym {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 700;
	pointer-events: none;
}
.amount-block.income  .sym { color: var(--color-positive); }
.amount-block.expense .sym { color: var(--color-negative); }
.amount-block.neutral .sym { color: var(--color-accent); }
.amount-input {
	width: 100%;
	border: none;
	background: transparent;
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -.5px;
	padding-left: 28px;
	outline: none;
	font-family: inherit;
}
.amount-block.income  .amount-input { color: var(--color-positive); }
.amount-block.expense .amount-input { color: var(--color-negative); }
.amount-block.neutral .amount-input { color: var(--color-accent); }

/* ================================================================
   15. BARRAS DE PROGRESO (.cat-progress)
   ================================================================ */
.cat-progress { padding: 18px 20px; }
.cat-item { margin-bottom: 14px; }
.cat-item:last-child { margin-bottom: 0; }
.cat-item-head {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	margin-bottom: 5px;
}
.cat-item-head .name { color: var(--color-text-mid); font-weight: 500; }
.cat-item-head .val  { color: var(--color-text); font-weight: 600; }
.progress-bar  { height: 5px; background: var(--color-surface-2); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: var(--color-accent); }
.progress-fill.ok   { background: var(--color-positive); }
.progress-fill.over { background: var(--color-negative); }
.progress-fill.warn { background: var(--color-warning); }

/* ================================================================
   16. ACCOUNT CARDS
   ================================================================ */
.account-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 20px;
	transition: border-color .15s;
}
.account-card:hover { border-color: var(--color-accent); }
.acc-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.acc-icon.bank  { background: var(--color-accent-lt); color: var(--color-accent); }
.acc-icon.cash  { background: var(--color-pos-lt);    color: var(--color-positive); }
.acc-icon.card  { background: var(--color-neg-lt);    color: var(--color-negative); }
.acc-icon.digit { background: var(--color-violeta-lt); color: var(--color-violeta); }
.acc-icon.other { background: var(--color-warn-lt);   color: var(--color-warning); }
.acc-balance    { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.4px; }
.acc-balance.pos { color: var(--color-positive); }
.acc-balance.neg { color: var(--color-negative); }

/* ================================================================
   17. OBLIGATION ROWS (CxC y Deudas)
   ================================================================ */
.obligation-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	transition: background .1s;
}
.obligation-row:last-child { border-bottom: none; }
.obligation-row:hover { background: var(--color-accent-lt); }
.obl-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.obl-icon.cxc  { background: var(--color-pos-lt); color: var(--color-positive); }
.obl-icon.debt { background: var(--color-neg-lt); color: var(--color-negative); }
.obl-body  { flex: 1; min-width: 0; }
.obl-right { text-align: right; flex-shrink: 0; }
.obl-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 4px; }

/* Inputs inline en tablas (ej. deudas.php) */
.form-input-inline {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-family: inherit;
	color: var(--color-text);
	background: var(--color-white);
}
.form-input-inline:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(14,165,233,.12);
}
.form-input-num { text-align: right; max-width: 120px; }
.input-prefix { font-size: var(--text-sm); color: var(--color-muted); margin-right: 2px; }

/* Utilidades de alineacion */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }

/* form-body sin padding (para tablas a borde completo) */
.form-body.no-padding { padding: 0; }

/* ================================================================
   18. NOTICES (avisos en formularios)
   ================================================================ */
.notice {
	border-radius: var(--radius-md);
	padding: 10px 14px;
	font-size: var(--text-sm);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}
.notice i { margin-top: 1px; flex-shrink: 0; }
.notice.info  { background: var(--color-accent-lt); color: var(--color-accent-tx); border: 1px solid var(--color-info-bd); }
.notice.warn  { background: var(--color-warn-lt);   color: var(--color-warn-tx); border: 1px solid var(--color-warn-bd); }
.notice.error { background: var(--color-neg-lt);    color: var(--color-neg-tx); border: 1px solid var(--color-neg-bd); }

/* ================================================================
   19. UTILIDADES
   ================================================================ */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.paginacion { display: flex; align-items: center; gap: 6px; padding: 16px 0; font-size: var(--text-sm); }
.paginacion a { padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-mid); text-decoration: none; }
.paginacion a:hover { background: var(--color-accent-lt); border-color: var(--color-accent); }
.paginacion strong { padding: 4px 10px; background: var(--btn-accent-bg); color: var(--color-on-accent); border-radius: var(--radius-sm); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.justify-between { justify-content: space-between; }
.row-actions { display: flex; gap: 3px; justify-content: flex-end; }

/* Barra de progreso del Fondo de Emergencias (mipresupuesto.php) */
.emergency-track {
	width: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 99px;
	overflow: hidden;
	height: 36px;
	margin-bottom: 8px;
}
.emergency-fill {
	height: 100%;
	background: linear-gradient(to right,
		#fca5a5 0%,
		#fde68a 35%,
		#86efac 70%,
		#bae6fd 100%
	);
	background-size: 100% 100%;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-tinta-pastel);
	transition: width .4s ease-in-out;
	min-width: 60px;
}

/* Links de acceso rápido (mipresupuesto.php) */
.quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
}
.quick-links a {
	font-size: var(--text-sm);
	color: var(--color-text-mid);
	text-decoration: none;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color .15s, color .15s, background .15s;
}
.quick-links a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-accent-lt);
}

/* KPI strip dentro de card-body (panel.php con 2+ presupuestos) */
.card-body .kpi-strip {
	border-radius: var(--radius-sm);
}

/* ================================================================
   LOGIN — Pantalla de acceso
   Card centrada sobre fondo navy con logo real
   ================================================================ */
.login-screen {
	min-height: 100vh;
	background: var(--color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-image:
		radial-gradient(circle at 15% 50%, rgba(14,165,233,.08) 0%, transparent 50%),
		radial-gradient(circle at 85% 20%, rgba(14,165,233,.05) 0%, transparent 40%);
}
.login-card {
	background: var(--color-white);
	border-radius: 14px;
	width: 100%;
	max-width: 400px;
	padding: 40px;
	box-shadow: var(--shadow-login);
}
.login-logo-wrap {
	text-align: center;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
}
.login-logo-wrap img { height: 32px; width: auto; }
.login-title { font-size: var(--text-md); font-weight: 600; text-align: center; margin-bottom: 20px; color: var(--color-text); }
.login-error {
	background: var(--color-neg-lt);
	border: 1px solid var(--color-neg-bd);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	font-size: var(--text-sm);
	color: var(--color-neg-tx);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.login-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-group:last-of-type { margin-bottom: 20px; }
.login-input-wrap { position: relative; }
.login-input-wrap i {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-muted);
	font-size: 14px;
	pointer-events: none;
}
.login-input-wrap .form-input { padding-left: 34px; }
.login-between { display: flex; justify-content: space-between; align-items: center; }
.login-between a { font-size: var(--text-xs); color: var(--color-accent); }
.login-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	font-size: var(--text-xs);
}
.login-footer a { color: var(--color-muted); }
.login-footer a:hover { color: var(--color-accent); }

/* ================================================================
   20. RESPONSIVO
   ================================================================ */
@media (max-width: 768px) {
	:root {
		--content-pad: 16px;
	}

	.kpi-strip {
		grid-template-columns: 1fr 1fr;
	}
	.kpi-strip.cols-3 {
		grid-template-columns: 1fr 1fr;
	}
	.kpi-strip.cols-4 {
		grid-template-columns: 1fr 1fr;
	}
	.kpi-strip.cols-5 {
		grid-template-columns: 1fr 1fr;
	}
	.stats-pair.detalle-abierto {
		grid-template-columns: 1fr;
	}
	.kpi-cell + .kpi-cell {
		border-left: none;
		border-top: 1px solid var(--color-border);
	}

	.grid-2-1 { grid-template-columns: 1fr; }
	.grid-2   { grid-template-columns: 1fr; }
	.grid-3   { grid-template-columns: 1fr 1fr; }
	.grid-4   { grid-template-columns: 1fr 1fr; }

	.page-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.page-head-actions {
		width: 100%;
		flex-wrap: wrap;
	}

	.form-row { grid-template-columns: 1fr; }
	.form-row.cols-3 { grid-template-columns: 1fr; }

	.nav-links { overflow-x: auto; }

	.footer-inner { flex-wrap: wrap; }
	.footer-links { margin-left: 0; }
}

@media (max-width: 480px) {
	.kpi-strip {
		grid-template-columns: 1fr;
	}
	.grid-3 { grid-template-columns: 1fr; }
	.grid-4 { grid-template-columns: 1fr; }
}

/* ================================================================
   TABLAS EN EL CELULAR (pedido de Jorge del 2026-10-06; ver
   .claude_proyectos_jorge/2026_10_06_LISTADOS_RESPONSIVE.md)
   1. Toda tarjeta con una .data-table se desliza de lado: el
      overflow: hidden de .card recortaba las últimas columnas.
   2. .tabla-movil (listados de movimientos): cada fila es un bloque.
      Celdas: .celda-principal (descripción, arriba a todo lo ancho),
      .celda-valor (a la derecha), .celda-opciones (botones, abajo a
      todo lo ancho), .ocultar-movil (no se muestra) y data-label (nombre
      del dato antes del valor, cuando hace falta).
   ================================================================ */
@media (max-width: 768px) {
	.card:has(.data-table) { overflow-x: auto; }
	.data-table th { padding: 8px 10px; }
	.data-table td { padding: 9px 10px; }
	.data-table tfoot td { padding: 8px 10px; }

	.tabla-movil thead { display: none; }
	.tabla-movil,
	.tabla-movil tbody,
	.tabla-movil tfoot {
		display: block;
		width: 100%;
	}
	.tabla-movil tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 12px;
		padding: 10px 14px;
		border-bottom: 1px solid var(--color-border-lt);
	}
	.tabla-movil tbody tr:last-child { border-bottom: none; }
	.tabla-movil tfoot tr { background: var(--color-bg); border-bottom: none; }
	.data-table.tabla-movil td,
	.data-table.tabla-movil tfoot td {
		display: block;
		padding: 0;
		border-bottom: none;
		background: transparent;
		text-align: left;
		order: 1;
	}
	.tabla-movil tbody tr:hover td { background: transparent; }
	.tabla-movil td.celda-principal {
		flex: 1 1 100%;
		order: -1;
	}
	.tabla-movil td.celda-valor {
		order: 2;
		margin-left: auto;
		text-align: right;
	}
	.tabla-movil td.celda-opciones {
		flex: 1 1 100%;
		order: 10;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding-top: 4px;
	}
	.tabla-movil td.ocultar-movil { display: none; }
	/* Celdas vacías (Entró / Salió sin valor, columnas sin dato) no ocupan lugar */
	.tabla-movil td:empty { display: none; }
	/* Encabezado del día en Movimientos de una cuenta: el fondo va en la fila */
	.tabla-movil tr.fila-dia { background: var(--color-bg); }
	.data-table.tabla-movil tr.fila-dia td,
	.data-table.tabla-movil tbody tr.fila-dia:hover td { background: transparent; }
	.tabla-movil td[data-label]::before {
		content: attr(data-label) " ";
		font-size: var(--text-xs);
		font-weight: 400;
		color: var(--color-muted);
	}
	.tabla-movil .btn-xs {
		font-size: var(--text-sm);
		padding: 6px 10px;
	}
	/* Iconos de editar / anular con tamaño para el dedo */
	.tabla-movil .row-actions { justify-content: flex-start; gap: 6px; }
	.tabla-movil .btn-icon {
		font-size: 18px;
		padding: 7px 10px;
		border: 1px solid var(--color-border);
	}
}

/* ###################################################
   GASTOS PROGRAMADOS — Filas especiales
   ################################################### */

/* Fila de gasto cuyo día ya venció en el mes actual */
.data-table tbody tr.row-due {
	background: var(--color-warn-lt);
}
.data-table tbody tr.row-due:hover {
	background: var(--color-highlight);
}

/* Fila de deuda (det_deuda = 1) */
.data-table tbody tr.row-debt {
	background: var(--color-neg-lt);
}
.data-table tbody tr.row-debt:hover {
	background: var(--color-neg-lt2);
}

/* Fila de ingreso en tabla mixta gastos/ingresos */
.data-table tbody tr.row-income {
	background: var(--color-pos-lt);
}
.data-table tbody tr.row-income:hover {
	background: var(--color-pos-lt2);
}

/* Fila de diezmo (det_deuda = 2) */
.data-table tbody tr.row-tithe {
	background: var(--color-diezmo);
}
.data-table tbody tr.row-tithe:hover {
	background: var(--color-diezmo-hv);
}

/* ###################################################
   BOTONES EXTRA — Ghost danger y xs
   ################################################### */

.btn-danger-ghost {
	color: var(--color-negative);
}
.btn-danger-ghost:hover {
	background: var(--color-neg-lt);
	color: var(--color-negative);
}

.btn-xs {
	font-size: 11px;
	padding: 3px 8px;
	gap: 3px;
}

/* ###################################################
   BOTÓN SAVE EN MODO EDICIÓN (warning/amber)
   ################################################### */

.btn-save.btn-warning {
	background: var(--btn-warn-bg);
}
.btn-save.btn-warning:hover {
	background: var(--btn-warn-hv);
}

/* ###################################################
   BLOQUE DE OBSERVACIONES (solo lectura)
   ################################################### */

.obs-block {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	padding: 12px 16px;
	margin-top: 4px;
}
.obs-block-label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-mid);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.obs-block-body {
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.6;
}

/* ###################################################
   CARD LINKS ROW (mis_gastospro — enlaces secundarios)
   ################################################### */

.card-links-row {
	padding: 10px 16px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ###################################################
   PRESUPUESTO VS. REAL (mis_prep_real)
   ################################################### */

/* Cabecera de categoría dentro de la tabla */
.data-table .cat-section-header td {
	background: var(--color-bg);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-text);
	padding: 10px 14px;
	border-top: 2px solid var(--color-border);
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* Fila subtotal por categoría */
.data-table .subtotal-row td {
	background: var(--color-bg);
	border-top: 1px solid var(--color-border-dk);
	font-size: 12px;
	color: var(--color-text-mid);
	padding: 6px 14px;
}

/* Fila total general */
.data-table .total-row td {
	background: var(--color-white);
	border-top: 2px solid var(--color-border-dk);
	font-size: 14px;
	color: var(--color-text);
	padding: 10px 14px;
}

/* Fila cuando gasto <= presupuesto */
.data-table tr.row-ok td {
	background: var(--color-pos-lt);
}

/* Fila cuando gasto > presupuesto */
.data-table tr.row-over td {
	background: var(--color-neg-lt);
	color: var(--color-negative);
}

/* Celda de diferencia positiva (sobra presupuesto) */
.td-diff-pos {
	color: var(--color-positive);
	font-weight: 600;
}

/* Celda de diferencia negativa (se excedió) */
.td-diff-neg {
	color: var(--color-negative);
	font-weight: 600;
}

/* ###################################################
   CATEGORIAS (categorias.php — editar presupuesto)
   ################################################### */

/* Input nombre de categoría en el form-head */
.cat-name-input {
	flex: 1;
	font-weight: 600;
	font-size: 14px;
}

/* Contenedor del botón "Agregar categoría nueva" global */
.cat-actions-global {
	padding: 12px 0;
	display: flex;
	justify-content: center;
}

/* ###################################################
   CONFIGURACION (configuracion.php)
   ################################################### */

/* Grupo de campo con checkbox */
.form-check-group {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

/* Label que envuelve el checkbox */
.form-check-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text);
	cursor: pointer;
}

/* El input tipo checkbox */
.form-check {
	width: 16px;
	height: 16px;
	accent-color: var(--color-accent);
	cursor: pointer;
}

/* ###################################################
   ESTADISTICAS (estadisticas.php)
   ################################################### */

/* Grid de 2 columnas para las gráficas */
.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

/* Fila de una torta con su detalle de subcategorias al lado.
   Con el detalle cerrado la torta ocupa la fila completa; al abrirlo se
   reparten la fila en dos. La clase "detalle-abierto" la pone el JavaScript. */
.stats-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.stats-pair.detalle-abierto {
	grid-template-columns: 1fr 1fr;
}

/* Cursor de mano sobre las tajadas de una torta que si acepta clic.
   Solo se le pone a las graficas con drill-down: ponerselo a una que no
   reacciona haria creer que se puede hacer clic. */
.gchart-clickable svg path {
	cursor: pointer;
}

/* Card individual de estadística */
.stats-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.stats-card .card-head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.stats-card .card-head-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
}
/*	Titulo y total del encabezado en verde o rojo segun sea ingreso o gasto.
	La regla de arriba fija el color con dos clases, asi que td-pos/td-neg
	necesitan la misma especificidad para poder ganarle. */
.stats-card .card-head-title.td-pos { color: var(--color-positive); }
.stats-card .card-head-title.td-neg { color: var(--color-negative); }

.stats-card .card-body {
	padding: 16px;
	text-align: center;
}

/* Contenedor de la imagen de gráfica */
.stats-img-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 0;
}

.stats-img-wrap img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

/* Placeholder cuando no hay datos */
.stats-placeholder {
	padding: 40px 20px;
	text-align: center;
	color: var(--color-muted);
	font-size: 13px;
}

.stats-placeholder i {
	font-size: 32px;
	display: block;
	margin-bottom: 10px;
	opacity: .4;
}

/* ###################################################
   PREMIUM (premium.php)
   ################################################### */

/* Lista de beneficios del plan premium */
.premium-benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.premium-benefits li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-text);
}

.premium-benefits li i {
	color: var(--color-positive);
	font-size: 16px;
	flex-shrink: 0;
}

/* Precio del plan */
.premium-price {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -.6px;
	margin-top: 4px;
}

.premium-price .text-muted {
	font-size: 14px;
	font-weight: 400;
}

/* ###################################################
   TUTORIAL (tutorial.php, tutorial2.php)
   ################################################### */

/* Grid de 3 columnas para pasos del tutorial */
.tutorial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

/* Card individual de paso */
.tutorial-step {
	display: flex;
	flex-direction: column;
}

/* Número del paso */
.tutorial-step-num {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--color-accent);
	margin-bottom: 10px;
}

/* Imagen del paso */
.tutorial-step-img {
	width: 100%;
	margin-bottom: 12px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.tutorial-step-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* Título del paso */
.tutorial-step-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 8px;
}

/* Cita del paso */
.tutorial-step-quote {
	font-size: 12px;
	color: var(--color-muted);
	margin-bottom: 8px;
	font-style: italic;
}

/* Botones de acción al pie de la página del tutorial */
.page-actions-bottom {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0;
	margin-top: 4px;
}

/* Links decorativos de botones de acciones en tutorial2 */
.tutorial2-links {
	display: flex;
	gap: 12px;
	margin: 12px 0 16px 0;
	flex-wrap: wrap;
}

/* ###################################################
   PAGINAS LEGALES (terminos, privacidad, tarifa)
   ################################################### */

/* Contenedor de texto legal largo */
.legal-content {
	max-width: 860px;
	line-height: 1.7;
	color: var(--color-text);
	font-size: 13px;
}

/* Secciones de texto legal — h1 dentro del contenido legal se ve como h3 */
.legal-content h1 {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	margin: 20px 0 8px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-border);
}

.legal-content h3 {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin: 16px 0 6px 0;
}

.legal-content h4 {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-mid);
	margin: 12px 0 4px 0;
}

.legal-content p {
	margin: 0 0 10px 0;
	text-align: justify;
}

.legal-content hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 20px 0;
}

.legal-content a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* ################################################### */
/*  MODAL DE CONFIRMACION */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 39, 68, .45);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.modal-overlay.active {
	display: flex;
}
.modal-box {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	width: 100%;
	max-width: 420px;
	margin: 16px;
}
.modal-head {
	padding: 20px 24px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.modal-icon {
	font-size: 20px;
	color: var(--color-text-mid);
}
.modal-icon-danger {
	color: var(--color-negative);
}
.modal-icon-income {
	color: var(--color-positive);
}
.modal-title {
	font-size: var(--font-lg);
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}
.modal-body {
	padding: 12px 24px 0;
}
.modal-msg {
	color: var(--color-text-mid);
	margin: 0;
	font-size: var(--font-sm);
	line-height: 1.5;
}
.modal-foot {
	padding: 20px 24px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* ================================================================
   GASTO RÁPIDO (modal de atajos, tabla pre_atajos)
   Tarjetas de comercios y botones de cuentas que abren crear_gasto
   con los campos ya puestos. Lo imprime imprimirModalAtajos().
   ================================================================ */

.modal-box.modal-atajos {
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}
.atajos-titulo {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 10px 0 8px;
}
.atajos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}
.atajos-grid-cuentas {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.atajo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
	text-align: center;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.atajo-card:hover,
.atajo-card:focus {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card);
	transform: translateY(-1px);
	text-decoration: none;
	color: var(--color-text);
}
/* Recuadro blanco para el logo: los logos vienen sobre fondo transparente
   y algunos son oscuros, así que siempre se pintan sobre blanco. */
.atajo-logo {
	width: 100%;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 8px;
	background: var(--logo-fondo);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}
.atajo-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.atajo-logo i {
	font-size: 26px;
	color: var(--color-text-mid);
}
.atajo-nombre {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.2;
}
.atajo-sub {
	font-size: var(--text-xs);
	color: var(--color-muted);
	line-height: 1.2;
}
/* Ingreso rápido: fuente marcada y cuenta sugerida por esa fuente */
.atajos-ayuda {
	font-size: var(--text-sm);
	color: var(--color-text-mid);
	margin: -4px 0 8px;
}
.atajo-card.atajo-seleccionada {
	border-color: var(--color-positive);
	box-shadow: 0 0 0 2px var(--color-pos-lt);
	background: var(--color-pos-lt);
}
.atajo-card.atajo-sugerida {
	border-style: dashed;
	border-color: var(--color-positive);
}
/* Enlace "Editar atajos" a la izquierda del pie del modal */
.modal-foot .atajos-editar {
	margin-right: auto;
	align-self: center;
}
/* Miniatura del logo en la pantalla de administración (atajos.php) */
.atajo-logo-mini {
	width: 96px;
	height: 40px;
	padding: 4px 6px;
}
.atajo-actual {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
@media (max-width: 480px) {
	.atajos-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.atajos-grid-cuentas {
		grid-template-columns: repeat(3, 1fr);
	}
	.atajo-logo {
		height: 44px;
	}
}

/* ================================================================
   TRASLADO RÁPIDO (modal de tres pasos: qué registrar, cuenta origen,
   cuenta destino) con las tarjetas de Gasto rápido y los logos de las
   cuentas. Lo imprime imprimirModalTraslado().
   ================================================================ */

.modal-box.modal-traslado {
	max-width: 760px;
}
.traslado-paso {
	display: none;
}
.traslado-paso.activo {
	display: block;
}
/* Resumen de lo ya elegido (tipo y cuenta origen); vacío no ocupa espacio */
.traslado-resumen {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	margin: 8px 0 0;
}
.traslado-resumen:empty {
	display: none;
}
/* Paso 1: dos tarjetas grandes */
.traslado-tipos {
	grid-template-columns: repeat(2, 1fr);
}
.traslado-tipos .atajo-card {
	padding: 16px 12px;
}
.traslado-tipos .atajo-logo {
	height: 64px;
}
.traslado-tipos .atajo-logo i {
	font-size: 32px;
	color: var(--color-accent);
}
.traslado-tipos .traslado-tipo[data-tipo="gastofondo"] .atajo-logo i {
	color: var(--color-negative);
}
/* Pasos 2 y 3: cuentas agrupadas por tipo (diarias, Fondos de Emergencias,
   inversión y crypto, pensiones); en gasto desde fondo las diarias van al final */
.traslado-cuentas {
	display: flex;
	flex-direction: column;
}
.traslado-cuentas.fondos-primero .traslado-grupo-diarias {
	order: 1;
}
.traslado-cuenta .atajo-nombre {
	font-size: var(--text-sm);
}
/* Cuenta origen ya elegida: no se ofrece como destino */
.atajo-card.atajo-oculta {
	display: none;
}
@media (max-width: 480px) {
	.traslado-tipos {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ================================================================
   CUENTAS EN LA PRINCIPAL: fila clicable con el logo de la cuenta y
   modal de opciones (Traslado | Ingreso | Gasto | Editar cuenta).
   Lo imprime mipresupuesto.php; reutiliza las tarjetas de atajos.
   ================================================================ */

.fila-cuenta {
	cursor: pointer;
}
/* Logo pequeño en línea con el nombre de la cuenta */
.atajo-logo.atajo-logo-fila {
	display: inline-flex;
	width: 52px;
	height: 30px;
	padding: 2px 4px;
	margin-right: 10px;
	vertical-align: middle;
}
.atajo-logo.atajo-logo-fila i {
	font-size: 15px;
}
/* Loguito de la cuenta en la línea pequeña debajo de la descripción
   (Gastos e Ingresos programados, pedido de Jorge 2026-10-02) */
.atajo-logo.atajo-logo-sub {
	display: inline-flex;
	width: 36px;
	height: 20px;
	padding: 1px 3px;
	margin-right: 6px;
	vertical-align: middle;
	border-radius: 4px;
}
.atajo-logo.atajo-logo-sub i {
	font-size: 11px;
}
.linea-cuenta {
	margin-top: 3px;
}
/* Logos superpuestos en la base de las barras de la gráfica
   "Fondo de Emergencias por cuenta" (estadisticas.php); los posiciona
   pintarLogosFondoCuentas() con position absolute dentro del div de la gráfica */
.atajo-logo.atajo-logo-grafica {
	position: absolute;
	width: 40px;
	height: 24px;
	padding: 2px 4px;
	transform: translateX(-50%);
	pointer-events: none;
	box-shadow: 0 1px 2px rgba(15, 39, 68, .15);
}
.atajo-logo.atajo-logo-grafica i {
	font-size: 13px;
}
/* Subtítulos de grupo en la lista de Cuentas de la principal (mipresupuesto.php):
   fila no interactiva con el nombre del grupo y su subtotal */
.data-table tr.fila-grupo-cuentas td {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-muted);
	background: var(--color-bg);
	padding-top: 10px;
	padding-bottom: 6px;
}
.data-table tbody tr.fila-grupo-cuentas:hover td {
	background: var(--color-bg);
}
/* Grillas editables (cuentas.php, deudas.php): logo en línea con el campo del nombre */
.celda-con-logo {
	display: flex;
	align-items: center;
}
.celda-con-logo .atajo-logo-fila {
	flex-shrink: 0;
}
.celda-con-logo .form-input-inline {
	flex: 1;
	min-width: 0;
}
.modal-box.modal-cuenta {
	/* Ancho para las 6 acciones en una sola línea (pedido de Jorge 2026-09-12:
	   a las cinco de 2026-09-01 se sumó "Ver movimientos") */
	max-width: 820px;
}
.modal-cuenta-saldo {
	font-size: var(--text-sm);
	font-weight: 600;
	margin-top: 2px;
}
.cuenta-acciones {
	grid-template-columns: repeat(6, 1fr);
}
/* Cuentas diarias: sin la tarjeta de Gasto desde fondo quedan 5 acciones */
.cuenta-acciones.cuenta-acciones-5 {
	grid-template-columns: repeat(5, 1fr);
}
.cuenta-acciones .atajo-logo i {
	font-size: 26px;
	color: var(--color-accent);
}
.cuenta-acciones .cuenta-accion-ingreso .atajo-logo i {
	color: var(--color-positive);
}
.cuenta-acciones .cuenta-accion-gasto .atajo-logo i {
	color: var(--color-negative);
}
@media (max-width: 480px) {
	.cuenta-acciones {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ================================================================
   SELECT DE CUENTAS CON LOGOS (imprimirSelectCuentas en funciones.php +
   js/select-cuentas.js). El select nativo queda oculto cuando el JS lo
   activa; el botón muestra la cuenta elegida y el panel lista las cuentas
   por grupo con logo, nombre y saldo, con buscador.
   ================================================================ */

.select-cuentas {
	position: relative;
}
.select-cuentas [hidden] {
	display: none !important;
}
.select-cuentas-boton {
	display: none;
}
.select-cuentas-activo .select-cuentas-nativo {
	display: none;
}
.select-cuentas-activo .select-cuentas-boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	background: var(--color-white);
}
.select-cuentas-boton .bi-chevron-down {
	color: var(--color-muted);
	font-size: 12px;
	flex-shrink: 0;
}
.select-cuentas-actual {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.select-cuentas-actual .select-cuentas-nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.select-cuentas-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.select-cuentas-buscar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-muted);
}
.select-cuentas-buscar input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--color-text);
}
.select-cuentas-lista {
	max-height: 320px;
	overflow-y: auto;
	padding: 4px 0;
}
.select-cuentas-grupo {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-muted);
	padding: 8px 12px 4px;
}
.select-cuentas-item {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	cursor: pointer;
}
.select-cuentas-item:hover,
.select-cuentas-item.resaltado {
	background: var(--color-accent-lt);
}
.select-cuentas-item .select-cuentas-nombre {
	flex: 1;
	min-width: 0;
}
.select-cuentas-item.seleccionado .select-cuentas-nombre {
	font-weight: 600;
	color: var(--color-accent);
}
.select-cuentas-saldo {
	font-size: var(--text-sm);
	color: var(--color-text-mid);
	white-space: nowrap;
	margin-left: 8px;
}
.select-cuentas-vacio {
	padding: 10px 12px;
	font-size: var(--text-sm);
	color: var(--color-muted);
}
/* Filtro por cuenta en el encabezado de Mis gastos: ancho fijo y alto del selector de mes */
.filtro-cuenta-encabezado {
	width: 280px;
	max-width: 100%;
}
.filtro-cuenta-encabezado .select-cuentas-boton,
.filtro-cuenta-encabezado .select-cuentas-nativo {
	padding: 4px 10px;
	font-size: var(--text-sm);
	border-radius: var(--radius-sm);
}
.filtro-cuenta-encabezado .select-cuentas-actual .atajo-logo-fila {
	width: 40px;
	height: 22px;
	margin-right: 8px;
}

/* ================================================================
   ARCHIVOS ADJUNTOS
   Campo para anexar comprobantes a un gasto o a un ingreso, y lista
   de los que ya estan guardados. Ver js/adjuntos.js.
   ================================================================ */

.adj-wrap { margin-top: 4px; }

/* Zona de arrastre. El input real va encima, invisible, para que el
   clic en cualquier parte abra el buscador de archivos. */
.adj-drop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border: 2px dashed var(--color-border-dk);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.adj-drop:hover {
	border-color: var(--color-accent);
	background: var(--color-accent-lt);
}
/* Mientras se arrastra un archivo encima */
.adj-drop-activa {
	border-color: var(--color-accent);
	background: var(--color-accent-lt);
	border-style: solid;
}
.adj-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.adj-drop-icono {
	font-size: 22px;
	color: var(--color-accent);
	flex-shrink: 0;
}
.adj-drop-texto { display: flex; flex-direction: column; gap: 2px; }
.adj-drop-texto strong {
	font-size: var(--text-md);
	color: var(--color-text);
	font-weight: 600;
}
.adj-drop-texto span {
	font-size: var(--text-sm);
	color: var(--color-text-mid);
}

/* Aviso de lo que se rechazo al seleccionar */
.adj-aviso {
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: var(--color-warn-lt);
	border: 1px solid var(--color-warning);
	color: var(--color-warning);
	font-size: var(--text-sm);
}

/* Lista de archivos: los que se van a subir y los ya guardados */
.adj-list {
	display: none;
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
}
.adj-list-guardados { display: block; margin-top: 8px; }

.adj-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	margin-bottom: 6px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}
.adj-item-cara {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.adj-mini {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	flex-shrink: 0;
}
.adj-icono {
	font-size: 22px;
	color: var(--color-text-mid);
	width: 36px;
	text-align: center;
	flex-shrink: 0;
}
.adj-item-datos {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.adj-item-nombre {
	font-size: var(--text-base);
	color: var(--color-text);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.adj-item-peso {
	font-size: var(--text-xs);
	color: var(--color-muted);
}
.adj-item-nombre a { color: var(--color-accent); text-decoration: none; }
.adj-item-nombre a:hover { text-decoration: underline; }

.adj-quitar {
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-negative);
	border-radius: 4px;
	width: 26px;
	height: 26px;
	line-height: 1;
	cursor: pointer;
	font-size: 15px;
}
.adj-quitar:hover {
	background: var(--color-neg-lt);
	border-color: var(--color-negative);
}

.adj-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Bloque de solo lectura: los adjuntos que trae el movimiento programado
   del que se ejecuto este gasto o ingreso. */
.adj-heredados {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-warning);
	border-radius: var(--radius-sm);
	background: var(--color-warn-lt);
}
.adj-heredados-titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-warning);
	margin-bottom: 8px;
}
.adj-heredados .adj-item { background: var(--color-white); }

/* Clip con el conteo en las pantallas de listado */
.adj-clip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--text-xs);
	color: var(--color-text-mid);
	text-decoration: none;
	padding: 1px 6px;
	border-radius: 10px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.adj-clip:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background: var(--color-accent-lt);
}

@media (max-width: 480px) {
	.adj-drop { padding: 14px; }
	.adj-drop-texto strong { font-size: var(--text-base); }
	.adj-drop-texto span { font-size: var(--text-xs); }
}

/* ###################################################
   ESTADISTICAS COMPARATIVAS (estadisticas_tendencias.php,
   estadisticas_categorias.php y la barra de pestañas de estadisticas.php)
   ################################################### */

/* Pestañas Mes | Tendencias | Categorías, debajo del encabezado de página */
.stats-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 16px;
}
.stats-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-mid);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}
.stats-tab:hover { color: var(--color-accent); }
.stats-tab.active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
	font-weight: 600;
}

/* Filtro de periodo por mes: Desde / Hasta, Consultar y chips de rango rápido */
.range-card {
	padding: 12px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.range-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.range-label {
	font-size: var(--text-sm);
	color: var(--color-text-mid);
	font-weight: 500;
}
.range-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.range-chip {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text-mid);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 99px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	white-space: nowrap;
}
.range-chip:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background: var(--color-accent-lt);
}
.range-chip.active {
	color: var(--color-on-accent);
	background: var(--btn-accent-bg);
	border-color: var(--color-accent);
}

/* Variación porcentual con signo: verde cuando es buena, rojo cuando no,
   gris cuando no cambió */
.var-pos  { color: var(--color-positive); font-weight: 600; }
.var-neg  { color: var(--color-negative); font-weight: 600; }
.var-flat { color: var(--color-muted); font-weight: 500; }

@media (max-width: 768px) {
	.stats-tabs { overflow-x: auto; }
	.range-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Contenedor de una gráfica de Chart.js: necesita alto fijo y posición
   relativa para que el canvas se adapte al ancho de la tarjeta */
.chart-box {
	position: relative;
	height: 340px;
}

/* Tablas comparativas: más compactas que la .data-table normal, con scroll
   lateral cuando traen las columnas de dos años anteriores */
.table-scroll { overflow-x: auto; }
.data-table.compact th { padding: 8px 10px; }
.data-table.compact td { padding: 8px 10px; font-size: var(--text-sm); }
.data-table.compact tfoot td { padding: 8px 10px; }
.data-table .th-group {
	text-align: center;
	border-bottom: none;
	color: var(--color-text-mid);
}
.data-table .th-num { text-align: right; }
.data-table .td-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Cantidades y porcentajes centrados (regla de Jorge del 2026-09-24); los
   valores en pesos siguen a la derecha con .th-num y .td-num */
.data-table .th-centro { text-align: center; }
.data-table .td-centro {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.data-table .td-muted { color: var(--color-text-mid); }
.data-table tbody tr.row-en-curso td { background: var(--color-warn-lt); }
/* Año incompleto en las tablas por año (sus totales no son comparables) */
.data-table tbody tr.row-parcial td { color: var(--color-text-mid); }
/* Variación pequeña al lado del valor, dentro de la misma celda */
.td-var {
	font-size: var(--text-xs);
	margin-left: 4px;
}
/* Varias tablas seguidas dentro de una tarjeta (una por serie) */
.table-scroll table + table { margin-top: 18px; }

/* Nota corta en gris debajo de un bloque de cifras */
.stats-nota {
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin: -6px 0 16px;
	line-height: 1.5;
}
.stats-nota-card {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--color-border);
}
.stats-nota-grafica { margin: 10px 0 0; }
/* Resumen por subcategoría del detalle del ahorro: chips en fila */
.stats-nota-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* KPI que abre un detalle al hacer clic (el de Ahorro en Tendencias) */
.kpi-cell.kpi-clickable {
	cursor: pointer;
	transition: background .15s;
}
.kpi-cell.kpi-clickable:hover { background: var(--color-accent-lt); }
.kpi-link { color: var(--color-accent); font-weight: 600; cursor: pointer; }
.kpi-link:hover { text-decoration: underline; }

/* Serie "Deuda" (pagos de tarjetas y préstamos): naranja, ni ingreso ni gasto */
.data-table .td-deuda {
	color: var(--color-warning);
	font-weight: 600;
	text-align: right;
}
.kpi-value.deuda { color: var(--color-warning); }

/* Lista larga dentro de una tarjeta: alto tope y scroll propio */
.detalle-scroll {
	max-height: 440px;
	overflow-y: auto;
}
.td-nowrap { white-space: nowrap; }
.card-head-note {
	font-size: var(--text-xs);
	color: var(--color-muted);
	text-align: right;
}

/* Proyección del año: las cifras estimadas van en cursiva y gris, para que
   no se confundan con las reales */
.data-table .td-proyectado {
	color: var(--color-text-mid);
	font-style: italic;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.data-table tbody tr.row-proyectado td { color: var(--color-text-mid); }
/* Dos grupos de botones en una misma cabecera de tarjeta (serie y método en
   la proyección), separados entre sí */
.serie-toggle-grupos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Pestaña Categorías: filas de categoría desplegables (clic muestra sus
   subcategorías), fila de ahorro aparte y barra relativa al mayor gasto */
.data-table tr.row-categoria { cursor: pointer; }
.data-table tr.row-categoria:hover td { background: var(--color-accent-lt); }
.data-table tr.row-categoria .chevron {
	display: inline-block;
	font-size: 10px;
	color: var(--color-muted);
	margin-right: 4px;
	transition: transform .15s;
}
.data-table tr.row-categoria.abierta .chevron { transform: rotate(90deg); }
.data-table tr.row-subcategoria td {
	background: var(--color-bg);
	color: var(--color-text-mid);
}
.data-table tr.row-subcategoria td:first-child { padding-left: 34px; }
.data-table tr.row-ahorro td { color: var(--color-text-mid); }
.data-table .td-barra {
	width: 140px;
	min-width: 100px;
}
.barra-relativa {
	height: 8px;
	background: var(--color-border);
	border-radius: 4px;
	overflow: hidden;
}
.barra-relativa span {
	display: block;
	height: 100%;
	background: var(--color-negative);
	border-radius: 4px;
}
.row-subcategoria .barra-relativa span { background: var(--color-border-dk); }
.row-ahorro .barra-relativa span { background: var(--color-pos-soft); }

@media (max-width: 768px) {
	.chart-box { height: 260px; }
}

/* Tortas de la página principal: "Totales de cuentas" va a dos columnas
   (tabla y torta) y "Deudas" lleva la torta debajo de la tabla */
.card-torta {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.torta-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 20px;
	border-left: 1px solid var(--color-border);
}
.torta-wrap.torta-deudas {
	border-left: 0;
	border-top: 1px solid var(--color-border);
}
.chart-box-torta { height: 300px; }

@media (max-width: 768px) {
	.card-torta { grid-template-columns: 1fr; }
	.torta-wrap { border-left: 0; border-top: 1px solid var(--color-border); }
	.chart-box-torta { height: 260px; }
}

/* Gráfica de Cuentas por Cobrar: una sola serie, no necesita tanto alto */
.chart-box-cxc { height: 260px; }

/* Enlace "Volver a hoy" dentro del selector de mes, antes de la flecha */
.month-ctrl .mc-hoy { font-size: var(--text-xs); color: var(--color-accent); display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--color-border); white-space: nowrap; }
.month-ctrl .mc-hoy:hover { color: var(--color-accent-dk); }

/* ================================================================
   PROYECTOS EN ORDEN - Filtros segmentados y tarjetas compactas
   (pedido de Jorge del 2026-09-03)
   ================================================================ */

/* Barra de tarjetas KPI compacta: la mitad del alto de la normal. El texto
   de abajo se quitó porque el color de la tarjeta ya avisa que está
   filtrando, así que nombre y número van en una sola línea. */
.kpi-strip.kpi-compacta .kpi-cell { padding: 12px 16px; }
.kpi-strip.kpi-compacta .kpi-cell > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: inherit; }
.kpi-strip.kpi-compacta .kpi-label { margin-bottom: 0; }
.kpi-strip.kpi-compacta .kpi-value { font-size: var(--text-xl); }

/* Filtros rápidos por Sistema, Módulo y Etapa en curso: cada dimensión es
   una barra segmentada y la opción activa se levanta en blanco.
   La fila NO lleva flex-wrap: con el wrap puesto, una barra larga (los
   módulos) no cabía al lado de su título y bajaba entera de línea. Sin el
   wrap, la barra toma el ancho sobrante y parte las opciones por dentro, y
   las tres arrancan y terminan en la misma columna. */
.filtros-segmentados { display: flex; flex-direction: column; gap: 8px; }
.filtro-seg { display: flex; align-items: flex-start; gap: 10px; }
.filtro-seg-label { display: flex; align-items: center; gap: 6px; flex: 0 0 118px; padding-top: 7px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.seg-barra { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.seg-barra a { padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-mid); text-decoration: none; white-space: nowrap; }
.seg-barra a:hover { color: var(--color-accent); }
.seg-barra a .n { margin-left: 5px; color: var(--color-muted); font-weight: 600; }
.seg-barra a.activo { background: var(--color-white); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-card); }
.seg-barra a.activo .n { color: var(--color-accent); }

/* Columna Desarrollo de la grilla: sin tope, un par de nombres largos
   apretaban las demás columnas hasta dejarlas ilegibles. */
.data-table th.col-desarrollo,
.data-table td.col-desarrollo { max-width: 340px; }

@media (max-width: 768px) {
	.filtro-seg { flex-direction: column; gap: 4px; }
	.filtro-seg-label { flex: 0 0 auto; padding-top: 0; }
}

/* ###################################################
   SUBMENÚS DEL NAV (2026-09-05): Gastos, Ingresos, Programados y los
   clientes bajo "Proyectos". El panel va con position: fixed y lo ubica
   js/submenu-nav.js, porque .nav-links recorta con overflow lo que se
   salga de la barra.
   ################################################### */
.nav-caret { font-size: 10px; color: var(--color-muted); transition: transform .15s; }
.nav-item-submenu.abierto .nav-caret { transform: rotate(180deg); }
.nav-submenu {
	position: fixed;
	min-width: 230px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 6px;
	z-index: 200;
	display: none;
}
.nav-item-submenu.abierto .nav-submenu { display: block; }
.nav-submenu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-mid);
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s, color .12s;
}
.nav-submenu-item:hover { background: var(--color-bg); color: var(--color-text); }
.nav-submenu-item.nav-submenu-activo { color: var(--color-accent); background: var(--color-accent-lt); }
/* Mismo ancho del logo de fila (.atajo-logo-fila más su margen) para que
   "Todos los clientes" quede alineado con los nombres de los clientes */
.nav-submenu-icono {
	width: 52px;
	height: 30px;
	margin-right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted);
	flex-shrink: 0;
}
.nav-submenu-sep { height: 1px; background: var(--color-border); margin: 4px 0; }
/* Variante compacta (Gastos, Ingresos, Programados): solo iconos, sin la
   columna ancha que en Proyectos alinea los logos de los clientes */
.nav-submenu-compacto { min-width: 200px; }

/* Botón de tres rayas (pedido de Jorge del 2026-10-06). Por debajo de
   1100 px el menú ya no cabe en la barra (lo tapaban el buscador y el
   chip del usuario; en el celular quedaba en 0 px): .nav-links sale de la
   barra y se abre como lista debajo de ella con .app-nav.menu-abierto
   (js/submenu-nav.js). Los submenús se despliegan dentro de la lista. */
.nav-hamburguesa {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-right: 10px;
	padding: 0;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 22px;
	cursor: pointer;
	flex-shrink: 0;
}
@media (max-width: 1100px) {
	.nav-hamburguesa { display: inline-flex; }
	.app-nav.menu-abierto .nav-hamburguesa { background: var(--color-bg); }
	.nav-brand { margin-right: 12px; }
	.nav-links {
		display: none;
		position: fixed;
		top: var(--nav-height);
		left: 0;
		right: 0;
		flex-direction: column;
		max-height: calc(100vh - var(--nav-height));
		overflow-x: hidden;
		overflow-y: auto;
		padding: 6px 0;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-card);
	}
	.app-nav.menu-abierto .nav-links { display: flex; }
	.nav-links li { display: block; }
	.nav-links .nav-link {
		padding: 12px var(--content-pad);
		border-bottom: none;
		border-left: 3px solid transparent;
		font-size: var(--text-base);
	}
	.nav-links .nav-link:hover { border-bottom-color: transparent; }
	.nav-links .nav-link.active { border-left-color: var(--color-accent); }
	.nav-links .nav-link.nav-link-income.active { border-left-color: var(--color-positive); }
	.nav-links .nav-link.nav-link-expense.active { border-left-color: var(--color-negative); }
	.nav-links .nav-caret { margin-left: auto; }
	.nav-links .nav-submenu {
		position: static;
		min-width: 0;
		margin: 0 var(--content-pad) 8px;
		box-shadow: none;
	}
	.nav-links .nav-submenu-item { padding: 10px 8px; font-size: var(--text-base); }
}
/* En el celular el botón de tres rayas deja sin espacio el nombre del chip
   del usuario (se salía 33 px): queda solo el icono; el nombre sigue dentro
   del menú del usuario. */
@media (max-width: 480px) {
	.user-chip-name { display: none; }
}
.nav-submenu-compacto .nav-submenu-icono {
	width: 18px;
	height: auto;
	margin-right: 0;
	font-size: 13px;
}

/* ###################################################
   BUSCADOR GLOBAL (campo del nav y pantalla buscar.php; 2026-09-05)
   ################################################### */

/* Campo en la barra del menú, a la izquierda del chip de usuario */
.nav-buscador {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	height: 28px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.nav-buscador:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.nav-buscador-lupa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	font-size: 13px;
	flex-shrink: 0;
}
.nav-buscador-lupa:hover { color: var(--color-text); }
.nav-buscador-campo {
	width: 190px;
	height: 28px;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--text-xs);
	padding: 0 8px 0 0;
}
.nav-buscador-campo::placeholder { color: var(--color-muted); }
.nav-buscador-campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav-buscador-campo { -webkit-appearance: none; appearance: none; border-radius: 0; }

/* Panel rápido bajo el campo: 2 primeras coincidencias y "Ver todos".
   position: fixed, lo ubica js/buscador.js debajo del campo */
.nav-buscador-panel {
	position: fixed;
	width: 360px;
	max-width: calc(100vw - 16px);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 6px;
	z-index: 200;
	display: none;
}
.nav-buscador-panel.abierto { display: block; }
.nav-buscador-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text);
	transition: background .12s;
}
.nav-buscador-item:hover { background: var(--color-bg); }
.nav-buscador-item + .nav-buscador-item { border-top: 1px solid var(--color-border); border-radius: 0; }
.nav-buscador-grupo { font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; }
.nav-buscador-grupo i { margin-right: 3px; }
.nav-buscador-titulo { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.nav-buscador-subtitulo { font-size: var(--text-xs); color: var(--color-text-mid); }
.nav-buscador-vacio { padding: 10px; font-size: var(--text-sm); color: var(--color-muted); }
.nav-buscador-todos {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 8px 10px;
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-accent);
	text-decoration: none;
}
.nav-buscador-todos:hover { background: var(--color-accent-lt); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* Resaltado de las palabras encontradas */
mark.buscar-resalte {
	background: var(--color-warn-bd);
	color: var(--color-warn-tx);
	border-radius: 3px;
	padding: 0 2px;
}
html[data-tema="oscuro"] mark.buscar-resalte {
	background: var(--color-warn-lt);
	color: var(--color-warning);
}

/* Recorte del texto largo donde coincidió, nota de en qué campo y chips */
.buscar-recorte {
	font-size: var(--text-xs);
	color: var(--color-text-mid);
	margin-top: 4px;
	line-height: 1.45;
	max-width: 520px;
}
.buscar-donde {
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-top: 4px;
}
.buscar-donde i { margin-right: 2px; }
.buscar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Campo de formulario cuyo valor tiene la frase buscada (js/resaltar-busqueda.js) */
.resaltar-campo,
.form-input.resaltar-campo {
	border-color: var(--color-warning) !important;
	box-shadow: 0 0 0 3px var(--color-warn-bd);
}
.buscar-paginacion { padding: 12px 20px; }

@media (max-width: 768px) {
	/* En angosto queda solo la lupa; al tocarla se despliega el campo */
	.nav-buscador { border-color: transparent; background: transparent; }
	.nav-buscador .nav-buscador-campo { width: 0; padding: 0; }
	.nav-buscador.abierto { border-color: var(--color-accent); background: var(--color-bg); }
	.nav-buscador.abierto .nav-buscador-campo { width: 150px; padding-right: 8px; }
}

/* ================================================================
   MOVIMIENTOS DE UNA CUENTA (cuenta_movimientos.php): tabla día a día
   de una sola cuenta, con lo que entró, lo que salió y el saldo
   corrido en cada movimiento. Pedido de Jorge del 2026-09-12.
   ================================================================ */

/* Encabezado de día: fila no interactiva con la fecha en letras y el
   subtotal de lo que entró y salió ese día */
.data-table tr.fila-dia td {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-muted);
	background: var(--color-bg);
	padding-top: 10px;
	padding-bottom: 6px;
}
.data-table tbody tr.fila-dia:hover td {
	background: var(--color-bg);
}
/* La etiqueta del tipo va pegada a la descripción, en la misma línea */
.tabla-movimientos td .tag {
	margin-right: 7px;
	white-space: nowrap;
}
.tabla-movimientos td .tag i {
	margin-right: 2px;
}
/* Categoría o cuenta de contraparte, bajo la descripción */
.tabla-movimientos td .text-xs {
	margin-top: 3px;
}
/* Las tres columnas de cifras no se parten en dos líneas */
.tabla-movimientos td.td-r,
.tabla-movimientos th.td-r {
	white-space: nowrap;
}
/* Chips de tipo dentro del encabezado de la tarjeta: se encogen antes
   de empujar el título y, si no caben, bajan a su propio renglón */
.card-head.card-head-filtros {
	flex-wrap: wrap;
}
.card-head.card-head-filtros .filtro-seg {
	flex: 0 1 auto;
	min-width: 0;
}
/* Saldo de la cuenta en las tarjetas del selector de cuenta */
.atajo-saldo {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-mid);
}

@media (max-width: 768px) {
	.card-head.card-head-filtros .filtro-seg {
		flex: 1 1 100%;
	}
}

/* Celda de iconos de la grilla de cuentas: con el icono de movimientos
   (2026-09-12) son cinco y la columna, apretada por los campos anchos de
   la grilla, los apilaba uno debajo de otro. En una sola línea. */
.data-table td.celda-opciones {
	white-space: nowrap;
}
.data-table td.celda-opciones .btn-icon {
	display: inline-flex;
	vertical-align: middle;
}