/* Pelotazo — portal público (variables usadas en vistas public/) */
:root {
    --pelotazo-celeste: #74acdf;
    --pelotazo-celeste-light: #9bc4eb;
    --pelotazo-celeste-dark: #5a8fc4;
    --pelotazo-light: #f8f9fa;
    --pelotazo-white: #ffffff;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background-color: var(--pelotazo-light);
    color: #212529;
}

.navbar-dark {
    background: linear-gradient(135deg, var(--pelotazo-celeste-dark) 0%, var(--pelotazo-celeste) 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.site-brand:hover {
    opacity: 0.95;
}

.site-logo {
    height: 40px;
    width: auto;
    display: block;
}

.site-brand-text {
    display: flex;
    align-items: baseline;
    font-weight: 800;
    line-height: 1;
}

.site-brand-name {
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
}

.site-brand-domain {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: 1px;
}

.navbar-dark .nav-link {
    font-weight: 600;
    font-size: 0.95rem;
}

.navbar-dark .nav-link:hover {
    color: #fff !important;
}

footer {
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    background: var(--pelotazo-celeste-dark);
    color: var(--pelotazo-white);
    font-size: 0.9rem;
}

.bg-primary {
    background-color: var(--pelotazo-celeste) !important;
}

.text-primary {
    color: var(--pelotazo-celeste) !important;
}

.btn-primary {
    background-color: var(--pelotazo-celeste);
    border-color: var(--pelotazo-celeste-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pelotazo-celeste-dark);
    border-color: var(--pelotazo-celeste-dark);
}

.card-header.bg-primary {
    background-color: var(--pelotazo-celeste) !important;
}

.match-row:hover {
    background-color: rgba(116, 172, 223, 0.08) !important;
}

.breadcrumb a {
    color: var(--pelotazo-celeste);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--pelotazo-celeste-dark);
    text-decoration: underline;
}

.list-group-item-action:hover {
    background-color: rgba(116, 172, 223, 0.08);
}

.accordion-button:not(.collapsed) {
    background-color: rgba(116, 172, 223, 0.12);
    color: var(--pelotazo-celeste-dark);
}

.accordion-button:focus {
    border-color: var(--pelotazo-celeste-light);
    box-shadow: 0 0 0 0.2rem rgba(116, 172, 223, 0.25);
}