/* IPERC_TOOLBAR_FIT_COMPLETO_V333
   Reajuste integral y exclusivamente visual de la barra "Ingresar datos".
   Objetivos:
   - Evitar que cualquier seccion o valor quede recortado por el ancho real del area IPERC.
   - Hacer que la cinta se redistribuya por filas usando flex-wrap, sin scroll horizontal.
   - Estandarizar tipografia, alturas, separaciones y anchos minimos de todos los grupos.
   - Garantizar visibilidad completa de IPE, ICE, IPR, IER e IS en Evaluacion Inicial/Residual.
   - No modifica IDs, eventos, valores, formulas, min/max ni logica funcional.
*/

/* La cinta deja de depender de breakpoints del viewport y se ajusta al ancho REAL disponible. */
#toolbar-insertar.iperc-toolbar-clean-v166:not(.hidden) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 5px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

/* Geometria uniforme de todas las tarjetas del ribbon. */
#toolbar-insertar.iperc-toolbar-clean-v166 > .iperc-insert-section {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  min-width: 0 !important;
  padding: 5px 6px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Anchos funcionales minimos. Si no caben, el grupo pasa completo a la siguiente fila. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-process {
  flex: 4 1 380px !important;
  min-width: min(100%, 360px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-risk {
  flex: 4 1 360px !important;
  min-width: min(100%, 340px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-initial {
  flex: 2 1 215px !important;
  min-width: min(100%, 205px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-controls {
  flex: 3 1 300px !important;
  min-width: min(100%, 285px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-affects {
  flex: 2 1 185px !important;
  min-width: min(100%, 175px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-residual {
  flex: 2 1 215px !important;
  min-width: min(100%, 205px) !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-action {
  flex: 1 1 125px !important;
  min-width: min(100%, 120px) !important;
}

/* Escala tipografica estandar para toda la cinta. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-insert-field > span:first-child,
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-score-grid span,
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-controls-grid span,
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-afecta-label-v166 {
  font-size: 8px !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
}

#toolbar-insertar.iperc-toolbar-clean-v166 input:not([type="hidden"]):not([type="checkbox"]),
#toolbar-insertar.iperc-toolbar-clean-v166 select,
#toolbar-insertar.iperc-toolbar-clean-v166 textarea {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  font-size: 9.5px !important;
  line-height: 1.05 !important;
  padding: 2px 5px !important;
}

#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-section-caption {
  margin-top: 2px !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Seccion 1: compacta, sin perder ningun campo. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-process-body {
  grid-template-columns: minmax(92px, 1.2fr) minmax(78px, 1fr) minmax(92px, 1.2fr) 48px !important;
  grid-template-rows: 31px 29px !important;
  gap: 3px 4px !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-new-block-actions {
  gap: 4px !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-new-block-actions > button,
#toolbar-insertar.iperc-toolbar-clean-v166 #iperc-modo-edicion-v310 {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 5px !important;
  gap: 3px !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
}

/* Seccion 2: mantiene sus cinco campos en dos filas compactas. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-risk-body {
  grid-template-rows: 31px 31px !important;
  gap: 3px 4px !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-hazard-input {
  grid-template-columns: minmax(0, 1fr) 26px !important;
  gap: 3px !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-hazard-input > button {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

/* Secciones 3 y Residual: los cinco criterios siempre visibles. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-initial .iperc-score-grid,
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-residual .iperc-score-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(28px, 1fr)) 1px minmax(28px, 1fr) !important;
  column-gap: 3px !important;
  row-gap: 1px !important;
  min-width: 0 !important;
  min-height: 53px !important;
  padding: 4px 3px !important;
  align-items: center !important;
  align-content: center !important;
  overflow: visible !important;
}

#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-initial .iperc-score-grid > div:not(.iperc-score-separator),
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-residual .iperc-score-grid > div:not(.iperc-score-separator) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-initial .iperc-score-grid input[type="number"],
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-residual .iperc-score-grid input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 1px auto 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 24px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  color: #0f172a !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* El control nativo de incremento no puede tapar el numero dentro de cajas compactas. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-score-grid input[type="number"]::-webkit-inner-spin-button,
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-score-grid input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-score-separator {
  height: 31px !important;
}

/* Seccion 4: cinco controles con misma escala que el resto del ribbon. */
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-controls-grid {
  grid-template-columns: repeat(5, minmax(46px, 1fr)) !important;
  gap: 4px !important;
  min-height: 53px !important;
  padding: 4px !important;
}
#toolbar-insertar.iperc-toolbar-clean-v166 .iperc-controls-grid input {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  font-size: 9px !important;
  padding: 2px 4px !important;
}

/* Seccion Afecta a: misma altura y escala visual. */
#form-afectaA-toolbar-v166.iperc-afecta-toolbar-v166 {
  gap: 3px !important;
}
#form-afectaA-direct-v188 {
  gap: 3px !important;
}
#form-afectaA-toolbar-v166 .iperc-afecta-direct-option-v188 {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 1px 4px !important;
  gap: 3px !important;
  font-size: 8px !important;
}
#form-afectaA-toolbar-v166 .iperc-afecta-direct-option-v188 input {
  width: 11px !important;
  min-width: 11px !important;
  max-width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
}

/* Accion final con proporcion compatible con la nueva escala. */
#toolbar-insertar.iperc-toolbar-clean-v166 #btn-gardar {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 5px 6px !important;
  font-size: 9.5px !important;
}

/* El contenedor externo debe crecer con el numero real de filas del ribbon. */
body.iperc-toolbar-clean-v166-active .bg-slate-100.border-b.border-slate-300:has(#toolbar-insertar) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* En anchos estrechos los grupos grandes ocupan fila completa, sin comprimir contenidos. */
@media (max-width: 760px) {
  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-process,
  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-risk,
  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-controls {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-initial,
  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-residual,
  #toolbar-insertar.iperc-toolbar-clean-v166 .iperc-grid-affects {
    flex: 1 1 205px !important;
  }
}

@media (max-width: 470px) {
  #toolbar-insertar.iperc-toolbar-clean-v166 > .iperc-insert-section {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
}
