/* Estilos personalizados para el dashboard */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
}

.card {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    position: relative; /* asegura contexto y z-index controlable */
    z-index: 0;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card h4 {
    font-size: 1.3rem;
    color: #004074;
}

.card h6 {
    font-size: 1rem;
    color: #6c757d;
}

.card p {
    font-size: 0.95rem;
    color: #333;
}

.btn-primary {
    background-color: #004074;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 6px 14px;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #002f56;
}

.btn .lucide {
    stroke: white;
}

.btn-azul-claro {
    background-color: #0d6efd;
    border: none;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-azul-claro:hover {
    background-color: #0b5ed7;
}

/* Barras personalizadas */
.custom-progress {
    background-color: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    height: 24px;
    width: 100%;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.custom-progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    transition: width 0.6s ease;
    border-radius: 20px;
}

/* Colores según desempeño */
.bg-custom-success {
    background-color: #28a745;
}

.bg-custom-warning {
    background-color: #ffc107;
    color: #000;
}

.bg-custom-danger {
    background-color: #dc3545;
}

.tabla-espaciada {
  border-collapse: separate !important;
  border-spacing: 6px;
}

.tabla-espaciada td {
  border-radius: 8px;
  background-clip: padding-box;
  background-color: white; /* Fondo blanco para que se vea el espaciado */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra opcional suave */
  padding: 8px;
}

#calendario table.table {
  border-collapse: separate !important;
  border-spacing: 6px !important;
}

#calendario table.table td {
  border-radius: 8px !important;
  background-clip: padding-box;
  padding: 6px;
  border: none !important;
}

/* Asegurar que los dropdowns de filtros se muestren sobre las tarjetas */
.filters-card {
  position: relative;
  z-index: 1; /* no sobre el modal */
  overflow: visible;
}
.filters-card .dropdown-menu {
  z-index: 1040; /* debajo del modal/backdrop */
}
/* Portal handling via JS sets position/coords; no width 100% here */
.modal-backdrop { z-index: 999990 !important; }
.modal { z-index: 1000000 !important; }
/* Limitar el ancho solo cuando sea fullscreen; permitir tamaños estándar en xl/lg */
.modal .modal-dialog.modal-fullscreen { max-width: 100% !important; }
.modal .modal-body {
  overflow: auto;
}
.modal-open .dropdown-menu { display: none !important; }
.modal-open .filters-card {
  z-index: -1 !important; /* empuja la tarjeta detrás del backdrop */
}
.filters-hidden { /* deprecado: ya no ocultamos, mantenemos por compatibilidad */ }

/* Contenedor recomendado para Chart.js para evitar reflows infinitos */
.chart-container {
  position: relative;
  width: 100%;
  height: 320px; /* altura fija para gráficos inline */
  overflow: hidden;
}

/* Weibull metric cards scrolling row */
.weibull-cards-row {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 12px;
  white-space: nowrap;
}
.weibull-card-item { flex: 0 0 200px; min-width: 200px; }

/* Ensure single-row, full-width, equal-width cards in fullscreen modal */
#modal-fallas-detalle .modal-body { padding: 12px 16px; }
#modal-fallas-detalle #weibull-cards {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 12px;
  overflow-x: hidden; /* ocupamos todo el ancho, sin scroll */
}
#modal-fallas-detalle #weibull-cards .weibull-card-item {
  flex: 1 1 0 !important; /* igual ancho para las 8 tarjetas */
  min-width: 0 !important; /* permitir que en pantallas pequeñas se ajusten */
}

/* ========== Print: Informe Estrategia LF ========== */
/* Informe PDF */
#informe-pdf { display: none; }
/* Elementos exclusivos de impresión */
#informe-pdf .print-only { display: none; }
@page {
  size: Letter;
  margin: 12mm;
}
@media print {
  @page { margin: 12mm; }
  /* Exportar sólo el área principal cuando activemos la clase */
  body.print-main * { visibility: hidden !important; }
  body.print-main #export-frame, body.print-main #export-frame * { visibility: visible !important; }
  body.print-main #export-frame {
    position: absolute; left: 0; top: 0; width: 100%;
    padding: 15mm; /* margen interno extra */
  }
  /* Forzar impresión de colores y fondos en cabecera */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body * { visibility: hidden; }
  #informe-pdf, #informe-pdf * { visibility: visible; }
  #informe-pdf {
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding: 20px 24px;
  }
  #informe-pdf .informe-wrap {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }
  #informe-pdf .informe-header {
    position: absolute;
    top: 6mm;
    left: 0; right: 0;
    display: flex;
    justify-content: flex-end; /* logo a la derecha */
    align-items: center;
    padding: 0 16px;
  }
  #informe-pdf .informe-content { margin-top: 12mm; margin-bottom: 16mm; }
  #informe-pdf .informe-portada {
    /* Centrar horizontal y verticalmente en la página de impresión */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto; /* centrar horizontal */
    min-height: 60vh; /* aproximar centro vertical considerando contenido previo */
  }
  #informe-pdf .informe-portada h2 {
    font-size: 20px;
    line-height: 1.25;
    color: #004074;
    font-weight: 700;
  }
  #informe-pdf .informe-footer {
    position: fixed;
    right: 12mm;
    bottom: 10mm;
    font-size: 11px;
    color: #333;
    text-align: right;
  }
  /* Utilidad de salto de página si se necesitara en futuro */
  #informe-pdf .page-break { page-break-after: always; break-after: page; }
  #informe-pdf table.informe-table {
    width: 80%;              /* más angosta */
    margin: 0 auto;          /* centrada */
    border-collapse: collapse;
    font-size: 12px;
  }
  #informe-pdf table.informe-table th,
  #informe-pdf table.informe-table td {
    border: 1px solid #444;
    padding: 6px 8px;
    vertical-align: middle;
  }
  #informe-pdf table.informe-table thead th {
    /* Azul sólido como los números de disponibilidad (#0d6efd) */
    background: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-color: #0a58ca !important;
  }
  /* Mostrar elementos solo en impresión */
  #informe-pdf .print-only { display: block; }
  /* Para mayor compatibilidad en PDF, usar imágenes base64 y ocultar canvas */
  #informe-pdf .print-only canvas { display: none !important; }
  #informe-pdf .print-only img { display: block !important; max-width: 100%; height: auto; }
  /* Tipografías y listas sección 2 */
  #informe-pdf .titulo-sec { font-size: 16px; color: #004074; font-weight: 700; margin: 12px 0 8px 0; }
  #informe-pdf .subtitulo-sec { font-size: 13px; color: #004074; font-weight: 700; margin: 12px 0 6px 0; }
  #informe-pdf .parrafo-sec { font-size: 12px; color: #000; margin: 0 0 8px 0; text-align: justify; }
  #informe-pdf .lista-vinetas { margin: 0 0 8px 16px; padding: 0; list-style: none; font-size: 12px; }
  #informe-pdf .lista-vinetas li::before { content: "\00BB\00A0"; color: #0d6efd; }
  /* Disposición en dos columnas */
  #informe-pdf .cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr !important; /* mismo ancho */
    gap: 12px;
    margin-top: 0;
    /* Simular una sola fila que bordea ambas columnas */
    border: 1px solid #999;
    border-radius: 6px;
    padding: 8px 10px;
    overflow: hidden; /* para que el border-radius recorte contenido interno */
  }
  #informe-pdf .col-box {
    border: none;            /* sin borde propio: el contenedor crea el borde único */
    border-radius: 0;
    padding: 6px 8px;        /* ligeramente más compacto dentro del contenedor */
    min-height: 120px;
    width: 100% !important; /* ocupar todo el ancho de la columna */
  }
  /* Alinear gráfico de la izquierda al fondo manteniendo el título arriba */
  #informe-pdf #col-malos-l1-box .print-only {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #informe-pdf #print-l1-malos-bar,
  #informe-pdf #print-l1-malos-bar-img {
    margin-top: auto !important;
    align-self: stretch;
  }
  #informe-pdf .col-box .col-title {
    font-size: 13px;
    font-weight: 700;
    color: #004074;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  /* (Revert) No forzar tamaño del canvas: dejar que Chart.js + style inline definan tamaño */
  /* Ocultar navegación y fondos para PDF limpio */
  nav, header, footer, .filters-card { display: none !important; }
}