@charset "UTF-8";

.nav-home::before {
    content: "Inicio";
}
.nav-demando::before {
  content: "Cuadro de mando";
}
.nav-beneficiarios::before {
    content: "Liquidaciones beneficiarios";
}
.nav-co-inversores::before {
    content: "Liquidaciones co-inversores";
}
.nav-inversores::before {
    content: "Liquidaciones inversores";
}
.nav-operaciones-firma::before {
  content: "Operaciones firma";
}
.nav-operaciones-gestion::before {
  content: "Operaciones gestión";
}
.nav-per-mens::before {
  content: "Periodificaciones mensuales";
}
.nav-carga::before {
  content: "Carga de datos";
}
.nav-settings::before {
    content: "Ajustes";
}
.nav-help::before {
    content: "Ayuda";
}

.nav-logout::before {
    content: "Salida";
}
.nav-login::before {
    content: "Ingresa con tu cuenta";
}

/* ---- FORMS ---- */
input[readonly] {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #888;
  cursor: not-allowed;
}

/* Applied to input to have uniform measures*/
.uniform-input {
  width: 100%;          /* Makes all inputs the same width */
  min-width: 200px;     /* Ensures a minimum width */
  max-width: 600px;     /* Limits the maximum width */
}

/* Classes to show an informative datum */
.d-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.dots-line {
  border-bottom: 1px dotted #000; /* SINGLE LINE FOR BOTH */
  padding-bottom: 3px; /* adjust based on font size */
}

.label-with-dots {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  color: gray;
  font-size: 12px;
}

.datum {
  white-space: nowrap;
  font-size: 12px;
  color: gray;
  /* No border-bottom here! */
  background-color: #fff; /* optional if background differs */
}


/* ----    LOADERS    ----*/

/* Usefull to block a space for loaders and element */
.loading-element-container {
  width: 400px;
}

/* https://cssloaders.github.io/ */
.loader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    box-sizing: border-box;
    animation: shadowPulse 2s linear infinite;
  }

  @keyframes shadowPulse {
    33% {
      background: #FFF;
      box-shadow: -24px 0 #EA5916, 24px 0 #FFF;
    }
    66% {
      background: #EA5916;
      box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }
    100% {
      background: #FFF;
      box-shadow: -24px 0 #FFF, 24px 0 #EA5916;
    }
  }

/* card with elements loader */
.loader-data {
    width: 360px;
    height: 100px;
    display: block;
    background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
    background-repeat: no-repeat;
    background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
    background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
  }

  @keyframes animloader {
    0% {
      background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }
    100% {
      background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
    }
  }

/**
 * Button or element loader
 * Credit: https://css-loaders.com/dots/
*/
.loader-button {
  width: 15px;
  height: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
  0%  { box-shadow: 20px 0 #EA5916, -20px 0 #EA59162E; background: #EA5916; }
  33% { box-shadow: 20px 0 #EA5916, -20px 0 #EA59162E; background: #EA59162E; }
  66% { box-shadow: 20px 0 #EA59162E, -20px 0 #EA5916; background: #EA59162E; }
  100%{ box-shadow: 20px 0 #EA59162E, -20px 0 #EA5916; background: #EA5916; }
}

/**
 Embedded main PowerBI
*/
#main_reports {
  width: 100%;
  height: 100vh;
  display: flex;
}

/**
  Collapse animation
*/
#side-nav {
  transition: all 0.3s ease-in-out;
}

#side-nav.collapsing {
  width: 0;
}

#side-nav.collapse {
  display: none;
}


/* Button style */
.btn-toggle {
  position: fixed;
  top: 60px;
  left: 0px;
  z-index: 1050;
  border-width: 0px;
}
.btn-toggle.collapsed {
    top: 60px;
    left: 0px;
}

/* Icon inside button */
.btn-toggle i {
  margin: 0;
}

/* Add hover effect to the button */
.btn-toggle:hover {
  background-color: #0056b3;
}

/* Button position for medium screens (md) and larger */
@media (min-width: 768px) {
  .btn-toggle {
    top: 60px;
    left: 0px;
  }
  .btn-toggle.collapsed {
    top: 60px;
    left: 0px;
  }
}

/* Button position for large screens (lg) and larger */
@media (min-width: 992px) {
  .btn-toggle {
    top: 60px;
    left: 0px;
  }
  .btn-toggle.collapsed {
    top: 60px;
    left: 0px;
  }
}

/* Button position for smaller screens (sm)
*  Here the native BS navbar togler is visible
*/
@media (max-width: 576px) {
  .btn-toggle {
      visibility: hidden;
  }
  .btn-toggle.collapsed {
    visibility: hidden;
  }
}

/*
* Dropdown menu
*/
.bg-selected {
  background-color: #ea591629;
}

/* Seleccionador semestre en liquidaciones - INICIO */
/* Color semestres */
.semestre-01 {
  color: #3C1152;
  background-color: rgba(60, 17, 82, 0.04);  /* morado rebajado */
}

