/* ---------- Paleta estilo Notion (oscuro, minimalista, por capas) ---------- */
:root,
[data-bs-theme="dark"] {
    /* Capas de oscuro, de más oscura a más clara, para dar profundidad en vez de un bloque plano */
    --app-bg: #121212;           /* fondo de página */
    --app-bg-surface: #181818;   /* barras superior/inferior */
    --app-bg-card: #1e1e1e;      /* tarjetas, filas de listas */
    --app-bg-elevated: #262626;  /* modales, inputs, selects */
    --app-bg-hover: #303030;     /* hover / chips */
    --app-border: rgba(255, 255, 255, 0.07);
    --app-border-strong: rgba(255, 255, 255, 0.15);
    --app-text: rgba(255, 255, 255, 0.85);
    --app-text-muted: rgba(255, 255, 255, 0.48);
    --app-accent: #529cca;
    --app-accent-bg: rgba(82, 156, 202, 0.15);
    --app-success: #6fae7c;
    --app-success-bg: rgba(111, 174, 124, 0.15);
    --app-danger: #d97878;
    --app-danger-bg: rgba(217, 120, 120, 0.15);
    --app-warning: #d9b26a;

    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-secondary-bg: var(--app-bg-surface);
    --bs-tertiary-bg: var(--app-bg-hover);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--app-text-muted);
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 82, 156, 202;
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: #7bb6dc;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--app-bg);
    color: var(--app-text);
    padding-bottom: env(safe-area-inset-bottom);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 0.94rem;
}

a { text-decoration: none; }

/* ---------- Barra superior ---------- */
.app-topbar {
    background-color: var(--app-bg-surface);
    border-bottom: 1px solid var(--app-border);
    padding: 0.7rem 0;
}

.app-topbar-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--app-text);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    color: var(--app-text-muted);
    background: transparent;
    border: none;
    font-size: 1.05rem;
}

.icon-btn:hover, .icon-btn:active {
    background-color: var(--app-bg-hover);
    color: var(--app-text);
}

/* ---------- Barra inferior ---------- */
.app-bottomnav {
    background-color: var(--app-bg-surface);
    border-top: 1px solid var(--app-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--app-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    padding: 0.55rem 0.75rem;
    flex: 1;
    border-radius: 0.5rem;
    transition: color .15s ease;
}

.nav-bottom-link i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.nav-bottom-link.active {
    color: var(--app-accent);
    font-weight: 600;
}

/* ---------- Tarjetas ---------- */
.card {
    background-color: var(--app-bg-card);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    box-shadow: none;
}

.summary-card .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--app-text);
}

.summary-card .text-muted {
    color: var(--app-text-muted) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Colores semánticos suavizados en vez de los saturados de Bootstrap */
.text-primary { color: var(--app-accent) !important; }
.text-success { color: var(--app-success) !important; }
.text-danger  { color: var(--app-danger) !important; }
.text-info    { color: var(--app-accent) !important; }
.text-muted   { color: var(--app-text-muted) !important; }

.btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #12242f;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:active {
    background-color: #6cb0dc;
    border-color: #6cb0dc;
}

.btn-outline-primary {
    color: var(--app-accent);
    border-color: var(--app-border-strong);
}
.btn-outline-primary:hover {
    background-color: var(--app-accent-bg);
    color: var(--app-accent);
    border-color: var(--app-accent);
}

.btn-outline-danger {
    color: var(--app-danger);
    border-color: var(--app-border-strong);
}
.btn-outline-danger:hover {
    background-color: var(--app-danger-bg);
    color: var(--app-danger);
    border-color: var(--app-danger);
}

.btn-link { color: var(--app-accent); }

/* ---------- Listas ---------- */
.list-group-item {
    background-color: var(--app-bg-card);
    border-color: var(--app-border);
    color: var(--app-text);
}

.list-group-item:first-child { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.list-group-item:last-child { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }

.list-group-item:hover { background-color: var(--app-bg-hover); }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    background-color: var(--app-bg-elevated);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--app-bg-elevated);
    border-color: var(--app-accent);
    color: var(--app-text);
    box-shadow: 0 0 0 0.2rem var(--app-accent-bg);
}

.form-control::placeholder { color: var(--app-text-muted); opacity: 1; }

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-text-muted);
    margin-bottom: 0.35rem;
}

.btn-check:checked + .btn-outline-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #12242f;
}

/* Botones de forma de pago (Efectivo/Depósito), coordinados con los tags de la lista */
.btn-tag-green, .btn-tag-blue {
    border: 1px solid var(--app-border);
    background-color: var(--app-bg-hover);
    color: var(--app-text-muted);
}

.btn-check:checked + .btn-tag-green {
    background-color: rgba(111, 174, 124, 0.18);
    border-color: #6fae7c;
    color: #90c79b;
}

.btn-check:checked + .btn-tag-blue {
    background-color: rgba(82, 156, 202, 0.18);
    border-color: #529cca;
    color: #82bade;
}

/* ---------- Modal ---------- */
.modal-content {
    background-color: var(--app-bg-elevated);
    border: 1px solid var(--app-border);
}

.modal-header, .modal-footer {
    border-color: var(--app-border);
}

/* ---------- Chips (reemplazo del datalist, mejor en móvil) ---------- */
.chip-row {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.5rem 0.05rem 0.15rem;
    scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--app-bg-hover);
    border: 1px solid transparent;
    color: var(--app-text-muted);
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}

.chip:active {
    filter: brightness(1.2);
}

.chip-selected {
    border-color: currentColor;
}

/* ---------- Tags (estilo etiquetas de Notion) ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.tag-red    { background-color: rgba(224, 89, 89, 0.18);   color: #e5938d; }
.tag-pink   { background-color: rgba(219, 96, 149, 0.18);  color: #e49cba; }
.tag-orange { background-color: rgba(217, 138, 79, 0.18);  color: #e2a877; }
.tag-yellow { background-color: rgba(217, 178, 106, 0.18); color: #e2c185; }
.tag-green  { background-color: rgba(111, 174, 124, 0.18); color: #90c79b; }
.tag-teal   { background-color: rgba(92, 184, 171, 0.18);  color: #84cbc0; }
.tag-blue   { background-color: rgba(82, 156, 202, 0.18);  color: #82bade; }
.tag-purple { background-color: rgba(163, 139, 212, 0.18); color: #baa6e0; }
.tag-brown  { background-color: rgba(165, 129, 102, 0.18); color: #c3a289; }
.tag-gray   { background-color: rgba(155, 155, 155, 0.18); color: #b8b8b8; }

/* ---------- Estadísticas: secciones minimalistas (sin caja pesada) ---------- */
.stat-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--app-border);
}

.stat-section:last-child { border-bottom: none; }

.stat-section h6 {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.stat-section canvas { background: transparent; }

.stat-empty {
    color: var(--app-text-muted);
    text-align: center;
    padding: 2.5rem 0;
    font-size: 0.85rem;
}

/* ---------- Utilidades ---------- */
.fst-italic { color: var(--app-text-muted); }

hr { border-color: var(--app-border); }

@media (max-width: 480px) {
    .summary-card .value { font-size: 1.15rem; }
    body { font-size: 0.9rem; }
}