*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }

.left-panel {
  background-color: #422f89;
}

.role-card { cursor: pointer; transition: border 0.15s, background 0.15s; }
.role-card.active { border: 2px solid #422f89 !important; background: #EAF3DE !important; }
.role-card.active .role-icon { color: #422f89 !important; }
.role-card.active .role-label { color: #422f89 !important; font-weight: 600; }

input { transition: border-color 0.15s, box-shadow 0.15s; }
input:focus { outline: none; border-color: #422f89 !important; box-shadow: 0 0 0 3px rgba(66,47,137,0.12); }
.btn-login { transition: background 0.15s, transform 0.1s; }
.btn-login:hover { background: #422f89 !important; }
.btn-login:active { transform: scale(0.98); }

/* Mobile: panel derecho ocupa toda la pantalla */
@media (max-width: 767px) {
  .left-panel { display: none !important; }
  .right-panel { width: 100% !important; overflow-y: auto; }
}

/* Tablet: panel izquierdo más angosto */
@media (min-width: 768px) and (max-width: 1023px) {
  .left-panel { width: 45% !important; }
  .right-panel { width: 55% !important; }
}