/* --- Reseteo, Tipografía y Variables de Color (Exactas) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Base de la Tipografía */
html {
    font-size: 14px;
    /* Tamaño general de 14px */
}

body {
    /* Tipografía: Usando el stack 'system-ui' */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Colores base: zinc-900 para el fondo general */
    background-color: #18181b;
    /* rgb(24 24 27) - bg-zinc-900 */
    color: #d4d4d8;
    /* zinc-300 */
    line-height: 1.5;
    /* CRÍTICO 2: Permite el scroll del contenido si es necesario */
    overflow-x: hidden;
}

/* Variables de Color Adicionales */
:root {
    --bg-zinc-900: #18181b;
    /* Fondo de Sidebar y Header */
    --bg-zinc-900-50: #18181b80;
    --bg-zinc-800: #27272a;
    /* Fondo de Panel Principal y Tarjetas */
    --bg-zinc-700: #3f3f46;
    /* Botones Activos/Hover */
    --text-white: #ffffff;
    --text-gray-400: #a1a1aa;
    /* Textos secundarios */
    --lime-400: #a3e635;
    /* Color de acento principal (activo) */
    --error-red: #e74c3c;

    /* Colores de acentos para Dashboard */
    --teal-400: #2dd4bf;
    --cyan-400: #22d3ee;
    --emerald-400: #34d399;
    --amber-400: #f59e0b;
    --lime-400-dash: #a3e635;
    --indigo-400: #818cf8;
    --orange-400: #f97316;
    --red-400: #f87171;

    /* Colores para botones rápidos */
    --quick-btn-blue: #3b82f6;
    /* blue-500 */
    --quick-btn-green: #10b981;
    /* emerald-500 */

    --radius-md: 0.75rem;
}

/* --- Estructura y Layout --- */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar (Menú Lateral) --- */
.sidebar {
    background-color: var(--bg-zinc-900);
    width: 256px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.sidebar.open {
    transform: translateX(0);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 40;
}

.sidebar.open+.sidebar-overlay {
    display: block;
}

.sidebar-header {
    background-color: var(--bg-zinc-800);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.logo {
    font-size: 2.25rem;
    font-weight: 800;
}

.logo-accent {
    color: var(--lime-400);
}

.logo-version {
    font-size: 0.75rem;
    color: var(--text-gray-400);
}

.logo-image {
    width: 52px;
    float: right;
    display: block;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.nav-menu-title {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    padding: 0.5rem 1rem 0;
    margin-top: 1rem;
}

.nav-link {
    font-size: 1.1rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #d4d4d8;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.nav-link:hover {
    background-color: var(--bg-zinc-800);
    color: var(--text-white);
}

.nav-link.active {
    background-color: var(--bg-zinc-700);
    color: var(--text-white);
}

/* Icono inactivo y activo */
.nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    color: inherit;
}

.nav-link.active .nav-icon {
    color: var(--lime-400);
}

/*** Utilities ****/
.nbr {
    white-space: nowrap;
}

/* --- Contenedor Principal y Header --- */
.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* CRÍTICO 2: Ajustar padding del header para móvil */
    padding: 1rem 1rem;
    /* Menor padding horizontal en móvil */
    background-color: var(--bg-zinc-900);
    /* bg-zinc-900 */
    position: sticky;
    top: 0;
    z-index: 30;
}

.header-title-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.hamburger-btn {
    display: block;
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.hamburger-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.main-content {
    background-color: var(--bg-zinc-800);
    /* bg-zinc-800 */
    flex-grow: 1;
    /* CRÍTICO 2: Ajustar padding del main para móvil */
    padding: 1rem;
    /* Menor padding general en móvil */
    min-height: calc(100vh - 4rem);
    /* Curva superior izquierda: rounded-tl-3xl */
    border-top-left-radius: 1.5rem;
}

/* --- Botones de Acceso Rápido --- */
.quick-access-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columnas en móvil */
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-btn {
    display: flex;
    align-items: center;
    padding: 0.7em .8rem;
    /* Menos padding para móvil */
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.quick-btn-icon {
    width: 1.75rem;
    /* Icono ligeramente más pequeño */
    height: 1.75rem;
    margin-right: 0.5rem;
    /* Menos margen en móvil */
}

/* Estilos de color para los botones rápidos */
.quick-btn-new-credit {
    background-color: var(--quick-btn-blue);
    color: var(--text-white);
}

.quick-btn-payment-methods {
    background-color: var(--quick-btn-green);
    color: var(--text-white);
}

.quick-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* --- Grid del Dashboard --- */
.dashboard-grid {
    /* 2 columnas en móvil (CRÍTICO 2) */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    /* Menor gap en móvil */
    max-width: 100%;
    margin: 0 auto;
}

.dash-button {
    background-color: rgba(24, 24, 27, 0.5);
    padding: 1rem;
    /* Menor padding en móvil */
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #d4d4d8;
    transition: all 0.2s ease-in-out;
    /* Necesario para que el botón se vea bien en 2 columnas */
    height: 100%;
    text-align: center;
}

.dash-button:hover {
    background-color: rgba(63, 63, 70, 0.8);
    transform: translateY(-2px);
    /* Menos desplazamiento en hover para móvil */
}

/* CRÍTICO 3: Asegurar que el fondo del icono sea un círculo perfecto */
.dash-icon-bg {
    width: 4rem;
    /* Ancho fijo */
    height: 4rem;
    /* Altura fija (igual que el ancho para ser un cuadrado) */
    padding: 0;
    /* Padding interno cero */
    border-radius: 50%;
    /* 50% para un círculo perfecto */
    margin-bottom: 0.5rem;
    /* Menos margen en móvil */
    display: flex;
    align-items: center;
    /* Centrar verticalmente */
    justify-content: center;
    /* Centrar horizontalmente */
}

.dash-icon {
    width: 2rem;
    height: 2rem;
    /* El icono ya está perfectamente centrado gracias al flexbox en .dash-icon-bg */
}

.dash-text {
    font-size: 0.875rem;
    /* Tamaño de texto ligeramente más pequeño en móvil */
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Colores de Iconos del Dashboard (se mantienen) */
.bg-teal {
    background-color: rgba(45, 212, 191, 0.2);
}

.text-teal {
    color: var(--teal-400);
}

.bg-cyan {
    background-color: rgba(34, 211, 238, 0.2);
}

.text-cyan {
    color: var(--cyan-400);
}

.bg-emerald {
    background-color: rgba(52, 211, 153, 0.2);
}

.text-emerald {
    color: var(--emerald-400);
}

.bg-amber {
    background-color: rgba(245, 158, 11, 0.2);
}

.text-amber {
    color: var(--amber-400);
}

.bg-lime {
    background-color: rgba(163, 230, 53, 0.2);
}

.text-lime {
    color: var(--lime-400-dash);
}

.bg-indigo {
    background-color: rgba(129, 140, 248, 0.2);
}

.text-indigo {
    color: var(--indigo-400);
}

.bg-orange {
    background-color: rgba(249, 115, 22, 0.2);
}

.text-orange {
    color: var(--orange-400);
}

.bg-red {
    background-color: rgba(248, 113, 113, 0.2);
}

.text-red {
    color: var(--red-400);
}

/* --- Media Queries --- */

@media (min-width: 768px) {

    /* Escritorio: Sidebar estático, hamburguesa oculta */
    .sidebar {
        position: static;
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
    }

    .hamburger-btn {
        display: none;
    }

    /* Restaurar padding y tamaños para escritorio */
    .top-header {
        padding: 1rem 1.5rem;
    }

    .main-content {
        padding: 1.5rem;
    }

    .quick-btn {
        padding: 0.6rem 1.5rem;
    }

    .quick-btn-icon {
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
    }

    .dash-button {
        padding: 1.5rem;
    }

    .dash-icon-bg {
        width: 5rem;
        height: 5rem;
        margin-bottom: 0.75rem;
    }

    .dash-text {
        font-size: 1rem;
    }

    .dash-button:hover {
        transform: translateY(-4px);
    }

    .dash-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .quick-access-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 400px;
        margin: auto auto 2em;
    }

    /* CRÍTICO 5: Dashboard Grid en escritorio (768px en adelante) */
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columnas en tablet */
        gap: 1.5rem;
        max-width: 950px;
        /* Ancho máximo y centrado */
    }
}

@media (min-width: 1024px) {

    /* Escritorio grande: 4 columnas */
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Estilos para la Pantalla de Login (login.php) --- */

.login-container {
    /* Centrado total en la vista */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-white);
}

.login-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.login-header p {
    font-size: 1rem;
    color: var(--text-gray-400);
}

.accent-text {
    color: var(--lime-400);
    /* Usar el color de acento principal */
}

.login-form {
    /* Fondo de tarjeta, similar al sidebar header */
    background-color: var(--bg-zinc-900);
    padding: 2rem;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 380px;
    /* Ancho máximo para la tarjeta de login */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--bg-zinc-700);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    /* Pequeño */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
}

.form-group label .fas {
    margin-right: 0.5rem;
    color: var(--lime-400);
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-zinc-800);
    /* Fondo de input más oscuro */
    border: 1px solid var(--bg-zinc-700);
    border-radius: 0.5rem;
    color: var(--text-white);
    font-size: 1.2rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--lime-400);
    box-shadow: 0 0 0 1px var(--lime-400);
}

