/*
 * App shared utilities - low-risk layer loaded after vendor CSS.
 * Prefixes use app- to avoid overriding existing module styles.
 */
:root {
    --app-primary: #1e5631;
    --app-primary-dark: #143d22;
    --app-accent: #a4de02;
    --app-success: #198754;
    --app-warning: #fd7e14;
    --app-info: #0d6efd;
    --app-danger: #dc3545;
    --app-surface: #ffffff;
    --app-muted-surface: #f4f7f6;
    --app-text: #212529;
    --app-muted: #6c757d;
    --app-border: #dee2e6;
    --app-radius: 1rem;
    --app-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.06);
    --app-shadow-md: 0 12px 28px rgba(30, 86, 49, 0.14);
    --app-focus-ring: 0 0 0 0.25rem rgba(30, 86, 49, 0.25);
}

.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.app-card-interactive,
.app-action-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.app-action-button {
    cursor: pointer;
    outline: none;
}

.app-action-button:hover {
    box-shadow: var(--app-shadow-md);
}

.app-action-button:focus-visible {
    box-shadow: var(--app-shadow-md), var(--app-focus-ring);
    border-color: var(--app-primary);
}

.app-button-soft {
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 700;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.app-button-soft:hover,
.app-button-soft:focus-visible {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.app-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-table-responsive table {
    min-width: 620px;
}

.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    background: #e8f5e9;
    color: var(--app-primary);
    font-weight: 700;
}

@media (max-width: 576px) {
    .app-stack-sm {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .app-card {
        border-radius: 0.85rem;
    }
}

/* Unified module visual system */
body {
    background:
        radial-gradient(circle at top left, rgba(164, 222, 2, .12), transparent 26rem),
        linear-gradient(180deg, #f7fbf8 0%, #eef5f1 100%);
    color: var(--app-text);
}

/* All module navbars should feel like the main menu */
.navbar,
.navbar-cliente,
.navbar-deporte {
    background: linear-gradient(90deg, var(--app-primary-dark) 0%, var(--app-primary) 55%, #216b3b 100%) !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 26px rgba(20, 61, 34, .16) !important;
}

.navbar .navbar-brand,
.navbar .navbar-text,
.navbar-cliente .navbar-brand,
.navbar-cliente .navbar-text,
.navbar-deporte .navbar-brand,
.navbar-deporte .navbar-text {
    color: #fff !important;
}

/* Hero/header blocks used by modules */
.balance-header,
.galeria-header,
.header-tesoreria,
.archivo-header,
.container-fluid[class*="header"] {
    background: linear-gradient(135deg, var(--app-primary) 0%, #216b3b 60%, var(--app-accent) 160%) !important;
    color: #fff !important;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 18px 38px rgba(30, 86, 49, .16);
}

.balance-header a,
.galeria-header a,
.header-tesoreria a,
.archivo-header a,
.container-fluid[class*="header"] a {
    color: #fff !important;
}

/* Cards and content blocks */
.card,
.card-custom,
.card-stat,
.card-gasto,
.card-kpi,
.stat-card,
.card-historial,
.chart-container,
.album-card {
    border-radius: 20px !important;
    border: 1px solid rgba(30, 86, 49, .08) !important;
    box-shadow: 0 10px 26px rgba(20, 61, 34, .07) !important;
}

.card:hover,
.card-custom:hover,
.card-stat:hover,
.card-gasto:hover,
.card-kpi:hover,
.stat-card:hover,
.album-card:hover {
    box-shadow: 0 16px 34px rgba(20, 61, 34, .12) !important;
}

.btn-success,
.bg-success {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-success {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-success:hover {
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

.table thead,
table.dataTable thead {
    background: #eaf5ed;
    color: var(--app-primary-dark);
}

.table,
table.dataTable {
    border-radius: 14px;
    overflow: hidden;
}

/* Hide technical-looking index.php in visible links by styling; actual redirects are handled by .htaccess */
a[href$="index.php"]::after {
    content: '';
}

@media (max-width: 768px) {
    .navbar .container,
    .navbar-cliente .container,
    .navbar-deporte .container {
        gap: .75rem;
    }

    .card,
    .card-custom,
    .card-stat,
    .card-gasto,
    .card-kpi,
    .stat-card,
    .card-historial,
    .chart-container,
    .album-card {
        border-radius: 16px !important;
    }
}

/* Unified module navigation/back buttons */
.navbar .navbar-brand[href="/Menu/"],
.navbar .navbar-brand[href="/MenuAdmin/"],
.navbar a[href="/Menu/"],
.navbar a[href="/MenuAdmin/"],
.balance-header a[href="/Menu/"],
.galeria-header a[href="/Menu/"],
.header-tesoreria a[href="/Menu/"],
.archivo-header a[href="/Menu/"],
.container-fluid[class*="header"] a[href="/Menu/"],
.container-fluid[class*="header"] a[href="/MenuAdmin/"] {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .48rem .9rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10) !important;
    backdrop-filter: blur(6px);
}

.navbar .navbar-brand[href="/Menu/"]:hover,
.navbar .navbar-brand[href="/MenuAdmin/"]:hover,
.navbar a[href="/Menu/"]:hover,
.navbar a[href="/MenuAdmin/"]:hover,
.balance-header a[href="/Menu/"]:hover,
.galeria-header a[href="/Menu/"]:hover,
.header-tesoreria a[href="/Menu/"]:hover,
.archivo-header a[href="/Menu/"]:hover,
.container-fluid[class*="header"] a[href="/Menu/"]:hover,
.container-fluid[class*="header"] a[href="/MenuAdmin/"]:hover {
    background: rgba(255, 255, 255, .26) !important;
    border-color: rgba(255, 255, 255, .55) !important;
    transform: translateY(-1px);
}

/* Fix old light/outline buttons placed on green module headers */
.balance-header .btn-light,
.balance-header .btn-outline-light,
.galeria-header .btn-light,
.galeria-header .btn-outline-light,
.header-tesoreria .btn-light,
.header-tesoreria .btn-outline-light,
.archivo-header .btn-light,
.archivo-header .btn-outline-light,
.container-fluid[class*="header"] .btn-light,
.container-fluid[class*="header"] .btn-outline-light {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: .48rem .9rem !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10) !important;
}

.balance-header .btn-light:hover,
.balance-header .btn-outline-light:hover,
.galeria-header .btn-light:hover,
.galeria-header .btn-outline-light:hover,
.header-tesoreria .btn-light:hover,
.header-tesoreria .btn-outline-light:hover,
.archivo-header .btn-light:hover,
.archivo-header .btn-outline-light:hover,
.container-fluid[class*="header"] .btn-light:hover,
.container-fluid[class*="header"] .btn-outline-light:hover {
    background: rgba(255, 255, 255, .26) !important;
    border-color: rgba(255, 255, 255, .55) !important;
}

.navbar .container,
.navbar-cliente .container,
.navbar-deporte .container {
    min-height: 58px;
}

.navbar .navbar-text,
.navbar-cliente .navbar-text,
.navbar-deporte .navbar-text {
    letter-spacing: .01em;
}

@media (max-width: 576px) {
    .navbar .navbar-brand[href="/Menu/"],
    .navbar a[href="/Menu/"],
    .balance-header a[href="/Menu/"],
    .galeria-header a[href="/Menu/"],
    .header-tesoreria a[href="/Menu/"],
    .archivo-header a[href="/Menu/"] {
        font-size: .86rem;
        padding: .42rem .72rem !important;
    }

    .balance-header .position-absolute,
    .galeria-header .position-absolute,
    .header-tesoreria .position-absolute,
    .archivo-header .position-absolute {
        position: static !important;
        margin-bottom: 1rem;
    }
}