@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  color: #000; /* Azul profundo tipo Bancolombia */
  background-color: #f8f9fa;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td .focused,
.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td.range-start,
.datepicker table tr td.range-end {
  background: #666cff !important;
  color: #fff !important;
}

.datepicker table tr td.range,
.datepicker table tr td.range.highlighted,
.datepicker table tr td.range.today {
  color: #666cff !important;
  background: #ededff !important;
}

.datepicker table tr td.range.focused,
.datepicker table tr td.range.highlighted.focused,
.datepicker table tr td.range.today.focused {
  background: #ceceff !important;
}

.datepicker table tr td.range.disabled,
.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.today.disabled {
  background: rgba(237, 237, 255, 0.5) !important;
  color: rgba(102, 108, 255, 0.5) !important;
}

.datepicker table tr td.today:not(.active),
.datepicker table tr td.today:not(.active):hover {
  color: #666cff;
  background-color: #e7e7ff;
}

.flatpickr-day.today,
.flatpickr-day.today:hover {
  color: #666cff !important;
  border-color: #e7e7ff;
  background-color: #e7e7ff !important;
}

.flatpickr-day.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
  color: #666cff !important;
  background: #ededff !important;
  border-color: #ededff !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.week.selected {
  color: #fff !important;
  background: #666cff !important;
  border-color: #666cff !important;
}

.daterangepicker td.active:not(.off) {
  background: #666cff !important;
  color: #fff;
}

.daterangepicker .start-date:not(.end-date):not(.off),
.daterangepicker .end-date:not(.start-date):not(.off) {
  background-color: #666cff;
  color: #fff;
  border: 0 !important;
}

.daterangepicker .start-date:not(.end-date):not(.off):hover,
.daterangepicker .end-date:not(.start-date):not(.off):hover {
  background-color: #666cff !important;
}

.daterangepicker .input-mini.active {
  border-color: #666cff !important;
}

.daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off) {
  color: #666cff !important;
  background-color: #ededff !important;
}

.ranges li.active {
  color: #666cff !important;
  background-color: #e7e7ff !important;
}

li.ui-timepicker-selected,
.ui-timepicker-list .ui-timepicker-selected:hover {
  color: #fff !important;
  background: #666cff !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button:focus,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #666cff !important;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #666cff !important;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #666cff !important;
}

.tt-suggestion:active,
.tt-cursor {
  background: #666cff !important;
  color: #fff !important;
}

.dropzone.dz-drag-hover {
  border-color: #666cff !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination.swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background: #666cff !important;
}

.sk-primary.sk-plane,
.sk-primary .sk-chase-dot:before,
.sk-primary .sk-bounce-dot,
.sk-primary .sk-wave-rect,
.sk-primary.sk-pulse,
.sk-primary .sk-swing-dot,
.sk-primary .sk-circle-dot:before,
.sk-primary .sk-circle-fade-dot:before,
.sk-primary .sk-grid-cube,
.sk-primary .sk-fold-cube:before {
  background-color: #666cff;
}

.plyr input[type="range"]::-ms-fill-lower {
  background: #666cff !important;
}

.plyr input[type="range"]:active::-webkit-slider-thumb {
  background: #666cff !important;
}
.plyr input[type="range"]:active::-moz-range-thumb {
  background: #666cff !important;
}
.plyr input[type="range"]:active::-ms-thumb {
  background: #666cff !important;
}

.flatpickr-calendar {
  box-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
  background-color: #fff;
  z-index: 1;
}

.flatpickr-day {
  color: #3b4056;
  border-radius: 50rem;
}

#ul-horizontal-nav .active {
  background-color: #2196f3 !important;
}

#ul-horizontal-nav li.active a span {
  color: #ffffff !important;
}

#ul-horizontal-nav li.active a i {
  color: #ffffff;
}

#exportar-rips-form {
  /* border: 2px solid #2196f3;
  border-radius: 5px;
  border-style: double; */
  /* border-radius: 5px;
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2), 0 6px 20px rgba(33, 150, 243, 0.19); */
}

#ul-horizontal-nav li[data-menu]:not(form li[data-menu]) {
  /* border: 2px solid #2196f3;
  border-radius: 5px;
  border-style: double; */
  /* border-radius: 5px;
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2), 0 6px 20px rgba(33, 150, 243, 0.19); */
}

/* 1) “Variables” del tema: NO en :root; sólo dentro del modal */
/* ===== Iconos a la izquierda de cada control ===== */
:root {
  --fe-icon-size: 22px; /* tamaño del ícono */
  --fe-icon-left: 12px; /* sangría izquierda */
  --fe-icon-gap: 10px; /* espacio entre ícono y texto */
  --fe-icon-pad: calc(
    var(--fe-icon-left) + var(--fe-icon-size) + var(--fe-icon-gap)
  );
  --surface-1: #f7f7f8; /* fondos muy suaves */
}

.fe-theme {
  --bc-blue: #0033a0; /* primario */
  --bc-blue-600: #00257a;
  --bc-cyan: #06b6d4;
  --surface: #ffffff;
  --surface-2: #f6f8fb; /* cards/inputs */
  --ink: #1f2937; /* texto */
  --ink-soft: #475569; /* texto suave */
  --line: #e5e7eb; /* borde sutil */
  --shadow: 0 10px 30px rgba(18, 38, 63, 0.06);
  --coorporativo-1: #353537; /* botones oscuros */
}

