/* ============================================================
   Invertir con Cabeza — Estilos principales
   Paleta: Verde primario #2D6B52 | Azul secundario #1A4070
   ============================================================ */

:root {
  --icc-green:      #2D6B52;
  --icc-green-dark: #1e4d3a;
  --icc-green-light:#3a8a69;
  --icc-navy:       #1A4070;
  --icc-navy-dark:  #102848;
  --icc-navy-light: #2558a0;
  --icc-teal:       #4A8FA8;
  --icc-gray:       #6B7280;
  --icc-bg:         #ffffff;
  --icc-text:       #2C2C2C;
}

/* --- Base --- */
body {
  background-color: var(--icc-bg);
  color: var(--icc-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* --- Navbar --- */
.navbar-icc {
  background-color: #ffffff;
  border-bottom: 3px solid var(--icc-green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.navbar-icc .nav-link {
  color: var(--icc-navy) !important;
  font-weight: 500;
  transition: color 0.2s;
}

.navbar-icc .nav-link:hover {
  color: var(--icc-green) !important;
}

/* --- Botones --- */
.btn-icc {
  background-color: var(--icc-green);
  border-color: var(--icc-green);
  color: #fff;
  font-weight: 500;
}

.btn-icc:hover, .btn-icc:focus {
  background-color: var(--icc-green-dark);
  border-color: var(--icc-green-dark);
  color: #fff;
}

.btn-secondary-icc {
  background-color: var(--icc-navy);
  border-color: var(--icc-navy);
  color: #fff;
  font-weight: 500;
}

.btn-secondary-icc:hover, .btn-secondary-icc:focus {
  background-color: var(--icc-navy-dark);
  border-color: var(--icc-navy-dark);
  color: #fff;
}

.btn-outline-icc {
  border-color: var(--icc-green);
  color: var(--icc-green);
}

.btn-outline-icc:hover {
  background-color: var(--icc-green);
  color: #fff;
}

/* --- Cards --- */
.card-icc {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.card-icc .card-title {
  color: var(--icc-navy);
}

/* --- Tabla admin --- */
.thead-icc {
  background-color: var(--icc-navy);
  color: #fff;
}

.thead-icc th {
  font-weight: 600;
  border-color: var(--icc-navy-dark) !important;
}

/* --- Badges broker --- */
.badge-broker-ppi {
  background-color: var(--icc-navy);
  color: #fff;
  padding: 0.35em 0.7em;
  border-radius: 6px;
  font-size: 0.82em;
}

.badge-broker-balanz {
  background-color: var(--icc-teal);
  color: #fff;
  padding: 0.35em 0.7em;
  border-radius: 6px;
  font-size: 0.82em;
}

/* --- Links --- */
.link-icc {
  color: var(--icc-green);
  text-decoration: none;
}

.link-icc:hover {
  color: var(--icc-green-dark);
  text-decoration: underline;
}

/* --- Colores utilitarios --- */
.color-primary  { color: var(--icc-green) !important; }
.color-secondary { color: var(--icc-navy) !important; }

/* --- Footer --- */
.footer-icc {
  background-color: #f8fafc;
  border-top: 2px solid var(--icc-green);
  color: var(--icc-gray);
  font-size: 0.85rem;
}

/* --- Badges tipo instrumento --- */
.badge-tipo-accion  { background-color: var(--icc-green); color: #fff; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.82em; }
.badge-tipo-cedear  { background-color: var(--icc-teal); color: #fff; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.82em; }
.badge-tipo-bono    { background-color: var(--icc-navy); color: #fff; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.82em; }
.badge-tipo-on      { background-color: #6d4c8e; color: #fff; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.82em; }
.badge-tipo-fci     { background-color: #b45309; color: #fff; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.82em; }

/* --- Cartera: ganancia / pérdida / neutro --- */
.text-ganancia { color: #198754; font-weight: 600; }
.text-perdida  { color: #dc3545; font-weight: 600; }
.text-neutro   { color: var(--icc-gray); }

/* --- Tabla cartera --- */
.table-cartera th { white-space: nowrap; }

/* --- Progress bars por tipo --- */
.bg-progress-accion { background-color: var(--icc-green); }
.bg-progress-cedear { background-color: var(--icc-teal); }
.bg-progress-bono   { background-color: var(--icc-navy); }
.bg-progress-on     { background-color: #6d4c8e; }

/* --- Form controls --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--icc-green);
  box-shadow: 0 0 0 0.2rem rgba(45, 107, 82, 0.2);
}

.form-check-input:checked {
  background-color: var(--icc-green);
  border-color: var(--icc-green);
}

/* --- Latido de onboarding (primer ingreso): resalta Ayuda/Tutorial --- */
@keyframes icc-latido {
  0%, 100% { background-color: transparent;    color: var(--icc-navy); }
  50%      { background-color: var(--icc-navy); color: #fff; }
}
.icc-latido {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 6px;
  animation: icc-latido 1.3s ease-in-out infinite;
}
.dropdown-item .icc-latido { padding: .1rem .4rem; }   /* ajuste fino dentro del menú */
@media (prefers-reduced-motion: reduce) { .icc-latido { animation: none; } }

/* --- Estado de APIs: luces tipo LED con glow --- */
.api-led {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #cbd5e1;                              /* gris: estado neutro */
  box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.25);
  transition: background-color .25s, box-shadow .25s;
}
.api-led--ok {
  background: #22c55e;
  box-shadow: 0 0 8px 1px rgba(34, 197, 94, 0.75), 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.api-led--down {
  background: #ef4444;
  box-shadow: 0 0 8px 1px rgba(239, 68, 68, 0.75), 0 0 0 3px rgba(239, 68, 68, 0.22);
}
.api-led--checking {
  background: #f59e0b;
  animation: api-led-pulse 1s ease-in-out infinite;
}
@keyframes api-led-pulse {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(245, 158, 11, 0.45), 0 0 0 2px rgba(245, 158, 11, 0.15); opacity: .65; }
  50%      { box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.85), 0 0 0 4px rgba(245, 158, 11, 0.30); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .api-led--checking { animation: none; } }

.api-led-lg { width: 20px; height: 20px; }
.api-row { transition: border-color .25s; }

/* ── Tour interactivo (coach marks) ─────────────────────────────────────── */
/* Backdrop transparente que captura clics: el tour es de solo lectura. */
.icc-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
  cursor: default;
}
/* Spotlight: la "técnica del box-shadow gigante" oscurece todo menos el target,
   sin recortes ni cálculos. El target queda iluminado con un anillo de acento. */
.icc-tour-spotlight {
  position: relative;
  z-index: 2001;
  pointer-events: none;            /* no se puede operar el elemento durante el tour */
  border-radius: .5rem;
  box-shadow: 0 0 0 9999px rgba(16, 40, 72, 0.62),  /* dim general (icc-navy-dark) */
              0 0 0 4px var(--icc-green),
              0 0 0 7px rgba(45, 107, 82, 0.35);
  transition: box-shadow .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .icc-tour-spotlight { transition: none; }
}
/* Burbuja del paso (Popover de Bootstrap con customClass). */
.icc-tour-pop.popover {
  z-index: 2002;
  max-width: 320px;
  border: 1px solid var(--icc-green);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.icc-tour-pop .popover-body { padding: .85rem .9rem; }
.icc-tour-pop .icc-tour-title {
  font-weight: 700;
  color: var(--icc-navy);
  margin-bottom: .3rem;
  font-size: .95rem;
}
.icc-tour-pop .icc-tour-text {
  color: var(--icc-text);
  font-size: .85rem;
  line-height: 1.4;
}
.icc-tour-pop .icc-tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .55rem;
  border-top: 1px solid #e9edf2;
}
.icc-tour-pop .icc-tour-count {
  font-size: .72rem;
  color: #6b7280;
  white-space: nowrap;
}
.icc-tour-pop .icc-tour-btns {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.icc-tour-pop .icc-tour-btns .btn { font-size: .78rem; }