/* =====================================================================
   UI MODERNA (SaaS light) para el modulo page
   Solo visual: se carga despues de global.css / globalformatos.css / sive.css
   y sobrescribe estilos. No renombra clases ni ids usados por el JS.
   ===================================================================== */

/* ---------- Fuente Inter (local, variable) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --ui-accent: #88a231;
  --ui-accent-hover: #748b27;
  --ui-accent-soft: #f2f6e6;
  --ui-accent-ring: rgba(136, 162, 49, 0.18);
  --ui-bg: #f7f8fa;
  --ui-surface: #ffffff;
  --ui-border: #e5e7eb;
  --ui-border-strong: #d1d5db;
  --ui-text: #111827;
  --ui-text-2: #374151;
  --ui-muted: #6b7280;
  --ui-subtle: #9ca3af;
  --ui-radius-card: 16px;
  --ui-radius-input: 10px;
  --ui-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */
* {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ui-bg);
  color: var(--ui-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Los iconos deben conservar su propia fuente */
.fa,
.fas,
.far,
.fab,
.fal {
  font-family: "Font Awesome 5 Free";
}

.fab {
  font-family: "Font Awesome 5 Brands";
}

.afiliaciones,
.formatos {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ui-text-2);
}

.afiliaciones h1,
.afiliaciones h2,
.afiliaciones h3,
.afiliaciones h4,
.formatos h1,
.formatos h2,
.formatos h3,
.formatos h4 {
  color: var(--ui-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.afiliaciones small,
.formatos small,
.afiliaciones .text-muted {
  font-size: 13px;
  color: var(--ui-muted) !important;
}

/* Bootstrap 5 elimino la utilidad .text-justify, asi que la clase que ya
   llevaban los bloques de autorizacion no hacia nada y todos los textos
   legales se veian alineados a la izquierda. Se define aqui.

   hyphens: auto es lo que evita los rios de espacios en blanco cuando la
   columna se angosta en movil; funciona porque el layout declara lang="es".
   overflow-wrap parte las cadenas largas sin espacios (URLs, numeros de
   norma) en vez de desbordar la tarjeta. */
.text-justify,
.text-justify span,
.text-justify p,
.texto-legal {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
}

.afiliaciones .text-justify span,
.afiliaciones .text-justify {
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
}

/* ---------- Header (partial botonera2) ---------- */
header.header-menu {
  position: sticky;
  top: 0;
  z-index: 1030;
}

header .header-content.py-2,
header .header-content-home {
  background-color: var(--ui-accent);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.06), 0 6px 18px rgba(17, 24, 39, 0.08);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

header .header-content-home .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

header .header-content.py-2 .logo2,
header .header-content-home .logo2 {
  width: 170px;
  max-width: 42vw;
  height: auto;
}

header .header-content .text-header {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  vertical-align: middle;
}

header .header-content .icono-header {
  max-height: 40px;
  margin-left: 12px;
  vertical-align: middle;
}

/* ---------- Indicador de paso ("Paso 1 de 4") ---------- */
.step-bck {
  background-color: transparent;
  font-size: 14px;
  padding-top: 28px !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}

.step-bck .fw-bold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ui-accent-soft);
  color: #5e7222;
  font-size: 13px;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.step-bck .fw-bold i {
  font-size: 12px;
}

/* ---------- Tarjetas ---------- */
.caja-form {
  background-color: var(--ui-surface);
  border: 1px solid #eef0f3;
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-card);
  margin-left: 0;
  margin-right: 0;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 28px 16px 12px !important;
}

.afiliaciones form>.caja-form:first-of-type,
.afiliaciones>.caja-form:first-of-type {
  margin-top: 24px !important;
}

/* Titulo dentro de cada tarjeta */
.section-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.section-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 17px;
}

.section-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ui-text);
  text-transform: lowercase;
}

.section-card-title::first-letter {
  text-transform: uppercase;
}

/* Titulos tipo pildora de otras vistas (general, gerencia...) */
.afiliaciones .fondo-azul-claro.rounded-pill {
  background: transparent;
  color: var(--ui-text);
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;
  text-align: left !important;
}

.afiliaciones .fondo-azul-claro.rounded-pill h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--ui-text);
}

.afiliaciones .fondo-azul-claro.rounded-pill h4::before {
  content: "\f15c";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 15px;
}

.afiliaciones .fondo-azul-claro.rounded-pill h4 strong {
  font-weight: 700;
}

/* Titulos antiguos con linea (si queda alguno) */
.titulo-section {
  color: var(--ui-text);
  font-size: 18px !important;
  font-weight: 700;
}

.title-line {
  display: none;
}

/* ---------- Labels ---------- */
.afiliaciones label,
.formatos label,
.modal-body-reingreso label {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 6px;
  line-height: 1.4;
}

.afiliaciones label small,
.formatos label small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ui-subtle) !important;
}

.afiliaciones .form-check-label,
.formatos .form-check-label {
  font-size: 15px;
  font-weight: 400;
  color: var(--ui-text-2);
  margin-bottom: 0;
  cursor: pointer;
}

/* ---------- Inputs / selects / textareas ---------- */
.form-control,
.afiliaciones .form-control,
.formatos .form-control {
  height: auto;
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ui-text);
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-input);
  box-shadow: none;
  transition: border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease), background-color 200ms var(--ui-ease);
}

.form-control::placeholder {
  color: var(--ui-subtle);
}

.form-control:hover {
  border-color: var(--ui-border-strong);
}

.form-control:focus,
.afiliaciones .form-control:focus,
.formatos .form-control:focus {
  outline: 0;
  border-color: var(--ui-accent);
  background-color: var(--ui-surface);
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #f3f4f6;
  color: var(--ui-muted);
  border-color: var(--ui-border);
  cursor: not-allowed;
  opacity: 1;
}

.form-control.is-invalid,
.has-error .form-control {
  border-color: #f87171;
}

.form-control.is-invalid:focus,
.has-error .form-control:focus {
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
}

