/* ===== Supabase Deck — paleta propia (verde Supabase) ===== */
:root{
  --sd-ink:#12131a;
  --sd-accent:#3ecf8e;
  --sd-accent-deep:#249d68;
  --sd-line:#d5ecdf;
  --sd-muted:#5c647a;
  --sd-card:#f3fbf7;
}

#view-supabase-deck{ font-family:var(--sans); }

.sd-header{ margin-bottom:22px; }
.sd-eyebrow{
  font-family:var(--mono); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--sd-muted);
}
.sd-header h1{ font-size:1.9rem; margin:6px 0 8px; letter-spacing:-0.03em; font-weight:700; color:var(--sd-ink); }
.sd-header p{ font-size:0.9rem; color:var(--sd-muted); line-height:1.55; margin:0; }

.sd-card{
  background:var(--sd-card);
  border:1px solid var(--sd-line);
  border-radius:3px;
  padding:20px;
  margin-bottom:16px;
  position:relative;
  transition:opacity 0.15s ease;
}
.sd-card.disabled{ opacity:0.45; pointer-events:none; }

.sd-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.sd-step-num{
  font-family:var(--mono); font-size:0.7rem; font-weight:600;
  color:var(--sd-accent-deep); border:1px solid var(--sd-accent);
  padding:2px 7px; border-radius:1px;
}
.sd-card-head h2{ font-size:1rem; font-weight:700; margin:0; flex:1; color:var(--sd-ink); }
.sd-menu-btn{
  background:transparent; border:1px solid var(--sd-line); border-radius:3px;
  width:30px; height:30px; cursor:pointer; font-size:0.9rem; color:var(--sd-muted);
}
.sd-refresh-hint{
  font-family:var(--mono); font-size:0.72rem; color:var(--sd-accent-deep);
  cursor:pointer; white-space:nowrap;
}

.sd-proxy-panel{
  display:none; background:#fff; border:1px solid var(--sd-line); border-radius:3px;
  padding:14px; margin-bottom:16px;
}
.sd-proxy-panel.show{ display:block; }
.sd-proxy-panel label{
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--sd-muted); display:block; margin-bottom:6px;
}
.sd-proxy-panel input{
  width:100%; padding:9px 10px; border:1px solid var(--sd-line); border-radius:3px;
  font-family:var(--mono); font-size:0.78rem; margin-bottom:10px;
}
.sd-proxy-actions{ display:flex; gap:8px; }