.btn-submit {
    width: 100%;
    padding: 0.85rem;
    background-color: var(--lime-400);
    /* Color de acento principal */
    color: var(--bg-zinc-900);
    /* Texto oscuro para contraste */
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover {
    background-color: #92d924;
    /* Tono ligeramente más claro al hacer hover */
}

.btn-submit:active {
    transform: translateY(1px);
}

/* Estilos para mensajes de error */
.error-message {
    background-color: rgba(231, 76, 60, 0.2);
    /* Fondo rojo semitransparente (error-red) */
    color: var(--error-red);
    border: 1px solid var(--error-red);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    max-width: 380px;
}

/* Estilos de loader (spinner) */
.btn-loader {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(24, 24, 27, 0.2);
    /* Base */
    border-top-color: var(--bg-zinc-900);
    /* Spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Estilos Comunes para Páginas de Contenido (Clientes, Rutas, etc.) --- */

.page-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
    position: sticky;
    top: 4rem;
    /* Debajo del top-header */
    z-index: 20;
    /* Asegura que el fondo sea coherente con el main-content */
    background-color: var(--bg-zinc-800);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.back-btn:hover {
    background-color: var(--bg-zinc-700);
}

.back-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-white);
}

/* --- Estilos de Tarjetas de Lista (Clientes) --- */

.client-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 5rem;
    /* Espacio para el FAB */
}

.client-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--bg-zinc-900);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--lime-400);
    /* Borde de acento */
    transition: background-color 0.2s;
}

.client-card:hover {
    background-color: rgba(24, 24, 27, 0.8);
}

.client-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.25rem;
}

.client-detail {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    line-height: 1.3;
}

.edit-client-btn {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: color 0.2s, background-color 0.2s;
}

.edit-client-btn:hover {
    color: var(--lime-400);
    background-color: rgba(63, 63, 70, 0.4);
}

.edit-client-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Botón Flotante de Acción (FAB) --- */

.fab-btn {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--lime-400);
    color: var(--bg-zinc-900);
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-btn svg {
    width: 2rem;
    height: 2rem;
    stroke-width: 3;
    /* Un poco más grueso */
}

.fab-btn:hover {
    background-color: #92d924;
    transform: scale(1.05);
}

/* --- Modal de Formulario (Crear/Editar) --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    overflow-y: auto;
    /* AGREGAR AV/Claude 12 Nov 2026*/
    padding: 1rem;
    /* AGREGAR AV/Claude 12 Nov 2026 */
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--bg-zinc-800);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 95%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    transform: translateY(-50px);
    transition: transform 0.3s ease-out;
    max-height: 90vh;
    /* AGREGAR AV/Claude 12 Nov 2026*/
    overflow-y: auto;
    /* AGREGAR AV/Claude 12 Nov 2026*/
    margin: auto;
    /* AGREGAR AV/Claude 12 Nov 2026*/
}

.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bg-zinc-700);
    padding-bottom: .5rem;
}

.modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
}

.close-modal-btn {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: var(--error-red);
}

.close-modal-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Reutilizando estilos de formulario de login para modal */
.modal-form .form-group {
    margin-bottom: 1rem;
}

.modal-form label {
    font-size: 0.95rem;
    color: var(--text-gray-400);
}

.modal-form input {
    padding: 0.6rem 0.8rem;
}

.modal-form small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray-400);
    margin-top: 0.25rem;
}

/* Estilos de botones primario y secundario */

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 1rem;
}

.btn-primary {
    background-color: var(--lime-400);
    color: var(--bg-zinc-900);
    width: 100%;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--bg-zinc-700);
    color: var(--text-white);
    width: 100%;
}

.btn-delete {
    background-color: var(--error-red);
    color: var(--text-white);
}

/* --- Nuevo Estilo para Alineación Derecha (Cuando un solo botón es visible) --- */
.form-actions-group.justify-end {
    justify-content: flex-end;
    /* Mueve los elementos visibles a la derecha */
}

/* Media Query para Escritorio: Ajustar FAB y Modal */
@media (min-width: 768px) {
    .fab-btn {
        right: 2rem;
        bottom: 2rem;
        width: 4rem;
        height: 4rem;
    }

    .fab-btn svg {
        width: 2.25rem;
        height: 2.25rem;
    }

    .modal-content {
        max-width: 600px;
        padding: 2rem;
    }

    /*    
    .btn-secondary {
        width: auto;
    }
*/
}

/* --- Floating Label (Efecto Modal y Login) --- */

.form-floating {
    position: relative;
    /* Necesario para manejar el small debajo del input */
    padding-bottom: 0;
}

.form-floating>input {
    /* Ajustar padding para que el label entre arriba */
    padding: 1rem 1rem 0.75rem 1rem !important;
    line-height: 1.25;
}

.form-floating>label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 0.5rem;
    margin-left: 1rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, color 0.1s;
    /* Estilo inicial del label */
    color: var(--text-gray-500);
    font-size: 1rem !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

/* El label se mueve cuando el input está enfocado o ya tiene valor */
.form-floating>input:focus~label,
.form-floating>input:not(:placeholder-shown)~label {
    transform: scale(0.85) translateY(-1rem) translateX(0.15rem);
    color: var(--lime-400);
    /* Color de acento al enfocar/rellenar */
    background-color: #27262b;
    height: 50%;
}

.form-floating>small {
    /* Ajustar la posición de los mensajes de ayuda */
    margin-top: 0.1rem;
    padding-left: 1rem;
}

/* --- Estilos para Modal de Confirmación Personalizado --- */

/* Asegura que los botones del modal de confirmación se vean alineados */
.modal-footer-custom {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--bg-zinc-700);
}

.modal-footer-custom button {
    width: 48%;
    /* Para que los dos botones ocupen casi todo el ancho */
}

/* Modal pequeño para confirmaciones */
.small-modal {
    max-width: 350px;
}

