/* ===============================
   B-DESK PRO - components.css
   Componentes compartidos
   =============================== */

/* Helpers */
.muted{ color: var(--muted); }

/* Flash messages */
.flash-wrap{ display:grid; gap:10px; margin: 0 0 14px; }
.flash{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
}
.flash-success{ border-color: rgba(45,255,182,.25); background: rgba(45,255,182,.08); }
.flash-error{ border-color: rgba(255,93,108,.25); background: rgba(255,93,108,.08); }
.flash-warning{ border-color: rgba(255,200,80,.25); background: rgba(255,200,80,.08); }
.flash-info{ border-color: rgba(51,214,255,.22); background: rgba(51,214,255,.08); }

/* Buttons PRO */
.btn-pro{
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-pro-ghost{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
.btn-pro-ghost:hover{ background: rgba(255,255,255,.09); }

.btn-pro-gradient{
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  border: 0;
  color: #071018;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(51,214,255,.20), 0 10px 28px rgba(139,92,255,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-pro-gradient:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn-pro-gradient:active{ transform: translateY(0); }

/* Cards */
.card, .pro-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pro-card{ padding: 18px; }
.pro-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 14px;
}
.pro-card-title{
  margin:0;
  font-size: 18px;
  font-family: var(--font-display);
}

/* KPIs base (si un módulo usa .kpis/.kpi) */
.kpis{
  display:grid;
  gap: 18px;
}
.kpi{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}
.kpi-label{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .9;
  text-align:center;
}
.kpi-value{
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  line-height: 1.05;
  margin: 10px 0 8px;
  text-align:center;
}
.kpi-foot{
  color: var(--muted);
  font-size: 12px;
  text-align:center;
}

.kpi-value-cyan{ color: var(--cyan); }
.kpi-value-violet{ color: var(--violet); }
.kpi-value-danger{ color: var(--red); }
.kpi-value-white{ color: rgba(255,255,255,.92); }

/* Table */
.pro-table-wrap{
  overflow-x:auto;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.15);
}
.pro-table{
  width:100%;
  border-collapse: collapse;
}
.pro-table th,
.pro-table td{
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  white-space: nowrap;
}
.pro-table th{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  background: rgba(255,255,255,.03);
}
.pro-table tbody tr:last-child td{ border-bottom:none; }
.pro-table tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Tags */
.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.tag-ingreso{
  border-color: rgba(51,214,255,.35);
  background: rgba(51,214,255,.10);
  color: var(--cyan);
}
.tag-gasto{
  border-color: rgba(139,92,255,.35);
  background: rgba(139,92,255,.10);
  color: var(--violet);
}

/* Icon buttons */
.actions-wrap{ display:flex; justify-content:center; gap:6px; }
.inline-form{ display:inline; margin:0; }

.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor:pointer;
  transition: all .15s ease;
}
.btn-icon:hover{
  background: rgba(255,255,255,.10);
  color: var(--text);
  transform: translateY(-1px);
}
.btn-icon-edit:hover{ border-color: rgba(51,214,255,.40); color: var(--cyan); }
.btn-icon-delete:hover{ border-color: rgba(255,93,108,.40); background: rgba(255,93,108,.10); color: var(--red); }

/* Export button */
.btn-export{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(51,214,255,.10);
  border: 1px solid rgba(51,214,255,.20);
  color: var(--cyan);
  font-weight: 900;
  text-decoration:none !important;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-export:hover{
  background: rgba(51,214,255,.16);
  box-shadow: 0 10px 22px rgba(51,214,255,.10);
  transform: translateY(-1px);
}

/* Build badge */
.build-badge{
  position: fixed;
  right: 12px;
  bottom: 12px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
  z-index: 9999;
}
/* ========= Toasts B-Desk (Flash messages) ========= */
.bdesk-toast-wrap{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 24px));
}

.bdesk-toast{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,22,.92);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.bdesk-toast::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(168,85,247,.95));
  opacity: .95;
}

.bdesk-toast-warning::before{
  background: linear-gradient(180deg, rgba(251,191,36,.95), rgba(245,158,11,.95));
}

.bdesk-toast-error::before,
.bdesk-toast-danger::before{
  background: linear-gradient(180deg, rgba(248,113,113,.95), rgba(244,63,94,.95));
}

.bdesk-toast-msg{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

.bdesk-toast-close{
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  cursor: pointer;
}

.bdesk-toast-close:hover{
  background: rgba(255,255,255,.08);
}

.bdesk-toast.is-hide{
  opacity: 0;
  transform: translateY(-6px);
  transition: .18s ease;
}
/* =========================================================
   FLASH (TOAST) — PRO DARK
   ========================================================= */
.flash{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,22,.72);
  backdrop-filter: blur(10px);
}

.flash-success{
  border-color: rgba(34,211,238,.22);
}
.flash-success .flash-ico{
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.22);
  color: rgba(34,211,238,.95);
}

.flash-warning{
  border-color: rgba(251,191,36,.22);
}
.flash-warning .flash-ico{
  background: rgba(251,191,36,.10);
  border-color: rgba(251,191,36,.22);
  color: rgba(251,191,36,.95);
}

.flash-error, .flash-danger{
  border-color: rgba(244,63,94,.22);
}
.flash-error .flash-ico, .flash-danger .flash-ico{
  background: rgba(244,63,94,.10);
  border-color: rgba(244,63,94,.22);
  color: rgba(244,63,94,.95);
}

.flash-info{
  border-color: rgba(168,85,247,.22);
}
.flash-info .flash-ico{
  background: rgba(168,85,247,.10);
  border-color: rgba(168,85,247,.22);
  color: rgba(168,85,247,.95);
}