* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0f0f12; color:#eaeaea; }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { width:100%; padding:.65rem .8rem; border-radius:.75rem; border:1px solid #333; background:#16161a; color:#eaeaea; }
button { cursor:pointer; border:none; background:#6c5ce7; font-weight:600; transition:.2s transform; }
button:hover { transform: translateY(-1px); }
label { display:block; margin: .5rem 0; font-size:.95rem; }

.topbar { position:sticky; top:0; display:flex; align-items:center; gap:1rem; padding: .75rem 1rem; background:#121218; border-bottom:1px solid #222; z-index:10;}
.brand { font-weight:800; letter-spacing:.5px; }
.brand span { color:#ffd166; }
.spacer { flex:1; }
.user { opacity:.9; }

.menu-toggle { display:none; }

.sidebar { position:fixed; top:56px; left:0; width:230px; height:calc(100vh - 56px); background:#121218; border-right:1px solid #222; padding:.75rem; display:flex; flex-direction:column; gap:.25rem; }
.sidebar a { padding:.6rem .8rem; border-radius:.75rem; transition:.15s background; }
.sidebar a:hover { background:#1b1b23; }
.sidebar a.danger { background:#2b1a1a; }
.content { margin-left:230px; padding:1rem; }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; }
.card { background:#151521; border:1px solid #232332; padding:1rem; border-radius:1rem; text-align:center; }
.welcome { margin-top:1rem; background:#151521; border:1px solid #232332; padding:1rem; border-radius:1rem; }

.table { width:100%; border-collapse: collapse; background:#151521; border:1px solid #232332; border-radius:1rem; overflow:hidden; }
.table th, .table td { padding:.7rem; border-bottom:1px solid #232332; font-size:.95rem; }
.table th { text-align:left; background:#19192a; }

.actions { display:flex; gap:.4rem; }
.actions a, .actions button { padding:.45rem .6rem; border-radius:.6rem; font-size:.9rem; }

.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; background:#151521; border:1px solid #232332; padding:1rem; border-radius:1rem; margin-bottom:1rem; }
.form { display:grid; gap:.6rem; }
.auth-card { max-width:420px; margin: 6vh auto; background:#151521; border:1px solid #232332; padding:1.2rem; border-radius:1rem; }
.alert { background:#2b2131; border:1px solid #4a2a52; padding:.7rem .9rem; border-radius:.75rem; margin:.5rem 0 1rem; }
.footer { text-align:center; padding:1rem; color:#aaa; }

@media (max-width: 900px) {
  .menu-toggle { display:inline-flex; }
  .sidebar { transform: translateX(-100%); transition:.2s transform; }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left:0; padding:1rem; }
  .form-grid { grid-template-columns: 1fr; }
}


/* === Equipo === */
.equipo { margin-top: 2rem; padding: 1rem; background: #111118; border: 1px solid #232332; border-radius: 1rem; }
.equipo h2 { margin: 0 0 1rem 0; font-size: 1.5rem; }
.equipo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.equipo-card { background: #15151c; border: 1px solid #232332; border-radius: 1rem; padding: 1rem; }
.equipo-foto { aspect-ratio: 1/1; width: 100%; overflow: hidden; border-radius: .75rem; background: #0f0f12; border: 1px dashed #2a2a3a; display:flex; align-items:center; justify-content:center; }
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; display:block; }
.equipo h3 { margin: .8rem 0 .2rem 0; }
.equipo-rol { opacity: .8; margin: 0 0 .5rem 0; }
.equipo-cualidades { margin: 0; padding-left: 1rem; display: grid; gap: .25rem; }
@media (max-width: 1100px) { .equipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .equipo-grid { grid-template-columns: 1fr; } }