﻿/* ── AUTH OVERLAY ────────────────────────────────────────── */
#ic-auth-overlay {
  position: fixed; inset: 0; z-index: 99000;
  display: flex; align-items: center; justify-content: center;
}
.ic-auth-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(18px);
}
.ic-auth-panel {
  position: relative; z-index: 1;
  width: min(440px, 92vw);
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.1);
  padding: 3rem 2.8rem 2.5rem;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(232,211,165,.06);
  animation: ic-auth-in .35s cubic-bezier(.16,1,.3,1);
}
@keyframes ic-auth-in {
  from { opacity:0; transform:translateY(20px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.ic-auth-logo {
  display: flex; gap: 0; margin-bottom: 2rem; justify-content: center;
}
.ic-auth-logo-i,
.ic-auth-logo-amp,
.ic-auth-logo-c {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.ic-auth-logo-i, .ic-auth-logo-c { color: var(--color-text); }
.ic-auth-logo-amp { color: var(--color-accent); font-style: italic; margin: 0 3px; }
.ic-auth-eyebrow {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: .7rem;
}
.ic-auth-title {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400;
  letter-spacing: -.04em; line-height: .95;
  color: var(--color-text); margin-bottom: .9rem;
}
.ic-auth-desc {
  font-family: var(--font-sans);
  font-size: .82rem; line-height: 1.75;
  color: var(--color-muted); margin-bottom: 2rem;
}
.ic-auth-field { margin-bottom: 1.2rem; }
.ic-auth-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-muted-2); margin-bottom: .5rem;
}
.ic-auth-input {
  width: 100%; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: .7rem 0; color: var(--color-text);
  font-family: var(--font-sans); font-size: .88rem;
  outline: none; transition: border-color .3s;
  box-sizing: border-box;
}
.ic-auth-input:focus { border-color: rgba(232,211,165,.5); }
.ic-auth-input::placeholder { color: #505050; }
/* Chrome/Edge force a light background + dark text on autofilled inputs with
   no way to override background-color directly — the box-shadow trick is the
   standard workaround, matched here to the panel's own background. */
.ic-auth-input:-webkit-autofill,
.ic-auth-input:-webkit-autofill:hover,
.ic-auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0px 1000px #0a0a0a inset;
  box-shadow: 0 0 0px 1000px #0a0a0a inset;
  caret-color: var(--color-text);
  transition: background-color 9999s ease-in-out 0s;
}
.ic-auth-select { appearance: none; cursor: pointer; }
.ic-auth-select option { background: #111; color: var(--color-text); }
.ic-auth-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1.2rem;
}
.ic-auth-field-row .ic-auth-field { margin-bottom: 0; }
.ic-auth-optional { color: #505050; text-transform: none; letter-spacing: 0; }
.ic-auth-error {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .08em;
  color: #e57373; margin-bottom: 1rem;
  padding: .6rem .8rem;
  background: rgba(229,115,115,.08);
  border: 1px solid rgba(229,115,115,.2);
}
.ic-auth-info {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .08em;
  color: var(--color-up); margin-bottom: 1rem;
  padding: .6rem .8rem;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.2);
}
.ic-auth-btn {
  width: 100%; padding: .85rem 0; margin-top: .4rem;
  background: rgba(232,211,165,.07);
  border: 1px solid rgba(232,211,165,.3);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .2s;
}
.ic-auth-btn:hover:not(:disabled) {
  background: rgba(232,211,165,.13);
  border-color: rgba(232,211,165,.6);
  transform: translateY(-1px);
}
.ic-auth-btn:disabled { opacity: .5; cursor: not-allowed; }
.ic-auth-footer { margin-top: 1.6rem; text-align: center; }
.ic-auth-toggle-link {
  display: block; margin: 0 auto .9rem;
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent); cursor: pointer;
  transition: color .2s;
}
.ic-auth-toggle-link:hover { color: #f0e0b8; }
.ic-auth-close-link {
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted-2); cursor: pointer;
  transition: color .2s;
}
.ic-auth-close-link:hover { color: var(--color-muted); }
.ic-auth-forgot-link {
  display: block; margin: 0 auto .9rem;
  background: none; border: none;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted-2); cursor: pointer;
  transition: color .2s;
}
.ic-auth-forgot-link:hover { color: var(--color-accent); }