/* Estilo para el cuerpo del modal de mensaje */
.modal-content .modal-body {
    padding: 15px 25px;
    font-size: 1rem;
}

/* Estilo para mensajes de error */
.modal-content .modal-body .error-text {
    color: var(--red-400);
    font-weight: 500;
}

/* --- Estilos para Grupos de Botones en Formularios (Estándar UX/UI) --- */

/* Contenedor que alinea los botones a los lados */
.form-actions-group,
.modal-footer-custom {
    /* Reutilizamos la clase para el modal de confirmación */
    display: flex;
    /* Activa Flexbox */
    justify-content: space-between;
    /* Separa el primer y último elemento al máximo (Izquierda/Derecha) */
    align-items: center;
    gap: 10px;
    /* Espacio entre botones */
    margin-top: 20px;
    /* Separación superior del resto del formulario */
}

/* Asegura que los botones dentro del grupo ocupen espacio equitativo */
.form-actions-group button,
.modal-footer-custom button {
    flex-grow: 1;
    /* Permite que los botones crezcan y ocupen el espacio disponible */
    max-width: 50%;
    /* Limita el crecimiento para que no se vean demasiado anchos en escritorio */
    text-align: center;
    /* Centra el texto dentro del botón */
}

/* =========================================================
   -- UTILITARIOS PARA UI/UX
   ========================================================= */
/* Margins */
.mt\:0 {
    margin-top: 0 !important;
}

.mb\:0 {
    margin-bottom: 0 !important;
}

.mb\:1 {
    margin-bottom: 1rem !important;
}

.m\:auto {
    margin: auto !important;
}

.mx\:auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.w\:auto {
    width: auto !important;
}

.w\:200 {
    width: 200px !important;
}

.d\:none {
    display: none !important;
}

.d\:flex {
    display: flex !important;
}

.d\:block {
    display: block !important;
}

.d\:inline {
    display: inline !important;
}

.d\:inline-block {
    display: inline-block !important;
}

/* =========================================================
   -- ESTILOS ESPECÍFICOS: CAJA (INVERSIONES Y RETIROS)
   ========================================================= */



.form-card {
    background-color: var(--bg-zinc-900);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* Botón de Retiro (usa la clase de error definida anteriormente) */
.btn-error {
    background-color: var(--red-400);
}

.btn-error:hover {
    background-color: var(--red-500);
}


/* --- Estilos para el Switch de Filtro --- */

.filter-switch-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.filter-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.custom-switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
    flex-shrink: 0;
    /*avoid shrinking*/
}

.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-zinc-700);
    transition: .4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Estado de Switch Activo (Verde) */
input:checked+.slider {
    background-color: var(--lime-400);
}

input:checked+.slider:before {
    transform: translateX(20px);
}


/* --- Estilos para la Lista de Movimientos --- */

.movimiento-item {
    background-color: var(--bg-zinc-900-50);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    /*border-left: 5px solid;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
}

.movimiento-item:hover:not(.item-deactivated) {
    background-color: var(--bg-zinc-700);
}

.movimiento-info {
    flex-grow: 1;
}

.movimiento-monto {
    font-weight: 600;
    font-size: 1.2rem;
    margin-left: 15px;
    white-space: nowrap;
    /* Evita que el monto se divida */
}

/* Colores en el listado */
.movimiento-item.inversion {
    border-left-color: var(--lime-400);
}

.movimiento-item.inversion .movimiento-monto {
    color: var(--lime-400);
}

.movimiento-item.retiro {
    border-left-color: var(--red-400);
}

.movimiento-item.retiro .movimiento-monto {
    color: var(--red-400);
}

.movimiento-description {
    font-weight: 500;
}

/* ESTADO DESACTIVADO (BORRADO LÓGICO) */
/* Fondo #f53c3c con transparencia y texto tenue */
.item-deactivated {
    background-color: #3b2828;
    border-left-color: #4f4c4c !important;
    opacity: 0.7;
    padding: 7px 15px;
}

.item-deactivated .movimiento-monto,
.item-deactivated .movimiento-info p {
    color: #a0a0a0;
    /* Texto gris para indicar inactividad */
    text-decoration: line-through;
}

.movimiento-fecha {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* =========================================================
   -- ESTILOS ADICIONALES: SALDO Y FILTROS DE CAJA
   ========================================================= */

/* --- Saldo en Caja Card (Punto 2) --- */
/*
.saldo-card-container {
}
*/
.saldo-card {
    background-color: var(--bg-zinc-900);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.saldo-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.saldo-monto {
    font-size: 2.5rem;
    /* Grande y legible */
    font-weight: 700;
    color: var(--lime-400);
    /* Color principal del acento */
    line-height: 1.1;
}

/* Color de Saldo Negativo (opcional, se maneja con JS) */
.saldo-monto.negative {
    color: var(--red-400) !important;
}

/* --- Selector de Movimientos (Tabs/Pills) y Controles (Punto 3) --- */

.movimiento-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    /* Asegura que el contenedor de lista empiece después de esto */
    flex-wrap: wrap;
}

.tab-selector {
    display: flex;
    background-color: var(--bg-zinc-700);
    border-radius: 8px;
    padding: 3px;
}

.tab-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tab-button:hover:not(.active) {
    color: var(--text-primary);
}

.tab-button.active {
    background-color: var(--bg-zinc-800);
    color: var(--text-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Asegurar que el filtro switch se alinee correctamente */
.movimiento-controls .filter-switch-group {
    margin-bottom: 0;
}

/* =========================================================
   -- ESTILOS: Notificación Toast (Punto 1)
   ========================================================= */

.toast-notification {
    position: fixed;
    bottom: -100px;
    /* Inicia oculto abajo */
    left: 0;
    /*transform: translateX(-50%);*/
    width: 100%;
    text-align: center;
    background-color: var(--lime-400);
    /* Color verde de éxito */
    color: var(--bg-zinc-900);
    /* Texto oscuro */
    padding: 12px 25px;
    /*border-radius: 30px;*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    font-weight: 600;
    font-size: 0.95rem;
    transition: bottom 0.5s ease-in-out;
    opacity: 0;
    white-space: nowrap;
}

/* Estado visible (cuando se añade la clase 'show') */
.toast-notification.show {
    bottom: 0px;
    opacity: 1;
}

@media (min-width: 768px) {
    .toast-notification {
        left: 50%;
        transform: translateX(-50%);
        border-radius: 30px;
        width: auto;
    }

    .toast-notification.show {
        bottom: 30px;
    }
}

/* =========================================================
   -- ESTILOS: Layout Caja (Desktop 1/3 + 2/3)
   ========================================================= */

/* MÓVIL (Por defecto): 
  Los elementos se apilan verticalmente gracias a flex-direction.
*/
.caja-layout-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Separación entre (Saldo/Formularios) y la Lista en móvil */
}

.caja-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Separación entre Saldo y Formularios en móvil */
}

/* ESCRITORIO (768px y más): 
  Activamos el Grid para el layout 1/3 + 2/3
*/
@media (min-width: 768px) {
    .caja-layout-grid {
        display: grid;
        /* Define 2 columnas: la 1ra (1fr) es 1/3, la 2da (2fr) es 2/3 */
        grid-template-columns: 1fr 2fr;
        gap: 20px;
        align-items: flex-start;
        /* Alinea ambas columnas en la parte superior */
    }
}


/* =========================================================
   ESTILOS ESPECÍFICOS: CRÉDITOS 12 Nov 2026
   ========================================================= */

/* --- Lista de Créditos --- */
.credito-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 5rem;
}

.credito-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--bg-zinc-900);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
    cursor: pointer;
}

