/*
* custom.css
* Estilos personalizados para TerraLogistics
******************************************************************************/

/*
* Legibilidad global — text-muted override
* El gris por defecto del tema (#a8aaae) tiene muy poco contraste.
* Usamos #555e6c para mejor legibilidad en todos los contextos.
******************************************************************************/
.text-muted,
small.text-muted,
p.text-muted,
span.text-muted,
.card-subtitle,
.form-text {
  color: #555e6c !important;
}

/* Hint del breadcrumb — más visible y con mejor tamaño */
.breadcrumb-hint {
  color: #555e6c;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

/* Primer nivel del breadcrumb (padre) */
.breadcrumb-parent {
  color: #697a8d;
  font-weight: 400;
}

/*
* Offcanvas - Document Panel Overflow Management
******************************************************************************/

/* Asegurar que el offcanvas tenga el alto correcto y maneje el overflow */
#offcanvasDocuments .offcanvas-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 60px) !important;
  /* Altura completa menos header */
}

/* Contenedor principal del panel de documentos */
#offcanvasDocuments .documents-panel-content {
  min-height: 0 !important;
  /* Permitir que el flex funcione correctamente */
}

/* Sección de carga de documentos - fija en la parte superior */
#offcanvasDocuments .upload-section {
  flex-shrink: 0 !important;
  /* No permitir que se reduzca */
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  margin: -1rem -1rem 0 -1rem !important;
  padding: 1rem !important;
  border-bottom: 1px solid #e3e7ed !important;
}

/* Separador entre secciones */
#offcanvasDocuments .separator-line {
  margin: 0 !important;
  border-color: #e3e7ed !important;
}

/* Sección de lista de documentos - scrolleable */
#offcanvasDocuments .documents-list-section {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  padding-top: 1rem !important;
}

/* Asegurar que el contenido se mantenga dentro del área visible */
#offcanvasDocuments .offcanvas-body .list-group {
  max-height: none !important;
  overflow: visible !important;
}

/* Mejorar la visualización cuando hay muchos documentos */
#offcanvasDocuments .list-group-item {
  border-left: none !important;
  border-right: none !important;
  padding: 0.75rem 0.5rem !important;
}

#offcanvasDocuments .list-group-item:first-child {
  border-top: 1px solid #d9dee3 !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

#offcanvasDocuments .list-group-item:last-child {
  border-bottom: 1px solid #d9dee3 !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Espaciado mejorado para formularios dentro del offcanvas */
#offcanvasDocuments .offcanvas-body form {
  margin-bottom: 1.5rem !important;
}

#offcanvasDocuments .offcanvas-body hr {
  margin: 0.5rem 0 !important;
}

/* Mejorar botones de acción en documentos */
#offcanvasDocuments .btn-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/*
* Shipment Orders - Lista y Modal
******************************************************************************/

/* Estilo para la fila activa en móvil */
.active-row {
  background-color: rgba(105, 108, 255, 0.08) !important;
}

/* Hacer que el número de contenedor destaque más */
.table .badge.bg-primary {
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Mejorar visualización de iconos de acciones */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Asegurar que las celdas de la tabla se alineen correctamente */
.datatables-shipment-orders tbody td {
  vertical-align: middle;
}

/* Mejorar la visualización de la tabla en responsive */
.datatables-shipment-orders.dataTable.dtr-column>tbody>tr>td.dtr-control:before {
  font-size: 0.85rem;
  line-height: 1.2rem;
  height: 1.2rem;
  width: 1.2rem;
  margin-top: 0.25rem;
}

/* Estilos para las tarjetas expandidas */
.datatables-shipment-orders .table-sm {
  margin-bottom: 0;
}

.datatables-shipment-orders .table-sm td {
  padding: 0.5rem 0.75rem;
}

.datatables-shipment-orders .table-sm td.fw-bold {
  width: 40%;
}

/* Estilos responsivos para móvil */
@media (max-width: 767.98px) {

  /* DataTable responsive en móvil */
  .dtr-control:before {
    box-shadow: 0 0 0 2px #fff !important;
  }

  .dtr-details {
    margin-bottom: 0;
  }

  .cita-info {
    background-color: rgba(105, 108, 255, 0.04);
  }

  /* Corregir alineación de columnas en móvil */
  .datatables-shipment-orders.dataTable.responsive thead th.d-none {
    display: none !important;
  }

  .datatables-shipment-orders tbody td {
    padding: 0.75rem 0.5rem;
  }

  /* Modal de detalles full screen en móvil */
  #orderDetailsModal .modal-dialog {
    margin: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
  }

  #orderDetailsModal .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
  }

  #orderDetailsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
  }

  /* Mejorar presentación del contenido en móvil */
  #orderDetailsModal .row {
    margin-bottom: 1rem;
  }

  #orderDetailsModal .col-form-label {
    font-weight: 600;
    color: #566a7f;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
  }

  #orderDetailsModal .form-control-plaintext {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #384454;
    padding-left: 0;
    padding-right: 0;
    border: none;
    background: transparent;
  }

  /* Badges más grandes en móvil */
  #orderDetailsModal .badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
  }

  /* Separadores visuales */
  #orderDetailsModal .row+.row {
    border-top: 1px solid #e3e7ed;
    padding-top: 1rem;
    margin-top: 1rem;
  }

  /* Iconos más pequeños en labels */
  #orderDetailsModal .col-form-label i {
    font-size: 0.75rem;
    opacity: 0.7;
  }
}

/* Estilos para roles */
.permission-group {
  border-bottom: 1px solid #d9dee3;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.permission-group:last-child {
  border-bottom: none;
}

