/* Fondo personalizado del menú lateral izquierdo */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #2a4d5f !important; /* azul sobrio */
}

/* Texto de los enlaces del menú */
.skin-blue .sidebar a {
    color: #ffffff !important;
}

/* Fondo y texto cuando un elemento está activo o en hover */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li > a:hover {
    background-color: #3c6e86 !important;
    color: #ffffff !important;
}

/* Estilo de encabezados como 'Operaciones' */
.skin-blue .sidebar-menu .header {
    color: #e0a800 !important;
    background-color: transparent;
    font-weight: bold;
}

/* Íconos blancos */
.skin-blue .sidebar-menu i {
    color: #ffffff !important;
}

/* Fondo general del contenido */
.content-wrapper {
    background-color: #f4f6f9;
}

/* ============================
   Diseño de tarjetas modernas
   ============================ */
.card-dashboard,
.box {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: none;
    padding: 20px;
    background: white;
    margin-bottom: 20px;
}

.card-header,
.box-header.with-border h3 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Gráficos */
.box-body .chart canvas,
.chart canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 300px;
    display: block;
    max-width: 100% !important;
}

/* Evita que se desborde el row */
.row {
    margin-right: 0;
    margin-left: 0;
}

/* Asegura que el contenido no se desborde horizontalmente */
.content {
    overflow-x: hidden;
}

/* Transición y desplazamiento del contenido al contraer menú */
.content-wrapper,
.right-side,
.main-footer {
    margin-left: 230px;
    transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
    margin-left: 50px !important;
}

/* Tarjetas pequeñas de resumen */
.summary-card {
    border-radius: 10px;
    padding: 15px;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.summary-card.blue {
    background: linear-gradient(45deg, #4eaaff, #007bff);
}

.summary-card.green {
    background: linear-gradient(45deg, #00b894, #00c853);
}

.summary-card.orange {
    background: linear-gradient(45deg, #ffb300, #ff6f00);
}

.summary-card.red {
    background: linear-gradient(45deg, #f44336, #d32f2f);
}

.summary-card i {
    font-size: 28px;
    opacity: 0.7;
}

/* ================== ESTILOS PARA IMPRESIÓN DE DESPACHOS ================== */
@media print {
  @page {
    margin: 5mm;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * {
    visibility: hidden;
  }

  #areaImpresionDespachos, 
  #areaImpresionDespachos * {
    visibility: visible;
  }

    #areaImpresionDespachos {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      font-family: Arial, sans-serif;
      font-size: 9pt; /* antes: 11px */
    }


  .pagina {
    page-break-after: always;
    margin: 0;
    padding: 0;
  }

  .encabezado {
    display: flex;
    border: 1px solid #000;
    margin-bottom: 8px;
    width: 100%;
  }

  .encabezado .logo {
    width: 30%;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .encabezado .logo img {
    height: 50px;
  }


  .encabezado .logo img {
    height: 50px;
    max-height: 50px;
    max-width: 100%;
    display: block;
    visibility: visible !important; /* 👈 Asegura visibilidad en impresión */
  }

  .encabezado .titulo-central {
    width: 40%;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .encabezado .info {
    width: 30%;
    font-size: 10px;
    padding: 6px;
    line-height: 1.3;
  }

  .tabla-despachos {
    width: 100%;
    border-collapse: collapse !important;  /* 👈 Elimina espacios entre celdas */
    border-spacing: 0 !important;          /* 👈 Asegura que no haya separación */
    table-layout: auto;                   /* 👈 Uniformidad en el tamaño */
    
  }

.tabla-despachos th,
.tabla-despachos td {
  border: 1px solid #000;
  padding: 3px 4px;
  font-size: 7pt;
  white-space: normal;       /* <-- Permite salto de línea */
  overflow: visible;         /* <-- Quita el corte */
  text-overflow: initial;    /* <-- Quita los puntos suspensivos */
}

  .tabla-despachos th {
    background-color: #003c61 !important;
    color: white !important;
    font-weight: bold;
  }
  .tabla-despachos {
  border: 1px solid #000; /* 👉 define un borde uniforme para toda la tabla */
}

  .tabla-despachos .grupo-titulo {
    background-color: #003c61 !important;
    color: white !important;
  }

  .tabla-despachos .subgrupo {
    background-color: #1d6d96 !important;
    color: white !important;
  }
}
/* ACORDEÓN para Bootstrap 3 */
  .panel-minimal {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .panel-minimal .panel-heading {
    background-color: #f7f9fa;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: #333;
  }

  .panel-minimal .panel-heading:hover {
    background-color: #e4ebf1;
  }

  .panel-minimal .panel-heading a {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .panel-minimal .panel-heading a:after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 10px;
    transition: transform 0.2s ease-in-out;
  }

  .panel-minimal .panel-heading a.collapsed:after {
    transform: rotate(-90deg);
  }

  .panel-minimal .panel-body {
    background: #fff;
    padding: 15px;
  }

   .modal-dialog {
    width: 95% !important;
    max-width: none;
  }

  .modal-body {
  max-height: none;
  overflow-y: visible;
  }


  .table-responsive {
    overflow-x: auto;
    margin-bottom: 20px;
  }

  .table th, .table td {
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
  }

  .table th.text-left, .table td.text-left {
    text-align: left;
  }

  .table thead th {
    font-size: 13px;
  }

  textarea {
    resize: none;
  }

  /* ACORDEÓN para Bootstrap 3 */
  .panel-minimal {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .panel-minimal .panel-heading {
    background-color: #f7f9fa;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: #333;
  }

  .panel-minimal .panel-heading:hover {
    background-color: #e4ebf1;
  }

  .panel-minimal .panel-heading a {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .panel-minimal .panel-heading a:after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 10px;
    transition: transform 0.2s ease-in-out;
  }

  .panel-minimal .panel-heading a.collapsed:after {
    transform: rotate(-90deg);
  }

  .panel-minimal .panel-body {
    background: #fff;
    padding: 15px;
  }

  /* === SIOP: Fix AdminLTE mobile header/sidebar === */
@media (max-width: 767px){
  /* La navbar NO debe ir corrida 230px en móvil */
  .main-header .navbar { margin-left: 0 !important; }

  /* El logo no ocupa 230px; dejamos que fluya */
  .main-header .logo { width: 100% !important; float: none !important; }

  /* El contenido tampoco debe ir con margen en móvil */
  .content-wrapper, .main-footer { margin-left: 0 !important; }

  /* Asegura overlay del sidebar por encima del contenido */
  .main-sidebar { z-index: 1051 !important; }
}