.credito-card:hover {
    background-color: rgba(24, 24, 27, 0.8);
}

.credito-status-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credito-status-icon.activo {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.credito-status-icon.vencido {
    background-color: rgba(248, 113, 113, 0.2);
    color: var(--red-400);
}

.credito-status-icon.saldado {
    background-color: rgba(52, 211, 153, 0.2);
    color: var(--emerald-400);
}

.credito-status-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.credito-info {
    flex-grow: 1;
}

.credito-cliente-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.25rem;
}

.credito-detail {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    line-height: 1.3;
}

.credito-arrow {
    color: var(--text-gray-400);
    flex-shrink: 0;
}

.credito-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- Modal de Crédito (Formulario más ancho) --- */
.modal-credito-form {
    max-width: 650px;
}

/* --- Saldo en Caja en el Formulario --- */
.credito-saldo-display {
    background-color: var(--bg-zinc-900);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 2px solid var(--lime-400);
}

.credito-saldo-display .saldo-label {
    font-size: 1rem;
    color: var(--text-gray-400);
    margin-bottom: 0.5rem;
}

.credito-saldo-display .saldo-monto {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--lime-400);
    line-height: 1;
}

/* --- Selectores con Iconos (Cliente, Codeudor, Plazo) --- */
.credito-selector-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-zinc-700);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.credito-selector-group:hover {
    background-color: rgba(63, 63, 70, 0.8);
}

.selector-icon {
    width: 2rem;
    height: 2rem;
    color: var(--lime-400);
    flex-shrink: 0;
}

.selector-info {
    flex-grow: 1;
}

.selector-label {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-bottom: 0.15rem;
}

.selector-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-white);
}

/* --- Cuota Calculada --- */
.credito-cuota-calculada {
    background-color: var(--bg-zinc-700);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.cuota-label {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-bottom: 0.25rem;
}

.cuota-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lime-400);
}

/* --- Switches en el Formulario de Crédito --- */
.credito-switches-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* --- Lista de Selectores (Clientes, Codeudores) --- */
.selector-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.selector-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 0.5rem;
}

.selector-item:hover {
    background-color: var(--bg-zinc-700);
}

.selector-item-text {
    font-weight: 500;
    color: var(--text-white);
}

.selector-item-detail {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-top: 0.15rem;
}

/* Opción para ningún codeudor */
.selector-item.none-option {
    background-color: var(--bg-zinc-700);
    border: 1px dashed var(--text-gray-400);
}

/* --- DETALLE DEL CRÉDITO --- */
.credito-detalle-wrapper {
    padding-bottom: 2rem;
}

.credito-detalle-content {
    max-width: 900px;
    margin: 0 auto;
}

.detalle-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.detalle-credito-numero {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 1rem;
}

.detalle-actions {
    /*display: flex;*/
    /*justify-content: center;*/
    align-items: center;
    /*gap: 1rem;*/
    /*flex-wrap: wrap;*/
}

.btn-icon {
    background: none;
    border: 1px solid var(--text-gray-400);
    color: var(--text-gray-400);
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover:not(:disabled) {
    border-color: var(--lime-400);
    color: var(--lime-400);
}

.btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.btn-anular-credito {
    background-color: var(--red-400);
}

.btn-anular-credito:hover {
    background-color: #f87171;
    opacity: 1;
}

/* Cliente Card */
.detalle-cliente-card {
    background-color: var(--bg-zinc-900);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--lime-400);
    display: flex;
    align-items: center;
}

.detalle-label {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    margin-bottom: 0.25rem;
}

.detalle-cliente-nombre {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
}

/* Grid de Información en 2 Columnas */
.detalle-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    background-color: var(--bg-zinc-900);
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .detalle-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.detalle-info-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detalle-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bg-zinc-700);
}

.info-label {
    font-size: 0.9rem;
    color: var(--text-gray-400);
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    text-align: right;
}

.info-estado {
    color: var(--lime-400);
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Botones de Acciones */
.detalle-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .detalle-action-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

.detalle-action-buttons .btn-primary,
.detalle-action-buttons .btn-secondary {
    margin-top: 0;
}

.btn-abonar {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .btn-abonar {
        grid-column: span 1;
    }
}

/* Mensajes en listas vacías */
.empty-message,
.loading-message {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-gray-400);
    font-size: 1rem;
}


/* Estilo personalizado para scrollbar en el modal (tema zinc oscuro) */
.modal-content::-webkit-scrollbar {
    width: 10px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--bg-zinc-900);
    border-radius: 5px;
    margin: 0.5rem 0;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--bg-zinc-700);
    border-radius: 5px;
    border: 2px solid var(--bg-zinc-800);
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--bg-zinc-600);
}

/* Scrollbar global para la aplicación (opcional - aplicar a toda la app) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-zinc-700) var(--bg-zinc-900);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-zinc-900);
}

*::-webkit-scrollbar-thumb {
    background: var(--bg-zinc-700);
    border-radius: 5px;
    border: 2px solid var(--bg-zinc-800);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--bg-zinc-600);
}

/* =========================================================
   ESTILOS ESPECÍFICOS: MEDIOS DE PAGO
   ========================================================= */

/* --- Lista de Medios de Pago --- */
.medios-pago-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 5rem;
}

.medio-pago-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--bg-zinc-900);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--lime-400);
    transition: background-color 0.2s;
}

.medio-pago-card:hover {
    background-color: rgba(24, 24, 27, 0.8);
}

.medio-pago-card.protegido {
    border-left-color: var(--amber-400);
    opacity: 0.9;
}

.medio-pago-card.inactivo {
    opacity: 0.6;
    border-left-color: var(--text-gray-400);
}

.medio-pago-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.medio-pago-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.medio-pago-card.protegido .medio-pago-icon {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--amber-400);
}

.medio-pago-card.inactivo .medio-pago-icon {
    background-color: rgba(161, 161, 170, 0.2);
    color: var(--text-gray-400);
}

.medio-pago-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.medio-pago-details {
    flex-grow: 1;
}

.medio-pago-nombre {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.25rem;
}

.medio-pago-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-protegido {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--amber-400);
}

.badge-activo {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.badge-inactivo {
    background-color: rgba(161, 161, 170, 0.2);
    color: var(--text-gray-400);
}

.medio-pago-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.edit-medio-pago-btn {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: color 0.2s, background-color 0.2s;
}

.edit-medio-pago-btn:hover {
    color: var(--lime-400);
    background-color: rgba(63, 63, 70, 0.4);
}

.edit-medio-pago-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.edit-medio-pago-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}


/* =========================================================
   ESTILOS ESPECÍFICOS: GASTOS E INGRESOS
   ========================================================= */

/* --- Lista de Gastos e Ingresos --- */
.gastos-ingresos-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 8rem;
    /* Espacio para selector inferior y FAB */
}

.gi-movimiento-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--bg-zinc-900);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
    cursor: pointer;
}

.gi-movimiento-item:hover {
    background-color: rgba(24, 24, 27, 0.8);
}

.gi-movimiento-item.anulado {
    opacity: 0.5;
    background-color: rgba(59, 40, 40, 0.5);
}

.gi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gi-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.gi-icon.gasto {
    background-color: rgba(248, 113, 113, 0.2);
    color: var(--red-400);
}

