/* =====================================================================
   FONDTODOS · Capa visual "dashboard SaaS light"
   ---------------------------------------------------------------------
   ESTA HOJA ES SOLO PRESENTACIÓN.
   - No renombra, no elimina y no depende de ninguna clase nueva en el
     HTML: reestiliza las clases que el proyecto ya usa
     (.titulo-seccion, .caja-formulario, .formulario, .btn-azul, ...).
   - Se carga DESPUÉS de global.css. Todo va prefijado con `body.ui-dash`
     para ganarle en especificidad al Bootstrap 5.3 que paso5.php y
     paso6.php inyectan por CDN dentro del <body>.
   - Las clases .ui-* de aquí son OPCIONALES y aditivas.
   Para desactivar todo el rediseño: quitar el <link> de este archivo en
   app/layout/page/page.php (o la clase ui-dash del <body>).
   ===================================================================== */

body.ui-dash {
  --ui-bg: #F7F8FA;
  --ui-card: #FFFFFF;
  --ui-border: #E5E7EB;
  --ui-border-soft: #EEF0F3;
  --ui-text: #111827;
  --ui-text-2: #374151;
  --ui-muted: #6B7280;

  --ui-accent: #88a231;
  --ui-accent-dark: #6d8327;
  --ui-accent-soft: #F2F6E7;
  --ui-accent-line: #DCE6BE;

  --ui-danger: #B42318;
  --ui-danger-bg: #FEF3F2;
  --ui-danger-line: #FDA29B;
  --ui-warn: #B54708;
  --ui-warn-bg: #FFFAEB;
  --ui-warn-line: #FEC84B;
  --ui-info-bg: #F0F6FF;
  --ui-info-line: #B9D4FF;
  --ui-info: #175CD3;

  --ui-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, .05);
  --ui-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);

  --ui-r-lg: 18px;
  --ui-r-md: 14px;
  --ui-r-sm: 10px;
  --ui-pill: 999px;
}

/* ---------------------------------------------------------------------
   Inter (self-hosted) · fuente variable 400-700, subsets latin + latin-ext
   Archivos en /skins/page/fonts/inter/ · Licencia SIL OFL 1.1 (ver OFL.txt)
   Se sirve localmente para evitar el round-trip a fonts.googleapis.com +
   fonts.gstatic.com y para que el navegador la cachee con el resto del sitio.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  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: 400 700;
  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;
}

/* ---------------------------------------------------------------------
   1. Tipografía
   global.css declara `*{font-family:'Questrial-Regular'}` (especificidad
   0). Repetimos el mismo patrón para no alterar la cascada existente:
   los iconos de Font Awesome (.fas/.far/.fab) y las fuentes de firma
   (#font-2 ... #font-6) siguen ganando igual que hoy.
   --------------------------------------------------------------------- */
* {
  font-family: 'Inter', 'Questrial-Regular', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body.ui-dash {
  background-color: var(--ui-bg);
  color: var(--ui-text-2);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ui-dash p {
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   2. Cabecera (partials/botonera.php y partials/header.php)
   --------------------------------------------------------------------- */
body.ui-dash .header-menu::before {
  background: #FFFFFF;
  border-bottom: 1px solid var(--ui-border-soft);
  -webkit-box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .18);
  box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .18);
}

body.ui-dash header .header-content {
  color: var(--ui-text-2);
}

body.ui-dash .logo2,
body.ui-dash .logo3 {
  max-width: 100%;
  height: auto;
}

/* Nav en pills (Inicio / Solicitudes / Salir) */
body.ui-dash header .header-content nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

body.ui-dash header .header-content nav ul li {
  display: block;
  width: auto;
}

body.ui-dash header .header-content nav ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 116px;
  padding: 9px 20px;
  background: #FFFFFF;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-pill);
  box-shadow: var(--ui-shadow-sm);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

body.ui-dash header .header-content nav ul li a span {
  display: inline;
  height: auto;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-text-2);
  text-align: center;
}

body.ui-dash header .header-content nav ul li a:hover {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  box-shadow: 0 2px 8px rgba(136, 162, 49, .20);
  color: var(--ui-accent-dark);
  text-decoration: none;
}

body.ui-dash header .header-content nav ul li a:hover span {
  color: var(--ui-accent-dark);
}

/* Barra verde de header.php (vista de administrador / sarlaft / codeudor) */
body.ui-dash .fondo_header {
  background: var(--ui-accent);
  padding-top: 14px;
  padding-bottom: 14px;
}

body.ui-dash .titulo_blanco {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
}

body.ui-dash .separador_gris {
  display: none;
}

/* ---------------------------------------------------------------------
   3. Títulos de página y contador de pasos
   --------------------------------------------------------------------- */
body.ui-dash .titulo {
  color: var(--ui-text-2);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-top: 22px;
  margin-bottom: 10px;
}

/* "Paso 1/3" -> badge */
body.ui-dash .text-end>.titulo,
body.ui-dash .paso {
  display: inline-block;
  margin-top: 26px;
  margin-bottom: 10px;
  padding: 6px 16px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-pill);
  color: var(--ui-accent-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

/* Encabezado de pagina: barra de acento vertical junto al titulo y una
   linea fina a todo el ancho que lo cierra (opcion F).
   `.separador_login2` es un div decorativo vacio, sin ningun gancho de JS. */
body.ui-dash .separador_login2,
body.ui-dash .separador_login3 {
  width: 100%;
  height: 1px;
  background: var(--ui-border);
  border-radius: 0;
  margin-top: 6px;
  margin-bottom: 22px;
}
/* los separadores de otros contextos conservan el remate de marca */
body.ui-dash .separador_login4,
body.ui-dash .separador_login5,
body.ui-dash .separador_formulario,
body.ui-dash .separador_tabla {
  background: var(--ui-accent);
  height: 4px;
  width: 56px;
  border-radius: var(--ui-pill);
}

/* La barra verde va solo en el titulo de pagina, NO en el badge de paso
   ("Paso 1/3" tambien usa .titulo, dentro de un contenedor .text-end). */
/* Titulo de pagina con icono verde a la izquierda (antes: barra vertical).
   Icono generico: documento. Las paginas con significado propio llevan una
   clase aditiva .ui-tit-* en su <h3> (Solicitar Credito, Mis solicitudes,
   Mi perfil, SARLAFT). */
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 0;
}
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo::before {
  content: "\f15c";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  color: var(--ui-accent);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo.ui-tit-credito::before { content: "\f09d"; }      /* credit-card */
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo.ui-tit-solicitudes::before { content: "\f0ae"; }  /* tasks */
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo.ui-tit-perfil::before { content: "\f007"; }       /* user */
body.ui-dash [class*="col-"]:not(.text-end):not(.text-center) > .titulo.ui-tit-sarlaft::before { content: "\f3ed"; }      /* shield-alt */

/* ---------------------------------------------------------------------
   4. Encabezados de sección (.titulo-seccion) -> pill/badge con icono
   Antes: barra verde sólida a todo el ancho.
   --------------------------------------------------------------------- */
body.ui-dash .titulo-seccion {
  display: flex;
  align-items: center;
  /* `.justify-content-center` y `.text-center` de BS5 son !important */
  justify-content: flex-start !important;
  gap: 12px;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: left !important;
}

/* neutraliza los margenes negativos cuando ademas lleva .row */
body.ui-dash .row.titulo-seccion {
  margin-left: 0;
  margin-right: 0;
}

body.ui-dash .titulo-seccion strong,
body.ui-dash .titulo-seccion b {
  font-weight: 600;
  color: inherit;
}

/* Marca a la izquierda: cuadro verde suave; con .ui-ico-* lleva icono */
body.ui-dash .titulo-seccion::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  color: var(--ui-accent);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

body.ui-dash .ui-ico-user::before {
  content: "\f007";
}

body.ui-dash .ui-ico-work::before {
  content: "\f0b1";
}

body.ui-dash .ui-ico-bank::before {
  content: "\f19c";
}

body.ui-dash .ui-ico-money::before {
  content: "\f51e";
}

body.ui-dash .ui-ico-shield::before {
  content: "\f3ed";
}

body.ui-dash .ui-ico-docs::before {
  content: "\f0c6";
}

body.ui-dash .ui-ico-file::before {
  content: "\f15c";
}

body.ui-dash .ui-ico-family::before {
  content: "\f0c0";
}

body.ui-dash .ui-ico-sign::before {
  content: "\f5ac";
}

body.ui-dash .ui-ico-check::before {
  content: "\f0ae";
}

body.ui-dash .ui-ico-chart::before {
  content: "\f201";
}

body.ui-dash .ui-ico-info::before {
  content: "\f05a";
}

body.ui-dash .ui-ico-lock::before {
  content: "\f023";
}

body.ui-dash .ui-ico-car::before {
  content: "\f1b9";
}

/* ---------------------------------------------------------------------
   5. Tarjetas (bento). .caja-formulario es la caja que ya existía.
   --------------------------------------------------------------------- */
body.ui-dash .caja-formulario,
body.ui-dash .caja-form,
body.ui-dash .ui-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  padding: 22px 20px;
  margin-bottom: 28px;
}

/* si además es .row, hay que anular sus márgenes negativos (pero NUNCA
   tocamos margin-left en general: hay .caja-formulario con offset-lg-*) */
body.ui-dash .row.caja-formulario {
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
  padding-right: 10px;
}

body.ui-dash .caja-formulario>[class*="col-"] {
  margin-bottom: 14px;
}

body.ui-dash .caja-formulario.azul,
body.ui-dash .caja-formulario .azul {
  color: var(--ui-text-2);
}

/* .formulario2 (columna izquierda del simulador, sistema/index.php) */
body.ui-dash .formulario2 {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  padding: 24px 22px 18px;
  margin-bottom: 28px;
}

body.ui-dash .formulario2 .grupo-campo {
  align-items: center;
}

body.ui-dash .formulario2 div {
  color: var(--ui-muted);
}

body.ui-dash .formulario2 .form-control,
body.ui-dash .formulario2 .form-select {
  color: var(--ui-text);
  font-weight: 500;
}

body.ui-dash .formulario2>.row>[class*="col-"] {
  margin-bottom: 6px;
}

/* Tarjeta neutra reutilizable para vistas sin .caja-formulario */
body.ui-dash .ui-card-plain {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  padding: 24px;
  margin-bottom: 28px;
}

/* Cards de Bootstrap (paso5) */
body.ui-dash .card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
}

body.ui-dash .card-body {
  padding: 24px;
}

/* ---------------------------------------------------------------------
   6. Labels y campos
   --------------------------------------------------------------------- */
body.ui-dash .formulario label,
body.ui-dash .formulario2 label,
body.ui-dash .caja-formulario label,
body.ui-dash .afiliaciones label,
body.ui-dash .caja_login label {
  display: block;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  text-transform: none;
}

/* los labels-checkbox/radio grandes conservan su tamaño */
body.ui-dash .container-radio,
body.ui-dash .radios label,
body.ui-dash .form-check label {
  font-size: inherit;
}

body.ui-dash .form-control,
body.ui-dash .form-select,
body.ui-dash textarea.form-control,
body.ui-dash select.form-control {
  min-height: 42px;
  padding: .60rem .85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-sm);
  color: var(--ui-text);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.ui-dash textarea.form-control {
  min-height: 92px;
}

body.ui-dash .form-control:focus,
body.ui-dash .form-select:focus,
body.ui-dash select.form-control:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .16);
  outline: none;
}

body.ui-dash .form-control::placeholder {
  color: #9CA3AF;
}

body.ui-dash .form-control[readonly],
body.ui-dash .form-control:disabled {
  background-color: #F9FAFB;
  color: var(--ui-text-2);
}

/* .campo_gris trae el icono "$" como background-image: no lo tocamos */
body.ui-dash .campo,
body.ui-dash .campo_gris {
  color: var(--ui-text);
  font-weight: 600;
}

/* flecha propia para los <select class="form-control"> */
body.ui-dash select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 15px 15px;
  padding-right: 2.2rem;
}

body.ui-dash .form-check-input {
  width: 1.1em;
  height: 1.1em;
  border-color: #CBD5E1;
  border-radius: 6px;
}

body.ui-dash .form-check-input:checked {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

body.ui-dash .form-check-input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .16);
}

body.ui-dash input[type="checkbox"]:not(.form-check-input),
body.ui-dash input[type="radio"]:not(.form-check-input) {
  accent-color: var(--ui-accent);
}

body.ui-dash .input-group>.form-control,
body.ui-dash .input-group>.form-select {
  border-radius: var(--ui-r-sm);
}

/* ---------------------------------------------------------------------
   7. Botones
   --------------------------------------------------------------------- */
body.ui-dash .btn {
  border-radius: var(--ui-pill);
  padding: .6rem 1.4rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease;
}

body.ui-dash .btn-sm {
  padding: .38rem 1rem;
  font-size: 13px;
}

body.ui-dash .btn:focus,
body.ui-dash .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .22);
}

/* Primario: .btn-azul en global.css usa !important, hay que igualarlo */
body.ui-dash .btn-azul,
body.ui-dash input.btn-azul[type="submit"] {
  background: var(--ui-accent) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ui-accent) !important;
  border-radius: var(--ui-pill);
  padding: .7rem 2rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

body.ui-dash .btn-azul:hover {
  background: var(--ui-accent-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(136, 162, 49, .28);
}

body.ui-dash .btn-azul:disabled,
body.ui-dash .btn-azul[disabled] {
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}

/* Secundarios */
body.ui-dash .btn-primary {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #FFFFFF;
}

body.ui-dash .btn-primary:hover {
  background-color: var(--ui-accent-dark);
  border-color: var(--ui-accent-dark);
}

body.ui-dash .btn-danger {
  background-color: #FFFFFF;
  border: 1px solid var(--ui-danger-line);
  color: var(--ui-danger);
}

body.ui-dash .btn-danger:hover {
  background-color: var(--ui-danger-bg);
  border-color: var(--ui-danger);
  color: var(--ui-danger);
}

body.ui-dash .btn-secondary,
body.ui-dash .ui-btn-ghost {
  background-color: #FFFFFF;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-2);
}

body.ui-dash .btn-secondary:hover,
body.ui-dash .ui-btn-ghost:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
  color: var(--ui-text);
}

body.ui-dash .btn-firma,
body.ui-dash .btn-send-signature,
body.ui-dash .btn-font {
  border-radius: var(--ui-pill);
}

/* botón full-width del pie de los modales de error */
body.ui-dash .boton-cerrar {
  border-radius: 0 0 var(--ui-r-lg) var(--ui-r-lg);
  background-color: var(--ui-accent);
  color: #FFFFFF;
}

/* El boton del login se define en la seccion 26.4 */

/* ---------------------------------------------------------------------
   8. Alertas y callouts
   --------------------------------------------------------------------- */
body.ui-dash .div_rojo {
  display: block;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--ui-danger-bg);
  border: 1px solid var(--ui-danger-line);
  border-radius: var(--ui-r-md);
  color: #7A271A !important;
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: none;
}

body.ui-dash .div_rojo .rojo,
body.ui-dash .div_rojo .fa-asterisk {
  color: var(--ui-danger);
}

body.ui-dash .texto_rojo {
  display: inline-block;
  padding: 10px 16px;
  background: var(--ui-danger-bg);
  border: 1px solid var(--ui-danger-line);
  border-radius: var(--ui-r-md);
  color: #7A271A;
  font-size: 13.5px;
  font-weight: 600;
}

body.ui-dash .alert {
  border-radius: var(--ui-r-md);
  border-width: 1px;
  padding: 14px 18px;
  font-size: 13.5px;
  box-shadow: none;
}

body.ui-dash .alert-warning {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-line);
  color: var(--ui-warn);
}

body.ui-dash .alert-danger {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-line);
  color: #7A271A;
}

body.ui-dash .alert-info {
  background: var(--ui-info-bg);
  border-color: var(--ui-info-line);
  color: var(--ui-info);
}

body.ui-dash .alert-success {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-line);
  color: var(--ui-accent-dark);
}

/* Aviso rosado de paso1 (cuenta de desembolso) y de paso6 (anexos).
   Se limita a `.rosado.pt-2` para no encajonar el bloque
   "Objetivo del crédito" de sistema/index.php, que lleva un textarea. */
body.ui-dash .rosado.pt-2 {
  display: block;
  width: 100%;
  padding: 12px 16px 12px;
  background: #FDF2F8;
  border: 1px solid #FBCFE8;
  border-radius: var(--ui-r-md);
  color: #9D174D !important;
  font-size: 13.5px !important;
  font-weight: 600;
  line-height: 1.55;
}

body.ui-dash .rosado {
  color: #A3196F !important;
}

body.ui-dash .texto-adicional {
  margin-bottom: 8px;
}

body.ui-dash .texto-adicional p {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  padding: 18px 20px;
  color: var(--ui-text-2);
  font-size: 13.5px;
  text-align: justify;
}

/* ---------------------------------------------------------------------
   9. Panel de requisitos y de valor de cuota (sistema/index.php)
   --------------------------------------------------------------------- */
body.ui-dash #titulo_requisitos {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  margin-bottom: 12px;
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 700;
}

body.ui-dash #titulo_requisitos::before {
  content: "\f0ae";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 14px;
  color: var(--ui-accent);
}

body.ui-dash #titulo_requisitos b {
  font-weight: 700;
}

