/**
 * Estilos personalizados de Planifi Expenses.
 *
 * Responsabilidades:
 * - Reemplazar el rojo intenso (#ff4c51) de Vuexy por un rojo suave (#c0616a) en todo el proyecto
 * - Complementar el tema Vuexy sin modificar sus archivos base
 *
 * @author Octavio Soto
 */

/* ═══════════════════════════════════════════════════════════════
   Rojo suavizado global — sobreescribe #ff4c51 de Vuexy/Bootstrap
   Color objetivo: #c0616a (rojo cálido, desaturado)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bs-red:                        #c0616a;
  --bs-danger:                     #c0616a;
  --bs-danger-rgb:                 192, 97, 106;
  --bs-danger-text-emphasis:       #7a2d35;
  --bs-danger-bg-subtle:           #f5e6e7;
  --bs-danger-border-subtle:       #deb8bc;
  --bs-form-invalid-color:         #c0616a;
  --bs-form-invalid-border-color:  #c0616a;
}

/* Dark mode */
[data-bs-theme="dark"] {
  --bs-danger:                     #d07880;
  --bs-danger-rgb:                 208, 120, 128;
  --bs-danger-text-emphasis:       #e8a0a6;
  --bs-danger-bg-subtle:           #3d2528;
  --bs-danger-border-subtle:       #6e3a3e;
  --bs-form-invalid-color:         #d07880;
  --bs-form-invalid-border-color:  #d07880;
}

/* Botón btn-danger (Vuexy hardcodea #ff4c51, hay que sobrescribir) */
.btn-danger {
  --bs-btn-bg:                     #c0616a;
  --bs-btn-border-color:           #c0616a;
  --bs-btn-hover-bg:               #ad5560;
  --bs-btn-hover-border-color:     #a34f59;
  --bs-btn-active-bg:              #a34f59;
  --bs-btn-active-border-color:    #9a4a54;
  --bs-btn-disabled-bg:            #c0616a;
  --bs-btn-disabled-border-color:  #c0616a;
}

/* Botón btn-outline-danger */
.btn-outline-danger {
  --bs-btn-color:                  #c0616a;
  --bs-btn-border-color:           #c0616a;
  --bs-btn-hover-bg:               #c0616a;
  --bs-btn-hover-border-color:     #c0616a;
  --bs-btn-active-bg:              #c0616a;
  --bs-btn-active-border-color:    #c0616a;
  --bs-btn-disabled-color:         #c0616a;
  --bs-btn-disabled-border-color:  #c0616a;
}

/* ── Alerta danger suavizada ── */
.alert-soft-danger {
  background-color: rgba(192, 97, 106, 0.10);
  border-color:     rgba(192, 97, 106, 0.30);
  color:            inherit;
}

/* ── Preservar capitalización original en nav-links (Vuexy aplica capitalize) ── */
.nav-pills .nav-link,
.nav-tabs  .nav-link {
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   Select2 de etiquetas (tags) — pills primary, fuente reducida
   La clase .select2-tags-sm se agrega al container vía JS:
     $('#txTags').data('select2').$container.addClass('select2-tags-sm')
   El botón × se mueve al lado derecho (igual que Vuexy) usando
   position:absolute en el botón y padding-right en el pill.
   ═══════════════════════════════════════════════════════════════ */
.select2-tags-sm.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice {
  position:         relative              !important;
  display:          inline-flex           !important;
  align-items:      center                !important;
  font-size:        0.72rem               !important;
  padding:          0.15rem 1.25rem 0.15rem 0.5rem !important;
  background-color: rgba(115, 103, 240, 0.15) !important;
  border-color:     rgba(115, 103, 240, 0.45) !important;
  color:            #5a52c7              !important;
}

/* Ocultar el botón × del layout flex y reposicionarlo a la derecha */
.select2-tags-sm.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice
  .select2-selection__choice__remove {
  position:         absolute              !important;
  right:            0.3rem               !important;
  top:              50%                  !important;
  transform:        translateY(-50%)     !important;
  margin-right:     0                    !important;
  width:            0.55rem              !important;
  height:           0.55rem              !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a52c7'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  background-size:  0.55rem              !important;
  background-position: center            !important;
  opacity:          0.7                  !important;
}

.select2-tags-sm.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice
  .select2-selection__choice__remove:hover {
  opacity:          1                    !important;
}

/* Dark mode */
[data-bs-theme="dark"] .select2-tags-sm.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: rgba(115, 103, 240, 0.20) !important;
  border-color:     rgba(115, 103, 240, 0.50) !important;
  color:            #aba4f6                    !important;
}

[data-bs-theme="dark"] .select2-tags-sm.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice
  .select2-selection__choice__remove {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23aba4f6'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

/* Hero dashboard: alternar imagen según tema */
.hero-img-dark { display: none; }
[data-bs-theme="dark"] .hero-img-light { display: none; }
[data-bs-theme="dark"] .hero-img-dark  { display: block; }

/* ── Responsive: offcanvas de transacciones ── */
#txCanvas { width: min(100vw, 500px); }

/* ── Responsive: contenedores con scroll horizontal (btn-group en móvil) ── */
.overflow-x-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.overflow-x-scroll .btn-group { flex-wrap: nowrap; }

/* ── Filter bar: layout móvil (<576px) ── */
@media (max-width: 575.98px) {
  .tx-filter-search {
    width: 100% !important;
  }
  .tx-filter-pills {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .tx-filter-select {
    max-width: 100% !important;
    width: 100% !important;
  }
  .tx-filter-actions {
    width: 100%;
    margin-left: 0 !important;
    justify-content: space-between;
  }
}

/* ── Roadmap kanban board ── */
.kanban-scroll {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.kanban-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: center;
  min-width: calc(4 * 300px + 3 * 1.25rem);
}
.kanban-col {
  width: 300px;
  flex-shrink: 0;
}
.kanban-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.kanban-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.roadmap-card {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: default;
}
.roadmap-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09) !important;
  transform: translateY(-2px);
}
@media (max-width: 575px) {
  .kanban-col { width: 260px; }
  .kanban-row { min-width: calc(4 * 260px + 3 * 1.25rem); }
}