.btn-dark {
  background-color: #343a40;
  border-color: #343a40;
  color: #FFFFFF;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #FFFFFF;
}
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  background-image: none;
}
.btn-dark.disabled,
.btn-dark.disabled:hover,
.btn-dark.disabled:focus,
.btn-dark.disabled:active,
.btn-dark.disabled.active,
.btn-dark[disabled],
.btn-dark[disabled]:hover,
.btn-dark[disabled]:focus,
.btn-dark[disabled]:active,
.btn-dark.active[disabled],
fieldset[disabled] .btn-dark,
fieldset[disabled] .btn-dark:hover,
fieldset[disabled] .btn-dark:focus,
fieldset[disabled] .btn-dark:active,
fieldset[disabled] .btn-dark.active {
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-sybary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #FFFFFF;
}
.btn-sybary:hover,
.btn-sybary:focus,
.btn-sybary:active,
.btn-sybary.active,
.open .dropdown-toggle.btn-sybary {
  background-color: #343a40;
  border-color: #343a40;
  color: #FFFFFF;
}
.btn-sybary:active,
.btn-sybary.active,
.open .dropdown-toggle.btn-sybary {
  background-image: none;
}
.btn-sybary.disabled,
.btn-sybary.disabled:hover,
.btn-sybary.disabled:focus,
.btn-sybary.disabled:active,
.btn-sybary.disabled.active,
.btn-sybary[disabled],
.btn-sybary[disabled]:hover,
.btn-sybary[disabled]:focus,
.btn-sybary[disabled]:active,
.btn-sybary.active[disabled],
fieldset[disabled] .btn-sybary,
fieldset[disabled] .btn-sybary:hover,
fieldset[disabled] .btn-sybary:focus,
fieldset[disabled] .btn-sybary:active,
fieldset[disabled] .btn-sybary.active {
  background-color: #343a40;
  border-color: #343a40;
}

.btn-darked {
  background-color: #f8f9fa;
  border-color: #343a40;
  color: #343a40;
}
.btn-darked:hover,
.btn-darked:focus,
.btn-darked:active,
.btn-darked.active,
.open .dropdown-toggle.btn-darked {
  background-color: #f3f3f4;
  border-color: #343a40;
  color: #343a40;
}
.btn-darked:active,
.btn-darked.active,
.open .dropdown-toggle.btn-darked {
  background-image: none;
}
.btn-darked.disabled,
.btn-darked.disabled:hover,
.btn-darked.disabled:focus,
.btn-darked.disabled:active,
.btn-darked.disabled.active,
.btn-darked[disabled],
.btn-darked[disabled]:hover,
.btn-darked[disabled]:focus,
.btn-darked[disabled]:active,
.btn-darked.active[disabled],
fieldset[disabled] .btn-darked,
fieldset[disabled] .btn-darked:hover,
fieldset[disabled] .btn-darked:focus,
fieldset[disabled] .btn-darked:active,
fieldset[disabled] .btn-darked.active {
  background-color: #f3f3f4;
  border-color: #343a40;
}

/* ==============================================================
   ESTILOS DE VALIDACIÓN GLOBAL (Inputs, Selects, Textareas)
   ============================================================== */

/* --- ESTADO DE ÉXITO (Borde Verde) --- */
.has-success input,
.has-success select,
.has-success textarea {
    border: 2px solid #81C9AD !important;
    /* Opcional: Icono de check verde integrado en el input */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2381C9AD' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* --- ESTADO DE ERROR (Borde Rojo y X) --- */
.has-error input,
.has-error select,
.has-error textarea,
.has-error-val input,
.has-error-val select,
.has-error-val textarea {
    border: 2px solid #dc3545 !important;
    /* Icono de X roja integrado en el input */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Ajuste específico para el Select (para que la X no pise la flechita por defecto) */
.has-error select,
.has-success select,
.has-error-val select {
    background-position: right 2rem center;
}

/* --- MENSAJE DE ERROR DEBAJO DEL INPUT --- */
.error-text {
    display: none; /* Oculto por defecto */
    color: #dc3545;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

/* Solo mostramos el texto si el div padre tiene la clase de error */
.has-error .error-text,
.has-error-val .error-text {
    display: block;
}

/* ==============================================================
   VALIDACIONES DE FORMULARIOS MODALES (ESTILO SYBCODEX)
   ============================================================== */

/* Contenedor del input (Evita que el texto de error pise al siguiente elemento) */
.input-group_syb {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem; /* Separación entre campos */
    position: relative;
    width: 100%;
}

.input-group_syb input,
.input-group_syb select,
.input-group_syb textarea {
    width: 100%;
    margin-bottom: 0 !important; /* Anula márgenes inferiores que rompan el diseño */
    transition: border-color 0.3s ease; /* Pequeña animación suave al cambiar de color */
}

/* --- ESTADO DE ÉXITO (Solo Borde Verde) --- */
.has-success_syb input,
.has-success_syb select,
.has-success_syb textarea {
    border: 2px solid #81C9AD !important;
}

/* --- ESTADO DE ERROR (Solo Borde Rojo) --- */
.has-error_syb input,
.has-error_syb select,
.has-error_syb textarea {
    border: 2px solid #dc3545 !important;
}

/* --- MENSAJE DE ERROR DEBAJO DEL INPUT --- */
.error-text_syb {
    display: none; /* Oculto por defecto */
    color: #dc3545;
    font-size: 0.8rem; /* Tamaño ideal para modales */
    font-weight: 500;
    margin-top: 4px; /* Separación sutil del input */
    text-align: left;
    width: 100%;
}

/* Solo mostramos el texto si el div padre tiene la clase de error */
.has-error_syb .error-text_syb {
    display: block;
}