/* ── COOKIE BANNER ───────────────────────────────────────── */
#ic-cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 98000;
  background: rgba(8,8,8,.97);
  border-top: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  padding: 1.1rem 4.5%;
  animation: ic-cookie-up .4s cubic-bezier(.16,1,.3,1);
}
@keyframes ic-cookie-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ic-cookie-inner {
  max-width: 1480px; margin: auto;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.ic-cookie-text {
  flex: 1; min-width: 220px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem; line-height: 1.65; color: #9f9f9f;
}
.ic-cookie-text strong { color: #f5f5f5; margin-right: .4em; }
.ic-cookie-link {
  background: none; border: none; padding: 0;
  color: #e8d3a5; font-size: inherit; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ic-cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; }
.ic-cookie-btn {
  padding: .45rem 1.3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; border: 1px solid;
  transition: background .25s, color .25s;
}
.ic-cookie-reject {
  background: none; border-color: rgba(255,255,255,.18); color: #9f9f9f;
}
.ic-cookie-reject:hover { background: rgba(255,255,255,.06); color: #f5f5f5; }
.ic-cookie-accept {
  background: rgba(232,211,165,.08); border-color: rgba(232,211,165,.35); color: #e8d3a5;
}
.ic-cookie-accept:hover { background: rgba(232,211,165,.16); border-color: rgba(232,211,165,.6); }
@media(max-width:600px){
  #ic-cookie-banner { padding: 1rem 5%; }
  .ic-cookie-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ic-cookie-actions { width: 100%; }
  .ic-cookie-btn { flex: 1; text-align: center; }
}

/* ── "Nueva operación" button in panel header ── */
.pfnp-add-trade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(232,211,165,.06);
  border: 1px solid rgba(232,211,165,.22);
  color: var(--accent);
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.pfnp-add-trade-btn:hover {
  background: rgba(232,211,165,.13);
  border-color: rgba(232,211,165,.45);
}
.pfnp-add-trade-btn--lg {
  padding: 7px 18px;
  font-size: .65rem;
}

/* ── Delete button per row ── */
.pfnp-htbl-hdr--with-del,
.pfnp-htbl-row--with-del {
  grid-template-columns: 1.8fr min-content 1fr 1fr 1fr 20px !important;
}
.pfnp-htbl-del-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pfnp-del-trade-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.18);
  font-size: .6rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .15s;
  font-family: var(--sans);
}
.pfnp-del-trade-btn:hover { color: rgba(248,113,113,.85); }

/* ── Modal overlay ── */
.ictm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.16,1,.3,1);
}
.ictm-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ── Modal shell ── */
.ictm-shell {
  background: #0d0d0d;
  border: 1px solid rgba(232,211,165,.22);
  border-top: 2px solid #e8d3a5;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 32px 80px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.6);
  transform: translateY(12px);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
  /* overflow:hidden removed (2026-07-15) — no rounded corners or clipped
     decoration ever depended on it (confirmed: no border-radius, no
     ::before/::after on this rule), and it was clipping the Ticker field's
     search dropdown (.pf-ticker-dd, position:absolute, can render past the
     shell's own height). */
}
.ictm-overlay.open .ictm-shell {
  transform: translateY(0);
}

