/* Scrollbar oscuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* Focus visible consistente */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; }

/* Toast animations */
.toast-enter { animation: toastIn 0.2s ease-out; }
.toast-exit { animation: toastOut 0.2s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(100%); opacity: 0; } }

/* Spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #C9A84C;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tabla striped */
.tbl-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.tbl-row:hover { background: rgba(201,168,76,0.06); }

/* Cell overflow elegante */
.cell-ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges de estado */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.badge-green { background: rgba(45,138,86,0.2); color: #66cc88; border: 1px solid rgba(45,138,86,0.4); }
.badge-amber { background: rgba(201,168,76,0.2); color: #E4D5A0; border: 1px solid rgba(201,168,76,0.4); }
.badge-red { background: rgba(214,69,69,0.2); color: #ff8b8b; border: 1px solid rgba(214,69,69,0.4); }
.badge-blue { background: rgba(67,138,214,0.2); color: #8ab5e6; border: 1px solid rgba(67,138,214,0.4); }
.badge-gray { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.15); }

/* KPI card hover */
.kpi-card { transition: transform 0.15s, border-color 0.15s; }
.kpi-card:hover { transform: translateY(-1px); border-color: rgba(201,168,76,0.4); }

/* Link underline gold */
.link { color: #C9A84C; cursor: pointer; }
.link:hover { color: #E4D5A0; text-decoration: underline; }

/* Botones secundarios */
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; transition: background 0.15s; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Form fields consistency */
input, select, textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: #C9A84C; }
input[readonly] { opacity: 0.6; }
label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-bottom: 4px; margin-top: 10px; }

/* Estados de carga */
.loading-shimmer { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Sidebar active link */
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: rgba(255,255,255,0.7); cursor: pointer; transition: background 0.1s, color 0.1s; font-size: 14px; }
.nav-link:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-link.active { background: rgba(201,168,76,0.12); color: #C9A84C; font-weight: 600; }

/* Login form */
.login-card { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px); }