/* ============================================================
   IDP CNE — Sistema visual del rediseño
   Único stylesheet compartido por todas las pantallas mockup.
   Paleta, tipografía y componentes según la "design bible".
   ============================================================ */

/* Public Sans auto-hospedada (OFL) — sin dependencia de CDN externa. Fallback: system-ui. */
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/public-sans-latin-400-italic.woff2") format("woff2");
}

:root {
  /* ---- Azules institucionales ---- */
  --blue-700: #29618F;   /* hover botón / estados activos */
  --blue-600: #337AB6;   /* botón primario / acento (texto blanco AA 4.57:1) */
  --blue-500: #2F77AD;   /* links / borde de campo válido (AA 4.81:1 sobre blanco) */
  --blue-100: #D6E6F3;
  --blue-50:  #F0F7FB;

  /* ---- Neutros ---- */
  --ink:        #11161F;  /* texto principal */
  --ink-soft:   #5B6472;  /* texto secundario / placeholder */
  --border:     #D8DEE8;  /* borde de controles */
  --surface:    #FDFEFF;  /* superficie de card */
  --canvas:     #EEF2F8;  /* fondo de pantalla */
  --field:      #F1F4F9;  /* relleno de input */

  /* ---- Estados semánticos ---- */
  --ok:        #1E7D52;   --ok-bg:   #E4F4EC;
  --err:       #C2334B;   --err-bg:  #FBE9EC;
  --warn:      #9A6700;   --warn-bg: #FBF1D9;
  --info:      var(--blue-600);

  /* ---- Tipografía ---- */
  --font: "Public Sans", system-ui, sans-serif;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-30: 30px;

  /* ---- Forma ---- */
  --r-control: 6px;
  --r-card: 12px;
  --r-modal: 16px;

  /* ---- Sombras tintadas en azul (no negro plano) ---- */
  --shadow-sm:  0 1px 2px rgba(51, 122, 182, 0.06);
  --shadow-card: 0 12px 32px -12px rgba(41, 97, 143, 0.20), 0 2px 8px rgba(51, 122, 182, 0.06);
  --shadow-modal: 0 24px 64px -16px rgba(17, 22, 31, 0.28), 0 4px 14px rgba(51, 122, 182, 0.10);
  --shadow-pop: 0 8px 24px -8px rgba(41, 97, 143, 0.22);
  --ring: 0 0 0 3px rgba(51, 122, 182, 0.32);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body.idp {
  font-family: var(--font);
  color: var(--ink);
  background: #FFFFFF url('../Assets/bg-cne.png') center center / cover no-repeat fixed;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout dividido (Opción B · banda lateral institucional)
   Panel azul a la izquierda + área de contenido a la derecha.
   ============================================================ */
body.idp-split {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: #FFFFFF;
}
.brand-panel {
  position: relative;
  flex: 0 0 42%;
  min-width: 380px;
  max-width: 620px;
  background: linear-gradient(158deg, #4691CB 0%, #337AB6 45%, #29618F 100%);
  color: #fff;
  overflow: hidden;
  padding: 64px 60px 72px;
  display: flex;
  flex-direction: column;
}
.brand-panel .bp-top { position: relative; z-index: 2; margin-top: 8px; }
.brand-panel .bp-logo {
  width: clamp(220px, 24vw, 320px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.brand-panel .bp-text {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: auto;
}
.brand-panel .bp-text b {
  display: block;
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 8.6em;
  text-wrap: pretty;
}
.brand-panel .bp-text span {
  display: block;
  margin-top: 18px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
}
.brand-panel .bp-arcs {
  position: absolute;
  left: -150px;
  bottom: -190px;
  width: 580px;
  height: 580px;
  opacity: 0.5;
  z-index: 1;
}
.content-area {
  flex: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background:
    radial-gradient(60% 50% at 100% 100%, rgba(51,122,182,0.05), transparent 70%),
    #F6F8FC;
}

/* Apilado en pantallas estrechas */
@media (max-width: 860px) {
  body.idp-split { flex-direction: column; }
  .brand-panel {
    flex: none;
    max-width: none;
    width: 100%;
    padding: 28px 28px 30px;
  }
  .brand-panel .bp-top { display: flex; align-items: center; gap: 18px; }
  .brand-panel .bp-logo { height: 56px; }
  .brand-panel .bp-text { margin-top: 0; }
  .brand-panel .bp-text b { font-size: 22px; }
  .brand-panel .bp-text span { font-size: 14px; margin-top: 5px; }
  .brand-panel .bp-arcs { width: 360px; height: 360px; left: auto; right: -160px; bottom: -200px; }
  .content-area { min-height: 0; padding: 32px 20px 48px; }
}


/* ============================================================
   Marca / logo lockup
   ============================================================ */
/* Encabezado de card: logo centrado */
.card-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.card-brand .seal { flex: none; }
.card-logo { height: 58px; width: auto; flex: none; }
.card-logo--sm { height: 44px; }
.card-brand .card-title {
  font-size: var(--fs-24);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-align: center;
}
.card-brand .card-sub {
  font-size: var(--fs-15);
  color: var(--ink-soft);
  margin: -6px 0 0;
  text-align: center;
  text-wrap: pretty;
  max-width: 36ch;
}

/* ============================================================
   Card
   ============================================================ */
.card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.card--md { max-width: 560px; }
.card--lg { max-width: 720px; }

/* En el layout dividido, las cards simples (un solo ancho) reciben una
   altura mínima consistente con el contenido centrado, para que las
   pantallas con poco contenido no se vean bajas ni "perdidas". */
body.idp-split .card:not(.card--md):not(.card--lg) {
  min-height: 508px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   Variante "pantalla completa" (sin card)
   El lado derecho es un plano blanco continuo; el contenido ocupa
   el espacio: columna ancha, controles altos y ritmo vertical amplio.
   ============================================================ */
body.idp-flush .content-area {
  background: #FFFFFF;
  padding: 64px 6vw;
  align-items: center;
  justify-content: center;
}
body.idp-flush .card,
body.idp-flush .card:not(.card--md):not(.card--lg) {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Columna legible más ancha: el contenido llena mejor el lado derecho */
body.idp-flush .card { max-width: 520px; }
body.idp-flush .card--md { max-width: 620px; }
body.idp-flush .card--lg { max-width: 760px; }

/* Controles más grandes y con más aire en la vista sin card */
body.idp-flush .card-title { font-size: var(--fs-30); }
body.idp-flush .card-sub { font-size: var(--fs-17); }
body.idp-flush .field { margin-bottom: 22px; }
body.idp-flush .control { height: 52px; font-size: var(--fs-17); }
body.idp-flush .btn { height: 52px; font-size: var(--fs-17); }
body.idp-flush .card-brand { margin-bottom: 32px; }
body.idp-flush .btn-dual { margin-top: 14px; }

/* Permite desplazamiento si un formulario es más alto que el viewport */
body.idp-flush .content-area { overflow-y: auto; }


/* ============================================================
   Campos de formulario
   ============================================================ */
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.label .req { color: var(--err); margin-left: 2px; }

.control {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: var(--fs-15);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.control::placeholder { color: var(--ink-soft); opacity: 1; }

.control:hover { border-color: #C2CBDA; }

.control:focus,
.control:focus-visible {
  border-color: var(--blue-500);
  background: var(--surface);
  box-shadow: var(--ring);
}

/* Wrapper para sufijos/iconos dentro del input */
.control-wrap { position: relative; }
.control-wrap .control { padding-right: 44px; }
.control-wrap .affix {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.control-wrap .affix.is-btn { pointer-events: auto; cursor: pointer; color: var(--ink-soft); }

/* Hint neutral */
.hint { font-size: var(--fs-13); color: var(--ink-soft); margin-top: 7px; }

/* readonly / autofill */
.control[readonly], .control.is-readonly {
  background: #EAEEF4;
  color: var(--ink-soft);
  cursor: default;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--font);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  text-decoration: none;
}
.btn:focus-visible { box-shadow: var(--ring); }

.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-700); }
.btn--primary:active { background: var(--blue-700); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn--secondary:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }

.btn--tertiary { background: transparent; color: var(--blue-600); padding: 0 10px; }
.btn--tertiary:hover { color: var(--blue-700); background: var(--blue-50); }

.btn[disabled], .btn.is-disabled {
  background: #C8D2E2;
  color: #F4F7FC;
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
}
.btn--secondary[disabled] { background: var(--surface); color: #AEB7C6; border-color: var(--border); }

.btn--block { width: 100%; }

/* Botón dual: 2 columnas en desktop */
.btn-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.btn-dual .btn { width: 100%; }

/* Link */
.link {
  color: var(--blue-500);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
}
.link:hover { color: var(--blue-700); text-decoration: underline; }
.link-row { display: flex; justify-content: center; margin-top: 16px; }

/* ============================================================
   Chip contador + reenviar
   ============================================================ */
.resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--fs-13);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.btn-resend {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--ink-soft); font-family: var(--font);
  font-size: var(--fs-13); font-weight: 600;
  cursor: not-allowed;
}
.btn-resend.is-ready { color: var(--blue-500); cursor: pointer; }
.btn-resend.is-ready:hover { color: var(--blue-700); }

/* ============================================================
   Badges de estado
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge--ok   { background: var(--ok-bg);   color: var(--ok); }
.badge--ok   .dot { background: var(--ok); }
.badge--err  { background: var(--err-bg);  color: var(--err); }
.badge--err  .dot { background: var(--err); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--warn .dot { background: var(--warn); }
.badge--info { background: var(--blue-50); color: var(--blue-700); }
.badge--info .dot { background: var(--blue-500); }

/* Icono circular de proceso */
.proc-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.proc-icon--ok   { background: var(--ok-bg);   color: var(--ok); }
.proc-icon--err  { background: var(--err-bg);  color: var(--err); }
.proc-icon--info { background: var(--blue-50); color: var(--blue-600); }

/* ============================================================
   Utilidades
   ============================================================ */
.stack-8  { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.center-text { text-align: center; }
.muted { color: var(--ink-soft); }
.mt-24 { margin-top: 24px; }
.mt-16 { margin-top: 16px; }

/* ============================================================
   Compat — área de contenido para vistas full-doc anidadas
   ============================================================ */
/* Las vistas full-doc envuelven su contenido en <main class="idp-main">;
   display:contents lo "disuelve" para que la .card quede como hijo directo
   del .content-area del layout (centra bien, sin <main> anidado). */
.idp-main { display: contents; }

/* El logo institucional vive en el panel azul (brand-panel); ocultamos el
   logo que cada card traía para no duplicarlo en el layout dividido. */
body.idp-split .card-logo { display: none; }
body.idp-split .card-brand:has(> .card-logo:only-child) { display: none; }

/* ============================================================
   Compat — clases antiguas que el JS de RegistrarExterno /
   ActualizarContrasena togglea (no se toca el JS). Reciben el
   look del sistema nuevo.
   ============================================================ */
.input-wrapper {
  display: flex; align-items: center; width: 100%; margin-bottom: 18px;
  background: var(--field); border: 1px solid var(--border);
  border-radius: var(--r-control);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.input-wrapper:focus-within { border-color: var(--blue-500); background: var(--surface); box-shadow: var(--ring); }
.input-wrapper.valid   { border-color: var(--blue-500); background: var(--surface); }
.input-wrapper.invalid { border-color: var(--err);      background: var(--surface); }
.input-wrapper > input {
  flex: 1; width: 100%; height: 46px; padding: 0 14px;
  background: transparent; border: none; outline: none;
  font-family: var(--font); font-size: var(--fs-15); color: var(--ink);
}
body.idp-flush .input-wrapper > input { height: 50px; font-size: var(--fs-17); }
.input-wrapper > input::placeholder { color: var(--ink-soft); opacity: 1; }

.password-guide-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 14px 16px; width: 256px; z-index: 100;
  display: none; opacity: 0; transition: opacity .2s ease;
}
.password-guide-box.visible { display: block; opacity: 1; }
.password-guide-header {
  font-size: var(--fs-13); font-weight: 700; color: var(--ink);
  margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.password-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.guide-item { display: flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: var(--ink-soft); transition: color .2s ease; }
.guide-item i {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; color: transparent;
}
.guide-item i::before { content: ""; }
.guide-item.valid { color: var(--ok); }
.guide-item.valid i { background: var(--ok); border-color: var(--ok); color: #fff; }
.guide-item.valid i::before { content: "✓"; color: #fff; }

/* ============================================================
   Botón ver / ocultar contraseña (ojo)
   ============================================================ */
.pw-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink-soft);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { box-shadow: var(--ring); border-radius: 6px; outline: none; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-on .eye { display: none; }
.pw-toggle.is-on .eye-off { display: inline-flex; }
/* Dentro de .input-wrapper (campos con wrapper flex): ojo a la derecha, alto completo */
.input-wrapper .pw-toggle { flex: none; width: 44px; align-self: stretch; }

/* ============================================================
   Responsive adicional
   ============================================================ */
@media (max-width: 640px) {
  .btn-dual { grid-template-columns: 1fr; }
  .method-grid, .method-radios { grid-template-columns: 1fr; }
}

/* Guía de contraseña: popover (desktop) -> en línea (pantallas estrechas) */
@media (max-width: 900px) {
  #passwordGuide.password-guide-box,
  .password-guide-box {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important; margin-top: 10px; box-shadow: none;
  }
}