body.ui-dash #requisitos {
  max-height: 280px;
  padding: 18px 20px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-right: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text-2);
  font-size: 13.5px;
  overflow-y: auto;
  scrollbar-width: thin;
}

body.ui-dash #requisitos::-webkit-scrollbar {
  width: 8px;
}

body.ui-dash #requisitos::-webkit-scrollbar-thumb {
  background: #DDE1E6;
  border-radius: var(--ui-pill);
}

body.ui-dash #requisitos ul {
  padding-left: 18px;
  margin-bottom: 0;
}

body.ui-dash #requisitos li {
  margin-bottom: 6px;
}

body.ui-dash #div_valor {
  margin-top: 20px;
  padding: 22px 20px;
  background: var(--ui-card);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  color: var(--ui-muted);
}

body.ui-dash .valor_cuota {
  display: inline-block;
  margin: 6px 0 12px;
  color: var(--ui-accent-dark);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

body.ui-dash .cop {
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-muted);
}

/* ---------------------------------------------------------------------
   10. Zona de carga de archivos (bootstrap-fileinput) y filas de anexos
   --------------------------------------------------------------------- */
/* bootstrap-fileinput 5.5 se carga con el tema fa6, que NO define
   $.fn.fileinputBsVersion; su helper isBs() entonces asume Bootstrap 4 y el
   marcado real que llega al DOM es:
     .file-input > .file-caption                      <- la carcasa
         > .input-group
             > input.file-caption-name.form-control   <- el campo
             > span.file-caption-icon
             > .input-group-btn.input-group-append
                 > div.btn.btn-cafe.btn-file          <- "Examinar"
   Ojo: la carcasa es `.file-caption` (un div), no `.file-caption-main`, y el
   campo es el `.form-control` de dentro. Se trata como UN solo control
   segmentado (campo + boton adosado) en una sola linea, con el mismo radio de
   10px que el resto de inputs. Nada de pill flotante. */
body.ui-dash .file-input {
  margin-bottom: 0;
  width: 100%;
}

/* la carcasa: un unico borde alrededor del campo y del boton */
body.ui-dash .file-input .file-caption {
  display: block;
  width: 100%;
  padding: 0 !important;
  background: #FFFFFF;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.ui-dash .file-input .file-caption:hover {
  border-color: #D1D5DB;
}

body.ui-dash .file-input .file-caption:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .16);
}

/* `.input-group` de Bootstrap 5 trae `flex-wrap: wrap`: sin esto el boton
   "Examinar" se va a una segunda linea debajo del campo. */
body.ui-dash .file-input .file-caption > .input-group {
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

/* lado izquierdo: el campo, sin borde propio y encogible */
body.ui-dash .file-input .file-caption-name {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  min-height: 42px;
  padding: .5rem .85rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: var(--ui-text-2);
  font-size: 13.5px;
  text-overflow: ellipsis;
}

body.ui-dash .file-caption-name::placeholder {
  color: #9CA3AF;
}

/* el icono lo posiciona el vendor en absolute sobre el borde izquierdo del
   campo, y lo mantiene en display:none hasta que hay archivo
   (`.file-caption.icon-visible`). Aqui solo se recoloca: sin tocar `display`,
   que si no aparece tambien con el campo vacio. */
body.ui-dash .file-input .file-caption-icon {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  padding: 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1;
}

body.ui-dash .file-input .file-caption.icon-visible .file-caption-name {
  padding-left: 32px;
}

/* lado derecho: boton adosado, neutro */
body.ui-dash .file-input .input-group-btn,
body.ui-dash .file-input .input-group-append {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  margin: 0;
}

body.ui-dash .btn-file,
body.ui-dash .file-input .btn-cafe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: .5rem 1.15rem !important;
  background: #F9FAFB !important;
  border: none !important;
  border-left: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  color: var(--ui-text-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

body.ui-dash .btn-file:hover,
body.ui-dash .file-input .btn-cafe:hover {
  background: #F3F4F6 !important;
  color: var(--ui-accent-dark) !important;
}

body.ui-dash .btn-file i {
  color: var(--ui-muted);
  font-size: 13px;
  transition: color .15s ease;
}

body.ui-dash .btn-file:hover i {
  color: var(--ui-accent);
}

body.ui-dash .btn-file input[type="file"] {
  cursor: pointer;
}

/* estado "ya hay archivo": bootstrap-fileinput quita .file-input-new */
body.ui-dash .file-input:not(.file-input-new) .file-caption {
  border-color: var(--ui-accent-line);
  background: #FCFDF8;
}

body.ui-dash .file-input:not(.file-input-new) .file-caption-name {
  color: var(--ui-text);
  font-weight: 500;
}

body.ui-dash .file-input:not(.file-input-new) .file-caption-icon {
  color: var(--ui-accent);
}

/* boton Cancelar de la subida, cuando aparece */
body.ui-dash .fileinput-cancel-button {
  border: none !important;
  border-left: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: #FFF7F6 !important;
  color: var(--ui-danger) !important;
  padding: .5rem 1rem !important;
  font-size: 13px;
}

body.ui-dash .file-preview {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  background: #FBFCFD;
  box-shadow: none;
}

body.ui-dash .file-preview .btn-close,
body.ui-dash .file-preview .fileinput-remove {
  opacity: .5;
}

body.ui-dash .kv-upload-progress .progress {
  border-radius: var(--ui-pill);
  height: 6px;
}

body.ui-dash .kv-upload-progress .progress-bar {
  background-color: var(--ui-accent) !important;
}

/* Encabezado de grupo de anexos (.fondo-gris2).
   OJO: esta clase se usa en <div> (paso6) y tambien en <tr> de tablas
   (comite, cambiosolicitud, gerencia...). Cada caso va por separado:
   convertir un <tr> en inline-block destruiria la tabla. */
body.ui-dash div.fondo-gris2 {
  display: block;
  width: 100%;
  margin: 24px 0 12px;
  padding: 0;
  background: transparent !important;
  border: none;
}

body.ui-dash div.fondo-gris2 b,
body.ui-dash div.fondo-gris2 strong {
  display: inline-block;
  padding: 8px 18px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-pill);
  color: var(--ui-accent-dark) !important;
  font-size: 13.5px;
  font-weight: 700;
}

/* filas de encabezado de tabla: solo color, nunca display */
body.ui-dash tr.fondo-gris2,
body.ui-dash tr.fondo-gris {
  background: #F9FAFB !important;
  color: var(--ui-muted) !important;
}

body.ui-dash tr.fondo-gris2 td,
body.ui-dash tr.fondo-gris2 th,
body.ui-dash tr.fondo-gris td,
body.ui-dash tr.fondo-gris th,
body.ui-dash tr.fondo-gris2 b,
body.ui-dash tr.fondo-gris b {
  color: var(--ui-muted) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Cada fila de documento (.fondo-gris3) -> tarjeta */
body.ui-dash .fondo-gris3 {
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  box-shadow: var(--ui-shadow-sm);
}

body.ui-dash .fondo-gris3>.row {
  align-items: center;
  row-gap: 10px;
}

body.ui-dash .fondo-gris3 .enlinea {
  color: var(--ui-text-2);
  font-size: 13.5px;
  font-weight: 600;
  align-self: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* El widget sustituye al <input>, asi que pierde el col-lg-6 original: se le
   devuelve ese ancho, pero FIJO, no elastico. Elastico (`flex: 1 1 260px`)
   cada fila mide distinto segun lo que tenga al lado: el `corte/ok.png` del
   archivo ya subido, el bloque `.d-flex.w-50` con el enlace al PDF... y los
   controles salian de tamanos distintos entre si. */
body.ui-dash .fondo-gris3 > .row > .file-input {
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
}

@media (min-width: 992px) {
  body.ui-dash .fondo-gris3 > .row > .file-input {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    margin-left: auto;
  }

  /* con el control ya ocupando la mitad exacta, el "ok" cae a una segunda
     linea: se alinea bajo el control en vez de quedar suelto a la izquierda */
  body.ui-dash .fondo-gris3 > .row > img {
    margin-left: 50%;
  }
}

/* Los desprendibles de pago anidan el control en `.col-lg-6 > .row > .col-7`
   (siempre con `.pad0`), lo que lo dejaba ~20 puntos mas estrecho que los
   demas. Ocupa la columna entera para que mida lo mismo que el resto. */
body.ui-dash .fondo-gris3 .col-lg-6 > .row > .pad0 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* corte/ok.png (30x30) va suelto como flex item dentro del .row: sin esto
   `align-self:stretch` lo estira a la altura de la fila y lo agranda. */
body.ui-dash .fondo-gris3 img,
body.ui-dash .fondo-gris3 .row>img {
  flex: 0 0 auto;
  align-self: center;
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-left: 10px;
}

/* los enlaces de descarga en modo detalle */
body.ui-dash .fondo-gris3 .enlace1 {
  font-size: 13px;
  word-break: break-all;
}

/* ---------------------------------------------------------------------
   11. Tablas
   --------------------------------------------------------------------- */
body.ui-dash .tablaGris2,
body.ui-dash .tabla_gris,
body.ui-dash .tabla2,
body.ui-dash .tabla-resumen,
body.ui-dash .table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  font-size: 13.5px;
}

body.ui-dash .tablaGris2 td,
body.ui-dash .tablaGris2 th,
body.ui-dash .tabla_gris td,
body.ui-dash .tabla_gris th,
body.ui-dash .tabla2 td,
body.ui-dash .tabla-resumen td,
body.ui-dash .table td,
body.ui-dash .table th {
  border: none;
  border-bottom: 1px solid var(--ui-border-soft);
  padding: 12px 14px;
  color: var(--ui-text-2);
  vertical-align: middle;
}

body.ui-dash .tablaGris2 tr:last-child td,
body.ui-dash .tabla_gris tr:last-child td,
body.ui-dash .table tbody tr:last-child td {
  border-bottom: none;
}

body.ui-dash .fondo3,
body.ui-dash .table thead th {
  background: #F9FAFB !important;
  color: var(--ui-muted) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.ui-dash .fondo3 td,
body.ui-dash .fondo3 div {
  color: var(--ui-muted) !important;
}

body.ui-dash .tabla_lineas tr:nth-child(odd),
body.ui-dash .tabla-resumen tr:nth-child(odd) {
  background: #FBFCFD;
}

body.ui-dash .tablaGris2 tbody tr:hover,
body.ui-dash .table tbody tr:hover {
  background: #FAFBFC;
}

body.ui-dash .ui-table-scroll {
  overflow-x: auto;
}

/* ---------------------------------------------------------------------
   12. Modales
   --------------------------------------------------------------------- */
body.ui-dash .modal-content {
  border: none;
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
}

body.ui-dash .modal-header {
  border-bottom: 1px solid var(--ui-border-soft);
  padding: 18px 22px;
}

body.ui-dash .modal-title {
  color: var(--ui-text);
  font-size: 17px;
  font-weight: 700;
}

body.ui-dash .modal-body {
  padding: 20px 22px;
}

body.ui-dash .modal-footer {
  border-top: 1px solid var(--ui-border-soft);
  padding: 14px 18px;
}

body.ui-dash .modal-footer.p-0 {
  padding: 0;
}

body.ui-dash .title_error {
  color: var(--ui-text);
  font-weight: 700;
}

body.ui-dash .triangulo-error {
  color: var(--ui-accent);
}

/* ---------------------------------------------------------------------
   13. Detalles varios
   --------------------------------------------------------------------- */
body.ui-dash .enlace_modal,
body.ui-dash .enlace1 {
  color: var(--ui-accent-dark) !important;
}

body.ui-dash .azul,
body.ui-dash .color-verde,
body.ui-dash .texto-azul2 {
  color: var(--ui-accent-dark);
}

body.ui-dash .texto-azul {
  color: var(--ui-text-2);
  font-size: 15px;
}

body.ui-dash .datosResaltados {
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-r-md);
  color: var(--ui-accent-dark);
  font-size: 18px;
  padding: 14px 18px;
}

body.ui-dash .b-redondeado {
  border-radius: var(--ui-r-lg);
}

body.ui-dash .fondo-verde {
  border-radius: var(--ui-r-lg);
  background-color: var(--ui-accent) !important;
}

body.ui-dash .accept-sign {
  border-radius: var(--ui-r-md);
}

body.ui-dash .checkmark {
  border-radius: var(--ui-r-sm);
}

body.ui-dash .linea {
  border-bottom: 1px solid var(--ui-accent);
}

body.ui-dash hr {
  border-color: var(--ui-border);
  opacity: 1;
}

/* respiro general entre bloques del flujo */
body.ui-dash #div_paso5,
body.ui-dash #div_paso6,
body.ui-dash #div_carta,
body.ui-dash #div_carta2,
body.ui-dash #resultado {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------
   14. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.ui-dash .titulo {
    font-size: 22px;
  }

  body.ui-dash .row.caja-formulario,
  body.ui-dash .caja-formulario,
  body.ui-dash .formulario2 {
    padding: 18px 14px;
    border-radius: var(--ui-r-md);
  }

  body.ui-dash .titulo-seccion {
    font-size: 15px;
  }

  body.ui-dash header .header-content nav ul {
    justify-content: flex-start;
  }

  body.ui-dash header .header-content nav ul li a {
    min-width: 0;
    padding: 8px 16px;
  }

  body.ui-dash .valor_cuota {
    font-size: 28px;
  }
}

/* ---------------------------------------------------------------------
   15. Correcciones de especificidad
   `.formulario2 div` pinta en gris TODOS los div hijos; aquí se devuelve
   su color a los elementos que deben conservarlo.
   --------------------------------------------------------------------- */
body.ui-dash .formulario2 .texto_rojo,
body.ui-dash .formulario .texto_rojo {
  color: #7A271A;
  background: var(--ui-danger-bg);
  border: 1px solid var(--ui-danger-line);
}

body.ui-dash .formulario2 .div_rojo,
body.ui-dash .formulario .div_rojo {
  color: #7A271A !important;
}

body.ui-dash .formulario2 .rojo,
body.ui-dash .formulario .rojo {
  color: var(--ui-danger);
}

body.ui-dash .formulario2 .rosado,
body.ui-dash .formulario .rosado {
  color: #A3196F !important;
}

body.ui-dash .formulario2 .alert-warning,
body.ui-dash .formulario .alert-warning {
  color: var(--ui-warn);
}

body.ui-dash .formulario2 .alert-danger,
body.ui-dash .formulario .alert-danger {
  color: #7A271A;
}

body.ui-dash .formulario2 .alert-info,
body.ui-dash .formulario .alert-info {
  color: var(--ui-info);
}

body.ui-dash .formulario2 .titulo-seccion,
body.ui-dash .formulario .titulo-seccion {
  color: var(--ui-text);
}

body.ui-dash .formulario2 .valor_cuota {
  color: var(--ui-accent-dark);
}

body.ui-dash .formulario2 #div_credifacil {
  font-size: 12px;
}

/* La tarjeta neutra se usa sobre elementos .col-*, hay que ganarle al gutter */
body.ui-dash [class*="col-"].ui-card-plain {
  padding-left: 26px;
  padding-right: 26px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ---------------------------------------------------------------------
   16. Ajustes finos detectados al revisar el render
   --------------------------------------------------------------------- */
/* global.css sube el separador con margin-top:-15px; con el titulo mas
   grande de esta capa se montaba sobre el texto. */
body.ui-dash .separador_login2,
body.ui-dash .separador_login3 {
  margin-top: 4px;
  margin-bottom: 18px;
}

/* los hijos de la tarjeta ya aportan 14px inferiores: evita el hueco */
body.ui-dash .caja-formulario {
  padding-bottom: 10px;
}

body.ui-dash .caja-formulario>[class*="col-"]:last-child {
  margin-bottom: 14px;
}

/* `.formulario div` pintaba de verde textos sueltos (los "Si/No") */
body.ui-dash .formulario div {
  color: var(--ui-text-2);
}

body.ui-dash .formulario .form-control,
body.ui-dash .formulario .form-select {
  color: var(--ui-text);
}

body.ui-dash .formulario .campo,
body.ui-dash .formulario .campo_gris {
  color: var(--ui-text);
  font-weight: 600;
}

/* la columna del asterisco en los callouts rojos no necesita 1/12 del ancho */
body.ui-dash .div_rojo>.row {
  align-items: center;
}

body.ui-dash .div_rojo .col-1 {
  flex: 0 0 auto;
  width: auto;
  padding-right: 4px;
}

/* Tablas legacy sin clase, marcadas con el atributo border="1"
   (comite, cambiosolicitud, gerencia, analista): se les quita el borde
   duro del navegador sin tocar su marcado. */
body.ui-dash table[border] {
  border: 1px solid var(--ui-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--ui-r-lg);
  overflow: hidden;
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
  font-size: 13.5px;
}

body.ui-dash table[border] td,
body.ui-dash table[border] th {
  border: none;
  border-bottom: 1px solid var(--ui-border-soft);
  padding: 12px 14px;
  vertical-align: middle;
}

body.ui-dash table[border] tr:last-child td,
body.ui-dash table[border] tr:last-child th {
  border-bottom: none;
}

/* ---------------------------------------------------------------------
   17. Correcciones responsive verificadas a 390px
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* .header-menu::before es una banda blanca absoluta de 236px con
     margin-top:-100px. Al envolverse el nav en dos filas, el contenido
     quedaba por encima del primer bloque de la pagina. En movil se cambia
     por un fondo real sobre el <header>. */
  body.ui-dash .header-menu::before {
    display: none;
  }

  /* OJO: sin `display`. Las vistas de login/otp/recordar/indexinactive
     ocultan el header con `header{display:none}` (especificidad 0,0,1) y
     cualquier display aqui (0,2,1) se lo pisaria, devolviendo una barra
     que esas pantallas esconden a proposito. */
  body.ui-dash header.header-menu {
    background: #FFFFFF;
    border-bottom: 1px solid var(--ui-border-soft);
    box-shadow: 0 2px 10px -6px rgba(16, 24, 40, .18);
    padding-bottom: 12px;
    margin-bottom: 20px;
  }

  body.ui-dash header .header-content {
    height: auto;
    padding-bottom: 6px;
  }

  body.ui-dash .logo2 {
    width: 190px;
  }

  body.ui-dash .logo3 {
    width: 180px;
    padding: 10px;
  }

  /* el control de archivo se mantiene unido */
  body.ui-dash .file-input .file-caption > .input-group {
    flex-wrap: nowrap;
  }

  body.ui-dash .btn-file {
    padding: .5rem .85rem !important;
  }
}