/* Input con icono a la izquierda */
.input-group .input-group-text {
  background-color: var(--ui-accent-soft);
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-radius: var(--ui-radius-input) 0 0 var(--ui-radius-input);
  padding: 0 12px;
  min-width: 46px;
  justify-content: center;
  transition: border-color 200ms var(--ui-ease);
}

/* Los iconos de estos campos (tipo de solicitud, entrevistador) son PNG blancos:
   necesitan el verde de marca solido para verse */
.input-group .input-group-text.icono-bck-input {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

.input-group .input-group-text img {
  max-height: 22px;
  width: auto;
}

.input-group:focus-within .input-group-text {
  border-color: var(--ui-accent);
}

/* ---------- Checkboxes y radios ---------- */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  border: 1.5px solid var(--ui-border-strong);
  background-color: var(--ui-surface);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 200ms var(--ui-ease), border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease);
}

.form-check-input[type="checkbox"] {
  border-radius: 6px;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

.form-check-input[type="checkbox"]:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.form-check-input[type="radio"]:checked::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.form-check-input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ui-accent);
}

/* Selector SI/NO personalizado */
.container-radio {
  font-size: 15px;
  color: var(--ui-text-2);
  min-height: 38px;
  line-height: 38px;
  padding-right: 96px;
}

.checkmark {
  top: 0;
  height: 38px;
  width: 84px;
  justify-content: center;
  background-color: var(--ui-surface);
  border: 1.5px solid var(--ui-border);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  transition: background-color 200ms var(--ui-ease), border-color 200ms var(--ui-ease);
}

.container-radio:hover .checkmark {
  border-color: var(--ui-accent);
}

.container-radio input:checked~.checkmark {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

/* Check "Autorizo": casilla cuadrada alineada con el texto (antes usaba la pildora SI/NO alargada) */
.form-check.checkbox {
  align-items: center;
  gap: 10px;
  /* Se anula el sangrado de .form-check a ambos lados: quitando solo el
     izquierdo quedaba el padding derecho de la columna y todo el bloque caia
     6px a la izquierda del centro real. */
  padding-left: 0;
  padding-right: 0;
  /* El mensaje de validacion se inyecta dentro de este mismo flex; sin wrap
     entraba como tercera columna y descolocaba la casilla hacia la izquierda. */
  flex-wrap: wrap;
}

/* El aviso ocupa su propia linea y queda centrado bajo la casilla. */
.form-check.checkbox > .help-block,
.form-check.checkbox > .invalid-feedback {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 6px;
  text-align: center;
}

/* Vistas de aprobadores: el texto "Autorizo" va dentro del label y la casilla a su derecha */
.form-check.checkbox .container-radio {
  position: relative;
  flex-shrink: 0;
  min-height: 24px;
  margin: 0;
  padding: 0 34px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ui-text-2);
}

/* Paso 5 / firma / general3: el texto va aparte (.text-autorizo), el label es solo la casilla */
.form-check.checkbox:has(> .text-autorizo) .container-radio {
  width: 24px;
  height: 24px;
  padding: 0;
}

.form-check.checkbox .container-radio input {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form-check.checkbox .checkmark {
  top: 0;
  right: 0;
  left: auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--ui-border-strong);
  background-color: var(--ui-surface);
  font-size: 13px;
  color: #fff;
}

.form-check.checkbox .checkmark:after {
  position: static;
  width: auto;
  line-height: 1;
}

.form-check.checkbox .container-radio input:checked~.checkmark {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

.form-check.checkbox .container-radio input:focus-visible~.checkmark {
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.form-check.checkbox .text-autorizo {
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ui-text-2);
}

/* Ahora es un <label for> y marca la casilla: que el cursor lo anuncie.
   Ademas hay que anular el margin-bottom que .afiliaciones label da a todos los
   label: con align-items:center ese margen desplazaba el texto 3px hacia arriba
   respecto de la casilla. */
.form-check.checkbox label.text-autorizo {
  cursor: pointer;
  margin-bottom: 0;
}

/* ---------- Botones ---------- */
.btn {
  transition: background-color 200ms var(--ui-ease), border-color 200ms var(--ui-ease), color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease), transform 200ms var(--ui-ease);
}

.btn-firma,
.btn-firma-modal,
.btn-azul,
.btn-primary,
.btn-send-signature,
.btn-font,
.btn-succes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background-color: var(--ui-accent);
  border: 1px solid var(--ui-accent);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.btn-firma:hover,
.btn-firma:focus,
.btn-firma-modal:hover,
.btn-firma-modal:focus,
.btn-azul:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-send-signature:hover,
.btn-font:hover,
.btn-succes:hover {
  color: #fff;
  background-color: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
  box-shadow: 0 6px 16px rgba(136, 162, 49, 0.28);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Flechas dobles (« / »): Font Awesome 7 centra cada icono en una caja fija de
   1.25em y el boton agrega 6px de gap, asi que quedaban muy separadas */
.btn-firma i,
.btn-firma-modal i {
  --fa-width: auto;
}

.btn-firma i+i,
.btn-firma-modal i+i {
  margin-left: -8px;
}

.btn-firma:focus-visible,
.btn-firma-modal:focus-visible,
.btn-primary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.btn-firma:disabled,
.btn-firma-modal:disabled,
.btn-primary:disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Secundario: enlaces "Anterior" */
a.btn-firma {
  color: var(--ui-text-2);
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

a.btn-firma:hover,
a.btn-firma:focus {
  color: var(--ui-text);
  background-color: #f9fafb;
  border-color: var(--ui-border-strong);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}

/* Boton "Agregar" */
.add-button,
.texto-azul2.add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #5e7222;
  background-color: var(--ui-accent-soft);
  border: 1px solid #dce6bf;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 200ms var(--ui-ease), border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease);
}

.add-button:hover,
.texto-azul2.add-button:hover {
  color: #4b5c1b;
  background-color: #e8efd2;
  border-color: #c9d79d;
  transform: none;
  box-shadow: 0 4px 12px rgba(136, 162, 49, 0.18);
}

.add-button i {
  padding-right: 0;
}

.btn-outline-danger {
  border-radius: 999px;
  padding: 10px 22px;
}

/* Fila de navegacion Anterior / Siguiente */
.afiliaciones form>.row.justify-content-between,
.afiliaciones form>.row.justify-content-center {
  margin: 8px 0 0;
  gap: 12px;
}

/* Bootstrap 5 estira a ancho completo todo hijo directo de .row, y estos
   botones van sueltos dentro de la fila: sin esto se apilan uno debajo del
   otro en vez de quedar uno a cada lado */
.afiliaciones .row>.btn,
.formatos .row>.btn {
  width: auto;
  max-width: 100%;
}

/* Campo de archivos (bootstrap-fileinput) */
.file-input {
  width: 100%;
}

.file-input .file-caption.form-control,
.file-input .kv-fileinput-caption {
  min-height: 46px;
}

/* El .input-group de Bootstrap 5 permite wrap: con el campo al 100% no cabia
   nada mas en la fila y el boton "Examinar" caia debajo del texto. Se le da el
   ancho flexible que usa el propio Bootstrap para que compartan renglon. */
.file-input .input-group {
  flex-wrap: nowrap;
}

/* El campo iba sin fondo ni borde: se veia como un hueco blanco pegado al boton.
   Se le da el mismo aspecto que al resto de inputs, con las esquinas redondeadas
   solo a la izquierda para que encaje con el boton "Examinar". */
.file-input .file-caption .file-caption-name {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding: 11px 14px;
  outline: 0;
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-radius: var(--ui-radius-input) 0 0 var(--ui-radius-input);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ui-text);
}

/* Etiqueta de cada documento centrada con su campo (quedaba 10px mas arriba). */
.afiliaciones .file-input-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 46px;
}

.afiliaciones .file-input-label label {
  margin-bottom: 0;
  text-align: right;
}

/* bootstrap-fileinput envuelve el boton en un div suelto; en BS5 ese div ya no
   es flex, asi que el boton se quedaba con la altura de su contenido (bajito y
   descuadrado) en vez de igualar los 46px del campo */
.file-input .input-group-btn,
.file-input .input-group-append {
  display: flex;
}

.file-input .btn-file,
.file-input .btn-cafe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  color: #fff;
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
  border-radius: 0 var(--ui-radius-input) var(--ui-radius-input) 0;
  padding: 0 18px;
  font-weight: 600;
  white-space: nowrap;
}

.file-input .btn-file:hover,
.file-input .btn-cafe:hover {
  color: #fff;
  background-color: var(--ui-accent-hover);
}

.file-input .btn-file img {
  max-height: 18px;
  width: auto;
}

/* Firma manuscrita (formatos) */
/* En afiliacion la firma se pinta en un <h1> y las reglas '#signatureShow
   h1#font-Nr' le bajan el tamano. En formatos el mismo control es un
   <textarea>, no recibia esas reglas y heredaba los 60-80px crudos de
   '#font-Nr', que se salian de la caja. */
#signatureShow,
#signatureShowA {
  width: 100%;
}

/* Solo la firma: '.areaSignature' tambien la usan textareas que si se
   escriben (boleteria/convenios) y las vistas de validar.
   '#signatureShowA' es la firma del aprobador en las vistas de validar */
#signatureShow .areaSignature,
#signatureShowA .areaSignature {
  display: block;
  width: 100%;
  height: 114px;
  max-height: none;
  padding: 12px 16px;
  overflow: hidden;
  resize: none;
  color: #2b2b2b;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-input);
  line-height: 1.25 !important;
  text-decoration: underline;
}

#signatureShow .areaSignature#default,
#signatureShowA .areaSignature#default {
  font-size: 18px !important;
  font-weight: normal !important;
}

#signatureShow .areaSignature#font-2r,
#signatureShow .areaSignature#font-3r,
#signatureShow .areaSignature#font-4r,
#signatureShowA .areaSignature#font-2r,
#signatureShowA .areaSignature#font-3r,
#signatureShowA .areaSignature#font-4r {
  font-size: 28px !important;
}

#signatureShow .areaSignature#font-5r,
#signatureShowA .areaSignature#font-5r {
  font-size: 22px !important;
}

#signatureShow .areaSignature#font-6r,
#signatureShowA .areaSignature#font-6r {
  font-size: 44px !important;
}

/* Nombre + boton de estilo: en formatos ni la etiqueta ni el boton llevaban
   clase de columna, asi que el .row los desbordaba a la siguiente linea */
.firma-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  margin-right: 0;
}

.firma-datos > * {
  padding-left: 0;
  padding-right: 0;
}

.firma-datos > label {
  flex: 0 0 auto;
  margin-bottom: 0;
  white-space: nowrap;
}

.firma-datos > #signature {
  flex: 1 1 200px;
  width: auto;
  max-width: none;
}

/* '.firma-datos > *' quita el padding lateral, asi que el boton se quedaba sin
   ancho y con el radio de pastilla se veia como un circulo. Le devolvemos el
   padding y anulamos el 'col-*' que traen algunos formatos */
.firma-datos > .btn-font {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Mensajes (callouts) ---------- */
.alert {
  position: relative;
  padding: 14px 16px 14px 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}

.alert::before {
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1.4;
}

.alert-danger {
  color: #991b1b;
  background-color: #fef2f2;
  border-color: #fecaca;
}

.alert-danger::before {
  content: "\f06a";
  color: #dc2626;
}

.alert-warning {
  color: #92400e;
  background-color: #fffbeb;
  border-color: #fde68a;
}

.alert-warning::before {
  content: "\f071";
  color: #d97706;
}

.alert-info {
  color: #1e3a8a;
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

.alert-info::before {
  content: "\f05a";
  color: #2563eb;
}

.alert-success {
  color: #166534;
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.alert-success::before {
  content: "\f058";
  color: #16a34a;
}

/* Validaciones de campo */
.invalid-feedback,
.help-block.with-errors {
  font-size: 13px;
  color: #b91c1c;
}

.help-block.with-errors ul {
  display: inline-flex;
  margin: 6px 0 0;
  padding: 4px 10px;
  list-style: none;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.help-block.with-errors ul:empty {
  display: none;
}

small.text-danger {
  display: inline-block;
  font-size: 13px;
}

/* ".afiliaciones small" (arriba) pinta todo small de gris con !important y
   le ganaba a .text-danger: el aviso de documento duplicado y el del correo
   laboral se veian grises, como una ayuda mas, en vez de como un error. */
.afiliaciones small.text-danger,
.formatos small.text-danger {
  color: #b91c1c !important;
}

/* Avisos del documento (.documento-mensajes): formato y duplicado. Van en el
   flujo normal, debajo del input (ver la nota de .help-block mas abajo). */
#form .documento-mensajes {
  margin-top: 4px;
}

#form .documento-mensajes small {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

#form .documento-mensajes .documento-ayuda:empty {
  display: none;
}

/* validacion.js (public/scripts/validacion.js) pinta cada error dentro de un
   .help-block.with-errors.invalid-feedback que crea el sobre la marcha, como
   hijo de la misma columna del campo, en cuanto este pierde el foco invalido. */
#form .col,
#form [class*="col-"],
#form .mb-3,
#form .form-check {
  position: relative;
}

#form .help-block.with-errors.invalid-feedback {
  position: static;
  width: auto;
  margin-top: 4px;
}

