.btn-acaca {
    background: var(--acaca-terracota);
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 8px;
}
.btn-acaca:hover {
    background: #A8511F;
    color: #fff;
}

.btn-acaca-outline {
    background: transparent;
    border: 1px solid var(--acaca-gris-claro);
    color: var(--acaca-azul);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
}
.btn-acaca-outline:hover {
    background: var(--acaca-crema);
}

.tabla-acaca {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.tabla-acaca thead th {
    text-align: left;
    color: var(--acaca-gris);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--acaca-gris-claro);
}
.tabla-acaca tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--acaca-gris-claro);
    vertical-align: middle;
}
.tabla-acaca tbody tr:hover {
    background: var(--acaca-crema);
}

.chip-saldo-positivo { color: var(--acaca-rojo); font-weight: 600; }
.chip-saldo-negativo { color: var(--acaca-verde); font-weight: 600; }


/* ============================================================
   TABLA "TRABAJOS INDIVIDUALES": ANCHOS FIJOS POR COLUMNA
   Objetivo: el Curso puede llevar nombres largos y necesita espacio;
   Estatus, Presupuesto, Abonado y Saldo se reducen al mínimo posible.
   ============================================================ */

.tabla-trabajos-ind {
    table-layout: fixed;        /* respeta los anchos declarados en vez de ajustarlos al contenido */
    width: 100%;                /* la tabla ocupa todo el ancho del contenedor "tarjeta" */
}

/* --- Columna Cliente: ancho fijo y recortado (en px, no en %, para que no
   compita de forma impredecible con las demás columnas de esta tabla). --- */

.tabla-trabajos-ind .col-cliente {
    width: 110px;
}

/* --- Columna Curso: recortada para dejarle sitio a Fase/Entrega/Vencimiento --- */

.tabla-trabajos-ind .col-curso {
    width: 150px;
}
.celda-curso {
    white-space: normal;        /* permite que el texto largo pase a una segunda línea */
    word-break: break-word;     /* corta palabras muy largas si no caben en el ancho disponible */
    line-height: 1.3;           /* separación cómoda entre líneas cuando el texto hace wrap */
}

/* --- Columnas nuevas: Fase, Fecha de entrega, Fecha de vencimiento ---
   Angostas: son datos cortos (una palabra o una fecha dd/mm/aaaa). --- */

.tabla-trabajos-ind .col-fase {
    width: 50px;
    text-align: center;
    font-size: 13px;
}

.tabla-trabajos-ind .col-estatus {
    width: 100px;
    text-align: center;
    font-size: 13px;
}

.tabla-trabajos-ind .col-fecha {
    width: 92px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}

/* --- Columnas de dinero (Presupuesto, Abonado, Saldo): mínimo para "$ 1.000.000" --- */

.tabla-trabajos-ind .col-dinero {
    width: 75px; /* ancho mínimo recortado, sigue alcanzando para "$ 1.000.000" */
    text-align: right;
}

.celda-dinero {
    white-space: nowrap; /* el valor monetario nunca se parte en dos líneas */
    text-align: right; /* alineación a la derecha, propia de columnas numéricas */
    font-variant-numeric: tabular-nums; /* los dígitos ocupan el mismo ancho, evitando saltos visuales */
    padding-left: 6px; /* compensa el ancho reducido de la columna */
    padding-right: 10px; /* mantiene aire hacia el borde derecho de la celda */
}
/* Color fijo por columna en la tabla de Trabajos Individuales:
   Presupuesto en azul, Abonado en verde, Saldo en rojo — sin importar el valor. */

.celda-presupuesto {
    /*color: var(--acaca-azul);*/
    color: #3D7EA6;
    font-weight: 600;
}

.celda-abonado {
    color: var(--acaca-verde);
    font-weight: 600;
}

.celda-saldo {
    color: var(--acaca-rojo);
    font-weight: 600;
}

/* --- Columna de acciones: solo los dos íconos, sin sobra de espacio --- */
.tabla-trabajos-ind .col-acciones {
    width: 80px; /* recortada, sigue alcanzando para los dos botones en una fila */
    white-space: nowrap; /* evita que los botones se apilen uno encima del otro */
}


/* --- Columna Curso, SOLO en la tabla de Contrato Fijo (Trabajos entregados) ---
   Esta regla es más específica que ".tabla-trabajos-ind .col-curso" de arriba,
   así que gana cuando el <table> tiene las dos clases juntas
   (class="tabla-acaca tabla-trabajos-ind tabla-trabajos-fijo"). Ajusta el
   ancho aquí para que NO afecte a la tabla de Trabajos Individuales. */
