* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background: #f5f5f5
}

.login-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1B3A6B 0%, #2E5FA3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px
}

.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 44px;
    width: 420px;
    max-width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3)
}

.login-logo {
    font-size: 30px;
    font-weight: 700;
    color: #1B3A6B;
    text-align: center;
    margin-bottom: 6px
}

.login-subtitle {
    text-align: center;
    color: #666;
    font-size: 13px;
    margin-bottom: 32px
}

.lf-group {
    margin-bottom: 18px
}

.lf-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px
}

.lf-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit
}

.lf-group input:focus {
    outline: none;
    border-color: #1B3A6B;
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.15)
}

.login-btn {
    width: 100%;
    background: #1B3A6B;
    color: #fff;
    padding: 13px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px
}

.login-btn:hover {
    background: #2E5FA3
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed
}

.login-error {
    background: #FCEBEB;
    color: #A32D2D;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 14px;
    display: none
}

.login-help {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 22px;
    line-height: 1.6
}

.app {
    display: flex;
    height: 100vh;
    min-height: 680px
}

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    padding: 12px 0
}

.logo {
    padding: 14px 18px 16px;
    font-weight: 700;
    font-size: 17px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 6px;
    color: #1B3A6B
}

.logo span {
    color: #666;
    font-size: 11px;
    display: block;
    font-weight: 400;
    margin-top: 2px
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.15s
}

.nav-item:hover {
    background: #f5f5f5;
    color: #1a1a1a
}

.nav-item.active {
    background: #E6F1FB;
    color: #1B3A6B;
    font-weight: 500;
    border-right: 3px solid #1B3A6B
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7
}

.nav-section {
    padding: 14px 18px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.topbar {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0
}

.page-title {
    font-size: 17px;
    font-weight: 600
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit
}

.btn:hover {
    background: #f5f5f5
}

.btn-primary {
    background: #1B3A6B;
    color: #fff;
    border-color: #1B3A6B
}

.btn-primary:hover {
    background: #2E5FA3
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px
}

.btn-danger {
    color: #A32D2D;
    border-color: #F09595
}

.btn-danger:hover {
    background: #FCEBEB
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 22px
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500
}

.badge-blue {
    background: #E6F1FB;
    color: #185FA5
}

.badge-green {
    background: #EAF3DE;
    color: #3B6D11
}

.badge-amber {
    background: #FAEEDA;
    color: #854F0B
}

.badge-red {
    background: #FCEBEB;
    color: #A32D2D
}

.badge-gray {
    background: #f0f0f0;
    color: #666
}

.badge-purple {
    background: #EEEDFE;
    color: #534AB7
}

.card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px
}

.metric {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px
}

.metric-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px
}

.metric-value {
    font-size: 24px;
    font-weight: 600;
    color: #1B3A6B
}

.metric-sub {
    font-size: 11px;
    color: #999;
    margin-top: 2px
}

.chart-summary {
    font-size: 11.5px;
    color: #666;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    line-height: 1.5
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.dashboard-filters {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

/* Solo la barra de filtros de primer nivel de cada página (hija directa de #content) queda fija al hacer scroll,
   para no encimar dos barras si una vista tiene un segundo filtro anidado más abajo (ej. Auditoría). Arriba del todo
   ocupa su espacio normal, como cualquier tarjeta; solo se "pega" arriba una vez que el scroll la alcanza, sin tapar
   nada de lo que queda por encima (nada scrollea por encima de ella, solo por debajo, que es el comportamiento normal). */
#content > .dashboard-filters {
    position: sticky;
    top: 0;
    z-index: 15;
    padding-right: 44px
}

.filtros-toggle {
    position: absolute;
    top: 12px;
    right: 14px;
    cursor: pointer;
    font-size: 13px;
    color: #999;
    user-select: none;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 1
}

.filtros-toggle:hover {
    background: #f0f0f0;
    color: #333
}

.dashboard-filters.filtros-colapsado {
    min-height: 0;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden
}

.dashboard-filters.filtros-colapsado > *:not(.filtros-toggle) {
    display: none
}

.filtro-grupo-label {
    font-size: 10px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px
}

.filtro-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.dashboard-filters select {
    padding: 6px 10px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    min-width: 140px;
    background: #fff
}

.chart-container {
    position: relative;
    height: 280px;
    padding: 8px 0
}

.chart-container-tall {
    position: relative;
    height: 380px;
    padding: 8px 0
}

.lectura {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border-left: 4px solid #F9A825;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 16px
}

.lectura h3 {
    font-size: 14px;
    font-weight: 700;
    color: #5D4037;
    margin-bottom: 10px
}

.lectura p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #3E2723
}

.lectura ul {
    margin-top: 8px;
    padding-left: 18px
}

.meta-card {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-left: 4px solid #2E7D32;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 16px
}

.meta-card.riesgo {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
    border-left-color: #F9A825
}

.meta-card.critico {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    border-left-color: #C62828
}

.meta-card h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px
}

.meta-progress {
    height: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0
}

.meta-progress-fill {
    height: 100%;
    background: #2E7D32;
    transition: width 0.5s
}

.meta-card.riesgo .meta-progress-fill {
    background: #F9A825
}