@media (max-width: 575.98px) {

  /* El simulador usa .col-4/.col-8 sin breakpoint, asi que en movil la
     etiqueta quedaba en una columna de ~110px y se partia en tres lineas.
     Se apilan etiqueta y campo. Solo layout: no se toca el marcado. */
  body.ui-dash .formulario2 .grupo-campo>.col-4,
  body.ui-dash .formulario2 .grupo-campo>.col-8,
  body.ui-dash .formulario2 .grupo-campo>.col-6 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  body.ui-dash .formulario2 .grupo-campo>.col-4>div,
  body.ui-dash .formulario2 .grupo-campo>.col-6>div {
    text-align: left !important;
    margin-top: 8px;
    font-size: 13px;
  }

  body.ui-dash .formulario2 .grupo-campo>.col-4>div[align="right"] {
    text-align: left !important;
  }
}

/* ---------------------------------------------------------------------
   18. Red de seguridad para el viewport real
   Hasta ahora el layout no declaraba <meta name="viewport">, asi que el
   movil renderizaba sobre un viewport virtual de 980px y escalaba: ningun
   breakpoint llegaba a dispararse. Con el meta ya puesto, estos son los
   anchos fijos heredados que si pueden desbordar.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  body.ui-dash .container,
  body.ui-dash .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* .fuente-30 = 30px en el titulo del header */
  body.ui-dash .fuente-30,
  body.ui-dash .titulo_blanco {
    font-size: 18px;
    line-height: 1.3;
  }

  body.ui-dash .fondo_header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* botones de firma: padding 10px 60px no cabe en 390px */
  body.ui-dash .btn-firma {
    padding: 10px 22px;
    font-size: 16px;
    margin: 6px 4px;
  }

  body.ui-dash .container-radio {
    padding-right: 0;
    font-size: 16px;
  }

  body.ui-dash .checkmark {
    position: static;
    width: 64px;
    height: 34px;
    margin-top: 8px;
  }

  body.ui-dash .btn-send-signature {
    width: auto;
  }

  body.ui-dash .valor_cuota {
    font-size: 28px;
  }

  body.ui-dash #requisitos {
    max-height: 220px;
  }

  body.ui-dash .modal-dialog {
    margin: .5rem;
  }
}