/* Cambio de criterio (antes el mensaje se sacaba del flujo con
   position:absolute; top:100%): el margen entre filas es de 1.5rem y un
   error de dos lineas (p.ej. "Ingrese un correo electronico valido, por
   ejemplo nombre@dominio.com.") es mas alto, asi que quedaba montado sobre
   el input de la fila siguiente, y ademas arrancaba en el borde de la
   columna en vez de en el del input. Ahora va en el flujo, debajo de su
   campo, y el error empuja la fila siguiente hacia abajo.

   Lo que obligaba a sacarlo del flujo era el align-self-end de las
   columnas: con el error dentro, la columna crece y, anclada por abajo,
   sube su input respecto a los de al lado. Por eso en #form las columnas se
   alinean por arriba, y para que los inputs sigan a la misma altura cuando
   una etiqueta ocupa dos lineas y la vecina una, la etiqueta reserva siempre
   el alto de dos lineas (el texto queda pegado al input). */
#form .row > [class*="col-"].align-self-end {
  align-self: flex-start !important;
}

@media (min-width: 768px) {
  #form .row > [class*="col-md-"] > label:first-child {
    display: flex;
    align-items: flex-end;
    min-height: 2.7em;
  }
}

/* Con align-self-end (.row de Bootstrap 5 es flex), lo que fija donde
   queda el campo dentro de su columna no es lo que hay ANTES (el label:
   la columna se ancla por abajo, asi que un label mas largo empuja el
   campo hacia abajo pero tambien sube el techo de la columna la misma
   distancia, y ambos efectos se cancelan) sino lo que hay DESPUES.
   "residente_extrangero" no tiene ayuda debajo y "que_pais" /
   "identificacion_tributaria" si: por eso el select queda pegado al fondo
   de la fila y los otros dos inputs quedan mas arriba, desalineados, apenas
   se elige "SI". Reservando el mismo alto minimo despues de los tres
   campos (.reserva-pie-tributaria), tenga o no algo que mostrar, los tres
   arrancan en la misma linea. */
.reserva-pie-tributaria {
  display: block;
  min-height: 24px;
}

/* ---------- Modales ---------- */
.modal-content {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.2);
  overflow: hidden;
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
}

.modal-header.title-modal-important {
  background-color: var(--ui-surface);
  color: var(--ui-text);
  font-size: 18px;
}

.model-header-reingreso label,
.modal-header .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
}

.modal-header .btn-close {
  opacity: 0.6;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 24px;
}

.modal-body span {
  font-size: 15px;
  color: var(--ui-muted);
}

.interno-body-modal {
  padding-left: 8px;
  padding-right: 8px;
}

.modal-body-reingreso label {
  margin-bottom: 6px;
}

/* ---------- Tablas ---------- */
.tabla-personas {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  overflow: hidden;
}

.tabla-personas .header-celda,
.tabla-personas .celda {
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  padding: 12px 14px;
}

.tabla-personas .header-celda {
  background-color: #f9fafb;
  color: var(--ui-text-2);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Afiliacion: portada ---------- */
.vinc-home {
  --vinc-green: #88a231;
  --vinc-green-deep: #5a7215;
  --vinc-ink: #26300c;
  --vinc-ink-2: #4a5332;
  --vinc-muted: #6b705c;
  --vinc-sun: #f5b51f;
  --vinc-coral: #ef7d2d;
  --vinc-rose: #e4407a;
  --vinc-sky: #27a3db;
  --vinc-display: "Fredoka", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  --vinc-spring: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 75px);
  padding: 56px 0 72px;
  overflow: hidden;
  isolation: isolate;
  background-color: #f7f7f1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.25 0 0 0 0 0.05 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 8% -10%, rgba(136, 162, 49, 0.13), transparent 60%),
    radial-gradient(760px 520px at 105% 110%, rgba(245, 181, 31, 0.10), transparent 60%),
    linear-gradient(180deg, #f8f8f2 0%, #f3f5ea 100%);
}

.vinc-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.vinc-bg-shape {
  position: absolute;
  display: block;
}

.vinc-bg-shape--a {
  top: -140px;
  left: -180px;
  width: 520px;
  height: 460px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: rgba(136, 162, 49, 0.08);
  transform: rotate(-12deg);
}

.vinc-bg-shape--b {
  right: 38%;
  bottom: -90px;
  width: 220px;
  height: 200px;
  border-radius: 40% 60% 52% 48% / 58% 44% 56% 42%;
  border: 2px solid rgba(228, 64, 122, 0.12);
  transform: rotate(18deg);
}

.vinc-home .container {
  position: relative;
  max-width: 1180px;
}

.vinc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
}

.vinc-content {
  position: relative;
  z-index: 1;
}

/* Chip con los colores de los dedos del logo.
   flex y no inline-flex: el titulo que va debajo es inline-block (lo necesita
   para que el trazo de color mida lo mismo que el texto), asi que con un chip
   en linea los dos caben en el mismo renglon cuando el titulo es corto. */
.vinc-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinc-ink-2);
}

