/* ═══════════════════════════════════════════════════════════
   FORXEN — Agenda / Agenda Directora
   Paleta: #276776 · #55b7bf · #073c43 · rojo #c0392b solo para peligro
   ═══════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────── */
body  { background: #eef2f4; }
.text-fxn { color: #276776; }
.card-fxn { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(39,103,118,.09); }
.btn-fxn  { background: #276776; color: #fff; border: none; font-weight: 700; }
.btn-fxn:hover { background: #1e5262; color: #fff; }

/* ── Modo switcher (agenda.php) ────────────────────────────── */
.modo-bar {
    background: #fff;
    border-bottom: 1px solid #dce8eb;
    padding: .5rem 1.5rem;
    display: flex; align-items: center; gap: .5rem;
}
.modo-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem 1.1rem; border-radius: 8px; font-size: .78rem; font-weight: 700;
    text-decoration: none; color: #276776; background: #eaf7f9;
    border: 1.5px solid #b0d8e0; transition: .15s; letter-spacing: .3px;
}
.modo-btn:hover      { background: #d4f0f4; color: #276776; }
.modo-btn.activo     { background: linear-gradient(135deg, #276776, #55b7bf); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(39,103,118,.3); }
.modo-btn.activo-dir { background: linear-gradient(135deg, #073c43, #276776); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(7,60,67,.35); }

/* ── KPI cards grid (agenda.php) ───────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .9rem;
    padding: 1.2rem 1.5rem;
}
.kpi-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(39,103,118,.08);
    padding: 1.1rem 1rem; text-align: center;
    border-top: 3px solid transparent; transition: .15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(39,103,118,.13); }
.kpi-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.kpi-lbl { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-top: .3rem; color: #888; }

.kpi-activos  { border-top-color: #276776; } .kpi-activos  .kpi-num { color: #276776; }
.kpi-proceso  { border-top-color: #55b7bf; } .kpi-proceso  .kpi-num { color: #55b7bf; }
.kpi-vencidos { border-top-color: #c0392b; } .kpi-vencidos .kpi-num { color: #c0392b; }
.kpi-criticos { border-top-color: #c0392b; } .kpi-criticos .kpi-num { color: #c0392b; }
.kpi-proximos { border-top-color: #073c43; } .kpi-proximos .kpi-num { color: #073c43; }

/* ── KPI mini (agenda_directora.php) ───────────────────────── */
.kpi-mini-grid { display: flex; gap: .8rem; flex-wrap: wrap; padding: 1rem 1.5rem; }
.kpi-mini {
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(39,103,118,.08);
    padding: .8rem 1.2rem; flex: 1; min-width: 100px; text-align: center;
    border-top: 3px solid transparent;
}
.kpi-mini .n { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.kpi-mini .l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #888; margin-top: .2rem; }

.k-pend { border-top-color: #276776; } .k-pend .n { color: #276776; }
.k-venc { border-top-color: #c0392b; } .k-venc .n { color: #c0392b; }
.k-crit { border-top-color: #c0392b; } .k-crit .n { color: #c0392b; }
.k-prox { border-top-color: #073c43; } .k-prox .n { color: #073c43; }

/* ── Zona atención inmediata (agenda.php) ──────────────────── */
.zona-criticos {
    margin: 0 1.5rem .5rem;
    background: linear-gradient(135deg, #fff0f0, #fff8f8);
    border: 1.5px solid #f5c6c6; border-radius: 12px;
    padding: 1rem 1.2rem;
}
.zona-crit-title {
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #c0392b; margin-bottom: .7rem;
}
.crit-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid #f5c6c6; border-radius: 20px;
    padding: .3rem .8rem; font-size: .75rem; font-weight: 600; color: #7d1a1a;
    margin: .2rem;
}
.crit-pill-fecha { font-size: .65rem; color: #c0392b; font-weight: 700; }

/* ── Tabs (agenda.php) ─────────────────────────────────────── */
.tabs-area {
    padding: .8rem 1.5rem .4rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
}
.tab-fxn { display: flex; gap: .4rem; flex-wrap: wrap; }
.tab-fxn a {
    padding: .38rem .9rem; border-radius: 8px; font-size: .78rem; font-weight: 600;
    text-decoration: none; color: #276776; background: #fff;
    border: 1.5px solid #b0d8e0; transition: .15s;
}
.tab-fxn a:hover  { background: #eaf7f9; }
.tab-fxn a.activo { background: #276776; color: #fff; border-color: #276776; }
.n-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; font-weight: 700;
    background: rgba(255,255,255,.25); margin-left: .25rem;
}
.tab-fxn a:not(.activo) .n-badge { background: #e8f7f9; color: #276776; }

/* ── Filtros (agenda.php) ──────────────────────────────────── */
.filtros-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .5rem 1.5rem .8rem; }
.buscador-fxn { max-width: 280px; font-size: .8rem; }

/* ── Tabla (agenda.php) ────────────────────────────────────── */
.tabla-wrap  { padding: 0 1.5rem 1.5rem; }
.card-tabla  { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(39,103,118,.08); overflow: hidden; }
.tbl-agenda  { width: 100%; border-collapse: collapse; }
.tbl-agenda thead th {
    background: #276776; color: #fff; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .5px; padding: .6rem 1rem; white-space: nowrap;
}
.tbl-agenda tbody tr   { border-bottom: 1px solid #f0f4f5; transition: .1s; }
.tbl-agenda tbody tr:hover { background: #f8fafb; }
.tbl-agenda tbody td   { padding: .6rem 1rem; font-size: .81rem; vertical-align: middle; }

.desc-text   { font-weight: 600; color: #276776; }
.sub-text    { font-size: .72rem; color: #888; margin-top: .12rem; }
.critico-icon { color: #c0392b; }

/* Indicadores de fila */
.critico-row { border-left: 4px solid #c0392b !important; }
.proximo-row { border-left: 4px solid #276776 !important; }
.sincomp-row { border-left: 4px solid #ddd    !important; }
.vencido-row { border-left: 4px solid #c0392b !important; }

/* Micro-badges de fecha */
.badge-proximo      { background: #e8f7f9; color: #276776; font-size: .63rem; font-weight: 700; padding: .13rem .42rem; border-radius: 10px; }
.badge-vencido-dias { background: #fdecea; color: #c0392b; font-size: .63rem; font-weight: 700; padding: .13rem .42rem; border-radius: 10px; }
.badge-sincomp      { background: #f0f0f0; color: #aaa;    font-size: .63rem; font-weight: 600; padding: .13rem .42rem; border-radius: 10px; }

/* Tipo */
.badge-evento { background: #e8f7f9; color: #276776; font-size: .67rem; font-weight: 700; padding: .22rem .65rem; border-radius: 20px; }
.badge-tarea  { background: #e8f0f2; color: #073c43; font-size: .67rem; font-weight: 700; padding: .22rem .65rem; border-radius: 20px; }

/* Estatus */
.est-pendiente { background: #e8f7f9; color: #276776; font-size: .69rem; font-weight: 600; padding: .18rem .65rem; border-radius: 20px; }
.est-enproceso { background: #d4edf0; color: #073c43; font-size: .69rem; font-weight: 600; padding: .18rem .65rem; border-radius: 20px; }
.est-concluido { background: #cce8eb; color: #073c43; font-size: .69rem; font-weight: 600; padding: .18rem .65rem; border-radius: 20px; }
.est-vencido   { background: #fdecea; color: #7d1a1a; font-size: .69rem; font-weight: 600; padding: .18rem .65rem; border-radius: 20px; }
.est-cancelado { background: #f0f4f5; color: #888;    font-size: .69rem; font-weight: 600; padding: .18rem .65rem; border-radius: 20px; }

/* Prioridad */
.prio-alta, .prio-Alta   { background: #fdecea; color: #7d1a1a; font-size: .67rem; font-weight: 700; padding: .18rem .55rem; border-radius: 6px; }
.prio-media, .prio-Media { background: #e8f7f9; color: #276776; font-size: .67rem; font-weight: 700; padding: .18rem .55rem; border-radius: 6px; }
.prio-baja, .prio-Baja   { background: #f0f4f5; color: #666;    font-size: .67rem; font-weight: 700; padding: .18rem .55rem; border-radius: 6px; }

/* Botón acción en tabla */
.btn-accion { font-size: .7rem; padding: .18rem .45rem; }

/* ── Tarjetas de evento HOY (agenda_directora.php) ─────────── */
.evt-card {
    background: #fff; border-radius: 10px; padding: .9rem 1.1rem;
    border-left: 5px solid #276776;
    box-shadow: 0 1px 6px rgba(39,103,118,.09); margin-bottom: .7rem;
    transition: .15s;
}
.evt-card:hover   { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39,103,118,.14); }
.evt-card.critico { border-left-color: #c0392b; }
.evt-card.tarea   { border-left-color: #073c43; }

.evt-hora { font-size: .7rem; font-weight: 700; color: #55b7bf; text-transform: uppercase; letter-spacing: .5px; }
.evt-desc { font-size: .88rem; font-weight: 700; color: #073c43; margin: .2rem 0 .15rem; line-height: 1.3; }
.evt-meta { font-size: .73rem; color: #888; }

.badge-crit { background: #fdecea; color: #7d1a1a; border-radius: 20px; font-size: .63rem; font-weight: 700; padding: .13rem .55rem; }
.badge-prio { border-radius: 20px; font-size: .63rem; font-weight: 700; padding: .13rem .55rem; }

/* ── Sección título (agenda_directora.php) ─────────────────── */
.sec-title {
    font-size: .78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #276776;
    border-bottom: 2px solid #b0d8e0; padding-bottom: .35rem; margin-bottom: .9rem;
}
.vacio-txt { color: #aaa; font-size: .82rem; padding: .8rem 0; }

/* ── Lista próximos (agenda_directora.php) ─────────────────── */
.prox-item {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .65rem 0; border-bottom: 1px solid #f0f4f5;
}
.prox-item:last-child { border-bottom: none; }
.prox-fecha-box {
    min-width: 44px; text-align: center; background: #eaf7f9;
    border-radius: 8px; padding: .28rem .35rem;
}
.prox-fecha-dia { font-size: 1.05rem; font-weight: 800; color: #276776; line-height: 1; }
.prox-fecha-mes { font-size: .58rem; font-weight: 700; color: #55b7bf; text-transform: uppercase; }
.prox-desc { font-size: .8rem; font-weight: 600; color: #073c43; }
.prox-meta { font-size: .7rem; color: #888; }

/* ── Panel equipo (agenda_directora.php) ───────────────────── */
.panel-equipo { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(39,103,118,.09); overflow: hidden; }
.panel-equipo-header { background: linear-gradient(90deg, #073c43, #276776); color: #fff; padding: .9rem 1.2rem; }
.panel-equipo-title  { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.kpi-eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 1rem; }
.kpi-eq { text-align: center; background: #f8fafb; border-radius: 8px; padding: .6rem .5rem; }
.kpi-eq .n { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.kpi-eq .l { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #888; margin-top: .15rem; }
.kq-pend .n { color: #276776; }
.kq-proc .n { color: #55b7bf; }
.kq-done .n { color: #073c43; }

/* Barra cumplimiento */
.cumplimiento-wrap { padding: .5rem 1rem 1rem; }
.cumpl-label   { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #555; margin-bottom: .4rem; }
.cumpl-bar-bg  { background: #e8f7f9; border-radius: 20px; height: 10px; overflow: hidden; }
.cumpl-bar-fill { background: linear-gradient(90deg, #276776, #55b7bf); height: 100%; border-radius: 20px; transition: width .6s ease; }
.cumpl-pct     { font-size: 1.1rem; font-weight: 800; color: #276776; }

/* Logros */
.logro-item  { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #f5f5f5; font-size: .77rem; }
.logro-item:last-child { border-bottom: none; }
.logro-check { color: #55b7bf; font-size: .95rem; flex-shrink: 0; margin-top: .1rem; }
.logro-desc  { color: #333; font-weight: 600; }
.logro-meta  { color: #aaa; font-size: .68rem; }

/* Críticos equipo */
.crit-eq-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #fdecea; font-size: .77rem; }
.crit-eq-item:last-child { border-bottom: none; }

/* ── Layout principal (agenda_directora.php) ───────────────── */
.layout-main { display: grid; grid-template-columns: 1fr 380px; gap: 1.2rem; padding: 1rem 1.5rem 2rem; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kpi-grid   { grid-template-columns: repeat(3, 1fr); }
    .layout-main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}