@media (max-width: 575.98px) {

  /* Tablas anchas: sin esto quedan recortadas por el overflow-x:hidden
     que global.css pone en <body>, y el usuario no puede ver las ultimas
     columnas. Se vuelven desplazables en horizontal. */
  body.ui-dash .tablaGris2,
  body.ui-dash .tabla_gris,
  body.ui-dash .tabla-resumen,
  body.ui-dash .tabla_lineas,
  body.ui-dash table[border] {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body.ui-dash .tablaGris2 td,
  body.ui-dash .tabla_gris td,
  body.ui-dash .tabla-resumen td,
  body.ui-dash table[border] td {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* `.col` (sin breakpoint) reparte columnas iguales hasta en 390px y
     parte las etiquetas en varias lineas: se apilan. */
  body.ui-dash .caja-formulario>.col,
  body.ui-dash .caja-formulario>[class^="col-md-"],
  body.ui-dash .caja-formulario>[class*=" col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
/* ---------------------------------------------------------------------
   19. Cartas de compromiso / renovacion de poliza
   (cartacompromiso.php y carta_renovacion_poliza.php)
   La fila de fecha de firma (etiqueta, campo y boton en linea) usa
   `.grupo-campo.row.align-items-center.g-0`; el selector de 4 clases
   solo existe en esas dos vistas.
   --------------------------------------------------------------------- */
body.ui-dash .grupo-campo.row.align-items-center.g-0 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}
body.ui-dash .grupo-campo.row.align-items-center.g-0 > label {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 500;
}
body.ui-dash .grupo-campo.row.align-items-center.g-0 > .form-control {
  flex: 1 1 240px;
  width: auto;
  max-width: 320px;
  padding-left: .85rem;
  padding-right: .85rem;
}
body.ui-dash .grupo-campo.row.align-items-center.g-0 > .btn {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: .6rem 1.5rem;
  margin: 0;
}

/* .btn-font: el boton "Escoja el estilo de la firma" */
body.ui-dash .btn-font {
  border-radius: var(--ui-pill);
  background-color: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  white-space: normal;
  line-height: 1.3;
}
body.ui-dash .btn-font:hover {
  background-color: var(--ui-accent-dark) !important;
  border-color: var(--ui-accent-dark) !important;
}

body.ui-dash #signatureShow,
body.ui-dash #signatureShow2,
body.ui-dash .fecha_firma {
  gap: 8px;
  color: var(--ui-text-2);
}
body.ui-dash #signatureShow .fw-bold,
body.ui-dash #signatureShow2 .fw-bold,
body.ui-dash .fecha_firma .fw-bold {
  font-weight: 600;
  color: var(--ui-muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   21. Backdrops apilados
   paso5.php y paso6.php inyectan Bootstrap 5.3.3 por CDN y se recargan
   por AJAX en cada seleccionar_linea(). Cada copia de Bootstrap mantiene
   su propio registro de instancias, asi que un unico clic crea un
   backdrop por copia; apilados a .5 de opacidad la pantalla se ve negra.
   Esto es una contencion visual: solo se pinta el primero.
   La causa de raiz es la carga duplicada de Bootstrap.
   --------------------------------------------------------------------- */
body.ui-dash .modal-backdrop.show { opacity: .45; }
body.ui-dash .modal-backdrop ~ .modal-backdrop { opacity: 0 !important; }

/* `.text-justify` existia en Bootstrap 4 y se elimino en BS5, asi que los
   parrafos de las cartas heredaban el `text-center` del <form id="form2">
   y el texto legal salia centrado. Se restituye la utilidad. */
body.ui-dash .text-justify {
  text-align: justify;
  text-justify: inter-word;
}
/* las cartas son documentos: se leen alineadas a la izquierda */
body.ui-dash .ui-card-plain { text-align: left; }
body.ui-dash .ui-card-plain p { margin-bottom: 1rem; }

/* ---------------------------------------------------------------------
   22. Pantallas de acceso (app/modules/page/Views/index/)
   index.php, otp.php, recordar.php e indexinactive.php traen un <style>
   embebido con `body{max-height:100vh; overflow:hidden}`. En escritorio
   eso logra el login a pantalla completa sin scroll, pero en un movil
   recorta el contenido y lo deja inalcanzable: medido en 390x667, el
   documento mide 1394px y quedaban 727px cortados, incluido el mensaje
   de error del formulario.
   Estas reglas ganan por especificidad (body.ui-dash = 0,1,1 contra el
   body = 0,0,1 del <style> embebido), asi que no hay que tocar la vista.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px), (max-height: 820px) {
  body.ui-dash {
    max-height: none;
    overflow-y: auto;   /* overflow-x sigue en hidden */
  }
  /* los fondos son absolutos a 100vh/100%: al habilitar el scroll dejarian
     de cubrir. Fijandolos, el contenido se desplaza por encima. */
  body.ui-dash .fondo1,
  body.ui-dash .fondo_negro {
    position: fixed;
  }
  body.ui-dash .login-container {
    height: auto;
    min-height: 100vh;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (max-width: 767.98px) {
  /* el titulo va a 3.5rem (56px) y se comia media pantalla */
  body.ui-dash .login-container .title-container span {
    font-size: 2.1rem;
    margin-left: 0;
  }
  body.ui-dash .login-container .title-container { justify-content: center; }
  /* `left:150px` fijo dejaba el pie fuera de un viewport de 390px */
  body.ui-dash .login-derechos {
    position: static;
    left: auto;
    bottom: auto;
    padding: 18px 16px 24px;
    font-size: 13px;
  }
  body.ui-dash .caja_login { padding: 10px 16px; }
  body.ui-dash .login-container .redes { position: static; margin: 12px 0; display: flex; justify-content: center; }
}

/* Casilleros del codigo OTP (index/otp.php).
   global.css los deja en 2.5em sobre 1.5rem = 60px cada uno; con 6 casillas
   y separacion de 10px hacen falta 410px y en un movil solo hay ~303px:
   la ultima casilla terminaba en x=446 con viewport de 390 y, al estar el
   body con overflow-x:hidden, quedaba invisible e inalcanzable.
   44px ademas cumple el minimo de area tactil, y 17px evita el zoom
   automatico de iOS al enfocar el campo. */
@media (max-width: 575.98px) {
  body.ui-dash .form .input-fields {
    gap: 6px;
    justify-content: center;
  }
  body.ui-dash .form .input-fields input {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------
   23. Avisos de acceso denegado (nohabilitado.php / nopermitido.php)
   El marcado es `<div class="titulo blanco">`: el texto debe ser blanco
   sobre la foto de fondo. La regla de color de `.titulo` de esta hoja
   (0,2,1) le ganaba a `.blanco` (0,1,0) y lo volvia gris oscuro, dejando
   el mensaje casi ilegible. `.blanco` vuelve a mandar.
   (No se usa backdrop-filter a proposito: crea contexto de apilamiento,
   que es justo lo que deja los modales por debajo de su backdrop.)
   --------------------------------------------------------------------- */
body.ui-dash .blanco,
body.ui-dash .titulo.blanco { color: #FFFFFF; }
/* el login define su propio gris para estos enlaces; no se toca */
body.ui-dash .login-container .enlace.blanco { color: #7B7B7B; }

body.ui-dash .caja_blanca {
  background: rgba(17, 24, 39, .66);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ui-r-lg);
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
body.ui-dash .caja_blanca .titulo {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 20px;
}

/* changepassword.php pinta `<div class="titulo_login_azul blanco">Recordar
   contraseña</div>` dentro de `.borde_login`, que hoy tiene fondo blanco:
   texto blanco sobre blanco, invisible. (Viene de antes de esta hoja:
   `.blanco` ya le ganaba a `.titulo_login_azul` por orden en global.css.)
   Los otros tres usos de esta combinacion solo contienen el logo. */
body.ui-dash .borde_login .titulo_login_azul.blanco {
  color: var(--ui-text-2);
  font-size: 20px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   24. Popup de comunicado del login y del OTP (.modal2 / .close2)
   index/index.php y index/otp.php comparten el mismo modal. Dos problemas:
   a) el <style> embebido de la vista mete TODO dentro de
      `@media (min-width: 576px)`, asi que por debajo de 576px la X se
      queda con el estilo por defecto del navegador (caja gris con borde,
      y encima la × en blanco por `.enlace_blanco`: casi invisible);
   b) el dialogo va anclado arriba (`margin: 1.75rem auto`) y la imagen,
      mas alta que la pantalla, se salia por abajo.
   --------------------------------------------------------------------- */

/* centrado vertical: mismo calculo que .modal-dialog-centered de BS5 */
body.ui-dash .modal-dialog.modal2 {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
  max-width: 650px;
  margin: var(--bs-modal-margin) auto;
}
body.ui-dash .modal2 .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.ui-dash .modal2 .modal-header1 { padding: 0; }
body.ui-dash .modal2 .modal-header1 .row { margin: 0; }
body.ui-dash .modal2 .modal-header1 [class*="col-"] { padding: 0; }
body.ui-dash .modal2 .modal-body { padding: 0; }

/* la imagen se ajusta a la pantalla para que el comunicado se vea entero */
body.ui-dash .modal2 .modal-body img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* base del boton de cierre del popup, en todos los anchos */
body.ui-dash .modal2 .close2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
/* sobre el backdrop oscuro: circulo blanco solido */
body.ui-dash .modal2 .close2 {
  margin: 0 0 10px auto;
  background: #FFFFFF;
  color: var(--ui-text-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
body.ui-dash .modal2 .close2:hover {
  background: #F3F4F6;
  transform: scale(1.06);
}
body.ui-dash .modal2 .close2:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   25. Casillas del OTP en escritorio (index/otp.php)
   global.css las deja en `width/height: 2.5em` sobre `font-size: 1.5rem`,
   o sea 60px cada una. Con 6 casillas y 10px de separacion hacen falta
   410px, pero la fila dentro de `.caja_login` (440px menos 30px de padding
   a cada lado) solo ofrece 380: se desbordaban 30px y la ultima quedaba
   pegada al borde de la tarjeta.
   El `.input-field{width:37px}` del <style> de la vista nunca llego a
   aplicar, porque `.form .input-fields input` (0,2,1) le gana a (0,1,0).
   --------------------------------------------------------------------- */
body.ui-dash .form .input-fields {
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}
body.ui-dash .form .input-fields input {
  min-width: 0;          /* deja encoger antes que desbordar */
  background: #FFFFFF;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-sm);
  color: var(--ui-text);
  font-family: inherit;
  font-weight: 600;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* el foco original hacia scale(1.05) + sombra interna: al crecer, la ultima
   casilla se montaba sobre el borde. Se cambia por un anillo. */
body.ui-dash .form .input-fields input:focus {
  border: 1px solid var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .18);
  transform: none;
  outline: none;
}

@media (min-width: 576px) {
  body.ui-dash .form .input-fields { gap: 8px; }
  body.ui-dash .form .input-fields input {
    flex: 0 1 48px;
    width: 48px;
    height: 54px;
    font-size: 20px;
  }
}

/* El boton "Limpiar" del OTP lleva `.red{background:red !important}` en el
   <style> de la vista. La regla que conserva el degradado del login
   (`.login-container .btn-azul`) tiene mas especificidad y lo pintaba
   morado, perdiendo la señal de accion destructiva. Se le devuelve el rojo. */
body.ui-dash .login-container .btn-azul.red,
body.ui-dash .btn-azul.red {
  background: #DC3545 !important;
  border-color: #DC3545 !important;
  color: #FFFFFF !important;
}
body.ui-dash .login-container .btn-azul.red:hover,
body.ui-dash .btn-azul.red:hover {
  background: #BB2D3B !important;
  border-color: #BB2D3B !important;
}

/* ---------------------------------------------------------------------
   26. Pantallas de acceso: tarjeta centrada
   Afecta a index/index.php, index/otp.php, index/recordar.php,
   index/changepassword.php e index/indexinactive.php, que comparten el
   mismo armazon: .fondo1 + .fondo_negro + .login-container > .zindexlogin
   > .row > (.col-md-8 titulo | .col-md-4 tarjeta).

   El marcado no se toca: la fila pasa a columna y las dos columnas se
   limitan por ancho, con lo que el titulo queda arriba y la tarjeta
   centrada debajo. Asi `.col-md-8`/`.col-md-4` siguen en el HTML por si
   algun JS las consulta.
   --------------------------------------------------------------------- */
body.ui-dash .login-container .zindexlogin > .row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.ui-dash .login-container .zindexlogin > .row > .col-md-8,
body.ui-dash .login-container .zindexlogin > .row > .col-md-4 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  /* otp.php trae `.margen-menos-70` (margin-top:-70px), pensado para la
     maqueta de dos columnas; centrado descuadra */
  margin-top: 0;
}
body.ui-dash .login-container .zindexlogin > .row > .col-md-8 {
  max-width: 560px;
  margin-bottom: 30px;
}

/* --- 26.1 Titulo de marca sobre la tarjeta --- */
/* .title-container es un .row de Bootstrap 5, y BS5 le da `width:100%` y
   `flex-shrink:0` a TODO hijo directo de .row. Por eso el <span> del
   titulo se estiraba al ancho de la columna y el grupo icono+texto se
   salia por la izquierda en vez de quedar centrado. Se le devuelve el
   tamano de su contenido y se anulan los margenes negativos del row. */
body.ui-dash .login-container .title-container {
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin-left: 0;
  margin-right: 0;
}
body.ui-dash .login-container .title-container > img,
body.ui-dash .login-container .title-container > span {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}
body.ui-dash .login-container .title-container > img {
  flex: 0 0 auto;
  width: 62px;
}
body.ui-dash .login-container .title-container > span {
  font-size: 2.15rem;
  margin-left: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

/* --- 26.2 La tarjeta --- */
body.ui-dash .login-container .borde_login {
  margin-top: 0;
  background: var(--ui-card);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--ui-r-lg);
  /* la sombra del sistema (0 2px 8px) se pierde sobre una foto: se le
     suma una segunda capa para que la tarjeta despegue del fondo */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 20px 50px rgba(0, 0, 0, .30);
}
body.ui-dash .login-container .caja_login {
  padding: 6px 30px 24px;
}
body.ui-dash .login-container .titulo_login_azul .logo {
  width: 168px;
  max-width: 100%;
}
/* el "Ingresa a tu cuenta" de index.php va en un <div align="center"> */
body.ui-dash .login-container .caja_login > div[align="center"] > span {
  display: block;
  margin-top: -6px;
  color: var(--ui-muted);
  font-size: 14px;
}

/* --- 26.3 Campo de usuario --- */
body.ui-dash .login-container .input-container {
  background: #FFFFFF;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.ui-dash .login-container .input-container:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(136, 162, 49, .18);
}
/* El borde va en el contenedor, no en el campo. global.css ya lo quita
   con `.login-container .input-container input{border:none}`, pero esa
   regla tiene la misma especificidad (0,2,1) que `body.ui-dash
   .form-control` de esta hoja, que carga despues y se lo devolvia: se
   veia un doble borde, el del contenedor y el del input. */
body.ui-dash .login-container .input-container input {
  padding: .62rem .9rem .62rem .1rem;
  height: auto;
  border: none;
  border-radius: 0;
  color: var(--ui-text);
  font-size: 15px;
  box-shadow: none;
}
body.ui-dash .login-container .input-container input:focus {
  border: none;
  box-shadow: none;
}
body.ui-dash .login-container .input-container input::placeholder {
  color: #9CA3AF;
}
/* user.png / password.png son glifos BLANCOS: se disenaron para el campo
   gris (#F6F6F4) de antes y sobre el campo blanco quedaban invisibles.
   invert(1) los vuelve negros conservando el alfa, y la opacidad los deja
   en el gris de los iconos del sistema. Asi no hay que cambiar el asset. */
body.ui-dash .login-container .input-container img {
  width: 20px;
  margin: 0 6px 0 13px;
  filter: invert(1);
  opacity: .42;
}

/* --- 26.4 Boton principal: pildora solida en el verde de marca --- */
body.ui-dash .login-container .btn-azul {
  background: var(--ui-accent) !important;
  border: none !important;
  border-radius: var(--ui-pill);
  padding: .62rem 2.4rem;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(136, 162, 49, .30);
}
body.ui-dash .login-container .btn-azul:hover,
body.ui-dash .login-container .btn-azul:focus {
  background: var(--ui-accent-dark) !important;
  box-shadow: 0 8px 20px rgba(136, 162, 49, .38);
}

/* --- 26.5 Encuadre de la foto de fondo ---
   El senor apunta hacia la derecha; con la tarjeta centrada su brazo
   queda detras de ella. No hay forma de evitarlo con esta foto: su
   figura ocupa el 51% del ancho de la imagen, asi que con object-fit:
   cover siempre cubre el centro del viewport (se probo ensanchar y
   correr la imagen, pero eso obliga a ampliarla ~1.26x y en una
   ventana ancha y baja -1920x900- la mano se sale de cuadro).
   Se resuelve espejando la foto: su cara pasa al tercio derecho, libre
   de la tarjeta, y el gesto apunta hacia ella en vez de hacia afuera.
   La imagen no tiene texto ni logos, asi que el espejo no rompe nada, y
   al ser una transformacion no depende de la proporcion del viewport:
   se comporta igual en 1440x900 que en 1920x900 o en movil.
   Solo aplica a esa foto: nopermitido/nohabilitado usan otra
   (/corte/fondo.jpg). */
body.ui-dash img.fondo1[src*="imagen-fondo"] {
  transform: scaleX(-1);
  object-position: left top;
}

/* Velo de contraste. Va en un ::before de .login-container, que al ser
   position:relative sin z-index se pinta por encima de .fondo1
   (z-index 0) y por debajo de .fondo_negro (z-index 1) y de
   .zindexlogin (z-index 999). */
body.ui-dash .login-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(80deg,
    rgba(17, 24, 39, .30) 0%,
    rgba(17, 24, 39, .42) 30%,
    rgba(17, 24, 39, .34) 55%,
    rgba(17, 24, 39, .12) 80%,
    rgba(17, 24, 39, .04) 100%);
}

/* --- 26.6 Remates del pie y de los botones en fila --- */
/* el credito iba anclado a `left:150px`; con la tarjeta centrada se
   centra tambien */
body.ui-dash .login-derechos {
  left: 0;
  right: 0;
  text-align: center;
}
/* "Verificar" y "Limpiar" del OTP salian pegados */
body.ui-dash .form .action-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* --- 26.7 Avisos de acceso (index/nopermitido.php, index/nohabilitado.php)
   Usan el mismo armazon pero con otra foto (/corte/fondo.jpg) y con el
   header a la vista. Se les agrego la clase aditiva `ui-aviso` en el
   contenedor para poder centrar el bloque sin tocar ninguna clase
   existente. --- */

/* `.fondo1` y `.fondo_negro` son absolutos SIN `top`, asi que su posicion
   estatica queda debajo del header: en estas dos vistas el fondo
   arrancaba en y=127 y se estiraba hasta 1027, dejando 127px de scroll
   sobrante (medido en 1440x900). Pasarlos a `fixed` los saca del calculo
   de altura del documento y elimina el sobrante.
   Se dejan SIN `top`/`left` a proposito: asi conservan su posicion
   estatica y siguen arrancando debajo del header. Anclarlos arriba los
   pondria encima de el, porque el header es estatico y los elementos
   posicionados se pintan despues; y darle al header contexto propio no
   es opcion: arrastraria su `::before` -una banda blanca de 236px con
   z-index:-1- por encima del contenido de las pantallas del dashboard.
   En index/otp/recordar/indexinactive el header va oculto, asi que su
   posicion estatica ya era y=0 y esto no les cambia el encuadre. */
body.ui-dash .fondo1,
body.ui-dash .fondo_negro {
  position: fixed;
}

body.ui-dash .ui-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  /* el header mide ~127px; se descuenta con algo de holgura para
     centrar el aviso sin provocar scroll */
  min-height: calc(100vh - 170px);
  padding: 32px 0 44px;
}
body.ui-dash .ui-aviso .zindexlogin {
  width: 100%;
}

/* /corte/fondo.jpg es un cielo muy claro y la tarjeta blanca se le
   confundia. Se oscurece la foto misma en vez de superponer un velo en
   el bloque: asi cubre tambien la franja del header y no deja costuras.
   Solo esa foto; imagen-fondo.png no se toca. */
body.ui-dash img.fondo1[src*="corte/fondo"] {
  filter: brightness(.68) saturate(.92);
}

body.ui-dash .ui-aviso .caja_blanca {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 20px 50px rgba(0, 0, 0, .22);
  text-align: center;
}
body.ui-dash .ui-aviso .caja_blanca::before {
  content: "\f071";                      /* exclamation-triangle */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--ui-warn-bg);
  border: 1px solid var(--ui-warn-line);
  color: var(--ui-warn);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 22px;
}
/* el texto es `.titulo.blanco`: blanco sobre la tarjeta clara seria
   invisible, y en mayusculas cuesta leer tres renglones */
body.ui-dash .ui-aviso .caja_blanca .titulo,
body.ui-dash .ui-aviso .caja_blanca .titulo.blanco {
  margin: 0 0 24px;
  color: var(--ui-text-2);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
body.ui-dash .ui-aviso .caja_blanca .btn {
  border-radius: var(--ui-pill);
  padding: .6rem 2.1rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   27. Simulador de credito (sistema/index.php)

   El marcado es una pareja por fila: etiqueta en `col-4` (o
   `col-6.text-end`) y campo en `col-8` (o `col-6.text-start`), y las
   etiquetas son <div align="right">, no <label>. Verificado en las 19
   parejas del bloque. `#convenios` es la unica celda `col-12`, con su
   propio `.row` anidado de etiqueta + campo.

   Se maqueta con CSS Grid de dos columnas: etiqueta a la izquierda, campo
   a la derecha, cada pareja en su fila y todas con el mismo ancho de
   etiqueta, asi que los campos comparten borde izquierdo y derecho.
   Con `grid-column` explicito (1 para etiquetas, 2 para campos) la
   colocacion automatica abre fila nueva en cada etiqueta, y las celdas
   ocultas salen del flujo sin dejar hueco.

   REGLA DE ESTA SECCION: no se asigna `display` a ninguna celda. La vista
   y el JS las muestran/ocultan: `.div_recoge` va oculta por el <style> de
   la propia vista, y .show()/.hide() escriben display en linea sobre
   .tope_max, .val-sol, .div_recoge, .div_novacion, .opcion-cuotasext,
   .cuotasext, #div_destino1/2 y #convenios. Un `display` aqui le ganaria
   al `.div_recoge{display:none}` de la vista y dejaria la fila visible
   en todas las lineas.
   --------------------------------------------------------------------- */
body.ui-dash .formulario2 {
  padding: 24px;
}
body.ui-dash .formulario2 .grupo-campo,
body.ui-dash .formulario2 .grupo-campo #convenios > .row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 18px;
  /* 16px: el mismo espacio entre campos que en las cajas de #form2 (32.9) */
  row-gap: 16px;
  align-items: center;
  margin: 0;
}

/* Bootstrap le da a los hijos de .row width:100%, padding de gutter y
   margin-top; global.css suma `.formulario2 div{margin-top:5px}` y
   `.margin10{margin-top:10px !important}`. Todo eso descuadraba filas. */
body.ui-dash .formulario2 .grupo-campo [class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.ui-dash .formulario2 .grupo-campo [class*="col-"] > div {
  margin-top: 0;
}
body.ui-dash .formulario2 .grupo-campo .margin10 {
  margin-top: 0 !important;
}

/* --- 27.1 Etiquetas (columna 1) --- */
body.ui-dash .formulario2 .grupo-campo > .col-4,
body.ui-dash .formulario2 .grupo-campo > .col-6.text-end,
body.ui-dash .formulario2 .grupo-campo #convenios .col-4 {
  grid-column: 1;
  /* `.text-end` de BS5 es !important y `align="right"` viene del marcado */
  text-align: left !important;
}
body.ui-dash .formulario2 .grupo-campo > .col-4 > div,
body.ui-dash .formulario2 .grupo-campo > .col-6.text-end > div,
body.ui-dash .formulario2 .grupo-campo #convenios .col-4 > div {
  margin: 0;
  color: var(--ui-text-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left !important;
}

/* --- 27.2 Campos (columna 2) --- */
body.ui-dash .formulario2 .grupo-campo > .col-8,
body.ui-dash .formulario2 .grupo-campo > .col-6.text-start,
body.ui-dash .formulario2 .grupo-campo #convenios .col-8 {
  grid-column: 2;
}
body.ui-dash .formulario2 .grupo-campo > .col-12 {
  grid-column: 1 / -1;
}

/* Las casillas: la fila debe medir lo mismo que una de campo (42px). Se
   consigue con margen en el propio <input>, no con display en la celda. */
body.ui-dash .formulario2 .grupo-campo .form-check {
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.ui-dash .formulario2 .grupo-campo input[type="checkbox"] {
  float: none;
  width: 18px;
  height: 18px;
  margin: 12px 0;
  vertical-align: middle;
}

/* Signo $ de .campo / .campo_gris: es un background-image anclado arriba a
   la izquierda y quedaba mas alto que la cifra. Se centra en vertical. */
body.ui-dash .formulario2 .grupo-campo .campo,
body.ui-dash .formulario2 .grupo-campo .campo_gris {
  background-position: 10px 50%;
  padding-left: 34px;
}

/* --- 27.3 Resultados calculados ---
   `#cupo_actual`, `#tasa_mes`, `#saldo_actual1`, `#valor_disponible` y
   `#monto_solicitado1` son <div class="form-control">: no se editan, los
   calcula el servidor. Conservan la geometria del campo (misma altura,
   radio y sangrado, para que la rejilla cuadre) y se distinguen por el
   relleno gris sin borde. */
body.ui-dash .formulario2 .grupo-campo div.form-control {
  margin-top: 0;
  background-color: #F3F4F6;
  border-color: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font-weight: 600;
  cursor: default;
}
body.ui-dash .formulario2 .grupo-campo #div_credifacil {
  margin-top: 6px;
  font-size: 12.5px;
}

/* --- 27.4 Pie de la tarjeta ---
   el boton Simular solo existe si la linea llega por GET; el contenedor
   queda aunque este vacio, y los <br><br> sumaban aire muerto abajo */
body.ui-dash .formulario2 > div[align="center"].col-12 {
  margin-top: 0;
}
body.ui-dash .formulario2 > div[align="center"].col-12 > br {
  display: none;
}
body.ui-dash .formulario2 > div[align="center"].col-12 > .btn {
  margin-top: 22px;
}

/* --- 27.5 Boton en proceso ---
   el AJAX de seleccionar_linea() deshabilita #simular2 mientras calcula */
body.ui-dash .btn:disabled,
body.ui-dash .btn[disabled] {
  opacity: .5;
  box-shadow: none;
  cursor: not-allowed;
}

/* --- 27.6 Avisos de minimo/maximo como callout pastel --- */
body.ui-dash .formulario2 #e_minimo,
body.ui-dash .formulario2 #e_max {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--ui-r-md);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

/* --- 27.7 Panel de requisitos --- */
/* alineado con el borde superior de la tarjeta del simulador */
body.ui-dash #titulo_requisitos {
  margin-top: 2px;
}
/* separacion del icono con margen, no con `gap`: si jQuery le escribe
   display:block en linea al titulo, el gap del flex desaparece */
body.ui-dash #titulo_requisitos::before {
  margin-right: 9px;
}
/* La lista llega por AJAX desde la base de datos con estilos en linea
   propios (un item venia con otra fuente y otro tamano). Se normaliza. */
body.ui-dash #requisitos * {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.55 !important;
  color: inherit !important;
}
body.ui-dash #requisitos ul,
body.ui-dash #requisitos ol {
  margin: 0;
  padding-left: 18px;
}
body.ui-dash #requisitos li + li {
  margin-top: 4px;
}
body.ui-dash #requisitos p {
  margin: 0 0 4px;
}
/* sin contenido, sin tarjeta. En la caja se puede usar display porque el
   JS siempre la muestra DESPUES de llenarla. Al titulo NO: el JS lo
   muestra con .show(), y si en ese momento el CSS lo tuviera en
   display:none, jQuery le escribiria display:block en linea para siempre.
   Se colapsa sin tocar display. */
body.ui-dash #requisitos:empty {
  display: none !important;
}
body.ui-dash #titulo_requisitos:has(+ #requisitos:empty) {
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

/* --- 27.8 "Objetivo del credito" en su propia tarjeta --- */
/* #resultado es un col-12 fuera de .row (sin padding) y su .row interno
   tiene los margenes negativos del gutter: pintar la tarjeta sobre la
   propia columna la hacia sobresalir 12px por lado del borde del
   contenido. Se la mete dentro del gutter.
   La tarjeta va sin padding: el <b> hace de encabezado (igual que los
   .titulo-seccion fundidos con su caja, seccion 32) y el textarea de
   cuerpo. */
body.ui-dash #resultado .col-lg-12.rosado {
  width: calc(100% - var(--bs-gutter-x));
  margin-left: calc(var(--bs-gutter-x) * .5);
  margin-right: calc(var(--bs-gutter-x) * .5);
  margin-top: 0;
  /* los titulos de #form2 van sin margen superior (32.9): este es todo el
     espacio hasta la primera caja de paso1 */
  margin-bottom: 28px;
  padding: 0;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
}
body.ui-dash #resultado .col-lg-12.rosado > br {
  display: none;
}
body.ui-dash #resultado .col-lg-12.rosado > b {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 24px 16px;
  box-shadow: inset 0 -1px 0 var(--ui-border-soft);
  color: var(--ui-text) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
/* mismo cuadro verde con icono que .titulo-seccion::before (bullseye) */
body.ui-dash #resultado .col-lg-12.rosado > b::before {
  content: "\f140";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  color: var(--ui-accent);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
body.ui-dash #resultado #observaciones1 {
  display: block;
  width: calc(100% - 48px);
  margin: 16px 24px 24px;
  min-height: 108px;
  resize: vertical;
}
/* Espacio sobrante alrededor de la tarjeta (medido: 64px arriba y 69px
   abajo contra los 28px del resto). Arriba lo ponia el
   <div class="col-12"><br></div> previo a #resultado (el panel del
   simulador ya deja 28px); abajo, el <br> de la columna de tramite, cuyo
   contenido esta todo en d-none, y el <br><br> final de #resultado.
   Solo se ocultan los <br>; ningun contenedor cambia su display. */
body.ui-dash .col-12:has(+ #solicitar + #resultado) > br,
body.ui-dash #resultado > .row > .col-lg-6.d-none1 > br,
body.ui-dash #resultado > br {
  display: none;
}
/* los 8px de "respiro general" (seccion 13) sumaban sobre los 28px del
   panel del simulador */
body.ui-dash #resultado {
  margin-top: 0;
}