.gi-icon.ingreso {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.gi-movimiento-info {
    flex-grow: 1;
    line-height: 1.1;
}

.gi-movimiento-descripcion {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 0.25rem;
}

.gi-movimiento-fecha {
    font-size: 0.875rem;
    color: var(--text-gray-400);
}

.gi-movimiento-monto {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}

.gi-movimiento-monto.gasto {
    color: var(--red-400);
}

.gi-movimiento-monto.ingreso {
    color: var(--lime-400);
}

.gi-delete-btn {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: color 0.2s, background-color 0.2s;
}

.gi-delete-btn:hover {
    color: var(--red-400);
    background-color: rgba(248, 113, 113, 0.1);
}

.gi-delete-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Selector Inferior (Bottom Tabs) con Slider --- */
.gastos-ingresos-bottom-selector {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    /*var(--bg-zinc-800);*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem;
    z-index: 40;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.gi-tab-slider {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    width: calc(50% - 0.75rem);
    height: calc(100% - 1rem);
    background-color: var(--bg-zinc-700);
    border-radius: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.gi-tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    transition: color 0.3s;
    font-size: 0.7rem;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.gi-tab-button svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s;
}

.gi-tab-button.active {
    color: var(--lime-400);
}

.gi-tab-button.active svg {
    transform: scale(1.1);
}

.gi-tab-button:nth-child(3).active~.gi-tab-slider {
    transform: translateX(calc(100% + 0.5rem));
}

/* Ajustar FAB para no chocar con selector inferior */
#gi-fab-btn {
    bottom: 5.5rem;
}

/* =========================================
   ESTILOS PARA ESTADO ANULADO Y BADGES
   ========================================= */

/* 1. Contenedor del movimiento anulado */
.gi-movimiento-item.anulado {
    opacity: 0.5;
    background-color: var(--bg-zinc-900);
    /* Mantiene tu variable de fondo */
}

/* 2. Texto tachado para descripción y monto */
.gi-movimiento-item.anulado .gi-movimiento-monto,
.gi-movimiento-item.anulado .gi-movimiento-descripcion {
    text-decoration: line-through;
    color: #7f8c8d;
}

/* 3. Sistema de Badges (Etiquetas) */
.badge-status {
    display: inline-block;
    font-size: 0.65rem;
    /*padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;*/
    font-weight: 500;
    text-transform: uppercase;
    vertical-align: middle;
    color: #c7c7c7;

    /* Propiedades críticas para anulación */
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Colores específicos por tipo de badge */
/*
.badge-status.anular {
    background-color: #e74c3c; 
}
*/
.badge-status.caja {
    /*background-color: #3498db; /* Azul informativo */
    margin-left: 6px;
}

/* Regla de seguridad: forzar que los badges NUNCA se tachen 
   incluso si el padre tiene line-through */
.gi-movimiento-item.anulado .badge-status {
    text-decoration: none !important;
}

/* --- Media Query para Escritorio --- */
@media (min-width: 768px) {
    .gastos-ingresos-bottom-selector {
        position: sticky;
        bottom: 0;
        left: auto;
        right: auto;
        max-width: 900px;
        margin: 0 auto;
    }

    #gi-fab-btn {
        bottom: 2rem;
    }

    .gastos-ingresos-list-container {
        padding-bottom: 2rem;
    }
}

/* =========================================
   BUSCADOR DE CLIENTES (Full Screen Overlay)
   ========================================= */

/* Botón en el header (Ajuste para que se vea a la derecha) */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Separa los elementos */
}

.icon-btn-header {
    background: none;
    border: none;
    color: var(--zinc-300);
    /* Usando tu variable de texto */
    cursor: pointer;
    padding: 8px;
}

.icon-btn-header svg {
    width: 24px;
    height: 24px;
}

/* Contenedor Principal del Buscador */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-zinc-900);
    z-index: 2000;
    /* Por encima de todo */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    /* Oculto a la derecha */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-overlay.open {
    transform: translateX(0);
}

/* Cabecera del buscador (Input + Botones) */
.search-header {
    flex-shrink: 0;
    /* No encogerse */
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--bg-zinc-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
}

.close-search-btn,
.clear-search-btn {
    background: none;
    border: none;
    color: var(--zinc-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-search-btn svg,
.clear-search-btn svg {
    width: 24px;
    height: 24px;
}

/* El input de búsqueda */
#client-search-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    outline: none;
}

#client-search-input::placeholder {
    color: var(--zinc-500);
}

/* Lista de resultados (Scrollable) */
.search-results-list {
    flex-grow: 1;
    overflow-y: auto;
    /* Scroll independiente */
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iOS */
}

/* Reutilizamos estilos de tarjetas de cliente pero con ajustes si es necesario */
.search-results-list .client-card {
    margin-bottom: 10px;
    background-color: var(--bg-zinc-800);
}

/* Mensaje cuando no hay resultados */
.no-results {
    text-align: center;
    color: var(--zinc-500);
    margin-top: 2rem;
    font-size: 1rem;
}


/* =========================================================
   FLATPICKR - PERSONALIZACIÓN TEMA OSCURO DINAPP
   ========================================================= */

/* Calendario principal */
.flatpickr-calendar {
    background-color: var(--bg-zinc-800) !important;
    border: 1px solid var(--bg-zinc-700) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    border-radius: 0.75rem !important;
}

/* Header del mes */
.flatpickr-months {
    background-color: var(--bg-zinc-900) !important;
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background-color: var(--bg-zinc-900) !important;
    color: var(--text-white) !important;
    font-weight: 600;
}

/* Flechas de navegación */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--text-gray-400) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--lime-400) !important;
}

/* Días del calendario */
.flatpickr-day {
    color: var(--text-white) !important;
    border-radius: 0.375rem !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background-color: var(--bg-zinc-700) !important;
    border-color: var(--bg-zinc-700) !important;
}

/* Día seleccionado */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: var(--lime-400) !important;
    border-color: var(--lime-400) !important;
    color: var(--bg-zinc-900) !important;
    font-weight: 700;
}

/* Día de hoy */
.flatpickr-day.today {
    border-color: var(--lime-400) !important;
    font-weight: 600;
}

.flatpickr-day.today:hover {
    background-color: var(--bg-zinc-700) !important;
    border-color: var(--lime-400) !important;
    color: var(--text-white) !important;
}

/* Días deshabilitados */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-gray-400) !important;
    opacity: 0.3;
}

/* Encabezados de días de la semana */
.flatpickr-weekday {
    color: var(--text-gray-400) !important;
    font-weight: 600;
    font-size: 0.875rem;
}

span.flatpickr-weekday {
    background-color: var(--bg-zinc-900) !important;
}

/* Días de otros meses */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-gray-400) !important;
    opacity: 0.5;
}

/* =========================================================
   FLATPICKR - MODO INLINE PARA MÓVIL (ANDROID FIX)
   ========================================================= */

/* Activador visible (simula input) */
.flatpickr-activador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.75rem 1rem;
    /* Ajustado para floating label */
    background-color: var(--bg-zinc-800);
    border: 1px solid var(--bg-zinc-700);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 56px;
    /* Altura para coincidir con inputs normales */
    user-select: none;
}

.flatpickr-activador:hover {
    border-color: var(--lime-400);
}

.flatpickr-activador:active {
    border-color: var(--lime-400);
    box-shadow: 0 0 0 1px var(--lime-400);
}

.flatpickr-activador span {
    color: var(--text-white);
    font-size: 1rem;
    flex-grow: 1;
}

