/* ════════════════════════════════════════════════════════════════
   MI TURNO · components/dashboard-tip.css
   ════════════════════════════════════════════════════════════════ */

[data-theme='dark'] .tip-box {
  background:
    linear-gradient(135deg, rgba(125, 168, 255, 0.12), rgba(143, 179, 255, 0.08)),
    color-mix(in srgb, var(--surface) 50%, transparent);
  border-color: color-mix(in srgb, #7da8ff 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

.tip-box {
  position: relative;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(91, 134, 229, 0.08), rgba(143, 179, 255, 0.05)),
    color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 35%, transparent),
    inset 0 -1px 0 rgba(91, 134, 229, 0.07),
    0 4px 16px rgba(91, 134, 229, 0.09);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.tip-box strong {
  color: var(--accent);
}