.fe-modal {
  /* paleta corporativa, scopeada */
  --bc-blue: #0033a0;
  --bc-blue-600: #00257a;
  --bc-ink: #2c2a29; /* trazo / líneas */
  --bc-ink-soft: #4b4b4b; /* texto suave */
  --bc-surface: #ffffff; /* fondo tarjetas/campos */
  --bc-surface-2: #f6f8fb; /* fondos suaves */
  --surface-1: #f7f7f8; /* fondos muy suaves */
  --bc-line: #e6e6e6; /* líneas sutiles */
  --bc-shadow: 0 10px 30px rgba(18, 38, 63, 0.06);
}

/* Fullscreen Modal */
.modal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f7f9fa;
  z-index: 9999;
  overflow-y: auto;
  font-family: "Inter", sans-serif;
  padding: 2rem;
}

.modal-content-custom {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-left: 5px solid #353537;
  border-right: 5px solid #353537;
}

.modal-header h4 {
  font-size: 1.8rem;
  color: #353537;
  margin-bottom: 1.5rem;
}

.switch-section {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.switch-btn {
  padding: 0.8rem 1.4rem;
  border-radius: 12px;
  border: 2px solid #006fbf;
  background: white;
  color: #006fbf;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.switch-btn.active {
  background: #006fbf;
  color: white;
  border-color: #004c85;
}

.switch-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 111, 191, 0.2);
}

.no-scroll {
  overflow: hidden;
}

.cerrar-modal-btn {
  position: absolute;
  top: 1rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #003057;
  cursor: pointer;
}

.cerrar-modal-btn:hover {
  color: #006fbf;
}