.flatpickr-activador svg {
    color: var(--lime-400);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* CRÍTICO: Contenedor con posición absoluta */
.flatpickr-inline-container {
    position: absolute;
    z-index: 1000;
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    animation: slideDown 0.2s ease-out;
    /* Ancho completo en móvil */
    left: 0;
    right: 0;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Calendario inline */
.flatpickr-inline-container .flatpickr-calendar {
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
    position: static !important;
}

/* Label flotante - ESPECÍFICO para campos con Flatpickr activador */
.form-floating:has(.flatpickr-activador)>label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0.5rem;
    margin-left: 1rem;
    /* CRÍTICO: Siempre en posición flotante para activadores */
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    color: var(--lime-400) !important;
    background-color: var(--bg-zinc-800);
    font-size: 1rem !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
    z-index: 1;
    height: auto;
}

/* Ajustes para móvil */
@media (max-width: 768px) {
    .flatpickr-inline-container .flatpickr-calendar {
        font-size: 1rem !important;
    }

    .flatpickr-inline-container .flatpickr-day {
        height: 42px !important;
        line-height: 42px !important;
        max-width: 42px !important;
    }

    .flatpickr-inline-container .flatpickr-months {
        padding: 0.75rem 0 !important;
    }
}

/* En escritorio - más compacto */
@media (min-width: 768px) {
    .flatpickr-inline-container {
        width: auto;
        min-width: 320px;
        left: auto;
        right: auto;
    }
}

/* Ajustes específicos para modo inline */
.flatpickr-inline-container .flatpickr-calendar.inline {
    display: block !important;
    position: static !important;
}

/* Ajustes para días en modo inline (móvil) */
@media (max-width: 768px) {
    .flatpickr-inline-container .flatpickr-calendar {
        font-size: 1rem !important;
    }

    .flatpickr-inline-container .flatpickr-day {
        height: 42px !important;
        line-height: 42px !important;
        max-width: 42px !important;
    }

    .flatpickr-inline-container .flatpickr-months {
        padding: 0.75rem 0 !important;
    }
}


/* =========================================================
   ESTILOS PARA GEOLOCALIZACIÓN
   ========================================================= */

/* Contenedor del campo de dirección con botón */
.direccion-con-geo {
    position: relative;
}

/* Botón de geolocalización dentro del input */
.btn-geolocalizacion {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lime-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    /* CRÍTICO: Mantener posición fija incluso cuando el input tenga contenido */
    margin-top: 0;
}

.btn-geolocalizacion:hover {
    background-color: rgba(163, 230, 53, 0.1);
    transform: translateY(-50%) scale(1.1);
}

.btn-geolocalizacion:active {
    transform: translateY(-50%) scale(0.95);
}

.btn-geolocalizacion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-geolocalizacion svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Animación de carga para el botón */
.btn-geolocalizacion.loading {
    animation: pulseGeo 1.5s ease-in-out infinite;
}

@keyframes pulseGeo {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* AJUSTE 1: Mantener el fondo igual a los demás inputs */
.direccion-con-geo input {
    background-color: var(--bg-zinc-800);
    padding-right: 3rem !important;
}

/* Cuando el campo es editable, solo cambiar el borde */
.direccion-con-geo input.editable {
    border-color: var(--lime-400);
    /* NO cambiar el background-color aquí */
}

/* Ajuste para que el botón no tape el texto */
.direccion-con-geo input {
    padding-right: 3rem !important;
}



/* =========================================================
   ESTILOS PARA REPORTES DESPLEGABLES DE CRÉDITO 1123
   ========================================================= */

/* Botón Ver Cuotas Editadas */
.btn-ver-cuotas-editadas {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--amber-400);
    color: var(--bg-zinc-900);
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s;
}

.btn-ver-cuotas-editadas:hover {
    opacity: 0.9;
}

/* Contenedor de Sección de Reporte */
.reporte-seccion {
    background-color: var(--bg-zinc-900);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Header del Reporte (Clickeable) */
.reporte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.reporte-header:hover {
    background-color: rgba(24, 24, 27, 0.8);
}

.reporte-titulo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: calc(100% - 28px);
}

.reporte-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
    margin: 0;
}

.reporte-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    background-color: var(--lime-400);
    color: var(--bg-zinc-900);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 1rem;
}

.reporte-chevron {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.reporte-header.expanded .reporte-chevron {
    transform: rotate(180deg);
}

/* Contenido del Reporte */
.reporte-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    padding: 0 1.25rem;
}

.reporte-contenido.visible {
    max-height: 5000px;
    padding: 0 1.25rem 1rem 1.25rem;
}

/* Items de Reporte (Abonos, Cuotas, Multas, Descuentos) */
.reporte-item {
    background-color: var(--bg-zinc-800);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--lime-400);
    position: relative;
}

.reporte-item.cancelado {
    opacity: 0.6;
    border-left-color: var(--red-400);
}

.reporte-item.reportado {
    border-left-color: var(--amber-400);
}

/* Header del Item con Acciones */
.reporte-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.reporte-item-info {
    flex-grow: 1;
}

.reporte-item-monto {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lime-400);
    margin-bottom: 0.25rem;
}

.reporte-item.cancelado .reporte-item-monto {
    color: var(--red-400);
    text-decoration: line-through;
}

.reporte-item-fecha {
    font-size: 0.875rem;
    color: var(--text-gray-400);
}

/* Badges de Estado */
.reporte-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.badge-activo {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.badge-cancelado {
    background-color: rgba(248, 113, 113, 0.2);
    color: var(--red-400);
}

.badge-reportado {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--amber-400);
}

.badge-pendiente {
    background-color: rgba(161, 161, 170, 0.2);
    color: var(--text-gray-400);
}

.badge-pagada {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.badge-vencida {
    background-color: rgba(248, 113, 113, 0.2);
    color: var(--red-400);
}

/* Acciones del Item */
.reporte-item-acciones {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.reporte-btn-accion {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.reporte-btn-accion:hover {
    color: var(--lime-400);
    background-color: rgba(163, 230, 53, 0.1);
}

.reporte-btn-accion:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.reporte-btn-accion.danger:hover {
    color: var(--red-400);
    background-color: rgba(248, 113, 113, 0.1);
}

.reporte-btn-accion svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Detalles del Item */
.reporte-item-detalles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bg-zinc-700);
}

.reporte-detalle-linea {
    font-size: 0.875rem;
}

.reporte-detalle-label {
    color: var(--text-gray-400);
    font-weight: 500;
}

.reporte-detalle-valor {
    color: var(--text-white);
    margin-left: 0.25rem;
}

/* Observaciones en Items */
.reporte-item-observaciones {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bg-zinc-700);
    font-size: 0.875rem;
    color: var(--text-gray-400);
    font-style: italic;
}

/* Sección de Observaciones del Crédito */
.reporte-seccion.observaciones-credito {
    box-shadow: none;
}

.reporte-seccion.observaciones-credito .reporte-header {
    cursor: default;
    padding-bottom: 0.5rem;
}

.reporte-seccion.observaciones-credito .reporte-header:hover {
    background-color: transparent;
}

.observaciones-texto {
    font-size: 0.95rem;
    color: var(--text-gray-400);
    line-height: 1.6;
    font-style: italic;
}

/* Estilos Responsivos */
@media (max-width: 768px) {
    .reporte-item-detalles {
        grid-template-columns: 1fr;
    }

    .reporte-item-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .reporte-item-acciones {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Estados Especiales para Cuotas */
.reporte-item.cuota-editada {
    border-left-color: var(--cyan-400);
}

.reporte-item.cuota-editada::after {
    content: 'Editada';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background-color: rgba(34, 211, 238, 0.2);
    color: var(--cyan-400);
    border-radius: 0.25rem;
    font-weight: 600;
}

/* =========================================================
   ESTILOS PARA EL FILTRO DE CLIENTES
   ========================================================= */

/* Contenedor del dropdown de filtro */
.filtro-dropdown {
    position: relative;
    display: inline-block;
}

/* Menú de opciones de filtro */
.filtro-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-zinc-800);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 100;
    min-width: 150px;
    display: none;
    flex-direction: column;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
}

