/* ===============================================================
   1. VARIABLES Y CONFIGURACIÓN GENERAL
   =============================================================== */
:root {
  --ink:#153248;
  --muted:#6b7d89;
  --line:#dce6ec;
  --bg:#f4f8fa;
  --primary:#157aa5;
  --primary2:#20a7c9;
  --green:#30a46c;
  --yellow:#f1b44c;
  --red:#d9534f;
  --gray:#9aa7af;
  --white:#fff;
  --shadow:0 10px 30px rgba(20,50,70,.08)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink)
}

button,input,select,textarea {
  font:inherit
}


/* ===============================================================
   2. CLASES GENERALES Y VISIBILIDAD
   =============================================================== */
.hidden {
  display:none!important
}


/* ===============================================================
   3. ESTRUCTURA PRINCIPAL
   =============================================================== */
.app {
  min-height:100vh;
  display:grid;
  grid-template-columns:245px 1fr
}


/* ===============================================================
   4. MENÚ LATERAL
   =============================================================== */
.sidebar {
  background:linear-gradient(180deg,#12384d,#0d2d40);
  color:white;
  padding:22px 14px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh
}

.brand {
  display:flex;
  gap:11px;
  align-items:center;
  padding:0 8px 22px
}

.brand span {
  display:block;
  font-size:11px;
  opacity:.7;
  margin-top:3px
}

.brand-mark {
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary2),#7dd8e8);
  color:#0d3347;
  font-size:22px;
  font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.15)
}

.brand-mark.small {
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:15px
}

.sidebar nav {
  display:grid;
  gap:6px
}

.nav {
  border:0;
  background:transparent;
  color:#d7e5ec;
  padding:12px 14px;
  border-radius:12px;
  text-align:left;
  display:flex;
  gap:12px;
  cursor:pointer
}

.nav:hover,.nav.active {
  background:rgba(255,255,255,.11);
  color:white
}

.sidebar-footer {
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.13);
  padding:16px 8px 0
}

.sidebar-footer small {
  display:block;
  opacity:.65;
  margin:3px 0 7px
}

.link {
  border:0;
  background:none;
  color:#8ed7e9;
  padding:0;
  cursor:pointer
}


/* ===============================================================
   5. ÁREA PRINCIPAL Y ENCABEZADO
   =============================================================== */
main {
  min-width:0;
  padding:0 24px 40px
}

header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

header h2 {
  margin:0;
  font-size:25px
}

header p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px
}

.tab {
  display:none
}

.tab.active {
  display:block
}


/* ===============================================================
   6. BOTONES
   =============================================================== */
.btn {
  border:0;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700
}

.btn.primary {
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white
}

.btn.ghost {
  background:white;
  color:var(--ink);
  border:1px solid var(--line)
}

.btn.danger {
  background:#fff0ef;
  color:#b23c36
}

.btn.full {
  width:100%;
  margin-top:12px
}


/* ===============================================================
   7. TARJETAS Y CONTENEDORES
   =============================================================== */
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:18px
}

.card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}

.card-head h3 {
  margin:0;
  font-size:16px
}

.card-head p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px
}


/* ===============================================================
   8. DASHBOARD E INDICADORES KPI
   =============================================================== */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}

.kpi {
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
  padding:18px;
  box-shadow:var(--shadow)
}

.kpi .value {
  font-size:28px;
  font-weight:900;
  margin-top:7px
}

.kpi .label {
  font-size:12px;
  color:var(--muted)
}

.kpi .sub {
  font-size:12px;
  margin-top:8px
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.donut-wrap {
  display:flex;
  align-items:center;
  gap:26px;
  min-height:180px
}

.donut {
  width:140px;
  height:140px;
  border-radius:50%;
  display:grid;
  place-items:center
}

.donut:after {
  content:"";
  width:94px;
  height:94px;
  border-radius:50%;
  background:white
}

.donut-center {
  position:absolute;
  text-align:center;
  font-size:23px;
  font-weight:900
}

.chart-legend {
  display:grid;
  gap:8px;
  font-size:12px
}

.chart-legend span {
  display:flex;
  gap:8px;
  align-items:center
}


/* ===============================================================
   9. BARRAS DE HERRAMIENTAS Y LEYENDAS
   =============================================================== */
.toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px
}

.toolbar label {
  font-size:12px;
  font-weight:700
}

.hint {
  font-size:12px;
  color:var(--muted)
}

.legend {
  display:flex;
  gap:16px;
  font-size:12px
}

.legend span {
  display:flex;
  align-items:center;
  gap:6px
}

.dot {
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block
}

.ns {
  background:#c6d0d6
}

.ip {
  background:#f1b44c
}

.ok {
  background:#30a46c
}

.late {
  background:#d9534f
}

.matrix-card,.gantt-card {
  padding:0;
  overflow:hidden
}

/* ===============================================================
   10. MATRIZ X - VISTA ADAPTABLE Y BLOQUE INFERIOR FIJO
   =============================================================== */
.matrix-wrap {
  width:100%;
  overflow:hidden;
  max-height:none;
  background:#fff
}

.matrix-layout {
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#fff
}

.matrix-title-bar {
  width:100%;
  padding:12px 16px;
  background:#002060;
  color:#7dd8e8;
  font-weight:900;
  font-size:15px;
  text-align:center;
  letter-spacing:.2px;
  border-bottom:1px solid #173f73
}

.matrix-section-label {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 10px;
  background:#f6fafc;
  border-bottom:1px solid var(--line);
  color:#3f5969
}

.matrix-section-label span {
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px
}

.matrix-section-label small {
  font-size:10px;
  color:var(--muted)
}

.matrix-initiatives-scroll {
  width:100%;
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  border-bottom:3px solid #0f6e91
}

.matrix-fixed-bottom {
  width:100%;
  overflow:hidden;
  background:#fff;
  box-shadow:0 -7px 18px rgba(19,53,73,.08)
}

.matrix-table {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:0;
  table-layout:fixed;
  font-size:9px
}

.matrix-table td {
  border-right:1px solid #dde6ea;
  border-bottom:1px solid #dde6ea;
  width:auto;
  min-width:0;
  height:24px;
  padding:2px 3px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  cursor:pointer;
  position:relative;
  line-height:1.12;
  text-align:center;
  vertical-align:middle
}

.matrix-table td:hover {
  outline:2px solid var(--primary2);
  outline-offset:-2px;
  z-index:3
}

.matrix-table td.initiative-name {
  min-width:0;
  font-size:9.5px;
  font-weight:700;
  text-align:center!important;
  vertical-align:middle!important;
  padding:3px 6px
}

.matrix-table td.indicator-name {
  min-width:0;
  font-size:9px;
  font-weight:700;
  text-align:center!important;
  vertical-align:middle!important;
  padding:3px 5px
}

.matrix-axis-row td {
  height:218px;
  font-size:8.5px;
  overflow:hidden
}

.matrix-axis-row td.matrix-axis-header {
  padding:2px 1px;
  line-height:1.05;
  text-align:center!important;
  vertical-align:middle!important
}

.matrix-center-cell {
  writing-mode:horizontal-tb!important;
  transform:none!important;
  background:#fff!important;
  color:#111!important;
  text-align:center!important;
  vertical-align:middle!important;
  padding:0!important;
  overflow:hidden!important
}

.matrix-center-x {
  position:relative;
  width:100%;
  height:100%;
  min-height:218px;
  overflow:hidden;
  background:#fff
}

.center-x-line {
  position:absolute;
  left:50%;
  top:50%;
  width:145%;
  height:1px;
  background:#1c2b35;
  transform-origin:center;
  z-index:1;
  pointer-events:none
}

.center-x-line-a {
  transform:translate(-50%,-50%) rotate(32deg)
}

.center-x-line-b {
  transform:translate(-50%,-50%) rotate(-32deg)
}

.center-x-label {
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#111;
  text-align:center;
  font-size:9px;
  line-height:1.15;
  background:rgba(255,255,255,.90);
  padding:2px 4px
}

.center-x-label strong {
  font-size:10px;
  font-weight:900
}

.center-x-top {
  top:12px;
  left:22%;
  right:22%
}

.center-x-bottom {
  bottom:12px;
  left:20%;
  right:20%
}

.center-x-left {
  left:6px;
  top:34%;
  width:29%;
  transform:rotate(-90deg)
}

.center-x-right {
  right:6px;
  top:34%;
  width:29%;
  transform:rotate(90deg)
}

.matrix-indicator-row td {
  height:27px
}

.matrix-table td.relation-cell {
  font-size:12px!important;
  font-weight:900;
  padding:0!important;
  text-align:center!important;
  vertical-align:middle!important;
  line-height:1!important
}

.matrix-mini {
  width:100%;
  max-height:355px;
  overflow:hidden
}

.matrix-mini-layout {
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px
}

.matrix-mini-title {
  padding:7px 10px;
  background:#002060;
  color:#7dd8e8;
  font-size:10px;
  font-weight:900;
  text-align:center
}

.matrix-mini .matrix-table {
  font-size:6px
}

.matrix-mini .matrix-table td {
  height:17px;
  padding:1px;
  cursor:default;
  line-height:1
}

.matrix-mini .matrix-table td.initiative-name,
.matrix-mini .matrix-table td.indicator-name {
  font-size:6px;
  padding:2px
}

.matrix-mini .matrix-axis-row td {
  height:65px;
  font-size:6px
}

.matrix-mini .matrix-center-cell {
  font-size:7px!important;
  line-height:1.2!important
}

.matrix-mini .matrix-center-x {
  min-height:65px
}

.matrix-mini .center-x-label {
  font-size:4.5px;
  gap:0;
  padding:1px 2px
}

.matrix-mini .center-x-label strong {
  font-size:5px
}

.matrix-mini td:hover {
  outline:none
}

@media (max-width:1350px) {
  .matrix-table { font-size:8px }
  .matrix-table td.initiative-name { font-size:8.5px }
  .matrix-table td.indicator-name { font-size:8px }
  .matrix-axis-row td { font-size:7.5px }
  .matrix-center-cell { font-size:10px!important }
}

@media (max-height:850px) {
  .matrix-initiatives-scroll { max-height:240px }
  .matrix-axis-row td { height:190px }
  .matrix-indicator-row td { height:25px }
}

.gantt-table,.data-table {
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  font-size:12px
}

.gantt-table th,.gantt-table td,.data-table th,.data-table td {
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:8px;
  vertical-align:middle
}

.gantt-table th,.data-table th {
  position:sticky;
  top:0;
  background:#eef5f8;
  z-index:3;
  text-align:center
}

.gantt-table .sticky1 {
  position:sticky;
  left:0;
  z-index:4;
  background:white;
  min-width:260px;
  max-width:340px
}

.gantt-table th.sticky1 {
  background:#e7f1f5;
  z-index:6
}

.gantt-table .sticky2 {
  position:sticky;
  left:260px;
  z-index:4;
  background:white;
  min-width:120px
}

.gantt-table th.sticky2 {
  background:#e7f1f5;
  z-index:6
}

.gantt-table .sticky3 {
  position:sticky;
  left:380px;
  z-index:4;
  background:white;
  min-width:120px
}

.gantt-table th.sticky3 {
  background:#e7f1f5;
  z-index:6
}

.gantt-table .sticky4 {
  position:sticky;
  left:500px;
  z-index:4;
  background:white;
  min-width:180px
}

.gantt-table th.sticky4 {
  background:#e7f1f5;
  z-index:6
}

.month-cell {
  min-width:82px;
  text-align:center;
  font-weight:800;
  cursor:pointer;
  transition:.15s
}

.month-cell:hover {
  filter:brightness(.96)
}

.status-NO_INICIADO {
  background:#e4eaee;
  color:#60727d
}

.status-EN_PROCESO {
  background:#fff1c9;
  color:#876108
}

.status-FINALIZADO {
  background:#d8f2e4;
  color:#26734c
}

.status-ATRASADO {
  background:#f9d9d6;
  color:#a33e37
}

.project-input {
  width:100%;
  border:1px solid #d8e3e8;
  border-radius:8px;
  padding:7px;
  background:white
}

.data-table {
  width:100%
}

.data-table td {
  background:white
}

.badge {
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800
}

.badge.ok {
  background:#d8f2e4;
  color:#26734c
}

.badge.bad {
  background:#f9d9d6;
  color:#a33e37
}

.badge.pending {
  background:#eef2f4;
  color:#6a7a84
}

.result-input {
  width:100px
}

.comment-input {
  width:220px
}

.icon-btn {
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px
}


/* ===============================================================
   12. LOGIN
   =============================================================== */
.login-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 20% 10%,#d9f4fa,transparent 35%),linear-gradient(135deg,#eef8fb,#f8fbfc)
}

.login-card {
  width:min(400px,92vw);
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  box-shadow:0 30px 80px rgba(16,65,88,.14)
}

.login-card h1 {
  margin:16px 0 4px
}

.login-card p {
  margin:0 0 24px;
  color:var(--muted)
}

.login-card label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin:12px 0 6px
}

.login-card input,.modal input,.modal select,.modal textarea,.toolbar input {
  width:100%;
  border:1px solid #cfdce2;
  border-radius:10px;
  padding:10px;
  background:white
}

.login-card small {
  display:block;
  margin-top:12px;
  color:var(--muted)
}

.modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(8,30,43,.45);
  display:grid;
  place-items:center;
  z-index:50
}

.modal {
  background:white;
  width:min(560px,92vw);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  overflow:hidden
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid var(--line)
}

.modal-head h3 {
  margin:0
}

.modal-head button {
  border:0;
  background:none;
  font-size:24px;
  cursor:pointer
}

.modal #modalBody {
  padding:20px;
  display:grid;
  gap:12px
}

.modal-actions {
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px
}

.field label {
  font-size:12px;
  font-weight:700;
  display:block;
  margin-bottom:5px
}


/* ===============================================================
   13. CARGA, TOAST Y MODALES
   =============================================================== */
.overlay {
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.72);
  z-index:100;
  display:grid;
  place-content:center;
  text-align:center;
  gap:10px
}

.loader {
  width:38px;
  height:38px;
  border:4px solid #d5e9f0;
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:auto
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }

}

#toast {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  background:#16394d;
  color:white;
  padding:12px 16px;
  border-radius:11px;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.2s
}

#toast.show {
  opacity:1;
  transform:none
}


/* ===============================================================
   14. DISEÑO RESPONSIVO
   =============================================================== */
@media(max-width:900px) {
  .app {
    grid-template-columns:72px 1fr
  }

  .sidebar {
    padding:18px 8px
  }

  .brand>div:last-child,.nav span,.sidebar-footer div,.sidebar-footer small {
    display:none
  }

  .nav {
    justify-content:center
  }

  .kpi-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .two-col {
    grid-template-columns:1fr
  }

  main {
    padding:0 12px
  }

  .gantt-table .sticky2,.gantt-table .sticky3,.gantt-table .sticky4 {
    position:static
  }

  .gantt-table .sticky1 {
    left:0
  }

}


/* ================================================================
   RELACIONES DE LA MATRIZ X
   ================================================================ */
