/* Medi Rep Cloud — Login Page */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.mrc-login-body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:  #f4f7fb;
  min-height:  100vh;
}

.mrc-login-page {
  display:   flex;
  min-height: 100vh;
}

/* ── Panel izquierdo decorativo ── */
.mrc-login-panel {
  flex:       1;
  background: linear-gradient(135deg, #1a6fc4 0%, #0d4a8a 60%, #083870 100%);
  display:    flex;
  align-items: center;
  justify-content: center;
  position:   relative;
  overflow:   hidden;
}

.mrc-login-panel::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.mrc-login-panel__content {
  position:   relative;
  z-index:    1;
  text-align: center;
  padding:    40px;
  color:      #fff;
  max-width:  420px;
}

.mrc-login-panel__logo {
  height:       70px;
  object-fit:   contain;
  margin-bottom: 24px;
  filter:       drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.mrc-login-panel__title {
  font-size:   2.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.mrc-login-panel__subtitle {
  font-size:   1rem;
  opacity:     .85;
  margin-bottom: 36px;
  line-height: 1.5;
}

.mrc-login-panel__features {
  list-style:  none;
  text-align:  left;
  display:     flex;
  flex-direction: column;
  gap:         14px;
}

.mrc-login-panel__features li {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   15px;
  opacity:     .9;
}

.mrc-feat-icon { font-size: 20px; }

/* ── Formulario derecho ── */
.mrc-login-form-wrap {
  width:           480px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         40px 24px;
  background:      #f4f7fb;
}

.mrc-login-card {
  width:         100%;
  max-width:     400px;
  background:    #fff;
  border-radius: 16px;
  box-shadow:    0 4px 32px rgba(0,0,0,.10);
  overflow:      hidden;
}

.mrc-login-card__header {
  background: linear-gradient(135deg, #1a6fc4, #0d4a8a);
  color:      #fff;
  text-align: center;
  padding:    32px 24px 24px;
}

.mrc-login-card__logo {
  height:        50px;
  object-fit:    contain;
  margin-bottom: 12px;
}

.mrc-login-card__icon {
  font-size:     40px;
  margin-bottom: 12px;
  display:       block;
}

.mrc-login-card__title {
  font-size:   1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.mrc-login-card__subtitle {
  font-size: 13px;
  opacity:   .85;
}

/* Alerta */
.mrc-login-alert {
  margin:        16px 24px 0;
  padding:       12px 16px;
  border-radius: 8px;
  font-size:     13px;
  font-weight:   600;
  display:       none;
}

.mrc-login-alert-error   { background: #fdf2f2; color: #922b21; border: 1px solid #f5c6c6; }
.mrc-login-alert-success { background: #e8f8f0; color: #1e8449; border: 1px solid #a9dfbf; }

/* Formulario */
.mrc-login-form { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.mrc-login-field { display: flex; flex-direction: column; gap: 6px; }

.mrc-login-label { font-size: 13px; font-weight: 600; color: #2c3e50; }

.mrc-login-input-wrap { position: relative; }

.mrc-login-input-icon {
  position:    absolute;
  left:        12px;
  top:         50%;
  transform:   translateY(-50%);
  font-size:   16px;
  line-height: 1;
  pointer-events: none;
}

.mrc-login-input {
  width:         100%;
  padding:       11px 40px 11px 40px;
  border:        1px solid #dce3ec;
  border-radius: 8px;
  font-size:     14px;
  font-family:   inherit;
  color:         #2c3e50;
  background:    #fff;
  transition:    border-color .2s, box-shadow .2s;
}

.mrc-login-input:focus {
  outline:      none;
  border-color: #1a6fc4;
  box-shadow:   0 0 0 3px rgba(26,111,196,.15);
}

.mrc-toggle-password {
  position:   absolute;
  right:      12px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  font-size:  16px;
  opacity:    .6;
  padding:    4px;
  line-height: 1;
}
.mrc-toggle-password:hover { opacity: 1; }

/* Opciones recordar / olvidé */
.mrc-login-options {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-size:       13px;
}

.mrc-login-remember {
  display:     flex;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
  color:       #2c3e50;
}

.mrc-login-forgot { color: #1a6fc4; text-decoration: none; }
.mrc-login-forgot:hover { text-decoration: underline; }

/* Botón submit */
.mrc-login-btn {
  background:    linear-gradient(135deg, #1a6fc4, #0d4a8a);
  color:         #fff;
  border:        none;
  padding:       13px;
  border-radius: 8px;
  font-size:     15px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  transition:    opacity .2s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
}
.mrc-login-btn:hover:not(:disabled) { opacity: .9; }
.mrc-login-btn:disabled { opacity: .6; cursor: not-allowed; }

.mrc-spin {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        3px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     mrc-login-spin .7s linear infinite;
}
@keyframes mrc-login-spin { to { transform: rotate(360deg); } }

/* Footer */
.mrc-login-footer {
  text-align:  center;
  padding:     16px 24px;
  font-size:   12px;
  color:       #95a5a6;
  border-top:  1px solid #f0f0f0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .mrc-login-panel { display: none; }
  .mrc-login-form-wrap { width: 100%; }
}

@media (max-width: 480px) {
  .mrc-login-form-wrap { padding: 20px 16px; }
  .mrc-login-card { border-radius: 12px; }
}