/*
 * Mirlo Keycloak Theme
 * Based on Mirlo Design System v1.2
 * Compatible with Keycloak 18-26+
 */

/* ==================== CSS VARIABLES (Mirlo Design System) ==================== */
:root {
  /* Paleta Institucional */
  --carbon-black: #1F262C;
  --cool-gray: #DFDCDA;
  --stone-silver: #A69C97;
  --bright-sand: #F7D5AE;
  --golden-yellow: #FFDD44;
  --marron-oak: #430100;
  --sunset-orange: #E36326;

  /* Paleta Secundaria */
  --electric-green: #1BFD6B;
  --sky-blue: #2FD4FD;
  --baby-blue: #CAF4FD;

  /* Auxiliares UI */
  --gray-text: #6B635D;
  --surface-page: #F7F6F5;
  --surface-hover: #F2F1F0;
  --border-light: #ECEAE8;
  --white: #FFFFFF;
}

/* ==================== TYPOGRAPHY - Force Inter everywhere ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ==================== GLOBAL RESETS ==================== */
html,
body,
.login-pf,
.login-pf body,
body.login-pf,
#kc-container,
#kc-container-wrapper,
.pf-c-login,
.pf-c-login__container,
.pf-c-login__main {
  background: var(--surface-page) !important;
  background-color: var(--surface-page) !important;
  min-height: 100vh !important;
}

/* ==================== LAYOUT - Single centered card ==================== */
.login-pf,
body.login-pf {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}

.login-pf .container-fluid,
.login-pf .container,
#kc-container,
#kc-container-wrapper {
  width: 100% !important;
  max-width: 480px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==================== FIX NESTED CARDS - Only one card ==================== */
/* Main card - the outer container */
#kc-content {
  background: var(--white) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: none !important;
  padding: 40px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Remove card styling from inner elements */
.login-pf .card-pf,
.login-pf #kc-form,
#kc-form-wrapper,
#kc-form-login,
.kc-form-card,
#kc-form-buttons,
.pf-c-login__main-body {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* ==================== LOGO ==================== */
#kc-header {
  text-align: center !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  border: none !important;
}

#kc-header::before {
  content: '' !important;
  display: block !important;
  background-image: url('../img/logo.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  height: 50px !important;
  width: 180px !important;
  margin: 0 auto 16px auto !important;
}

/* Hide text header, show only logo */
#kc-header-wrapper {
  display: none !important;
}

/* Also hide the duplicate title inside the form */
.login-pf-header,
#kc-page-title,
h1#kc-page-title {
  display: none !important;
}

/* Remove all borders and lines */
#kc-header,
#kc-header-wrapper,
.pf-c-login__header,
.pf-c-login__main-header,
.pf-c-brand,
hr {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

hr {
  display: none !important;
}

/* Hide pseudo-elements that create lines */
.login-pf .container-fluid::before,
.login-pf .container-fluid::after,
#kc-header::after,
#kc-header-wrapper::before,
#kc-header-wrapper::after,
.pf-c-login__main-header::before,
.pf-c-login__main-header::after,
.pf-c-login__main::before,
.pf-c-login__main::after,
.pf-c-login__container::before,
.pf-c-login__container::after {
  display: none !important;
  content: none !important;
}

/* ==================== FORM LABELS ==================== */
.login-pf label,
.login-pf .control-label,
#kc-form label,
.pf-c-form__label,
label.pf-c-form__label {
  color: var(--carbon-black) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ==================== INPUTS ==================== */
.login-pf input[type="text"],
.login-pf input[type="password"],
.login-pf input[type="email"],
.login-pf .form-control,
#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form .form-control,
.pf-c-form-control,
input.pf-c-form-control {
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  color: var(--carbon-black) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color 150ms ease !important;
  box-shadow: none !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.login-pf input:focus,
.login-pf .form-control:focus,
#kc-form input:focus,
.pf-c-form-control:focus,
input.pf-c-form-control:focus {
  border-color: var(--stone-silver) !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: var(--white) !important;
}

.login-pf input::placeholder,
.login-pf .form-control::placeholder {
  color: var(--stone-silver) !important;
}

/* ==================== PRIMARY BUTTON (CTA) ==================== */
.login-pf .btn-primary,
.login-pf input[type="submit"],
.login-pf button[type="submit"],
#kc-form .btn-primary,
#kc-form input[type="submit"],
#kc-login-form .btn-primary,
.pf-c-button.pf-m-primary,
button.pf-c-button.pf-m-primary,
input.pf-c-button.pf-m-primary {
  background: var(--sunset-orange) !important;
  background-color: var(--sunset-orange) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--white) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: opacity 150ms ease !important;
  cursor: pointer !important;
  text-transform: none !important;
  margin-top: 8px !important;
}

.login-pf .btn-primary:hover,
.login-pf input[type="submit"]:hover,
.login-pf button[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover {
  background: var(--sunset-orange) !important;
  opacity: 0.9 !important;
  transform: none !important;
  box-shadow: none !important;
}

.login-pf .btn-primary:focus,
.login-pf input[type="submit"]:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ==================== LINKS ==================== */
.login-pf a,
.login-pf .btn-link,
#kc-form a,
#kc-registration a,
#kc-info a {
  color: var(--sunset-orange) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.login-pf a:hover,
.login-pf .btn-link:hover {
  color: var(--sunset-orange) !important;
  text-decoration: underline !important;
}

/*
 * Anchors que son BOTONES, no links: las reglas de arriba usan !important y
 * por eso le ganan al style inline del <a>. Necesitan mayor especificidad.
 */
a#continue-button,
a#continue-button:hover,
a#continue-button:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ==================== FORM OPTIONS (Remember me, Forgot password) ==================== */
#kc-form-options {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 16px 0 !important;
}

#kc-form-options .checkbox,
#kc-form-options span,
.login-pf .checkbox label,
#kc-form-options label {
  color: var(--gray-text) !important;
  font-size: 14px !important;
}

/* ==================== SOCIAL LOGIN - Inside the card ==================== */
#kc-social-providers {
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: none !important;
  background: transparent !important;
}

