:root {
    --verde: #4a7c59;
    --verde-claro: #eaf3ec;
    --rojo: #b23b3b;
    --rojo-claro: #fbeaea;
    --azul: #2f5d8a;
    --azul-claro: #e9f1fa;
    --texto: #26302b;
    --borde: #dfe3e0;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f5f6f5;
    color: var(--texto);
    margin: 0;
    padding: 24px;
}

.contenedor { max-width: 1150px; margin: 0 auto; }

.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.cabecera h1 { margin: 0; color: var(--verde); font-size: 1.6rem; }
.subtitulo { margin: 4px 0 0; color: #6b756f; font-size: 0.9rem; }

.nav-principal {
    display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--borde);
}
.nav-principal a {
    padding: 9px 16px; text-decoration: none; color: #6b756f; font-size: 0.92rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-principal a.activo {
    color: var(--verde); font-weight: 600; border-bottom-color: var(--verde);
}
.nav-principal a:hover { color: var(--verde); }

.selector-periodo { display: flex; gap: 12px; }
.selector-periodo select {
    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--borde);
}

.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.tarjeta {
    border-radius: 10px;
    padding: 14px 18px;
    border: 1px solid var(--borde);
}
.tarjeta h3 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .03em; }
.tarjeta.ingresos { background: var(--verde-claro); }
.tarjeta.egresos { background: var(--rojo-claro); }
.tarjeta.saldo { background: var(--azul-claro); }
.fila-tarjeta { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.95rem; }

.graficas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.tarjeta-grafica {
    background: #fff; border: 1px solid var(--borde); border-radius: 10px;
    padding: 14px; height: 280px;
}
.tarjeta-grafica.ancha { grid-column: 1 / -1; }
.tarjeta-grafica h3 { margin: 0 0 8px; font-size: 0.9rem; color: #555; }
.tarjeta-grafica canvas { max-height: 220px; }

.tabla-seccion { margin-bottom: 26px; }
.tabla-header {
    color: #fff; font-weight: 600; padding: 8px 14px; border-radius: 6px 6px 0 0;
}
.tabla-header.ingresos { background: var(--verde); }
.tabla-header.egresos { background: #3f5b3f; }

.tabla-conceptos {
    width: 100%; border-collapse: collapse; background: #fff;
}
.tabla-conceptos th, .tabla-conceptos td {
    padding: 8px 12px; border-bottom: 1px solid var(--borde); font-size: 0.92rem;
}
.tabla-conceptos th { text-align: left; background: #fafafa; }
.tabla-conceptos td input[type=number] {
    width: 110px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
}
.tabla-conceptos td input[type=text],
.tabla-conceptos td select {
    width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
    font-size: 0.92rem; background: transparent; font-family: inherit;
}
.tabla-conceptos td input[type=text]:hover, .tabla-conceptos td input[type=text]:focus,
.tabla-conceptos td select:hover, .tabla-conceptos td select:focus {
    border-color: var(--borde); background: #fbfbfb;
}
.tabla-conceptos td input[type=number]:hover,
.tabla-conceptos td input[type=number]:focus {
    border-color: var(--borde); background: #fbfbfb;
}
.tabla-conceptos tr.sobre-presupuesto td input.real { color: var(--rojo); font-weight: 600; }
.tabla-conceptos .btn-eliminar {
    background: none; border: none; color: #b23b3b; cursor: pointer; font-size: 1rem;
}
.tabla-conceptos tfoot td { font-weight: 700; background: #f3f4f2; }

.btn-agregar {
    margin-top: 8px; padding: 7px 14px; border: 1px dashed var(--verde);
    background: #fff; color: var(--verde); border-radius: 6px; cursor: pointer; font-size: 0.88rem;
}
.btn-agregar:hover { background: var(--verde-claro); }

.modal-fondo {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35);
    align-items: center; justify-content: center; z-index: 50;
}
.modal-fondo.activo { display: flex; }
.modal {
    background: #fff; padding: 22px; border-radius: 10px; width: 360px; max-width: 90vw;
}
.modal h3 { margin-top: 0; }
.modal label { display: block; margin-bottom: 12px; font-size: 0.9rem; }
.modal input[type=text], .modal input[type=number], .modal select {
    width: 100%; padding: 7px 9px; margin-top: 4px; border: 1px solid var(--borde); border-radius: 6px;
}
.modal .checkbox { display: flex; align-items: center; gap: 6px; }
.modal .checkbox input { width: auto; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-primario { background: var(--verde); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.btn-secundario { background: #eee; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }

@media (max-width: 720px) {
    .graficas { grid-template-columns: 1fr; }
}