/**
 * SIGETIC UI — Base components (Fase 2C.6-UI.3)
 * Clases opt-in .sg-* sobre Bootstrap 4.6.2 + legacy.
 * Depende de sigetic-tokens.css
 */

/* ========================================================================== */
/* Buttons (.sg-btn)                                                          */
/* ========================================================================== */

.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-space-sm, 8px);
  min-height: 32px;
  padding: var(--sg-space-sm, 8px) var(--sg-space-lg, 16px);
  font-size: var(--sg-font-size-sm, 0.875rem);
  font-weight: var(--sg-font-weight-medium, 500);
  line-height: 1.25;
  border-radius: var(--sg-radius-md, 6px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--sg-transition-fast, 150ms ease),
              border-color var(--sg-transition-fast, 150ms ease),
              color var(--sg-transition-fast, 150ms ease),
              box-shadow var(--sg-transition-fast, 150ms ease);
}

.sg-btn:focus {
  outline: none;
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.sg-btn:disabled,
.sg-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.sg-btn-primary {
  background-color: var(--sg-primary, #235B4E);
  border-color: var(--sg-primary, #235B4E);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--sg-primary-dark, #1A443A);
  border-color: var(--sg-primary-dark, #1A443A);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-secondary {
  background-color: var(--sg-surface, #fff);
  border-color: var(--sg-border-strong, #D1D5DB);
  color: var(--sg-text, #1F2937);
}

.sg-btn-secondary:hover:not(:disabled):not(.disabled) {
  background-color: var(--sg-bg, #F3F4F6);
  border-color: var(--sg-muted, #6B7280);
  color: var(--sg-text, #1F2937);
}

.sg-btn-success {
  background-color: var(--sg-success, #235B4E);
  border-color: var(--sg-success, #235B4E);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-success:hover:not(:disabled):not(.disabled) {
  background-color: var(--sg-primary-dark, #1A443A);
  border-color: var(--sg-primary-dark, #1A443A);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-danger {
  background-color: var(--sg-danger, #DC2626);
  border-color: var(--sg-danger, #DC2626);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-danger:hover:not(:disabled):not(.disabled) {
  background-color: #B91C1C;
  border-color: #B91C1C;
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-warning {
  background-color: var(--sg-warning, #D97706);
  border-color: var(--sg-warning, #D97706);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-warning:hover:not(:disabled):not(.disabled) {
  background-color: #B45309;
  border-color: #B45309;
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-neutral {
  background-color: var(--sg-neutral, #6B7280);
  border-color: var(--sg-neutral, #6B7280);
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-neutral:hover:not(:disabled):not(.disabled) {
  background-color: #4B5563;
  border-color: #4B5563;
  color: var(--sg-text-inverse, #fff);
}

.sg-btn-outline-primary {
  background-color: transparent;
  border-color: var(--sg-primary, #235B4E);
  color: var(--sg-primary, #235B4E);
}

.sg-btn-outline-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--sg-primary-soft, #E8F3F0);
  color: var(--sg-primary-dark, #1A443A);
}

.sg-btn-outline-danger {
  background-color: transparent;
  border-color: var(--sg-danger, #DC2626);
  color: var(--sg-danger, #DC2626);
}

.sg-btn-outline-danger:hover:not(:disabled):not(.disabled) {
  background-color: #FEF2F2;
  color: #B91C1C;
}

.sg-btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--sg-muted, #6B7280);
}

.sg-btn-ghost:hover:not(:disabled):not(.disabled) {
  background-color: var(--sg-bg, #F3F4F6);
  color: var(--sg-text, #1F2937);
}

.sg-btn-sm {
  min-height: 28px;
  padding: var(--sg-space-xs, 4px) var(--sg-space-md, 12px);
  font-size: var(--sg-font-size-xs, 0.75rem);
}

.sg-btn-lg {
  min-height: 40px;
  padding: var(--sg-space-md, 12px) var(--sg-space-xl, 24px);
  font-size: var(--sg-font-size-body, 0.9375rem);
}

.sg-btn-icon {
  min-width: 32px;
  min-height: 32px;
  padding: var(--sg-space-sm, 8px);
}

/* Bridge opt-in: Bootstrap .btn + SIGETIC variant */
.btn.sg-btn-primary,
.btn.sg-btn-secondary,
.btn.sg-btn-success,
.btn.sg-btn-danger,
.btn.sg-btn-warning,
.btn.sg-btn-neutral,
.btn.sg-btn-outline-primary,
.btn.sg-btn-outline-danger,
.btn.sg-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-space-sm, 8px);
  border-radius: var(--sg-radius-md, 6px);
  font-weight: var(--sg-font-weight-medium, 500);
  transition: background-color var(--sg-transition-fast, 150ms ease),
              border-color var(--sg-transition-fast, 150ms ease),
              color var(--sg-transition-fast, 150ms ease),
              box-shadow var(--sg-transition-fast, 150ms ease);
}

.btn.sg-btn-primary {
  background-color: var(--sg-primary, #235B4E);
  border-color: var(--sg-primary, #235B4E);
}

.btn.sg-btn-primary:hover,
.btn.sg-btn-primary:focus {
  background-color: var(--sg-primary-dark, #1A443A);
  border-color: var(--sg-primary-dark, #1A443A);
}

.btn.sg-btn-secondary,
.btn.sg-btn-outline-primary {
  background-color: var(--sg-surface, #fff);
  border-color: var(--sg-border-strong, #D1D5DB);
  color: var(--sg-text, #1F2937);
}

.btn.sg-btn-outline-primary {
  border-color: var(--sg-primary, #235B4E);
  color: var(--sg-primary, #235B4E);
  background-color: transparent;
}

.btn.sg-btn-success {
  background-color: var(--sg-success, #235B4E);
  border-color: var(--sg-success, #235B4E);
}

.btn.sg-btn-danger {
  background-color: var(--sg-danger, #DC2626);
  border-color: var(--sg-danger, #DC2626);
}

.btn:focus,
.btn.sg-btn-primary:focus,
.btn.sg-btn-secondary:focus {
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

/* ========================================================================== */
/* Cards (.sg-card)                                                           */
/* ========================================================================== */

.sg-card {
  background-color: var(--sg-surface, #fff);
  border: 1px solid var(--sg-border, #E5E7EB);
  border-radius: var(--sg-radius-lg, 8px);
  box-shadow: var(--sg-shadow-card);
  overflow: hidden;
}

.sg-card-accent {
  border-top: 2px solid var(--sg-accent, #BC955C);
}

.sg-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-sm, 8px);
  padding: var(--sg-space-md, 12px) var(--sg-space-lg, 16px);
  background-color: #FAFAFA;
  border-bottom: 1px solid var(--sg-border, #E5E7EB);
  font-size: var(--sg-font-size-card-header, 0.9375rem);
  font-weight: var(--sg-font-weight-semibold, 600);
  color: var(--sg-text, #1F2937);
}

.sg-card-body {
  padding: var(--sg-space-lg, 16px);
}

.sg-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sg-space-sm, 8px);
  padding: var(--sg-space-md, 12px) var(--sg-space-lg, 16px);
  background-color: #FAFAFA;
  border-top: 1px solid var(--sg-border, #E5E7EB);
}

/* Bridge: legacy card + SIGETIC polish (opt-in class sg-card) */
.card.sg-card {
  border: 1px solid var(--sg-border, #E5E7EB);
  border-radius: var(--sg-radius-lg, 8px);
  box-shadow: var(--sg-shadow-card);
}

.card.sg-card.borde_institucional,
.card.sg-card.sg-card-accent {
  border-top: 2px solid var(--sg-accent, #BC955C);
}

.card.sg-card .card-header {
  background-color: #FAFAFA;
  border-bottom: 1px solid var(--sg-border, #E5E7EB);
  font-weight: var(--sg-font-weight-semibold, 600);
}

.card.sg-card.sombra {
  box-shadow: var(--sg-shadow-card);
}

/* ========================================================================== */
/* Badges (.sg-badge)                                                         */
/* ========================================================================== */

.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-xs, 4px);
  padding: 0.25em 0.55em;
  font-size: var(--sg-font-size-xs, 0.75rem);
  font-weight: var(--sg-font-weight-medium, 500);
  line-height: 1.2;
  border-radius: var(--sg-radius-sm, 4px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sg-badge-success,
.sg-badge-primary {
  background-color: var(--sg-primary-soft, #E8F3F0);
  color: var(--sg-primary-dark, #1A443A);
}

.sg-badge-danger {
  background-color: #FEE2E2;
  color: #991B1B;
}

.sg-badge-warning {
  background-color: #FEF3C7;
  color: #92400E;
}

.sg-badge-info {
  background-color: #CFFAFE;
  color: #155E75;
}

.sg-badge-neutral {
  background-color: var(--sg-bg, #F3F4F6);
  color: var(--sg-neutral, #6B7280);
}

/* ========================================================================== */
/* Inputs (.sg-input, .sg-select, .sg-textarea)                               */
/* ========================================================================== */

.sg-input,
.sg-select,
.sg-textarea {
  display: block;
  width: 100%;
  color: var(--sg-text, #1F2937);
  background-color: var(--sg-surface, #fff);
  border: 1px solid var(--sg-border-strong, #D1D5DB);
  border-radius: var(--sg-radius-md, 6px);
  font-size: var(--sg-font-size-sm, 0.875rem);
  line-height: var(--sg-line-height-body, 1.5);
  transition: border-color var(--sg-transition-fast, 150ms ease),
              box-shadow var(--sg-transition-fast, 150ms ease);
}

.sg-input,
.sg-select {
  min-height: 36px;
  padding: var(--sg-space-sm, 8px) var(--sg-space-md, 12px);
}

.sg-textarea {
  min-height: 80px;
  padding: var(--sg-space-sm, 8px) var(--sg-space-md, 12px);
  resize: vertical;
}

.sg-input:hover:not(:disabled):not([readonly]),
.sg-select:hover:not(:disabled):not([readonly]),
.sg-textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--sg-muted, #6B7280);
}

.sg-input:focus,
.sg-select:focus,
.sg-textarea:focus {
  outline: none;
  border-color: var(--sg-primary, #235B4E);
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.sg-input:disabled,
.sg-select:disabled,
.sg-textarea:disabled,
.sg-input[readonly],
.sg-textarea[readonly] {
  background-color: var(--sg-bg, #F3F4F6);
  color: var(--sg-muted, #6B7280);
  cursor: not-allowed;
  opacity: 0.85;
}

.sg-input.is-invalid,
.sg-select.is-invalid,
.sg-textarea.is-invalid,
.sg-input.sg-input-error,
.sg-select.sg-input-error,
.sg-textarea.sg-input-error {
  border-color: var(--sg-danger, #DC2626);
}

.sg-input.is-invalid:focus,
.sg-select.is-invalid:focus,
.sg-textarea.is-invalid:focus,
.sg-input.sg-input-error:focus,
.sg-select.sg-input-error:focus,
.sg-textarea.sg-input-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.sg-help-text {
  display: block;
  margin-top: var(--sg-space-xs, 4px);
  font-size: var(--sg-font-size-xs, 0.75rem);
  color: var(--sg-muted, #6B7280);
}

.sg-field-error {
  display: block;
  margin-top: var(--sg-space-xs, 4px);
  font-size: var(--sg-font-size-xs, 0.75rem);
  color: var(--sg-danger, #DC2626);
}

/* Bridge: legacy .form-tickets focus ring (visual only, no HTML change) */
.form-tickets:focus {
  border-color: var(--sg-primary, #235B4E);
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.form-tickets.sg-input {
  border: 1px solid var(--sg-border-strong, #D1D5DB);
  border-radius: var(--sg-radius-md, 6px);
}

.form-control.sg-input {
  border: 1px solid var(--sg-border-strong, #D1D5DB);
  border-radius: var(--sg-radius-md, 6px);
  min-height: 36px;
}

/* ========================================================================== */
/* Alerts (.sg-alert)                                                         */
/* ========================================================================== */

.sg-alert {
  display: flex;
  gap: var(--sg-space-md, 12px);
  align-items: flex-start;
  padding: var(--sg-space-md, 12px) var(--sg-space-lg, 16px);
  border: 1px solid var(--sg-border, #E5E7EB);
  border-left-width: 4px;
  border-radius: var(--sg-radius-md, 6px);
  background-color: var(--sg-surface, #fff);
  font-size: var(--sg-font-size-sm, 0.875rem);
  line-height: var(--sg-line-height-body, 1.5);
  color: var(--sg-text, #1F2937);
}

.sg-alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

.sg-alert-content {
  flex: 1;
  min-width: 0;
}

.sg-alert-title {
  display: block;
  font-weight: var(--sg-font-weight-semibold, 600);
  margin-bottom: var(--sg-space-xs, 4px);
}

.sg-alert-message {
  margin: 0;
  color: inherit;
}

.sg-alert-success {
  border-left-color: var(--sg-success, #235B4E);
  background-color: var(--sg-primary-soft, #E8F3F0);
}

.sg-alert-success .sg-alert-icon {
  color: var(--sg-primary, #235B4E);
}

.sg-alert-danger {
  border-left-color: var(--sg-danger, #DC2626);
  background-color: #FEF2F2;
}

.sg-alert-danger .sg-alert-icon {
  color: var(--sg-danger, #DC2626);
}

.sg-alert-warning {
  border-left-color: var(--sg-warning, #D97706);
  background-color: #FFFBEB;
}

.sg-alert-warning .sg-alert-icon {
  color: var(--sg-warning, #D97706);
}

.sg-alert-info {
  border-left-color: var(--sg-info, #0E7490);
  background-color: #ECFEFF;
}

.sg-alert-info .sg-alert-icon {
  color: var(--sg-info, #0E7490);
}

/* ========================================================================== */
/* Select2 — coherence (CSS only, after select2_tickets.css)                  */
/* ========================================================================== */

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--sg-primary, #235B4E);
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--sg-primary, #235B4E);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--sg-primary, #235B4E);
  box-shadow: var(--sg-focus-ring, 0 0 0 3px rgba(35, 91, 78, 0.2));
}

.select2-dropdown {
  border-color: var(--sg-border, #E5E7EB);
  border-radius: var(--sg-radius-md, 6px);
  box-shadow: var(--sg-shadow-modal);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--sg-bg, #F3F4F6);
  border-color: var(--sg-border-strong, #D1D5DB);
  box-shadow: none;
}

.form-group.select2-open .labels,
.form-group.select2-has-value .labels {
  color: var(--sg-primary, #235B4E);
}

/* ========================================================================== */
/* Responsive                                                                 */
/* ========================================================================== */

@media screen and (max-width: 991px) {
  .sg-btn {
    min-height: 36px;
  }

  .sg-card-body {
    padding: var(--sg-space-md, 12px);
  }

  .sg-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .sg-card-footer .sg-btn,
  .sg-card-footer .btn {
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  .sg-alert {
    flex-direction: column;
    gap: var(--sg-space-sm, 8px);
  }
}