.meta-card.critico .meta-progress-fill {
    background: #C62828
}

.pipeline-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px
}

.pipeline-col {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    min-height: 200px
}

.pipeline-col-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase
}

.pipeline-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer
}

.pipeline-card:hover {
    border-color: #1B3A6B
}

.pipeline-card-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px
}

.pipeline-card-val {
    font-size: 11px;
    color: #666
}

.table-wrap {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
    text-transform: uppercase
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0
}

tr:hover td {
    background: #fafafa
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    background: #E6F1FB;
    color: #185FA5
}

.form-group {
    margin-bottom: 14px
}

.form-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
    display: block
}

input,
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    font-family: inherit
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #1B3A6B
}

textarea {
    resize: vertical;
    min-height: 70px
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: flex-end;
    z-index: 100
}

.modal {
    background: #fff;
    width: 480px;
    height: 100vh;
    overflow-y: auto;
    padding: 24px
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between
}

.close-btn {
    cursor: pointer;
    color: #666;
    font-size: 22px;
    padding: 2px 8px
}

.alert-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #e5e5e5
}

.alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px
}

.dot-red {
    background: #E24B4A
}

.dot-amber {
    background: #EF9F27
}

.dot-blue {
    background: #378ADD
}

.empty {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 13px
}

.loading {
    text-align: center;
    padding: 40px;
    color: #666
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    font-size: 12px
}

.toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.hamburger-btn {
    display: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0
}

.sidebar-backdrop {
    display: none
}

/* Celular/tablet chico: la barra lateral pasa de ser un panel fijo a un cajón (drawer) que se abre encima del
   contenido con el botón ☰ — así el contenido tiene todo el ancho de la pantalla en vez de compartirlo siempre
   con el menú. Todo lo demás (filtros, grids, tablas, modal, calendario) se reacomoda a una sola columna y con
   tipografías/paddings más chicos para que quepa y sea usable con el dedo en un teléfono real. */
@media (max-width:760px) {
    .hamburger-btn {
        display: flex;
        align-items: center
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        max-width: 82vw;
        z-index: 210;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 3px 0 18px rgba(0, 0, 0, 0.2)
    }

    .sidebar.sidebar-abierta {
        transform: translateX(0)
    }

    .sidebar-backdrop.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 200
    }

    .topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px
    }

    .topbar-right {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px
    }

    .content {
        padding: 12px
    }

    .metric-grid,
    .grid2,
    .pipeline-cols {
        grid-template-columns: 1fr
    }

    /* Cubre los grids de 2/3/4 columnas escritos directo en línea (formularios, fichas de cliente, resúmenes) sin
       tener que tocar uno por uno cada sitio donde aparecen. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr !important
    }

    .modal {
        width: 100%;
        padding: 16px
    }

    .dashboard-filters {
        padding: 10px
    }

    .filtro-botones {
        max-width: 100% !important
    }

    /* Buscadores/inputs con ancho fijo en pixeles escrito directo en línea (buscar cliente, buscador global, etc.) —
       se excluye width:auto porque ahí vive el de los checkboxes, que sí deben quedarse chicos. */
    input[style*="width:"]:not([style*="width:auto"]) {
        width: 100% !important;
        max-width: 100% !important
    }

    #search-results {
        left: 10px !important;
        right: 10px !important;
        width: auto !important
    }

    .cal-mes-grid {
        grid-auto-rows: 62px
    }

    .cal-mes-num {
        font-size: 10px
    }

    .cal-mes-evento {
        font-size: 9px;
        padding: 1px 3px
    }

    .cal-mes-diasem {
        font-size: 8.5px;
        padding: 2px 1px
    }

    table {
        font-size: 12px
    }

    th,
    td {
        padding: 7px 8px
    }
}

/* --- Calendario mensual de Agenda (estilo Outlook: todos los días del mes en una cuadrícula) --- */
.cal-wrap {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e5e5
}

.cal-nav-rango {
    font-size: 15px;
    font-weight: 700;
    color: #1B3A6B;
    text-transform: capitalize
}

.cal-mes-diasemana-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr)
}

.cal-mes-diasem {
    text-align: center;
    padding: 3px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    background: #FAFAFA;
    border-bottom: 1px solid #e5e5e5
}

.cal-mes-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 95px
}

.cal-mes-celda {
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    padding: 3px 4px;
    cursor: pointer;
    overflow-y: auto
}

.cal-mes-celda.hoy {
    background: rgba(227, 242, 253, 0.4)
}

.cal-mes-celda.fuera {
    background: #FAFAFA
}

.cal-mes-celda.fuera .cal-mes-num {
    color: #ccc
}

.cal-mes-num {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    margin-bottom: 3px;
    text-transform: capitalize
}

.cal-mes-celda.hoy .cal-mes-num {
    color: #1B3A6B
}

.cal-mes-evento {
    border-radius: 3px;
    padding: 1.5px 5px;
    margin-bottom: 2px;
    font-size: 10.5px;
    line-height: 1.4;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cal-mes-evento.completada {
    opacity: 0.5;
    text-decoration: line-through
}

.cal-mes-evento.todo-dia {
    font-weight: 700;
    border-left: 3px solid rgba(255, 255, 255, 0.7)
}