/* =========================================================
   K-CONTROL - MODERNIZACIÓN REPORTE KELLOGGS
   Adaptado a:
   .reports-report
   #reportForm68
   #reportTable68
   ========================================================= */

:root {
  --km-primary: #0d3a62;
  --km-primary-dark: #082946;
  --km-primary-light: #115489;
  --km-blue: #1f6fff;

  --km-bg: #f5f8fc;
  --km-card: #ffffff;
  --km-text: #112f4f;
  --km-muted: #65788c;
  --km-border: #dfe7f1;

  --km-success: #20964b;
  --km-success-soft: #e8f7ee;

  --km-info: #2563eb;
  --km-info-soft: #eaf2ff;

  --km-warning: #f5b400;
  --km-warning-soft: #fff7db;

  --km-danger: #e5484d;
  --km-danger-soft: #fdebec;

  --km-orange: #f97316;
  --km-orange-soft: #fff1e5;

  --km-gray: #8b98a8;
  --km-gray-soft: #f1f4f8;

  --km-radius: 16px;
  --km-radius-lg: 22px;

  --km-shadow-sm: 0 6px 18px rgba(14, 42, 71, 0.06);
  --km-shadow: 0 12px 30px rgba(14, 42, 71, 0.10);
}

/* Fondo general */
body.com-areports.view-report {
  background: var(--km-bg) !important;
  color: var(--km-text);
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}

body.com-areports.view-report .body-wrapper,
body.com-areports.view-report .body-innerwrapper {
  background: var(--km-bg) !important;
}

/* Header Kingmar */
#sp-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--km-border);
  box-shadow: 0 4px 18px rgba(14,42,71,.05);
  min-height: 82px;
}

#sp-header .container,
#sp-main-body .container,
#sp-footer .container {
  width: min(100%, calc(100% - 44px));
}

#sp-logo .logo img {
  max-height: 70px;
  object-fit: contain;
}

/* Botón hamburguesa */
#offcanvas-toggler {
  width: 46px;
  height: 46px;
  border: 1px solid var(--km-border);
  border-radius: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--km-primary) !important;
  box-shadow: var(--km-shadow-sm);
  transition: all .2s ease;
}

#offcanvas-toggler:hover {
  transform: translateY(-1px);
  box-shadow: var(--km-shadow);
}

/* Espaciado principal */
#sp-main-body {
  padding: 32px 0 24px !important;
}

/* Título del reporte */
.reports-report > h1 {
  color: var(--km-primary-dark);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}

/* Tarjeta de descripción / leyenda */
.report-description {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
  padding: 22px 24px;
  margin: 16px 0 18px;
  position: relative;
  overflow: hidden;
}

.report-description::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--km-primary-light), var(--km-blue));
}

/* Botón regresar cuando viene como imagen */
.report-description p:first-child img[src*="BTN_back_menu"] {
  max-width: 150px;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 6px 12px rgba(14,42,71,.10));
}

/* Tabla interna del logo Kelloggs */
.report-description table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 0 12px;
}

.report-description table td {
  border: 0 !important;
  vertical-align: middle;
  padding: 6px 10px 6px 0;
}

.report-description table img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px;
  object-fit: contain;
  border-radius: 18px;
  padding: 8px;
  background: #fff;
  border: 1px solid #edf2f7;
}

.report-description strong {
  color: var(--km-primary-dark);
  font-size: 22px;
  line-height: 1.2;
}

/* Texto de leyenda */
.report-description p:last-child {
  color: var(--km-muted);
  margin: 12px 0 0;
  font-weight: 600;
  line-height: 1.9;
}

