/* =============================================================
   CVT — Login page custom styles
   Subir como Web File en Portal Management: /cvt-login.css
   Aplica a: Iniciar sesión, Canjear invitación, Registro post-invitación
   ============================================================= */

/* ---- Variables ---- */
:root {
  --cvt: #7A1428;
  --cvt-light: #F5E8EA;
  --cvt-mid: #C4687A;
  --cvt-dark: #5a0f1e;
  --bg: #F3F4F6;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #6B7280;
  --border: rgba(0,0,0,0.12);
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.10);
}

/* ---- Reset página ---- */
html, body {
  height: 100%;
  background: var(--bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Ocultar navbar del portal si existe */
.navbar { display: none !important; }

/* ---- Layout centrado ---- */
.container.wrapper-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* ---- Card principal ---- */
#content-container.container.wrapper-body #mainContent.page-content {
  background: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 820px !important;
  padding: 0 !important;
  display: block !important;
}


/* Cabecera CVT con logo */
.page-content::before {
  content: '';
  display: block;
  height: 6px;
  background: var(--cvt);
}

/* ---- Header logo — requiere agregar este bloque al web template ---- */
/* Si agregás <div class="cvt-login-header"> al template, esto lo estila */
.cvt-login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--bg);
}

.cvt-login-header img {
  height: 52px;
  width: auto;
}

/* ---- Tabs de navegación ---- */
.nav.nav-tabs.nav-account {
  border: none !important;
  background: var(--card-bg) !important;
  display: flex !important;
  padding: 24px 32px 0 !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 820px !important;
}

.nav.nav-tabs.nav-account > li {
  margin-bottom: 0 !important;
  border: none !important;
}

.nav.nav-tabs.nav-account > li > a {
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  transition: all 0.15s !important;
}

.nav.nav-tabs.nav-account > li > a:hover {
  background: var(--cvt-light) !important;
  color: var(--cvt) !important;
}

.nav.nav-tabs.nav-account > li.active > a {
  background: var(--cvt-light) !important;
  color: var(--cvt) !important;
  font-weight: 600 !important;
}

/* ---- Contenido del formulario (página Iniciar sesión, que usa .row) ---- */
.page-content .page-copy,
.page-content .row {
  padding: 24px 32px 32px !important;
}

/* ---- Contenido del formulario en "Canjear invitación" (no usa .row) ---- */
#mainContent form[action=""] {
  display: block;
  padding: 24px 32px 32px;
  box-sizing: border-box;
}

/* ---- Headings ---- */
.login-heading-section {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--bg) !important;
}

/* ---- Labels — wrap natural en 2 líneas ---- */
.form-horizontal .control-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding-top: 9px !important;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ---- Inputs con bordes redondeados ---- */
.form-control,
input.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  height: 38px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.form-control:focus,
input.form-control:focus {
  border-color: var(--cvt) !important;
  box-shadow: 0 0 0 3px rgba(122,20,40,0.08) !important;
  outline: none !important;
}

/* ---- Botón Iniciar sesión y link olvidé contraseña en columna ---- */
#submit-signin-local {
  display: block !important;
  margin-bottom: 10px !important;
}

a.btn.btn-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--cvt) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  display: block !important;
  border-radius: 0 !important;
  margin-top: 2px !important;
}

a.btn.btn-default:hover {
  background: transparent !important;
  color: var(--cvt-dark) !important;
}