.semestre-02 {
  color: #F26522;
  background-color: rgba(242, 101, 34, 0.04);  /* naranja rebajado */
}

/* Alternancia entre años, si se quiere más separación */
.optgroup-odd option {
  font-weight: 500;
}

.optgroup-even option {
  font-style: italic;
}

/* Limita el tamaño del dropdown para evitar scroll infinito */
.styled-select {
  max-height: 300px;
  overflow-y: auto;
}
/* Seleccionador semestre en liquidaciones - FIN */


.login-error {
    background-color: #ffe5e5;
    color: #d8000c;
    border: 1px solid #d8000c;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== Modificación de estados y aportaciones ===== */
/* Resalta modificaciones hechas en tabla Plan disposiciones minuta ejemplo: amarillo suave */
.cell-changed {
  background-color: #fff3cd !important;
  transition: background-color .25s ease;
}

#modaport { --mp-field-width: 280px; }

@media (min-width: 768px) {
  #modaport .row > .col-md-auto { width: var(--mp-field-width); }
  #modaport .row > .col-md-auto .form-control,
  #modaport .row > .col-md-auto .input-group,
  #modaport .row > .col-md-auto .dropdown-host,
  #modaport .row > .col-md-auto .dropdown { width: 100%; max-width: 100%; }
  #modaport .row > .col-md-auto .input-group[style] { max-width: unset !important; }
}

@media (max-width: 767.98px) {
  #modaport .row > .col-md-auto { width: 100%; }
}

/* --- Modificación de aportaciones: tamaños y no saltos --- */
/* ########################################################################################################## */
#modaport { --mp-field-width: 280px; }

/* Todos los controles (inputs y dropdowns) con el mismo ancho */
#modaport .row > .col-md-auto { width: var(--mp-field-width); }
#modaport .row > .col-md-auto .form-control,
#modaport .row > .col-md-auto .input-group { width: 100%; max-width: 100%; }

/* Evita que el € o % baje de línea en los input-group */
#modaport .input-group { flex-wrap: nowrap; }
#modaport .input-group .form-control { min-width: 0; } /* el input no empuja al addon */
#modaport .input-group .input-group-text { flex: 0 0 auto; }

/* Separador y respiración entre bloques condicionales */
#modaport .form-section-start {
  margin-top: 28px;     /* espacio antes del bloque */
  padding-top: 16px;    /* espacio dentro del bloque */
  border-top: 1px solid #e9ecef; /* línea divisoria sutil */
}

/* inputs nativos */
.is-invalid {
  border-color: var(--bs-danger) !important;
}

/* tu dropdown custom */
.dropdown-invalid {
  outline: 2px solid rgba(220, 53, 69, 0.35);
  border-radius: .375rem;
}

/* Bloquea interacción (clic, foco) y da feedback visual */
.is-disabled { opacity: .6; cursor: not-allowed; }




/* ===== Regularización provisión: estilos locales ===== */
/* ########################################################################################################## */
/* ===== Regularización provisión — versión compacta ===== */
#regularizacion-tab-pane{
  /* tamaños y espaciados editables */
  --reg-field-width: 180px;          /* ancho de cada input (antes 240) */
  --gap-col: 40px;                   /* espacio entre columnas */
  --grid-cols: 5;
  --grid-width: calc(var(--reg-field-width)*var(--grid-cols) + var(--gap-col)*(var(--grid-cols)-1));
  --block-gap: 4rem;                 /* separación entre bloques */
  --ctrl-h: 28px;                    /* altura de inputs */
  --op-dropdown-width: 560px;        /* ancho del menú de Operación */
}

/* Bloques (línea corta, más espacio) */
#regularizacion-tab-pane .section{
  width: 100%;
  max-width: var(--grid-width);      /* la línea nunca es “infinita” */
  margin-top: var(--block-gap);
}

/* Títulos SIEMPRE en negro, sin adornos naranjas */
#regularizacion-tab-pane .section-title{
  color:#111827 !important;
  margin-bottom: 1rem;
  border:0 !important; box-shadow:none !important;
}
#regularizacion-tab-pane .section-title::before,
#regularizacion-tab-pane .section-title::after{ content:none !important; }

/* Rejilla de inputs: 5 → 4 → 3 → 2 según ancho, alineada a la izquierda */
#regularizacion-tab-pane .pf-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--reg-field-width), var(--reg-field-width)));
  gap: 12px var(--gap-col);
  justify-content: flex-start;
  align-items: end;
}
#regularizacion-tab-pane .pf-cell{ width: var(--reg-field-width); }
#regularizacion-tab-pane .pf-cell label.small{ display:block; margin-bottom:.25rem; white-space:nowrap; }
#regularizacion-tab-pane .pf-placeholder{ visibility:hidden; }   /* hueco “Provisión extra” */

/* Inputs más pequeños y compactos */
#regularizacion-tab-pane .form-control,
#regularizacion-tab-pane .input-group-text{
  height: var(--ctrl-h);
  padding: .20rem .45rem;
  font-size: .8125rem; /* ~13px */
}
#regularizacion-tab-pane .input-group{ flex-wrap: nowrap; }
#regularizacion-tab-pane .input-group .form-control{ min-width:0; }
#regularizacion-tab-pane .input-group .input-group-text{ flex:0 0 auto; }