/* --- 27.9 Movil: una columna, etiqueta encima del campo --- */
@media (max-width: 575.98px) {
  body.ui-dash .formulario2 .grupo-campo,
  body.ui-dash .formulario2 .grupo-campo #convenios > .row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  body.ui-dash .formulario2 .grupo-campo [class*="col-"] {
    grid-column: 1 / -1;
  }
  body.ui-dash .formulario2 .grupo-campo > .col-4,
  body.ui-dash .formulario2 .grupo-campo > .col-6.text-end,
  body.ui-dash .formulario2 .grupo-campo #convenios .col-4 {
    margin-bottom: 6px;
  }
  body.ui-dash .formulario2 .grupo-campo > .col-8,
  body.ui-dash .formulario2 .grupo-campo > .col-6.text-start,
  body.ui-dash .formulario2 .grupo-campo #convenios .col-8 {
    margin-bottom: 16px;
  }
  body.ui-dash .formulario2 .grupo-campo input[type="checkbox"] {
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   28. Cabecera del sistema (partials/botonera.php)
   Logo + Inicio / Solicitudes / Salir. El nav iba centrado en un
   `col-sm-9` (`justify-content-center`), anclado abajo (`align-items-end
   pb-2`) y al 75% del ancho (`w-75`), asi que las pildoras flotaban en
   medio de la barra sin alinearse ni con el logo ni con el borde derecho
   del contenido. El logo media 322px (global.css) con `mt-3`.
   Esas utilidades de Bootstrap 5 son !important; por eso aqui tambien.
   --------------------------------------------------------------------- */

/* La franja blanca era un ::before absoluto de 236px con margin-top:-100px,
   calculado para una barra de 120px de alto. Se sustituye por un fondo
   real en .header-content, que comparten botonera.php y header.php, y la
   barra pasa a medir lo que su contenido. */
body.ui-dash .header-menu::before {
  display: none;
}
body.ui-dash header .header-content {
  height: auto;
  margin-bottom: 6px;
  padding: 12px 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* el <br> que sigue a la barra en botonera.php */
body.ui-dash header .header-content + br {
  display: none;
}
body.ui-dash header .header-content > .container > .row {
  align-items: center;
}
body.ui-dash header .header-content .logo2 {
  display: block;
  width: 148px;
  max-width: 100%;
  margin-top: 0 !important;
}
body.ui-dash header .header-content .col-sm-9 {
  align-items: center !important;
  justify-content: flex-end !important;
  padding-bottom: 0 !important;
}
body.ui-dash header .header-content nav.w-75 {
  width: auto !important;
}
body.ui-dash header .header-content nav ul {
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}
body.ui-dash header .header-content nav ul li a {
  min-width: 0;
  padding: 8px 18px;
  box-shadow: none;
}
body.ui-dash header .header-content nav ul li a span {
  font-size: 14px;
}
/* "Salir" no es navegacion: se separa y queda como accion secundaria */
body.ui-dash header .header-content nav ul li:last-child {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--ui-border);
}
body.ui-dash header .header-content nav ul li:last-child a {
  background: transparent;
  border-color: transparent;
}
body.ui-dash header .header-content nav ul li:last-child a span {
  color: var(--ui-muted);
}
body.ui-dash header .header-content nav ul li:last-child a:hover {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-line);
  box-shadow: none;
}
body.ui-dash header .header-content nav ul li:last-child a:hover span {
  color: var(--ui-danger);
}

/* partials/header.php (login, firma de pagare y vista de administrador)
   usa ahora esta misma barra, con el nombre del sistema centrado.
   Dentro del flujo quedaba centrado solo en el hueco que dejan el logo
   (col-3) y las pildoras, es decir a la derecha del centro real de la
   barra; se centra sobre el .container para que no dependa del ancho de
   esas dos columnas. El titulo no es interactivo, asi que se deja pasar
   el click a los enlaces que pudiera solapar. */
body.ui-dash header .header-content > .container {
  position: relative;
}
body.ui-dash header .header-content .ui-header-titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 44%;
  pointer-events: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-text-2);
  letter-spacing: .01em;
  line-height: 1.25;
}

@media (max-width: 767.98px) {
  /* en movil la barra la pinta header.header-menu (seccion 17) */
  body.ui-dash header .header-content {
    margin-bottom: 0;
    padding: 10px 0 4px;
    border-bottom: none;
    box-shadow: none;
  }
  body.ui-dash header .header-content .ui-header-titulo {
    font-size: 13px;
  }
}
@media (max-width: 575.98px) {
  /* logo y nav comparten fila (col-4/col-8): el nav se compacta y se
     alinea a la derecha en lugar de bajar debajo del logo */
  body.ui-dash header .header-content .col-sm-9 {
    justify-content: flex-end !important;
    margin-top: 0;
  }
  body.ui-dash header .header-content nav ul {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
  }
  body.ui-dash header .header-content nav ul li a {
    padding: 7px 10px;
  }
  body.ui-dash header .header-content nav ul li a span {
    font-size: 12px;
    white-space: nowrap;
  }
  body.ui-dash header .header-content nav ul li:last-child {
    margin-left: 2px;
    padding-left: 6px;
  }
  body.ui-dash header .header-content .logo2 {
    width: 100%;
    max-width: 120px;
  }
  /* con logo + Volver + Salir en una sola fila no queda sitio para el
     nombre del sistema; en el movil ya lo dice el titulo de la pagina */
  body.ui-dash header .header-content .ui-header-titulo {
    display: none;
  }
}
@media (max-width: 399.98px) {
  /* pantallas muy angostas: con tres botones en la misma fila que el logo
     no cabe el padding normal */
  body.ui-dash header .header-content nav ul li a {
    padding: 6px 7px;
  }
  body.ui-dash header .header-content nav ul li a span {
    font-size: 11px;
  }
  body.ui-dash header .header-content .logo2 {
    max-width: 96px;
  }
}

/* ---------------------------------------------------------------------
   29. Vistas de detalle embebidas en el admin (paso5 / paso6 con
       mod=detalle_solicitud)
   administracion/solicitudes/detalle.php las muestra en pestañas con
   <embed>. Ahi la vista es la pagina entera (layout `blanco`) y ella misma
   pone <body class="ui-dash ui-pagina-entera ui-detalle">, asi que todo lo
   de esta seccion SOLO aplica en ese caso: nunca cuando paso5/paso6 van
   incluidas dentro de la solicitud del asociado.
   --------------------------------------------------------------------- */
body.ui-detalle {
  padding: 20px 0 32px;
  background: var(--ui-bg);
}
body.ui-detalle > .container,
body.ui-detalle > .container.fuente1 {
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- 29.1 paso5: tipo de garantia ---
   es un dato de consulta. La vista intenta deshabilitar el select con
   `$("select").prop("disabled")`, pero el layout blanco no carga jQuery y
   esa funcion falla; el select queda con aspecto (y cursor) de editable.
   Cambiarlo tampoco hace nada: `seleccion_tipo_garantia()` no existe en
   esta pagina. Se presenta como valor de solo lectura. */
body.ui-detalle > .container.mt-4 {
  margin-top: 0 !important;
}
body.ui-detalle > .container > .row > .col-lg-8 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
body.ui-detalle .card-body.text-center {
  text-align: left !important;
}
body.ui-detalle .card-body > .row.justify-content-center {
  justify-content: flex-start !important;
}
body.ui-detalle .card-body .titulo-seccion {
  margin-bottom: 16px !important;
}
/* contenedores que en el formulario llena seleccion_tipo_garantia(); aqui
   van vacios y solo dejaban aire bajo el dato */
body.ui-detalle #div_paso4:empty,
body.ui-detalle #div_paso4B:empty {
  display: none;
}
body.ui-detalle select#tipo_garantia {
  max-width: 420px;
  background-color: #F3F4F6;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font-weight: 600;
  pointer-events: none;
}

/* --- 29.2 paso6: anexos documentales como lista ---
   Cada documento es `.fondo-gris3 > .row > etiqueta + accion`, pero la
   accion llega en cinco variantes segun el documento: boton de icono en
   columnas anidadas, enlace con el nombre de archivo suelto dentro del
   .row (por eso caia a la linea siguiente, centrado), enlace vacio, nada,
   o varias columnas con `offset-lg-6`. Aqui todas se leen igual: etiqueta a
   la izquierda y archivos a la derecha, en la misma fila. */
body.ui-detalle .fuente1 .row.text-center {
  text-align: left;
}
/* entre .row anidados y columnas con gutter, la cabecera, los botones de
   editar y la lista quedaban cada uno con un borde distinto. Todo al mismo. */
body.ui-detalle .fuente1 .row.text-center > *:not(.fondo-gris3) {
  padding-left: 0;
  padding-right: 0;
}
body.ui-detalle .fuente1 .row.text-center > .row {
  margin-left: 0;
  margin-right: 0;
}
body.ui-detalle .fuente1 .row.text-center > .row.mb-3 > .col-12 {
  padding-left: 0;
  padding-right: 0;
  gap: 12px;
}
body.ui-detalle .fuente1 br {
  display: none;
}
/* separadores vacios (`<div class="col-12"><br><br></div>`) */
body.ui-detalle .fuente1 .col-12:empty,
body.ui-detalle .fuente1 .col-12:not(:has(> :not(br))) {
  display: none;
}

/* titulos de grupo: Asociado / Codeudor */
body.ui-detalle .fuente1 div.fondo-gris2 {
  margin: 22px 0 10px;
}
/* "Editar documentos codeudor" */
body.ui-detalle .fuente1 .text-end.col-12 {
  margin-top: 26px;
}

/* las filas forman una sola tarjeta por grupo */
body.ui-detalle .fuente1 .fondo-gris3 {
  margin: 0;
  padding: 12px 18px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-top-width: 0;
  border-radius: 0;
  box-shadow: none;
}
body.ui-detalle .fuente1 :not(.fondo-gris3) + .fondo-gris3 {
  border-top-width: 1px;
  border-top-left-radius: var(--ui-r-md);
  border-top-right-radius: var(--ui-r-md);
}
body.ui-detalle .fuente1 .fondo-gris3:not(:has(+ .fondo-gris3)) {
  border-bottom-left-radius: var(--ui-r-md);
  border-bottom-right-radius: var(--ui-r-md);
  box-shadow: var(--ui-shadow);
}
body.ui-detalle .fuente1 .fondo-gris3:hover {
  background: #FCFCFD;
}

/* fila: etiqueta | archivos */
body.ui-detalle .fuente1 .fondo-gris3 > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  margin: 0;
  min-height: 34px;
}
body.ui-detalle .fuente1 .fondo-gris3 .row > *:not(.enlace1) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
/* los enlaces sueltos dentro del .row tambien son items del flex: sin el
   width:100% de Bootstrap, pero conservando su padding de chip */
body.ui-detalle .fuente1 .fondo-gris3 .row > .enlace1 {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
}
body.ui-detalle .fuente1 .fondo-gris3 > .row > div[align="left"] {
  flex: 1 1 240px;
  min-width: 0;
  margin-right: auto !important;
  color: var(--ui-text-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
/* columnas anidadas y huecos de relleno del marcado */
body.ui-detalle .fuente1 .fondo-gris3 > .row > div[align="left"]:empty {
  display: none;
}
body.ui-detalle .fuente1 .fondo-gris3 .row .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
}
body.ui-detalle .fuente1 .fondo-gris3 .d-flex {
  margin: 0 !important;
}
/* Columnas contenedoras sin ningun archivo (p.ej. el segundo desprendible
   vacio): seguian ocupando un hueco del `gap` y corrian los chips hacia la
   izquierda. En esta pagina no corre jQuery, asi que ocultarlas aqui no
   interfiere con los .show()/.hide() que usa la vista en otros modos. */
body.ui-detalle .fuente1 .fondo-gris3 .row > div:not([align="left"]):not(:has(.enlace1:not(:empty))) {
  display: none;
}
/* "Otros documentos" repite cuatro `.mt-3` para los documentos 2 a 5 */
body.ui-detalle .fuente1 .fondo-gris3 .mt-3:not(:has(.enlace1:not(:empty))) {
  display: none;
}

/* --- 29.3 Archivos como chips --- */
body.ui-detalle .fuente1 .fondo-gris3 .enlace1 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 320px;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-pill);
  color: var(--ui-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.ui-detalle .fuente1 .fondo-gris3 .enlace1::before {
  content: "\f1c1";                    /* file-pdf */
  flex: 0 0 auto;
  color: #D92D20;
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 13px;
}
body.ui-detalle .fuente1 .fondo-gris3 .enlace1:hover {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  color: var(--ui-accent-dark);
}
/* la variante de boton traia solo un icono de nube, sin texto */
body.ui-detalle .fuente1 .enlace1 > .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
body.ui-detalle .fuente1 .enlace1 > .btn > .fa {
  display: none;
}
body.ui-detalle .fuente1 .enlace1 > .btn::after {
  content: "Ver archivo";
}

/* enlaces sin archivo (href="/images/" y sin texto): no se muestran.
   Si la fila no tiene NINGUN archivo, se indica una sola vez. */
body.ui-detalle .fuente1 .enlace1:empty {
  display: none;
}
body.ui-detalle .fuente1 .fondo-gris3 > .row:not(:has(.enlace1:not(:empty)))::after {
  content: "Sin archivo";
  flex: 0 0 auto;
  padding: 5px 11px;
  background: #F3F4F6;
  border-radius: var(--ui-pill);
  color: var(--ui-muted);
  font-size: 12.5px;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  body.ui-detalle > .container,
  body.ui-detalle > .container.fuente1 {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.ui-detalle .fuente1 .fondo-gris3 > .row {
    justify-content: flex-start;
  }
  body.ui-detalle .fuente1 .fondo-gris3 > .row > div[align="left"] {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------
   30. Vistas del asociado que no se habian revisado
   (sistema/solicitudes, sistema/resumen, sistema/perfil y los fragmentos
   de garantia que botonera.php carga por AJAX dentro de paso5)
   --------------------------------------------------------------------- */

/* --- 30.1 Mis solicitudes --- */
/* El boton "eliminar" es `btn btn-sm btn-danger text-white`. En este sistema
   .btn-danger es de contorno (fondo blanco, texto rojo) y `.text-white` de
   Bootstrap fuerza color:#fff !important: quedaba una pildora blanca vacia.
   Cuando el marcado pide texto blanco, el boton va relleno, que es como se
   veia con Bootstrap puro. */
body.ui-dash .btn-danger.text-white {
  background-color: var(--ui-danger);
  border-color: var(--ui-danger);
}
body.ui-dash .btn-danger.text-white:hover,
body.ui-dash .btn-danger.text-white:focus {
  background-color: #912018;
  border-color: #912018;
}
/* "Terminar solicitud" se partia en dos lineas dentro de la celda */
body.ui-dash .tablaGris2 td .btn {
  white-space: nowrap;
}

/* La tabla tiene 10 columnas. A partir de 1200px el .container mide 1140px o
   mas y caben todas: la tabla ocupa el ancho disponible y NO se desplaza; el
   poco ancho que falta lo ceden las dos columnas de linea (de credito y de
   desembolso), que son las unicas que ajustan a dos lineas. Por debajo de
   1200px no cabe, y el envoltorio .ui-table-scroll la desplaza en horizontal
   sin romper el ancho del .col-12 (en <576px la seccion 17 ya lo hace). */
body.ui-dash .tabla-solicitudes td,
body.ui-dash .tabla-solicitudes th {
  padding: 12px 10px;
}

/* Fechas y cifras no se parten nunca (la pildora de estado y los botones ya
   traen nowrap de .ui-estado y de la regla de .tablaGris2 td .btn) */
body.ui-dash .tabla-solicitudes td:first-child div,
body.ui-dash .tabla-solicitudes .ui-radicado,
body.ui-dash .tabla-solicitudes .ui-valor {
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  body.ui-dash .tabla-solicitudes {
    min-width: 1020px;
  }
  body.ui-dash .tabla-solicitudes td,
  body.ui-dash .tabla-solicitudes thead th {
    white-space: nowrap;
  }
}

/* N. de radicacion: es el dato con el que el asociado identifica la fila */
body.ui-dash .ui-radicado {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ui-text);
  letter-spacing: .02em;
}

/* Importes: alineados a la derecha y con cifras de ancho fijo, para que las
   unidades de mil queden una debajo de otra entre filas */
body.ui-dash .tabla-solicitudes .ui-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ui-text);
}

/* Estado -> pildora de color. Son 13 estados posibles agrupados en cuatro
   familias (ok / info / warn / bad) en la vista. */
body.ui-dash .ui-estado {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
body.ui-dash .ui-estado-ok {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-line);
  color: var(--ui-accent-dark);
}
body.ui-dash .ui-estado-info {
  background: var(--ui-info-bg);
  border-color: var(--ui-info-line);
  color: var(--ui-info);
}
body.ui-dash .ui-estado-warn {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-line);
  color: var(--ui-warn);
}
body.ui-dash .ui-estado-bad {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-line);
  color: var(--ui-danger);
}

/* Las dos acciones de la fila: una debajo de la otra y del mismo ancho, que
   es como se veian con el .height-10 de por medio, pero sin el div separador */
body.ui-dash .ui-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
body.ui-dash .ui-acciones .btn i {
  margin-right: 5px;
  font-size: .9em;
}

/* Sin solicitudes: el "No existen solicitudes" era una linea de texto suelta */
body.ui-dash .ui-sin-solicitudes {
  padding: 48px 24px;
  background: var(--ui-card);
  border: 1px dashed var(--ui-border);
  border-radius: var(--ui-r-lg);
  text-align: center;
  color: var(--ui-muted);
}
body.ui-dash .ui-sin-solicitudes i {
  font-size: 30px;
  color: #C7CDD6;
}
body.ui-dash .ui-sin-solicitudes p {
  margin: 14px 0 0;
  font-size: 15px;
}

/* --- 30.2 Resumen de la solicitud (tabla que arma generartabla2) --- */
/* global.css pone `.tabla-resumen td { font-size: 20px }`; el tamaño del
   sistema estaba en la tabla y no llegaba a las celdas */
body.ui-dash .tabla-resumen td {
  font-size: 14px;
  line-height: 1.45;
}
body.ui-dash .tabla-resumen td strong {
  color: var(--ui-muted);
  font-weight: 500;
}
body.ui-dash .tabla-resumen td[align="right"] {
  color: var(--ui-text);
  font-weight: 600;
}
/* la celda de linea trae `<p><small>convenios</small></p>`, casi siempre
   vacio: el margen del parrafo subia el valor respecto de su etiqueta */
body.ui-dash .tabla-resumen td p {
  margin: 0;
}
body.ui-dash .tabla-resumen td small {
  color: var(--ui-muted);
  font-weight: 500;
}
/* encabezados de seccion ("Datos personales", ...): en gris de 12px casi
   no agrupaban. El estilo en linea (#CCC / #FFF) lo pisa la seccion 7. */
body.ui-dash .tabla-resumen tr.fondo-gris {
  background: var(--ui-accent-soft) !important;
}
body.ui-dash .tabla-resumen tr.fondo-gris td,
body.ui-dash .tabla-resumen tr.fondo-gris b {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--ui-accent-dark) !important;
  font-size: 12.5px;
  letter-spacing: .05em;
}

/* En movil la seccion 17 vuelve desplazables en horizontal y sin saltos de
   linea todas las tablas anchas, y esta cae ahi por `.tabla-resumen` y por
   `table[border]`. Pero es de dos columnas etiqueta/valor: con nowrap los
   valores quedaban cortados a la derecha. Aqui el texto debe ajustarse. */
@media (max-width: 767.98px) {
  body.ui-dash table.tabla-resumen {
    display: table;
    overflow: visible;
    white-space: normal;
  }
  body.ui-dash table.tabla-resumen td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.ui-dash table.tabla-resumen td:first-child {
    width: 42%;
  }
}

/* --- 30.2b Resumen de la solicitud del codeudor (.ui-resumen) --- */
/* Clase aditiva sobre `.caja-formulario`: el resumen se pinta como un
   formulario ya diligenciado (campos .form-control readonly sin `name`).
   Los rotulos tienen largos muy distintos ("Documento" frente a "Valor
   aproximado de cuota"): al pasar de una linea a dos, el input de esa
   columna bajaba ~19px y la fila quedaba despareja. Se reserva la altura de
   dos lineas para que todos los campos de una fila arranquen a la misma
   altura. 13px * 1.45 de line-height = 18.85px por linea. */
body.ui-dash .ui-resumen label {
  display: block;
  min-height: 37.7px;
}

/* En movil la rejilla es de una sola columna: no hay nada con que alinear y
   reservar dos lineas solo deja huecos. */
@media (max-width: 575.98px) {
  body.ui-dash .ui-resumen label {
    min-height: 0;
  }
}

/* --- 30.3 Mi perfil --- */
body.ui-dash form[action="/page/sistema/guardarperfil/"] {
  padding: 24px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .content-dashboard > .row {
  row-gap: 18px;
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .grupo-campo {
  margin-bottom: 0;
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 500;
}
/* La caja del icono se estira a la altura del campo. */
body.ui-dash form[action="/page/sistema/guardarperfil/"] label.input-group {
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .input-group-text {
  height: 100%;
  padding: 0 14px;
  background: #F9FAFB;
  border: 1px solid var(--ui-border);
  border-right: none;
  border-radius: var(--ui-r-sm) 0 0 var(--ui-r-sm);
  color: var(--ui-muted);
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .input-group > .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .form-control[readonly] {
  background-color: #F3F4F6;
}
body.ui-dash form[action="/page/sistema/guardarperfil/"] .botones-acciones {
  margin-top: 22px;
}
@media (max-width: 767.98px) {
  /* las columnas son `col-4` fijas: en movil quedaban tres de 110px */
  body.ui-dash form[action="/page/sistema/guardarperfil/"] .content-dashboard > .row > .col-4 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* --- 30.4 Fragmentos de garantia dentro de paso5 (#div_paso4) ---
   botonera.php -> seleccion_tipo_garantia() carga aqui codeudorparcial,
   fondomutual o requisitospersonal (y `blanco`, vacio, para el resto).
   Heredaban el `text-center` de la tarjeta de garantia: etiquetas, titulo
   y texto legal salian centrados. */
body.ui-dash #div_paso4 {
  text-align: left;
}
body.ui-dash #div_paso4:not(:empty) {
  margin-top: 16px !important;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-soft);
}
body.ui-dash #div_paso4 > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.ui-dash #div_paso4 .grupo-campo {
  row-gap: 14px;
  margin-bottom: 0;
}
body.ui-dash #div_paso4 .formulario {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
/* subtitulo del fragmento ("Informacion del codeudor", "FIGARANTIAS") */
body.ui-dash #div_paso4 .col-lg-12 > b {
  display: block;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 600;
}
body.ui-dash #div_paso4 .col-lg-12 > b:empty {
  display: none;
}
body.ui-dash #div_paso4 label {
  text-align: left;
}
/* fondomutual: texto legal legible y la aceptacion bien visible */
body.ui-dash #div_paso4 p[align="justify"] {
  margin: 10px 0 0;
  padding: 16px 18px;
  background: #F9FAFB;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
}
body.ui-dash #div_paso4 .enlinea.ancho_form2 {
  margin-top: 14px;
}
body.ui-dash #div_paso4 .enlinea.ancho_form2 > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-r-sm);
  color: var(--ui-accent-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.ui-dash #div_paso4 .enlinea.ancho_form2 input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}
/* requisitospersonal: la lista como aviso */
body.ui-dash #div_paso4 .formulario .col-lg-12 > p {
  margin: 0;
  color: var(--ui-text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- 29.4 fondomutual en el detalle del admin ---
   En modo detalle la vista se pone a si misma, en linea,
   `font-family:Arial; background:white; padding:10px` en el contenedor;
   el `!important` es para ganarle a ese estilo en linea. El selector por
   [style*="Arial"] apunta solo a ese contenedor. */
body.ui-detalle > .container[style*="Arial"] {
  max-width: calc(100% - 48px);
  margin: 0 24px;
  padding: 24px !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  font-family: inherit !important;
}
body.ui-detalle > .container[style*="Arial"] .col-lg-12 > b {
  display: block;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 600;
}
body.ui-detalle > .container[style*="Arial"] .grupo-campo {
  row-gap: 12px;
}
body.ui-detalle > .container[style*="Arial"] p[align="justify"] {
  margin: 10px 0 0;
  padding: 16px 18px;
  background: #F9FAFB;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  color: var(--ui-text-2);
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
}
body.ui-detalle > .container[style*="Arial"] .enlinea.ancho_form2 {
  margin-top: 14px;
}
body.ui-detalle > .container[style*="Arial"] .enlinea.ancho_form2 > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-r-sm);
  color: var(--ui-accent-dark);
  font-size: 14px;
  font-weight: 600;
}
body.ui-detalle > .container[style*="Arial"] .enlinea.ancho_form2 input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* --- 30.5 Aire bajo la cabecera en vistas sin titulo ---
   La seccion 28 dejo la cabecera con 6px de margen porque las paginas
   empiezan con `.titulo` (margin-top 22px). paso4 no tiene titulo y su
   primera seccion quedaba a 6px de la barra. */
body.ui-dash header.header-menu + div > .container:first-of-type:not(:has(.titulo)) {
  padding-top: 22px;
}

/* ---------------------------------------------------------------------
   31. Vistas de `sistema` sin revisar hasta ahora (usadas o no)
   --------------------------------------------------------------------- */

/* --- 31.1 Tablas con clases de rejilla ---
   codeudor.php trae `<table class="tabla2 col-lg-8 offset-lg-2">`. La
   seccion 11 le da `width:100%` a .tabla2, que le gana al 66.67% de
   .col-lg-8; con el margen del offset la tabla se salia 152px por la
   derecha (medido a 1200px). Se le devuelve el ancho de su columna. */
@media (min-width: 992px) {
  body.ui-dash table.tabla2.col-lg-8 {
    width: 66.666667%;
  }
}

/* --- 31.2 Fragmentos de layout `blanco` abiertos como pagina ---
   codeudor, codeudorparcial(2), requisitospersonal, fondomutual... se
   inyectan por AJAX dentro de otra pagina; abiertos solos no tenian ni
   margen ni tarjeta. Solo aplica cuando la vista es la pagina entera y
   no es el detalle del admin (ese va en la seccion 29). */
body.ui-pagina-entera:not(.ui-detalle) {
  padding: 28px 0 40px;
  background: var(--ui-bg);
}
body.ui-pagina-entera:not(.ui-detalle) > .container > .row > .col-12 > .formulario {
  margin: 0;
  padding: 22px 24px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  row-gap: 14px;
}
body.ui-pagina-entera:not(.ui-detalle) .formulario .col-lg-12 > b {
  display: block;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 600;
}
body.ui-pagina-entera:not(.ui-detalle) .formulario .col-lg-12 > b:empty {
  display: none;
}
body.ui-pagina-entera:not(.ui-detalle) .formulario .col-lg-12 > p {
  margin: 0;
  color: var(--ui-text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- 31.3 Selects con clases de rejilla ---
   paso4b, paso4foe y paso5FOE traen `<select class="form-control col-lg-4
   offset-lg-4">`. En Bootstrap 5 `.form-control{width:100%}` se declara
   despues de `.col-lg-4` y le gana: con el offset el select se salia 380px
   por la derecha. Pasaba igual sin esta hoja (verificado con el layout
   original); se corrige de paso. */
@media (min-width: 992px) {
  body.ui-dash .form-control.col-lg-4 {
    width: 33.333333%;
  }
}

/* --- 31.4 Pildora "Paso X/N" en la cabecera de los pasos antiguos ---
   En paso2b, paso3b, paso4b... el marcado va titulo, separador y despues
   `<div class="col-6 text-start"><h3 class="paso">`: la pildora caia sola
   debajo, a la izquierda. Se reordena con `order` sin tocar el marcado.
   Acotado a filas que contienen un h3.paso: en esas el separador es la
   ultima pieza de la fila (en sistema/index.php el separador comparte
   fila con toda la pagina y moverlo al final la romperia; ahi no hay
   h3.paso). En las vistas donde ya estaba bien, el orden resultante es el
   mismo que el del marcado. */
body.ui-dash .row:has(> .col-6 > h3.paso) > .col-6:has(> h3.paso) {
  order: 1;
  text-align: right !important;
}
body.ui-dash .row:has(> .col-6 > h3.paso) > div[align="left"].col-12:has(> .separador_login2) {
  order: 2;
}

/* --- 31.5 Aviso de mantenimiento (indexI / indexinac2) ---
   Modal con cabecera vacia y un parrafo suelto. Se presenta centrado, con
   icono y el texto como mensaje. (La vista lo intenta abrir en linea con
   `$('#exampleModal').modal('show')` antes de que Bootstrap 5 registre el
   plugin de jQuery, asi que hoy no llega a abrirse; eso es JS y no se toca.) */
body.ui-dash .modal-dialog.ui-modal-aviso {
  display: flex;
  align-items: center;
  max-width: 440px;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}
body.ui-dash .ui-modal-aviso .modal-content {
  border: none;
  border-radius: var(--ui-r-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}
body.ui-dash .ui-modal-aviso .modal-header {
  display: none;
}
body.ui-dash .ui-modal-aviso .modal-body {
  padding: 34px 32px 30px;
  color: var(--ui-text-2);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}
body.ui-dash .ui-modal-aviso .modal-body::before {
  content: "\f0ad";                      /* wrench (existe en FA 5.2, que es la que carga global.css) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  color: var(--ui-accent-dark);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 22px;
}

/* ---------------------------------------------------------------------
   32. Subtitulos dentro de su caja
   Los subtitulos de seccion aparecen en cinco disposiciones distintas
   (medidas sobre el DOM renderizado). En cada una el titulo se funde con la
   caja que le sigue: el titulo pasa a ser la parte superior de la caja
   (fondo, borde y esquinas de arriba) y la caja pierde su borde superior.
   Asi no depende de la altura del titulo, que en movil ocupa dos lineas.
     A. titulo + .caja-formulario hermanos      paso1, paso4, terminos,
                                                sarlaft, terminos_codeudor
     B. <col-12><span.titulo-seccion></col-12>  paso2, paso3, paso7
        + .caja-formulario hermana de la columna
     C. .texto-adicional: titulo + <p>          Declaraciones / Autorizaciones
     D. titulo ya dentro de una caja            Tipo de garantia, cartas
   (paso8 ya no entra aqui: su aviso de radicacion usa la seccion 34)
   Si el navegador no soporta :has() el titulo queda como encabezado
   alineado a la izquierda justo encima de la caja.
   --------------------------------------------------------------------- */

/* --- 32.1 Parte superior (el titulo) --- */
body.ui-dash .titulo-seccion:has(+ .caja-formulario),
body.ui-dash .texto-adicional > .titulo-seccion:has(+ p),
body.ui-dash [class*="col-"]:has(> span.titulo-seccion):has(+ .caja-formulario) {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 18px 24px 16px !important;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-bottom: none;
  border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
  /* linea fina interior entre el titulo y el contenido */
  box-shadow: inset 0 -1px 0 var(--ui-border-soft);
  text-align: left !important;
}
/* en B el <span> es el titulo y la columna hace de caja */
body.ui-dash [class*="col-"]:has(> span.titulo-seccion):has(+ .caja-formulario) > span.titulo-seccion {
  margin: 0;
}
body.ui-dash [class*="col-"]:has(> span.titulo-seccion):has(+ .caja-formulario) > br {
  display: none;
}

/* --- 32.2 Parte inferior (la caja) --- */
body.ui-dash .titulo-seccion + .caja-formulario,
body.ui-dash .texto-adicional > .titulo-seccion + p,
body.ui-dash [class*="col-"]:has(> span.titulo-seccion) + .caja-formulario {
  /* varias cajas llevan .p-3 / .py-4, que en BS5 son !important */
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 18px !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* paso2 y paso3 traen la caja mas angosta (col-10 offset / col-8 offset):
   al fundirse con su titulo, que va a todo el ancho, se iguala */
body.ui-dash [class*="col-"]:has(> span.titulo-seccion) + .caja-formulario {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
/* separacion entre cajas consecutivas */
body.ui-dash .titulo-seccion:has(+ .caja-formulario),
body.ui-dash [class*="col-"]:has(> span.titulo-seccion):has(+ .caja-formulario) {
  margin-top: 4px !important;
}

/* --- 32.3 Contenido de las cajas alineado a la izquierda ---
   #form2 lleva `text-center` y lo heredaban las etiquetas de los campos */
body.ui-dash .caja-formulario {
  text-align: left;
}

/* --- 32.4 Titulo que ya va dentro de su caja (D) --- */
body.ui-dash .ui-card-plain > .titulo-seccion,
body.ui-dash .card-body > .titulo-seccion {
  /* 16 + 16: misma cabecera que los titulos fundidos (32.1) y 16px hasta el
     primer campo, como en todas las cajas */
  margin: 0 0 16px !important;
  padding-bottom: 16px;
  box-shadow: inset 0 -1px 0 var(--ui-border-soft);
}

/* --- 32.5 Tipo de garantia del mismo ancho que las demas cajas ---
   paso5 va en `col-lg-8` centrada; se estira a la columna completa y su
   contenido pasa a la izquierda como en el resto. */
body.ui-dash #div_paso5 > .container > .row > .col-lg-8 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
body.ui-dash #div_paso5 .card-body.text-center {
  padding: 18px 24px 24px;
  text-align: left !important;
}
body.ui-dash #div_paso5 .card-body > .row.justify-content-center {
  justify-content: flex-start !important;
}
body.ui-dash #div_paso5 .card-body > .row > .col-md-6 {
  padding-left: 0;
}
/* el .row del select trae el margen negativo de Bootstrap y lo corria a la
   izquierda del titulo */
body.ui-dash #div_paso5 .card-body > .row {
  margin-left: 0;
  margin-right: 0;
}

/* --- 32.6 Anexos documentales (paso6) en una sola caja ---
   Dentro de la solicitud, paso6 era: titulo suelto, pildora "Asociado" y
   una tarjeta por documento. Ahora todo el bloque (.fuente1 .row.text-center,
   solo existe en paso6) es la caja: titulo arriba, grupos y documentos como
   filas con linea fina. En el detalle del admin (.ui-detalle) sigue su propio
   diseno de la seccion 29. */
/* los margenes laterales tienen que quedar en 0: la caja es un `.row`, y sin
   esta declaracion Bootstrap le devuelve sus margenes negativos de canalon,
   la caja se sale 12px por cada lado del contenedor y se cortan los inputs de
   file de la derecha. El `margin-bottom` de 28px es el unico espacio bajo la
   caja; el `mb-3` del envoltorio se anula mas abajo. */
body.ui-dash:not(.ui-detalle) .fuente1 .row.text-center {
  margin: 0 0 28px;
  /* 12 + los 12px inferiores de la ultima fila = 24px, como las demas cajas */
  padding: 0 24px 12px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  text-align: left;
}
body.ui-dash:not(.ui-detalle) .fuente1 .row.text-center > * {
  padding-left: 0;
  padding-right: 0;
}
/* cabecera: titulo (y boton de editar cuando lo hay) */
body.ui-dash:not(.ui-detalle) .fuente1 .row.text-center > .row.mb-3 {
  margin: 0 0 16px !important;
  box-shadow: inset 0 -1px 0 var(--ui-border-soft);
}
body.ui-dash:not(.ui-detalle) .fuente1 .row.text-center > .row.mb-3 > .col-12 {
  padding: 18px 0 16px !important;
}
body.ui-dash:not(.ui-detalle) .fuente1 .row.text-center > .row.mb-3 .titulo-seccion {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
/* aviso rosado: 16px hasta el grupo. Su `.row` interior traia los margenes
   negativos de Bootstrap y el aviso se salia 12px por lado del contenido de
   la caja (medido: 78-1348px contra 90-1336px del titulo y las filas) */
body.ui-dash:not(.ui-detalle) .fuente1 #mensaje {
  margin-bottom: 16px;
}
body.ui-dash:not(.ui-detalle) .fuente1 #mensaje > .row {
  margin-left: 0;
  margin-right: 0;
}
/* grupo (Asociado / Codeudor): 4px + los 12px de relleno de la fila = 16px
   hasta el primer documento */
body.ui-dash:not(.ui-detalle) .fuente1 div.fondo-gris2 {
  margin: 0 0 4px;
}
/* cada documento: fila con linea fina, sin tarjeta propia */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 {
  margin: 0;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ui-border-soft);
  border-radius: 0;
  box-shadow: none;
}
/* la ultima fila cierra con el borde de la caja, sin linea propia encima */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3:not(:has(~ .fondo-gris3)) {
  border-bottom: none;
}
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 > .row {
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  /* entre los dos desprendibles, y en movil entre etiqueta y control */
  row-gap: 16px;
}
/* contenedores vacios del marcado (en este modo quedan sin contenido):
   columnas de relleno y los cuatro .mt-3 de "Otros documentos". Solo los que
   no tienen NINGUN elemento dentro; la primera columna es la etiqueta y nunca
   se oculta. */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 > .row > div[align="left"]:not(:first-child):not(:has(*)),
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 > .row > .mt-3:not(:has(*)) {
  display: none;
}
/* Los <br> del marcado. No solo los de la fila: los desprendibles llevan el
   suyo dentro de `.col-7.pad0`, y esa linea en blanco de ~21px era la que
   hacia el hueco entre los dos desprendibles (y antes de la fila siguiente)
   mas grande que el de las demas filas. */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 br {
  display: none;
}

/* --- 32.7 Mismo espacio (28px) entre todas las cajas de la solicitud ---
   medido: 28px entre las cajas de paso1, pero 52px antes de Tipo de garantia
   (el `.mt-4` de su contenedor) y 8px despues (la tarjeta no tenia margen) */
/* #div_paso5, #div_carta, #div_carta2 y #div_paso6 traen margin-top:8px
   (medido); cada caja pone su propio margen inferior de 28px */
body.ui-dash #div_paso5,
body.ui-dash #div_carta,
body.ui-dash #div_carta2,
body.ui-dash #div_paso6 {
  margin-top: 0;
}
body.ui-dash #div_paso5 > .container.mt-4 {
  margin-top: 0 !important;
}
body.ui-dash #div_paso5 .card {
  margin-bottom: 28px;
}
/* los contenedores de los fragmentos de garantia llegan vacios hasta que se
   elige una; sus `.mt-4` / `.mt-3` (!important en BS5) dejaban 49px bajo el
   select en vez de los 24px de relleno de la tarjeta */
body.ui-dash #div_paso4:empty,
body.ui-dash #div_paso4B:empty {
  margin-top: 0 !important;
}
/* paso6 envuelve su caja (.row.text-center, con su propio margin-bottom:28px
   de la seccion 32.6) en un `.row.mb-3.grupo-campo` que las demas cajas no
   tienen. Como cada `.col-*` de Bootstrap es un flex-item y por spec CSS un
   flex-item crea su propio contexto de formato de bloque, ese margin-bottom
   no puede colapsar hacia afuera: queda atrapado y se SUMA (28+16=44px) en
   vez de fundirse en un solo espacio de 28px como en las demas cajas.
   `.mb-3` es !important en BS5: sin el !important aqui no se anulaba. */
body.ui-dash:not(.ui-detalle) .fuente1 .row.mb-3.grupo-campo {
  margin-bottom: 0 !important;
}
/* etiqueta del documento alineada con el grupo ("Asociado") */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 > .row > div[align="left"]:first-child {
  padding-left: 0;
}
/* "Certificacion bancaria" es la unica etiqueta con `.enlinea`, que la ponia
   en negrita y con 6px de relleno arriba y abajo: se iguala a las demas. */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 > .row > .enlinea:first-child {
  padding-top: 0;
  padding-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
/* Los desprendibles anidan su control en `.col-lg-6 > .row > .col-7.pad0`.
   Ese `.row` interior conserva los margenes negativos de canalon de Bootstrap
   (-12px por lado), que anulan el relleno del `.col-lg-6` y dejaban el control
   12px mas a la izquierda y 12px mas ancho que los de las demas filas. */
body.ui-dash:not(.ui-detalle) .fuente1 .fondo-gris3 .col-lg-6 > .row {
  margin-left: 0;
  margin-right: 0;
}

/* --- 32.8 Cartas (compromiso y renovacion de poliza) alineadas con las demas cajas ---
   medido: su .row conserva el margen negativo de Bootstrap (12px mas por lado
   que las otras cajas) y el `.py-4` de su contenedor sumaba 24px arriba y
   abajo (52, 84 y 60px entre cajas en vez de 28) */
body.ui-dash #div_carta > .container.py-4,
body.ui-dash #div_carta2 > .container.py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.ui-dash #div_carta > .container > .row,
body.ui-dash #div_carta2 > .container > .row {
  margin-left: 0;
  margin-right: 0;
}
/* Declaraciones / Autorizaciones: 16px del parrafo + 8px del bloque = 24;
   se lleva a 28 como el resto */
body.ui-dash .texto-adicional > .titulo-seccion + p {
  margin-bottom: 20px;
}

/* --- 32.9 Ritmo de la solicitud (sistema/index.php, #form2) ---
   Dos medidas para toda la pagina: 28px entre bloques (cajas, boton
   Siguiente y avisos del pie) y 16px entre los elementos dentro de una caja
   (encabezado, campos, avisos, grupos). Medido antes: 20px entre las cajas
   de paso1 y 16px antes de Tipo de garantia (el `.mb-3` !important de la
   caja + 4px del titulo), 44px antes de Siguiente y 16px despues. */
body.ui-dash #form2 .row.caja-formulario {
  margin-bottom: 28px !important;
  padding-top: 16px !important;
  /* 8 + los 16px del ultimo campo = 24px, igual que el resto de cajas */
  padding-bottom: 8px;
}
body.ui-dash #form2 .caja-formulario > [class*="col-"],
body.ui-dash #form2 .caja-formulario > [class*="col-"]:last-child {
  margin-bottom: 16px;
}
body.ui-dash #form2 .titulo-seccion:has(+ .caja-formulario) {
  margin-top: 0 !important;
}
/* Informacion Personal cierra con `.col-12 > #error1`, vacio salvo que haya
   un error: con su margin-top de 20px (global.css) y el margen de la
   columna sumaba 36px al fondo de la caja */
body.ui-dash #form2 .caja-formulario > .col-12:has(> #error1:empty) {
  margin-bottom: 0;
}
body.ui-dash #form2 #error1:empty {
  margin-top: 0;
}
/* el boton pone los 28px hasta los avisos; si el JS lo oculta, quedan los
   28px de la caja de anexos */
body.ui-dash #div_siguiente {
  margin: 0 0 28px;
}
body.ui-dash #div_siguiente .btn {
  margin: 0;
}
body.ui-dash #form2 .div_rojo {
  margin: 0 0 16px;
}
/* boton de tarifas (solo linea SO): quedaba pegado a la caja de
   Declaraciones (0px) */
body.ui-dash #resultado .archivo-soat {
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------------
   33. Login de marca (solo index/index.php)
   La vista usa clases propias `.ft-*` en lugar del armazon compartido
   (.fondo1 / .login-container / .zindexlogin) para no alterar otp.php,
   recordar.php, changepassword.php ni indexinactive.php, que siguen con
   la seccion 26. Sin foto de stock: ilustracion SVG en la vista con los
   colores de los dedos del logo. Comfortaa ya es self-hosted en global.css.
   --------------------------------------------------------------------- */
body.ui-dash .ft-login {
  --ft-green: #88a231;
  --ft-green-dark: #6d8327;
  --ft-green-deep: #5a7215;
  --ft-ink: #26300c;
  --ft-ink-2: #4a5332;
  --ft-muted: #6b705c;
  --ft-sun: #f5b51f;
  --ft-coral: #ef7d2d;
  --ft-rose: #e4407a;
  --ft-sky: #27a3db;
  --ft-display: "Comfortaa Bold", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ft-display-regular: "Comfortaa Regular", "Nunito", "Varela Round", system-ui, sans-serif;
  --ft-spring: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 40px 32px 20px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ft-ink-2);
  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(1000px 640px at 0% 0%, rgba(136, 162, 49, 0.14), transparent 60%),
    radial-gradient(720px 520px at 100% 100%, rgba(245, 181, 31, 0.10), transparent 60%),
    linear-gradient(180deg, #f8f8f2 0%, #f2f4e8 100%);
}

body.ui-dash .ft-login-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.ui-dash .ft-login-shape {
  position: absolute;
  display: block;
}

body.ui-dash .ft-login-shape--a {
  top: -160px;
  right: -140px;
  width: 560px;
  height: 500px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: rgba(136, 162, 49, 0.09);
  transform: rotate(14deg);
}

body.ui-dash .ft-login-shape--b {
  left: 36%;
  bottom: -110px;
  width: 240px;
  height: 220px;
  border-radius: 40% 60% 52% 48% / 58% 44% 56% 42%;
  border: 2px solid rgba(228, 64, 122, 0.12);
  transform: rotate(-16deg);
}

body.ui-dash .ft-login-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* --- 33.1 Lado de marca --- */
body.ui-dash .ft-login-brand {
  position: relative;
  min-height: 600px;
  padding-top: 24px;
}

body.ui-dash .ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-chip-dots {
  display: inline-flex;
  gap: 4px;
}

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

body.ui-dash .ft-chip-dots i:nth-child(1) { background: var(--ft-sun); }
body.ui-dash .ft-chip-dots i:nth-child(2) { background: var(--ft-coral); }
body.ui-dash .ft-chip-dots i:nth-child(3) { background: var(--ft-rose); }
body.ui-dash .ft-chip-dots i:nth-child(4) { background: var(--ft-sky); }

body.ui-dash .ft-login-title {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 18px 0 0 -3px;
  font-family: var(--ft-display);
  font-size: 58px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ft-ink);
}

body.ui-dash .ft-login-title-pre {
  display: block;
  margin: 0 0 10px 3px;
  font-family: var(--ft-display-regular);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ft-muted);
}

body.ui-dash .ft-login-title-mark {
  position: relative;
  display: inline-block;
  font-family: inherit;
  color: var(--ft-green-deep);
}

body.ui-dash .ft-login-swoosh {
  position: absolute;
  left: 2px;
  right: -8px;
  bottom: -14px;
  width: calc(100% + 6px);
  height: 18px;
  overflow: visible;
}

/* La ilustracion se mete por detras del borde de la tarjeta a proposito */
body.ui-dash .ft-login-art {
  position: absolute;
  right: -110px;
  bottom: -40px;
  z-index: 0;
  width: min(480px, 88%);
  pointer-events: none;
}

body.ui-dash .ft-login-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* La mano es el logo oficial de Fondtodos (sale del EPS original). Entra en
   cuatro tiempos: fondo, mano, dedos y rayos; cada pieza trae su retraso en
   --ft-delay desde la vista. Los keyframes solo declaran "from" para que la
   opacidad final sea la del atributo (la sombra y los puntos son translucidos). */
body.ui-dash .ft-login-art svg {
  --ft-art-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ft-art-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

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

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

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

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

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

body.ui-dash .ft-art-ray-side {
  transform-origin: 0 100%;
}

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

@keyframes ft-art-fade {
  from { opacity: 0; }
}

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

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

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

@keyframes ft-pop {
  from { opacity: 0; transform: translateY(30px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* --- 33.2 Tarjeta de acceso --- */
body.ui-dash .ft-login-panel {
  position: relative;
  z-index: 2;
}

body.ui-dash .ft-card {
  display: block;
  margin: 0;
  padding: 36px 36px 30px;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(38, 48, 12, 0.06);
  border-radius: 28px;
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.03),
    0 4px 8px -2px rgba(38, 48, 12, 0.04),
    0 36px 64px -30px rgba(74, 94, 20, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.ui-dash .ft-card-logo {
  display: block;
  width: 168px;
  max-width: 100%;
  margin: 0 0 26px;
}

body.ui-dash .ft-card-title {
  margin: 0 0 22px;
  font-family: var(--ft-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ft-ink);
}

body.ui-dash .ft-field + .ft-field {
  margin-top: 16px;
}

body.ui-dash .ft-field label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 16px;
  background: #f7f8f2;
  border: 1px solid rgba(38, 48, 12, 0.10);
  border-radius: 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

body.ui-dash .ft-input:hover {
  border-color: rgba(38, 48, 12, 0.18);
}

body.ui-dash .ft-input:focus-within {
  background: #fff;
  border-color: var(--ft-green);
  box-shadow: 0 0 0 4px rgba(136, 162, 49, 0.16);
}

body.ui-dash .ft-input svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #8b917a;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease;
}

body.ui-dash .ft-input:focus-within svg {
  stroke: var(--ft-green-deep);
}

body.ui-dash .ft-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 16px;
  color: var(--ft-ink);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

body.ui-dash .ft-input input::placeholder {
  color: #a3a893;
}

body.ui-dash .ft-card-link {
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
}

body.ui-dash .ft-card-link a {
  color: var(--ft-green-deep);
}

body.ui-dash .ft-btn {
  position: relative;
  /* el espacio que antes dejaba el widget de reCAPTCHA v2 */
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 54px;
  padding: 0 8px 0 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--ft-green);
  border: 0;
  border-radius: 16px;
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.08),
    0 12px 24px -12px rgba(106, 132, 29, 0.6);
  transition:
    background-color 200ms ease,
    box-shadow 320ms var(--ft-spring),
    transform 320ms var(--ft-spring);
}

body.ui-dash .ft-btn > span:first-child {
  flex: 1;
  padding-left: 38px;
  text-align: center;
}

body.ui-dash .ft-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 320ms var(--ft-spring), background-color 200ms ease;
}

body.ui-dash .ft-btn-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ui-dash .ft-btn:hover,
body.ui-dash .ft-btn:focus-visible {
  color: #fff;
  background: var(--ft-green-dark);
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.08),
    0 18px 30px -14px rgba(106, 132, 29, 0.7);
  transform: translateY(-2px);
}

body.ui-dash .ft-btn:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--ft-green),
    0 18px 30px -14px rgba(106, 132, 29, 0.7);
}

body.ui-dash .ft-btn:hover .ft-btn-arrow,
body.ui-dash .ft-btn:focus-visible .ft-btn-arrow {
  background: rgba(255, 255, 255, 0.26);
  transform: translateX(3px);
}

body.ui-dash .ft-btn:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 120ms;
}

body.ui-dash .ft-alert {
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: #9b1c1c;
  background: #fdf0ef;
  border: 1px solid #f5c9c5;
  border-radius: 14px;
}

body.ui-dash .ft-card--aviso {
  padding: 16px;
}

body.ui-dash .ft-card--aviso .image-mantenimiento {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 18px;
}

body.ui-dash .ft-card--aviso .image-mantenimiento.d-none {
  display: none;
}

/* --- 33.3 Pie --- */
body.ui-dash .ft-login-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  width: 100%;
  max-width: 1180px;
  margin: 28px auto 0;
}

body.ui-dash .ft-login-redes {
  display: flex;
  gap: 8px;
}

body.ui-dash .ft-login-redes a {
  display: flex;
  width: 32px;
}

body.ui-dash .ft-login-redes img {
  width: 100%;
}

body.ui-dash .ft-login-derechos {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--ft-muted);
}