.matrix-table td.relation-cell {
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  text-align: center !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

.matrix-table td.relation-cell:hover {
  transform: scale(1.04);
  box-shadow: inset 0 0 0 2px rgba(27, 175, 222, .45);
}

.relation-picker {
  display: grid;
  gap: 10px;
}

.relation-help {
  margin: 0 0 4px;
  color: var(--muted, #667085);
}

.relation-option {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #D7DEE7;
  border-radius: 12px;
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.relation-option:hover,
.relation-option.selected {
  border-color: #1BAFDE;
  box-shadow: 0 4px 14px rgba(2, 89, 126, .10);
  transform: translateY(-1px);
}

.relation-option span:last-child {
  display: grid;
  gap: 2px;
}

.relation-option small {
  color: #667085;
}

.relation-symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 700;
}

.strong-symbol {
  color: #02597E;
  background: #DDEBF7;
}

.secondary-symbol {
  color: #5B6573;
  background: #F2F2F2;
}

.empty-symbol {
  color: #98A2B3;
  background: #F8FAFC;
}

.matrix-empty {
  margin: 18px;
  padding: 22px;
  background: #ffffff;
  border: 1px dashed #b8c8d2;
  border-radius: 12px;
  color: #153248;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.matrix-empty span {
  color: #667784;
  font-size: 12px;
}

/* ===============================================================
   15. MEJORAS DE EXPERIENCIA: LOGIN, CARGA, AVISOS Y MODALES
   =============================================================== */

/* ---------- Login ---------- */
.login-card {
  position:relative;
  overflow:hidden;
}

.login-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
}

.login-card input {
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-card input:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.toolbar input:focus {
  outline:none;
  border-color:var(--primary2);
  box-shadow:0 0 0 4px rgba(32,167,201,.12);
}

.login-help {
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:#f3f8fa;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.btn {
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}

.btn:hover:not(:disabled) {
  transform:translateY(-1px);
}

.btn.primary:hover:not(:disabled) {
  box-shadow:0 8px 20px rgba(21,122,165,.22);
}

.btn:disabled {
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
}

/* ---------- Overlay de carga ---------- */
.overlay {
  position:fixed;
  inset:0;
  background:rgba(8,28,40,.42);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  z-index:200;
  display:grid;
  place-items:center;
  padding:20px;
}

.loading-card {
  width:min(390px,92vw);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  padding:30px 28px 24px;
  text-align:center;
  box-shadow:0 28px 80px rgba(4,29,43,.28);
  animation:modalIn .2s ease-out;
}

.loading-card h3 {
  margin:18px 0 6px;
  font-size:19px;
  color:var(--ink);
}

.loading-card p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.loading-orbit {
  width:68px;
  height:68px;
  margin:auto;
  position:relative;
  display:grid;
  place-items:center;
}

.loading-orbit > span {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid #dcedf3;
  border-top-color:var(--primary2);
  border-right-color:var(--primary);
  animation:spin .85s linear infinite;
}

.loading-logo {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg,#effafe,#d7f2f8);
  color:#0b5878;
  font-weight:900;
  font-size:15px;
}

.loading-bar {
  margin-top:20px;
  height:4px;
  border-radius:999px;
  background:#e5eef2;
  overflow:hidden;
}

.loading-bar i {
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  animation:loadingBar 1.15s ease-in-out infinite;
}

@keyframes loadingBar {
  0% { transform:translateX(-120%); }
  100% { transform:translateX(340%); }
}

/* ---------- Toasts ---------- */
.toast {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:240;
  width:min(390px,calc(100vw - 32px));
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:white;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(9,43,61,.2);
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity:1;
  transform:translateY(0) scale(1);
}

.toast-icon {
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:#e9f7ef;
  color:#247a50;
}

.toast-copy {
  min-width:0;
  display:grid;
  gap:3px;
}

.toast-copy strong {
  font-size:13px;
}

.toast-copy span {
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.toast.error .toast-icon {
  background:#fde9e7;
  color:#b53f36;
}

.toast.warning .toast-icon {
  background:#fff4d9;
  color:#9a6b09;
}

.toast.info .toast-icon {
  background:#e7f3f8;
  color:#146f95;
}

/* ---------- Modales y avisos ---------- */
.modal-backdrop {
  background:rgba(8,30,43,.48);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:18px;
}

.modal {
  width:min(590px,94vw);
  max-height:min(82vh,760px);
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
  animation:modalIn .18s ease-out;
}

@keyframes modalIn {
  from { opacity:0; transform:translateY(8px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.modal-head {
  padding:18px 20px;
  background:linear-gradient(180deg,#ffffff,#f9fbfc);
}

.modal-heading {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.modal-heading h3 {
  font-size:17px;
  line-height:1.25;
}

.modal-heading p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
}

.modal-icon {
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:#e8f5f9;
  color:#126f96;
}

.modal-error .modal-icon,
.modal-danger .modal-icon {
  background:#fde9e7;
  color:#b53f36;
}

.modal-warning .modal-icon {
  background:#fff4d9;
  color:#966807;
}

.modal-success .modal-icon {
  background:#e8f6ee;
  color:#26734c;
}

.modal-close {
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px!important;
  color:#69808d;
  transition:background .15s ease,color .15s ease;
}

.modal-close:hover {
  background:#edf3f6!important;
  color:var(--ink);
}

.modal #modalBody {
  overflow:auto;
  padding:20px;
  gap:14px;
}

.modal-actions {
  background:#fbfcfd;
  padding:14px 20px 18px;
}

.notice-body {
  font-size:13px;
  line-height:1.65;
  color:#314d5d;
}

.notice-body p {
  margin:0;
}

.notice-body p + p {
  margin-top:10px;
}

.muted-note {
  color:var(--muted);
  font-size:12px;
}

@media (max-width:700px) {
  .toast {
    left:16px;
    right:16px;
    bottom:16px;
    width:auto;
  }

  .loading-card {
    padding:26px 20px 22px;
  }

  .modal-actions {
    flex-wrap:wrap;
  }

  .modal-actions .btn {
    flex:1 1 140px;
  }
}

/* Corrección de especificidad frente al estilo anterior del toast */
#toast.toast {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:240;
  width:min(390px,calc(100vw - 32px));
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:white;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(9,43,61,.2);
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
}

#toast.toast.show {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ===============================================================
   16. AJUSTE VISUAL V11 - MATRIZ COMPACTA Y CENTRADA
   =============================================================== */

.matrix-table td,
.matrix-table td.initiative-name,
.matrix-table td.indicator-name,
.matrix-table td.matrix-axis-header,
.matrix-table td.relation-cell {
  box-sizing: border-box;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Filas normales realmente compactas. */
.matrix-table td {
  height: 28px !important;
  padding: 1px 2px !important;
  line-height: 1.05 !important;
}

/* Evita que textos largos agranden automáticamente la fila. */
.matrix-cell-inner {
  width: 100%;
  height: 26px;
  max-height: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  padding: 0 2px;
  box-sizing: border-box;
  line-height: 1.05;
}

.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  font-size: 8.5px;
  line-height: 1.05;
}

/* Puntos totalmente centrados. */
.matrix-table td.relation-cell {
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-relation-inner {
  height: 28px;
  max-height: 28px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/* Indicadores compactos. */
.matrix-indicator-row td {
  height: 30px !important;
}

.matrix-indicator-row .matrix-cell-inner {
  height: 28px;
  max-height: 28px;
}

/* Fila de cruce: única fila alta de la matriz. */
.matrix-axis-row,
.matrix-axis-row td,
.matrix-axis-row td.matrix-axis-header,
.matrix-axis-row td.matrix-center-cell {
  height: 255px !important;
  min-height: 255px !important;
  max-height: 255px !important;
}

.matrix-axis-row .matrix-cell-inner {
  height: 251px;
  max-height: 251px;
  padding: 4px 2px !important;
  overflow: hidden;
}

.matrix-center-cell {
  height: 255px !important;
  min-height: 255px !important;
  max-height: 255px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.matrix-center-x {
  position: relative;
  width: 100%;
  height: 255px !important;
  min-height: 255px !important;
  max-height: 255px !important;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.center-x-line {
  width: 155% !important;
}

.center-x-top {
  top: 18px !important;
  left: 18% !important;
  right: 18% !important;
}

.center-x-bottom {
  bottom: 20px !important;
  left: 16% !important;
  right: 16% !important;
}

.center-x-left {
  left: 0 !important;
  top: 36% !important;
  width: 31% !important;
}

.center-x-right {
  right: 0 !important;
  top: 36% !important;
  width: 31% !important;
}

.center-x-label,
.center-x-label strong {
  text-align: center !important;
}

.matrix-axis-row td.matrix-axis-header {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 2px 1px !important;
}

/* Scroll solo para iniciativas. */
.matrix-initiatives-scroll {
  max-height: 260px !important;
}

@media (max-height: 850px) {
  .matrix-initiatives-scroll {
    max-height: 220px !important;
  }

  /* La fila central NO se reduce. */
  .matrix-axis-row,
  .matrix-axis-row td,
  .matrix-axis-row td.matrix-axis-header,
  .matrix-axis-row td.matrix-center-cell,
  .matrix-center-x {
    height: 255px !important;
    min-height: 255px !important;
    max-height: 255px !important;
  }
}



/* ===============================================================
   17. AJUSTE VISUAL V12 - ALTURAS, ANCHOS Y CENTRADO REAL
   =============================================================== */

/*
 * Las filas normales no deben crecer por el contenido.
 * 36 px permite dos líneas cortas en iniciativas sin desperdiciar espacio.
 */
.matrix-table tr:not(.matrix-axis-row) {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

.matrix-table tr:not(.matrix-axis-row) > td {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
}

.matrix-table tr:not(.matrix-axis-row) .matrix-cell-inner {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 2px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
}

.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  font-size: 8px !important;
}

/* Los puntos permanecen exactamente en el centro geométrico. */
.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Indicadores: compactos, pero con suficiente espacio para dos líneas. */
.matrix-indicator-row,
.matrix-indicator-row td {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}

.matrix-indicator-row .matrix-cell-inner {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

/*
 * Fila de cruce. Esta es la única fila alta y NO se comprime.
 */
.matrix-axis-row,
.matrix-axis-row td,
.matrix-axis-row td.matrix-axis-header,
.matrix-axis-row td.matrix-center-cell {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}

.matrix-axis-row td.matrix-axis-header {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/*
 * La rotación se hace sobre el contenido, no sobre el TD.
 * De esta forma el texto queda centrado tanto vertical como horizontalmente.
 */
.matrix-axis-inner {
  position: absolute !important;
  inset: 5px 2px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px 1px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.08 !important;
  font-size: 7.4px !important;
  box-sizing: border-box !important;
}

.matrix-axis-inner-vertical {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  transform-origin: center center !important;
  white-space: normal !important;
}

/* Textos especialmente largos, como el Objetivo 6. */
.matrix-axis-inner-long {
  font-size: 6.5px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05px !important;
}

.matrix-center-cell,
.matrix-center-x {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
}

/* Centrado final de todos los tipos de contenido. */
.matrix-table td,
.matrix-table td > .matrix-cell-inner,
.matrix-table td.relation-cell,
.matrix-table td.initiative-name,
.matrix-table td.indicator-name {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Más columnas visibles sin comprimir demasiado el texto. */
.matrix-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Mantiene la fila central intacta también en pantallas de menor altura. */
@media (max-height: 850px) {
  .matrix-axis-row,
  .matrix-axis-row td,
  .matrix-axis-row td.matrix-axis-header,
  .matrix-axis-row td.matrix-center-cell,
  .matrix-center-x {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}


/* ===============================================================
   18. MATRIZ X V14 - DIMENSIONAMIENTO SEGUN ORIENTACION DEL TEXTO
   =============================================================== */

:root {
  --mx-axis-h: 300px;
}

.matrix-layout,
.matrix-initiatives-scroll,
.matrix-fixed-bottom,
.matrix-table {
  height: auto !important;
}

.matrix-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   A. FILAS DE TEXTO HORIZONTAL
   La altura viene calculada desde Scripts.html y se guarda en
   --mx-dynamic-row-h. Así una fila crece solo cuando su texto lo necesita.
   --------------------------------------------------------------- */
.matrix-table tr:not(.matrix-axis-row) {
  height: var(--mx-dynamic-row-h, 28px) !important;
  min-height: var(--mx-dynamic-row-h, 28px) !important;
}

.matrix-table tr:not(.matrix-axis-row) > td {
  height: var(--mx-dynamic-row-h, 28px) !important;
  min-height: var(--mx-dynamic-row-h, 28px) !important;
  max-height: none !important;
}

.matrix-table tr:not(.matrix-axis-row) .matrix-cell-inner {
  min-height: calc(var(--mx-dynamic-row-h, 28px) - 2px) !important;
  height: auto !important;
  max-height: none !important;
}

/* ---------------------------------------------------------------
   B. FILA CENTRAL / CRUCES
   La X conserva una altura estable. Las columnas laterales ya reciben
   anchos dinámicos desde matrixColgroup(m).
   --------------------------------------------------------------- */
.matrix-axis-row,
.matrix-axis-row > td,
.matrix-axis-row td.matrix-axis-header,
.matrix-axis-row td.matrix-center-cell,
.matrix-center-x {
  height: var(--mx-axis-h) !important;
  min-height: var(--mx-axis-h) !important;
  max-height: var(--mx-axis-h) !important;
}

.matrix-table td {
  box-sizing: border-box !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

.matrix-cell-inner,
.matrix-relation-inner {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.08 !important;
}

/* Texto horizontal: se muestra completo y es el que determina el alto. */
.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  font-size: 8px !important;
  font-weight: 700 !important;
  overflow: visible !important;
}

/* Relaciones: siempre exactamente al centro. */
.matrix-table td.relation-cell,
.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ---------------------------------------------------------------
   C. ENCABEZADOS VERTICALES
   La celda toma el ancho dinámico del <col>. La rotación ocurre dentro
   de la celda y el bloque utiliza la altura disponible de la fila central.
   --------------------------------------------------------------- */
.matrix-axis-row td.matrix-axis-header {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.matrix-axis-inner {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
  font-size: 7.5px !important;
  line-height: 1.05 !important;
}

.matrix-axis-inner-vertical {
  /* Al rotarse, el ancho útil proviene de la altura de la fila central. */
  width: calc(var(--mx-axis-h) - 18px) !important;
  height: calc(100% - 6px) !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  writing-mode: horizontal-tb !important;
}

.matrix-axis-inner-long {
  font-size: 7px !important;
  line-height: 1.02 !important;
}

.matrix-axis-inner-xlong {
  font-size: 6.4px !important;
  line-height: 1 !important;
  letter-spacing: -.05px !important;
}

.matrix-center-cell {
  padding: 0 !important;
}

.matrix-center-x {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Mantener la geometría central ya utilizada. */
.matrix-center-x .center-x-line {
  position: absolute !important;
  left: 3% !important;
  top: 50% !important;
  width: 94% !important;
  height: 1px !important;
  background: #465968 !important;
  transform-origin: center center !important;
}
.matrix-center-x .center-x-line-a { transform: rotate(32deg) !important; }
.matrix-center-x .center-x-line-b { transform: rotate(-32deg) !important; }

.matrix-center-x .center-x-label {
  position: absolute !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 8px !important;
  line-height: 1.08 !important;
  background: rgba(255,255,255,.88) !important;
  padding: 2px 4px !important;
}
.matrix-center-x .center-x-top { top: 13% !important; left: 50% !important; transform: translateX(-50%) !important; }
.matrix-center-x .center-x-bottom { bottom: 13% !important; left: 50% !important; transform: translateX(-50%) !important; }
.matrix-center-x .center-x-left { left: 9% !important; top: 50% !important; transform: translateY(-50%) rotate(-90deg) !important; }
.matrix-center-x .center-x-right { right: 9% !important; top: 50% !important; transform: translateY(-50%) rotate(90deg) !important; }

/* La vista mini mantiene proporciones, no las dimensiones grandes. */
.matrix-mini .matrix-axis-row,
.matrix-mini .matrix-axis-row > td,
.matrix-mini .matrix-center-x {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
}

.matrix-mini .matrix-axis-inner-vertical {
  width: 138px !important;
}

@media (max-width: 1200px) {
  .matrix-table td.initiative-name .matrix-cell-inner,
  .matrix-table td.indicator-name .matrix-cell-inner {
    font-size: 7.4px !important;
  }
  .matrix-axis-inner { font-size: 6.9px !important; }
}



/* ===============================================================
   19. MATRIZ X V15 - AJUSTE NATURAL POR CONTENIDO
   =============================================================== */

:root {
  --mx-axis-h: 300px;
}

/* La tabla ocupa todo el ancho. Las columnas laterales usan px y la
   columna central absorbe únicamente el espacio que queda disponible. */
.matrix-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.matrix-table col.mx-center-col {
  width: auto !important;
}

/* ---------------------------------------------------------------
   FILAS HORIZONTALES
   ---------------------------------------------------------------
   No se fuerza altura. El texto de la columna central determina de
   manera natural cuánto debe medir cada fila individual. */
.matrix-table tr:not(.matrix-axis-row),
.matrix-table tr:not(.matrix-axis-row) > td {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.matrix-table tr:not(.matrix-axis-row) .matrix-cell-inner {
  height: auto !important;
  min-height: 24px !important;
  max-height: none !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
}

.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  min-height: 28px !important;
  height: auto !important;
  padding: 6px 8px !important;
  font-size: 9.5px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Las relaciones no agregan altura propia: se adaptan exactamente a la
   fila determinada por el texto horizontal. */
.matrix-table td.relation-cell,
.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* ---------------------------------------------------------------
   ENCABEZADOS VERTICALES
   ---------------------------------------------------------------
   --mx-col-w llega individualmente desde Scripts.html para cada celda.
   Después de rotar, la altura del elemento se convierte en el ancho
   visual; por eso coincide con el ancho real de ESA columna. */
.matrix-axis-row,
.matrix-axis-row > td,
.matrix-axis-row td.matrix-axis-header,
.matrix-axis-row td.matrix-center-cell,
.matrix-center-x {
  height: var(--mx-axis-h) !important;
  min-height: var(--mx-axis-h) !important;
  max-height: var(--mx-axis-h) !important;
}

.matrix-axis-row td.matrix-axis-header {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.matrix-axis-inner {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 8.6px !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.matrix-axis-inner-vertical {
  /* Antes de rotar: width = recorrido vertical disponible.
     height = grosor real de ESTA columna. */
  width: calc(var(--mx-axis-h) - 22px) !important;
  height: calc(var(--mx-col-w, 42px) - 6px) !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  writing-mode: horizontal-tb !important;
}

/* Ya no achicamos agresivamente textos largos. */
.matrix-axis-inner-long {
  font-size: 8.2px !important;
  line-height: 1.08 !important;
}

.matrix-axis-inner-xlong {
  font-size: 7.8px !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

/* Celda central un poco más legible. */
.matrix-center-x .center-x-label {
  font-size: 9px !important;
  line-height: 1.12 !important;
}

.matrix-center-x .center-x-label strong {
  font-size: 10px !important;
}

/* Evita que reglas responsive antiguas vuelvan a reducir tipografías
   o alturas de la matriz principal. */
@media (max-width: 1200px) {
  .matrix-table td.initiative-name .matrix-cell-inner,
  .matrix-table td.indicator-name .matrix-cell-inner {
    font-size: 9px !important;
  }
  .matrix-axis-inner { font-size: 8.1px !important; }
  .matrix-axis-inner-long { font-size: 7.8px !important; }
  .matrix-axis-inner-xlong { font-size: 7.4px !important; }
}



/* ===============================================================
   20. MATRIZ X V16 - AJUSTE EXACTO SEGUN ORIENTACION
   =============================================================== */
:root { --mx-axis-h: 300px; }

.matrix-table {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important;
}

.matrix-initiatives-scroll,
.matrix-fixed-bottom { overflow-x: hidden !important; }

/* Iniciativas e indicadores: alto individual según su texto horizontal. */
.matrix-table tr:not(.matrix-axis-row),
.matrix-table tr:not(.matrix-axis-row) > td {
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.matrix-table tr:not(.matrix-axis-row) .matrix-cell-inner {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px 5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  font-size: 10.5px !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Los puntos no agregan espacio: solo se centran. */
.matrix-table td.relation-cell,
.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Objetivos, métricas y responsables SIEMPRE verticales. */
.matrix-axis-row,
.matrix-axis-row > td,
.matrix-axis-row td.matrix-axis-header,
.matrix-axis-row td.matrix-center-cell,
.matrix-center-x {
  height: var(--mx-axis-h) !important;
  min-height: var(--mx-axis-h) !important;
  max-height: var(--mx-axis-h) !important;
}

.matrix-axis-row td.matrix-axis-header {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.matrix-axis-inner,
.matrix-axis-inner-long,
.matrix-axis-inner-xlong,
.matrix-axis-inner-vertical {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--mx-axis-h) - 22px) !important;
  height: calc(var(--mx-col-w, 30px) - 4px) !important;
  margin: 0 !important;
  padding: 1px 3px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  writing-mode: horizontal-tb !important;
}

.matrix-center-x .center-x-label {
  font-size: 10px !important;
  line-height: 1.15 !important;
}
.matrix-center-x .center-x-label strong { font-size: 11px !important; }

@media (max-width: 1200px), (max-height: 850px) {
  .matrix-axis-row,
  .matrix-axis-row > td,
  .matrix-axis-row td.matrix-axis-header,
  .matrix-axis-row td.matrix-center-cell,
  .matrix-center-x {
    height: var(--mx-axis-h) !important;
    min-height: var(--mx-axis-h) !important;
    max-height: var(--mx-axis-h) !important;
  }
  .matrix-axis-inner,
  .matrix-axis-inner-long,
  .matrix-axis-inner-xlong,
  .matrix-axis-inner-vertical { font-size: 10px !important; }
  .matrix-table td.initiative-name .matrix-cell-inner,
  .matrix-table td.indicator-name .matrix-cell-inner { font-size: 10.5px !important; }
}


/* ===============================================================
   21. MATRIZ X V17 - EQUILIBRIO DE LEGIBILIDAD Y ESPACIO
   =============================================================== */

.matrix-layout,
.matrix-initiatives-scroll,
.matrix-fixed-bottom {
  width: 100% !important;
  max-width: 100% !important;
}

.matrix-table.matrix-table-fit {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 10.8px !important;
}

/* Filas horizontales: compactas, pero nunca aplastadas */
.matrix-table tr:not(.matrix-axis-row) > td {
  min-height: 38px !important;
  padding: 5px 6px !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.matrix-table tr:not(.matrix-axis-row) .matrix-cell-inner {
  min-height: 28px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.22 !important;
}

.matrix-table td.initiative-name .matrix-cell-inner,
.matrix-table td.indicator-name .matrix-cell-inner {
  font-size: 11.2px !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  overflow-wrap: anywhere !important;
}

/* Fila central: objetivos, métricas y responsables continúan verticales */
.matrix-axis-row,
.matrix-axis-row > td {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
}

.matrix-axis-header {
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.matrix-axis-inner-vertical {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  transform-origin: center center !important;
  width: 270px !important;
  max-width: 270px !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1.18 !important;
  font-size: 10.4px !important;
  font-weight: 650 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.matrix-axis-header {
  position: relative !important;
}

.matrix-axis-inner-long {
  font-size: 10px !important;
}

.matrix-axis-inner-xlong {
  font-size: 9.6px !important;
}

/* Relación: símbolo exactamente centrado */
.matrix-table td.relation-cell,
.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.matrix-table td.relation-cell .matrix-cell-inner,
.matrix-table td.relation-cell .matrix-relation-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* La X central conserva su geometría */
.matrix-center-cell,
.matrix-center-x {
  height: 300px !important;
  min-height: 300px !important;
}

@media (max-width: 1200px) {
  .matrix-table.matrix-table-fit { font-size: 10px !important; }
  .matrix-table td.initiative-name .matrix-cell-inner,
  .matrix-table td.indicator-name .matrix-cell-inner { font-size: 10.5px !important; }
  .matrix-axis-inner-vertical { font-size: 9.8px !important; }
}



/* ===============================================================
   22. MATRIZ X V18 - RECONSTRUCCION COMPLETA CON CSS GRID
   =============================================================== */
.mxg-shell {
  width: 100%;
  background: #fff;
  border: 1px solid #d8e3ea;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(22, 55, 75, .06);
}

.mxg-title {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background: #082d70;
  color: #66e6ff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
}

.mxg-section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  background: #f8fbfd;
  border-bottom: 1px solid #dbe5eb;
  color: #17384c;
  font-size: 10px;
  letter-spacing: .55px;
}

.mxg-section-head span {
  color: #6d8391;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: right;
}

.mxg-initiatives-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  scrollbar-width: thin;
}

.mxg-fixed-bottom {
  overflow: hidden;
  border-top: 3px solid #0b789c;
  background: #fff;
}

.mxg-grid-block {
  width: var(--mxg-width);
  max-width: 100%;
  margin: 0 auto;
}

.mxg-row {
  display: grid;
  width: 100%;
  align-items: stretch;
}

.mxg-cell {
  min-width: 0;
  box-sizing: border-box;
  border-right: 1px solid #d7e2e9;
  border-bottom: 1px solid #d7e2e9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.mxg-row .mxg-cell:first-child {
  border-left: 1px solid #d7e2e9;
}

.mxg-cell:hover {
  outline: 2px solid #1ba5c9;
  outline-offset: -2px;
  z-index: 2;
}

/* Iniciativas e indicadores: el alto lo determina NATURALMENTE el texto. */
.mxg-initiative-row,
.mxg-indicator-row {
  min-height: 34px;
}

.mxg-initiative-row .mxg-cell,
.mxg-indicator-row .mxg-cell {
  min-height: 34px;
}

.mxg-horizontal-text {
  width: 100%;
  padding: 7px 9px;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.18;
  font-size: 11.4px;
  text-align: center;
}

.mxg-initiative-name .mxg-horizontal-text,
.mxg-indicator-name .mxg-horizontal-text {
  font-weight: 700;
}

/* Puntos de relacion siempre en el centro geometrico. */
.mxg-relation-cell {
  padding: 0;
}

.mxg-point {
  width: 100%;
  height: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

/* Fila central: unica fila deliberadamente alta. */
.mxg-axis-row,
.mxg-axis-row .mxg-cell,
.mxg-center-cell,
.mxg-center-cell .matrix-center-x {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
}

.mxg-axis-cell {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/*
 * El texto sigue siendo VERTICAL.
 * Se rota un bloque horizontal cuyo ancho usa la altura de la fila.
 * El ancho de la columna fue calculado en JS según las líneas necesarias.
 */
.mxg-axis-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.14;
  font-size: 10.5px;
  font-weight: 650;
}

.mxg-axis-text span {
  display: block;
  width: 100%;
  text-align: center;
}

.mxg-center-cell {
  padding: 0;
  background: #fff !important;
}

.mxg-center-cell .matrix-center-x {
  width: 100%;
  box-sizing: border-box;
}

.mxg-center-cell .center-x-label {
  font-size: 10.5px !important;
  line-height: 1.12 !important;
}

.mxg-center-cell .center-x-label strong {
  font-size: 12.5px !important;
}

@media (max-height: 850px) {
  .mxg-initiatives-scroll { max-height: 245px; }
  .mxg-axis-row,
  .mxg-axis-row .mxg-cell,
  .mxg-center-cell,
  .mxg-center-cell .matrix-center-x {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
  }
}



/* ===============================================================
   23. MATRIZ X V19 - GRID AISLADO Y ALINEADO
   =============================================================== */
.mx19-shell {
  width: 100%;
  background: #fff;
  border: 1px solid #d7e2e9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(22,55,75,.06);
}

.mx19-title {
  min-height: 44px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #082d70;
  color: #66e6ff;
  font-size: 16px;
  font-weight: 850;
  text-align: center;
  letter-spacing: .2px;
}

.mx19-head {
  min-height: 34px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fbfd;
  border-bottom: 1px solid #dbe5eb;
  font-size: 10px;
  letter-spacing: .45px;
}

.mx19-head span {
  color: #6d8391;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}

.mx19-initiatives-scroll {
  max-height: 310px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: #fff;
}

.mx19-fixed {
  width: 100%;
  overflow: hidden;
  border-top: 3px solid #0b789c;
  background: #fff;
}

.mx19-block {
  width: 100%;
  min-width: 0;
}

.mx19-row {
  width: 100%;
  display: grid;
  grid-template-columns: var(--mx19-cols);
  align-items: stretch;
}

.mx19-cell {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border-right: 1px solid #d7e2e9;
  border-bottom: 1px solid #d7e2e9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.mx19-row .mx19-cell:first-child { border-left: 1px solid #d7e2e9; }
.mx19-cell:hover { outline: 2px solid #1ba5c9; outline-offset: -2px; z-index: 2; }

/* Iniciativas e indicadores: el ALTO nace del texto horizontal real. */
.mx19-initiative-row,
.mx19-indicator-row {
  min-height: 36px;
}

.mx19-initiative-row .mx19-cell,
.mx19-indicator-row .mx19-cell {
  min-height: 36px;
}

.mx19-horizontal {
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
}

.mx19-name .mx19-horizontal {
  font-size: 11.3px;
  font-weight: 750;
  padding-left: 10px;
  padding-right: 10px;
}

/* Relaciones: exactamente centradas en la celda que resulte. */
.mx19-relation { padding: 0; }
.mx19-point {
  width: 100%;
  height: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

/* Única fila con altura fija: la fila del cruce central. */
.mx19-axis-row,
.mx19-axis-row .mx19-cell,
.mx19-center-cell,
.mx19-center-cell .matrix-center-x {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
}

/* Objetivos / métricas / responsables SIEMPRE VERTICALES. */
.mx19-axis-cell {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.mx19-vertical {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 274px;
  max-width: 274px;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: 10.2px;
  line-height: 1.13;
  font-weight: 650;
  padding: 1px 4px;
  box-sizing: border-box;
}

.mx19-vertical span {
  display: block;
  width: 100%;
  text-align: center;
}

.mx19-center-cell {
  padding: 0;
  background: #fff !important;
}
.mx19-center-cell .matrix-center-x { width: 100%; box-sizing: border-box; }
.mx19-center-cell .center-x-label { font-size: 10.5px !important; line-height: 1.12 !important; }
.mx19-center-cell .center-x-label strong { font-size: 12.5px !important; }

/* Nada de responsive que cambie la geometría o la orientación. */
@media (max-height: 850px) {
  .mx19-initiatives-scroll { max-height: 250px; }
}



/* ===============================================================
   24. MATRIZ X V20 - AJUSTE FINAL DE ALINEACIÓN Y SEPARADORES
   =============================================================== */

/* Todas las celdas quedan sin relleno de color. */
.mx19-cell,
.mx19-name,
.mx19-relation,
.mx19-axis-cell,
.mx19-center-cell {
  background: #ffffff !important;
}

/*
   La misma definición de grid gobierna los tres bloques. Con esto,
   la columna central de iniciativas, la X y los indicadores coincide
   exactamente de borde a borde.
*/
.mx19-block,
.mx19-row {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mx19-row {
  grid-template-columns: var(--mx19-cols) !important;
  column-gap: 0 !important;
}

/* El contenido central no introduce ancho adicional. */
.mx19-name,
.mx19-center-cell {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.mx19-name .mx19-horizontal,
.mx19-center-cell .matrix-center-x {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/*
   División indicadores | responsables. Se aplica a TODAS las filas,
   incluida iniciativas, fila central e indicadores inferiores.
*/
.mx19-responsible-start {
  border-left: 4px solid #476273 !important;
}

/* Evita que el borde normal de la celda anterior "duplique" visualmente
   el separador grueso. */
.mx19-cell:has(+ .mx19-responsible-start) {
  border-right-color: transparent !important;
}



/* ===============================================================
   25. MATRIZ X V21 - ALINEACIÓN EXACTA ENTRE BLOQUE SUPERIOR E INFERIOR
   =============================================================== */

/*
   La barra de scroll de iniciativas consume ancho real.
   Scripts.html mide ese ancho y lo guarda aquí. El bloque fijo reserva
   exactamente el mismo espacio, por lo que las columnas quedan alineadas.
*/
.mx19-fixed {
  padding-right: var(--mx19-scrollbar-width, 0px) !important;
  box-sizing: border-box !important;
}

.mx19-fixed > .mx19-block,
.mx19-initiatives-scroll > .mx19-block {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fondos neutros de manera definitiva. */
.mx19-cell,
.mx19-name,
.mx19-relation,
.mx19-axis-cell,
.mx19-center-cell,
.mx19-vertical,
.mx19-horizontal,
.mx19-point {
  background: #ffffff !important;
}

/* Separador de responsables, continuo en toda la matriz. */
.mx19-responsible-start {
  border-left: 4px solid #334f61 !important;
}


/* ===============================================================
   26. MATRIZ X V22 - CORTES VERTICALES BLOQUEADOS EN PÍXELES
   =============================================================== */
/*
   Scripts.html toma el bloque superior como referencia y aplica exactamente
   sus 21 anchos reales al bloque fijo. El padding solo representa el ancho
   físico del scrollbar; ya no interviene ningún porcentaje en la alineación.
*/
.mx19-fixed {
  padding-right: var(--mx19-scrollbar-width, 0px) !important;
  box-sizing: border-box !important;
}

.mx19-initiatives-scroll > .mx19-block,
.mx19-fixed > .mx19-block {
  margin: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto;
}

.mx19-row {
  column-gap: 0 !important;
}


/* ===============================================================
   27. V23 - IDENTIDAD INSTITUCIONAL + GESTIÓN DE ENTIDADES
   =============================================================== */
.brand-logo-slot {
  overflow: hidden;
  background: #fff;
}
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
  box-sizing: border-box;
}
.loading-logo.brand-logo-slot { border-radius: 50%; }
.brand-mark.brand-logo-slot { background: #fff; }
.matrix-toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.btn.secondary {
  background:#eef6fa;
  border:1px solid #c9dce6;
  color:#123b50;
}
.btn.secondary:hover { background:#e3f1f7; }

/* Objetivos, métricas y responsables con la misma familia/tamaño visual
   de iniciativas, manteniendo su orientación vertical. */
.mx19-vertical {
  font-family: inherit !important;
  font-size: 11.3px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

/* Botones destructivos en modales con espacio suficiente. */
.modal-actions .btn.danger { margin-right:auto; }

/* ===============================================================
   28. V24 - LOGO INSTITUCIONAL MÁS GRANDE
   =============================================================== */

/* Login */
.login-card > .brand-mark.brand-logo-slot {
  width: 96px !important;
  height: 96px !important;
  border-radius: 24px !important;
  margin: 0 auto 18px !important;
}

/* Menú lateral */
.sidebar .brand-mark.small.brand-logo-slot {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 16px !important;
}

/* Pantalla de carga */
.loading-orbit {
  width: 92px !important;
  height: 92px !important;
}

.loading-logo.brand-logo-slot {
  width: 68px !important;
  height: 68px !important;
}

/* Aprovecha mejor el área del recuadro sin deformar el logo */
.brand-logo-img {
  padding: 2px !important;
  object-fit: contain !important;
}



/* ===============================================================
   28. GANTT - ESTILO SICAD / FICHAS DE CARACTERIZACIÓN
   =============================================================== */
.gantt-card {
  padding:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #d9e7ec;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(21,72,95,.08);
}

.gantt-wrap {
  width:100%;
  overflow:auto;
  max-height:calc(100vh - 245px);
  min-height:390px;
  scrollbar-width:thin;
  scrollbar-color:#7eafc1 #edf4f7;
  background:#f7fafb;
}
.gantt-wrap::-webkit-scrollbar { width:11px; height:11px; }
.gantt-wrap::-webkit-scrollbar-track { background:#edf4f7; }
.gantt-wrap::-webkit-scrollbar-thumb {
  background:#7eafc1;
  border-radius:999px;
  border:2px solid #edf4f7;
}

.gantt-shell { width:max-content; min-width:100%; }

.gantt-table {
  --g-name:310px;
  --g-date:124px;
  --g-owner:210px;
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  table-layout:fixed;
  font-size:12px;
  background:#fff;
}

.gantt-table th,
.gantt-table td {
  box-sizing:border-box;
  height:52px;
  border-right:1px solid #e0eaee;
  border-bottom:1px solid #e0eaee;
  padding:7px 8px;
  vertical-align:middle;
}

.gantt-table thead th {
  position:sticky;
  top:0;
  z-index:20;
  height:52px;
  background:linear-gradient(180deg,#0b6f91 0%,#075d7a 100%);
  color:#fff;
  font-weight:800;
  text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}

.gantt-table .sticky1 { position:sticky; left:0; width:var(--g-name); min-width:var(--g-name); max-width:var(--g-name); z-index:12; }
.gantt-table .sticky2 { position:sticky; left:var(--g-name); width:var(--g-date); min-width:var(--g-date); max-width:var(--g-date); z-index:12; }
.gantt-table .sticky3 { position:sticky; left:calc(var(--g-name) + var(--g-date)); width:var(--g-date); min-width:var(--g-date); max-width:var(--g-date); z-index:12; }
.gantt-table .sticky4 { position:sticky; left:calc(var(--g-name) + (var(--g-date) * 2)); width:var(--g-owner); min-width:var(--g-owner); max-width:var(--g-owner); z-index:12; }

.gantt-table thead .sticky1,
.gantt-table thead .sticky2,
.gantt-table thead .sticky3,
.gantt-table thead .sticky4 {
  z-index:31;
  background:linear-gradient(180deg,#075c7a 0%,#034b65 100%);
}

.gantt-table tbody .sticky1,
.gantt-table tbody .sticky2,
.gantt-table tbody .sticky3,
.gantt-table tbody .sticky4 { background:#fff; }
.gantt-table tbody tr.is-alt td { background:#fbfdfe; }
.gantt-table tbody tr.is-alt .sticky1,
.gantt-table tbody tr.is-alt .sticky2,
.gantt-table tbody tr.is-alt .sticky3,
.gantt-table tbody tr.is-alt .sticky4 { background:#fbfdfe; }
.gantt-table tbody tr:hover td { background:#f3fafc; }
.gantt-table tbody tr:hover .sticky1,
.gantt-table tbody tr:hover .sticky2,
.gantt-table tbody tr:hover .sticky3,
.gantt-table tbody tr:hover .sticky4 { background:#f3fafc; }

.gantt-owner-divider {
  border-right:4px solid #0b6f91 !important;
  box-shadow:5px 0 9px rgba(11,111,145,.09);
}

.gantt-project-name {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#243940;
  line-height:1.25;
}
.gantt-project-marker {
  flex:0 0 5px;
  width:5px;
  height:32px;
  border-radius:999px;
  background:linear-gradient(180deg,#1bafde 0%,#075d7a 100%);
}
.gantt-project-text {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.gantt-fixed-cell { padding:6px !important; }
.project-input {
  width:100%;
  min-width:0;
  height:36px;
  border:1px solid #c8dce4;
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
  color:#253b44;
  font:inherit;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.project-input:focus {
  outline:none;
  border-color:#1bafde;
  box-shadow:0 0 0 3px rgba(27,175,222,.13);
  background:#fff;
}
.project-input:disabled { background:#f2f5f6; color:#66777f; }

.gantt-month-head {
  min-width:98px;
  width:98px;
  max-width:98px;
  white-space:nowrap;
  text-transform:capitalize;
}
.gantt-month-name { display:block; }
.gantt-month-head.is-current-month {
  background:linear-gradient(180deg,#159cc6 0%,#0b789b 100%) !important;
  box-shadow:inset 0 -4px 0 #a7e3f5;
}

.month-cell {
  min-width:98px;
  width:98px;
  max-width:98px;
  text-align:center;
  padding:7px 6px !important;
  background:#fff;
}
.month-active { cursor:pointer; }
.month-active:hover .gantt-status-bar {
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(42,88,106,.13);
}
.month-outside {
  background:#f7fafb !important;
  cursor:default !important;
  color:transparent !important;
}
.month-outside::after { content:''; }
.month-cell.is-current-month { box-shadow:inset 2px 0 0 rgba(27,175,222,.32),inset -2px 0 0 rgba(27,175,222,.32); }

.gantt-status-bar {
  min-height:34px;
  border-radius:9px;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 7px;
  font-size:11px;
  font-weight:750;
  line-height:1.05;
  transition:transform .12s,box-shadow .12s,filter .12s;
}
.gantt-status-dot,
.gantt-status-option-dot {
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:currentColor;
}

.status-NO_INICIADO { background:#edf3f5 !important; color:#687d86 !important; border-color:#d8e3e7 !important; }
.status-EN_PROCESO { background:#dff4fb !important; color:#08779d !important; border-color:#b6e4f3 !important; }
.status-FINALIZADO { background:#def1e5 !important; color:#26734c !important; border-color:#bfe1cc !important; }
.status-ATRASADO { background:#f9dede !important; color:#a53b3b !important; border-color:#efbebe !important; }

/* Selector flotante de estado */
.gantt-status-picker {
  position:fixed;
  z-index:99999;
  width:224px;
  padding:13px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d8e5ea;
  box-shadow:0 18px 45px rgba(20,68,88,.22);
  animation:ganttPickerIn .14s ease-out;
}
@keyframes ganttPickerIn {
  from { opacity:0; transform:translateY(-4px) scale(.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.gantt-status-picker-title { font-size:13px; font-weight:800; color:#173c4b; }
.gantt-status-picker-subtitle { margin-top:2px; margin-bottom:10px; font-size:11px; color:#71858d; text-transform:capitalize; }
.gantt-status-options { display:grid; gap:7px; }
.gantt-status-option {
  width:100%;
  min-height:38px;
  border-radius:10px;
  border:1px solid transparent;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.gantt-status-option:hover { filter:brightness(.975); transform:translateY(-1px); }
.gantt-status-option.is-selected { box-shadow:0 0 0 2px rgba(11,111,145,.16); }
.gantt-status-check { margin-left:auto; font-size:14px; font-weight:900; }

/* Leyenda acorde al Gantt */
.legend .ns { background:#9badb5; }
.legend .ip { background:#1bafde; }
.legend .ok { background:#30a46c; }
.legend .late { background:#d9534f; }

@media (max-width:1100px) {
  .gantt-table { --g-name:260px; --g-date:116px; --g-owner:180px; }
  .gantt-month-head,.month-cell { min-width:92px; width:92px; max-width:92px; }
}


/* ===============================================================
   30. V30 — REDISEÑO VISUAL GLOBAL / PORTAL PROFESIONAL
   Mantiene intacta la geometría funcional de Matriz X.
   =============================================================== */
:root {
  --ink:#102f43;
  --ink-strong:#08283b;
  --muted:#647785;
  --muted-2:#8999a4;
  --line:#dbe6ec;
  --line-strong:#c8d8e1;
  --bg:#f3f7f9;
  --surface:#ffffff;
  --surface-soft:#f8fbfc;
  --primary:#087da5;
  --primary-strong:#055f80;
  --primary-deep:#07364d;
  --primary2:#20afd0;
  --cyan-soft:#e9f8fc;
  --green:#258a5b;
  --green-soft:#e7f6ee;
  --yellow:#c58a17;
  --yellow-soft:#fff6dc;
  --red:#c64b47;
  --red-soft:#fdeceb;
  --gray:#7e909b;
  --white:#fff;
  --radius-sm:9px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 8px rgba(9,49,69,.055);
  --shadow:0 10px 30px rgba(9,49,69,.075);
  --shadow-lg:0 24px 60px rgba(5,38,55,.16);
}

html { background:var(--bg); }
body {
  font-family:"Segoe UI Variable Text","Aptos","Segoe UI",Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 90% 0%, rgba(32,175,208,.055), transparent 30%),
    var(--bg);
  color:var(--ink);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection { background:rgba(32,175,208,.22); color:var(--ink-strong); }

/* ---------- App shell ---------- */
.app { grid-template-columns:264px minmax(0,1fr); background:transparent; }
.sidebar {
  background:linear-gradient(180deg,#082f43 0%,#062839 55%,#052535 100%);
  padding:20px 14px 18px;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:8px 0 30px rgba(4,31,45,.08);
  z-index:40;
}
.brand {
  gap:13px;
  padding:2px 7px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.brand > div:last-child { min-width:0; }
.brand b { display:block; font-size:14px; line-height:1.15; letter-spacing:.01em; color:#fff; }
.brand span { font-size:10.5px; line-height:1.25; color:#9fc0cf; opacity:1; max-width:145px; }
.sidebar .brand-mark.small.brand-logo-slot {
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.sidebar nav { gap:5px; }
.nav {
  min-height:44px;
  position:relative;
  border-radius:11px;
  padding:11px 13px;
  color:#c7dbe4;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.005em;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.nav::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:transparent;
}
.nav:hover { background:rgba(255,255,255,.065); color:#fff; transform:translateX(1px); }
.nav.active {
  background:linear-gradient(90deg,rgba(32,175,208,.20),rgba(255,255,255,.07));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(139,221,239,.08);
}
.nav.active::before { background:#44c7e5; }
.sidebar-footer {
  padding:16px 8px 2px;
  border-top:1px solid rgba(255,255,255,.09);
}
#userName { color:#fff; font-weight:700; font-size:13px; }
#userRole {
  display:inline-flex;
  margin:6px 0 12px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(32,175,208,.13);
  color:#9ee6f5;
  opacity:1;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
}
.link { color:#8fdcf0; font-size:12px; font-weight:650; }
.link:hover { color:#fff; }

/* ---------- Main header ---------- */
.main-content { padding:0 28px 42px; }
.app-header {
  height:92px;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(243,247,249,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(200,216,225,.72);
  margin:0 -28px 24px;
  padding:0 28px;
}
.app-header h2 { font-size:25px; letter-spacing:-.025em; color:var(--ink-strong); font-weight:760; }
.app-header p { margin-top:5px; font-size:12.5px; color:var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  min-height:40px;
  padding:9px 14px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12.5px;
  font-weight:720;
  letter-spacing:.005em;
  box-shadow:none;
}
.btn.primary {
  background:linear-gradient(135deg,#087da5,#159fc2);
  border:1px solid #08799f;
  box-shadow:0 5px 14px rgba(8,125,165,.16);
}
.btn.primary:hover:not(:disabled) { box-shadow:0 8px 20px rgba(8,125,165,.23); }
.btn.secondary {
  background:#eef7fa;
  border:1px solid #cce1e9;
  color:#0b627f;
}
.btn.secondary:hover:not(:disabled) { background:#e3f3f8; border-color:#b7d8e4; }
.btn.ghost {
  background:rgba(255,255,255,.92);
  border:1px solid var(--line-strong);
  color:#294655;
  box-shadow:var(--shadow-sm);
}
.btn.ghost:hover:not(:disabled) { background:#fff; border-color:#adc7d4; }
.btn.danger { background:var(--red-soft); border:1px solid #f3cac8; color:#a83e3a; }
.btn-icon { font-size:14px; line-height:1; }

/* ---------- Cards / toolbar ---------- */
.card {
  border:1px solid #dde7ec;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 26px rgba(18,62,82,.055);
  padding:20px;
  margin-bottom:20px;
}
.card-head { margin-bottom:16px; }
.card-head h3 { font-size:15px; color:var(--ink-strong); font-weight:760; letter-spacing:-.01em; }
.card-head p { font-size:11.5px; color:var(--muted); }
.toolbar {
  min-height:54px;
  padding:8px 10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.76);
  border-radius:13px;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.toolbar .hint { margin-left:auto; padding:0 7px; color:#70838f; }
.toolbar label { color:#405d6b; font-size:11.5px; }
.toolbar input[type="month"] { width:auto; min-width:160px; }

/* ---------- Dashboard ---------- */
.kpi-grid { gap:16px; margin-bottom:20px; }
.kpi {
  position:relative;
  min-height:142px;
  padding:18px 19px 17px;
  border:1px solid #dde8ed;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(12,54,74,.055);
  background:linear-gradient(180deg,#fff,#fbfdfe);
}
.kpi::after {
  content:"";
  position:absolute;
  width:86px;
  height:86px;
  right:-28px;
  top:-28px;
  border-radius:50%;
  background:rgba(32,175,208,.06);
}
.kpi-head { display:flex; align-items:center; gap:9px; position:relative; z-index:1; }
.kpi-icon {
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--cyan-soft);
  color:var(--primary);
  font-size:15px;
  font-weight:900;
}
.kpi .label { font-size:11.5px; font-weight:700; color:#5e7480; }
.kpi .value { font-size:31px; line-height:1; margin-top:17px; font-weight:780; color:#0a344a; letter-spacing:-.035em; }
.kpi .sub { margin-top:10px; font-size:11px; color:#7b8d97; }
.two-col { gap:20px; }
.donut-wrap { min-height:195px; justify-content:center; }
.donut { width:146px; height:146px; box-shadow:inset 0 0 0 1px rgba(12,54,74,.04); }
.donut:after { width:96px; height:96px; }
.donut-center { font-size:22px; color:#10384c; }
.chart-legend { gap:9px; color:#4f6875; }
.chart-legend span { padding:4px 0; }
.chart-legend .dot { width:9px; height:9px; }

/* ---------- Forms ---------- */
.login-card input,.modal input,.modal select,.modal textarea,.toolbar input,.project-input {
  border:1px solid #cbdbe3;
  background:#fff;
  color:#193948;
  border-radius:10px;
  min-height:42px;
  padding:9px 11px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.login-card input:hover,.modal input:hover,.modal select:hover,.modal textarea:hover,.toolbar input:hover,.project-input:hover { border-color:#aec8d5; }
.login-card input:focus,.modal input:focus,.modal select:focus,.modal textarea:focus,.toolbar input:focus,.project-input:focus {
  border-color:#1da2c5;
  box-shadow:0 0 0 3px rgba(32,175,208,.13);
}
.field label { color:#385461; font-size:11.5px; font-weight:720; margin-bottom:6px; }

/* ---------- Login ---------- */
.login-page {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(45,189,219,.18),transparent 26%),
    radial-gradient(circle at 82% 78%,rgba(9,101,137,.24),transparent 30%),
    linear-gradient(135deg,#062c40 0%,#0a4661 52%,#0b5874 100%);
}
.login-page::before,.login-page::after {
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.login-page::before { width:540px; height:540px; left:-180px; bottom:-250px; }
.login-page::after { width:380px; height:380px; right:-130px; top:-170px; }
.portal-login-card {
  width:min(430px,92vw);
  padding:34px 36px 30px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 30px 80px rgba(2,26,39,.30);
  position:relative;
  z-index:2;
}
.portal-login-card::before { height:4px; background:linear-gradient(90deg,#0c86ad,#46c5df); }
.login-card > .brand-mark.brand-logo-slot {
  width:112px !important;
  height:112px !important;
  border-radius:24px !important;
  margin:0 auto 17px !important;
  border:1px solid #dde8ed;
  box-shadow:0 10px 28px rgba(13,73,96,.10);
}
.login-eyebrow {
  width:max-content;
  margin:0 auto 8px;
  padding:4px 9px;
  border-radius:999px;
  background:#eef8fb;
  color:#087b9f;
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.portal-login-card h1 { text-align:center; font-size:26px; letter-spacing:-.03em; color:#0d3448; margin:8px 0 4px; }
.login-subtitle { text-align:center; font-size:12px; margin-bottom:25px !important; }
.portal-login-card label { margin:14px 0 6px; color:#375563; font-size:11.5px; }
.portal-login-card input { height:46px; }
.portal-login-card .btn.full { height:47px; margin-top:18px; font-size:13px; }
.login-help { background:#f5f9fb; border:1px solid #e4edf1; color:#738691; }

/* ---------- Toast ---------- */
.toast,#toast {
  right:22px;
  bottom:auto;
  top:20px;
  width:min(390px,calc(100vw - 32px));
  min-height:70px;
  padding:13px 15px;
  border-radius:14px;
  background:#fff;
  color:#284654;
  border:1px solid #dce7ec;
  box-shadow:0 18px 46px rgba(6,41,59,.18);
  display:grid;
  grid-template-columns:36px 1fr;
  gap:11px;
  align-items:center;
  transform:translateY(-12px);
}
#toast.show { transform:none; }
.toast-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-weight:900;
  background:#edf7fa;
  color:#087da5;
}
.toast-copy { display:grid; gap:2px; min-width:0; }
.toast-copy strong { color:#173a4b; font-size:12.5px; }
.toast-copy span { color:#637984; font-size:11.5px; line-height:1.35; }
#toast.success .toast-icon { background:var(--green-soft); color:var(--green); }
#toast.error .toast-icon { background:var(--red-soft); color:var(--red); }
#toast.warning .toast-icon { background:var(--yellow-soft); color:var(--yellow); }

/* ---------- Loading ---------- */
.overlay { background:rgba(5,29,42,.48); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.loading-card {
  width:min(400px,92vw);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 80px rgba(3,25,37,.32);
  padding:28px 30px 24px;
}
.loading-card h3 { font-size:17px; }
.loading-card p { font-size:11.5px; color:#6c808b; }
.loading-bar { height:4px; border-radius:999px; overflow:hidden; background:#e8f1f4; }
.loading-bar i { background:linear-gradient(90deg,#087da5,#28bad8,#087da5); }

/* ---------- Modal ---------- */
.modal-backdrop { background:rgba(5,28,41,.53); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal {
  width:min(610px,calc(100vw - 34px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 30px 80px rgba(3,28,41,.28);
}
.modal-head { padding:18px 20px; background:linear-gradient(180deg,#fff,#fbfdfe); }
.modal-heading { gap:12px; }
.modal-icon {
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#edf8fb;
  color:#087da5;
  font-weight:900;
}
.modal-head h3 { font-size:15px; color:#173a4b; }
#modalSubtitle { margin:3px 0 0; font-size:10.5px; color:#718590; }
.modal-close {
  width:34px;
  height:34px;
  border-radius:9px !important;
  color:#718590;
  display:grid;
  place-items:center;
}
.modal-close:hover { background:#eef4f6 !important; color:#244957; }
.modal #modalBody { padding:20px 22px; gap:14px; }
.modal-actions { padding:14px 20px 18px; background:#fbfdfe; }

/* ---------- Tables ---------- */
.data-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #dce7ec;
  border-radius:12px;
  overflow:hidden;
  font-size:12px;
}
.data-table thead th {
  background:#f2f7f9;
  color:#3d5967;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  padding:11px 12px;
  border-bottom:1px solid #d8e4e9;
  text-align:left;
}
.data-table td { padding:10px 12px; color:#36515e; border-bottom:1px solid #e5edf1; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover td { background:#f8fbfc; }
.badge { padding:5px 9px; font-size:10.5px; letter-spacing:.01em; border:1px solid transparent; }
.badge.ok { background:var(--green-soft); color:#24734c; border-color:#cce9da; }
.badge.bad { background:var(--red-soft); color:#a8423e; border-color:#f1d0ce; }
.badge.pending { background:#f0f4f6; color:#6e808a; border-color:#dde6ea; }

/* ---------- Matrix: visual polish only, geometry untouched ---------- */
.matrix-card { padding:0; overflow:hidden; border-radius:16px; }
.matrix-wrap { background:#fff; }
.mxg-shell { border-radius:0; }
.mxg-title {
  background:linear-gradient(90deg,#073a55,#075e7b);
  color:#93e7f6;
  letter-spacing:.025em;
  font-weight:850;
}
.mxg-section-head { background:#f6fafb; color:#355360; }
.mxg-section-head strong { letter-spacing:.04em; font-size:10.5px; }
.mxg-cell { border-color:#dce6eb !important; }
.mxg-relation-cell:hover { background:#f1fafc !important; }
.mxg-point { color:#066f95; }

/* ---------- Gantt: executive refinement, dimensions/scroll preserved ---------- */
.gantt-card { border-radius:16px; box-shadow:0 8px 28px rgba(12,54,74,.065); }
.gantt-wrap { background:#f5f9fa; scrollbar-color:#77a9bb #e8f0f3; }
.gantt-table { font-size:11.5px; color:#35525f; }
.gantt-table thead th {
  background:linear-gradient(180deg,#075f7e,#064c68);
  height:50px;
  font-size:10.5px;
  letter-spacing:.02em;
}
.gantt-table thead .sticky1,.gantt-table thead .sticky2,.gantt-table thead .sticky3,.gantt-table thead .sticky4 {
  background:linear-gradient(180deg,#064f6b,#043d55);
}
.gantt-project-marker { background:linear-gradient(180deg,#28bad8,#087da5); }
.gantt-project-name { font-size:11.5px; color:#294957; }
.gantt-status-bar { border-radius:8px; font-size:10.5px; }
.gantt-status-picker { border-radius:14px; box-shadow:0 20px 50px rgba(7,47,65,.21); }
.legend {
  padding:0 5px;
  gap:12px;
  color:#586f7b;
  font-size:11px;
}
.legend span { padding:4px 7px; border-radius:999px; background:#fff; border:1px solid #e0e9ed; }

/* ---------- Users/indicators ---------- */
#indicatorTable,#usersTable { overflow:auto; border-radius:12px; }
.result-input { width:112px; }
.comment-input { width:240px; }

/* ---------- Responsive ---------- */
@media(max-width:1100px) {
  .app { grid-template-columns:82px minmax(0,1fr); }
  .sidebar { padding:16px 8px; }
  .sidebar .brand { justify-content:center; padding:0 0 16px; }
  .sidebar .brand > div:last-child,.nav span,.sidebar-footer #userName,.sidebar-footer #userRole { display:none !important; }
  .sidebar .brand-mark.small.brand-logo-slot { width:52px !important; height:52px !important; min-width:52px !important; }
  .nav { justify-content:center; padding:12px 8px; font-size:16px; }
  .nav::before { display:none; }
  .main-content { padding:0 18px 34px; }
  .app-header { margin:0 -18px 20px; padding:0 18px; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .app { grid-template-columns:68px minmax(0,1fr); }
  .main-content { padding:0 10px 28px; }
  .app-header { margin:0 -10px 16px; padding:0 10px; height:78px; }
  .app-header h2 { font-size:20px; }
  .app-header p { display:none; }
  .kpi-grid { grid-template-columns:1fr; }
  .two-col { grid-template-columns:1fr; }
  .toolbar { align-items:flex-start; }
  .toolbar .hint { width:100%; margin-left:0; }
  .portal-login-card { padding:28px 24px 24px; }
}


/* ===============================================================
   31. V31 - DASHBOARD, INDICADORES Y TOAST COMPACTO
   =============================================================== */

/* Notificación realmente compacta. Se fuerza para neutralizar reglas históricas. */
#toast.toast {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 245px !important;
  max-width: min(360px, calc(100vw - 36px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: auto !important;
  gap: 9px !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(6,41,59,.17) !important;
}
#toast.toast .toast-icon {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}
#toast.toast .toast-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
}
#toast.toast .toast-copy strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
#toast.toast .toast-copy span {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
@media (max-width: 520px) {
  #toast.toast {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Reporte de indicadores simplificado. */
.indicator-report-table .meta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 9px;
  background: #eef7fa;
  border: 1px solid #d4e8ef;
  color: #0d607d;
  font-weight: 800;
  white-space: nowrap;
}
.indicator-report-table th:nth-child(1) { width: 28%; }
.indicator-report-table th:nth-child(2) { width: 10%; }
.indicator-report-table th:nth-child(3) { width: 12%; }
.indicator-report-table th:nth-child(4) { width: 11%; }
.indicator-report-table th:nth-child(5) { width: 25%; }
.indicator-report-table th:nth-child(6) { width: 14%; }

/* ================================================================
   V33 - DASHBOARD EJECUTIVO
   ================================================================ */
.dashboard-filter-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  margin-bottom:18px;
  border:1px solid #d9e7ee;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fcfe 0%,#eef9fc 45%,#f7f5ff 100%);
  box-shadow:0 10px 28px rgba(10,52,74,.06);
}
.dashboard-filter-eyebrow,.chart-kicker {
  display:block;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  font-weight:900;
  color:#0f8db5;
  margin-bottom:7px;
}
.dashboard-filter-bar h3 { margin:0 0 5px; font-size:18px; color:#10384c; }
.dashboard-filter-bar p { margin:0; font-size:11.5px; color:#6f828e; }
.dashboard-month-control {
  min-width:210px;
  padding:11px 13px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d7e5ec;
  box-shadow:0 6px 18px rgba(10,52,74,.05);
}
.dashboard-month-control label { display:block; margin-bottom:6px; font-size:10.5px; font-weight:800; color:#526d7a; }
.dashboard-month-control input { width:100%; height:38px; border-radius:10px; border:1px solid #c8dce6; padding:0 10px; font:inherit; color:#183f52; background:#fff; }

.kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpi { min-height:148px; border:0; color:#fff; box-shadow:0 12px 28px rgba(19,71,94,.13); }
.kpi::after { width:120px; height:120px; right:-34px; top:-38px; background:rgba(255,255,255,.11); }
.kpi::before { content:""; position:absolute; width:78px; height:78px; right:26px; bottom:-44px; border-radius:50%; background:rgba(255,255,255,.07); }
.kpi-blue { background:linear-gradient(135deg,#0b6f9d,#1499c4); }
.kpi-teal { background:linear-gradient(135deg,#087f83,#12aaa7); }
.kpi-violet { background:linear-gradient(135deg,#5d55aa,#8178d6); }
.kpi-green { background:linear-gradient(135deg,#168156,#22ad70); }
.kpi .label,.kpi .sub,.kpi .value { color:#fff !important; position:relative; z-index:1; }
.kpi .label { opacity:.88; }
.kpi .sub { opacity:.78; }
.kpi-icon { background:rgba(255,255,255,.17); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }

.dashboard-grid { display:grid; gap:20px; margin-bottom:20px; }
.dashboard-grid-top { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-grid-wide { grid-template-columns:1.15fr .85fr; }
.dashboard-card { min-width:0; overflow:hidden; }
.dashboard-card.project-card { background:linear-gradient(180deg,#fff,#f8fcfe); border-top:4px solid #159ac6; }
.dashboard-card.indicator-card { background:linear-gradient(180deg,#fff,#f9fcfa); border-top:4px solid #21a76c; }
.dashboard-card .card-head { display:flex; align-items:flex-start; justify-content:space-between; }
.dashboard-card .card-head h3 { font-size:16px; }
.dashboard-card .donut-wrap { padding:2px 0 4px; }

.trend-chart { min-height:250px; width:100%; }
.trend-svg { width:100%; height:250px; overflow:visible; }
.trend-grid { stroke:#e2edf2; stroke-width:1; vector-effect:non-scaling-stroke; }
.trend-y-label,.trend-x-label { fill:#718691; font-size:10px; font-family:inherit; }
.trend-line { fill:none; stroke:#159fc9; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.trend-dot { fill:#fff; stroke:#118eb6; stroke-width:3; vector-effect:non-scaling-stroke; }
.chart-empty { min-height:190px; display:grid; place-items:center; text-align:center; color:#84949d; font-size:12px; background:#f8fbfc; border:1px dashed #d7e6ec; border-radius:14px; }

.achievement-chart { display:flex; flex-direction:column; gap:11px; }
.achievement-row { display:grid; grid-template-columns:minmax(140px,1.2fr) minmax(140px,2fr) 48px; align-items:center; gap:10px; }
.achievement-label { font-size:10.5px; font-weight:700; color:#405b68; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.achievement-track { position:relative; height:11px; border-radius:999px; background:#edf3f6; overflow:visible; }
.achievement-fill { height:100%; border-radius:999px; transition:width .25s ease; }
.achievement-fill.ok { background:linear-gradient(90deg,#21a76c,#48c987); }
.achievement-fill.warn { background:linear-gradient(90deg,#f0ad35,#f7c95f); }
.achievement-fill.bad { background:linear-gradient(90deg,#df5959,#ef7777); }
.achievement-target { position:absolute; top:-4px; bottom:-4px; width:2px; background:#264d5f; opacity:.55; }
.achievement-value { font-size:11px; font-weight:900; text-align:right; }
.achievement-value.ok { color:#18845a; }.achievement-value.warn { color:#aa7718; }.achievement-value.bad { color:#bd4444; }
.achievement-note { margin-top:5px; padding:8px 10px; border-radius:10px; background:#f6fafb; color:#748792; font-size:9.8px; line-height:1.35; }

.gap-card { border-left:4px solid #ec6a5f; }
.gap-list { display:grid; gap:9px; }
.gap-item { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 13px; border:1px solid #e2ebef; border-radius:13px; background:linear-gradient(90deg,#fff,#fcfefe); }
.gap-rank { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:#fff0ee; color:#c44a43; font-size:11px; font-weight:900; }
.gap-main { min-width:0; }
.gap-main b { display:block; font-size:11px; color:#244858; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gap-main span { display:block; margin-top:3px; font-size:9.8px; color:#788a94; }
.gap-value { text-align:right; min-width:76px; }
.gap-value small { display:block; font-size:9px; color:#8b9aa2; text-transform:uppercase; letter-spacing:.06em; }
.gap-value strong { display:block; margin-top:2px; font-size:13px; color:#c74b45; }
.gap-success { padding:18px; border-radius:13px; background:#eefaf4; color:#18734f; border:1px solid #d5eee1; font-weight:800; text-align:center; }

@media (max-width:1100px){
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-grid-wide { grid-template-columns:1fr; }
}
@media (max-width:760px){
  .dashboard-filter-bar { align-items:stretch; flex-direction:column; }
  .dashboard-month-control { min-width:0; }
  .dashboard-grid-top { grid-template-columns:1fr; }
  .achievement-row { grid-template-columns:minmax(100px,1fr) minmax(100px,1.5fr) 42px; }
}



/* ===============================================================
   33. V34 — GANTT CON APARIENCIA MÁS CLÁSICA
   =============================================================== */
.gantt-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid #d7e4ea;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(9,53,73,.08);
  overflow:hidden;
}
.gantt-wrap{
  background:#f3f7f9;
  max-height:calc(100vh - 232px);
}
.gantt-shell{min-width:max-content;width:max-content;}
.gantt-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px 14px;
  border-bottom:1px solid #dce7ec;
  background:linear-gradient(180deg,#fafdff,#f3f8fb);
}
.gantt-toolbar-title{
  font-size:15px;
  font-weight:850;
  color:#10384a;
}
.gantt-toolbar-subtitle{
  margin-top:4px;
  font-size:12px;
  color:#68808d;
}
.gantt-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.gantt-legend-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe7ec;
  color:#526a75;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.legend-dot{width:9px;height:9px;border-radius:999px;display:inline-block;}
.legend-dot.ns{background:#9eadb5;}
.legend-dot.ip{background:#29a8d4;}
.legend-dot.ok{background:#30a46c;}
.legend-dot.late{background:#da5a5a;}

.gantt-classic-table{
  --g-name:320px;
  --g-date:126px;
  --g-owner:220px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
  color:#27424f;
}
.gantt-classic-table th,
.gantt-classic-table td{
  height:56px;
  border-right:1px solid #dfe8ed;
  border-bottom:1px solid #dfe8ed;
}
.gantt-classic-table thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg,#0c7598 0%, #075f7d 100%);
  color:#fff;
  font-weight:850;
  padding:8px 8px;
}
.gantt-classic-table thead .sticky1,
.gantt-classic-table thead .sticky2,
.gantt-classic-table thead .sticky3,
.gantt-classic-table thead .sticky4{
  background:linear-gradient(180deg,#0a6888 0%,#05536d 100%);
}
.gantt-classic-table tbody .sticky1,
.gantt-classic-table tbody .sticky2,
.gantt-classic-table tbody .sticky3,
.gantt-classic-table tbody .sticky4{background:#fff;}
.gantt-classic-table tbody tr.is-alt td{background:#fcfeff;}
.gantt-classic-table tbody tr.is-alt .sticky1,
.gantt-classic-table tbody tr.is-alt .sticky2,
.gantt-classic-table tbody tr.is-alt .sticky3,
.gantt-classic-table tbody tr.is-alt .sticky4{background:#fcfeff;}
.gantt-classic-table tbody tr:hover td{background:#f5fbfe;}
.gantt-classic-table tbody tr:hover .sticky1,
.gantt-classic-table tbody tr:hover .sticky2,
.gantt-classic-table tbody tr:hover .sticky3,
.gantt-classic-table tbody tr:hover .sticky4{background:#f5fbfe;}

.gantt-classic-table .sticky1{position:sticky;left:0;width:var(--g-name);min-width:var(--g-name);max-width:var(--g-name);z-index:12;}
.gantt-classic-table .sticky2{position:sticky;left:var(--g-name);width:var(--g-date);min-width:var(--g-date);max-width:var(--g-date);z-index:12;}
.gantt-classic-table .sticky3{position:sticky;left:calc(var(--g-name) + var(--g-date));width:var(--g-date);min-width:var(--g-date);max-width:var(--g-date);z-index:12;}
.gantt-classic-table .sticky4{position:sticky;left:calc(var(--g-name) + (var(--g-date) * 2));width:var(--g-owner);min-width:var(--g-owner);max-width:var(--g-owner);z-index:12;}
.gantt-classic-table .gantt-owner-divider{
  border-right:4px solid #0a8bb2 !important;
  box-shadow:6px 0 14px rgba(10,139,178,.08);
}

.gantt-project-name{padding:0 14px !important;display:flex;align-items:center;gap:10px;}
.gantt-project-marker{width:6px;height:34px;border-radius:999px;background:linear-gradient(180deg,#1bb7e2 0%,#0a799d 100%);}
.gantt-project-text{font-size:12px;font-weight:800;line-height:1.25;color:#173947;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gantt-fixed-cell{padding:7px !important;}
.project-input{height:38px;border-radius:10px;border:1px solid #cadbe3;background:#fff;}
.project-input:focus{border-color:#1fb1dc;box-shadow:0 0 0 3px rgba(31,177,220,.14);}

.gantt-month-head,
.month-cell{min-width:78px;width:78px;max-width:78px;}
.gantt-month-head{text-align:center;}
.gantt-month-abbr{display:block;font-size:12px;font-weight:900;line-height:1;text-transform:capitalize;letter-spacing:.02em;}
.gantt-month-year{display:block;margin-top:3px;font-size:10px;font-weight:700;opacity:.86;}
.gantt-month-head.is-current-month{
  background:linear-gradient(180deg,#16a2ce 0%,#0a86ad 100%) !important;
  box-shadow:inset 0 -4px 0 rgba(201,241,250,.9);
}

.month-cell{
  padding:0 !important;
  text-align:center;
  vertical-align:middle;
  background:#fff;
  position:relative;
}
.month-cell.is-current-month{background:#f6fcff;}
.month-outside{background:#f8fbfd !important;}
.month-outside.is-current-month{background:#eef8fc !important;}
.month-active{cursor:pointer;}
.month-active:hover{background:#f3fbff;}
.month-active::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:1px;
  height:100%;
  background:#e7eef2;
  z-index:0;
}

.gantt-status-bar{
  position:relative;
  z-index:1;
  height:20px;
  margin:0 4px;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 1px rgba(7,53,73,.05);
}
.gantt-status-core{display:none;}
.gantt-status-bar.segment-only{border-radius:999px;}
.gantt-status-bar.segment-start{border-radius:999px 0 0 999px;margin-right:0;}
.gantt-status-bar.segment-mid{border-radius:0;margin-left:0;margin-right:0;}
.gantt-status-bar.segment-end{border-radius:0 999px 999px 0;margin-left:0;}
.gantt-status-bar::after{
  content:'';
  position:absolute;
  right:8px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
  opacity:.95;
}
.gantt-status-bar.segment-mid::after,
.gantt-status-bar.segment-start::after{display:none;}
.status-NO_INICIADO{background:linear-gradient(180deg,#d7e1e6,#c9d5db) !important;border-color:#b8c8cf !important;color:#566770 !important;}
.status-EN_PROCESO{background:linear-gradient(180deg,#48c6ec,#1aabd8) !important;border-color:#1499c7 !important;color:#07536c !important;}
.status-FINALIZADO{background:linear-gradient(180deg,#56c58a,#2ea86a) !important;border-color:#27935d !important;color:#0d5e38 !important;}
.status-ATRASADO{background:linear-gradient(180deg,#f08f8f,#dc6767) !important;border-color:#c85757 !important;color:#7c2222 !important;}

.gantt-status-picker{border-radius:16px;border:1px solid #d9e6eb;box-shadow:0 20px 50px rgba(7,47,65,.22);}
.gantt-status-picker-title{font-size:13px;font-weight:850;color:#183f4d;}
.gantt-status-option{min-height:40px;border-radius:11px;font-weight:800;}
.gantt-status-option-dot{width:10px;height:10px;flex:0 0 10px;}

@media (max-width:1180px){
  .gantt-toolbar{flex-direction:column;align-items:stretch;}
  .gantt-legend{justify-content:flex-start;}
  .gantt-classic-table{--g-name:280px;--g-date:118px;--g-owner:190px;}
  .gantt-month-head,.month-cell{min-width:72px;width:72px;max-width:72px;}
}

/* ===============================================================
   34. V36 — ENCABEZADO DEL GANTT SIEMPRE VISIBLE
   =============================================================== */
.gantt-card{
  overflow:hidden !important;
}

.gantt-wrap{
  overflow:hidden !important;
  max-height:none !important;
  min-height:0 !important;
  background:#fff !important;
}

.gantt-frame{
  width:100%;
  min-width:0;
  background:#fff;
}

.gantt-toolbar{
  position:relative;
  z-index:50;
  width:100%;
  box-sizing:border-box;
  flex:0 0 auto;
}

.gantt-scroll{
  width:100%;
  max-height:calc(100vh - 315px);
  min-height:360px;
  overflow:auto;
  background:#f3f7f9;
  scrollbar-width:thin;
  scrollbar-color:#7eafc1 #edf4f7;
}

.gantt-scroll::-webkit-scrollbar{
  width:11px;
  height:11px;
}
.gantt-scroll::-webkit-scrollbar-track{
  background:#edf4f7;
}
.gantt-scroll::-webkit-scrollbar-thumb{
  background:#7eafc1;
  border-radius:999px;
  border:2px solid #edf4f7;
}

/* El encabezado de meses queda fijo dentro del área desplazable. */
.gantt-scroll .gantt-table thead th{
  position:sticky;
  top:0;
  z-index:30;
}
.gantt-scroll .gantt-table thead .sticky1,
.gantt-scroll .gantt-table thead .sticky2,
.gantt-scroll .gantt-table thead .sticky3,
.gantt-scroll .gantt-table thead .sticky4{
  z-index:45;
}

@media (max-width:1180px){
  .gantt-scroll{
    max-height:calc(100vh - 350px);
  }
}



/* ===============================================================
   38. DASHBOARD — DISTINCIÓN PROYECTOS / INDICADORES
   =============================================================== */
.dashboard-section{
  position:relative;
  margin:22px 0 26px;
  padding:18px;
  border-radius:18px;
  border:1px solid #dfe9ee;
  overflow:hidden;
}
.dashboard-section-projects{
  background:linear-gradient(180deg,#f4fbff 0%,#ffffff 34%);
  box-shadow:inset 5px 0 0 #1bafde,0 8px 26px rgba(8,71,98,.05);
}
.dashboard-section-indicators{
  background:linear-gradient(180deg,#f8f7ff 0%,#ffffff 30%);
  box-shadow:inset 5px 0 0 #7a67d8,0 8px 26px rgba(74,57,142,.05);
}
.dashboard-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(118,145,157,.18);
}
.dashboard-section-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.09em;
  color:#48636f;
}
.dashboard-section-projects .dashboard-section-kicker{color:#0a83ad;}
.dashboard-section-indicators .dashboard-section-kicker{color:#6857c4;}
.dashboard-section-head h3{margin:6px 0 4px;font-size:18px;color:#12384a;}
.dashboard-section-head p{margin:0;font-size:11.5px;color:#70838d;}
.dashboard-grid-single{grid-template-columns:minmax(0,1fr);}
.dashboard-kpis-projects,.dashboard-kpis-indicators{margin-bottom:18px;}

.kpi-amber{background:linear-gradient(135deg,#fff7e6,#ffe5a6) !important;border-color:#f0c768 !important;}
.kpi-rose{background:linear-gradient(135deg,#fff1f3,#ffd7dd) !important;border-color:#f2a6b2 !important;}
.kpi-blue{background:linear-gradient(135deg,#edf9ff,#cceeff) !important;border-color:#a7dbf0 !important;}
.kpi-teal{background:linear-gradient(135deg,#e9fbf9,#c7eee9) !important;border-color:#9ddbd4 !important;}
.kpi-violet{background:linear-gradient(135deg,#f3efff,#ded4ff) !important;border-color:#c3b3ef !important;}
.kpi-green{background:linear-gradient(135deg,#edf9f2,#caedd7) !important;border-color:#a8dcba !important;}

.colorful-card{position:relative;isolation:isolate;}
.colorful-card::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;height:4px;
  z-index:1;
}
.project-status-card::before{background:linear-gradient(90deg,#0d8fbc,#36c7e8);}
.indicator-status-card::before{background:linear-gradient(90deg,#29a76d,#78d49d);}
.trend-card::before{background:linear-gradient(90deg,#7763d8,#a995f1);}
.achievement-card::before{background:linear-gradient(90deg,#e2a024,#f2ca5b);}
.gaps-card::before{background:linear-gradient(90deg,#df5d6f,#f18e9d);}
.indicator-lines-card::before{background:linear-gradient(90deg,#0e91bb,#6958c8,#2ea56d);}

.project-status-card{background:linear-gradient(180deg,#ffffff,#f1fbff);}
.indicator-status-card{background:linear-gradient(180deg,#ffffff,#f2fbf6);}
.trend-card{background:linear-gradient(180deg,#ffffff,#f6f4ff);}
.achievement-card{background:linear-gradient(180deg,#ffffff,#fffaf0);}
.gaps-card{background:linear-gradient(180deg,#ffffff,#fff5f6);}
.indicator-lines-card{background:linear-gradient(180deg,#ffffff,#f8fbfd);}

.colorful-donut .donut{
  box-shadow:0 10px 28px rgba(26,91,116,.10),inset 0 0 0 1px rgba(255,255,255,.55);
}
.trend-line{stroke:#6f5bd4 !important;stroke-width:4 !important;}
.trend-dot{fill:#fff !important;stroke:#6f5bd4 !important;stroke-width:3 !important;}
.achievement-fill.ok{background:linear-gradient(90deg,#31ad71,#62cf94) !important;}
.achievement-fill.warn{background:linear-gradient(90deg,#e1a125,#f0c24d) !important;}
.achievement-fill.bad{background:linear-gradient(90deg,#df6170,#ef8793) !important;}

/* Gráficas individuales por indicador */
.indicator-lines-head{margin-bottom:14px;}
.indicator-line-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.indicator-line-card{
  min-width:0;
  padding:13px 13px 10px;
  border-radius:14px;
  border:1px solid #dce7ec;
  background:#fff;
  box-shadow:0 5px 16px rgba(17,62,83,.045);
}
.indicator-line-card:nth-child(4n+1){border-top:3px solid #159dc9;}
.indicator-line-card:nth-child(4n+2){border-top:3px solid #765fd0;}
.indicator-line-card:nth-child(4n+3){border-top:3px solid #2aa66b;}
.indicator-line-card:nth-child(4n+4){border-top:3px solid #e2a125;}
.indicator-line-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  min-height:40px;
  margin-bottom:6px;
}
.indicator-line-title{
  min-width:0;
  font-size:11.5px;
  line-height:1.25;
  font-weight:850;
  color:#173b4a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.indicator-line-legend{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  font-size:9.5px;
  color:#6c7f89;
  white-space:nowrap;
}
.indicator-line-legend span{display:inline-flex;align-items:center;gap:4px;}
.indicator-line-legend i{width:13px;height:3px;border-radius:999px;display:inline-block;}
.result-key i{background:#169bc8;}
.target-key i{background:#e09b24;}
.indicator-line-chart{height:190px;width:100%;}
.indicator-line-chart svg{width:100%;height:100%;overflow:visible;}
.indicator-mini-grid{stroke:#e5ecef;stroke-width:1;}
.indicator-mini-y,.indicator-mini-x{fill:#7c8c95;font-size:9px;font-weight:650;}
.indicator-result-line{fill:none;stroke:#169bc8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.indicator-target-line{fill:none;stroke:#e09b24;stroke-width:2.3;stroke-dasharray:7 5;stroke-linecap:round;stroke-linejoin:round;}
.indicator-result-dot{fill:#fff;stroke:#169bc8;stroke-width:2.4;}
.indicator-target-dot{fill:#fff8e7;stroke:#e09b24;stroke-width:2;}
.indicator-lines-empty{grid-column:1/-1;}

@media(max-width:1100px){
  .indicator-line-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .dashboard-section{padding:13px;}
  .indicator-line-card-head{flex-direction:column;}
}



/* ===============================================================
   39. V39 — CONTRASTE KPI + LÍNEAS DE INDICADORES
   =============================================================== */
/* Tarjetas con fondos más intensos para que el texto blanco tenga contraste real. */
.kpi-amber{background:linear-gradient(135deg,#b86a05 0%,#e39a18 100%) !important;border-color:#c98512 !important;}
.kpi-rose{background:linear-gradient(135deg,#b34056 0%,#dc6679 100%) !important;border-color:#c95165 !important;}
.kpi-blue{background:linear-gradient(135deg,#086a99 0%,#1099c7 100%) !important;border-color:#0d85ae !important;}
.kpi-teal{background:linear-gradient(135deg,#08736f 0%,#12a69d 100%) !important;border-color:#0b8e87 !important;}
.kpi-violet{background:linear-gradient(135deg,#5143a4 0%,#7867d2 100%) !important;border-color:#6555bc !important;}
.kpi-green{background:linear-gradient(135deg,#13734a 0%,#24aa6a 100%) !important;border-color:#198b58 !important;}
.kpi .label,.kpi .sub,.kpi .value{color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.16);}
.kpi .label{opacity:.98 !important;}
.kpi .sub{opacity:.91 !important;}
.kpi-icon{background:rgba(255,255,255,.2) !important;border:1px solid rgba(255,255,255,.24);}

/* Meta continua y limpia; resultado con marcadores solo donde existe dato. */
.indicator-target-line{
  fill:none;
  stroke:#e09b24;
  stroke-width:2.5;
  stroke-dasharray:none !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.indicator-result-line{
  fill:none;
  stroke:#159bc8;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.indicator-result-dot{fill:#fff;stroke:#159bc8;stroke-width:2.5;}
.indicator-target-dot{display:none !important;}
.indicator-mini-x{font-size:8.6px;font-weight:750;}
.indicator-line-chart{height:205px;overflow-x:auto;overflow-y:hidden;}



/* ===============================================================
   40. V40 — GRÁFICAS META VS. RESULTADO MÁS COMPACTAS
   =============================================================== */
.indicator-line-card{
  padding:14px 15px 12px;
  border:1px solid #dce7ec;
  border-top:1px solid #dce7ec !important;
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 14px rgba(19,58,76,.045);
}
.indicator-line-card-head{
  min-height:auto;
  margin-bottom:8px;
  align-items:center;
}
.indicator-line-title{
  font-size:12px;
  color:#173b4a;
}
.indicator-line-legend{
  gap:10px;
  font-size:9.5px;
}
.indicator-line-legend i{
  width:15px;
  height:2px;
}
.result-key i{background:#128fb9 !important;}
.target-key i{background:#6f67b8 !important;}
.indicator-line-chart{
  height:190px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  display:flex;
  justify-content:flex-start;
  scrollbar-width:thin;
}
.indicator-line-chart svg{
  height:190px;
  width:auto;
  min-width:0;
  max-width:none;
  flex:0 0 auto;
  overflow:visible;
}
.indicator-mini-grid{
  stroke:#e7edf0;
  stroke-width:1;
}
.indicator-mini-y{
  fill:#7c8b94;
  font-size:9px;
  font-weight:650;
}
.indicator-mini-x{
  fill:#667983;
  font-size:9px;
  font-weight:750;
}
.indicator-target-line{
  fill:none;
  stroke:#6f67b8 !important;
  stroke-width:2.4;
  stroke-dasharray:none !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.indicator-result-line{
  fill:none;
  stroke:#128fb9 !important;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* V40: sin marcadores visibles; el resultado aparece únicamente como línea
   a medida que se reportan meses consecutivos. */
.indicator-result-dot,
.indicator-target-dot{display:none !important;}



/* ===============================================================
   41. V41 — FILTRO ANUAL + GRÁFICAS A TODO EL ANCHO
   =============================================================== */
.dashboard-filter-controls{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap:wrap;
}
.dashboard-year-control{
  min-width:150px;
  padding:11px 13px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d7e5ec;
  box-shadow:0 6px 18px rgba(10,52,74,.05);
}
.dashboard-year-control label{
  display:block;
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:800;
  color:#526d7a;
}
.dashboard-year-control select{
  width:100%;
  height:38px;
  border-radius:10px;
  border:1px solid #c8dce6;
  padding:0 10px;
  font:inherit;
  font-weight:700;
  color:#183f52;
  background:#fff;
}

.indicator-line-chart{
  width:100%;
  height:auto;
  min-height:205px;
  overflow:visible;
  display:block;
}
.indicator-line-chart svg{
  display:block;
  width:100%;
  height:auto;
  min-width:100%;
  max-width:100%;
  overflow:visible;
}
.indicator-result-dot{
  display:block !important;
  fill:#fff !important;
  stroke:#128fb9 !important;
  stroke-width:2.5 !important;
}
.indicator-target-dot{display:none !important;}
.indicator-target-line{
  stroke:#6f67b8 !important;
  stroke-width:2.4 !important;
  stroke-dasharray:none !important;
}
.indicator-result-line{
  stroke:#128fb9 !important;
  stroke-width:3 !important;
}
.indicator-mini-x{
  font-size:8.4px !important;
  font-weight:750 !important;
}
@media(max-width:720px){
  .dashboard-filter-controls{width:100%;}
  .dashboard-month-control,.dashboard-year-control{min-width:0;flex:1 1 150px;}
}



/* ===============================================================
   42. GANTT — BUSCADOR Y FILTROS POR MES/AÑO
   =============================================================== */
.gantt-filter-toolbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:12px 14px;
  border:1px solid #dbe7ec;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(12,54,74,.045);
}
.gantt-filter-group{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:150px;
}
.gantt-filter-group label{
  font-size:11px;
  font-weight:800;
  color:#486470;
  letter-spacing:.01em;
}
.gantt-filter-group input{
  height:38px;
  border:1px solid #cbdde5;
  border-radius:10px;
  padding:0 10px;
  background:#fff;
  color:#173b49;
  font:inherit;
  font-size:12px;
  box-sizing:border-box;
}
.gantt-filter-group input:focus{
  outline:none;
  border-color:#1bafde;
  box-shadow:0 0 0 3px rgba(27,175,222,.12);
}
.gantt-search-group{min-width:280px;flex:1 1 300px;max-width:440px;}
.gantt-search-wrap{position:relative;}
.gantt-search-wrap input{width:100%;padding-left:34px;}
.gantt-search-icon{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  color:#6f8792;
  font-size:15px;
  pointer-events:none;
}
.gantt-clear-filters{height:38px;white-space:nowrap;}
.gantt-filter-count{
  margin-left:auto;
  align-self:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef7fa;
  color:#386271;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.gantt-empty-cell{
  height:180px !important;
  background:#fbfdfe !important;
  border-bottom:0 !important;
}
.gantt-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#70858f;
  text-align:center;
}
.gantt-empty-state strong{color:#294b59;font-size:13px;}
.gantt-empty-state span{font-size:11px;}
@media (max-width:900px){
  .gantt-search-group{max-width:none;min-width:100%;flex-basis:100%;}
  .gantt-filter-group{flex:1 1 160px;}
  .gantt-clear-filters{flex:1 1 160px;}
  .gantt-filter-count{margin-left:0;}
}


/* ===============================================================
   DISEÑO UNIFICADO — lectura, jerarquía y cronograma adaptable
   Esta capa conserva los selectores y la lógica del sistema original.
   =============================================================== */
:root {
  --primary:#02597e; --primary2:#087ca1; --ink:#20394c; --muted:#687d8d;
  --line:#e1e8ee; --bg:#f3f6fa; --shadow:0 4px 18px rgba(27,51,73,.04);
}
.portal-refined { background:var(--bg); color:var(--ink); font-family:'Segoe UI',Arial,sans-serif; font-size:14px; }
.portal-refined .app { grid-template-columns:232px minmax(0,1fr); }
.portal-refined .sidebar { background:#092e44; padding:28px 16px 20px; box-shadow:none; }
.portal-refined .brand { align-items:flex-start; padding:0 2px 26px; gap:11px; margin-bottom:24px; }
.portal-refined .brand b { font-size:13px; font-weight:650; line-height:1.45; letter-spacing:0; }
.portal-refined .brand span { color:#a7c1d0; font-size:10px; line-height:1.5; margin-top:8px; }
.portal-refined .sidebar .brand-mark.small.brand-logo-slot { width:44px !important; height:44px !important; min-width:44px !important; border-radius:12px !important; box-shadow:none; }
.sidebar-caption { font-size:9px; letter-spacing:.13em; color:#8daabb; margin:0 10px 12px; font-weight:700; }
.portal-refined .nav { min-height:46px; border-radius:9px; padding:11px 12px; gap:12px; color:#b6cbd8; font-size:13px; }
.portal-refined .nav:hover { background:#153e54; transform:none; }
.portal-refined .nav.active { background:#194b65; box-shadow:none; color:white; }
.portal-refined .nav.active::before { background:#64c9e8; width:3px; left:-16px; top:12px; bottom:12px; }
.nav-icon { width:19px; height:19px; flex:0 0 19px; }
.portal-refined .sidebar-footer { padding:20px 8px 0; }
.portal-refined #userName { font-size:12px; line-height:1.5; }
.portal-refined #userRole { background:#183f54; color:#b9dce9; letter-spacing:.06em; font-size:9px; }
.portal-refined .main-content { padding:0 28px 32px; }
.portal-refined .app-header { margin:0 0 24px; padding:24px 0 19px; height:auto; min-height:108px; background:none; border-bottom:1px solid #dfe7ee; box-shadow:none; border-radius:0; gap:16px; }
.page-eyebrow,.section-eyebrow { font-size:9px; font-weight:750; letter-spacing:.14em; color:#648296; }
.page-eyebrow { margin-bottom:7px; }
.portal-refined .app-header h2 { font-size:25px; font-weight:700; letter-spacing:-.025em; color:#16374e; }
.portal-refined .app-header p { margin-top:6px; font-size:12px; color:#748697; }
.portal-refined .btn { border-radius:8px; padding:10px 14px; font-size:12px; min-height:38px; font-weight:650; box-shadow:none; transition:background .15s,box-shadow .15s; }
.portal-refined .btn:hover { transform:none; box-shadow:0 3px 10px #173d5010; }
.portal-refined .btn.primary { background:#02597e; color:#fff; border:1px solid #02597e; }
.portal-refined .btn.primary:hover { background:#034c6b; }
.portal-refined .btn.secondary,.portal-refined .btn.ghost { background:#fff; color:#38556a; border:1px solid #d8e2ea; }
.portal-refined .btn.secondary:hover,.portal-refined .btn.ghost:hover { background:#f4f8fb; }
.portal-refined :is(button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #45a9d0; outline-offset:2px; }
.portal-refined .card { border:1px solid #e0e7ee; box-shadow:var(--shadow); border-radius:12px; background:#fff; }
.portal-refined .toolbar { gap:12px; padding:16px; border:1px solid #e0e7ee; border-radius:12px; background:#fff; box-shadow:none; margin-bottom:18px; }
.portal-refined .toolbar .hint { color:#748697; font-size:11px; line-height:1.6; }
.portal-refined :is(.login-card,.modal) :is(input,select,textarea),.portal-refined .toolbar :is(input,select),.portal-refined .project-input { border:1px solid #dce5ed; border-radius:7px; box-shadow:none; background:#fff; color:#294458; }
.portal-refined input:focus,.portal-refined select:focus,.portal-refined textarea:focus { border-color:#438eae; box-shadow:0 0 0 3px #1683b012; }
.portal-refined .modal { border-radius:16px; box-shadow:0 24px 80px #092f4433; }
.portal-refined .modal-head { background:#f6f9fc; border-bottom:1px solid #e3ebf1; }
.portal-refined .modal-head h3 { font-size:19px; }
.portal-refined .modal-icon { background:#e6f1f7; color:#02597e; }
.portal-refined .data-table { min-width:760px; border-radius:8px; font-size:12px; }
.portal-refined .data-table thead th { background:#f0f5f9; color:#426177; font-size:10px; text-transform:uppercase; letter-spacing:.055em; font-weight:750; padding:14px 12px; border-color:#e2eaf0; }
.portal-refined .data-table td { padding:14px 12px; border-right:0; border-color:#e8eef3; line-height:1.6; }
.portal-refined .data-table td:first-child { min-width:230px; white-space:normal; overflow-wrap:anywhere; }
#indicatorTable,#usersTable { max-width:100%; overflow:auto; }
.portal-refined .badge { border-radius:6px; padding:5px 9px; font-size:10px; white-space:nowrap; }
.portal-refined .badge.ok { background:#e6f5ed; color:#23744f; }
.portal-refined .badge.bad { background:#fcecec; color:#b34343; }
.portal-refined .badge.pending { background:#edf2f6; color:#61788b; }

/* Inicio: superficies limpias, indicadores destacados y color funcional. */
.portal-refined .dashboard-filter-bar { background:#fff; border:1px solid #e0e7ee; border-radius:12px; box-shadow:none; padding:20px 22px; }
.portal-refined .dashboard-filter-bar h3 { font-size:20px; color:#173d54; }
.portal-refined .dashboard-filter-bar p { color:#738699; line-height:1.6; }
.portal-refined .dashboard-section { margin-top:28px; }
.portal-refined .dashboard-section-head { border:0; margin-bottom:16px; padding-left:0; }
.portal-refined .dashboard-section-head h3 { font-size:17px; color:#23485e; }
.portal-refined .dashboard-section-kicker { font-size:9px; letter-spacing:.12em; color:#6c879b; }
.portal-refined .dashboard-section-head p { font-size:12px; color:#778c9c; }
.portal-refined .dashboard-kpis-projects,.portal-refined .dashboard-kpis-indicators { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.portal-refined .kpi { --metric:#02597e; background:#fff !important; border:1px solid #dfe7ee !important; border-top:3px solid var(--metric) !important; border-radius:11px; box-shadow:none; min-height:132px; padding:19px 20px; }
.portal-refined .kpi::before,.portal-refined .kpi::after { display:none; }
.portal-refined .kpi-blue { --metric:#02597e; }
.portal-refined .kpi-teal { --metric:#238b8d; }
.portal-refined .kpi-amber { --metric:#ad7b22; }
.portal-refined .kpi-violet { --metric:#7066b4; }
.portal-refined .kpi-green { --metric:#36865e; }
.portal-refined .kpi-rose { --metric:#b5606a; }
.portal-refined .kpi .label { color:#647c8f !important; opacity:1 !important; text-shadow:none; font-size:11px; }
.portal-refined .kpi .value { color:#1c4158 !important; text-shadow:none; margin-top:14px; font-size:30px; font-weight:700; }
.portal-refined .kpi .sub { color:#758a9a !important; text-shadow:none; opacity:1 !important; font-size:11px; }
.portal-refined .kpi-icon { background:#eef4f8 !important; color:var(--metric); border:0; border-radius:7px; }
.portal-refined .colorful-card { background:#fff; box-shadow:var(--shadow); }
.portal-refined .colorful-card::before { display:none; }
.portal-refined .card-head h3 { font-size:15px; font-weight:650; color:#24485e; }
.portal-refined .card-head p { color:#7a8c9a; font-size:11px; line-height:1.6; }
.portal-refined .chart-kicker { font-size:9px; letter-spacing:.11em; color:#6d899c; }
.portal-refined .dashboard-card { padding:22px; }
.portal-refined .colorful-donut .donut { box-shadow:none; }
.portal-refined .matrix-card { padding:0; }
.portal-refined .mxg-title,.portal-refined .mxv-title { background:#02597e; color:#fff; }
.portal-refined .mxg-section-head { background:#f1f6fa; color:#385e74; }
.portal-refined .mx19-title { background:#02597e; color:#fff; font-weight:650; letter-spacing:.02em; }
.portal-refined .mx19-head { background:#f0f5f9; color:#496d82; }

/* Acceso */
.portal-refined .login-page { background:radial-gradient(ellipse at 20% 30%,#deedf6 0%,transparent 55%),#eef3f8; padding:30px 18px; }
.portal-refined .login-page::before,.portal-refined .login-page::after { display:none; }
.portal-refined .portal-login-card { width:440px; max-width:100%; padding:36px 38px 28px; background:#fff; border:1px solid #dce6ee; box-shadow:0 20px 65px #173d5012; border-radius:18px; }
.portal-refined .portal-login-card::before { background:#02597e; height:5px; }
.portal-refined .portal-login-card h1 { font-size:25px; line-height:1.3; font-weight:700; }
.portal-refined .login-eyebrow { color:#02597e; letter-spacing:.12em; }
.portal-refined .portal-login-card input { font-size:13px; padding:12px; height:46px; }
.portal-refined .portal-login-card input::placeholder { color:#9aabb7; }
.portal-refined .login-help { background:none; border:0; margin-bottom:0; font-size:11px; }

/* Gantt: una sola tabla mantiene alineadas las filas de altura variable. */
.portal-refined .gantt-filter-toolbar { padding:14px 16px; align-items:flex-end; }
.portal-refined .gantt-filter-group label { text-transform:none; letter-spacing:0; font-size:10px; color:#6b8294; font-weight:650; }
.portal-refined .gantt-filter-group input { height:38px; font-size:12px; }
.portal-refined .gantt-filter-count { background:#edf4f9; border:0; border-radius:6px; color:#426981; padding:10px 12px; font-size:11px; }
.portal-refined .gantt-card { padding:0; border-radius:12px; }
.portal-refined .gantt-toolbar { background:#fff; padding:20px 22px 17px; flex-direction:row; align-items:center; border:0; gap:16px; z-index:1; }
.portal-refined .gantt-toolbar-title { font-size:18px; font-weight:650; color:#1b4058; margin:7px 0 0; letter-spacing:-.02em; }
.portal-refined .gantt-toolbar-subtitle { font-size:11px; color:#7b8d9b; margin:7px 0 0; text-transform:capitalize; }
.gantt-view-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.gantt-view-actions .btn { font-size:11px; min-height:34px; padding:8px 10px; white-space:nowrap; }
.gantt-zoom-control { display:flex; align-items:center; gap:6px; font-size:10px; color:#718798; }
.gantt-zoom-control select { border:1px solid #d8e2ea; border-radius:7px; padding:8px 6px; color:#3c5c70; background:#fff; font-size:11px; height:34px; }
.gantt-reading-guide { display:flex; justify-content:space-between; gap:10px; padding:0 22px 16px; align-items:center; flex-wrap:wrap; }
.portal-refined .gantt-legend { justify-content:flex-start; gap:14px; }
.portal-refined .gantt-legend-item { padding:0; border:0; background:transparent; font-size:10px; font-weight:500; color:#6e8190; gap:6px; }
.portal-refined .legend-dot { width:7px; height:7px; border-radius:2px; }
.portal-refined .legend-dot.ns { background:#9aabb7; }
.portal-refined .legend-dot.ip { background:#2086ad; }
.portal-refined .legend-dot.ok { background:#3c9a70; }
.portal-refined .legend-dot.late { background:#d16b6b; }
.gantt-pending-dates { font-size:10px; color:#7a8e9d; }
.gantt-pending-dates.has-pending { color:#9b762c; }
.portal-refined .gantt-scroll { max-height:min(68vh,720px); min-height:240px; background:#fff; scrollbar-color:#a4b9c8 #f0f4f8; border-top:1px solid #e0e8ef; }
.portal-refined .gantt-shell { width:max-content; min-width:100%; }
.portal-refined .gantt-modern-table { --g-name:340px; --g-plan:176px; --g-month:110px; width:max-content; min-width:100%; table-layout:fixed; border-spacing:0; background:white; }
.portal-refined [data-zoom="compact"] .gantt-modern-table { --g-month:94px; }
.gantt-col-name { width:var(--g-name); }
.gantt-col-plan { width:var(--g-plan); }
.gantt-col-month { width:var(--g-month); }
.portal-refined .gantt-modern-table :is(th,td) { height:auto; border-right:1px solid #e7edf2; border-bottom:1px solid #e5ecf2; }
.portal-refined .gantt-modern-table .sticky1 { display:table-cell; position:sticky; left:0; width:var(--g-name); min-width:var(--g-name); max-width:var(--g-name); background:#fff; z-index:12; padding:17px 18px !important; vertical-align:middle; }
.portal-refined .gantt-modern-table .sticky2 { position:sticky; left:var(--g-name); width:var(--g-plan); min-width:var(--g-plan); max-width:var(--g-plan); background:#fff; z-index:12; padding:14px 12px !important; }
.portal-refined .gantt-modern-table .gantt-plan-divider { border-right:2px solid #cbdde9 !important; box-shadow:5px 0 8px #214a6308; }
.portal-refined .gantt-modern-table thead th { color:#58768b; background:#f0f5f9; box-shadow:none; font-weight:650; }
.portal-refined .gantt-modern-table thead :is(.sticky1,.sticky2) { top:0; z-index:45; height:80px; background:#edf3f8; text-align:left; font-size:12px; color:#31566e; }
.portal-refined .gantt-modern-table thead :is(.sticky1,.sticky2) span { display:block; margin-top:6px; font-size:9px; font-weight:400; color:#8295a4; }
.portal-refined .gantt-modern-table .gantt-year-head { position:sticky; top:0; height:28px; padding:5px 12px; text-align:left; font-size:10px; letter-spacing:.06em; color:#6b879a; background:#eaf1f7; border-left:1px solid #d5e1ea; z-index:30; }
.portal-refined .gantt-modern-table .gantt-month-head { top:28px; height:52px; width:var(--g-month); min-width:var(--g-month); max-width:var(--g-month); padding:9px 4px; text-align:center; z-index:30; background:#f4f7fa; }
.portal-refined .gantt-modern-table .gantt-month-abbr { font-size:11px; font-weight:600; line-height:1.3; letter-spacing:0; color:#607c90; }
.portal-refined .gantt-modern-table .gantt-month-head.is-current-month { background:#02597e !important; box-shadow:none; }
.portal-refined .gantt-modern-table .is-current-month .gantt-month-abbr { color:#fff; font-weight:650; }
.gantt-now-label { display:block; margin-top:4px; color:#7f97a9; font-size:7px; letter-spacing:.06em; }
.portal-refined .gantt-modern-table .gantt-row.is-alt td { background:#fbfcfe; }
.portal-refined .gantt-modern-table .gantt-row:hover td { background:#f3f8fc; }
.portal-refined .gantt-modern-table .gantt-project-name { white-space:normal; }
.gantt-project-heading { display:flex; align-items:flex-start; gap:11px; }
.gantt-project-number { flex:0 0 25px; font-size:10px; font-weight:650; color:#90a3b2; margin-top:3px; font-variant-numeric:tabular-nums; }
.portal-refined .gantt-project-text { display:block; -webkit-line-clamp:unset; line-clamp:unset; -webkit-box-orient:initial; white-space:pre-wrap; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:normal; max-height:none; height:auto; font-size:12px; font-weight:650; line-height:1.65; color:#24475f; flex:1; min-width:0; }
.gantt-owner-label { display:block; margin:9px 0 0 36px; }
.gantt-owner-label > span { display:block; color:#92a2ae; font-size:9px; font-weight:400; margin-bottom:1px; }
.portal-refined .gantt-modern-table .gantt-owner-input { display:block; width:100%; min-height:30px; max-height:none; height:auto; line-height:1.5; padding:4px 6px; margin-left:-6px; border:1px solid transparent; background:transparent; color:#5c768a; border-radius:5px; font-size:11px; resize:none; white-space:pre-wrap; overflow:hidden; overflow-wrap:anywhere; }
.portal-refined .gantt-modern-table .gantt-owner-input:hover { border-color:#dce5ed; background:white; }
.portal-refined .gantt-modern-table .gantt-owner-input:focus { border-color:#5399b8; background:white; }
.portal-refined .gantt-modern-table .gantt-owner-input:disabled { opacity:1; cursor:default; background:transparent; border-color:transparent; color:#5c768a; -webkit-text-fill-color:#5c768a; }
.gantt-date-field { display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.gantt-date-field > span { flex:0 0 24px; font-size:9px; color:#8b9da9; }
.portal-refined .gantt-modern-table .gantt-date-input { min-width:0; width:100%; font-size:10px; border:1px solid #e5ecf1; border-radius:5px; padding:4px; height:30px; background:#fff; color:#587488; }
.portal-refined .gantt-modern-table .gantt-date-input:disabled { opacity:1; color:#587488; background:#f8fafc; }
.gantt-plan-note { display:block; margin-left:29px; font-size:8px; color:#94a3af; line-height:1.5; }
.portal-refined .gantt-modern-table .month-cell { width:var(--g-month); min-width:var(--g-month); max-width:var(--g-month); padding:0 !important; position:relative; vertical-align:middle; transition:none; }
.portal-refined .gantt-modern-table .month-cell:hover { filter:none; }
.portal-refined .gantt-modern-table .month-cell.is-current-month { background:#f0f8fc; box-shadow:inset 1px 0 #b7d8e8,inset -1px 0 #b7d8e8; }
.portal-refined .gantt-modern-table .month-outside { background:#fafcfe !important; color:#ccd8e1 !important; }
.portal-refined .gantt-modern-table .month-outside.is-current-month { background:#f0f7fb !important; }
.portal-refined .gantt-modern-table .month-active::before { display:none; }
.portal-refined .gantt-modern-table .month-active:not([role]) { cursor:default; }
.gantt-outside-dash { color:#cedbe4; font-size:14px; font-weight:400; }
.portal-refined .gantt-modern-table .gantt-status-bar { display:flex; justify-content:center; align-items:center; gap:5px; height:30px; min-height:30px; margin:0 1px; padding:4px 5px; border:0; border-top:3px solid transparent; border-radius:0; box-shadow:none; font-size:9px; font-weight:600; line-height:1.2; white-space:nowrap; }
.portal-refined .gantt-modern-table .gantt-status-bar::after { display:none; }
.portal-refined .gantt-modern-table .gantt-status-bar.segment-start { margin-left:8px; border-radius:6px 0 0 6px; }
.portal-refined .gantt-modern-table .gantt-status-bar.segment-end { margin-right:8px; border-radius:0 6px 6px 0; }
.portal-refined .gantt-modern-table .gantt-status-bar.segment-only { margin-left:8px; margin-right:8px; border-radius:6px; }
.portal-refined .gantt-modern-table .month-active:hover .gantt-status-bar { transform:none; box-shadow:0 0 0 2px #02597e20; }
.portal-refined .gantt-modern-table .status-NO_INICIADO,.portal-refined .gantt-status-option.status-NO_INICIADO { background:#eaf0f5 !important; color:#657e91 !important; border-color:#adbdca !important; }
.portal-refined .gantt-modern-table .status-EN_PROCESO,.portal-refined .gantt-status-option.status-EN_PROCESO { background:#e1f0f8 !important; color:#176d94 !important; border-color:#398eb1 !important; }
.portal-refined .gantt-modern-table .status-FINALIZADO,.portal-refined .gantt-status-option.status-FINALIZADO { background:#e4f3ec !important; color:#2d7c58 !important; border-color:#5eaa83 !important; }
.portal-refined .gantt-modern-table .status-ATRASADO,.portal-refined .gantt-status-option.status-ATRASADO { background:#faeaea !important; color:#b44f4f !important; border-color:#d17979 !important; }
.gantt-state-symbol { font-size:11px; font-weight:700; }
.gantt-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:9px; color:#8699a8; padding:12px 18px; border-top:1px solid #e7edf3; line-height:1.6; }
.portal-refined .gantt-card.gantt-expanded { position:fixed; inset:16px; z-index:100; margin:0; display:flex; flex-direction:column; box-shadow:0 0 0 100vmax #0c253b66; }
.gantt-expanded .gantt-wrap,.gantt-expanded .gantt-frame { height:100%; display:flex; flex-direction:column; }
.portal-refined .gantt-expanded .gantt-scroll { flex:1; min-height:0; max-height:none; }
.portal-refined .gantt-expanded .gantt-footer { flex-shrink:0; }
.portal-refined .gantt-empty-cell { text-align:center; }
.portal-refined .gantt-status-picker { border-radius:12px; box-shadow:0 15px 45px #153b5329; }

@media (max-width:1250px) {
  .portal-refined .gantt-toolbar { align-items:flex-start; }
  .gantt-view-actions { max-width:260px; }
  .portal-refined .gantt-modern-table { --g-name:310px; --g-plan:166px; --g-month:104px; }
}
@media (max-width:1100px) {
  .portal-refined .app { grid-template-columns:72px minmax(0,1fr); }
  .portal-refined .sidebar { padding:24px 10px 16px; }
  .sidebar-caption { display:none; }
  .portal-refined .sidebar .brand { padding:0 0 24px; margin-bottom:20px; }
  .portal-refined .sidebar .brand > div:last-child,.portal-refined .nav span { display:none !important; }
  .portal-refined .nav { justify-content:center; padding:12px; }
  .portal-refined .main-content { padding:0 20px 28px; }
  .portal-refined .gantt-modern-table { --g-name:300px; --g-plan:166px; }
}
@media (max-width:760px) {
  .portal-refined .app { display:block; }
  .portal-refined .sidebar { position:relative; top:auto; height:auto; padding:12px 14px; display:flex; flex-direction:row; gap:10px; align-items:center; }
  .portal-refined .sidebar .brand { display:none; }
  .portal-refined .sidebar nav { flex:1; display:flex; gap:4px; justify-content:space-around; }
  .portal-refined .nav { flex:1; min-height:42px; padding:9px; }
  .portal-refined .sidebar-footer { border:0; padding:0; margin:0; }
  .portal-refined .sidebar-footer #userName,.portal-refined .sidebar-footer #userRole { display:none; }
  .portal-refined .sidebar-footer .link { font-size:0; }
  .portal-refined .sidebar-footer .link::after { content:'Salir'; font-size:11px; }
  .portal-refined .main-content { padding:0 12px 20px; }
  .portal-refined .app-header { padding:20px 0 16px; margin:0 0 16px; min-height:90px; }
  .portal-refined .app-header h2 { font-size:21px; }
  .portal-refined .app-header p { display:block; font-size:10px; }
  .portal-refined .app-header .btn { padding:8px 10px; font-size:10px; }
  .page-eyebrow { font-size:8px; }
  .portal-refined .gantt-toolbar { flex-direction:column; padding:16px; }
  .gantt-view-actions { max-width:none; justify-content:flex-start; }
  .portal-refined .gantt-toolbar-title { font-size:16px; }
  .gantt-reading-guide { padding:0 16px 14px; }
  .portal-refined .gantt-legend { gap:10px; }
  .portal-refined .gantt-legend-item { font-size:9px; }
  .portal-refined .gantt-modern-table { --g-name:210px; --g-plan:166px; --g-month:104px; }
  .portal-refined .gantt-modern-table .sticky2 { position:static; }
  .portal-refined .gantt-modern-table thead .sticky2 { position:sticky; left:auto; z-index:30; }
  .portal-refined .gantt-modern-table .sticky1 { padding:14px 12px !important; }
  .gantt-project-heading { gap:7px; }
  .gantt-project-number { flex-basis:18px; font-size:9px; }
  .gantt-owner-label { margin-left:25px; }
  .portal-refined .gantt-project-text { font-size:11px; }
  .portal-refined .gantt-modern-table .gantt-owner-input { font-size:10px; }
  .portal-refined .dashboard-kpis-projects,.portal-refined .dashboard-kpis-indicators { grid-template-columns:1fr; }
  .portal-refined .dashboard-card { padding:18px; }
  .portal-refined .gantt-card.gantt-expanded { inset:6px; }
}
@media (max-width:420px) {
  .portal-refined .gantt-modern-table { --g-name:180px; }
  .portal-refined .gantt-project-text { font-size:10.5px; }
  .portal-refined .portal-login-card { padding:30px 24px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .portal-refined * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.portal-refined .is-current-month .gantt-now-label { color:#b7ddeb; }
.portal-refined .gantt-modern-table .gantt-owner-input { font-weight:400; }


/* Cumplimiento proporcional a la planificación y confirmación de guardado. */
.gantt-project-progress { margin:10px 0 0 36px; }
.gantt-progress-heading { display:flex; justify-content:space-between; font-size:9px; color:#7890a2; margin-bottom:5px; }
.gantt-progress-heading strong { color:#02597e; font-weight:650; }
.gantt-progress-track { height:4px; border-radius:4px; overflow:hidden; background:#e9eff4; }
.gantt-progress-track i { display:block; height:100%; background:#318cab; border-radius:4px; transition:width .2s; }
.gantt-progress-note { display:block; margin-top:4px; font-size:8px; line-height:1.5; color:#8a9eac; font-weight:400; }
.portal-refined .gantt-modern-table .month-cell.is-saving { opacity:.55; cursor:progress; }
.portal-refined .gantt-modern-table tr[aria-busy="true"] .gantt-plan-cell { opacity:.65; }
@media(max-width:760px) { .gantt-project-progress { margin-left:25px; } }

/* Gantt: tipografía legible, estados con contraste y guardado no bloqueante. */
.portal-refined .gantt-toolbar { padding:22px 24px 18px; background:#fff; }
.portal-refined .gantt-toolbar-title { font-size:21px; font-weight:700; margin-top:8px; color:#163b53; }
.portal-refined .gantt-toolbar-subtitle { font-size:12px; color:#5b788c; }
.portal-refined .gantt-toolbar .section-eyebrow { font-size:10px; color:#527b95; }
.portal-refined .gantt-view-actions .btn,.portal-refined .gantt-zoom-control select { font-size:12px; min-height:38px; }
.portal-refined .gantt-zoom-control { font-size:11px; }
.portal-refined .gantt-reading-guide { padding:0 24px 18px; gap:14px; }
.portal-refined .gantt-legend { gap:15px; }
.portal-refined .gantt-legend-item { font-size:12px; color:#4d6b80; gap:7px; }
.portal-refined .legend-dot { width:10px; height:10px; border-radius:3px; }
.portal-refined .legend-dot.ns { background:#a6b6c4; }
.portal-refined .legend-dot.ip { background:#136b97; }
.portal-refined .legend-dot.ok { background:#267b57; }
.portal-refined .legend-dot.late { background:#bc5054; }
.portal-refined .gantt-pending-dates { font-size:11px; color:#657f91; }
.gantt-sync-area { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.gantt-sync-status { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 9px; border-radius:6px; font-size:11px; line-height:1.4; }
.gantt-sync-status.sync-saved { color:#307956; background:#edf6f0; }
.gantt-sync-status.sync-pending { color:#8a641f; background:#fff4dc; }
.gantt-sync-status.sync-error { color:#a53e43; background:#fcebed; }
.gantt-sync-status button { border:0; background:none; padding:0 2px; color:inherit; text-decoration:underline; cursor:pointer; font-size:11px; font-weight:700; }
.sync-indicator-dot { width:6px; height:6px; border-radius:50%; background:#b0842c; }
.portal-refined .gantt-modern-table { --g-name:360px; --g-plan:196px; --g-month:132px; min-width:0; font-size:13px; }
.portal-refined [data-zoom="compact"] .gantt-modern-table { --g-month:114px; }
.portal-refined .gantt-modern-table .sticky1 { padding:18px 20px !important; }
.portal-refined .gantt-modern-table .sticky2 { padding:16px 13px !important; }
.portal-refined .gantt-modern-table thead :is(.sticky1,.sticky2) { background:#123f5b; color:#fff; font-size:14px; height:84px; border-right-color:#2e5870; }
.portal-refined .gantt-modern-table thead :is(.sticky1,.sticky2) span { font-size:10px; color:#bdd4e2; line-height:1.4; margin-top:7px; }
.portal-refined .gantt-modern-table .gantt-year-head { height:28px; background:#dfeaf3; color:#3d657f; font-size:11px; font-weight:700; padding:6px 14px; }
.portal-refined .gantt-modern-table .gantt-month-head { height:56px; background:#eff4f9; border-right-color:#dce6ef; }
.portal-refined .gantt-modern-table .gantt-month-abbr { font-size:14px; color:#375f7a; font-weight:650; }
.portal-refined .gantt-modern-table .gantt-now-label { font-size:9px; color:#658296; letter-spacing:.035em; margin-top:5px; }
.portal-refined .gantt-modern-table .gantt-month-head.is-current-month { background:#08638e !important; }
.portal-refined .gantt-modern-table .is-current-month .gantt-now-label { color:#d1eaf5; }
.portal-refined .gantt-modern-table .gantt-project-text { font-size:14px; line-height:1.55; font-weight:600; color:#1e425a; }
.portal-refined .gantt-project-number { font-size:11px; color:#7893a6; padding-top:1px; }
.portal-refined .gantt-owner-label { margin-top:10px; }
.portal-refined .gantt-owner-label > span { font-size:10px; color:#6a8599; }
.portal-refined .gantt-modern-table .gantt-owner-input { font-size:12px; line-height:1.5; color:#4d6f86; padding:4px 6px; }
.portal-refined .gantt-date-field > span { font-size:10px; color:#628095; flex-basis:27px; }
.portal-refined .gantt-modern-table .gantt-date-input { font-size:12px; height:34px; padding:5px; color:#3a617a; border-color:#d9e5ee; background:#fbfdff; }
.portal-refined .gantt-plan-note { font-size:10px; line-height:1.5; color:#6e8799; margin:9px 0 0 32px; }
.portal-refined .gantt-project-progress { margin-top:12px; }
.portal-refined .gantt-progress-heading { font-size:11px; color:#5a788e; margin-bottom:6px; }
.portal-refined .gantt-progress-heading strong { font-size:12px; color:#0f628d; }
.portal-refined .gantt-progress-track { height:5px; background:#e5edf4; }
.portal-refined .gantt-progress-track i { background:#217ca4; transition:none; }
.portal-refined .gantt-progress-note { font-size:10px; color:#6d8799; margin-top:6px; }
.portal-refined .gantt-modern-table .gantt-row.is-alt td { background:#f7fafd; }
.portal-refined .gantt-modern-table .gantt-row:hover td { background:#eef5fa; }
.portal-refined .gantt-modern-table .month-outside { background:#f5f8fb !important; }
.portal-refined .gantt-modern-table .month-cell.is-current-month { background:#eaf5fc; box-shadow:inset 1px 0 #a4cfe4,inset -1px 0 #a4cfe4; }
.portal-refined .gantt-modern-table .month-outside.is-current-month { background:#eaf5fc !important; }
.portal-refined .gantt-modern-table .gantt-status-bar { min-height:38px; height:38px; padding:7px 6px; margin:0 5px; gap:6px; border:1px solid transparent; border-radius:7px; font-size:12px; font-weight:600; line-height:1.2; box-shadow:0 2px 3px #1b405309; }
.portal-refined .gantt-modern-table .gantt-status-bar:is(.segment-start,.segment-mid,.segment-end,.segment-only) { margin:0 5px; border-radius:7px; }
.portal-refined .gantt-modern-table .status-NO_INICIADO { background:#e5edf3 !important; color:#4f697e !important; border-color:#c6d5e1 !important; }
.portal-refined .gantt-modern-table .status-EN_PROCESO { background:#136b97 !important; color:#fff !important; border-color:#0e608b !important; }
.portal-refined .gantt-modern-table .status-FINALIZADO { background:#267b57 !important; color:#fff !important; border-color:#1d6d4b !important; }
.portal-refined .gantt-modern-table .status-ATRASADO { background:#bc5054 !important; color:#fff !important; border-color:#ab4449 !important; }
.portal-refined .gantt-modern-table .month-active:hover .gantt-status-bar { box-shadow:0 0 0 3px #468cb52b; }
.portal-refined .gantt-state-symbol { font-size:13px; }
.portal-refined .gantt-modern-table .month-cell.is-sync-pending .gantt-status-bar { outline:2px dashed #b68936; outline-offset:2px; }
.portal-refined .gantt-modern-table .month-cell.is-sync-pending { cursor:pointer; }
.portal-refined [data-zoom="compact"] .gantt-status-bar { font-size:11px; padding:7px 4px; gap:4px; }
.portal-refined .gantt-footer { font-size:11px; color:#648196; padding:13px 20px; }
.portal-refined .gantt-scroll { max-height:min(70vh,760px); min-height:300px; scrollbar-width:auto; scrollbar-color:#829fb3 #ecf2f7; }
.portal-refined .gantt-status-picker { width:244px; padding:15px; border-color:#cddde9; }
.portal-refined .gantt-status-picker-title { font-size:15px; }
.portal-refined .gantt-status-picker-subtitle { font-size:12px; margin-top:5px; }
.portal-refined .gantt-status-option { min-height:43px; font-size:13px; }
@media(max-width:1250px) {
  .portal-refined .gantt-modern-table { --g-name:330px; --g-plan:190px; --g-month:130px; }
}
@media(max-width:1100px) {
  .portal-refined .gantt-modern-table { --g-name:320px; --g-plan:190px; }
}
@media(max-width:760px) {
  .portal-refined .gantt-toolbar { padding:18px 16px; }
  .portal-refined .gantt-toolbar-title { font-size:19px; }
  .portal-refined .gantt-reading-guide { padding:0 16px 16px; }
  .portal-refined .gantt-legend { gap:12px; }
  .portal-refined .gantt-legend-item { font-size:11px; }
  .portal-refined .gantt-modern-table { --g-name:230px; --g-plan:190px; --g-month:130px; }
  .portal-refined .gantt-modern-table .sticky1 { padding:16px 12px !important; }
  .portal-refined .gantt-modern-table .gantt-project-text { font-size:13px; }
  .portal-refined .gantt-modern-table .gantt-owner-input { font-size:12px; }
  .portal-refined .gantt-project-number { font-size:10px; }
  .portal-refined .gantt-footer { font-size:10px; }
}
@media(max-width:420px) {
  .portal-refined .gantt-modern-table { --g-name:200px; }
  .portal-refined .gantt-modern-table .gantt-project-text { font-size:12px; }
}