/* ===================================================
   FoodBiz Finance Pro — style.css
   Global styles, component classes, animations
   =================================================== */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #2d3d54; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

/* ---- Tab Sections ---- */
.tab-section { display: none; }
.tab-section.active { display: block; animation: fadeSlideIn 0.3s ease; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Nav Buttons ---- */
.nav-btn {
  @apply px-4 py-2 text-sm font-medium rounded-xl text-slate-400 transition-all duration-200;
}
.nav-btn:hover { @apply text-white bg-white/5; }
.nav-btn.active { @apply text-white bg-brand-600/60 shadow-glow; }

/* ---- Glass Card ---- */
.glass-card {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  padding: 1.25rem;
}

/* ---- KPI Card ---- */
.kpi-card {
  @apply glass-card flex items-center gap-4 border;
}
.kpi-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center text-2xl flex-shrink-0;
}
.kpi-label { @apply text-xs text-slate-500 mb-0.5; }
.kpi-value { @apply text-2xl font-display font-bold; }

/* ---- Metric Card ---- */
.metric-card {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  padding: 1rem;
}

/* ---- Section Title ---- */
.section-title { @apply text-sm font-semibold text-slate-300 uppercase tracking-wider; }

/* ---- Badges ---- */
.badge-green {
  @apply text-xs bg-emerald-500/15 text-emerald-400 px-2.5 py-1 rounded-full;
}
.badge-red {
  @apply text-xs bg-red-500/15 text-red-400 px-2.5 py-1 rounded-full;
}
.badge-amber {
  @apply text-xs bg-amber-500/15 text-amber-400 px-2.5 py-1 rounded-full;
}

/* ---- Buttons ---- */
.btn-primary {
  @apply bg-brand-600 hover:bg-brand-500 text-white font-semibold px-4 py-2 rounded-xl transition-all duration-200 shadow-glow;
}
.btn-secondary {
  @apply bg-surface-600 hover:bg-surface-500 text-slate-300 font-medium px-4 py-2 rounded-xl border border-white/10 transition-all duration-200;
}
.btn-danger {
  @apply bg-red-600/80 hover:bg-red-500 text-white font-semibold px-4 py-2 rounded-xl transition-all duration-200;
}
.btn-sm { @apply px-3 py-1 text-xs; }

/* ---- Form Inputs ---- */
.input-field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(10, 15, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
  color: #f1f5f9;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.input-field:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.input-field::placeholder { color: #475569; }
.input-field option { background: #111827; color: #f1f5f9; }

.input-label { @apply block text-xs text-slate-500 mb-1; }

/* ---- Result Box ---- */
.result-box {
  background: rgba(10, 15, 30, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.75rem;
  padding: 0.75rem;
  text-align: center;
}
.result-label { @apply text-xs text-slate-500 mb-1; }
.result-value { @apply text-lg font-display font-bold; }

/* ---- Receta Card ---- */
.receta-item {
  padding: 0.75rem;
  background: rgba(10,15,30,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.receta-item:hover { border-color: rgba(14,165,233,0.4); background: rgba(14,165,233,0.05); }
.receta-item.active { border-color: #0ea5e9; background: rgba(14,165,233,0.08); }

/* ---- Ingrediente Row ---- */
.ingrediente-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

/* ---- Transaction Items ---- */
.txn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  background: rgba(10,15,30,0.5);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0.625rem;
  transition: border-color 0.15s;
}
.txn-item:hover { border-color: rgba(255,255,255,0.12); }
.txn-ingreso { border-left: 3px solid #22c55e; }
.txn-egreso  { border-left: 3px solid #ef4444; }

/* ---- Cuenta Item ---- */
.cuenta-item {
  padding: 0.75rem;
  background: rgba(10,15,30,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  transition: border-color 0.15s;
}
.cuenta-item.vencida { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.03); }
.cuenta-item.proxima  { border-color: rgba(234,179,8,0.4);  background: rgba(234,179,8,0.03); }

/* ---- Fijo Item ---- */
.fijo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: rgba(10,15,30,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
}

/* ---- Transaction Type Switch ---- */
.txn-type-btn {
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border: none;
  transition: background 0.15s, color 0.15s;
}
.txn-type-btn.active { background: #0284c7; color: #fff; }
#txn-tipo-egreso.active { background: #dc2626; color: #fff; }

/* ---- Modals ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  animation: scaleIn 0.2s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-close {
  width: 2rem; height: 2rem;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 0.5rem;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }

/* ---- Table ---- */
table { border-collapse: collapse; }
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ---- Toast Notification ---- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  z-index: 200;
  animation: toastIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 320px;
  backdrop-filter: blur(10px);
}
.toast-success { background: rgba(34,197,94,0.9); border: 1px solid rgba(34,197,94,0.4); }
.toast-error   { background: rgba(239,68,68,0.9);  border: 1px solid rgba(239,68,68,0.4); }
.toast-info    { background: rgba(14,165,233,0.9); border: 1px solid rgba(14,165,233,0.4); }

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.toast.removing { animation: toastOut 0.3s ease forwards; }

/* ---- Pulse animation for alerts ---- */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
.pulse { animation: pulse-subtle 2s ease-in-out infinite; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .col-span-2  { grid-column: span 1; }
  .col-span-2.wide { grid-column: span 2; }
}