.boton-corporativo {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(to bottom right, #353537, #1f1f1f);
  padding: 12px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: none;
}

.boton-corporativo:hover {
  transform: scale(1.03);
  background: linear-gradient(to bottom right, #444446, #1a1a1a);
}

.boton-corporativo.activo {
  box-shadow: 0 0 0 3px #0057e7;
}

/* Específicos por tipo */
.btn-recaudo {
  background: linear-gradient(to bottom right, #0022aa, #0033cc);
}
.btn-cufe {
  background: linear-gradient(to bottom right, #ffffff, #eaeaea);
  color: #0033a0;
}
.btn-reporte {
  background: linear-gradient(to bottom right, #eef3f8, #ccd5e0);
  color: #333;
}
.btn-advertencia {
  background: linear-gradient(to bottom right, #ff4c4c, #c53030);
}

.sub-boton {
  margin: 8px;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  background: linear-gradient(to bottom right, #353537, #1c1c1c);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.botonera-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}
.btn-nivel1,
.btn-nivel2 {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  border: 2px solid transparent;
  background: linear-gradient(145deg, #eef1f5, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;

  /* color: var(--bc-blue); */
  /* background: linear-gradient(180deg, var(--surface), var(--surface-2)); */
  /* border: 1px solid var(--line); */
  /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); */
}

.btn-nivel1:hover,
.btn-nivel2:hover {
  background: linear-gradient(to right, #3b82f6, #06b6d4);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  filter: brightness(1.05);
}

.btn-nivel1.activo,
.btn-nivel2.activo {
  background: linear-gradient(180deg, #0a57e6, #0033a0);
  border-color: #0b49c1;
  color: #fff !important;
  box-shadow:
    0 12px 26px rgba(0, 51, 160, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

/* Asegura blanco también para cualquier icono/hijo dentro del botón activo */
.fe-theme .btn-nivel1.activo *,
.fe-theme .btn-nivel2.activo * {
  color: #fff !important;
}

/* --------------------------------------------------------- */
.tabla-section {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(18, 38, 63, 0.06);
  margin-bottom: 20px;
}
/* ---------- Form Bancolombia-like ---------- */
.formulario-section {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(18, 38, 63, 0.06);
  margin-bottom: 20px;
}
.formulario-section .form-group {
  margin-bottom: 14px;
}
.formulario-section label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
/* .formulario-section input[type="text"],
.formulario-section input[type="date"],
.formulario-section input[type="number"] {
  width: 100%;
  background: #2a2a2b;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 10px;
  outline: 0;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08);
} */
.formulario-section input:focus {
  box-shadow: 0 0 0 3px rgba(0, 51, 160, 0.35);
}
.form-group-grouped {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
}
.fieldset-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin: 12px 0;
  padding: 12px 12px 6px;
}
.fieldset-box legend {
  padding: 0 8px;
  color: #cfe3ff;
  font-weight: 700;
}

/* Fondo blanco en el dropdown */
.ss-content {
  background: #fff !important;
  border-radius: 10px;
  border: 1px solid #2c2a29 !important;
}

/* Opciones con fondo blanco */
.ss-content .ss-list .ss-option {
  background: #fff !important;
  color: #2c2a29 !important;
}

/* Hover en opciones */
.ss-content .ss-list .ss-option:hover {
  background: #f2f2f2 !important;
}

/* Opción seleccionada con color corporativo */
.ss-content .ss-list .ss-option.ss-selected {
  background: #2c2a29 !important;
  color: #fff !important;
}

/* Input principal (select cerrado) */
/* .ss-main {
  border: 1px solid #2c2a29 !important;
  background: #fff !important;
  color: #2c2a29 !important;
  border-radius: 6px;
} */

/* Botón ❌ (clear option) */
/* .ss-main .ss-deselect {
  color: #2c2a29 !important;
  font-size: 16px;
} */

/* Items */
.item-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px 140px 120px 44px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.item-row input {
  width: 100%;
}
.item-remove {
  background: #ff4c4c;
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
#add-item {
  background: #0033a0;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
#add-item:hover {
  filter: brightness(1.08);
}

/* Submit */
.btn-submit {
  background: #0033a0;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 51, 160, 0.35);
  transition: transform 0.15s ease;
}
.btn-submit:hover {
  transform: translateY(-1px);
}

/* Título de sección */
.fe-theme .fe-section-title {
  font-weight: 800;
  color: #0033a0;
  font-size: 1.05rem;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Card de sección */
.fe-theme .fe-card {
  background: linear-gradient(180deg, #fff, #f6f8fb);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

/* Grillas */
.fe-theme .fe-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fe-theme .fe-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.fe-theme .fe-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px) {
  .fe-theme .fe-grid-2,
  .fe-theme .fe-grid-3,
  .fe-theme .fe-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Inputs */
/* .fe-theme .fe-field {
  margin-bottom: 10px;
} */
.fe-theme .fe-label {
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 6px;
  display: block;
}
.fe-theme .fe-input,
.fe-theme .fe-input[type="date"],
.fe-theme .fe-input[type="number"] {
  width: 100%;
  background: #f6f8fb;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  outline: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}
.fe-theme .fe-input::placeholder {
  color: #94a3b8;
}
.fe-theme .fe-input:focus {
  border-color: #353537 !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 160, 0.18) !important;
}

/* Readonly “solo consulta” */
.fe-theme .fe-input[readonly] {
  background: #eef2f7;
  color: #475569;
}

/* SlimSelect claro
.fe-theme .ss-main {
  background: #f6f8fb;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 10px;
}
.fe-theme .ss-content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.fe-theme .ss-option {
  color: #1f2937;
}
.fe-theme .ss-option:hover {
  background: #eef3fb;
  color: #0033a0;
} */

/* Items */
.fe-theme .fe-items-header {
  display: grid;
  grid-template-columns: 140px 1fr 110px 140px 120px 48px;
  gap: 10px;
  padding: 6px 10px;
  color: #475569;
  font-weight: 700;
}
.fe-theme .fe-item-row {
  display: grid;
  grid-template-columns: 140px 1fr 110px 140px 120px 48px;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}
.fe-theme .fe-remove {
  background: #ff4c4c;
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.fe-theme .fe-add {
  background: #0033a0;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 51, 160, 0.25);
}
.fe-theme .fe-add:hover {
  filter: brightness(1.05);
}

/* Submit flotante */
.fe-theme .fe-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
.fe-theme .btn-submit {
  background: #0033a0;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 51, 160, 0.28);
}
.fe-theme .btn-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* =========================
   Facturación electrónica - Tema Bancolombia (SCOPED)
   Solo dentro del modal: .fe-modal
   ========================= */
.fe-modal {
  /* paleta corporativa, scopeada */
  --bc-blue: #0033a0;
  --bc-blue-600: #00257a;
  --bc-ink: #2c2a29; /* trazo / líneas */
  --bc-ink-soft: #4b4b4b; /* texto suave */
  --bc-surface: #ffffff; /* fondo tarjetas/campos */
  --bc-surface-2: #f6f8fb; /* fondos suaves */
  --bc-line: #e6e6e6; /* líneas sutiles */
  --bc-shadow: 0 10px 30px rgba(18, 38, 63, 0.06);
}

/* Fondo general del modal (suave) */
.fe-modal.modal-fullscreen {
  background: #f7f9fa;
}

/* “Tarjeta” interior del modal */
.fe-modal .modal-content-custom {
  background: var(--bc-surface);
  border-radius: 18px;
  box-shadow: var(--bc-shadow);
  border: 1px solid var(--bc-line);
  padding: 24px;
}

/* -------- Botoneras nivel 1 y 2 -------- */
.fe-modal .botonera-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.fe-modal .btn-nivel1,
.fe-modal .btn-nivel2 {
  background: linear-gradient(145deg, #ffffff, #f7f9fb);
  color: var(--bc-ink);
  border: 1px solid var(--bc-line);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.fe-modal .btn-nivel1:hover,
.fe-modal .btn-nivel2:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 51, 160, 0.15);
  border-color: var(--bc-blue);
}

/* Estado seleccionado: fondo azul, texto blanco bien legible */
.fe-modal .btn-nivel1.activo,
.fe-modal .btn-nivel2.activo {
  background: linear-gradient(135deg, var(--bc-blue), var(--bc-blue-600));
  color: #fff;
  border-color: var(--bc-blue-600);
  box-shadow: 0 8px 22px rgba(0, 51, 160, 0.25);
}

/* -------- Secciones (tarjetas claras) -------- */
.fe-modal .fe-section {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 14px;
  box-shadow: var(--bc-shadow);
  padding: 16px 16px 6px;
  margin: 16px 0;
}

.fe-modal .fe-section-title {
  display: flex;
  align-items: center; /* Alinea ícono y texto al centro vertical */
  gap: 0.5rem; /* Espaciado entre ícono y texto */
  background-color: #2c2a29; /* Fondo uniforme */
  color: #ffffff; /* Texto en blanco */
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px 6px 0 0; /* Bordes superiores redondeados */
  justify-content: flex-start;
}

/* -------- Campos estilo “material line” -------- */
.fe-modal .fe-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fe-modal .fe-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .fe-modal .fe-grid-2,
  .fe-modal .fe-grid-3 {
    grid-template-columns: 1fr;
  }
}

.fe-modal .fe-field {
  position: relative;
}

/* el ícono nunca debe bloquear el click ni quedar detrás */
.fe-field .fe-icon {
  position: absolute;
  left: var(--fe-icon-left);
  /* centrado vertical con respecto al control (lo ajustamos por JS también) */
  top: 50%;
  transform: translateY(-50%);
  width: var(--fe-icon-size);
  height: var(--fe-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fe-icon-size);
  line-height: 1;
  color: #6b7280; /* gris suave */
  pointer-events: none;
  z-index: 3;
}

/* inputs y textareas: dejar espacio para el ícono */
/* .fe-field .fe-input {
  padding-left: var(--fe-icon-pad) !important;
} */

/* el wrapper de textarea no debe recortar el ícono */
.fe-textarea-box {
  overflow: visible;
}

/* SlimSelect: aplicar padding a lo visible, no al <select> nativo */
.fe-field .ss-main {
  overflow: visible;
} /* evita ícono cortado */
.fe-field .ss-main .ss-single-selected {
  padding-left: var(--fe-icon-pad) !important;
}
.fe-field .ss-main .ss-search {
  padding-left: var(--fe-icon-pad) !important;
}

/* que la X y la flecha mantengan su sitio */
.fe-field .ss-main .ss-deselect,
.fe-field .ss-main .ss-arrow {
  right: 10px;
}

/* estados de foco: el ícono cambia un poco de color para mejor feedback */
.fe-field:has(.fe-input:focus),
.fe-field:has(.ss-main:focus-within) {
  --_icon-color: #374151;
}
.fe-field:has(.fe-input:focus) .fe-icon,
.fe-field:has(.ss-main:focus-within) .fe-icon {
  color: var(--_icon-color, #6b7280);
}

.fe-modal .fe-label {
  display: block;
  font-size: 0.86rem;
  color: var(--bc-ink-soft);
  margin: 4px 0 6px;
}

.fe-modal .fe-input,
.fe-modal .fe-textarea {
  width: 100%;
  background: var(--bc-surface);
  border: none;
  border-bottom: 2px solid var(--bc-ink);
  padding: 12px 12px 10px 40px; /* espacio para el icono */
  color: #111;
  border-radius: 0;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.fe-modal .fe-textarea {
  min-height: 96px;
  resize: vertical;
}

.fe-modal .fe-input:focus,
.fe-modal .fe-textarea:focus {
  border-bottom-color: var(--coorporativo-1) !important;
  box-shadow: inset 0 -2px 0 var(--coorporativo-1) !important;
  background: #fff;
}

/* Icono leading (Material Icons) */
.fe-modal .fe-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280; /* texto suave */
  font-size: 20px;
  pointer-events: none; /* <- importante para no bloquear el touch/click */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* Ubicación left/right */
.fe-icon.left {
  left: 12px;
}
.fe-icon.right {
  right: 12px;
}

/* Empujes para que el placeholder nunca quede debajo del ícono */
.fe-field.has-left-icon input,
.fe-field.has-left-icon textarea {
  padding-left: 44px !important;
}
.fe-field.has-right-icon input,
.fe-field.has-right-icon textarea {
  padding-right: 44px !important;
}

/* Ajuste equivalente para SlimSelect */
.fe-field.has-left-icon .ss-main {
  padding-left: 44px !important;
}
.fe-field.has-right-icon .ss-main {
  padding-right: 44px !important;
}

/* Mejora visual en foco (coherente con tu paleta) */
.fe-field:focus-within .fe-icon {
  color: #0033a0;
} /* azul corporativo */

/* ===== Textarea con contador ===== */
.fe-textarea-box {
  position: relative;
}

.fe-counter {
  position: absolute;
  right: 10px;
  bottom: 8px; /* para campos con caja (outlined) */
  font-size: 12px;
  color: #6b7280; /* gris suave */
  user-select: none;
  background: #fff;
  padding: 0 4px;
  z-index: 2;
  transition:
    color 0.2s ease,
    transform 0.15s ease;
}

/* Si el campo es subrayado (underlined), el contador va por debajo de la línea */
.fe-textarea-box.fe-underlined .fe-counter {
  bottom: -18px;
}

/* Colores de estado */
.fe-counter.warn {
  color: #f59e0b;
} /* ámbar cuando faltan pocos caracteres */
.fe-counter.over {
  color: #ef4444;
} /* rojo cuando supera el límite */

/* Barra base (línea) */
.fe-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px; /* justo sobre la línea de Material */
  height: 3px;
  background: #e5e7eb; /* gris base */
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
}

/* Relleno animado (progreso) */
.fe-progress .fe-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #16a34a; /* verde por defecto */
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
  will-change: width, background-color;
}

/* Efecto “shake” suave cuando se pasa el límite (opcional) */
.fe-counter.over {
  animation: fe-shake 0.25s linear 1;
}

@keyframes fe-shake {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-2px);
  }
  66% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Opcional: auto-resize suave del textarea */
.fe-textarea-auto {
  resize: none;
  overflow: hidden;
}

/* Estados */
.fe-modal .is-invalid {
  border-bottom-color: #e11d48 !important;
  box-shadow: inset 0 -2px 0 #e11d48 !important;
}
.fe-modal .fe-help {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 4px;
}

/* SlimSelect integrado al tema */
/* .fe-modal .ss-main {
  background: var(--bc-surface);
  border-radius: 0;
  border: none;
  border-bottom: 2px solid var(--bc-ink);
  padding: 10px 12px 10px 40px;
  color: #111;
}
.fe-modal .ss-main.ss-open-below {
  border-bottom-color: var(--bc-blue);
}
.fe-modal .ss-content {
  border: 1px solid var(--bc-line);
  border-radius: 10px;
  background: #fff;
}
.fe-modal .ss-option:hover {
  background: var(--bc-blue);
  color: #fff;
} */

/* Botón principal (enviar) */
.fe-modal .btn-submit {
  background: var(--bc-blue);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 51, 160, 0.25);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.fe-modal .btn-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.fe-modal .material-icons {
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

/* --- Estilos para el selector avanzado (Slim Select) --- */
.ss-main {
  border-radius: 0.5rem !important;
  border: 1px solid #e5e7eb !important;
  background-color: #f9fafb !important;
  padding: 0.25rem;
  min-height: 50px;
}
.ss-main .ss-multi-selected {
  padding: 0 !important;
}
.ss-main .ss-multi-selected .ss-values .ss-value {
  display: none;
}
.ss-main .ss-multi-selected .placeholder {
  color: #6b7280 !important;
  display: flex;
  align-items: center;
  font-style: normal !important;
  padding: 0.5rem 1rem;
}
.ss-main .ss-content .ss-search {
  padding: 0.75rem !important;
}
.ss-main .ss-content .ss-search input {
  height: 40px !important;
  border-radius: 0.375rem !important;
}
.ss-main .ss-content .ss-list .ss-option {
  padding: 0.75rem !important;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.option-emoji {
  font-size: 1.05rem;
  line-height: 1;
}
.option-image {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 24px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
.option-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.option-text .title {
  font-weight: 500;
  color: var(--bc-ink);
}
.option-text .description {
  font-size: 0.8rem;
  color: #6b7280;
}
.ss-optgroup-label {
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 0.75rem 0.5rem 0.75rem !important;
}

/* (ACTUALIZADO) Estilo de hover personalizado */
.ss-option.ss-highlighted,
.ss-option:hover {
  background-color: #fff1e6 !important;
  color: #1f2937 !important;
}
.ss-option.ss-highlighted .option-text .title,
.ss-option:hover .option-text .title,
.ss-option.ss-highlighted .option-text .description,
.ss-option:hover .option-text .description {
  color: #1f2937 !important;
}

/* Canvas para la firma */
.signature-canvas {
  border: 1px dashed #ccc;
  border-radius: 4px;
  cursor: crosshair;
  background-color: #fff;
  width: auto;
  height: auto;
}

.signature-container {
  text-align: center;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.signature-container h6 {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}

/* Mobile: el bloque ocupa casi todo el ancho */
@media (max-width: 600px) {
  .signature-canvas {
    /* height: clamp(140px, 28vh, 210px); */
    border-radius: 10px;
    width: auto;
    height: auto;
  }
}

/* ─── Buscador general de tablas (escritorio y móvil) ──────────────────
   Antes esta barra se ocultaba con @media (min-width: 768px). Como el
   `dom` de DataTables no incluye 'f', el escritorio se quedaba sin
   ningún buscador; y en el celular, si el navegador ensancha el viewport
   de maquetación por el ancho de la tabla, esa misma media query también
   se lo quitaba al celular. Ahora la barra está siempre, en los dos.   */
.mi-barra-de-busqueda {
  display: block;
  clear: both; /* no la absorbe el float de Materialize */
  margin: 0 0 16px;
  max-width: 100%;
}

.mi-barra-de-busqueda > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #546e7a;
  text-transform: uppercase;
}

.mi-barra-de-busqueda__campo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
}

.mi-barra-de-busqueda__icono {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: #90a4ae;
  pointer-events: none;
}

/* Se le gana a los estilos de input de Materialize sin usar .input-field. */
.mi-barra-de-busqueda input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 44px; /* objetivo táctil cómodo */
  margin: 0;
  padding: 0 44px 0 40px;
  border: 1px solid #cfd8dc;
  border-bottom: 1px solid #cfd8dc;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: none;
  font-size: 16px; /* <16px hace que iOS haga zoom al enfocar */
  color: #263238;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mi-barra-de-busqueda input[type="search"]:focus {
  border-color: #26a69a;
  box-shadow: 0 0 0 2px rgba(38, 166, 154, 0.18);
  outline: none;
}

.mi-barra-de-busqueda input[type="search"]::placeholder {
  color: #b0bec5;
}

/* La "x" nativa de WebKit se sale de sitio junto al botón propio. */
.mi-barra-de-busqueda input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.mi-barra-de-busqueda__limpiar {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #78909c;
  cursor: pointer;
}

.mi-barra-de-busqueda__limpiar:hover,
.mi-barra-de-busqueda__limpiar:focus {
  background: #eceff1;
  outline: none;
}

.mi-barra-de-busqueda__limpiar i {
  font-size: 20px;
  line-height: 1;
}

/* Más específico que la regla base: gana aunque el botón sea flex. */
.mi-barra-de-busqueda__limpiar[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .mi-barra-de-busqueda__campo {
    max-width: 100%;
  }
}

/* Apariencia “sólo lectura” para inputs y SlimSelect */
.fe-readonly {
  background: #fff !important;
  color: #1f2937 !important;
  cursor: default !important;
}
.fe-readonly:focus {
  box-shadow: none !important;
}

.ss-main.ss-readonly {
  pointer-events: none; /* bloquea interacciones */
  opacity: 0.95;
}
.ss-main.ss-readonly .ss-single-selected {
  background: #fff;
  border-color: #e5e7eb;
}

.flatpickr-calendar {
  z-index: 1000003 !important;
}

/* Restituye los <select> del calendario */
.flatpickr-calendar select {
  display: initial !important; /* o block */
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

/* Asegura visibilidad del combo de meses */
.flatpickr-calendar .flatpickr-monthDropdown-months {
  display: inline-block !important;
}

/* Evita wrappers de Materialize dentro del calendario (por si existen) */
.flatpickr-calendar .select-wrapper,
.flatpickr-calendar .caret {
  display: none !important;
}

/* Resalta campos con error (inputs/textarea estilo material) */
.fe-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 1px 0 0 #ef4444 !important;
}

/* SlimSelect en error */
.ss-main.fe-invalid {
  border: 1px solid #ef4444 !important;
}

/* Lista de faltantes en el modal */
.swal2-popup .fe-missing {
  text-align: left;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.swal2-backdrop-show {
  z-index: 1000000 !important;
}

/* =========  MODO: Íconos al lado del label (arriba)  ========= */
/* Se activa añadiendo .fe-icons-in-label en un contenedor padre */
.fe-icons-in-label .fe-field {
  display: grid;
  grid-template-columns: 24px 1fr; /* columna ícono + columna label */
  grid-template-rows: auto auto; /* fila (icono+label) y fila control */
  grid-template-areas:
    "icon label"
    "control control";
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
}

/* El ícono ya no es absolute: va en la celda 'icon' */
.fe-icons-in-label .fe-field .fe-icon {
  grid-area: icon;
  position: static !important;
  transform: none !important;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  color: #6b7280; /* gris suave */
  pointer-events: none;
  z-index: 1;
}

/* El label va a su celda */
.fe-icons-in-label .fe-field .fe-label {
  grid-area: label;
  margin: 0; /* evita saltos */
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}

/* El control ocupa la fila inferior completa */
.fe-icons-in-label .fe-field .fe-input,
.fe-icons-in-label .fe-field .ss-main,
.fe-icons-in-label .fe-field .fe-textarea-box {
  grid-area: control;
}

/* =========  Overrides para anular el modo 'icono dentro del input'  ========= */
/* Si antes aplicabas padding-left para dejar hueco al ícono, lo quitamos aquí */
/* .fe-icons-in-label .fe-field .fe-input {
  padding-left: 12px !important;
} */

/* SlimSelect (cabecera y buscador) sin hueco extra */
/* .fe-icons-in-label .fe-field .ss-main .ss-single-selected,
.fe-icons-in-label .fe-field .ss-main .ss-search {
  padding-left: 12px !important;
} */

/* Evita cortes del contenido del control y mantiene sombra/bordes */
.fe-icons-in-label .fe-field .ss-main {
  overflow: visible;
}

/* Opcional: color de ícono al enfocar el control */
.fe-icons-in-label .fe-field:has(.fe-input:focus),
.fe-icons-in-label .fe-field:has(.ss-main:focus-within) {
  --_icon-color: #374151;
}
.fe-icons-in-label .fe-field:has(.fe-input:focus) .fe-icon,
.fe-icons-in-label .fe-field:has(.ss-main:focus-within) .fe-icon {
  color: var(--_icon-color, #6b7280);
}

/* --- Campo estándar: label + control + help apilados --- */
.fe-field {
  display: flex;
  flex-direction: column; /* apila label, control, help */
}

/* Label con icono a la izquierda */
.fe-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 6px; /* separación del control */
}

/* Icono de label (no tapa el input) */
.fe-label .fe-label-icon {
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

/* Cualquier control ocupa todo el ancho del campo */
.fe-field .fe-input,
.fe-field select,
.fe-field .ss-main,        /* SlimSelect */
.fe-field .fe-textarea-box {
  width: 100%;
}

/* Texto de ayuda: siempre debajo, ancho completo */
.fe-help {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.25;
}

/* Si usaste el viejo icono “flotante” de input, lo ocultamos aquí */
.fe-field > .fe-icon {
  display: none;
}

/* Textarea con contador/progreso que ya tienes */
.fe-textarea-box {
  position: relative;
}
.fe-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--bc-surface, #e5e7eb);
  overflow: hidden;
  border-radius: 2px;
}
.fe-progress > .fe-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #16a34a; /* verde */
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}
.fe-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  color: #6b7280;
  user-select: none;
  background: #fff;
  padding: 0 4px;
}
.fe-counter.warn {
  color: #f59e0b;
} /* amarillo */
.fe-counter.over {
  color: #ef4444;
} /* rojo   */

/* Variante subrayada: coloca el contador un poco más abajo */
.fe-textarea-box.fe-underlined .fe-counter {
  bottom: -18px;
}

/* Base de Material Symbols Rounded (ligaduras) */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px; /* tamaño por defecto para labels */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;

  /* ejes variables por defecto */
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* Utilidades para variar estilo rápidamente */
.msr-fill {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
} /* icono relleno */
.msr-600 {
  font-variation-settings:
    "FILL" 0,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
}
.msr-700 {
  font-variation-settings:
    "FILL" 0,
    "wght" 700,
    "GRAD" 0,
    "opsz" 24;
}

/* Integración con tu maqueta: icono en label */
.fe-label .fe-label-icon {
  font-size: 18px; /* igual que antes */
  opacity: 0.8;
  vertical-align: middle;
}

.fe-input.fe-readonly[readonly] {
  background: var(--surface-1, #f7f7f8);
  cursor: not-allowed;
  color: #555;
}

/* ╔════════════════════════════════════════════════════════════╗ */
/* ║           RIPS EPS SELECT2 - ESTILOS PROFESIONALES        ║ */
/* ╚════════════════════════════════════════════════════════════╝ */

/* Contenedor del select en el header */
.rips-eps-container {
  display: flex;
  align-items: center;
  min-width: 250px;
  max-width: 320px;
}

.rips-eps-container .select2-container {
  width: 100% !important;
  min-width: 260px;
  max-width: 100%;
}

/* Contenedor Select2 (donde se muestra el valor seleccionado) */
.rips-eps-select2-container {
  width: 100% !important;
  min-width: 260px;
  max-width: 100%;
}

.rips-eps-select2-container .select2-selection {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  min-height: 38px;
  background-color: #fff;
  font-size: 13px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.rips-eps-select2-container .select2-selection:focus-within {
  border-color: #2196f3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
}

/* Selection (valor mostrado) */
.rips-eps-select2-container .select2-selection__rendered {
  color: #333;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder */
.rips-eps-select2-container .select2-selection__placeholder {
  color: #999;
  font-style: italic;
}

/* Flecha (clear button) */
.rips-eps-select2-container .select2-selection__clear {
  margin-right: 8px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════ */
/* DROPDOWN (abierto) */
/* ═══════════════════════════════════════════════════════════ */

.rips-eps-select2-dropdown {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

.rips-eps-select2-dropdown .select2-dropdown {
  min-width: 260px !important;
  max-width: 480px;
  width: 100% !important;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.rips-eps-select2-dropdown .select2-results__options {
  max-height: 280px;
  overflow-y: auto;
}

/* Opción en el dropdown */
.rips-eps-select2-dropdown .select2-results__option {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s ease;
}

.rips-eps-select2-dropdown .select2-results__option:hover,
.rips-eps-select2-dropdown
  .select2-results__option--highlighted[aria-selected] {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}

.rips-eps-select2-dropdown .select2-results__option[aria-selected="true"] {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
}

/* Búsqueda en dropdown */
.rips-eps-select2-dropdown .select2-search {
  padding: 8px;
}

.rips-eps-select2-dropdown .select2-search input {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
}

.rips-eps-select2-dropdown .select2-search input:focus {
  border-color: #2196f3;
  outline: none;
}

/* Mensaje "No results found" */
.rips-eps-select2-dropdown .select2-results__message {
  padding: 10px 12px;
  color: #999;
  font-style: italic;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE - En tablets/mobile */
/* ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 992px) {
  .rips-eps-container {
    max-width: 280px;
  }

  .rips-eps-select2-dropdown .select2-dropdown {
    min-width: 260px !important;
  }
}

@media screen and (max-width: 600px) {
  .rips-eps-container {
    max-width: 100%;
    min-width: 100%;
  }

  .rips-eps-select2-dropdown .select2-dropdown {
    min-width: 100% !important;
    max-width: 95vw;
  }
}

.rips-eps-opt {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rips-eps-icon {
  width: 18px;
  text-align: center;
  opacity: 0.9;
}
.rips-eps-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ─── Salida del menú del celular ─────────────────────────────────────
   El menú lateral no tenía ni un solo `sidenav-close`: lo único que lo
   cerraba era tocar el overlay. Cuando el overlay no llegaba a pintarse
   —pasaba con `sidenav-fixed`, que hacía a Materialize creerse en pantalla
   grande— el menú se quedaba clavado tapando media pantalla sin nada que
   tocar. Esta fila es la salida, y está siempre. */
#slide-out .menu-cerrar-movil {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#slide-out .menu-cerrar-movil > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px; /* objetivo tactil comodo */
  padding: 0 16px;
  color: #607d8b;
  font-weight: 600;
}
#slide-out .menu-cerrar-movil > a > i {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}


/* ─── Consentimiento informado: lista de tratamientos ─────────────────
   Los botones de retirar y de editar salian SIN NINGUNA regla que los
   tocara: el navegador les ponia su aspecto por defecto —bloque gris de
   ancho completo con borde outset— y en pantalla eran once cajas muertas
   al lado de los nombres. Parecian campos rotos, no botones. */
.detalle-consentimiento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* El texto que firma el paciente ocupa su propia linea; cuando la casilla
   esta sin marcar el JS lo esconde y solo queda la papelera. */
.detalle-consentimiento > .procedimiento-detalle {
  flex: 1 1 100%;
  min-width: 0;
}

.nombre-consentimiento > .btn-quitar-tratamiento,
.detalle-consentimiento > .btn-edit {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #b0bec5;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* `display` NO se toca en .btn-edit: lo enciende y lo apaga el JS al entrar
   en modo edicion, y fijarlo aqui lo dejaria siempre visible. */
/* Pegada al nombre que borra. Antes vivia en la otra columna: en el
   escritorio quedaba a mas de mil pixeles del texto al que se referia, y en
   el celular caia en un renglon propio o encima de los nombres largos.
   La etiqueta tiene que quedarse con el sitio sobrante: Materialize pinta el
   texto de la casilla con un `padding-left` sobre un <span>, asi que la caja
   del <label> mide MENOS que el texto que se ve y el icono se le montaba
   encima. Con flex:1 el <label> ocupa lo que le toca y el icono queda
   detras del nombre, no sobre el. */
.nombre-consentimiento { display: flex; align-items: center; }
.nombre-consentimiento > label {
  flex: 1 1 auto;
  min-width: 0;
}
/* La clave. Materialize pinta el texto de la casilla en un <span> que es
   `inline-block`: se queda con el ancho que quiere y el texto SE SALE de la
   caja del <label> sin ensancharla. Por eso el icono, colocado justo detras
   del label, aparecia encima de las ultimas letras —y por eso medir las
   cajas decia que no habia solape mientras en pantalla lo habia—. En bloque
   ocupa el ancho que le da el label y el texto envuelve dentro. */
.nombre-consentimiento > label > span {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}
.nombre-consentimiento > .btn-quitar-tratamiento {
  display: inline-flex;
  flex: 0 0 36px;
  margin-left: 8px;
}

/* El icono se salia del boton: medido, ocupaba 180 px dentro de un boton de
   36 —72 px desbordando por cada lado— y aterrizaba encima del nombre del
   tratamiento. Se le da tamaño propio y el boton lo encierra, asi que pase
   lo que pase con la fuente de iconos nada se pinta fuera del circulo. */
.nombre-consentimiento > .btn-quitar-tratamiento,
.detalle-consentimiento > .btn-edit {
  overflow: hidden;
}

.nombre-consentimiento > .btn-quitar-tratamiento i,
.detalle-consentimiento > .btn-edit i {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
}

/* Retirar es destructivo: se avisa con el color al acercarse, no despues. */
.nombre-consentimiento > .btn-quitar-tratamiento:hover,
.nombre-consentimiento > .btn-quitar-tratamiento:focus {
  background: #fdecea;
  color: #c62828;
  outline: none;
}

.detalle-consentimiento > .btn-edit:hover,
.detalle-consentimiento > .btn-edit:focus {
  background: #e0f2f1;
  color: #00695c;
  outline: none;
}

/* ─── «Agregar tratamiento», pegado a la lista que amplia ────────────── */
.agregar-tratamiento {
  margin: 4px 0 18px;
}

.agregar-tratamiento #btn-agregar-tratamiento {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px 0 12px;
  border: 1px dashed #80cbc4;
  border-radius: 8px;
  background: #f1f8f7;
  color: #00695c;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.agregar-tratamiento #btn-agregar-tratamiento:hover {
  background: #e0f2f1;
  border-style: solid;
}

.agregar-tratamiento #btn-agregar-tratamiento i {
  margin-right: 6px;
  font-size: 20px;
  line-height: 1;
}

.agregar-tratamiento-nota {
  display: inline-block;
  margin-left: 10px;
  color: #90a4ae;
  font-size: 12.5px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .agregar-tratamiento-nota { display: block; margin: 6px 0 0; }
}

/* En el celular las dos columnas de la fila se apilan (s12 + s12), asi que
   la papelera caia sola en un renglon propio debajo del nombre: mucho hueco
   y, peor, sin quedar claro a que tratamiento pertenece. Se ancla arriba a
   la derecha, a la altura del nombre, este o no desplegado el texto. */
@media (max-width: 600px) {
  .consentimiento-item { margin-bottom: 2px; }
}


/* El diálogo por encima del modal: se resuelve en capas.css, bajando el
   modal de Materialize por debajo de SweetAlert, y no subiendo SweetAlert
   por encima de todo. Subirlo —como se hizo el 2026-09-04— dejó el reloj y
   el calendario del formulario de esterilización debajo del propio
   formulario, y sin poder escribir las horas no se podía registrar una
   carga. Ver la cabecera de backend/web/css/capas.css. */