.tabla-trabajos-fijo .col-curso {
    width: 170px;
}

/* --- Columna Cliente, SOLO en Contrato Fijo: más angosta, para dejarle
   sitio a la columna de Acciones (acá hay 3 botones, no 2). --- */
.tabla-trabajos-fijo .col-cliente {
    width: 110px;
}

/* --- Columna Estatus, SOLO en Contrato Fijo: recortada un poco más --- */
.tabla-trabajos-fijo .col-estatus {
    width: 130px;
}

/* --- Columna de Acciones, SOLO en Contrato Fijo: acá van 3 botones
   (Abono + Editar + Eliminar) en vez de los 2 de Trabajos Individuales,
   por eso necesita más ancho que los 80px genéricos. --- */
.tabla-trabajos-fijo .col-acciones {
    width: 116px;
    white-space: nowrap;
}

/* --- Columnas de dinero (Adicional/Saldo), SOLO en Contrato Fijo: recortadas
   un poco más, para terminar de darle espacio a la columna de Acciones. --- */
.tabla-trabajos-fijo .col-dinero {
    width: 88px;
}

/* Botones más compactos en Contrato Fijo (3 por fila en vez de 2): menos
   padding lateral, para que quepan sin apretarse ni desbordar la fila. */
.tabla-trabajos-fijo .col-acciones .btn {
    padding-left: 6px;
    padding-right: 6px;
}

/* --- Columna Estatus: ancho fijo, solo lo necesario para el select --- */
.tabla-trabajos-ind .col-estatus {
    width: 90px;                /* recortada; sigue alcanzando para el nombre de estatus más largo */

}

/* ============================================================
   SELECT DE ESTATUS: FONDO COMPLETO SEGÚN COLOR DEL ESTATUS
   La variable --color-estatus llega inline desde el JS (color
   guardado en el catálogo de estatus); aquí se resuelve el
   contraste con una mezcla clara del mismo color como fondo.
   ============================================================ */
.select-estatus-inline {
    font-size: 13px;                              /* tamaño compacto, coherente con el resto de la tabla */
    font-weight: 600;                             /* texto del estatus con algo más de peso visual */
    padding: 4px 8px;                              /* espaciado interno reducido, la columna ya es angosta */
    width: 100%;                                   /* el select llena todo el ancho de la columna de estatus */
    cursor: pointer;                               /* indica que el campo es interactivo */
    color: var(--color-estatus, var(--acaca-azul)); /* el texto toma el color del estatus, con respaldo por defecto */
    background-color: color-mix(in srgb, var(--color-estatus, var(--acaca-gris-claro)) 22%, #fff); /* fondo completo, tinte claro del color de estatus */
    border: 1px solid var(--color-estatus, var(--acaca-gris-claro)); /* borde sólido en el color exacto del estatus */
    border-radius: 6px;                             /* esquinas suaves, igual que el resto de los controles */
    transition: background-color 0.15s ease;        /* transición suave al cambiar de estatus */
}

.miniatura-recibo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--acaca-gris-claro);
    transition: transform 0.15s ease;
}
.miniatura-recibo:hover {
    transform: scale(1.15);
}

.imagen-recibo-ampliada {
    max-width: 350px;
    max-height: 45vh;
    width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* ---------- Panel visual del dashboard (estilo tablero clásico) ---------- */
.tarjeta-kpi-borde {
    background: #fff;
    border: 1px solid var(--acaca-gris-claro);
    border-top: 3px solid;
    border-radius: 8px;
    padding: 14px 16px;
    height: 100%;
}
.tarjeta-kpi-borde .kpi-titulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--acaca-gris);
}
.tarjeta-kpi-borde .kpi-valor {
    font-size: 22px;
    font-weight: 700;
    color: var(--acaca-azul);
    margin: 4px 0 2px;
}
.tarjeta-kpi-borde .kpi-subtitulo {
    font-size: 11px;
    color: var(--acaca-gris);
}

