:root { --primary: #1e3a8a; --bg: #f3f4f6; --success: #10b981; --danger: #ef4444; }
body { font-family: 'Inter', sans-serif; background: var(--bg); margin: 0; }
.hidden { display: none !important; }

.login-box { background: white; padding: 40px; border-radius: 16px; width: 300px; margin: 100px auto; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.login-box input { width: 100%; padding: 10px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc; }

.hero { background: var(--primary); color: white; text-align: center; padding: 20px; }
.main-options { display: flex; gap: 20px; justify-content: center; padding: 20px; }
.card { background: white; padding: 20px; border-radius: 12px; cursor: pointer; width: 200px; text-align: center; }

.analisis-layout { display: flex; gap: 20px; padding: 20px; }
.sidebar-panel { flex: 0 0 300px; }
.video-panel { flex: 1; }

#playerWrap { background: #000; width: 100%; border-radius: 12px; min-height: 300px; }
video { width: 100%; }

.btn-penal-local { background: #1e40af; color: white; padding: 15px; }
.btn-penal-visita { background: #b91c1c; color: white; padding: 15px; }
.btn-success { background: var(--success); color: white; padding: 10px; width: 100%; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; border-radius: 8px; overflow: hidden; }
.data-table th { background: #eee; padding: 12px; text-align: left; }
.data-table td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }