/* Custom styles for cotizaciones app */

/* Estilos generales */

/* Sidebar width adjustments */
.sidebar {
    width: 16rem !important; /* Aumentar de 14rem a 16rem */
}

.sidebar.toggled {
    width: 6.5rem !important;
}

/* Nested dropdown styles for sidebar */
.collapse-item-wrapper {
    position: relative;
}

/* Chevron icon styling for nested dropdowns */
.collapse-item-wrapper .collapse-item[data-toggle="collapse"] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapse-item-wrapper .collapse-item[data-toggle="collapse"] .ti-chevron-down {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
    opacity: 0.7;
}

.collapse-item-wrapper .collapse-item[data-toggle="collapse"]:not(.collapsed) .ti-chevron-down {
    transform: rotate(180deg);
}

/* Remove the ::after pseudo-element approach */
.collapse-item-wrapper .collapse-item.collapsed::after {
    display: none;
}

.collapse-item-wrapper .collapse .collapse-item {
    padding-left: 1.5rem;
    font-size: 0.85rem;
    border-left: 2px solid rgba(255,255,255,0.1);
    margin-left: 0.5rem;
    transition: all 0.3s ease;
}

.collapse-item-wrapper .collapse .collapse-item:hover {
    border-left-color: #4e73df;
    background-color: rgba(78, 115, 223, 0.1);
}

/* Improved visual hierarchy for nested items */
.collapse-inner .collapse-item-wrapper {
    margin-bottom: 0.25rem;
}

.collapse-inner .collapse-item-wrapper .collapse-item {
    padding: 0.5rem 1rem;
    border-radius: 0.35rem;
    margin-bottom: 0.125rem;
}

.collapse-inner .collapse .py-1 {
    background-color: rgba(0,0,0,0.15);
    border-radius: 0.25rem;
    margin-top: 0.25rem;
}

/* Icon spacing for nested items */
.collapse-item i:not(.ti-chevron-down) {
    width: 1.2rem;
    margin-right: 0.5rem;
}

/* Ensure chevron icons are properly positioned */
.ti-chevron-down {
    margin-left: auto;
}

/* Oculta solo el texto del logo cuando el sidebar está colapsado */
.sidebar.toggled .sidebar-brand-text {
    display: none;
}

/* Fondo general de la página */
body {
  background: #423c46;
  padding: 5px;
  margin: 0;
  font-family: 'Segoe UI', 'Roboto';
}

.app-container {
  background-color: #ffffff; /* Fondo blanco */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
  max-width: 100%; /* Ocupa todo el ancho de la página */
  margin: 0; /* Centrar horizontalmente con margen superior e inferior */
  padding: 1px; /* Espaciado interno */
  overflow: hidden; /* Evitar desbordamiento */
}

.nav-link.dropdown-toggle {
  border-radius:20px; /* Bordes redondeados */
  padding: 10px; /* Espaciado interno */
  transition: background-color 0.3s ease; /* Transición suave */
}

.nav-link.dropdown-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Fondo al pasar el cursor */
}


/* Modern dark theme colors */
:root {
    --modern-dark: #1E1E1E;; /* Fondo principal */
    --modern-dark-gradient-start: #1E1E1E;
    --modern-dark-gradient-end: #121212;
    --sidebar-bg: #1E1E1E; /* Sidebar más claro que el fondo */
    --accent-color: #1F6FEB; /* Azul moderno GitHub-style */
    --accent-hover: #0091FF; /* Azul vibrante para hover */
    --text-on-dark: #FFFFFF;
    --text-muted: #A0A0A0;
    
    /* Custom Color Variables - Tonal Brand Colors */
    --tonal-primary: #57a6d8;
    --tonal-info: #36b9cc;
    --tonal-warning: #f6c23e;
    --tonal-success: #2fbc80;
    --tonal-secondary: #858796;
    --tonal-dark: #5a5c69;
    --tonal-danger: #c44137;
    --tonal-purple: #8d82bc;
    --tonal-pink: #eb6587;

    /* Bootstrap Color Overrides */
    --bs-primary: var(--tonal-primary);
    --bs-info: var(--tonal-info);
    --bs-warning: var(--tonal-warning);
    --bs-success: var(--tonal-success);
    --bs-secondary: var(--tonal-secondary);
    --bs-dark: var(--tonal-dark);
    --bs-danger: var(--tonal-danger);
}

/* Bootstrap Color Overrides - Apply Tonal Brand Colors */
/* Primary Color Overrides */
.btn-primary {
  background-color: var(--tonal-primary) !important;
  border-color: var(--tonal-primary) !important;
}
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--tonal-primary) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-primary) 85%, black) !important;
}
.text-primary { color: var(--tonal-primary) !important; }
.bg-primary { background-color: var(--tonal-primary) !important; }
.border-primary { border-color: var(--tonal-primary) !important; }
.border-left-primary { border-left-color: var(--tonal-primary) !important; }
.badge-primary { background-color: var(--tonal-primary) !important; }

/* Info Color Overrides */
.btn-info {
  background-color: var(--tonal-info) !important;
  border-color: var(--tonal-info) !important;
}
.btn-info:hover {
  background-color: color-mix(in srgb, var(--tonal-info) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-info) 85%, black) !important;
}
.text-info { color: var(--tonal-info) !important; }
.bg-info { background-color: var(--tonal-info) !important; }
.border-info { border-color: var(--tonal-info) !important; }
.border-left-info { border-left-color: var(--tonal-info) !important; }
.badge-info { background-color: var(--tonal-info) !important; }

/* Warning Color Overrides */
.btn-warning {
  background-color: var(--tonal-warning) !important;
  border-color: var(--tonal-warning) !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background-color: color-mix(in srgb, var(--tonal-warning) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-warning) 85%, black) !important;
}
.text-warning { color: var(--tonal-warning) !important; }
.bg-warning { background-color: var(--tonal-warning) !important; }
.border-warning { border-color: var(--tonal-warning) !important; }
.border-left-warning { border-left-color: var(--tonal-warning) !important; }
.badge-warning { background-color: var(--tonal-warning) !important; color: #ffffff !important; }

/* Success Color Overrides */
.btn-success {
  background-color: var(--tonal-success) !important;
  border-color: var(--tonal-success) !important;
}
.btn-success:hover {
  background-color: color-mix(in srgb, var(--tonal-success) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-success) 85%, black) !important;
}
.text-success { color: var(--tonal-success) !important; }
.bg-success { background-color: var(--tonal-success) !important; }
.border-success { border-color: var(--tonal-success) !important; }
.border-left-success { border-left-color: var(--tonal-success) !important; }
.badge-success { background-color: var(--tonal-success) !important; }

/* Danger Color Overrides */
.btn-danger {
  background-color: var(--tonal-danger) !important;
  border-color: var(--tonal-danger) !important;
}
.btn-danger:hover {
  background-color: color-mix(in srgb, var(--tonal-danger) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-danger) 85%, black) !important;
}
.text-danger { color: var(--tonal-danger) !important; }
.bg-danger { background-color: var(--tonal-danger) !important; }
.border-danger { border-color: var(--tonal-danger) !important; }
.border-left-danger { border-left-color: var(--tonal-danger) !important; }
.badge-danger { background-color: var(--tonal-danger) !important; }

/* Secondary Color Overrides */
.btn-secondary {
  background-color: var(--tonal-secondary) !important;
  border-color: var(--tonal-secondary) !important;
}
.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--tonal-secondary) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-secondary) 85%, black) !important;
}
.text-secondary { color: var(--tonal-secondary) !important; }
.bg-secondary { background-color: var(--tonal-secondary) !important; }
.border-secondary { border-color: var(--tonal-secondary) !important; }
.border-left-secondary { border-left-color: var(--tonal-secondary) !important; }
.badge-secondary { background-color: var(--tonal-secondary) !important; }

/* Dark Color Overrides */
.btn-dark {
  background-color: var(--tonal-dark) !important;
  border-color: var(--tonal-dark) !important;
}
.btn-dark:hover {
  background-color: color-mix(in srgb, var(--tonal-dark) 85%, black) !important;
  border-color: color-mix(in srgb, var(--tonal-dark) 85%, black) !important;
}
.text-dark { color: var(--tonal-dark) !important; }
.bg-dark { background-color: var(--tonal-dark) !important; }
.border-dark { border-color: var(--tonal-dark) !important; }
.border-left-dark { border-left-color: var(--tonal-dark) !important; }
.badge-dark { background-color: var(--tonal-dark) !important; }

/* Override the primary color gradient in the sidebar */
.bg-gradient-primary {
  background-color: var(--modern-dark);
  background-image: linear-gradient(180deg, var(--modern-dark-gradient-start) 10%, var(--modern-dark-gradient-end) 100%);
  background-size: cover;
}


/* Update topbar button */
.topbar .dropdown-list .dropdown-header,
.topbar .nav-item .nav-link .badge-counter,
.topbar button.btn-primary {
  background-color: var(--modern-dark);
  border-color: var(--modern-dark);
}

/* Botones de header que deben usar el color del sidebar */
.btn-sm.btn-primary,
.topbar .form-inline button.btn-primary {
  background-color: var(--modern-dark) !important;
  border-color: var(--modern-dark) !important;
  color: #ffffff !important;
}