/* ── Modal header ── */
.ictm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ictm-title {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ictm-close-btn {
  background: none;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  transition: color .15s;
}
.ictm-close-btn:hover { color: var(--text); }

/* ── Form body ── */
.ictm-body {
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Field ── */
.ictm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ictm-label {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
}
.ictm-input {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 9px 12px;
  outline: none;
  transition: border-color .18s, background .18s;
  width: 100%;
  box-sizing: border-box;
}
.ictm-input:focus {
  border-color: rgba(232,211,165,.4);
  background: rgba(232,211,165,.03);
}
.ictm-input::placeholder { color: var(--muted2); font-size: .7rem; }
.ictm-input.is-error { border-color: rgba(248,113,113,.5); }

/* Two-col row */
.ictm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Autocomplete hint */
.ictm-hint {
  font-family: var(--sans);
  font-size: .6rem;
  color: rgba(232,211,165,.5);
  letter-spacing: .06em;
  min-height: 14px;
  margin-top: -2px;
}

/* ── Price preview pill ── */
.ictm-preview {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ictm-preview-label {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
}
.ictm-preview-val {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
}

/* ── Footer / action buttons ── */
.ictm-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ictm-btn-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 18px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ictm-btn-cancel:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.ictm-btn-submit {
  background: rgba(232,211,165,.1);
  border: 1px solid rgba(232,211,165,.35);
  color: var(--accent);
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 22px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.ictm-btn-submit:hover { background: rgba(232,211,165,.18); border-color: rgba(232,211,165,.6); }
.ictm-btn-submit:disabled { opacity: .4; cursor: default; }

/* ── Error message ── */
.ictm-error {
  font-family: var(--sans);
  font-size: .62rem;
  color: rgba(248,113,113,.85);
  letter-spacing: .06em;
  min-height: 16px;
  padding: 0 20px;
  margin-top: -8px;
}

/* ── Success flash ── */
.ictm-success-flash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #34d399;
}

/* ── Bell button in watchlist rows ── */
.pf-alert-bell {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.2);
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color .18s;
  position: relative;
  vertical-align: middle;
}
.pf-alert-bell:hover { color: rgba(232,211,165,.7); }
.pf-alert-bell--active { color: #e8d3a5; }
.pf-alert-bell--active:hover { color: #fff; }
.pf-alert-count {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  color: #e8d3a5;
  line-height: 1;
}

/* ── Manager button in panel header ── */
.pf-alert-mgr-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(232,211,165,.06);
  border: 1px solid rgba(232,211,165,.22);
  color: var(--accent);
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.pf-alert-mgr-btn:hover { background: rgba(232,211,165,.12); border-color: rgba(232,211,165,.4); }

/* ══ ALERT MODAL ══════════════════════════════════════════════════ */
.ical-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(5px);
  z-index: 210000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s cubic-bezier(.16,1,.3,1);
}
.ical-overlay.open { opacity: 1; pointer-events: all; }
.ical-shell {
  background: #0d0d0d;
  border: 1px solid rgba(232,211,165,.2);
  border-top: 2px solid #e8d3a5;
  width: 380px; max-width: calc(100vw - 32px);
  box-shadow: 0 28px 70px rgba(0,0,0,.9);
  transform: translateY(10px);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.ical-overlay.open .ical-shell { transform: translateY(0); }

.ical-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ical-head-left { display: flex; align-items: baseline; gap: 10px; }
.ical-tk {
  font-family: var(--mono); font-size: .95rem; font-weight: 700;
  letter-spacing: .06em; color: var(--accent);
}
.ical-cur {
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
  letter-spacing: .04em;
}
.ical-close {
  background: none; border: none; color: var(--muted2); cursor: pointer;
  font-size: 1rem; padding: 2px 4px; transition: color .15s;
}
.ical-close:hover { color: var(--text); }

/* Existing alerts list */
.ical-existing {
  padding: 10px 18px 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.ical-existing-hdr {
  font-family: var(--sans); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 2px;
}
.ical-existing-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.ical-existing-pill {
  display: flex; align-items: center; gap: 8px;
}
.ical-existing-dir {
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  letter-spacing: .06em;
}
.ical-existing-dir.above { color: #34d399; }
.ical-existing-dir.below { color: #f87171; }
.ical-existing-price {
  font-family: var(--mono); font-size: .72rem; color: var(--text);
}
.ical-del-btn {
  background: none; border: none; color: rgba(255,255,255,.18);
  cursor: pointer; font-size: .65rem; padding: 2px 5px;
  transition: color .15s;
}
.ical-del-btn:hover { color: rgba(248,113,113,.8); }

/* Add new alert form */
.ical-form { padding: 14px 18px 8px; }
.ical-form-hdr {
  font-family: var(--sans); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 10px;
}
.ical-dir-row {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.ical-dir-btn {
  flex: 1; padding: 7px 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: all .18s; color: var(--muted);
}
.ical-dir-btn:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.ical-dir-btn.sel-above { border-color: rgba(52,211,153,.45); color: #34d399; background: rgba(52,211,153,.06); }
.ical-dir-btn.sel-below { border-color: rgba(248,113,113,.45); color: #f87171; background: rgba(248,113,113,.06); }

.ical-price-row {
  display: flex; gap: 8px; align-items: stretch;
}
.ical-price-wrap {
  flex: 1; position: relative;
}
.ical-price-prefix {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .75rem; color: var(--muted2);
  pointer-events: none;
}
.ical-price-inp {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); font-family: var(--mono); font-size: .82rem;
  padding: 9px 12px 9px 22px; outline: none;
  transition: border-color .18s, background .18s;
}
.ical-price-inp:focus { border-color: rgba(232,211,165,.4); background: rgba(232,211,165,.03); }
.ical-price-inp.is-error { border-color: rgba(248,113,113,.5); }

.ical-add-btn {
  padding: 9px 18px;
  background: rgba(232,211,165,.09); border: 1px solid rgba(232,211,165,.3);
  color: var(--accent); font-family: var(--sans); font-size: .6rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.ical-add-btn:hover { background: rgba(232,211,165,.18); border-color: rgba(232,211,165,.55); }

/* Pct hint below input */
.ical-hint {
  font-family: var(--mono); font-size: .6rem; color: var(--muted2);
  letter-spacing: .05em; margin-top: 5px; min-height: 14px;
}
.ical-hint.up { color: rgba(52,211,153,.65); }
.ical-hint.dn { color: rgba(248,113,113,.65); }

/* Notification permission nudge */
.ical-notif-bar {
  padding: 8px 18px 12px;
  display: flex; align-items: center; gap: 10px;
}
.ical-notif-msg {
  font-family: var(--sans); font-size: .6rem; color: var(--muted2);
  letter-spacing: .04em; flex: 1;
}
.ical-notif-btn {
  background: none; border: 1px solid rgba(255,255,255,.12); color: var(--muted);
  font-family: var(--sans); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 10px; cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.ical-notif-btn:hover { border-color: rgba(232,211,165,.3); color: var(--accent); }

/* Error line */
.ical-error {
  font-family: var(--sans); font-size: .6rem; color: rgba(248,113,113,.8);
  letter-spacing: .05em; padding: 0 18px; min-height: 14px;
}

/* Footer */
.ical-foot {
  padding: 10px 18px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: flex-end;
}
.ical-done-btn {
  background: none; border: 1px solid rgba(255,255,255,.1); color: var(--muted);
  font-family: var(--sans); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 18px; cursor: pointer;
  transition: all .18s;
}
.ical-done-btn:hover { color: var(--text); border-color: rgba(255,255,255,.2); }

/* ══ ALERT MANAGER PANEL ══════════════════════════════════════════ */
.ical-mgr-panel {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  width: 320px;
  background: #0d0d0d;
  border: 1px solid rgba(232,211,165,.2);
  border-top: 2px solid #e8d3a5;
  box-shadow: 0 20px 60px rgba(0,0,0,.9);
  z-index: 10000;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.ical-mgr-panel.open { display: block; }
.ical-mgr-panel::-webkit-scrollbar { width: 2px; }
.ical-mgr-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }
.ical-mgr-hdr {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--sans); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted2);
}
.ical-mgr-empty {
  padding: 18px 14px;
  font-family: var(--sans); font-size: .62rem;
  letter-spacing: .1em; color: var(--muted2); text-align: center;
}
.ical-mgr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.ical-mgr-row:hover { background: rgba(255,255,255,.025); }
.ical-mgr-tk {
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  color: var(--accent); width: 50px; flex-shrink: 0;
}
.ical-mgr-dir {
  font-family: var(--mono); font-size: .65rem; font-weight: 600; flex-shrink: 0;
}
.ical-mgr-dir.above { color: #34d399; }
.ical-mgr-dir.below { color: #f87171; }
.ical-mgr-price {
  font-family: var(--mono); font-size: .68rem; color: var(--text); flex: 1;
}
.ical-mgr-cur {
  font-family: var(--mono); font-size: .6rem; color: var(--muted2);
  margin-right: 4px;
}
.ical-mgr-del {
  background: none; border: none; color: rgba(255,255,255,.15);
  cursor: pointer; font-size: .65rem; padding: 2px 5px; transition: color .15s;
}
.ical-mgr-del:hover { color: rgba(248,113,113,.8); }
.ical-mgr-clear {
  display: block; width: calc(100% - 28px); margin: 8px 14px;
  background: none; border: 1px solid rgba(255,255,255,.08); color: var(--muted2);
  font-family: var(--sans); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 0; cursor: pointer;
  transition: all .18s; text-align: center;
}
.ical-mgr-clear:hover { border-color: rgba(248,113,113,.3); color: rgba(248,113,113,.7); }

/* ══ IN-APP TOAST NOTIFICATION ══════════════════════════════════ */
#ical-toast-container {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 300000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.ical-toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  background: #0d0d0d;
  border: 1px solid rgba(232,211,165,.3);
  border-left: 3px solid #e8d3a5;
  box-shadow: 0 12px 40px rgba(0,0,0,.85);
  min-width: 260px; max-width: 320px;
  pointer-events: all;
  animation: ical-toast-in .3s cubic-bezier(.16,1,.3,1) forwards;
  cursor: pointer;
}
.ical-toast.is-above { border-left-color: #34d399; border-color: rgba(52,211,153,.25); }
.ical-toast.is-below { border-left-color: #f87171; border-color: rgba(248,113,113,.25); }
.ical-toast-icon { flex-shrink: 0; margin-top: 1px; }
.ical-toast-body { flex: 1; }
.ical-toast-headline {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; color: var(--text); margin-bottom: 3px;
}
.ical-toast-detail {
  font-family: var(--mono); font-size: .6rem; color: var(--muted2);
  letter-spacing: .04em;
}
.ical-toast-dismiss {
  flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.2);
  cursor: pointer; font-size: .75rem; padding: 0 2px; transition: color .15s;
}
.ical-toast-dismiss:hover { color: var(--muted); }
@keyframes ical-toast-in {
  from { opacity:0; transform: translateX(18px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes ical-toast-out {
  from { opacity:1; transform: translateX(0); max-height: 80px; }
  to   { opacity:0; transform: translateX(18px); max-height: 0; padding: 0; margin: 0; }
}
.ical-toast.leaving {
  animation: ical-toast-out .25s cubic-bezier(.4,0,1,1) forwards;
}

/* Pulse dot on active alert bell */
@keyframes ical-bell-pulse {
  0%,100% { opacity:1; }
  50% { opacity:.4; }
}
.pf-alert-bell--active svg { animation: ical-bell-pulse 2.4s ease-in-out infinite; }

/* ── Data-source flags (app/js/core/endpoint-flags.js) ───────────────────
   Badge injected next to every Macro panel's title naming the data
   source(s) it uses (TD/FRED/ICI/MIXTO/... or a "TD / EIA"-style combo for
   panels fed by more than one). Each individual source name is colored on
   its own — green if that specific source is live right now, red if it
   isn't (never wired, gated, or manually turned off via a kill-switch like
   PF_MACRO_TD_LIVE) — so a combo badge can show some sources green and
   others red at the same time. The badge's own background/border is a
   summary of its sources: solid green if all are on, solid red if all are
   off, neutral if mixed. Tooltip explains which case it is. */
.pf-endpoint-flag {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: help;
}
.pf-endpoint-flag--live  { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); }
.pf-endpoint-flag--off   { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); }
.pf-endpoint-flag--mixed { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.pf-endpoint-flag-src--on  { color: var(--up); }
.pf-endpoint-flag-src--off { color: var(--dn); }

/* ── MARKETING RESPONSIVE ────────────────────────────────────
   Home page's feature grids (Video·Archivo, Equipo·Lab·Comunidad,
   footer) set grid-template-columns via inline style="" with no
   responsive fallback — on a narrow viewport that squeezed 3 (or 5,
   for the footer) columns into unreadably thin slivers. These
   classes hook those same elements so a breakpoint can win; inline
   styles otherwise always beat an external stylesheet, hence the
   !important. */
@media (max-width: 900px) {
  .ic-3col-grid   { grid-template-columns: 1fr 1fr !important; }
  .ic-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) {
  .ic-3col-grid    { grid-template-columns: 1fr !important; }
  .ic-footer-grid  { grid-template-columns: 1fr !important; }
  .ic-contact-row  { flex-direction: column !important; }
}