/* "O inicia sesión con" text - match Recordarme style */
#kc-social-providers h4,
#kc-social-providers .kc-social-section-title,
.kc-social-section-title,
#kc-social-providers > h4,
.login-pf #kc-social-providers h4 {
  color: var(--gray-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  font-style: normal !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#kc-social-providers ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#kc-social-providers li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Google button - full width with logo */
#kc-social-providers a,
.social-provider-link,
.zocial,
.zocial.google {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  color: var(--carbon-black) !important;
  padding: 14px 24px !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
  transition: background-color 150ms ease !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  width: 100% !important;
}

/* Mirlo: Space out social buttons when there is more than one (e.g. Google + Apple) */
#kc-social-providers a + a {
  margin-top: 12px !important;
}

#kc-social-providers a:hover {
  background: var(--surface-hover) !important;
  border-color: var(--cool-gray) !important;
}

/* Hide broken FontAwesome icon in Google button, keep text visible */
#kc-social-providers a i,
#kc-social-providers a .fa,
#kc-social-providers a .fa-google,
#kc-social-providers a [class^="fa-"],
.zocial::before {
  display: none !important;
}

/* Style the social provider text */
#kc-social-providers a span,
#kc-social-providers a .kc-social-icon-text {
  display: inline !important;
  color: var(--carbon-black) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Add Google logo before the link */
/* Mirlo: scoped by id (not just "#kc-social-providers a") so a second IdP
   button (e.g. Apple) doesn't inherit the Google icon. See #social-apple below. */
#social-google::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background-image: url('../img/google.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-right: 8px !important;
}

/* Add Apple logo before the link */
#social-apple::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background-image: url('../img/apple.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-right: 8px !important;
}

/* ==================== REGISTRATION LINK (Crear cuenta) ==================== */
#kc-registration {
  text-align: center !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border-light) !important;
}

#kc-registration span {
  color: var(--gray-text) !important;
  font-size: 14px !important;
}

/* ==================== INFO WRAPPER ==================== */
#kc-info-wrapper,
#kc-info {
  text-align: center !important;
  margin-top: 16px !important;
  color: var(--gray-text) !important;
  background: transparent !important;
}