/* Mostrar el menú cuando tiene la clase 'show' */
.filtro-dropdown-menu.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Opciones del menú de filtro */
.filtro-option {
    padding: 0.75rem 1rem;
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
    cursor: pointer;
}

.filtro-option:hover {
    background-color: var(--bg-zinc-700);
}

/* Ajustes para el header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* =========================================================
   ESTILOS PARA LISTA DE CUOTAS
   ========================================================= */

/* Lista de cuotas */
.cuotas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Item individual de cuota */
.cuota-item {
    background-color: var(--bg-zinc-900);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid var(--bg-zinc-700);
    transition: all 0.2s ease;
}

.cuota-item:hover {
    background-color: rgba(63, 63, 70, 0.3);
    border-left-color: var(--lime-400);
}

/* Contenedor izquierdo - información de la cuota */
.cuota-izquierda {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /*flex-grow: 1;*/
}

/* Número de cuota con estado */
.cuota-numero {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Datos de la cuota */
.cuota-datos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Fechas y montos */
.cuota-fecha,
.cuota-fecha-editada,
.cuota-monto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.fecha-label,
.monto-label {
    color: var(--text-gray-500);
    font-weight: 500;
    min-width: 60px;
}

.fecha-valor,
.monto-valor {
    color: var(--text-white);
    font-weight: 500;
}

.cuota-fecha-editada .fecha-label {
    color: var(--lime-400);
}

/* Contenedor derecho - estado y acciones */
.cuota-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

/* Estado de la cuota */
.cuota-estado {
    display: flex;
    justify-content: flex-end;
}

/* Estados de cuota */
.estado-badge {
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.estado-pendiente {
    background-color: rgba(163, 230, 53, 0.2);
    color: var(--lime-400);
}

.estado-vencida {
    background-color: rgba(248, 113, 113, 0.2);
    color: var(--red-400);
}

.estado-pagada {
    background-color: rgba(52, 211, 153, 0.2);
    color: var(--emerald-400);
}

/* Botón de editar fecha con icono de calendario */
.btn-editar-fecha {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-editar-fecha:hover {
    background-color: var(--bg-zinc-700);
    color: var(--lime-400);
}

.btn-editar-fecha svg {
    width: 18px;
    height: 18px;
}

/* Input para edición de fecha */
.input-fecha-edicion {
    width: 100%;
    padding: 0.25rem 0.5rem;
    background-color: var(--bg-zinc-800);
    border: 1px solid var(--lime-400);
    border-radius: 0.25rem;
    color: var(--text-white);
    font-size: 0.875rem;
}

/* Media queries para escritorio */
@media (min-width: 768px) {
    .cuota-item {
        padding: 1.25rem;
    }

    .cuota-datos {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .cuota-fecha,
    .cuota-fecha-editada,
    .cuota-monto {
        flex: 1;
        min-width: 200px;
    }

    .cuota-derecha {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

/* Media queries para pantallas más grandes */
@media (min-width: 1024px) {
    .cuota-izquierda {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    .cuota-numero {
        margin-bottom: 0;
        min-width: 80px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cuota-numero .estado-badge {
        margin-left: 0;
    }

    .cuota-datos {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

/* --- Modal Abonar Styles --- */
.modal-abonar {
    background-color: #000;
    /* Black background as per image */
    border-radius: 1.5rem;
    width: 90%;
    max-width: 350px;
    padding: 1.5rem;
    border: 1px solid #333;
}

.modal-header-abonar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title-abonar {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.abonar-controls {
    display: flex;
    gap: 0.5rem;
}

.control-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: transform 0.1s;
}

.control-btn:active {
    transform: scale(0.95);
}

.control-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 3;
}

.btn-decrease {
    background-color: #ef4444;
    /* Red-500 */
}

.btn-increase {
    background-color: #84cc16;
    /* Lime-500 */
}

.abonar-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group-abonar {
    position: relative;
}

.abonar-label {
    position: absolute;
    top: -0.6rem;
    left: 1rem;
    background-color: #000;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    z-index: 10;
}

.abonar-input-wrapper {
    position: relative;
}

.abonar-input {
    width: 100%;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    outline: none;
}

.abonar-input:focus {
    border-color: #84cc16;
}

.clear-input-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.abonar-input-text {
    width: 100%;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 1rem;
    font-size: 1rem;
    color: white;
    outline: none;
}

.medio-pago-selector-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    padding: 0.5rem 0;
    cursor: pointer;
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.5rem;
    background-color: var(--bg-zinc-800);
    border: 1px solid var(--lime-400);
    border-radius: 0.25rem;
    color: var(--text-white);
    font-size: 0.875rem;
}

/* Media queries para escritorio */
@media (min-width: 768px) {
    .cuota-item {
        padding: 1.25rem;
    }

    .cuota-datos {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .cuota-fecha,
    .cuota-fecha-editada,
    .cuota-monto {
        flex: 1;
        min-width: 200px;
    }

    .cuota-derecha {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

/* Media queries para pantallas más grandes */
@media (min-width: 1024px) {
    .cuota-izquierda {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    .cuota-numero {
        margin-bottom: 0;
        min-width: 80px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cuota-numero .estado-badge {
        margin-left: 0;
    }

    .cuota-datos {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

/* --- Modal Abonar Styles --- */
.modal-abonar {
    background-color: #000;
    /* Black background as per image */
    border-radius: 1.5rem;
    width: 90%;
    max-width: 350px;
    padding: 1.5rem;
    border: 1px solid #333;
}

.modal-header-abonar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title-abonar {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.abonar-controls {
    display: flex;
    gap: 0.5rem;
}

.control-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: transform 0.1s;
}

.control-btn:active {
    transform: scale(0.95);
}

.control-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 3;
}

.btn-decrease {
    background-color: #ef4444;
    /* Red-500 */
}

.btn-increase {
    background-color: #84cc16;
    /* Lime-500 */
}

.abonar-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group-abonar {
    position: relative;
}

.abonar-label {
    position: absolute;
    top: -0.6rem;
    left: 1rem;
    background-color: #000;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    z-index: 10;
}

.abonar-input-wrapper {
    position: relative;
}

.abonar-input {
    width: 100%;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    outline: none;
}

.abonar-input:focus {
    border-color: #84cc16;
}

.clear-input-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.abonar-input-text {
    width: 100%;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 1rem;
    font-size: 1rem;
    color: white;
    outline: none;
}

.medio-pago-selector-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    padding: 0.5rem 0;
    cursor: pointer;
    margin-top: 0.5rem;
}

.medio-pago-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#medio-pago-selector-abono-modal .medio-pago-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.medio-pago-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

#medio-pago-selector-abono-modal .medio-pago-info {
    display: flex;
    flex-direction: column;
}

.medio-pago-label {
    font-size: 0.8rem;
    color: #a1a1aa;
}

.medio-pago-value {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.modal-footer-abonar {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-cancel-abonar {
    flex: 1;
    padding: 0.75rem;
    border-radius: 2rem;
    border: none;
    background-color: #ef4444;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.cuota-numero .estado-badge {
    margin-left: 0;
}

.btn-cancel-abonar {
    flex: 1;
    padding: 0.75rem;
    border-radius: 2rem;
    border: none;
    background-color: #ef4444;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.btn-accept-abonar {
    flex: 1;
    padding: 0.75rem;
    background-color: #84cc16;
    color: white;
}

/* Selector Items ONLY for Abono Payment Method Modal */
#medio-pago-selector-abono-modal .selector-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

#medio-pago-selector-abono-modal .selector-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-zinc-700);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

#medio-pago-selector-abono-modal .selector-item:hover {
    background-color: var(--bg-zinc-600);
}

#medio-pago-selector-abono-modal .selector-item-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    /* background-color: rgb(132 187 41 / 20%); */
    /* color: var(--lime-400); */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* background-color: var(--bg-zinc-800); */
}

#medio-pago-selector-abono-modal .selector-item-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}

#medio-pago-selector-abono-modal .selector-item-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-white);
    margin: 0;
}

/* ====================================
   ESTILOS PARA ITEMS DE ABONOS
   ==================================== */

.abono-item {
    background-color: var(--bg-zinc-800);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bg-zinc-700);
    transition: all 0.2s;
}

.abono-item:hover {
    border-color: var(--lime-400);
    box-shadow: 0 4px 12px rgba(132, 204, 22, 0.1);
}

.abono-item.cancelado {
    opacity: 0.7;
    background-color: var(--bg-zinc-900);
}

.abono-item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.abono-item-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.abono-item-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.abono-label {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    min-width: 120px;
    font-weight: 500;
}

.abono-monto {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lime-400);
}

.abono-valor {
    font-size: 0.9375rem;
    color: var(--text-white);
}

.abono-estado {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.abono-estado.estado-activo {
    background-color: rgba(132, 204, 22, 0.2);
    color: var(--lime-400);
}

.abono-estado.estado-anulado {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-red);
}

.abono-estado.estado-anulado-descontado {
    background-color: rgba(156, 163, 175, 0.2);
    color: var(--text-gray-400);
}

.abono-item-right {
    display: flex;
    align-items: flex-start;
}

/* Iconos de estado */
.abono-icono-estado {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-zinc-700);
}

.abono-icono-estado svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--lime-400);
}

.abono-icono-estado.warning svg {
    color: var(--error-red);
}

/* Menú de 3 puntos */
.abono-menu-container {
    position: relative;
}

.abono-menu-trigger {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-zinc-700);
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.abono-menu-trigger:hover {
    background-color: var(--bg-zinc-600);
    color: var(--text-white);
}

.abono-menu-trigger svg {
    width: 1.25rem;
    height: 1.25rem;
}

.abono-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background-color: var(--bg-zinc-800);
    border: 1px solid var(--bg-zinc-700);
    border-radius: 0.75rem;
    padding: 0.5rem;
    min-width: 140px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 100;
}

.abono-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.abono-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: none;
    color: var(--text-white);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.abono-menu-item:hover {
    background-color: var(--bg-zinc-700);
}

.abono-menu-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-red);
}

.abono-menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}


/* ====================================
   ESTILOS PARA ITEMS DE ABONOS
   ==================================== */

.abono-item {
    background-color: var(--bg-zinc-800);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bg-zinc-700);
    transition: all 0.2s;
}

.abono-item:hover {
    border-color: var(--lime-400);
    box-shadow: 0 4px 12px rgba(132, 204, 22, 0.1);
}

.abono-item.cancelado {
    opacity: 0.7;
    background-color: var(--bg-zinc-900);
}

.abono-item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.abono-item-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.abono-item-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.abono-label {
    font-size: 0.875rem;
    color: var(--text-gray-400);
    min-width: 120px;
    font-weight: 500;
}

.abono-monto {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lime-400);
}