.panel-oscuro {
    background: var(--acaca-azul);
    color: #fff;
    border-radius: var(--radius);
    padding: 18px;
    height: 100%;
}
.panel-oscuro strong { color: #fff; }

.btn-nav-anio {
    background: var(--acaca-crema);
    border: none;
    color: var(--acaca-azul);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    line-height: 1;
    padding: 0;
}
.btn-nav-anio:hover { background: var(--acaca-gris-claro); color: var(--acaca-azul); }

.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
}
.barra-mes {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}
.barra-valor {
    width: 100%;                          /* la barra ocupa todo el ancho disponible de su columna mensual */
    background: var(--acaca-terracota-suave); /* color de respaldo si el mes no trae color propio */
    border-radius: 4px 4px 0 0;           /* esquinas redondeadas solo en la parte superior de la barra */
    min-height: 2px;                       /* piso visual mínimo para meses en cero */
    transition: height 0.3s ease;         /* animación suave al recalcular la altura */
    position: relative;                    /* ancla de posicionamiento para la etiqueta de valor flotante */
    display: flex;                         /* habilita centrar la etiqueta de valor horizontalmente */
    justify-content: center;               /* centra la etiqueta de valor sobre la barra */
}
.barra-valor-etiqueta {
    position: absolute;                    /* se coloca por encima del tope de la barra, sin ocupar espacio */
    top: -16px;                            /* la levanta justo encima del extremo superior de la barra */
    font-size: 9px;                        /* letra pequeña, tal como se pidió, para no saturar el gráfico */
    font-weight: 600;                      /* leve énfasis para que el valor siga siendo legible */
    color: var(--acaca-texto);             /* tono oscuro, coherente con el fondo blanco del panel */
    white-space: nowrap;                   /* el valor monetario no se parte en dos líneas */
}
.barra-etiqueta {
    font-size: 10px;
    color: var(--acaca-gris);
    margin-top: 6px;
}

.badge-contador {
    background: var(--acaca-crema);
    color: var(--acaca-azul);
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 9px;
}

/* Fila de la tarjeta "Trabajos en curso": el fondo se tiñe con el color
   del estatus de cada trabajo (--color-estatus, inyectado desde el JS),
   siguiendo el mismo criterio de color aplicado al listbox de estatus. */
.item-lista-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-estatus, var(--acaca-gris)) 16%, var(--acaca-crema)); /* tinte suave del color de estatus sobre el fondo crema base */
    border-left: 3px solid var(--color-estatus, var(--acaca-gris)); /* acento sólido a la izquierda con el color exacto del estatus */
    border-radius: 8px;
    margin-bottom: 6px;
}

.item-saldo-pendiente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--acaca-rojo-suave);
    border-radius: 8px;
    margin-bottom: 6px;
}

/* ============================================================
   FICHAS KPI COMPACTAS (Trabajos Individuales: Presupuesto,
   Abonado, Saldo, Diferencia) — versión reducida de .tarjeta-kpi,
   pensada para ir varias en una sola fila junto a los filtros.
   ============================================================ */
.tarjeta-kpi-mini {
    color: #fff;                    /* texto blanco sobre el color de fondo de cada ficha */
    border-radius: 8px;             /* esquinas suaves, coherentes con el resto de tarjetas */
    padding: 8px 16px;              /* espaciado interno compacto */
    min-width: 130px;               /* ancho mínimo para que "$ 1.000.000" no se corte */
    text-align: left;               /* alineación del contenido a la izquierda */
}
.tarjeta-kpi-mini .etiqueta {
    font-size: 11px;                /* rótulo pequeño, igual criterio que las demás fichas KPI */
    opacity: 0.85;                  /* leve transparencia para diferenciarlo del valor principal */
    text-transform: uppercase;      /* mayúsculas, como en la captura de referencia */
    letter-spacing: 0.03em;         /* separación entre letras para mejorar la lectura en mayúsculas */
}
.tarjeta-kpi-mini .valor {
    font-size: 16px;                /* valor monetario, más grande que la etiqueta pero compacto */
    font-weight: 700;               /* peso fuerte para que el número resalte */
    white-space: nowrap;            /* el monto nunca se parte en dos líneas */
}

.campo-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--acaca-azul);
    margin-bottom: 4px;
}

.form-control, .form-select {
    border-color: var(--acaca-gris-claro);
    border-radius: 8px;
    font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--acaca-terracota);
    box-shadow: 0 0 0 3px rgba(193,98,45,0.15);
}

/* ============================================================
   DASHBOARD — FICHAS KPI CON ACENTO DE BORDE (NO FONDO SÓLIDO)
   Fondo blanco; el color de cada KPI solo se ve en el borde
   izquierdo y el borde inferior (~4px ≈ 3mm), y en el texto.
   Cuadrícula fija de 5 columnas (una sola fila con las 5 fichas).
   ============================================================ */