.vinc-chip-dots {
  display: inline-flex;
  gap: 4px;
}

.vinc-chip-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vinc-green);
}

.vinc-chip-dots i:nth-child(1) {
  background: var(--vinc-sun);
}

.vinc-chip-dots i:nth-child(2) {
  background: var(--vinc-coral);
}

.vinc-chip-dots i:nth-child(3) {
  background: var(--vinc-rose);
}

.vinc-chip-dots i:nth-child(4) {
  background: var(--vinc-sky);
}

.vinc-home .vinc-title {
  position: relative;
  display: inline-block;
  margin: 14px 0 18px -3px;
  padding-bottom: 14px;
  font-family: var(--vinc-display);
  font-size: 76px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--vinc-ink);
}

.vinc-title-swoosh {
  position: absolute;
  left: 4px;
  right: -10px;
  bottom: -2px;
  width: calc(100% + 6px);
  height: 18px;
  overflow: visible;
}

.vinc-home .vinc-lead {
  max-width: 460px;
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--vinc-muted);
}

.vinc-home .vinc-options-label {
  margin: 0 0 14px;
  font-family: var(--vinc-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vinc-ink-2);
}

.vinc-options {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

/* ---------- Cards de opciones ---------- */
.vinc-option {
  --vinc-tone: var(--vinc-green);
  --vinc-tone-soft: #eef3dc;

  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 18px 16px 16px;
  font: inherit;
  text-align: left;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(38, 48, 12, 0.07);
  border-radius: 22px;
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.03),
    0 2px 4px -1px rgba(38, 48, 12, 0.04),
    0 10px 24px -14px rgba(38, 48, 12, 0.16);
  cursor: pointer;
  transition:
    transform 320ms var(--vinc-spring),
    box-shadow 320ms var(--vinc-spring),
    border-color 200ms ease,
    background-color 200ms ease;
}

.vinc-option--sun {
  --vinc-tone: #d99a06;
  --vinc-tone-soft: #fdf0cc;
}

.vinc-option--rose {
  --vinc-tone: var(--vinc-rose);
  --vinc-tone-soft: #fbe1ea;
}

.vinc-option--sky {
  --vinc-tone: #1d8fc4;
  --vinc-tone-soft: #dcf0fa;
}

.vinc-option:hover,
.vinc-option:focus-visible {
  color: inherit;
  text-decoration: none;
  outline: 0;
  background: #fff;
  border-color: rgba(38, 48, 12, 0.10);
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.03),
    0 6px 10px -4px rgba(38, 48, 12, 0.06),
    0 26px 40px -22px rgba(74, 94, 20, 0.34);
  transform: translateY(-3px);
}

.vinc-option:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--vinc-tone),
    0 26px 40px -22px rgba(74, 94, 20, 0.34);
}

.vinc-option:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 120ms;
}

.vinc-option-icon {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vinc-ink);
}

.vinc-option-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--vinc-tone-soft);
  transition: border-radius 520ms var(--vinc-spring), transform 520ms var(--vinc-spring), background-color 240ms ease;
}

.vinc-option-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vinc-tone);
  transition: transform 420ms var(--vinc-spring);
}

.vinc-option-icon svg {
  position: relative;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vinc-option:hover .vinc-option-icon::before,
.vinc-option:focus-visible .vinc-option-icon::before {
  border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%;
  transform: rotate(-8deg) scale(1.06);
}

.vinc-option:hover .vinc-option-icon::after,
.vinc-option:focus-visible .vinc-option-icon::after {
  transform: translate(3px, -3px) scale(1.15);
}

.vinc-option-body {
  flex: 1;
  min-width: 0;
}

.vinc-home .vinc-option-title {
  display: block;
  font-family: var(--vinc-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--vinc-ink);
}

.vinc-option-text {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vinc-muted);
}

.vinc-option-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #9a9f8a;
  background: transparent;
  transition: background-color 240ms ease, color 240ms ease, transform 320ms var(--vinc-spring);
}

.vinc-option-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vinc-option:hover .vinc-option-arrow,
.vinc-option:focus-visible .vinc-option-arrow {
  color: #fff;
  background: var(--vinc-green);
  transform: translateX(2px);
}

/* ---------- Nota ---------- */
.vinc-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 540px;
  margin: 26px 0 0 20px;
  padding: 2px 0 2px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--vinc-ink-2);
  border-left: 3px solid var(--vinc-sun);
}

.vinc-note-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--vinc-green-deep);
}

.vinc-note-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ilustracion ---------- */
.vinc-art {
  position: relative;
  align-self: start;
  margin: -36px -72px 0 0;
}

.vinc-art-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Entrada en cuatro tiempos: fondo, mano, dedos y rayos. Cada pieza lleva su
   retraso en --vinc-delay desde el parcial vinc-art.php. Las curvas son mas
   cortas que --vinc-spring a proposito: con 900ms esa curva deja casi medio
   segundo de arrastre al final. Los keyframes solo declaran "from" para que la
   opacidad final sea la del atributo (la sombra y los puntos son translucidos). */
.vinc-art-svg {
  --vinc-art-out: cubic-bezier(0.25, 1, 0.5, 1);
  --vinc-art-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

.vinc-art-bg,
.vinc-art-hand,
.vinc-finger,
.vinc-ray,
.vinc-art-spark {
  transform-box: fill-box;
  animation-delay: var(--vinc-delay, 0ms);
  animation-fill-mode: both;
}

.vinc-art-bg {
  transform-origin: 50% 50%;
  animation-name: vinc-grow;
  animation-duration: 700ms;
  animation-timing-function: var(--vinc-art-out);
}

.vinc-art-fade {
  animation: vinc-fade 600ms ease-out var(--vinc-delay, 0ms) both;
}

.vinc-art-hand,
.vinc-finger {
  transform-origin: 50% 100%;
  animation-name: vinc-rise;
  animation-duration: 560ms;
  animation-timing-function: var(--vinc-art-out);
}

.vinc-ray {
  transform-origin: 50% 100%;
  animation-name: vinc-pop;
  animation-duration: 420ms;
  animation-timing-function: var(--vinc-art-pop);
}

.vinc-ray-side {
  transform-origin: 0 100%;
}

.vinc-art-spark {
  transform-origin: 50% 50%;
  animation-name: vinc-pop;
  animation-duration: 380ms;
  animation-timing-function: var(--vinc-art-pop);
}

@keyframes vinc-fade {
  from {
    opacity: 0;
  }
}

@keyframes vinc-grow {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes vinc-rise {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
}

@keyframes vinc-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

.vinc-art-sign {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  margin: -8px 72px 0 0;
}

.vinc-art-rule {
  align-self: center;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: rgba(38, 48, 12, 0.18);
}

.vinc-art-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vinc-muted);
}