/* Botones superiores Download XLS / Print */
.report-buttons {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.report-buttons hr {
  display: none;
}

.report-buttons .btn-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-buttons .btn,
.report-filters .btn,
.report-toolbar .btn {
  border-radius: 13px !important;
  border: 1px solid var(--km-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700;
  padding: 11px 16px;
  transition: all .2s ease;
}

.report-buttons .btn-default,
.report-toolbar .btn-default {
  background: #fff !important;
  color: var(--km-primary) !important;
}

.report-buttons .btn-default:hover,
.report-toolbar .btn-default:hover {
  background: #f8fbff !important;
  transform: translateY(-1px);
}

/* Panel de filtros de fecha */
.report-filters {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
  padding: 22px;
  margin-bottom: 18px;
}

.report-filters fieldset.row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
}

.report-filters .control-group {
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

.report-filters label {
  font-size: 14px;
  font-weight: 800;
  color: var(--km-text);
  margin-bottom: 8px;
  display: block;
}

.report-filters input[type="text"],
.report-toolbar input[type="text"],
.report-toolbar select,
.report-filters select {
  height: 48px;
  border: 1px solid var(--km-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--km-text);
  padding: 0 14px !important;
  box-shadow: none !important;
  font-size: 15px;
  transition: all .2s ease;
}

.report-filters input[type="text"]:focus,
.report-toolbar input[type="text"]:focus,
.report-toolbar select:focus,
.report-filters select:focus {
  outline: none;
  border-color: #8ab6ff !important;
  box-shadow: 0 0 0 4px rgba(31,111,255,.12) !important;
}

/* Calendarios Joomla */
.field-calendar .input-append {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-calendar .input-append input {
  min-width: 180px;
}

.field-calendar .btn-secondary {
  height: 48px;
  width: 48px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fbff !important;
  color: var(--km-primary) !important;
}

/* Submit / Reset */
.report-filters .form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.report-filters .btn-primary {
  background: linear-gradient(180deg, var(--km-primary-light), var(--km-primary)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(13,58,98,.18) !important;
}

.report-filters .btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.report-filters .btn-default {
  background: #fff !important;
  color: var(--km-primary) !important;
}

/* Toolbar de búsqueda / ordenamiento */
.report-toolbar {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
  padding: 16px;
  margin-bottom: 0;
}

#filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#filter-bar .pull-left,
#filter-bar .pull-right {
  float: none !important;
}

#filter_search {
  min-width: 250px;
}

#filter-bar select {
  min-width: 132px;
}

#filter-bar span.btn {
  color: var(--km-muted) !important;
  font-weight: 700;
  padding-left: 4px;
  padding-right: 4px;
}

/* Empuja ordenamiento a la derecha */
#filter-bar .pull-right {
  margin-left: auto;
}

#filter-bar .pull-right + .pull-right {
  margin-left: 0;
}

/* Contenedor de tabla */
.report-table.table-responsive {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
  padding: 16px;
  margin-top: 18px;
  overflow-x: auto;
}

/* Tabla */
#reportTable68 {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  white-space: nowrap;
  margin: 0;
}

#reportTable68 thead th,
#reportTable68 tr.headings > th {
  background: linear-gradient(180deg, var(--km-primary), var(--km-primary-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 15px 14px !important;
  font-size: 14px;
  font-weight: 800;
  vertical-align: middle;
}

#reportTable68 thead th a,
#reportTable68 tr.headings > th a {
  color: #fff !important;
  font-weight: 800;
}

#reportTable68 thead th:first-child {
  border-top-left-radius: 14px;
}

#reportTable68 thead th:last-child {
  border-top-right-radius: 14px;
}

#reportTable68 tbody td {
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid #edf2f7 !important;
  padding: 14px 14px !important;
  color: var(--km-text);
  vertical-align: middle;
  font-size: 14px;
}

#reportTable68 tbody tr:hover td {
  background: #fbfdff !important;
}

/* Lugar y comentarios con salto de línea */
#reportTable68 > tbody > tr > td:nth-child(4),
#reportTable68 > tbody > tr > td:nth-child(8) {
  white-space: normal !important;
  min-width: 220px;
}

/* Estatus */
#reportTable68 > tbody > tr > td:nth-child(7) {
  color: var(--km-text) !important;
  font-weight: 700;
}

/* El reporte trae estatus como span con style inline */
#reportTable68 td:nth-child(7) span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 12px !important;
  color: inherit !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  min-height: 28px;
}

/* Punto dentro del badge */
#reportTable68 td:nth-child(7) span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Realizado */
#reportTable68 td:nth-child(7) span[style*="green"] {
  background: var(--km-success-soft) !important;
  color: var(--km-success) !important;
}

#reportTable68 td:nth-child(7) span[style*="green"]::before {
  background: var(--km-success);
}

/* Programado */
#reportTable68 td:nth-child(7) span[style*="blue"] {
  background: var(--km-info-soft) !important;
  color: var(--km-info) !important;
}

#reportTable68 td:nth-child(7) span[style*="blue"]::before {
  background: var(--km-info);
}

/* En servicio / incompleto */
#reportTable68 td:nth-child(7) span[style*="yellow"] {
  background: var(--km-warning-soft) !important;
  color: #a36b00 !important;
}

#reportTable68 td:nth-child(7) span[style*="yellow"]::before {
  background: var(--km-warning);
}

/* Cancelado / incompleto coral */
#reportTable68 td:nth-child(7) span[style*="coral"],
#reportTable68 td:nth-child(7) span[style*="orange"] {
  background: var(--km-orange-soft) !important;
  color: var(--km-orange) !important;
}

#reportTable68 td:nth-child(7) span[style*="coral"]::before,
#reportTable68 td:nth-child(7) span[style*="orange"]::before {
  background: var(--km-orange);
}

/* Cancelado / visita en falso */
#reportTable68 td:nth-child(7) span[style*="red"] {
  background: var(--km-danger-soft) !important;
  color: var(--km-danger) !important;
}

#reportTable68 td:nth-child(7) span[style*="red"]::before {
  background: var(--km-danger);
}

/* Gris */
#reportTable68 td:nth-child(7) span[style*="gray"],
#reportTable68 td:nth-child(7) span[style*="#999"] {
  background: var(--km-gray-soft) !important;
  color: var(--km-gray) !important;
}

#reportTable68 td:nth-child(7) span[style*="gray"]::before,
#reportTable68 td:nth-child(7) span[style*="#999"]::before {
  background: var(--km-gray);
}

/* Iconos PDF / Fotos */
#reportTable68 td img {
  max-height: 34px;
  width: auto;
  transition: transform .2s ease, filter .2s ease;
}

#reportTable68 td a[href*="pdf_preview"],
#reportTable68 td a[href*="reporteFoto"] {
  width: 42px;
  height: 42px;
  border: 1px solid var(--km-border);
  border-radius: 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(14,42,71,.05);
}

#reportTable68 td a[href*="pdf_preview"]:hover,
#reportTable68 td a[href*="reporteFoto"]:hover {
  background: #f8fbff;
  transform: translateY(-1px);
}

#reportTable68 td a:hover img {
  transform: scale(1.05);
}

/* Paginación */
.pagination {
  margin: 20px 0 0 !important;
  text-align: center;
}

.pagination ul,
ul.pagination {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination li a,
.pagination li span,
.pagination li.active a {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  border: 1px solid var(--km-border) !important;
  background: #fff !important;
  color: var(--km-primary) !important;
  font-weight: 700;
}

.pagination li.active a {
  background: var(--km-primary) !important;
  color: #fff !important;
}

/* Footer */
#sp-footer {
  background: transparent !important;
  color: var(--km-text);
  padding: 0 0 30px !important;
}

#sp-footer .sp-column {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: 24px;
  box-shadow: var(--km-shadow-sm);
  padding: 20px 24px;
  text-align: center;
}

#sp-footer .sp-module-title {
  color: var(--km-primary-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

#sp-footer .breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f8fbff;
  border: 1px solid var(--km-border);
  border-radius: 14px;
  padding: 11px 18px;
  margin: 0 0 16px !important;
}

#sp-footer .sp-copyright {
  display: block;
  color: var(--km-muted);
  font-size: 14px;
}

#sp-footer .sp-copyright img {
  margin-top: 12px;
  width: 70px;
  height: 70px;
}

/* Responsive */
@media (max-width: 992px) {
  #sp-main-body .container,
  #sp-header .container,
  #sp-footer .container {
    width: calc(100% - 26px);
  }

  .report-filters fieldset.row-fluid {
    flex-direction: column;
  }

  .report-filters .control-group {
    width: 100%;
  }

  .field-calendar .input-append input {
    min-width: 0;
    width: 100%;
  }

  #filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #filter-bar .btn-group,
  #filter-bar .pull-right,
  #filter-bar .pull-left {
    width: 100%;
    margin-left: 0 !important;
  }

  #filter_search,
  #filter-bar select {
    width: 100%;
    min-width: 100%;
  }

  .report-buttons .btn-toolbar,
  .report-filters .form-actions {
    justify-content: flex-start;
  }

  .reports-report > h1 {
    font-size: 32px;
  }
}




/* =========================================================
   FIX: FILTROS QUE SE ENCIMAN EN REPORTES
   Pegar al final de modern-reporte.css
   ========================================================= */

/* Limpia floats heredados de Bootstrap/Joomla */
.report-filters,
.report-filters fieldset,
.report-toolbar,
#filter-bar {
  clear: both;
}

/* Convierte los filtros principales en layout flexible */
.report-filters fieldset.row-fluid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 22px;
  align-items: end;
  width: 100%;
}

/* Anula los span viejos: span3, span4, span6, etc. */
.report-filters fieldset.row-fluid > [class*="span"],
.report-filters .control-group[class*="span"] {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  min-width: 0;
}

/* Cada grupo debe ocupar su celda correctamente */
.report-filters .control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Inputs normales */
.report-filters input[type="text"],
.report-filters input[type="number"],
.report-filters input[type="email"],
.report-filters select,
.report-filters textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Calendario Joomla: input + botón */
.report-filters .field-calendar,
.report-filters .input-append {
  width: 100%;
}

.report-filters .field-calendar .input-append {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
}

.report-filters .field-calendar .input-append input {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: auto !important;
}

.report-filters .field-calendar .input-append button {
  flex: 0 0 48px;
  width: 48px !important;
  min-width: 48px !important;
}

/* Acciones Submit / Reset abajo y alineadas */
.report-filters .form-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  margin-top: 18px !important;
}

/* Si algún reporte mete filtros y botones dentro del fieldset */
.report-filters fieldset.row-fluid .form-actions {
  grid-column: 1 / -1;
}

/* Toolbar: búsqueda, resultados, sort, límite */
.report-toolbar #filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Anula floats del toolbar */
.report-toolbar #filter-bar .btn-group,
.report-toolbar #filter-bar .pull-left,
.report-toolbar #filter-bar .pull-right {
  float: none !important;
  margin-left: 0 !important;
}

/* Los controles del toolbar no deben encimarse */
.report-toolbar input,
.report-toolbar select,
.report-toolbar .btn {
  max-width: 100%;
}

/* Búsqueda con buen ancho */
.report-toolbar .filter-search {
  flex: 1 1 260px;
}

.report-toolbar .filter-search input {
  width: 100% !important;
}

/* Resultados */
.report-toolbar #filter-bar .btn-group:has(span.btn) {
  flex: 0 1 auto;
}

/* Selects de ordenar */
.report-toolbar #filter-bar .pull-right {
  flex: 0 1 170px;
}

.report-toolbar #filter-bar .pull-right select {
  width: 100% !important;
}

/* En pantallas medianas, los controles bajan de línea */
@media (max-width: 900px) {
  .report-filters fieldset.row-fluid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .report-toolbar #filter-bar .btn-group,
  .report-toolbar #filter-bar .pull-left,
  .report-toolbar #filter-bar .pull-right {
    flex: 1 1 220px;
  }
}

/* En móvil, todo a una columna */
@media (max-width: 640px) {
  .report-filters fieldset.row-fluid {
    grid-template-columns: 1fr;
  }

  .report-filters .form-actions {
    justify-content: stretch;
  }

  .report-filters .form-actions .btn {
    flex: 1 1 auto;
  }

  .report-toolbar #filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .report-toolbar #filter-bar .btn-group,
  .report-toolbar #filter-bar .pull-left,
  .report-toolbar #filter-bar .pull-right {
    width: 100% !important;
    flex: 1 1 auto;
  }

  .report-toolbar select,
  .report-toolbar input,
  .report-toolbar .btn {
    width: 100% !important;
  }
}



/* =========================================================
   K-CONTROL - FIX COMPLETO FILTROS AVANZADOS
   Para reportes con: Inicio, Final, Zona, Cliente,
   Tipo servicio, Ejecutivo, Técnico, Cobranza, Estado,
   Estatus del servicio, Select All, selects múltiples.
   ========================================================= */

/* Contenedor principal de filtros */
.report-filters {
  background: #ffffff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(14, 42, 71, 0.08) !important;
  padding: 28px !important;
  margin-bottom: 22px !important;
  overflow: visible !important;
  clear: both !important;
}

/* Fieldset de filtros como grilla */
.report-filters fieldset.row-fluid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  gap: 26px 28px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
}

/* Eliminar comportamiento viejo de Bootstrap / Joomla */
.report-filters fieldset.row-fluid > [class*="span"],
.report-filters .control-group[class*="span"],
.report-filters .control-group {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Evita espacios por grupos vacíos */
.report-filters .control-group:empty {
  display: none !important;
}

/* Cada filtro */
.report-filters .control-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Labels */
.report-filters label {
  display: block !important;
  margin: 0 0 8px 0 !important;
  color: #0b2d4d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* Inputs, selects y textarea */
.report-filters input[type="text"],
.report-filters input[type="date"],
.report-filters input[type="number"],
.report-filters input[type="email"],
.report-filters select,
.report-filters textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #dbe6f2 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #0b2d4d !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

/* Focus */
.report-filters input[type="text"]:focus,
.report-filters input[type="date"]:focus,
.report-filters input[type="number"]:focus,
.report-filters input[type="email"]:focus,
.report-filters select:focus,
.report-filters textarea:focus {
  outline: none !important;
  border-color: #8ab6ff !important;
  box-shadow: 0 0 0 4px rgba(31, 111, 255, 0.12) !important;
}

/* Selects múltiples */
.report-filters select[multiple],
.report-filters select[size] {
  height: auto !important;
  min-height: 48px !important;
  max-height: 92px !important;
  overflow-y: auto !important;
  padding: 8px 14px !important;
  line-height: 1.4 !important;
}

/* Mejora visual del scroll en selects múltiples */
.report-filters select[multiple]::-webkit-scrollbar,
.report-filters select[size]::-webkit-scrollbar {
  width: 8px;
}

.report-filters select[multiple]::-webkit-scrollbar-track,
.report-filters select[size]::-webkit-scrollbar-track {
  background: #f1f4f8;
  border-radius: 10px;
}

.report-filters select[multiple]::-webkit-scrollbar-thumb,
.report-filters select[size]::-webkit-scrollbar-thumb {
  background: #9aaabd;
  border-radius: 10px;
}

/* Links tipo Select All */
.report-filters .control-group a,
.report-filters .control-group .select-all,
.report-filters .control-group small,
.report-filters .control-group > span,
.report-filters .control-group > div + a {
  display: inline-block;
  margin-top: 8px !important;
  color: #0d3a62 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* Calendario Joomla */
.report-filters .field-calendar,
.report-filters .input-append {
  width: 100% !important;
  max-width: 100% !important;
}

.report-filters .field-calendar .input-append {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.report-filters .field-calendar .input-append input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Botón calendario */
.report-filters .field-calendar .input-append button,
.report-filters .btn-secondary {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fbff !important;
  color: #0d3a62 !important;
  border: 1px solid #dbe6f2 !important;
  box-shadow: none !important;
}

/* =========================================================
   ESTATUS DEL SERVICIO / CHECKBOXES
   ========================================================= */

/* Cualquier grupo con checkboxes se convierte en tarjeta */
.report-filters .control-group:has(input[type="checkbox"]) {
  grid-column: span 2 !important;
  background: #f8fbff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
}

/* Alternativas por si el navegador o clase lo requiere */
.report-filters .control-group[class*="estatus"],
.report-filters .control-group[class*="status"],
.report-filters .filter-service_status,
.report-filters .filter-estatus,
.report-filters .filter-status {
  grid-column: span 2 !important;
  background: #f8fbff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
}

/* Título del bloque estatus */
.report-filters .control-group:has(input[type="checkbox"]) > label:first-child,
.report-filters .filter-service_status > label:first-child,
.report-filters .filter-estatus > label:first-child,
.report-filters .filter-status > label:first-child {
  margin-bottom: 14px !important;
  color: #0b2d4d !important;
  font-size: 15px !important;
}

/* Checkbox */
.report-filters input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  /*margin: 0 0 0 0 !important;*/
  padding: 0 !important;
  accent-color: #0d3a62 !important;
  vertical-align: middle !important;
}

/* Labels con checkbox */
.report-filters label.checkbox,
.report-filters .checkbox label,
.report-filters label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px 20px !important;
  color: #0b2d4d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Si el sistema pone br entre checkboxes */
.report-filters .control-group br {
  display: none !important;
}

/* =========================================================
   BOTONES SUBMIT / RESET
   ========================================================= */

.report-filters .form-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 20px 0 0 0 !important;
  padding: 18px 0 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #edf2f7 !important;
}

.report-filters .form-actions .btn {
  min-height: 46px !important;
  border-radius: 14px !important;
  padding: 11px 20px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.report-filters .form-actions .btn-primary,
.report-filters .btn-primary {
  background: linear-gradient(180deg, #115489, #0d3a62) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(13, 58, 98, 0.18) !important;
}

.report-filters .form-actions .btn-default,
.report-filters .btn-default {
  background: #ffffff !important;
  color: #0d3a62 !important;
  border: 1px solid #dbe6f2 !important;
}

/* =========================================================
   AJUSTE EXTRA: EVITA QUE SE CENTREN O QUEDEN RAROS
   ========================================================= */

.report-filters * {
  box-sizing: border-box !important;
}

.report-filters fieldset.row-fluid::before,
.report-filters fieldset.row-fluid::after {
  display: none !important;
  content: none !important;
}

.report-filters .clearfix,
.report-filters .clr {
  display: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .report-filters fieldset.row-fluid {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  }

  .report-filters .control-group:has(input[type="checkbox"]),
  .report-filters .control-group[class*="estatus"],
  .report-filters .control-group[class*="status"],
  .report-filters .filter-service_status,
  .report-filters .filter-estatus,
  .report-filters .filter-status {
    grid-column: span 3 !important;
  }
}

@media (max-width: 900px) {
  .report-filters fieldset.row-fluid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }

  .report-filters .control-group:has(input[type="checkbox"]),
  .report-filters .control-group[class*="estatus"],
  .report-filters .control-group[class*="status"],
  .report-filters .filter-service_status,
  .report-filters .filter-estatus,
  .report-filters .filter-status {
    grid-column: span 2 !important;
  }
}

@media (max-width: 640px) {
  .report-filters {
    padding: 18px !important;
  }

  .report-filters fieldset.row-fluid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .report-filters .control-group:has(input[type="checkbox"]),
  .report-filters .control-group[class*="estatus"],
  .report-filters .control-group[class*="status"],
  .report-filters .filter-service_status,
  .report-filters .filter-estatus,
  .report-filters .filter-status {
    grid-column: span 1 !important;
  }

  .report-filters .form-actions {
    justify-content: stretch !important;
  }

  .report-filters .form-actions .btn {
    flex: 1 1 auto !important;
  }

  .report-filters .field-calendar .input-append {
    gap: 6px !important;
  }
}