.grid-kpis-dashboard {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* exactamente 5 columnas: 5 arriba y 5 abajo */
    gap: 12px;
}
@media (max-width: 992px) {
    .grid-kpis-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* pantallas angostas: 2 por fila */
}
.tarjeta-kpi-acento {
    background: #fff;                              /* fondo blanco, ya no degradado */
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--color-kpi);        /* acento de color: borde izquierdo (~3mm) */
    border-bottom: 4px solid var(--color-kpi);       /* acento de color: borde inferior (~3mm) */
    border-top: 1px solid var(--acaca-gris-claro);   /* bordes superior/derecho neutros, solo de contorno */
    border-right: 1px solid var(--acaca-gris-claro);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.kpi-grad-titulo {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi-grad-valor {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
}
.kpi-grad-subtitulo {
    font-size: 11px;
    color: var(--acaca-gris);
    margin-top: 4px;
}

.punto-leyenda {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* ============================================================
   TOASTS PROPIOS (mostrarAlerta) — reemplazo de alert() nativo
   ============================================================ */
#acaca-toast-host {
    position: fixed;           /* flota sobre toda la app, sin importar la vista cargada */
    bottom: 20px;
    right: 20px;
    z-index: 3000;              /* por encima de los modales de Bootstrap (1055) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}
.acaca-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-left: 4px solid var(--color-toast, var(--acaca-rojo)); /* acento de color según el tipo (error/éxito/info) */
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    animation: acaca-toast-entrada 0.2s ease;
}
.acaca-toast-texto {
    font-size: 13px;
    color: var(--acaca-azul);
    line-height: 1.35;
    flex: 1;
}
.acaca-toast-cerrar {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--acaca-gris);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.acaca-toast-saliendo {
    animation: acaca-toast-salida 0.2s ease forwards;
}
@keyframes acaca-toast-entrada {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes acaca-toast-salida {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* ============================================================
   TABLA "CLIENTES": ANCHOS FIJOS POR COLUMNA
   Objetivo: Programa se recorta (no tiene por qué llevar el
   nombre entero del programa) para dejarle espacio real a los
   3 botones de Acciones (historial + editar + eliminar), que
   antes se montaban unos sobre otros al no tener ancho reservado.
   ============================================================ */
.tabla-clientes {
    table-layout: fixed;   /* SIN width:100%: la tabla toma su ancho real (suma de columnas), no se estira ni deja huecos raros */
}
.tabla-clientes .col-cli-nombre {
    width: 230px;          /* fijo, no "%", para que no compita de forma impredecible con las demás */
}
.tabla-clientes .col-cli-codigo {
    width: 90px;
}
.tabla-clientes .col-cli-programa {
    width: 170px;          /* fijo (nada de "auto"): esto es lo que estaba fallando antes */
}
.celda-programa {
    white-space: normal;     /* permite que un programa largo pase a una segunda línea */
    word-break: break-word;
    line-height: 1.3;
}
.tabla-clientes .col-cli-ciudad {
    width: 110px;
}
.tabla-clientes .col-cli-contacto {
    width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* un correo largo se corta con "..." en vez de desbordar */
}
.tabla-clientes .col-cli-acciones {
    width: 120px;             /* espacio real para los 3 botones (historial + editar + eliminar) */
    white-space: nowrap;      /* evita que se apilen uno encima del otro */
}

/* ============================================================
   CURSOS COMPLETOS — detalle "Por Fase": Estatus y las 3 columnas
   de fecha (Recepción/Entrega pautada/Vencimiento) recortadas un
   10% respecto a su ancho natural, para dejarle sitio a la nueva
   columna de Observaciones sin desbordar la tabla.
   ============================================================ */

.col-cc-fecha {
    width: 110px;    /* base ~110px, recortado 10% */
    font-size: 13px;
    white-space: nowrap;
}
.col-cc-estatus {
    width: 170px; /* base ~170px, recortado 10% */
}


/* ============================================================
   MÓDULO GASTOS — cuadrícula de 6 fichas KPI (Ingresos, Gastos,
   Haber, Efectivo, Nequi, Bancolombia). Reutiliza el mismo estilo
   de ".tarjeta-kpi-acento" que ya usa el Dashboard, con 6 columnas
   en vez de 5 (una fila completa en pantallas anchas).
   ============================================================ */
.grid-kpis-gastos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1200px) {
    .grid-kpis-gastos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .grid-kpis-gastos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}