:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#2563eb;
  --shadow:0 12px 35px rgba(2,6,23,.08);
  --radius:18px;
}

*{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Card */
.role-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

/* Títulos */
.role-title{
  font-size:20px;
  font-weight:800;
  margin:0 0 6px;
}

.role-subtitle{
  font-size:13px;
  color:var(--muted);
  margin-bottom:18px;
}

/* Lista */
.role-list{
  display:grid;
  gap:12px;
}

/* Botón */
.role-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  transition:all .15s ease;
}

.role-btn:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
  transform:translateY(-1px);
}

.role-btn span{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}

/* Icono */
.role-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
}

/* Colores por rol 
.role-administrador .role-icon{
  background:linear-gradient(135deg,#2563eb,#60a5fa);
}
.role-mesero .role-icon{
  background:linear-gradient(135deg,#16a34a,#4ade80);
}
.role-cocina .role-icon{
  background:linear-gradient(135deg,#dc2626,#f87171);
}*/

/* ===============================
   CENTER SOLO SELECT ROLE PAGE
   =============================== */

.role-select-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-select-page .wrap{
  width: 100%;
  max-width: 420px;
}