/* ============================================================
   México en Movimiento — Hoja de estilos principal
   Cambia los valores de :root para ajustar el aspecto global.
   ============================================================ */

:root {
    /* Colores de marca */
    --color-brand:       #0e7a54;   /* verde principal (acciones) */
    --color-brand-dark:  #0a5c3f;   /* verde para hover */
    --color-rojo:        #b31e2b;   /* rojo bandera (acento) */
    --color-rojo-dark:   #8f1822;   /* rojo para hover */
    --color-accent:      #a16207;   /* dorado (acciones secundarias) */
    --color-accent-dark: #854d0e;
    --color-ink:         #0f172a;   /* texto oscuro / barra / pie */
    --color-muted:       #64748b;   /* texto secundario */
    --color-bg:          #f5f6f3;   /* fondo general (blanco cálido) */
    --color-surface:     #ffffff;   /* tarjetas */
    --color-border:      #e6e8e3;

    --radio:     14px;              /* redondeo de tarjetas */
    --radio-btn: 10px;              /* redondeo de botones */
    --sombra:    0 4px 16px rgba(15, 23, 42, .06);
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--color-bg);
    color: #1f2937;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-dark); text-decoration: underline; }

/* ---------- Barra de navegación ---------- */
.navbar.bg-dark {
    background-color: var(--color-ink) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .12);
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.navbar-brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* El punto verde se quitó: ahora el logo es la marca. */
.navbar .nav-link { font-weight: 500; }

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radio);
    background: var(--color-surface);
    box-shadow: var(--sombra);
}
.card.shadow-sm { box-shadow: var(--sombra) !important; }

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--radio-btn);
    font-weight: 600;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
.btn-lg { padding: .7rem 1.4rem; }

/* Primario = verde de marca */
.btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand-dark);
    --bs-btn-hover-border-color: var(--color-brand-dark);
    --bs-btn-active-bg: var(--color-brand-dark);
    --bs-btn-active-border-color: var(--color-brand-dark);
    --bs-btn-disabled-bg: var(--color-brand);
    --bs-btn-disabled-border-color: var(--color-brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand-dark);
    --bs-btn-active-border-color: var(--color-brand-dark);
}

/* Éxito = dorado (acciones secundarias) */
.btn-success {
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent-dark);
    --bs-btn-hover-border-color: var(--color-accent-dark);
    --bs-btn-active-bg: var(--color-accent-dark);
    --bs-btn-active-border-color: var(--color-accent-dark);
}
.btn-outline-success {
    --bs-btn-color: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
}

/* ---------- Barra de progreso ---------- */
.progress {
    background-color: #e9ece7;
    border-radius: 999px;
}
.progress-bar {
    background-color: var(--color-brand) !important;
    border-radius: 999px;
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--color-border);
    padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 .2rem rgba(14, 122, 84, .18);
}
.form-check-input:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}
.form-check-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 .2rem rgba(14, 122, 84, .18);
}

/* ---------- Texto auxiliar y pie ---------- */
.text-muted { color: var(--color-muted) !important; }

footer.bg-dark { background-color: var(--color-ink) !important; }
footer.bg-dark a { color: #cbd5e1 !important; }
footer.bg-dark a:hover { color: #fff !important; }

/* ---------- Tablas ---------- */
.table > :not(caption) > * > * { padding: .75rem .9rem; }


/* ---------- Encabezado de sección (estilo bandera) ---------- */
.titulo-seccion {
    display: inline-block;
    background-color: var(--color-rojo);
    color: #fff;
    font-weight: 700;
    padding: .5rem 1.25rem;
    border-radius: 10px;
    letter-spacing: -0.01em;
}

/* Detalle decorativo con los 3 colores de la bandera */
.franja-bandera {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--color-brand) 0 33.33%,
        #ffffff 33.33% 66.66%,
        var(--color-rojo) 66.66% 100%);
    border: 1px solid var(--color-border);
}