.vinc-home .vinc-art-slogan {
  font-family: var(--vinc-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--vinc-green-deep);
}

@media (prefers-reduced-motion: reduce) {
  .vinc-art-svg * {
    animation: none;
  }

  .vinc-option,
  .vinc-option-icon::before,
  .vinc-option-icon::after,
  .vinc-option-arrow {
    transition-duration: 1ms;
  }

  .vinc-option:hover,
  .vinc-option:focus-visible,
  .vinc-option:active {
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  .vinc-art {
    margin-right: -24px;
  }

  .vinc-art-sign {
    margin-right: 24px;
  }
}

@media (max-width: 991.98px) {
  .vinc-home {
    align-items: flex-start;
    padding: 32px 0 48px;
  }

  .vinc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vinc-art {
    display: none;
  }

  .vinc-home .vinc-title {
    font-size: 56px;
  }

  .vinc-home .vinc-lead {
    margin-bottom: 30px;
    font-size: 16px;
  }

  .vinc-options,
  .vinc-note {
    max-width: none;
  }

  .vinc-bg-shape--b {
    right: -60px;
    bottom: -60px;
  }
}

@media (max-width: 575.98px) {
  .vinc-home .vinc-title {
    font-size: 46px;
  }

  .vinc-option {
    gap: 12px;
    padding: 12px 12px 12px 10px;
    border-radius: 18px;
  }

  .vinc-option-icon {
    width: 52px;
    height: 52px;
  }

  .vinc-option-icon svg {
    width: 26px;
    height: 26px;
  }

  .vinc-home .vinc-option-title {
    font-size: 17px;
  }

  .vinc-option-arrow {
    width: 30px;
    height: 30px;
  }

  .vinc-note {
    margin-left: 4px;
  }
}

/* ---------- Pantallas de estado (final, guardado) ---------- */
.estado-page {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

.estado-card {
  width: 100%;
  max-width: 520px;
  padding: 40px 32px;
  text-align: center;
  background: var(--ui-surface);
  border: 1px solid #eef0f3;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.08);
}

.estado-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 30px;
}

.estado-icon--ok {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.estado-icon--error {
  background: #fef2f2;
  color: #dc2626;
}

.estado-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ui-text);
}

.estado-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4b5563;
}

.estado-text strong {
  color: var(--ui-text);
  word-break: break-all;
}

/* ---------- Formatos: portada ---------- */
.formatos.formatos_bck {
  min-height: calc(100vh - 75px);
}

.formatos.formatos_bck .row.col-12 {
  margin-left: 0;
  margin-right: 0;
}

/* En tablet/movil la foto compite con las opciones: se aclara con una capa blanca en el mismo background */
@media (max-width: 991.98px) {
  .formatos.formatos_bck {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("/skins/page/images/Fondo-Imagen.jpg");
  }
}

.formatos .card.p-4 {
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.1);
}

.formatos .add-button-home {
  height: auto;
  min-height: 60px;
  gap: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ui-text-2);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease), transform 200ms var(--ui-ease);
}

.formatos .add-button-home i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.formatos .add-button-home:hover {
  color: var(--ui-text);
  border-color: var(--ui-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
}

/* ---------- Formatos / validar: formularios ---------- */
.container.pb-5.my-5 {
  background: var(--ui-surface);
  border: 1px solid #eef0f3;
  border-radius: 20px;
  box-shadow: var(--ui-shadow-card);
  padding: 32px 28px !important;
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.titulo-izq span {
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--ui-muted);
}

.titulo-izq .spanVerde {
  font-size: 16px;
  color: var(--ui-accent);
}

.hr,
.hrDos {
  height: 1px;
  border: 0;
  opacity: 1;
  background-color: var(--ui-border);
}

.container.pb-5.my-5 .fondo-verde:has(> h4) {
  margin-top: 16px;
  padding: 0 !important;
  text-align: left !important;
  color: var(--ui-text);
  background: transparent;
  border-radius: 0;
}

.container.pb-5.my-5 .fondo-verde:has(> h4) h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
}

.container.pb-5.my-5 .fondo-verde:has(> h4) h4::before {
  content: "\f15c";
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 15px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

/* Encabezados de columna de la tabla de beneficiarios: venian como pildoras
   gris oscuro, muy lejos del resto del formulario. */
.container.pb-5.my-5 .fondo-gris {
  padding: 8px 12px !important;
  border-radius: 8px;
  background: #f3f4f6;
  color: var(--ui-muted);
}

.container.pb-5.my-5 .fondo-gris h6 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-muted);
}

/* Separadores: 'fondo-verde' sin titulo adentro se usaba como barra de color. */
.container.pb-5.my-5 .fondo-verde:not(:has(h1, h2, h3, h4, h5, h6)) {
  height: 1px;
  padding: 0 !important;
  margin: 24px 0;
  background: var(--ui-border);
  border-radius: 0;
}

.fondoCampos {
  background-color: var(--ui-surface);
}

.opcionesRadios {
  height: auto;
  min-height: 46px;
  padding: 6px 10px;
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-input);
}

/* ---------- Validar: bloque de aprobacion ---------- */
/* El aprobador respondia dentro de un '.row' armado con 'd-flex' y columnas
   'col-lg-*': debajo de 992px esas columnas no tienen ancho, asi que la
   etiqueta se pegaba al campo en la misma linea y el bloque quedaba
   desordenado. Ahora es una tarjeta con su propia rejilla. */
