/* original_login.css - estilos exclusivos de customized_login/_original_login */

.ol-page {
  --ol-navy: #051c4a;
  --ol-blue: #2151ff;
  --ol-panel: #d3d9f7;
  --ol-bg: #fafafa;
  --ol-input-bg: #f1f3fb;
  --ol-input-focus: #6d8bff;
  --ol-orange: #f5a201;
  --ol-orange-hover: #e09400;
  /* Ancho del panel derecho: nunca mas de 69vh, asi el elemento decorativo siempre
     alcanza el borde derecho; en pantallas anchas el panel izquierdo crece */
  --ol-panel-w: min(51.5vw, 69vh);

  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ol-bg);
  font-family: "Montserrat", "Inter", system-ui, sans-serif;
  color: var(--ol-navy);
  box-sizing: border-box;
}

body:has(.ol-page) {
  margin: 0;
  background: var(--ol-bg, #fafafa);
}
.ol-page *,
.ol-page *::before,
.ol-page *::after {
  box-sizing: border-box;
}

/* Columna izquierda: logo + formulario */
.ol-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--ol-panel-w));
  padding: 42px;
}

/* En pantallas anchas el logo se separa del borde: 42px hasta 1440px, maximo 200px */
.ol-logo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin-left: clamp(0px, calc(8vw - 114px), 158px);
}

.ol-content {
  width: 100%;
  max-width: clamp(352px, 26vw, 850px);
  margin: clamp(64px, 16vh, 160px) auto 0;
}

.ol-title {
  margin: 0 0 56px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  color: var(--ol-navy);
}

.ol-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
}

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

.ol-page .ol-field label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #111;
}

.ol-page .ol-field input {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--ol-input-bg);
  font-family: inherit;
  font-size: 15px;
  color: var(--ol-navy);
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ol-page .ol-field input:focus {
  border-color: var(--ol-input-focus);
  background: #f7f8fe;
}

.ol-page .ol-submit {
  width: 100%;
  height: 48px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--ol-orange);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ol-navy);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ol-page .ol-submit:hover,
.ol-page .ol-submit:focus-visible {
  background: var(--ol-orange-hover);
}

.ol-page .ol-submit:focus-visible {
  outline: 2px solid var(--ol-input-focus);
  outline-offset: 2px;
}

.ol-page .login-messages {
  margin-top: 24px;
}

.ol-page .login-messages:empty {
  display: none;
}

.ol-page .login-messages .alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
}

/* Panel derecho + elemento decorativo */
.ol-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ol-panel-w);
  background: var(--ol-panel);
}

/* Desktop: escala 1 unidad SVG = 1/300 del alto (alto total 266/300 = 88.67vh).
   Se baja 8.67vh para que se vea el 80% del alto y la fila inferior visible sea y=240,
   donde la forma es solida en ambos lados: no quedan esquinas del panel a la vista.
   Empieza 4% de su ancho antes de la linea divisoria y como mide 72.7vh (>= panel 69vh)
   siempre llega al borde derecho. */
.ol-decorative {
  position: absolute;
  left: calc(100% - var(--ol-panel-w));
  bottom: -8.67vh;
  width: auto;
  height: 88.67vh;
  transform: translateX(-4%);
  pointer-events: none;
}

/* Tablet vertical (iPad Pro y similares): panel derecho mas angosto y elemento grande
   abajo, cruzando la linea. La fila inferior visible queda entre y=92 y y=227 del SVG
   (s = 84vw / 218), donde la forma es solida en ambos bordes: sin esquinas del panel. */
@media (min-width: 769px) and (orientation: portrait) {
  .ol-page {
    --ol-panel-w: 38.5vw;
  }

  .ol-content {
    position: relative;
    left: 3.5vw;
  }

  .ol-decorative {
    --ol-deco-visible: clamp(38.5vw, calc(100vh - 640px), 67vw);
    top: calc(100% - var(--ol-deco-visible));
    bottom: auto;
    left: 16.4vw;
    width: 84vw;
    height: auto;
    transform: none;
  }
}

/* Movil */
@media (max-width: 768px) {
  .ol-page {
    flex-direction: column;
    background: #fff;
  }

  body:has(.ol-page) {
    background: #fff;
  }

  .ol-main {
    width: 100%;
    padding: 32px 42px 0;
  }

  .ol-logo {
    width: 198px;
  }

  .ol-content {
    margin: 40px auto 0;
  }

  .ol-title {
    margin-bottom: 44px;
  }

  .ol-panel {
    display: none;
  }

  /* En el flujo debajo del formulario (nunca lo toca), minimo la mitad del ancho */
  .ol-decorative {
    position: static;
    align-self: flex-end;
    width: max(50vw, 216px);
    height: auto;
    margin-top: auto;
    padding-top: 40px;
    transform: none;
  }
}