/* --- 33.4 Codigo OTP (index/otp.php), mismo diseno ft-login del login --- */
body.ui-dash .ft-otp-desc {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-otp-desc strong {
  color: var(--ft-ink);
}

body.ui-dash .ft-alert--muted {
  margin-top: 0;
  margin-bottom: 22px;
  text-align: left;
  font-size: 12px;
  color: var(--ft-ink-2);
  background: #f7f8f2;
  border-color: rgba(38, 48, 12, 0.10);
}

body.ui-dash .ft-otp-fields {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
}

body.ui-dash .ft-otp-input {
  flex: 0 1 48px;
  width: 48px;
  height: 54px;
  min-width: 0;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--ft-ink);
  background: #f7f8f2;
  border: 1px solid rgba(38, 48, 12, 0.10);
  border-radius: 14px;
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

body.ui-dash .ft-otp-input:hover {
  border-color: rgba(38, 48, 12, 0.18);
}

body.ui-dash .ft-otp-input:focus {
  background: #fff;
  border-color: var(--ft-green);
  box-shadow: 0 0 0 4px rgba(136, 162, 49, 0.16);
}

body.ui-dash .ft-otp-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

body.ui-dash .ft-otp-actions .ft-btn {
  flex: 1;
  width: auto;
  margin-top: 0;
}

/* variante secundaria del boton, para "Limpiar" (antes .btn-azul.red) */
body.ui-dash .ft-btn--ghost {
  color: #9b1c1c;
  background: transparent;
  border: 1px solid #f5c9c5;
  box-shadow: none;
}

body.ui-dash .ft-btn--ghost > span:first-child {
  padding-left: 0;
}

body.ui-dash .ft-btn--ghost .ft-btn-arrow {
  display: none;
}

body.ui-dash .ft-btn--ghost:hover,
body.ui-dash .ft-btn--ghost:focus-visible {
  color: #9b1c1c;
  background: #fdf0ef;
  box-shadow: none;
  transform: none;
}

@media (max-width: 575.98px) {
  body.ui-dash .ft-otp-fields {
    gap: 6px;
  }

  body.ui-dash .ft-otp-input {
    flex-basis: 42px;
    width: 42px;
    height: 46px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-dash .ft-login-art svg * {
    animation: none;
  }

  body.ui-dash .ft-btn,
  body.ui-dash .ft-btn-arrow {
    transition-duration: 1ms;
  }

  body.ui-dash .ft-btn:hover,
  body.ui-dash .ft-btn:focus-visible,
  body.ui-dash .ft-btn:active {
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  body.ui-dash .ft-login-title {
    font-size: 50px;
  }

  body.ui-dash .ft-login-art {
    right: -60px;
  }
}

@media (max-width: 991.98px) {
  body.ui-dash .ft-login {
    padding: 28px 16px 20px;
  }

  body.ui-dash .ft-login-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 480px;
  }

  body.ui-dash .ft-login-brand {
    min-height: 0;
    padding-top: 8px;
    text-align: center;
  }

  body.ui-dash .ft-login-art {
    display: none;
  }

  body.ui-dash .ft-login-title {
    margin: 14px auto 0;
    font-size: 38px;
  }

  body.ui-dash .ft-login-title-pre {
    margin-left: 0;
    font-size: 19px;
  }

  body.ui-dash .ft-login-foot {
    justify-content: center;
    text-align: center;
  }

  body.ui-dash .ft-login-derechos {
    margin: 0;
  }

  body.ui-dash .ft-login-shape--a {
    top: -220px;
    right: -260px;
  }
}

@media (max-width: 575.98px) {
  body.ui-dash .ft-login-title {
    font-size: 32px;
  }

  body.ui-dash .ft-card {
    padding: 28px 20px 24px;
    border-radius: 24px;
  }

  body.ui-dash .ft-card-logo {
    width: 148px;
    margin-bottom: 20px;
  }
}


/* ---------------------------------------------------------------------
   34. Aviso de solicitud radicada (sistema/paso8.php)
   Antes era `.titulo-seccion + .texto-solcompleta` (barra azul + texto
   azul de 24px). Se reescribe con el mismo lenguaje de marca del login
   (seccion 33): tarjeta redondeada de 28px, titulo en Comfortaa con el
   swoosh de colores y el chip de puntos del logo. Los tokens `--ft-*`
   estan declarados en `.ft-login`, asi que se repiten aqui para que el
   bloque funcione dentro del armazon del sistema.
   --------------------------------------------------------------------- */
body.ui-dash .ft-radicada {
  --ft-green: #88a231;
  --ft-green-deep: #5a7215;
  --ft-ink: #26300c;
  --ft-ink-2: #4a5332;
  --ft-muted: #6b705c;
  --ft-sun: #f5b51f;
  --ft-coral: #ef7d2d;
  --ft-rose: #e4407a;
  --ft-sky: #27a3db;
  --ft-display: "Comfortaa Bold", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ft-spring: cubic-bezier(0.22, 1, 0.36, 1);

  margin: 4px 0 28px;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-radicada-card {
  position: relative;
  overflow: hidden;
  padding: 30px 32px 28px;
  text-align: left;
  background: #fff;
  background-image:
    radial-gradient(520px 300px at 100% 0%, rgba(136, 162, 49, 0.10), transparent 62%),
    radial-gradient(380px 260px at 0% 100%, rgba(245, 181, 31, 0.08), transparent 62%);
  border: 1px solid rgba(38, 48, 12, 0.07);
  border-radius: 28px;
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.03),
    0 4px 8px -2px rgba(38, 48, 12, 0.04),
    0 30px 56px -30px rgba(74, 94, 20, 0.30);
}

/* mancha suave detras del check, como las .ft-login-shape del login */
body.ui-dash .ft-radicada-card::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 260px;
  height: 230px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: rgba(136, 162, 49, 0.08);
  transform: rotate(14deg);
  pointer-events: none;
}

body.ui-dash .ft-radicada-ico {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 0 20px;
  border-radius: 20px;
  background: var(--ft-green);
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.08),
    0 14px 26px -12px rgba(106, 132, 29, 0.6);
  animation: ft-pop 700ms 120ms var(--ft-spring) both;
}

body.ui-dash .ft-radicada-ico svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ui-dash .ft-radicada .ft-chip {
  position: relative;
  z-index: 1;
}

body.ui-dash .ft-radicada-title {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 14px 0 0;
  font-family: var(--ft-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ft-ink);
}

body.ui-dash .ft-radicada-mark {
  position: relative;
  display: inline-block;
  color: var(--ft-green-deep);
}

body.ui-dash .ft-radicada-swoosh {
  position: absolute;
  left: 2px;
  right: -8px;
  bottom: -10px;
  width: calc(100% + 6px);
  height: 14px;
  overflow: visible;
}

body.ui-dash .ft-radicada-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-radicada-nota {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 18px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ft-muted);
  background: #f7f8f2;
  border: 1px solid rgba(38, 48, 12, 0.10);
  border-radius: 14px;
}

body.ui-dash .ft-radicada-nota svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--ft-green-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767.98px) {
  body.ui-dash .ft-radicada-card {
    padding: 24px 20px 22px;
    border-radius: 24px;
  }

  body.ui-dash .ft-radicada-ico {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 18px;
  }

  body.ui-dash .ft-radicada-ico svg {
    width: 26px;
    height: 26px;
  }

  body.ui-dash .ft-radicada-title {
    font-size: 27px;
  }

  body.ui-dash .ft-radicada-text {
    margin-top: 20px;
    font-size: 15px;
  }
}

/* linea de estado bajo la tarjeta de confirmacion de solicitud */
body.ui-dash .ft-confirma-estado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 28px;
  font-size: 14px;
  color: #6b705c;
}

body.ui-dash .ft-confirma-estado svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #5a7215;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ui-dash .ft-confirma-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(136, 162, 49, 0.25);
  border-top-color: #88a231;
  border-radius: 50%;
  animation: ft-confirma-spin 700ms linear infinite;
}

@keyframes ft-confirma-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-dash .ft-confirma-spin {
    animation-duration: 2.4s;
  }
}

/* ---------------------------------------------------------------------
   35. Fondo de marca para vistas interiores (sistema/index.php y
   confirmarsolicitud/index.php)
   Esas dos pantallas quedaban sobre el gris plano de `body.ui-dash`
   (--ui-bg). Se reusa el fondo del login (seccion 33): ruido + dos
   radiales de verde y amarillo + degradado base, con las mismas manchas
   organicas. Aqui no puede ir en el contenedor de la vista porque el
   layout (app/layout/page/page.php) mete el contenido en un <div> que no
   cubre el alto de la ventana; por eso es una capa `position: fixed` con
   z-index negativo: pinta toda la ventana, queda por encima del color de
   fondo del body y por debajo de todo el contenido, y el scroll no la
   mueve. La banda blanca de la cabecera (.header-menu::before) sigue
   tapandola arriba, que es lo que se busca.
   --------------------------------------------------------------------- */
body.ui-dash .ft-fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #fafaf6;
  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 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1000px 640px at 0% 0%, rgba(136, 162, 49, 0.10), transparent 60%),
    radial-gradient(720px 520px at 100% 100%, rgba(245, 181, 31, 0.07), transparent 60%),
    linear-gradient(180deg, #fafaf6 0%, #f5f7ef 100%);
}

body.ui-dash .ft-fondo-shape {
  position: absolute;
  display: block;
}

body.ui-dash .ft-fondo-shape--a {
  top: -160px;
  right: -140px;
  width: 560px;
  height: 500px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: rgba(136, 162, 49, 0.06);
  transform: rotate(14deg);
}

body.ui-dash .ft-fondo-shape--b {
  left: 36%;
  bottom: -110px;
  width: 240px;
  height: 220px;
  border-radius: 40% 60% 52% 48% / 58% 44% 56% 42%;
  border: 2px solid rgba(228, 64, 122, 0.08);
  transform: rotate(-16deg);
}

@media (max-width: 767.98px) {
  body.ui-dash .ft-fondo-shape--a {
    top: -110px;
    right: -170px;
    width: 380px;
    height: 340px;
  }
}

/* ---------------------------------------------------------------------
   36. Modales de aviso del simulador (sistema/index.php)
   #modalerror (fallo al subir los archivos) y #modalerror1 (solicitud
   pendiente) eran el modal de Bootstrap en crudo: esquinas de 6px, un
   triangulo de Font Awesome de 76px y un boton verde pegado al borde
   inferior de lado a lado. Se reescriben con el mismo lenguaje de marca
   del aviso de radicacion (seccion 34): tarjeta de 28px con el lavado de
   color, insignia de icono, chip de puntos del logo y titulo en
   Comfortaa. Los tokens `--ft-*` viven en `.ft-login` / `.ft-radicada`,
   asi que se repiten aqui para que el bloque funcione dentro del modal.
   Los id y las clases del marcado (.title_error, .boton-cerrar) se
   conservan porque el JS y global.css los siguen usando.
   --------------------------------------------------------------------- */
body.ui-dash .modal-dialog.ft-modal-aviso {
  --ft-green: #88a231;
  --ft-green-deep: #5a7215;
  --ft-ink: #26300c;
  --ft-ink-2: #4a5332;
  --ft-muted: #6b705c;
  --ft-sun: #f5b51f;
  --ft-coral: #ef7d2d;
  --ft-rose: #e4407a;
  --ft-sky: #27a3db;
  --ft-display: "Comfortaa Bold", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ft-spring: cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  align-items: center;
  max-width: 470px;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

body.ui-dash .ft-modal-aviso .modal-content {
  overflow: hidden;
  background: #fff;
  background-image:
    radial-gradient(460px 280px at 100% 0%, rgba(136, 162, 49, 0.10), transparent 62%),
    radial-gradient(340px 240px at 0% 100%, rgba(245, 181, 31, 0.08), transparent 62%);
  border: 1px solid rgba(38, 48, 12, 0.07);
  border-radius: 28px;
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.03),
    0 4px 8px -2px rgba(38, 48, 12, 0.04),
    0 32px 60px -28px rgba(74, 94, 20, 0.35);
}

/* mancha suave detras de la insignia, como las .ft-login-shape del login */
body.ui-dash .ft-modal-aviso .modal-content::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: 260px;
  height: 230px;
  border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
  background: rgba(136, 162, 49, 0.08);
  transform: rotate(14deg);
  pointer-events: none;
}

/* el texto va alineado a la izquierda: el marcado trae `text-center` en
   el cuerpo y en bloques de varias lineas se leia peor */
body.ui-dash .ft-modal-aviso .modal-body {
  position: relative;
  z-index: 1;
  padding: 32px 32px 28px;
  text-align: left !important;
}

body.ui-dash .ft-modal-aviso .ft-modal-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 0 20px;
  border-radius: 19px;
  background: var(--ft-coral);
  box-shadow:
    0 1px 1px rgba(38, 48, 12, 0.08),
    0 14px 26px -12px rgba(239, 125, 45, 0.6);
  animation: ft-pop 700ms 80ms var(--ft-spring) both;
}

body.ui-dash .ft-modal-aviso .ft-modal-ico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ui-dash .ft-modal-aviso .title_error {
  display: block;
  max-width: 340px;
  margin: 14px 0 0;
  font-family: var(--ft-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ft-ink);
}

body.ui-dash .ft-modal-aviso .modal-body p {
  max-width: 360px;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ft-ink-2);
}

body.ui-dash .ft-modal-aviso .modal-body p a {
  color: var(--ft-green-deep) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* pie sin linea divisoria y boton en pastilla alineado a la derecha, en
   lugar de la barra verde de borde a borde */
body.ui-dash .ft-modal-aviso .modal-footer,
body.ui-dash .ft-modal-aviso .modal-footer.p-0 {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  padding: 0 32px 28px !important;
  border-top: none;
}

body.ui-dash .ft-modal-aviso .boton-cerrar {
  width: auto;
  min-width: 150px;
  padding: 12px 26px;
  border-radius: var(--ui-pill);
  background: var(--ft-green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(106, 132, 29, 0.8);
  transition: background-color 140ms ease, transform 140ms ease;
}

body.ui-dash .ft-modal-aviso .boton-cerrar:hover,
body.ui-dash .ft-modal-aviso .boton-cerrar:focus-visible {
  background: var(--ft-green-deep);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {
  body.ui-dash .ft-modal-aviso .modal-content {
    border-radius: 24px;
  }

  body.ui-dash .ft-modal-aviso .modal-body {
    padding: 26px 22px 22px;
  }

  body.ui-dash .ft-modal-aviso .title_error {
    font-size: 23px;
  }

  body.ui-dash .ft-modal-aviso .modal-footer,
  body.ui-dash .ft-modal-aviso .modal-footer.p-0 {
    padding: 0 22px 22px !important;
  }

  body.ui-dash .ft-modal-aviso .boton-cerrar {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Cabecera de las pantallas de aprobación (comite, gerencia).
   Antes: el <h3.titulo> y un .titulo-seccion con icono apilados, dos
   titulos compitiendo. Ahora el numero es el titulo y la etapa va como
   pill al lado, cerrado por una linea fina.
   --------------------------------------------------------------------- */
body.ui-dash .ui-ap-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 22px 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-border);
}

body.ui-dash [class*="col-"].ui-ap-cab > .titulo {
  margin: 0;
}

body.ui-dash .ui-ap-etapa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-line);
  border-radius: var(--ui-pill);
  color: var(--ui-accent-dark);
  font-size: 13px;
  font-weight: 600;
}

/* "La solicitud cambio de estado a..." */
body.ui-dash .ui-ap-estado {
  margin-bottom: 16px;
  padding: 14px 20px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--ui-r-sm);
  color: var(--ui-text-2);
  font-size: 14px;
}

/* Observaciones del asociado / analista en comite y gerencia */
body.ui-dash .ui-ap-nota {
  height: 100%;
  padding: 14px 18px;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--ui-r-sm);
}

body.ui-dash .ui-ap-nota-tit {
  margin-bottom: 6px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.ui-dash .ui-ap-nota-txt {
  color: var(--ui-text-2);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

/* Tablas que el analista pega en la observacion (p. ej. la de aprobadores
   copiada del formato). Traen anchos y altos en linea del editor (SI/NO/APL
   al 1-2%), a veces un <figure> de 1222px, y heredan el padding de
   `table[border]`: quedan aplastadas. Se ignoran esas medidas y la nota se
   desplaza en horizontal si no caben.
   .ap-nota-txt es la misma nota en page/analista. */
body.ui-dash .ui-ap-nota-txt,
body.ui-dash .ap-nota-txt {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* CKEditor envuelve la tabla en <figure class="table">: sin esto toma el
   borde y la sombra de `.table` y su `thead th` (gris claro, !important) */
body.ui-dash .ui-ap-nota-txt figure,
body.ui-dash .ap-nota-txt figure {
  width: auto !important;
  margin: 10px 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

body.ui-dash .ui-ap-nota-txt table,
body.ui-dash .ap-nota-txt table {
  width: 100% !important;
  height: auto !important;
  margin: 10px 0;
  border-radius: var(--ui-r-sm);
  box-shadow: none;
  font-size: 13px;
  word-break: normal;
}

body.ui-dash .ui-ap-nota-txt table td,
body.ui-dash .ui-ap-nota-txt table th,
body.ui-dash .ap-nota-txt table td,
body.ui-dash .ap-nota-txt table th {
  width: auto !important;
  height: auto !important;
  padding: 8px 10px !important;
  vertical-align: top;
}

/* El tamaño de letra del editor (16px) desentona con el resto de la nota */
body.ui-dash .ui-ap-nota-txt span[style*="font-size"],
body.ui-dash .ap-nota-txt span[style*="font-size"] {
  font-size: inherit !important;
}

/* Cabecera con el gris oscuro del formato original (--gray de administracion) */
body.ui-dash .ui-ap-nota-txt table th,
body.ui-dash .ap-nota-txt table th {
  background: #343a40 !important;
  color: #FFFFFF !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.ui-dash .ui-ap-nota-txt table div,
body.ui-dash .ap-nota-txt table div {
  margin: 0;
  color: inherit;
}