/* ==================== ALERTS ==================== */
.login-pf .alert,
.alert,
.pf-c-alert,
#kc-content-wrapper .alert,
[class^="alert-"],
[class*=" alert-"] {
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  border-width: 0 !important;
  border-left: 4px solid !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Alert icon container */
.pf-c-alert__icon,
[class^="alert-"] .pf-c-alert__icon,
[class*=" alert-"] .pf-c-alert__icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Alert text - ensure it wraps properly */
.login-pf .alert span,
.alert span,
.pf-c-alert span,
#kc-content-wrapper .alert span,
[class^="alert-"] span,
[class*=" alert-"] span,
.pf-c-alert__title,
.kc-feedback-text {
  flex: 1 !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

.login-pf .alert-warning,
.alert-warning,
.pf-c-alert.pf-m-warning {
  background-color: rgba(255, 221, 68, 0.2) !important;
  border-left-color: var(--golden-yellow) !important;
  color: var(--carbon-black) !important;
}

.login-pf .alert-error,
.login-pf .alert-danger,
.alert-error,
.alert-danger,
.pf-c-alert.pf-m-danger {
  background-color: rgba(67, 1, 0, 0.1) !important;
  border-left-color: var(--marron-oak) !important;
  color: var(--marron-oak) !important;
}

.login-pf .alert-success,
.alert-success,
.pf-c-alert.pf-m-success {
  background-color: rgba(27, 253, 107, 0.15) !important;
  border-left-color: var(--electric-green) !important;
  color: var(--carbon-black) !important;
}

.login-pf .alert-info,
.alert-info,
.pf-c-alert.pf-m-info {
  background-color: rgba(202, 244, 253, 0.5) !important;
  border-left-color: var(--sky-blue) !important;
  color: var(--carbon-black) !important;
}

/* ==================== CHECKBOX ==================== */
.login-pf input[type="checkbox"],
input[type="checkbox"] {
  accent-color: var(--sunset-orange) !important;
  width: 16px !important;
  height: 16px !important;
}

/* ==================== LOCALE SELECTOR ==================== */
#kc-locale,
#kc-locale-wrapper {
  color: var(--stone-silver) !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
}

#kc-locale a,
#kc-locale-dropdown a {
  color: var(--stone-silver) !important;
}

/* ==================== PASSWORD VISIBILITY TOGGLE ==================== */
/* Mirlo custom password toggle button with inline SVG */
.mirlo-password-toggle {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-left: none !important;
  padding: 0 14px !important;
  min-width: 44px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.mirlo-password-toggle:hover {
  background: var(--surface-hover) !important;
}

/* CRITICAL: Hide eye emoji from button ::before - maximum specificity */
button.pf-c-button.pf-m-control.mirlo-password-toggle::before,
button.pf-c-button.pf-m-control.mirlo-password-toggle::after,
.pf-c-input-group button.pf-c-button.pf-m-control::before,
.pf-c-input-group button.pf-c-button.pf-m-control::after,
.pf-c-input-group > button[data-password-toggle]::before,
.pf-c-input-group > button[data-password-toggle]::after,
button.pf-c-button.pf-m-control[data-password-toggle]::before,
button.pf-c-button.pf-m-control[data-password-toggle]::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* Fallback with even more specificity */
.pf-c-input-group .pf-c-button.pf-m-control.mirlo-password-toggle[data-password-toggle][type="button"]::before {
  content: none !important;
  display: none !important;
}

/* Also hide any ::before on the span inside the button */
.mirlo-toggle-icon::before,
.mirlo-toggle-icon::after,
.pf-c-button.pf-m-control span::before,
.pf-c-button.pf-m-control span::after,
button[data-password-toggle] span::before,
button[data-password-toggle] span::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}

.mirlo-password-toggle:hover .mirlo-toggle-icon {
  color: var(--carbon-black) !important;
}

.mirlo-toggle-icon {
  display: block !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--stone-silver) !important;
  transition: color 150ms ease !important;
  line-height: 1 !important;
}

/* Button container for password toggle - fallback for non-custom templates */
.pf-c-input-group .pf-c-button.pf-m-control,
.pf-c-button.pf-m-control[data-password-toggle],
button.pf-c-button.pf-m-control,
.pf-c-input-group > button,
.pf-c-input-group > button.pf-c-button,
.pf-c-input-group > .pf-c-button.pf-m-control,
button[data-password-toggle],
.login-pf .pf-c-input-group button,
#kc-form .pf-c-input-group button {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-left: none !important;
  padding: 0 12px !important;
  min-width: 44px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
}

.pf-c-input-group .pf-c-button.pf-m-control:hover {
  background: var(--surface-hover) !important;
}