/* ---- Botones ---- */
.btn-primary {
  background: var(--cvt) !important;
  border-color: var(--cvt) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  transition: background 0.15s !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--cvt-dark) !important;
  border-color: var(--cvt-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Asegurar que <input type="submit"> se vea igual que los <button> */
input[type="submit"].btn-primary {
  height: auto !important;
  line-height: normal !important;
}

/* Botón cuenta externa (Cuenta CVT / Azure AD) — igual que Iniciar sesión */
.btn-line {
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  background: var(--cvt) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  transition: background 0.15s !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.btn-line:hover {
  background: var(--cvt-dark) !important;
  color: #fff !important;
  border: none !important;
}

/* Centrar el contenedor del botón externo */
.col-md-6:last-child {
  text-align: center !important;
}

.col-md-6:last-child h2 {
  text-align: left !important;
}

/* ---- Separador entre columnas ---- */
.col-md-6:first-child {
  border-right: 1px solid var(--bg);
}

/* ---- Validación ---- */
.alert-danger {
  background: #FEF2F2 !important;
  border: 1px solid #FCA5A5 !important;
  border-radius: 8px !important;
  color: #991B1B !important;
  font-size: 13px !important;
}

.field-validation-error {
  font-size: 12px !important;
  color: #DC2626 !important;
}

/* Cuadro "Código de canje" en la página de registro post-invitación */
.alert-info {
  background: var(--cvt-light) !important;
  border: 1px solid var(--cvt-mid) !important;
  border-radius: 8px !important;
  color: var(--cvt-dark) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

/* ---- Footer de la página ---- */
.footer-links, .footer, [class*="footer"] {
  display: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .page-content .row { padding: 20px !important; }
  .nav.nav-tabs.nav-account { padding: 16px 20px 0 !important; }
  .col-md-6:first-child { border-right: none; border-bottom: 1px solid var(--bg); padding-bottom: 24px !important; margin-bottom: 8px; }
}


/* ---- Cambios de texto vía CSS ---- */

/* "Iniciar sesión como Subcontratista" */
#local-login-heading .xrm-attribute-value {
  font-size: 0 !important;
  color: transparent !important;
}
#local-login-heading .xrm-attribute-value::after {
  content: 'Iniciar sesi\00F3n como Subcontratista';
  font-size: 16px !important;
  color: #1a1a1a !important;
  font-weight: 600;
}

/* "Iniciar sesión con Cuenta CVT" */
#external-login-heading .xrm-attribute-value {
  font-size: 0 !important;
  color: transparent !important;
}
#external-login-heading .xrm-attribute-value::after {
  content: 'Iniciar sesi\00F3n con Cuenta CVT';
  font-size: 16px !important;
  color: #1a1a1a !important;
  font-weight: 600;
}

/* "Cuenta CVT" en el botón */
button[id*="login.windows.net"] {
  font-size: 0 !important;
}
button[id*="login.windows.net"]::after {
  content: 'Cuenta CVT';
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

/* ---- Ajustes puntuales para "Canjear invitación" ---- */

/* Ocultar el resumen de validación vacío (ya lo maneja Power Pages cuando sí hay error) */
.validation-summary-valid {
  display: none !important;
}

/* Alinear el botón Registrarse con el mismo ancho que el input */
#submit-redeem-invitation {
  width: 100%;
}


/* Evitar que #content se encoja al ancho de su contenido (bug de flex align-items:center) */
#content {
  width: 100% !important;
}

.page-content {
  margin: 0 auto !important;
}

.page-content {
  min-height: 560px !important;
}

.nav.nav-tabs.nav-account {
  margin: 0 auto !important;
}

/* "Registrarse como Subcontratista" (antes "Registrarse para una nueva cuenta local") */
#ContentContainer_MainContent_MainContent_RegisterLocalFormHeading .xrm-attribute-value {
  font-size: 0 !important;
  color: transparent !important;
}
#ContentContainer_MainContent_MainContent_RegisterLocalFormHeading .xrm-attribute-value::after {
  content: 'Registrarse como Subcontratista';
  font-size: 16px !important;
  color: #1a1a1a !important;
  font-weight: 600;
}

/* "Registrarse con Cuenta CVT" (antes "Registrarse con una cuenta externa") */
#ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value {
  font-size: 0 !important;
  color: transparent !important;
}
#ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value::after {
  content: 'Registrarse con Cuenta CVT';
  font-size: 16px !important;
  color: #1a1a1a !important;
  font-weight: 600;
}