.abono-valor {
    font-size: 0.9375rem;
    color: var(--text-white);
}

.abono-estado {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.abono-estado.estado-activo {
    background-color: rgba(132, 204, 22, 0.2);
    color: var(--lime-400);
}

.abono-estado.estado-anulado {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-red);
}

.abono-estado.estado-anulado-descontado {
    background-color: rgba(156, 163, 175, 0.2);
    color: var(--text-gray-400);
}

.abono-item-right {
    display: flex;
    align-items: flex-start;
}

/* Iconos de estado */
.abono-icono-estado {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-zinc-700);
}

.abono-icono-estado svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--lime-400);
}

.abono-icono-estado.warning svg {
    color: var(--error-red);
}

/* Menú de 3 puntos */
.abono-menu-container {
    position: relative;
}

.abono-menu-trigger {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-zinc-700);
    color: var(--text-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.abono-menu-trigger:hover {
    background-color: var(--bg-zinc-600);
    color: var(--text-white);
}

.abono-menu-trigger svg {
    width: 1.25rem;
    height: 1.25rem;
}

.abono-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background-color: var(--bg-zinc-800);
    border: 1px solid var(--bg-zinc-700);
    border-radius: 0.75rem;
    padding: 0.5rem;
    min-width: 140px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 100;
}

.abono-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.abono-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: none;
    color: var(--text-white);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.abono-menu-item:hover {
    background-color: var(--bg-zinc-700);
}

.abono-menu-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-red);
}

.abono-menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.abono-menu-item span {
    flex: 1;
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .abono-item-content {
        /* Mantener flex-direction: row para que los iconos queden a la derecha */
        flex-direction: row;
        align-items: flex-start;
    }

    .abono-item-left {
        flex: 1;
        min-width: 0;
        /* Permite que el texto se ajuste */
    }

    .abono-item-right {
        flex-shrink: 0;
        /* Evita que se comprima */
        margin-left: 0.75rem;
    }

    .abono-label {
        min-width: 90px;
        font-size: 0.8125rem;
    }

    .abono-valor {
        font-size: 0.875rem;
    }

    .abono-monto {
        font-size: 1.25rem;
    }

    /* Ajustar tamaño de iconos en móvil */
    .abono-menu-trigger,
    .abono-icono-estado {
        width: 2rem;
        height: 2rem;
    }

    .abono-menu-trigger svg,
    .abono-icono-estado svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Ajustar dropdown del menú en móvil */
    .abono-menu-dropdown {
        right: 0;
        left: auto;
        min-width: 130px;
    }

    .abono-menu-item {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }

    .abono-menu-item svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}


/* Boton de peligro ligero (Anulación) */
.btn-danger-light {
    padding: 1rem;
    font-weight: bold;
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-red);
    border: 1px solid var(--error-red);
}

/* =========================================
   Bottom Navigation Bar (Créditos Filter)
   ========================================= */

.creditos-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    /* Fully black or very dark matching the app background if distinguishable */
    /* If the app uses a specific dark grey, stick to it. Assuming var(--bg-zinc-900) or pure black for contrast */
    background-color: var(--bg-zinc-900);
    border-top: 1px solid var(--bg-zinc-800);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    height: 60px;
    /* Standard mobile nav height */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.nav-item {
    background: none;
    border: none;
    color: var(--text-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Remove default button styles */
    outline: none;
}

.nav-item svg {
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.nav-item.active {
    color: var(--lime-400);
}

.nav-item.active svg {
    transform: scale(1.1);
    stroke-width: 2.5;
    /* Optional: Add a subtle glow filter if desired */
    filter: drop-shadow(0 0 5px rgba(163, 230, 53, 0.4));
}

.nav-item:hover {
    color: var(--lime-200);
}

.fab-with-low-bar {
    bottom: 5rem;
}

/* Float on Desktop */
@media (min-width: 768px) {
    .creditos-bottom-nav {
        width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2rem;
        border-radius: 2rem;
        background-color: var(--bg-zinc-800);
        /* Slightly lighter on desktop to stand out from page bg */
        border: 1px solid var(--bg-zinc-700);
        height: auto;
        padding: 0.75rem 1.5rem;
    }

    .nav-item svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .fab-with-low-bar {
        bottom: 2rem;
    }
}

/*** temp end ***/