/* Resumen */
.sd-summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sd-summary-box{ background:#fff; border:1px solid var(--sd-line); border-radius:3px; padding:12px 8px; text-align:center; }
.sd-summary-box .num{ font-size:1.5rem; font-weight:700; font-family:var(--mono); }
.sd-summary-box .label{ font-size:0.65rem; color:var(--sd-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }
.sd-summary-box.active .num{ color:var(--sd-accent-deep); }
.sd-summary-box.paused .num{ color:var(--red); }
.sd-summary-box.warn .num{ color:#d97706; }

/* Cuentas */
.sd-account-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sd-account-empty{ font-family:var(--mono); font-size:0.78rem; color:var(--sd-muted); padding:10px 0; text-align:center; }
.account-chip{
  background:#fff; border:1px solid var(--sd-line); border-radius:3px;
  padding:12px 14px; cursor:pointer; transition:border-color 0.12s ease;
}
.account-chip.active{ border-color:var(--sd-accent); background:#eafbf3; }
.account-chip .name{ font-weight:600; font-size:0.88rem; color:var(--sd-ink); }
.account-chip .del{ color:var(--red); cursor:pointer; font-size:0.9rem; padding:2px 6px; }
.confirm-del{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--sd-line);
  font-size:0.8rem; display:flex; flex-direction:column; gap:8px;
}
.confirm-del button{
  padding:7px 10px; border-radius:3px; border:none; font-family:var(--mono);
  font-size:0.72rem; cursor:pointer;
}
.confirm-del .yes{ background:var(--red); color:#fff; }
.confirm-del .no{ background:var(--sd-line); color:var(--sd-ink); }

.sd-btn-outline{
  width:100%; padding:10px; background:transparent; border:1px dashed var(--sd-accent);
  color:var(--sd-accent-deep); border-radius:3px; font-family:var(--sans);
  font-weight:600; font-size:0.82rem; cursor:pointer; margin-top:6px;
}
.sd-btn-primary{
  width:100%; padding:12px; background:var(--sd-accent); color:#08331e; border:none;
  border-radius:3px; font-family:var(--sans); font-weight:700; font-size:0.86rem;
  cursor:pointer; text-transform:uppercase; letter-spacing:0.04em;
}
.sd-btn-primary:hover{ background:var(--sd-accent-deep); color:#fff; }
.sd-btn-primary:disabled{ background:#a8e4c6; cursor:not-allowed; }
.sd-btn-secondary{
  width:100%; padding:10px; background:#e7f2ec; color:var(--sd-ink); border:none;
  border-radius:3px; font-family:var(--sans); font-weight:600; font-size:0.82rem;
  cursor:pointer; margin-top:8px;
}

.sd-account-form{ display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--sd-line); }
.sd-account-form.show{ display:block; }
.sd-account-form label{
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--sd-muted); display:block; margin:10px 0 6px;
}
.sd-account-form label:first-child{ margin-top:0; }
.sd-account-form input{
  width:100%; padding:10px; border:1px solid var(--sd-line); border-radius:3px;
  font-family:var(--mono); font-size:0.82rem; background:#fff;
}
.sd-hint{ font-size:0.72rem; color:var(--sd-muted); margin-top:6px; }
.sd-checkbox-row{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:0.8rem; color:var(--sd-muted); }
.sd-checkbox-row input{ accent-color:var(--sd-accent); }
.sd-form-actions{ display:flex; gap:8px; margin-top:14px; }
.sd-form-actions button{ flex:1; margin-top:0; }

/* Proyectos */
.sd-project-list{ display:flex; flex-direction:column; gap:10px; }
.sd-project-empty{ font-family:var(--mono); font-size:0.78rem; color:var(--sd-muted); padding:14px 0; text-align:center; }
.sd-project-card{ background:#fff; border:1px solid var(--sd-line); border-radius:3px; padding:14px; }
.sd-project-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; gap:10px; }
.sd-project-name{ font-weight:700; font-size:0.95rem; color:var(--sd-ink); word-break:break-word; }
.sd-project-region{ font-family:var(--mono); font-size:0.68rem; color:var(--sd-muted); margin-top:2px; }
.sd-status-badge{
  font-family:var(--mono); font-size:0.66rem; font-weight:600; padding:3px 8px;
  border-radius:2px; white-space:nowrap; flex-shrink:0;
}
.sd-status-badge.active{ background:#e6f6ea; color:#1d7a34; }
.sd-status-badge.paused{ background:#fbe9e7; color:#a3402f; }
.sd-status-badge.pausing, .sd-status-badge.restoring{ background:#fff3e0; color:#a3620a; }
.sd-status-badge.unknown{ background:#f0f0f0; color:var(--sd-muted); }

.sd-project-actions{ display:flex; gap:8px; margin-top:10px; }
.sd-btn-sm{
  flex:1; padding:8px; border-radius:3px; font-size:0.72rem; font-weight:600;
  font-family:var(--sans); cursor:pointer; border:none; text-align:center;
}
.sd-btn-sm:disabled{ opacity:0.5; cursor:not-allowed; }
.sd-btn-resume{ background:var(--sd-accent); color:#08331e; }
.sd-btn-keys{ background:#f0f0f0; color:var(--sd-ink); border:1px solid #ddd; }

.sd-cron-note{
  background:#fff; border:1px dashed var(--sd-line); border-radius:3px;
  padding:12px; font-size:0.78rem; color:var(--sd-muted); line-height:1.5;
}
.sd-cron-note a{ color:var(--sd-accent-deep); font-weight:600; }
.sd-cron-note b{ color:var(--sd-ink); }

/* Banners */
.banner{ display:none; }
.banner.show{
  display:block; margin-top:10px; padding:10px 12px; border-radius:3px;
  font-family:var(--mono); font-size:0.76rem; line-height:1.4;
}
.banner.info{ background:#e3ecfd; color:#1d4ed8; border-left:3px solid #2563eb; }
.banner.success{ background:#e6f6ea; color:#1d7a34; border-left:3px solid var(--sd-accent); }
.banner.error{ background:#fbe9e7; color:#a3402f; border-left:3px solid var(--red); }
.banner.warn{ background:#fff3e0; color:#a3620a; border-left:3px solid #f6821f; }

/* Home card styling */
.tool-card.sd{
  background:linear-gradient(135deg, #eafbf3, var(--sd-card));
  border-color:var(--sd-line);
}
.tool-card.sd .tc-mark{ background:var(--sd-accent); color:#08331e; }
.tool-card.sd h3{ color:var(--sd-ink); }
.tool-card.sd p{ color:var(--sd-muted); }
.tool-card.sd .tc-cta{ color:var(--sd-accent-deep); }
.tool-card.sd::after{
  content:'';
  position:absolute; right:-30px; bottom:-30px; width:120px; height:120px;
  background:radial-gradient(circle, rgba(62,207,142,0.2), transparent 70%);
}

@media (max-width: 480px){
  .sd-header h1{ font-size:1.6rem; }
  .sd-card{ padding:16px; }
  .sd-summary-grid{ gap:6px; }
}