/* =============================================================
   IntelliSynthPrice — Sobrescrituras mínimas de Tabler
   ============================================================= */

:root {
  --isp-primary:   #206bc4;   /* azul Tabler */
  --isp-success:   #2fb344;
  --isp-warning:   #f59f00;
  --isp-danger:    #d63939;
}

body {
  font-size: 1.05rem;
}

/* Tarjetas de métricas en la landing */
.isp-metric-card {
  border-left: 4px solid var(--isp-primary);
}

.isp-metric-card.savings {
  border-left-color: var(--isp-success);
}

/* Badge de tier en navbar */
.avatar {
  background-color: var(--isp-primary);
  color: #fff;
  font-weight: 600;
}

/* Tabla de chollos — highlight de ahorro */
.saving-high   { color: var(--isp-success); font-weight: 600; }
.saving-medium { color: var(--isp-warning); font-weight: 600; }

/* QR modal */
.qr-container {
  text-align: center;
  padding: 1.5rem;
}

.qr-container img {
  max-width: 220px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px;
}

/* ── Tabla de revisión admin: forzar enlaces visibles ─────────────── */
.page-body .table a:not([tabindex="-1"]) {
  color: #206bc4 !important;
  text-decoration: underline !important;
}
.page-body .table a:not([tabindex="-1"]):hover {
  color: #1558a6 !important;
}

/* Footer sutil */
.isp-footer {
  color: #868e96;
  font-size: .8rem;
  text-align: center;
  padding: 2rem 0 1rem;
}

/* ── Barra visual de precio P25/P50/P75 ──────────────────── */
.price-bar {
  display: block;
  width: 100%;
  max-width: 180px;
}

@media (max-width: 575px) {
  .price-bar {
    max-width: 100%;
  }
}

/* ── Responsive móvil ─────────────────────────────────────── */
@media (max-width: 575px) {

  /* Precios en la lista de modelos seguidos: uno por línea */
  .isp-prices {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.25rem;
    font-size: .85rem;
  }

  /* Tabla de precios justos: ocultar columna Muestras en móvil */
  .isp-col-muestras {
    display: none;
  }

  /* Card header con título largo: permitir wrap */
  .card-header {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-subtitle {
    font-size: .8rem;
    width: 100%;
  }
}