/* ==========================================================================
   ISHITO · Tema ISOS (14/10/2026)
   Capa visual: colores azul #0E4AA4 + naranja #F58220, tipografía y tarjetas.
   Solo estilos: no cambia funciones. Para revertir, quitar el <link> en index.html.
   ========================================================================== */

:root {
  --ix-azul: #0E4AA4;
  --ix-azul-hover: #0A3A82;
  --ix-azul-oscuro: #0A2A5E;
  --ix-azul-suave: #E7EEFA;
  --ix-naranja: #F58220;
  --ix-naranja-texto: #9A4708;
  --ix-naranja-suave: #FFF6EE;
  --ix-fondo: #F3F6FB;
  --ix-borde: #E1E7F1;
  --ix-texto: #15233D;
  --ix-texto-2: #42536F;
  --ix-texto-3: #5A6B88;
  --ix-radio: 14px;

  /* Variables existentes del sistema, alineadas al tema */
  --isos-orange: #F58220;
  --isos-orange-hover: #D96E11;
  --color-primary: #F58220;
  --body-bg: #F3F6FB;
  --text-main: #15233D;
  --text-secondary: #42536F;
  --border-color: #E1E7F1;
}

body,
body button, body input, body select, body textarea, body .btn, body .form-control, body .form-select {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body { background: var(--ix-fondo) !important; color: var(--ix-texto); }

/* ---------- Barra lateral ---------- */
body #sidebar.sidebar {
  background: var(--ix-azul-oscuro) !important;
  background-image: none !important;
  border-right: 0 !important;
}
body #sidebar .sidebar-logo,
body #sidebar .sidebar-logo .logo-container {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
body #sidebar .sidebar-logo .logo-container { border-bottom: 0 !important; }
body #sidebar .logo-text h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  font-size: 16px !important;
}
body #sidebar .logo-text p { color: #A9BBDD !important; font-size: 12px !important; }

body #sidebar .nav-link {
  color: #E4ECFA !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border-left: 0 !important;
  min-height: 44px;
  margin: 2px 8px;
  transition: background-color .15s ease;
}
body #sidebar .nav-link i { color: #A9BBDD !important; }
body #sidebar .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #FFFFFF !important;
}
body #sidebar li.active > .nav-link,
body #sidebar .nav-link.active {
  background: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  box-shadow: inset 4px 0 0 var(--ix-naranja) !important;
}
body #sidebar li.active > .nav-link i,
body #sidebar .nav-link.active i { color: var(--ix-naranja) !important; }

body #sidebar .submenu { background: transparent !important; border-left: 0 !important; }
body #sidebar .submenu a {
  color: #C7D4EE !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border-left: 0 !important;
  background: transparent !important;
}
body #sidebar .submenu a:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.06) !important; }
body #sidebar .submenu a.active,
body #sidebar .submenu li.active > a {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: inset 3px 0 0 var(--ix-naranja) !important;
}

/* ---------- Barra superior ---------- */
body header.app-topbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--ix-borde) !important;
  box-shadow: none !important;
}

/* ---------- Contenido ---------- */
body main.main-content { background: var(--ix-fondo) !important; }

/* Encabezado: solo en el Dashboard (las demás pantallas tienen su propio encabezado de color) */
body #dashboardContent .page-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body #dashboardContent .page-header h1 {
  color: var(--ix-azul-oscuro) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  font-size: 30px !important;
}
body #dashboardContent .page-header p { color: var(--ix-texto-2) !important; font-size: 15px !important; }