.aprobacion-card {
  margin-top: 8px;
  padding: 24px;
  background: #fafbfc;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
}

.aprobacion-titulo {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ui-text);
}

/* La firma del aprobador se pinta en un <h1> (apertura, modificacion y
   estatutario). Las reglas '#font-Nr' de globalformatos.css le dan 60-80px
   crudos, que se salian de la caja: mismo trato que '#signatureShow h1'. */
.aprobacion-firma {
  display: block;
  width: 100%;
  min-height: 114px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-input);
}

.aprobacion-firma-label {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-subtle);
}

.aprobacion-firma h1 {
  margin: 0;
  color: #2b2b2b;
  line-height: 1.25 !important;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.aprobacion-firma h1#default {
  font-size: 18px !important;
  font-weight: normal !important;
}

.aprobacion-firma h1#font-2r,
.aprobacion-firma h1#font-3r,
.aprobacion-firma h1#font-4r {
  font-size: 28px !important;
}

.aprobacion-firma h1#font-5r {
  font-size: 22px !important;
}

.aprobacion-firma h1#font-6r {
  font-size: 44px !important;
}

/* El boton de estilos de firma queda debajo de su campo: a ancho completo
   mientras no quepa al lado */
.aprobacion-card .btn-font {
  width: 100%;
}

@media (min-width: 992px) {
  .aprobacion-card .btn-font {
    width: auto;
  }
}

@media (max-width: 767.98px) {
  .aprobacion-card {
    padding: 18px 14px;
    border-radius: 14px;
  }
}

/* Aviso de "ya respondio" cuando el aprobador vuelve a abrir un enlace que ya
   uso: antes era un <div class="text-center"> con texto plano. */
.alerta-respondida {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 20px 24px;
  background: rgba(136, 162, 49, 0.08);
  border: 1px solid rgba(136, 162, 49, 0.35);
  border-radius: 16px;
  text-align: left;
}

.alerta-respondida-icono {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(136, 162, 49, 0.15);
  color: #88a231;
  font-size: 18px;
}

.alerta-respondida-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alerta-respondida-texto strong {
  color: var(--ui-text, #1f2d3d);
  font-size: 15px;
}

.alerta-respondida-texto span {
  color: var(--ui-subtle, #667085);
  font-size: 13.5px;
}

@media (max-width: 575.98px) {
  .alerta-respondida {
    padding: 16px;
    text-align: center;
    flex-direction: column;
  }
}

/* Documento adjunto (boleteria / convenios) */
.fila-adjunto {
  align-items: center;
  row-gap: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ---------- Formatos: verificacion por codigo ---------- */
.caja-solauxilios .caja-form {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.caja-solauxilios .form.shadow {
  width: 100%;
  max-width: 460px;
  padding: 36px 32px;
  border: 1px solid #eef0f3;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.1) !important;
}

.caja-solauxilios .form .title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-text);
}

.caja-solauxilios .form .description {
  font-size: 15px;
  font-weight: 400;
  color: var(--ui-muted);
}

.caja-solauxilios .form .description strong {
  font-size: inherit;
  font-weight: 700;
  color: var(--ui-text);
}

.caja-solauxilios .form .input-fields input {
  width: 46px;
  height: 56px;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ui-text);
  background-color: #f9fafb;
  border: 2px solid var(--ui-border);
  border-radius: 12px;
  transition: border-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease);
}

.caja-solauxilios .form .input-fields input:focus {
  transform: none;
  border-color: var(--ui-accent);
  background-color: var(--ui-surface);
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.caja-solauxilios .verify {
  padding: 12px 28px;
  font-weight: 600;
  color: #fff;
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent);
  border-radius: 999px;
  cursor: pointer;
}

.caja-solauxilios .verify:hover,
.caja-solauxilios .verify:focus {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

/* ---------- Formatos: guardado ---------- */
.card-succes {
  padding-top: 40px;
  border: 1px solid #eef0f3;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.08);
}

.icon-container {
  width: 64px;
  height: 64px;
  background-color: var(--ui-accent);
  box-shadow: 0 8px 20px rgba(136, 162, 49, 0.35);
}

.icon-container i {
  font-size: 26px;
}

.card-succes .card-body {
  padding: 8px 28px 24px;
  text-align: left;
}

.card-succes .card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-text);
}

.card-succes p {
  line-height: 1.65;
  color: #4b5563;
}

/* ---------- Boton flotante de Whatsapp ----------
   Sus estilos viven en global.css, que solo carga el layout /page/page. El layout
   /page/formatos (formatos y validar) carga globalformatos.css, y sin estas reglas
   el boton se dibujaba como un bloque suelto al final de la pagina. */
.flotantes2 {
  display: flex;
  flex-direction: column;
  width: 50px;
  height: auto;
  position: fixed;
  /* Por encima del badge de reCAPTCHA (60px de alto + 14px desde abajo) */
  bottom: 90px;
  right: 10px;
  z-index: 999;
}