.btn-sm.btn-primary:hover,
.topbar .form-inline button.btn-primary:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* Badge counters en notificaciones */
.topbar .nav-item .nav-link .badge-counter {
  background-color: var(--modern-dark) !important;
}

/* Active navbar items */
.sidebar .nav-item .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Sidebar heading color */
.sidebar .sidebar-heading {
  color: rgba(255, 255, 255, 0.6);
}

/* Status badges */
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.status-cotizado {
    background-color: #fff3cd;
    color: #856404;
}

.status-confirmado {
    background-color: #d4edda;
    color: #155724;
}

.status-pagado {
    background-color: #cce5ff;
    color: #004085;
}

.status-cancelado {
    background-color: #f8d7da;
    color: #721c24;
}

/* Card hover effects */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Dashboard cards */
.dashboard-card {
    border-radius: 0.5rem;
    border: none;
    transition: all 0.2s;
}

.dashboard-card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 0;
}

/* Pagination custom styles */
.pagination-custom .page-item.active .page-link {
    background-color: var(--modern-dark);
    border-color: var(--modern-dark);
}

.pagination-custom .page-link {
    color: var(--modern-dark);
}

/* Border colors for cards */
.border-left-cotizado {
  border-left: 0.25rem solid #ffc107 !important;
}

.border-left-confirmado {
  border-left: 0.25rem solid #17a2b8 !important;
}

.border-left-pagado {
  border-left: 0.25rem solid #28a745 !important;
}

.border-left-cancelado {
  border-left: 0.25rem solid #dc3545 !important;
}

.logo-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #424242;
}

.sidebar {
      transition: all 0.3s ease-in-out;
    }
    
    /* Estilos para las categorías del menú */
    .sidebar-heading {
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;
    }
    
    .menu-heading {
      transition: opacity 0.3s;
    }
    
    /* Mejorar espaciado entre elementos */
    .sidebar .nav-item {
      margin-bottom: 0.5rem;
    }
    
    .sidebar .nav-link {
      display: flex;
      align-items: center;
      padding: 0.6rem 1rem;
      position: relative;
      border-radius: 0.35rem;
      overflow: hidden;
    }
    
    .sidebar .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .sidebar .nav-link i {
      font-size: 1rem;
      transition: all 0.3s;
    }
    
    .sidebar .nav-link span {
      margin-left: 0.75rem;
      transition: opacity 0.3s;
    }
    
    /* Mejoras en el logo */
    .sidebar-brand {
      height: 4.5rem;
      padding: 0.5rem 1rem;
    }
    
    .sidebar-brand-icon {
      transition: all 0.3s;
      font-size: 1.5rem;
    }
    
    .sidebar-brand-text {
      transition: opacity 0.3s, width 0.3s;
      overflow: hidden;
    }
    
    .img-logo {
      height: 45px !important;
      width: auto !important;
      max-height: 45px !important;
      max-width: 200px !important;
      object-fit: contain !important;
      transition: opacity 0.3s;
    }

    /* Centrar el logo cuando el sidebar está contraído */
    .sidebar.toggled .sidebar-brand {
        justify-content: center !important;
    }

    .sidebar.toggled .sidebar-brand .img-logo {
        margin-right: 0 !important;
    }

    
    /* Cuando la barra lateral está contraída */
    .sidebar.toggled .sidebar-brand-text {
      opacity: 0;
      width: 0;
    }

    .sidebar.toggled .sidebar-brand-icon {
      font-size: 1.7rem;
      margin-right: 0;
    }
    
    .sidebar.toggled .menu-heading {
      opacity: 0;
    }
    
    .sidebar {
    border-radius: 10px 0 0 10px; /* Bordes redondeados solo en las esquinas izquierda superior e inferior */
    overflow: hidden; /* Asegura que el contenido no sobresalga */
    }

    .sidebar.toggled .nav-link i {
      font-size: 1.2rem;
      margin-right: 0;
    }

    /* Mejorar aspecto activo */
    .sidebar .nav-item.active .nav-link {
      font-weight: 700; 
      background-color: rgba(255, 255, 255, 0.15);
    }

    /* Divider más elegante */
    .sidebar-divider {
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      margin: 0.7rem 1rem;
    }

    .sidebar-brand-icon i {
      font-size: 1.2rem; /* Ajusta el tamaño del ícono */
    }

    .collapse-inner .collapse-item:hover {
    background-color: #333333 !important;
    color: #fff !important;
  }

  .collapse-inner .collapse-item i {
    padding-right: 2px; 
    color: #565656;
  }

  .collapse-inner .collapse-item.active {
    background-color: #ffffff !important;
    color: #2b2b2b !important;
  }