/* Tarjetas */
body .stat-card,
body .chart-card,
body .iso-certificates-section,
body .priority-actions-card,
body .card {
  background: #FFFFFF !important;
  border: 1px solid var(--ix-borde) !important;
  border-radius: var(--ix-radio) !important;
  box-shadow: none !important;
}
body .stat-card { padding: 20px !important; align-items: flex-start !important; }
body .stat-content h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ix-texto-2) !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}
body .stat-number {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ix-azul-oscuro) !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body .stat-change { font-size: 13px !important; font-weight: 700 !important; }
body .stat-change.positive { color: #146C43 !important; }
body .stat-change.negative { color: #B4300F !important; }
body .stat-icon {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: var(--ix-azul-suave) !important;
  color: var(--ix-azul) !important;
  font-size: 18px !important;
}
body .stat-icon i { color: var(--ix-azul) !important; }

body .chart-card h3, body .chart-card h4, body .chart-card .card-title,
body .iso-certificates-section h2, body .iso-certificates-section h3 {
  color: var(--ix-azul-oscuro) !important;
  font-weight: 800 !important;
}

/* Botones */
body .btn-primary {
  background: var(--ix-azul) !important;
  border-color: var(--ix-azul) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
body .btn-primary:hover, body .btn-primary:focus { background: var(--ix-azul-hover) !important; border-color: var(--ix-azul-hover) !important; }
body .btn-outline-primary {
  color: var(--ix-azul) !important;
  border-color: #C9D4E6 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
body .btn-outline-primary:hover { background: var(--ix-azul-suave) !important; }

/* Tablas */
body .table { color: var(--ix-texto); }
body .table thead th {
  background: #F7F9FC !important;
  color: var(--ix-texto-2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ix-borde) !important;
}
body .table > :not(caption) > * > * { border-color: #EDF1F7 !important; }
body .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #FAFBFD; }
body .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #F1F5FC; }

/* Formularios */
body .form-control:focus, body .form-select:focus {
  border-color: var(--ix-azul) !important;
  box-shadow: 0 0 0 3px rgba(14,74,164,0.15) !important;
}

/* Enlaces */
body main.main-content a:not(.btn):not(.nav-link) { color: var(--ix-azul); }

/* ---------- Etiqueta "Vencida" y filtro (ishito-cierre-mensual.js) ---------- */
.ix-tag-vencida {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: #FFF0E3; color: var(--ix-naranja-texto);
}
.ix-filtro-vencidas {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; margin: 0 0 12px 0;
  border-radius: 999px; border: 1px solid #F6C9A3;
  background: var(--ix-naranja-suave); color: var(--ix-naranja-texto);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.ix-filtro-vencidas[aria-pressed="true"] { background: var(--ix-naranja); color: var(--ix-azul-oscuro); border-color: var(--ix-naranja); }

/* ---------- Bloque Cierre mensual ---------- */
.ix-cierre { background: #FFFFFF; border: 1px solid var(--ix-borde); border-radius: var(--ix-radio); overflow: hidden; margin: 0 0 24px 0; }
.ix-cierre * { box-sizing: border-box; }
.ix-cierre-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--ix-borde); }
.ix-cierre-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ix-azul-oscuro); }
.ix-cierre-head small { display: block; font-size: 13px; color: var(--ix-texto-3); margin-top: 2px; }
.ix-meses { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #EEF2F8; }
.ix-meses button { height: 36px; min-width: 60px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: #2A3B5A; font-size: 13px; font-weight: 700; cursor: pointer; }
.ix-meses button[aria-pressed="true"] { background: var(--ix-azul); color: #FFFFFF; }
.ix-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--ix-borde); }
.ix-kpi { background: #FFFFFF; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.ix-kpi.alerta { background: var(--ix-naranja-suave); }
.ix-kpi .lbl { font-size: 13px; font-weight: 600; color: var(--ix-texto-2); }
.ix-kpi.alerta .lbl { color: var(--ix-naranja-texto); font-weight: 700; }
.ix-kpi .num { font-size: 28px; font-weight: 800; color: var(--ix-azul-oscuro); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ix-kpi .num.ok { color: #146C43; }
.ix-kpi .num.warn { color: var(--ix-naranja-texto); }
.ix-kpi .num.azul { color: var(--ix-azul); }
.ix-kpi .num small { font-size: 15px; font-weight: 700; color: var(--ix-texto-2); }
.ix-kpi .sub { font-size: 13px; color: var(--ix-texto-3); }
.ix-kpi.alerta .sub { color: #5C3410; }
.ix-cierre-body { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 20px 22px; align-items: flex-start; }
.ix-col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ix-col h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ix-azul-oscuro); }
.ix-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.ix-bar span:first-child { font-weight: 600; color: var(--ix-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-bar .track { height: 8px; border-radius: 4px; background: #F6DCC5; overflow: hidden; }
.ix-bar .track i { display: block; height: 100%; background: #C2600F; border-radius: 4px; }
.ix-bar.azul { grid-template-columns: 70px minmax(0, 1fr) 44px; }
.ix-bar.azul .track { height: 10px; background: var(--ix-azul-suave); }
.ix-bar.azul .track i { background: var(--ix-azul); }
.ix-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.ix-vacio { font-size: 13px; color: var(--ix-texto-3); }
.ix-btn-azul { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--ix-azul); color: #FFFFFF; font-weight: 800; font-size: 14px; cursor: pointer; }
.ix-btn-azul:hover { background: var(--ix-azul-hover); }
.ix-nota { padding: 0 22px 16px 22px; font-size: 12px; color: var(--ix-texto-3); }

/* Panel "Por recontactar" en la Lista */
.ix-panel-vencidas { background: #FFFFFF; border: 1px solid #F6C9A3; border-radius: var(--ix-radio); margin: 0 0 16px 0; overflow: hidden; }
.ix-panel-titulo { padding: 14px 16px; background: var(--ix-naranja-suave); color: var(--ix-naranja-texto); font-weight: 800; font-size: 14px; border-bottom: 1px solid #F6C9A3; }
.ix-tabla-vencidas { margin: 0 !important; font-size: 13px; }
.ix-tabla-vencidas td { vertical-align: middle; }
.ix-tabla-vencidas td:first-child, .ix-tabla-vencidas td:nth-child(3) { white-space: nowrap; }
.ix-tabla-vencidas small { color: var(--ix-texto-3); }
.ix-tabla-vencidas .ix-tag-vencida { margin-top: 0; }

@media (max-width: 600px) {
  .ix-bar { grid-template-columns: 110px minmax(0, 1fr) 36px; }
}