/* ===============================================
   SISTEMA DE NOTIFICACIONES (TOAST)
   =============================================== */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 15px;
  background: white;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
  pointer-events: auto;
  min-width: 350px;
  border-left: 5px solid;
}

.toast.success {
  border-left-color: #27ae60;
  background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
}

.toast.error {
  border-left-color: #e74c3c;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.toast.warning {
  border-left-color: #f39c12;
  background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
}

.toast.info {
  border-left-color: #3498db;
  background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.toast.success .toast-icon {
  color: #27ae60;
}

.toast.error .toast-icon {
  color: #e74c3c;
}

.toast.warning .toast-icon {
  color: #f39c12;
}

.toast.info .toast-icon {
  color: #3498db;
}

.toast-content {
  flex-grow: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.toast-message {
  font-size: 13px;
  margin: 0;
  color: #555;
  line-height: 1.4;
}

.toast-close {
  cursor: pointer;
  font-size: 20px;
  color: #999;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.toast-close:hover {
  color: #333;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast.removing {
  animation: slideOut 0.3s ease-in forwards;
}

/* ===============================================
   VALIDACIÓN DE CAMPOS REQUERIDOS
   =============================================== */

.cliente-required-form .form-control.ng-dirty.ng-valid,
.cliente-required-form .form-control.ng-dirty.ng-valid:focus,
.cliente-required-form .form-control.ng-pristine,
.cliente-required-form .form-control.ng-pristine:focus {
  border-color: #cfd8e3 !important;
  box-shadow: none !important;
}

.form-field-required {
  position: relative;
}

/* ============================================= */
/* ESTILOS PARA INPUTS DE TEXTO CON ERROR      */
/* ============================================= */
.form-group.field-error input[type="text"],
.form-group.field-error input[type="email"],
.form-group.field-error input[type="number"],
.form-group.field-error input[type="password"],
.form-group.field-error input[type="date"],
.form-group.field-error textarea {
  border: 2px solid #e74c3c !important;
  border-radius: 4px !important;
  background-color: #fff5f5 !important;
  box-shadow: inset 0 0 0 1px #fcc !important;
}

.form-group.field-error input[type="text"]:focus,
.form-group.field-error input[type="email"]:focus,
.form-group.field-error input[type="number"]:focus,
.form-group.field-error input[type="password"]:focus,
.form-group.field-error input[type="date"]:focus,
.form-group.field-error textarea:focus {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;
}

/* ============================================= */
/* ESTILOS PARA UI-SELECT CON ERROR             */
/* ============================================= */

/* Contenedor del ui-select con error */
.form-group.field-error .ui-select-container,
.form-group.field-error .ui-select-match,
.form-group.field-error .ui-select-toggle {
  border-color: #e74c3c !important;
}

.form-group.field-error .ui-select-toggle,
.form-group.field-error .ui-select-match > .btn,
.form-group.field-error .ui-select-bootstrap > .ui-select-match > .btn {
  border: 2px solid #e74c3c !important;
  background: #fff5f5 !important;
  color: #333 !important;
  box-shadow: none !important;
}

.form-group.field-error .ui-select-bootstrap > .ui-select-match,
.form-group.field-error .ui-select-container.open .ui-select-match {
  background: #fff5f5 !important;
}

/* ============================================= */
/* ESTILOS PARA SELECTS NORMALES CON ERROR     */
/* ============================================= */
.form-group.field-error select {
  border: 2px solid #e74c3c !important;
  border-radius: 4px !important;
  background-color: #fff5f5 !important;
  box-shadow: inset 0 0 0 1px #fcc !important;
}

.form-group.field-error select:focus {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;
}

/* ============================================= */
/* ESTILOS PARA CHECKBOXES CON ERROR           */
/* ============================================= */
.form-group.field-error .checkbox label,
.form-group.field-error .radio label,
.form-group.field-error .i-checks {
  color: #c0392b;
}

.form-group.field-error .checkbox input[type="checkbox"],
.form-group.field-error .radio input[type="radio"],
.form-group.field-error .i-checks input[type="checkbox"] {
  accent-color: #e74c3c !important;
}

.form-group.field-error .i-checks i,
.form-group.field-error .i-checks > i {
  border-color: #e74c3c !important;
  box-shadow: inset 0 0 0 1px #e74c3c !important;
  background: #fff5f5 !important;
}

/* ============================================= */
/* MENSAJE DE ERROR                            */
/* ============================================= */
.field-error-message {
  display: block;
  color: #e74c3c;
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  animation: shake 0.4s ease-in-out;
  padding: 4px 0;
  border-radius: 3px;
  line-height: 1.4;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Marcar campos requeridos con *  */
.form-group label::after {
  content: '';
}

.form-group label.required::after {
  content: ' *';
  color: #e74c3c;
  font-weight: bold;
}

/* Resalte de error en modal */
.modal-body .field-error input,
.modal-body .field-error select,
.modal-body .field-error textarea {
  border: 2px solid #e74c3c !important;
  background-color: #fef5f5;
}

/* Tooltip de validación */
.validation-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -2px;
  padding: 8px 12px;
  background-color: #e74c3c;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
}

/* Resalte especial para campos críticos */
.field-critical.field-error {
  box-shadow: inset 0 0 0 2px #e74c3c, 0 0 8px rgba(231, 76, 60, 0.3);
}

.field-critical.field-error input,
.field-critical.field-error select {
  font-weight: 500;
}