/* FORCE hide FontAwesome eye icons - very specific selectors */
.pf-c-button.pf-m-control i.fa,
.pf-c-button.pf-m-control i.fa-eye,
.pf-c-button.pf-m-control i.fa-eye-slash,
.pf-c-button.pf-m-control .fa,
.pf-c-button.pf-m-control .fa-eye,
.pf-c-button.pf-m-control .fa-eye-slash,
.pf-c-button.pf-m-control[data-password-toggle] i,
.pf-c-input-group .pf-c-button i,
.pf-c-input-group button i.fa,
button[data-password-toggle] i,
i.fa-eye,
i.fa-eye-slash,
.fa.fa-eye,
.fa.fa-eye-slash {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  overflow: hidden !important;
}

/* CRITICAL: Force show SVG eye icon */
.mirlo-eye-icon,
.pf-c-button.pf-m-control svg,
.pf-c-button.pf-m-control svg.mirlo-eye-icon,
button[data-password-toggle] svg,
.pf-c-input-group button svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
}

/* CRITICAL: Remove FontAwesome ::before pseudo-element content */
.pf-c-button.pf-m-control i.fa::before,
.pf-c-button.pf-m-control i.fa-eye::before,
.pf-c-button.pf-m-control i.fa-eye-slash::before,
.pf-c-button.pf-m-control .fa::before,
.pf-c-button.pf-m-control .fa-eye::before,
.pf-c-button.pf-m-control .fa-eye-slash::before,
.pf-c-input-group .pf-c-button i::before,
.pf-c-input-group button i.fa::before,
button[data-password-toggle] i::before,
i.fa-eye::before,
i.fa-eye-slash::before,
.fa.fa-eye::before,
.fa.fa-eye-slash::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
}

/* ==================== INPUT GROUP (password with toggle) ==================== */
.pf-c-input-group,
.input-group {
  display: flex !important;
  align-items: stretch !important;
  margin-bottom: 16px !important;
}

.pf-c-input-group input,
.input-group input {
  flex: 1 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}

.pf-c-input-group button,
.input-group button,
.input-group .input-group-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-left: none !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* ==================== TEXT CONTENT ==================== */
.login-pf p,
.login-pf span,
#kc-content p,
#kc-info p {
  color: var(--carbon-black) !important;
  line-height: 1.6 !important;
}

/* ==================== RESPONSIVE ==================== */
/* Desktop */
@media (min-width: 769px) {
  #kc-content {
    min-width: 420px !important;
    padding: 48px !important;
  }

  #kc-header::before {
    height: 60px !important;
    width: 200px !important;
  }
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
  #kc-content {
    max-width: 420px !important;
    margin: 20px !important;
    padding: 32px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #kc-content {
    margin: 16px !important;
    padding: 24px !important;
    max-width: calc(100% - 32px) !important;
  }

  #kc-header::before {
    height: 40px !important;
    width: 140px !important;
  }
}

/* ==================== PHONE FIELD (intl-tel-input) ==================== */
.iti {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  --iti-border-color: var(--border-light);
  --iti-dropdown-bg: var(--white);
  --iti-hover-color: #F2F1F0;
  --iti-path-flags-1x: url("../vendor/intl-tel-input/img/flags.webp");
  --iti-path-flags-2x: url("../vendor/intl-tel-input/img/flags@2x.webp");
  --iti-path-globe-1x: url("../vendor/intl-tel-input/img/globe.webp");
  --iti-path-globe-2x: url("../vendor/intl-tel-input/img/globe@2x.webp");
}

/* No padding-left here: intl-tel-input sets it inline to fit the dial code. */
.iti input.mirlo-phone-input {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  color: var(--carbon-black);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 16px;
  font-size: 15px;
  line-height: 1.5;
  height: auto;
  width: 100%;
  box-shadow: none;
  transition: border-color 150ms ease;
}

.iti input.mirlo-phone-input:focus {
  border-color: var(--stone-silver);
  outline: none;
  box-shadow: none;
}

.iti input.mirlo-phone-input[aria-invalid="true"] {
  border-color: #D92D20;
}

.iti__country-container .iti__selected-country {
  border-radius: 8px 0 0 8px;
}

/* Keep the dropdown above the card and other content. */
.iti__dropdown-content {
  z-index: 1060;
  border-radius: 8px;
  color: var(--carbon-black);
  font-size: 14px;
}

.iti__search-input {
  border: 0;
  border-bottom: 1px solid var(--border-light);
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}