/* ═══════════════════════════════════════════════════
   Edge.Manager — Estilos base (adaptado del template ProCampo)
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
aside::-webkit-scrollbar { width: 3px; }
aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

::selection { background: #b1e9c7; color: #082719; }

/* ─── Form controls (Tailwind CDN carga sin el plugin `forms`) ─── */
.form-label { display: block; font-size: .75rem; font-weight: 600; color: #4b5563; margin-bottom: .375rem; }
.form-input {
    width: 100%; padding: .625rem .875rem; border: 1px solid #e5e7eb; border-radius: .75rem;
    font-size: .875rem; background-color: #fff; color: #111827; line-height: 1.25rem;
}
.form-input:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 2px rgb(100 116 139 / .2); }
.form-input:disabled { background-color: #f9fafb; color: #6b7280; cursor: not-allowed; }
.form-input-xs {
    width: 100%; padding: .375rem .5rem; border: 1px solid #e5e7eb; border-radius: .5rem;
    font-size: .75rem; background-color: #fff; color: #111827;
}
.form-input-xs:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 2px rgb(100 116 139 / .2); }

/* ─── Animations ──────────────────────────────── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(38, 165, 98, 0.3); } 50% { box-shadow: 0 0 0 8px rgba(38, 165, 98, 0); } }

.animate-fade-in-up { animation: fadeInUp 0.45s cubic-bezier(.21,1.02,.73,1) both; }
.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
.animate-slide-in { animation: slideInRight 0.3s ease-out both; }

/* ─── KPI Cards ────────────────────────────────── */
.kpi-card { transition: transform 0.2s cubic-bezier(.21,1.02,.73,1), box-shadow 0.2s ease; position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 999px 999px 0 0; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -8px rgba(0,0,0,0.1), 0 4px 12px -4px rgba(0,0,0,0.05); }
.kpi-card.kpi-green::before { background: linear-gradient(90deg, #48c07e, #26a562); }
.kpi-card.kpi-blue::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.kpi-card.kpi-amber::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.kpi-card.kpi-red::before { background: linear-gradient(90deg, #f87171, #ef4444); }
.kpi-card.kpi-purple::before { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.kpi-card.kpi-teal::before { background: linear-gradient(90deg, #2dd4bf, #14b8a6); }

/* ─── Table ───────────────────────────────────── */
.table-row-hover { transition: background 0.15s ease; }
.table-row-hover:hover { background-color: #fafbfc; }

/* ─── Status dots ─────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.active { background: #48c07e; box-shadow: 0 0 0 3px rgba(72,192,126,0.2); }
.status-dot.inactive { background: #d1d5db; }
.status-dot.warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.status-dot.danger { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); animation: pulse-glow 2s infinite; }

/* ─── Empty / Skeleton ────────────────────────── */
.empty-state { padding: 3rem; text-align: center; color: #9ca3af; }
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 0.5rem; }

/* ─── Page transitions ────────────────────────── */
main { animation: fadeIn 0.2s ease-out; }

/* ─── Gradient text helper ────────────────────── */
.text-gradient { background: linear-gradient(135deg, #26a562, #48c07e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }