@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

:root {
    --verde: #1B4332;
    --verde-claro: #2D6A4F;
    --verde-oscuro: #0F2A1E;
    --acento: #4ADE80;
    --vino: #7A3B3B;
    --beige: #F5F1E8;
    --beige-oscuro: #EDE6D8;
    --blanco: #FFFFFF;
    --texto: #2B2823;
    --texto-muted: #7A7364;
    --borde: rgba(27, 67, 50, 0.12);
    --borde-suave: rgba(27, 67, 50, 0.07);
    --rojo: #B3261E;
    --rojo-fondo: #FBEAE9;
    --amarillo-fondo: #FDF6DC;
    --amarillo-borde: #EBD98A;
    --sombra-sm: 0 1px 2px rgba(27, 67, 50, 0.05);
    --sombra: 0 2px 8px rgba(27, 67, 50, 0.06);
    --sombra-md: 0 6px 20px rgba(27, 67, 50, 0.10);
    --radio: 10px;
    --radio-chico: 7px;
}

* { box-sizing: border-box; }

::selection { background: var(--acento); color: var(--verde-oscuro); }

body {
    margin: 0;
    background:
        radial-gradient(ellipse 900px 400px at top left, rgba(27, 67, 50, 0.05), transparent 60%),
        var(--beige);
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 5rem;
}

a { color: var(--verde); }

/* --- Cabecera en franja propia, separada del resto --- */

.header-band {
    background: var(--verde-oscuro);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.header-app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.15rem 0 0.95rem;
}

.sesion-info {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.85rem;
}

.sesion-info .sesion-email { color: rgba(255, 255, 255, 0.68); }

.sesion-info a.btn-salir {
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radio-chico);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sesion-info a.btn-salir:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); }

nav.tabs {
    display: flex;
    gap: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 0.1rem;
    flex-wrap: wrap;
}

.wordmark {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    color: var(--texto);
    margin: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.header-band .wordmark { color: var(--blanco); }

.wordmark::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12);
    flex-shrink: 0;
}

.header-band .wordmark::before {
    background: var(--acento);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

nav.tabs a {
    display: inline-block;
    padding: 0.15rem 0 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

nav.tabs a:hover { color: var(--blanco); }

nav.tabs a.activa {
    color: var(--blanco);
    font-weight: 600;
    border-bottom-color: var(--acento);
}

h1.titulo-pagina {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: 1.7rem;
    margin: 0 0 1.5rem;
    letter-spacing: -0.01em;
}

/* --- Overline tipo "● EN VIVO" --- */

.overline {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--verde);
    margin-bottom: 0.5rem;
}

.overline::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acento);
    margin-right: 0.5rem;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

/* --- Cards de métrica --- */

.grid-metricas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.card-metrica {
    background: var(--blanco);
    border: 1px solid var(--borde-suave);
    border-top: 3px solid var(--verde);
    border-radius: var(--radio);
    padding: 1.15rem 1.35rem;
    box-shadow: var(--sombra);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-metrica:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}

.card-metrica .label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-muted);
    margin-bottom: 0.4rem;
}

.card-metrica .valor {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--verde-oscuro);
}

.card-metrica .valor.chico { font-size: 1.4rem; }

/* --- Barra de progreso segmentada --- */

.barra-progreso {
    background: var(--beige-oscuro);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 0.5rem 0 0.4rem;
}

.barra-progreso .relleno {
    background: linear-gradient(90deg, var(--verde-claro), var(--verde));
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.barra-progreso-texto {
    font-size: 0.82rem;
    color: var(--texto-muted);
    margin-bottom: 1.5rem;
    display: block;
}

/* --- Toggle segmentado (MEP / Oficial) --- */

.segmented {
    display: inline-flex;
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--blanco);
    box-shadow: var(--sombra-sm);
}

.segmented a {
    padding: 0.45rem 1.15rem;
    text-decoration: none;
    color: var(--texto-muted);
    font-size: 0.87rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.segmented a:hover:not(.activo) { background: var(--beige); }

.segmented a.activo {
    background: var(--verde);
    color: var(--blanco);
    font-weight: 600;
}

/* --- Selector de período (gráfico de evolución) --- */

.periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.periodos button {
    margin-top: 0;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--blanco);
    color: var(--texto-muted);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.periodos button:hover {
    background: var(--beige);
    color: var(--verde);
    box-shadow: none;
    border-color: var(--borde);
}

.periodos button.activo {
    background: var(--verde);
    color: var(--blanco);
    border-color: var(--verde);
    font-weight: 600;
}

.periodos button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--blanco);
    color: var(--texto-muted);
}

.periodos button:disabled:hover {
    background: var(--blanco);
    box-shadow: none;
    border-color: var(--borde);
}

/* --- Formularios --- */

.card-form {
    background: var(--blanco);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: 1.85rem;
    box-shadow: var(--sombra);
}