/* Alinear Operación / Copia simple / Inscrita con la rejilla (empiezan en col 3) */
#regularizacion-tab-pane .row.align-items-center,
#regularizacion-tab-pane .row.mt-3.align-items-center{
  max-width: var(--grid-width);
}
#regularizacion-tab-pane{ --label-col-w: 180px; } /* ancho etiqueta */

#regularizacion-tab-pane .row.align-items-center,
#regularizacion-tab-pane .row.mt-3.align-items-center{
  max-width: calc(var(--label-col-w) + var(--gap-col) + var(--reg-field-width));
  margin-left: 0;
}

#regularizacion-tab-pane .row.align-items-center > .col-md-4,
#regularizacion-tab-pane .row.mt-3.align-items-center > .col-md-4{
  flex: 0 0 var(--label-col-w);
  width: var(--label-col-w);
  padding-right: var(--gap-col);
}

#regularizacion-tab-pane .row.align-items-center > .col-md-auto,
#regularizacion-tab-pane .row.mt-3.align-items-center > .col-md-auto{
  flex: 0 0 var(--reg-field-width);
  width: var(--reg-field-width);
}


/* Menú del dropdown de Operación, ancho cómodo */
#regularizacion-tab-pane #operacionesRegularizacion-dropdown .dropdown-menu,
#regularizacion-tab-pane #operacionesRegularizacion-dropdown .notifications-block-wrap{
  min-width: var(--op-dropdown-width) !important; /* 560px como pusiste */
}

/* Los otros dos selectores también con ancho consistente */
#regularizacion-tab-pane .dropdown-host{ width: var(--reg-field-width); }


/* Observaciones: máximo 2 columnas y alineado a rejilla */
#regularizacion-tab-pane #sep_observaciones ~ .row{ max-width: var(--grid-width); }
#regularizacion-tab-pane #sep_observaciones ~ .row .col-md-6{
  flex:0 0 auto; width: calc(var(--reg-field-width)*2 + var(--gap-col));
}
#regularizacion-tab-pane #observaciones{ width:100%; }


/* === Etiquetas internas con el mismo estilo que Operación/Copia/Inscrita === */
/* Bootstrap: .fw-lighter + .mb-2 + .small */
#regularizacion-tab-pane .pf-grid label.small{
  font-size: .875rem;         /* .small */
  font-weight: 300;           /* .fw-lighter */
  margin-bottom: .5rem;       /* .mb-2 */
  color: #111827;             /* mismo tono de texto que las superiores */
  letter-spacing: .01em;      /* sutil, como etiqueta */
}






/* === Más espacio entre las etiquetas y sus valores (solo en las 3 filas de cabecera) === */
#regularizacion-tab-pane{
  --label-col-w: 320px;   /* ancho de la columna de etiqueta (aumenta para más separación) */
  --label-gap: 24px;      /* hueco extra entre etiqueta y control */
}

/* Limita el ancho total del conjunto etiqueta+control */
#regularizacion-tab-pane .row.align-items-center,
#regularizacion-tab-pane .row.mt-3.align-items-center{
  max-width: calc(var(--label-col-w) + var(--label-gap) + var(--reg-field-width));
}

/* Columna de etiqueta (izquierda) */
#regularizacion-tab-pane .row.align-items-center > .col-md-4,
#regularizacion-tab-pane .row.mt-3.align-items-center > .col-md-4{
  flex: 0 0 var(--label-col-w) !important;
  width: var(--label-col-w) !important;
  padding-right: var(--label-gap) !important;  /* ← separación visible */
}

/* Columna del control (derecha) */
#regularizacion-tab-pane .row.align-items-center > .col-md-auto,
#regularizacion-tab-pane .row.mt-3.align-items-center > .col-md-auto{
  flex: 0 0 var(--reg-field-width) !important;
  width: var(--reg-field-width) !important;
}

/* El dropdown de Operación no debe añadir padding a la izquierda */
#regularizacion-tab-pane #operacionesRegularizacion-dropdown{
  padding-left: 0 !important;     /* neutraliza .ps-3 */
  width: var(--reg-field-width) !important;
}



/* === ADELANTEO AMORTIZACION (INSERTED ROW) === */
/* fila insertada (A1 preview) */
.row-inserted {
  outline: 2px solid #ffa94d;
  background-color: #fff3cd !important;
  transition: background-color .25s ease;}       /* borde naranja a la fila A1 */

.form-control.is-invalid {
  border-color: #dc3545 !important;
  padding-right: calc(1.5em + .75rem);
}




/* DataTables: permitir salto de línea en celdas y evitar que ensanche la tabla */
table.dataTable td,
table.dataTable th {
  white-space: normal !important;   /* anula el nowrap de DataTables */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* por si alguna clase propia pone nowrap */
.account-table td,
.account-table th {
  white-space: normal !important;
}