.permission-child {
  margin-left: 2rem;
}
/* ════════════════════════════════════════════════════════════════
   Legibilidad global en MODO OSCURO (.dark-style)
   Asegura que labels, placeholders, ayudas y texto de formularios
   contrasten correctamente sobre el fondo oscuro en todas las vistas.
   ════════════════════════════════════════════════════════════════ */
.dark-style .form-label {
  color: #cfd3ec !important;
}
.dark-style .form-text,
.dark-style .text-muted {
  color: rgba(207, 211, 236, 0.65) !important;
}
.dark-style .form-control,
.dark-style .form-select {
  color: #cfd3ec !important;
  background-color: #25293c !important;
  border-color: #434968 !important;
}
.dark-style .form-control::placeholder {
  color: rgba(207, 211, 236, 0.45) !important;
}
/* Botón interno del input de archivo (Choose File) en oscuro */
.dark-style .form-control[type="file"]::file-selector-button {
  background-color: #383d57 !important;
  color: #cfd3ec !important;
}
.dark-style .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.dark-style .alert-info {
  color: #cfd3ec !important;
}

/* ════════════════════════════════════════════════════════════════
   Jerarquía visual de menú: diferenciar nivel 3 del nivel 2
   - Nivel 3 con mayor sangría, fuente algo menor y una línea guía
     vertical que evidencia que cuelga del item de nivel 2.
   ════════════════════════════════════════════════════════════════ */
.menu-sub.menu-sub-level3 {
  margin-left: 1.1rem;
  border-left: 2px solid rgba(115, 103, 240, 0.30);
}
.menu-sub.menu-sub-level3 > .menu-item > .menu-link {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-size: 0.85rem;
}
/* Bullet del nivel 3 más pequeño y tenue que el del nivel 2 */
.menu-sub.menu-sub-level3 > .menu-item > .menu-link::before {
  transform: scale(0.7);
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   status-note: tarjeta informativa sutil con borde lateral de color.
   Reemplaza los alert-info/alert-warning lavados. Compatible claro/oscuro
   (usa variables de tema para fondo y texto).
   ════════════════════════════════════════════════════════════════ */
.status-note {
  background-color: #f5f5f9;
  border: 1px solid #e4e6e8;
  border-left-width: 4px;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.dark-style .status-note {
  background-color: #2f3349;
  border-color: #434968;
}
.status-note-success { border-left-color: #28c76f; }
.status-note-warning { border-left-color: #ff9f43; }
.status-note-info    { border-left-color: #00cfe8; }
.status-note-danger  { border-left-color: #ea5455; }

/* Ícono circular del status-note */
.status-note-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
}

/* ════════════════════════════════════════════════════════════════
   Edición/creación de usuario — panel lateral + secciones de formulario
   ════════════════════════════════════════════════════════════════ */
.user-side-panel {
  background-color: #f8f8fb;
  border: 1px solid #e4e6e8;
  border-radius: 0.6rem;
  padding: 1.5rem;
  position: sticky;
  top: 1rem;
}
.dark-style .user-side-panel {
  background-color: #2f3349;
  border-color: #434968;
}

/* Cada sección como una tarjeta sutil (no blanco continuo) */
.form-section {
  background-color: #fff;
  border: 1px solid #e6e8ea;
  border-radius: 0.6rem;
  padding: 1.25rem 1.4rem;
}
.dark-style .form-section {
  background-color: #2f3349;
  border-color: #434968;
}
.form-section-title {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-heading-color, #566a7f);
  padding-bottom: 0.7rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #e4e6e8;
}
.dark-style .form-section-title {
  border-bottom-color: #434968;
  color: #cfd3ec;
}
/* Acento de color en el ícono del título de cada sección */
.form-section-title i {
  width: 30px;
  height: 30px;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
  font-size: 1rem;
  background-color: rgba(115, 103, 240, 0.12);
  color: #7367f0;
}
.form-section-title.accent-info    i { background-color: rgba(0, 207, 232, 0.12);  color: #00cfe8; }
.form-section-title.accent-success i { background-color: rgba(40, 199, 111, 0.12); color: #28c76f; }
.form-section-title.accent-warning i { background-color: rgba(255, 159, 67, 0.12); color: #ff9f43; }

/* ════════════════════════════════════════════════════════════════
   Tablas compactas (listados con muchas columnas)
   ════════════════════════════════════════════════════════════════ */
.table-compact th,
.table-compact td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}
.table-compact thead th {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* El avatar del usuario un poco más pequeño en tabla compacta */
.table-compact .avatar.avatar-sm {
  width: 2rem;
  height: 2rem;
}
.table-compact h6 {
  font-size: 0.875rem;
}

/* ════════════════════════════════════════════════════════════════
   Avatar del header (foto de perfil / iniciales)
   Anillo con box-shadow (no afecta layout ni el punto "online").
   ════════════════════════════════════════════════════════════════ */
.header-avatar img,
.header-avatar .avatar-initial {
  border-radius: 50%;
  object-fit: cover;
  /* doble anillo: blanco interno + color de marca externo */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(115, 103, 240, 0.55);
}
.dark-style .header-avatar img,
.dark-style .header-avatar .avatar-initial {
  box-shadow: 0 0 0 2px #2f3349, 0 0 0 3px rgba(115, 103, 240, 0.7);
}
/* Iniciales en el header: fondo de marca y texto blanco (no plano) */
.header-avatar .avatar-initial {
  background-color: #6e63f0 !important;
  color: #fff !important;
  font-weight: 600;
}