.card-form.angosta {
    max-width: 420px;
}

label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 0.4rem;
    margin-top: 1.05rem;
}

label:first-child { margin-top: 0; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--beige);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--texto);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--verde);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.10);
}

.fila-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ayuda {
    font-size: 0.78rem;
    color: var(--texto-muted);
    margin-top: 0.35rem;
}

/* --- Botones --- */

button, .btn {
    display: inline-block;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--verde);
    background: var(--verde);
    color: var(--blanco);
    cursor: pointer;
    text-decoration: none;
    margin-top: 1.35rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

button:hover, .btn:hover {
    background: var(--verde-claro);
    border-color: var(--verde-claro);
    box-shadow: var(--sombra-md);
}

button:active, .btn:active { transform: translateY(1px); }

.btn-secundario {
    background: transparent;
    color: var(--verde);
}

.btn-secundario:hover { background: var(--beige); box-shadow: none; }

.btn-chico {
    padding: 0.38rem 0.85rem;
    font-size: 0.8rem;
    margin-top: 0;
}

/* --- Tabs de login/registro --- */

.auth-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.75rem;
}

.auth-tabs a {
    padding-bottom: 0.65rem;
    text-decoration: none;
    color: var(--texto-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease;
}

.auth-tabs a:hover { color: var(--verde); }

.auth-tabs a.activa {
    color: var(--verde);
    font-weight: 600;
    border-bottom-color: var(--verde);
}

.pantalla-login {
    max-width: 420px;
    margin: 3.5rem auto;
    padding: 0 1.25rem;
}

.pantalla-login .wordmark { font-size: 1.7rem; margin-bottom: 0.35rem; }
.pantalla-login .subtitulo { color: var(--texto-muted); font-size: 0.9rem; margin-bottom: 2rem; line-height: 1.5; }

.campo-password { position: relative; }

.toggle-password {
    position: absolute;
    right: 0.5rem;
    top: 0.42rem;
    background: none;
    border: none;
    color: var(--texto-muted);
    padding: 0.3rem;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 6px;
}

.toggle-password:hover { background: var(--beige); color: var(--verde); box-shadow: none; }
.toggle-password svg { width: 19px; height: 19px; display: block; }

input[type="password"].con-toggle,
input[type="text"].con-toggle { padding-right: 2.6rem; }

/* --- Mensajes --- */

.aviso, .error, .exito {
    border-radius: var(--radio-chico);
    padding: 0.85rem 1.05rem;
    font-size: 0.85rem;
    margin-bottom: 1.35rem;
    line-height: 1.5;
    border: 1px solid;
}

.aviso { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); }
.error { background: var(--rojo-fondo); border-color: var(--rojo); color: var(--rojo); }
.exito { background: #E8F5E9; border-color: var(--verde-claro); color: var(--verde-oscuro); }

.caption {
    font-size: 0.83rem;
    color: var(--texto-muted);
    margin-bottom: 1.25rem;
    max-width: 70ch;
    line-height: 1.55;
}

/* --- Tablas --- */

.tabla-wrap {
    background: var(--blanco);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    max-height: 480px;
    overflow-y: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--beige);
    text-align: left;
    padding: 0.65rem 0.95rem;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-muted);
    border-bottom: 1px solid var(--borde);
}

tbody td {
    padding: 0.6rem 0.95rem;
    border-bottom: 1px solid var(--borde-suave);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--beige); }
tbody tr.pagada { background: #F5FAF6; }
tbody tr.pagada:hover td { background: #ECF6EE; }

.estado-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.estado-pill.pagada { background: #D9F2E3; color: var(--verde-oscuro); }
.estado-pill.pendiente { background: var(--beige-oscuro); color: var(--texto-muted); }

/* --- Secciones --- */

.seccion { margin-top: 2.75rem; }

.seccion h2 {
    font-family: 'Source Serif 4', serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    letter-spacing: -0.005em;
}

hr.divisor {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 2.25rem 0;
}

.grafico-wrap {
    background: var(--blanco);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: 1.4rem 1.5rem 1.1rem;
    box-shadow: var(--sombra);
    margin-bottom: 1.75rem;
}

/* --- Lista de alertas --- */

.item-alerta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--blanco);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: 0.95rem 1.15rem;
    margin-bottom: 0.65rem;
    box-shadow: var(--sombra-sm);
}

.item-alerta .tipo { font-weight: 600; font-size: 0.9rem; }
.item-alerta .detalle { font-size: 0.8rem; color: var(--texto-muted); margin-top: 0.15rem; }

@media (max-width: 640px) {
    .fila-2 { grid-template-columns: 1fr; }
    .header-app { flex-direction: column; }
    .sesion-info { text-align: left; padding-top: 0; }
    .contenedor { padding: 1.5rem 1rem 3.5rem; }
}