.flotantes2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #25d366;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.flotantes2 i {
  font-size: 30px !important;
  color: #ffffff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .col-md-p {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Formatos y validar: al apilarse, las columnas que no traen 'my-*' quedaban
     pegadas una a otra. El gutter vertical de Bootstrap las separa por igual */
  .container.pb-5.my-5 > .row,
  .container.pb-5.my-5 > form > .row {
    --bs-gutter-y: 0.75rem;
  }

  .container.pb-5.my-5 > .row > [class*="col-"]:empty,
  .container.pb-5.my-5 > form > .row > [class*="col-"]:empty {
    display: none;
  }

  /* Debajo de lg cada columna se apila: el encabezado de la tabla de beneficiarios
     queda huerfano y en su lugar se ve la etiqueta de cada campo (.d-lg-none). */
  .container.pb-5.my-5 .fondo-gris {
    display: none;
  }

  /* Los radios en linea ('Salario / Negocio / Otro') se montaban unos sobre otros */
  .opcionesRadios {
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px;
  }

  .opcionesRadios > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .opcionesRadios > [class*="col-"]:has(> .form-control) {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 767.98px) {

  .afiliaciones,
  .formatos {
    font-size: 14.5px;
  }

  /* La tarjeta de formatos / validar no se come el ancho util del telefono */
  .container.pb-5.my-5 {
    padding: 22px 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    border-radius: 14px;
  }

  /* El encabezado se apila: el titulo del registro necesita aire bajo el logo */
  .titulo-izq {
    margin-top: 14px;
  }

  .caja-form {
    padding: 22px 6px 8px !important;
    margin-bottom: 20px !important;
    border-radius: 14px;
  }

  .section-card-header {
    margin-bottom: 16px;
  }

  .section-card-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
    border-radius: 10px;
  }

  .section-card-title,
  .afiliaciones .fondo-azul-claro.rounded-pill h4 {
    font-size: 16px;
  }

  .col-md-p {
    flex: 0 0 100%;
    max-width: 100%;
  }

  header .header-content .text-header {
    font-size: 10px !important;
    letter-spacing: 0.04em;
  }

  header .header-content .icono-header {
    max-height: 30px;
    margin-left: 8px;
  }

  header .header-content.py-2 .logo2,
  header .header-content-home .logo2 {
    width: 130px;
  }

  .step-bck {
    padding-top: 20px !important;
  }

  /* 'auto' en los laterales: sin el, entre 576 y 768px el dialogo
     se queda en el max-width de Bootstrap (500px) pegado a la izquierda */
  .modal-dialog {
    margin: 12px auto;
  }

  .modal-header,
  .modal-body {
    padding: 16px 18px;
  }

  .container-radio {
    padding-right: 90px;
  }

  /* SI/NO y texto largo: el radio no se monta sobre el texto */
  .text-justify .form-control.d-inline {
    width: 100% !important;
    display: block !important;
    margin: 8px 0;
  }
}

@media (max-width: 575.98px) {
  .afiliaciones form>.row.justify-content-between {
    flex-direction: column-reverse;
  }

  .afiliaciones form>.row.justify-content-between .btn,
  .afiliaciones form>.row.justify-content-center .btn {
    width: 100%;
  }

  .btn-firma,
  .btn-firma-modal {
    padding: 12px 20px;
  }

  .alert {
    font-size: 14px;
  }
}
/* ---------- Cambio de correo (/page/cambiocorreo) ----------
   Reusa la portada (.vinc-home) como fondo y pone una tarjeta al centro. */
.cc-page {
  padding: 40px 0 56px;
}

.cc-card {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 36px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid #eef1e6;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(38, 48, 12, 0.10);
}

.cc-card--ancha {
  max-width: 640px;
}

.cc-paso {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinc-green-deep);
  background: var(--ui-accent-soft);
  border-radius: 999px;
}

.cc-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  color: var(--vinc-sky);
  background: rgba(39, 163, 219, 0.12);
  border-radius: 50%;
}

.cc-icono svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-icono--ok {
  color: var(--vinc-green);
  background: rgba(136, 162, 49, 0.14);
}

.cc-icono--aviso {
  color: var(--vinc-coral);
  background: rgba(239, 125, 45, 0.14);
}

.cc-titulo {
  margin: 0 0 10px;
  font-family: var(--vinc-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--vinc-ink);
}

.cc-texto {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vinc-muted);
}

.cc-form {
  text-align: left;
}

.cc-form label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vinc-ink-2);
}

.cc-boton {
  width: 100%;
  margin-top: 26px;
}

a.cc-boton {
  color: #fff;
}

.cc-volver {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vinc-muted);
  text-decoration: none;
}

.cc-volver:hover {
  color: var(--vinc-green-deep);
}

.cc-pregunta {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.cc-pregunta legend {
  display: flex;
  align-items: center;
  gap: 10px;
  float: none;
  width: 100%;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--vinc-ink);
}

.cc-numero {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  color: #fff;
  background: var(--vinc-green);
  border-radius: 50%;
}

.cc-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cc-form label.cc-opcion {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.cc-opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cc-opcion span {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ui-text-2);
  background: #fff;
  border: 1.5px solid var(--ui-border);
  border-radius: 12px;
  transition: border-color 200ms var(--ui-ease), background-color 200ms var(--ui-ease), box-shadow 200ms var(--ui-ease);
}

.cc-opcion:hover span {
  border-color: var(--vinc-green);
}

.cc-opcion input:checked + span {
  color: var(--vinc-ink);
  background: var(--ui-accent-soft);
  border-color: var(--vinc-green);
  box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

.cc-opcion input:focus-visible + span {
  box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.cc-contacto {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--vinc-ink-2);
  background: #f7f8f2;
  border-radius: 14px;
}

.cc-contacto a {
  font-weight: 700;
  color: var(--vinc-rose);
  text-decoration: none;
}

/* Enlace "no tengo acceso a mi correo" de los modales y del codigo */
.cc-enlace-correo {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vinc-rose, #e4407a);
  text-decoration: none;
}

.cc-enlace-correo:hover {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .cc-card {
    padding: 32px 20px 26px;
    border-radius: 20px;
  }

  .cc-opciones {
    grid-template-columns: 1fr;
  }
}

/* Cambio de correo: los dos caminos de la pantalla inicial */
.cc-camino {
  margin-top: 18px;
}

.cc-camino .cc-boton {
  margin-top: 0;
}

.cc-nota {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--vinc-muted);
}

.cc-boton--secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  color: var(--vinc-ink-2);
  background: #fff;
  border: 1.5px solid var(--ui-border-strong);
}

.cc-boton--secundario:hover,
.cc-boton--secundario:focus {
  color: var(--vinc-green-deep);
  background: var(--ui-accent-soft);
  border-color: var(--vinc-green);
}

/* Cambio de correo: aviso informativo (icono a la izquierda, texto alineado a la izquierda) */
.cc-aviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 16px;
  text-align: left;
  background: #fff8e6;
  border: 1px solid #f5dfa0;
  border-radius: 14px;
}

.cc-aviso-icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #b7791f;
  background: #fdebb8;
  border-radius: 50%;
}

.cc-aviso-icono svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-aviso-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #6b5416;
}

.cc-aviso-texto strong {
  font-size: 14px;
  color: #5c4310;
}