@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Sora:wght@600;700;800&display=swap');

/*  VARIABLES  */
:root {
  --navy:          #0b1e3d;
  --navy-mid:      #122952;
  --azul:          #1565c0;
  --azul-claro:    #2196f3;
  --cyan:          #00b4d8;
  --blanco:        #ffffff;
  --gris-fondo:    #f0f4f8;
  --gris-borde:    #dde3ed;
  --gris-texto:    #4a5568;
  --gris-muted:    #8a96a8;
  --verde:         #00897b;
  --rojo:          #e53935;
  --sombra-suave:  0 2px 12px rgba(0,0,0,0.07);
  --sombra-card:   0 4px 24px rgba(11,30,61,0.10);
  --radio:         10px;
}

/*  RESET  */
* { box-sizing: border-box; margin: 0; padding: 0; }

/*  BODY  */
body.body-consultas {
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  background: var(--gris-fondo);
  color: var(--navy);
  display: flex;
  flex-direction: column;
}



/*  CONTENIDO PRINCIPAL  */
.section-consultasCliente {
  margin-top: 64px;
  padding: 36px 32px;
  width: 100%;
  max-width: 1100px;
  align-self: center;
  flex: 1;
  animation: aparecer 0.5s ease both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.title-gestionarCliente {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  padding: 15px;
  color: var(--navy);
  letter-spacing: -0.3px;
}

.title-gestionarCliente span {
  color: var(--azul-claro);
}

/* Cabecera de página: título + botón volver en la misma fila */
.fila-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fila-titulo .title-gestionarCliente {
  flex: 1;
  text-align: left;
  margin: 0;
  padding: 0;
}

/*  BARRA DE HERRAMIENTAS  */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar #buscador { flex: 1; min-width: 180px; }
.toolbar .btn-primary { flex-shrink: 0; }
.toolbar .btn-volver { flex-shrink: 0; align-self: center; margin: 0; }

/*  BUSCADOR  */
#buscador {
  padding: 10px 16px 10px 40px !important;
  background: var(--blanco) !important;
  border: 1px solid var(--gris-borde) !important;
  border-radius: var(--radio) !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  box-shadow: var(--sombra-suave);
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a96a8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
}

#buscador::placeholder { color: var(--gris-muted); }

#buscador:focus {
  border-color: var(--azul-claro) !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.12) !important;
}

/*  CARD  */
.card {
  background: var(--blanco);
  border-radius: 14px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-card);
  overflow-x: auto;   /* scroll horizontal cuando la tabla no cabe */
  overflow-y: hidden;
}

/*  TABLA  */
#tabla {
  width: 100%;
  min-width: 580px;   /* evita que las columnas se aplasten */
  border-collapse: separate;
  border-spacing: 0;
}

/* Encabezados */
.th-tabla {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  text-align: left;
  border: none;
  white-space: nowrap;
}
.th-tabla.th-centro { text-align: center; }

/* Esquinas redondeadas del encabezado */
thead tr:first-child .th-tabla:first-child { border-radius: 14px 0 0 0; }
thead tr:first-child .th-tabla:last-child  { border-radius: 0 14px 0 0; }

/* Filas */
#cuerpoTabla tr { transition: background 0.15s; }

#cuerpoTabla tr:hover { background: #f5f8ff; }

#cuerpoTabla td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--gris-texto);
  border: none;
  border-bottom: 1px solid var(--gris-borde);
  vertical-align: middle;
  text-align: left;
}

#cuerpoTabla tr:last-child td { border-bottom: none; }

/* Esquinas redondeadas de la última fila */
#cuerpoTabla tr:last-child td:first-child { border-radius: 0 0 0 14px; }
#cuerpoTabla tr:last-child td:last-child  { border-radius: 0 0 14px 0; }

/* Nombre de empresa — más prominente */
#cuerpoTabla td:first-child {
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
}

/* Centrado solo para celdas con clase td-centro (botones de acción) */
#cuerpoTabla td.td-centro {
  text-align: center;
}

/* Mensaje de carga */
#cuerpoTabla td[colspan="3"] {
  text-align: center !important;
  padding: 40px !important;
  color: var(--gris-muted) !important;
  font-size: 14px;
}

/*  BOTONES DE ACCIÓN  */
.btn-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.btn-empleado {
  background: #e8f4fd;
  color: var(--azul);
  border-color: #b3d4f5;
}

.btn-empleado:hover {
  background: var(--azul);
  color: var(--blanco);
  border-color: var(--azul);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21,101,192,0.25);
}

.btn-equipo {
  background: #e0f7fa;
  color: #00838f;
  border-color: #a0dde6;
}

.btn-equipo:hover {
  background: #00838f;
  color: var(--blanco);
  border-color: #00838f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,131,143,0.25);
}


.btn-accesorio {
  background: #f3e5f5;
  color: #7b1fa2;
  border-color: #ce93d8;
}

.btn-accesorio:hover {
  background: #7b1fa2;
  color: var(--blanco);
  border-color: #7b1fa2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(123,31,162,0.25);
}

.btn-mantenimiento {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}

.btn-mantenimiento:hover {
  background: #2e7d32;
  color: var(--blanco);
  border-color: #2e7d32;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,125,50,0.25);
}

.btn-novedades_tecnico {
  background: #fff8e1;
  color: #b77900;
  border-color: #ffd54f;
}

.btn-novedades_tecnico:hover {
  background: #f9a825;
  color: var(--blanco);
  border-color: #f9a825;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249,168,37,0.25);
}

/*  BOTÓN PRIMARIO (Nuevo Cliente)  */
.btn-primary {
  background: var(--azul);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(21,101,192,0.3);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--azul-claro);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(33,150,243,0.35);
}

/*  BOTÓN VOLVER  */

.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;  
  background: transparent;
  border: 2px solid #3b6ea5;
  color: #3b6ea5;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s, color 0.2s;
}
.btn-volver:hover {
  background: #3b6ea5;
  color: #fff;
}

/*  TOOLTIP DE ESPECIFICACIONES  */
.specs-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--navy);
  color: var(--blanco);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 260px;
  max-width: 320px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  pointer-events: none;
  animation: tooltipIn 0.15s ease;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.specs-tooltip-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cyan);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.specs-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
}

.specs-tooltip-row:last-child { border-bottom: none; }

.specs-label {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.specs-value {
  color: var(--blanco);
  text-align: right;
  font-size: 12px;
}

.specs-obs .specs-value {
  font-style: italic;
  color: rgba(255,255,255,0.75);
}

/*  RESPONSIVE  */
@media (max-width: 900px) {
  .section-consultasCliente { padding: 24px 16px; }
}

@media (max-width: 640px) {
  .section-consultasCliente { padding: 20px 10px; }
  .th-tabla { padding: 10px 10px; font-size: 11px; }
  #cuerpoTabla td { padding: 10px 10px; font-size: 13px; }
  .btn-accion { padding: 6px 10px; font-size: 12px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar #buscador { min-width: unset; width: 100%; }
}


/* ── UTILIDADES GENERALES (reemplazan estilos inline) ─────────────────────── */

.oculto { display: none; }

.req { color: #e74c3c; }

.tooltip-novedades-panel { display: none; min-width: 260px; max-width: 360px; }

.tooltip-vacio { color: #aaa; font-size: 12px; padding: 4px 0; }

.tooltip-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tooltip-item-titulo { font-weight: 600; font-size: 12px; color: #90caf9; }

.tooltip-item-sub { font-size: 11px; color: #ccc; }

.tooltip-footer { color: #aaa; font-size: 11px; padding: 4px 0 2px; text-align: right; }

.col-numero { width: 42px; text-align: center; }

.th-ordenable { cursor: pointer; user-select: none; }

.sort-icon { display: inline; margin-left: 5px; font-size: 11px; }

.sort-icon--inactivo { opacity: 0.35; }

.fila-numero { text-align: center; color: #888; font-size: 13px; }

.fila-sin-hover { cursor: default; }

.nowrap { white-space: nowrap; }

.acciones-fila { display: flex; gap: 6px; justify-content: center; }

.acciones-wrap { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.texto-secundario { color: #aaa; }

.texto-inactivo { color: #e74c3c; font-weight: 600; }

.texto-error { color: #e74c3c; }

.badge-inactivo { font-size: 12px; }

.empty-centro { text-align: center; color: #888; }

.empty-padded { text-align: center; padding: 20px; color: #888; }

.error-centro { text-align: center; padding: 20px; color: #e74c3c; }

.estado-completado { color: #27ae60; font-weight: 600; }

.estado-avanzado   { color: #2980b9; font-weight: 600; }

.estado-pendiente  { color: #e74c3c; font-weight: 600; }

.estado-iniciado   { color: #e67e22; font-weight: 600; }
.filtros-equipos {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;

  background: var(--blanco);
  border: 1px solid #dce5ef;
  border-radius: 16px;
  box-shadow: var(--sombra-suave);

  padding: 0;
  margin: 0 0 16px;
  gap: 0;

  overflow: hidden;
}

/* ============================================================
   DISTRIBUCIÓN DE LOS GRUPOS
   ============================================================ */

.filtro-grupo-total {
  flex: 0 0 88px;
  min-width: 88px;
  max-width: 88px;
}

/* ============================================================
   DISPONIBILIDAD
   ============================================================ */

.filtro-grupo-disponibilidad {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: 30px;
}

.filtro-grupo-rendimiento {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   TITULOS
   ============================================================ */
.filtro-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #172033;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================
   BLOQUE DEL TITULO
   ============================================================ */
.filtro-titulo-contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

/* ============================================================
   TITULO PRINCIPAL
   =========================================================== */
.filtro-titulo-contenido strong {
  display: block;
  color: #172033;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

/* ============================================================
   DESCRIPCION DEL TITULO
   ============================================================ */
.filtro-titulo-contenido small {
  display: block;
  color: #8a96a8;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

/* ============================================================
   ICONOS DE LOS TITULOS
   ============================================================ */
.filtro-titulo-icono {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
}
.filtro-titulo-icono.disponibilidad {
  background: rgba(33, 150, 243, 0.11);
  color: #1683e6;
}
.filtro-titulo-icono.rendimiento {
  background: rgba(0, 172, 193, 0.11);
  color: #009db1;
}

/* ============================================================
   TEXTO DE LAS OPCIONES
   ============================================================ */
.filtro-opcion > span:nth-child(2) {
  flex: 0 0 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  color: #202936;
  transition: color 0.18s ease;
}

/* ============================================================
   STOCK - VERDE VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Stock"] {
  background: rgba(34, 160, 76, 0.045);
  border-color: rgba(34, 160, 76, 0.38);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Stock"]:hover {
  background: rgba(34, 160, 76, 0.10);
  border-color: rgba(34, 160, 76, 0.68);
}
.filtro-opcion[data-filtro-valor="Stock"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Stock"]:hover .filtro-cantidad {
  color: #229f4c;
}

/* ============================================================
   ASIGNADO - NARANJA VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Asignado"] {
  background: rgba(245, 158, 11, 0.045);
  border-color: rgba(245, 158, 11, 0.42);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Asignado"]:hover {
  background: rgba(245, 158, 11, 0.105);
  border-color: rgba(245, 158, 11, 0.72);
}
.filtro-opcion[data-filtro-valor="Asignado"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Asignado"]:hover .filtro-cantidad {
  color: #e89205;
}

/* ============================================================
   BAJA - ROJO VIVO
  ============================================================ */
.filtro-opcion[data-filtro-valor="Baja"] {
  background: rgba(239, 51, 64, 0.045);
  border-color: rgba(239, 51, 64, 0.38);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Baja"]:hover {
  background: rgba(239, 51, 64, 0.10);
  border-color: rgba(239, 51, 64, 0.68);
}
.filtro-opcion[data-filtro-valor="Baja"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Baja"]:hover .filtro-cantidad {
  color: #df3040;
}

/* ============================================================
   OPTIMO - VERDE VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Óptimo"] {
  background: rgba(34, 160, 76, 0.045);
  border-color: rgba(34, 160, 76, 0.38);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Óptimo"]:hover {
  background: rgba(34, 160, 76, 0.10);
  border-color: rgba(34, 160, 76, 0.68);
}
.filtro-opcion[data-filtro-valor="Óptimo"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Óptimo"]:hover .filtro-cantidad {
  color: #229f4c;
}

/* ============================================================
   ACEPTABLE - NARANJA VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Aceptable"] {
  background: rgba(245, 158, 11, 0.045);
  border-color: rgba(245, 158, 11, 0.42);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Aceptable"]:hover {
  background: rgba(245, 158, 11, 0.105);
  border-color: rgba(245, 158, 11, 0.72);
}
.filtro-opcion[data-filtro-valor="Aceptable"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Aceptable"]:hover .filtro-cantidad {
  color: #e89205;
}

/* ============================================================
   DE BAJA - ROJO VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="De baja"] {
  background: rgba(239, 51, 64, 0.045);
  border-color: rgba(239, 51, 64, 0.38);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="De baja"]:hover {
  background: rgba(239, 51, 64, 0.10);
  border-color: rgba(239, 51, 64, 0.68);
}
.filtro-opcion[data-filtro-valor="De baja"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="De baja"]:hover .filtro-cantidad {
  color: #df3040;
}

/* ============================================================
   NOVEDAD - MORADO VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Novedad"] {
  background: rgba(139, 92, 246, 0.045);
  border-color: rgba(139, 92, 246, 0.40);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Novedad"]:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.70);
}
.filtro-opcion[data-filtro-valor="Novedad"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Novedad"]:hover .filtro-cantidad {
  color: #8052e8;
}

/* ============================================================
   DIAGNOSTICO - AZUL GRIS VIVO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Diagnóstico"] {
  background: rgba(96, 125, 139, 0.045);
  border-color: rgba(96, 125, 139, 0.40);
  color: #202936;
}
.filtro-opcion[data-filtro-valor="Diagnóstico"]:hover {
  background: rgba(96, 125, 139, 0.10);
  border-color: rgba(96, 125, 139, 0.70);
}
.filtro-opcion[data-filtro-valor="Diagnóstico"]:hover > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Diagnóstico"]:hover .filtro-cantidad {
  color: #587582;
}
.filtro-icono-rendimiento.optimo {
  color: #22a04c;
}
.filtro-icono-rendimiento.aceptable {
  color: #f39a05;
}
.filtro-icono-rendimiento.de-baja {
  color: #ed3545;
}
.filtro-icono-rendimiento.novedad {
  color: #8957f0;
}
.filtro-icono-rendimiento.diagnostico {
  color: #607d8b;
}
.filtro-punto.stock {
  background: #22a04c;
}
.filtro-punto.asignado {
  background: #f39a05;
}
.filtro-punto.baja {
  background: #ed3545;
}

/* ============================================================
   PUNTOS DE RENDIMIENTO - COMPATIBILIDAD
   ============================================================ */
.filtro-punto.optimo {
  background: #22a04c;
}
.filtro-punto.aceptable {
  background: #f39a05;
}
.filtro-punto.de-baja {
  background: #ed3545;
}
.filtro-punto.novedad {
  background: #8957f0;
}
.filtro-punto.diagnostico {
  background: #607d8b;
}

/* ============================================================
   HOVER GENERAL
   ============================================================ */
.filtro-opcion:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(25, 70, 110, 0.08);
}

/* ============================================================
   CONTENEDOR DE OPCIONES
   ============================================================ */

.filtros-opciones {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* ============================================================
   OPCIONES GENERALES
  ============================================================ */
.filtro-opcion {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 34px;
  height: 34px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #fafcfe;
  color: #202936;
  box-shadow: 0 1px 3px rgba(25, 70, 110, 0.04);
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* ============================================================
   DISPONIBILIDAD
   ============================================================ */
.filtro-disponibilidad {
  padding-left: 9px;
  padding-right: 7px;
}

/* ============================================================
   RENDIMIENTO
   ============================================================ */

.filtro-rendimiento {
  padding-left: 6px;
  padding-right: 5px;
  gap: 3px;
  font-size: 9px;
}

/* ============================================================
   ICONOS DE RENDIMIENTO
   ============================================================ */
.filtro-icono-rendimiento {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

/* ============================================================
   PUNTOS DE DISPONIBILIDAD
   ============================================================ */
.filtro-disponibilidad .filtro-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* ============================================================
   CANTIDAD
   ============================================================ */

.filtro-cantidad {
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #202936;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 700;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

/* ============================================================
   SEPARADOR ENTRE DISPONIBILIDAD Y RENDIMIENTO
   ============================================================ */

.filtros-separador {
  position: relative;
  width: 2px;
  height: 42px;
  margin: 0 25px;
  flex: 0 0 2px;
  align-self: center;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(33, 150, 243, 0.04),
    rgba(0, 172, 193, 0.55),
    rgba(33, 150, 243, 0.04)
  );
  box-shadow:
    0 0 5px rgba(0, 172, 193, 0.12);
}

/* ============================================================
   TOTAL - SECCIÓN FIJA INTEGRADA AL CONTENEDOR
   ============================================================ */

/* ============================================================
   TOTAL DE EQUIPOS
   ============================================================ */

.filtro-grupo-total {
  flex: 0 0 110px;
  width: 110px;
  min-width: 110px;
  max-width: 110px;

  display: flex;
  align-items: stretch;
  align-self: stretch;

  margin: 0;
  padding: 0;

  background: #0b1e3d;

  position: relative;
  z-index: 11;

  border: 0;
  outline: 0;
  box-shadow: none;
}

.filtro-grupo-total .filtro-grupo-titulo {
  width: 100%;
  height: 100%;
  min-height: 100%;

  margin: 0;
  padding: 9px 8px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  background: #0b1e3d;
  color: #fff;

  border: 0;
  outline: 0;
  box-shadow: none;
}

/* ============================================================
   ICONO + TOTAL
   ============================================================ */

.filtro-grupo-total .filtro-titulo-icono {
  width: auto;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  margin: 0;
  padding: 0;

  gap: 6px;

  background: transparent;
  color: #fff;

  font-size: 12px;
}

/* círculo del icono */
.filtro-grupo-total .filtro-titulo-icono i {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.14);

  color: #fff;

  font-size: 12px;
}

/* título Total */
.filtro-grupo-total .filtro-titulo-icono::after {
  content: "Total";

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #fff;

  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;

  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   CONTENIDO DEL TOTAL
   ============================================================ */

.filtro-grupo-total .filtro-titulo-contenido {
  width: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  min-width: 0;
}

/* ocultamos el Total original */
.filtro-grupo-total .filtro-titulo-contenido strong {
  display: none;
}

/* contenido inferior */
.filtro-grupo-total .filtro-titulo-contenido small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #fff;

  font-family: "DM Sans", sans-serif;
  font-size: 0;

  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

/* número */
.filtro-grupo-total #totalEquipos {
  display: block;

  margin: 0 0 3px 0;
  padding: 0;

  color: #fff;

  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;

  line-height: 1;
}

/* palabra equipos */
.filtro-grupo-total .filtro-titulo-contenido small::after {
  content: "equipos";

  display: block;

  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.78);

  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;

  line-height: 1;
}


/* ------------------------------------------------------------
   LA TARJETA SELECCIONADA MANTIENE SU COLOR AL HACER HOVER
   ------------------------------------------------------------ */
.filtro-opcion.activo:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(25, 70, 110, 0.12);
}

/* ============================================================
   SELECCIONADO - STOCK
   ============================================================ */
.filtro-opcion[data-filtro-valor="Stock"].activo,
.filtro-opcion[data-filtro-valor="Stock"].activo:hover {
  background: rgba(34, 160, 76, 0.15);
  border-color: rgba(34, 160, 76, 0.85);
  color: #229f4c;
}
.filtro-opcion[data-filtro-valor="Stock"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Stock"].activo .filtro-cantidad {
  color: #229f4c;
}

/* ============================================================
   SELECCIONADO - ASIGNADO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Asignado"].activo,
.filtro-opcion[data-filtro-valor="Asignado"].activo:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.88);
  color: #e89205;
}
.filtro-opcion[data-filtro-valor="Asignado"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Asignado"].activo .filtro-cantidad {
  color: #e89205;
}

/* ============================================================
   SELECCIONADO - BAJA
   ============================================================ */
.filtro-opcion[data-filtro-valor="Baja"].activo,
.filtro-opcion[data-filtro-valor="Baja"].activo:hover {
  background: rgba(239, 51, 64, 0.15);
  border-color: rgba(239, 51, 64, 0.85);
  color: #df3040;
}
.filtro-opcion[data-filtro-valor="Baja"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Baja"].activo .filtro-cantidad {
  color: #df3040;
}

/* ============================================================
   SELECCIONADO - OPTIMO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Óptimo"].activo,
.filtro-opcion[data-filtro-valor="Óptimo"].activo:hover {
  background: rgba(34, 160, 76, 0.15);
  border-color: rgba(34, 160, 76, 0.85);
  color: #229f4c;
}
.filtro-opcion[data-filtro-valor="Óptimo"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Óptimo"].activo .filtro-cantidad {
  color: #229f4c;
}

/* ============================================================
   SELECCIONADO - ACEPTABLE
   ============================================================ */
.filtro-opcion[data-filtro-valor="Aceptable"].activo,
.filtro-opcion[data-filtro-valor="Aceptable"].activo:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.88);
  color: #e89205;
}
.filtro-opcion[data-filtro-valor="Aceptable"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Aceptable"].activo .filtro-cantidad {
  color: #e89205;
}

/* ============================================================
   SELECCIONADO - DE BAJA
   ============================================================ */
.filtro-opcion[data-filtro-valor="De baja"].activo,
.filtro-opcion[data-filtro-valor="De baja"].activo:hover {
  background: rgba(239, 51, 64, 0.15);
  border-color: rgba(239, 51, 64, 0.85);
  color: #df3040;
}
.filtro-opcion[data-filtro-valor="De baja"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="De baja"].activo .filtro-cantidad {
  color: #df3040;
}

/* ============================================================
   SELECCIONADO - NOVEDAD
   ============================================================ */
.filtro-opcion[data-filtro-valor="Novedad"].activo,
.filtro-opcion[data-filtro-valor="Novedad"].activo:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.88);
  color: #8052e8;
}
.filtro-opcion[data-filtro-valor="Novedad"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Novedad"].activo .filtro-cantidad {
  color: #8052e8;
}

/* ============================================================
   SELECCIONADO - DIAGNOSTICO
   ============================================================ */
.filtro-opcion[data-filtro-valor="Diagnóstico"].activo,
.filtro-opcion[data-filtro-valor="Diagnóstico"].activo:hover {
  background: rgba(96, 125, 139, 0.15);
  border-color: rgba(96, 125, 139, 0.88);
  color: #587582;
}
.filtro-opcion[data-filtro-valor="Diagnóstico"].activo > span:nth-child(2),
.filtro-opcion[data-filtro-valor="Diagnóstico"].activo .filtro-cantidad {
  color: #587582;
}

/* ============================================================
   CANTIDAD DE LA TARJETA SELECCIONADA
   =========================================================== */
.filtro-opcion.activo .filtro-cantidad {
  background: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   PUNTO DE DISPONIBILIDAD SELECCIONADO
   ============================================================ */
.filtro-opcion.activo .filtro-punto {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* ============================================================
   ANIMACIÓN DE ACTUALIZACIÓN DE LOS FILTROS
   ============================================================ */

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion {
  animation: aparecerFiltro 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion:nth-child(1) {
  animation-delay: 0s;
}

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion:nth-child(2) {
  animation-delay: 0.055s;
}

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion:nth-child(3) {
  animation-delay: 0.11s;
}

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion:nth-child(4) {
  animation-delay: 0.165s;
}

.filtro-grupo.actualizando .filtros-opciones .filtro-opcion:nth-child(5) {
  animation-delay: 0.22s;
}

/* ============================================================
   ANIMACIÓN
   ============================================================ */

@keyframes aparecerFiltro {
  0% {
    transform: translateY(11px) scale(0.88);
  }

  45% {
    transform: translateY(-3px) scale(1.045);
  }

  70% {
    transform: translateY(1px) scale(0.985);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   ESTADO INICIAL
   ============================================================ */

/* al cargar la página todas las opciones se muestran normales */
.filtro-opcion {
  opacity: 1;
}

/* ============================================================
   ESTADO CON FILTRO SELECCIONADO
   ============================================================ */

/* cuando existe una selección, solo las opciones no seleccionadas
   se muestran más suaves */
.filtros-opciones:has(.filtro-opcion.activo) .filtro-opcion:not(.activo) {
  opacity: 0.48;
}

/* la opción seleccionada permanece completamente visible */
.filtros-opciones:has(.filtro-opcion.activo) .filtro-opcion.activo {
  opacity: 1;
}

/* al pasar el mouse, la opción no seleccionada recupera visibilidad */
.filtros-opciones:has(.filtro-opcion.activo) .filtro-opcion:not(.activo):hover {
  opacity: 0.82;
}

/* la opción seleccionada conserva toda su intensidad */
.filtros-opciones:has(.filtro-opcion.activo) .filtro-opcion.activo:hover {
  opacity: 1;
}

/* ============================================================
   RESPONSIVE - FILTROS DE EQUIPOS
   ============================================================ */

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

  .filtros-equipos {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow: visible;
  }

  /* ----------------------------------------------------------
     TOTAL
     ---------------------------------------------------------- */

  .filtro-grupo-total {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;

    min-height: 70px;

    border-radius: 10px;
    overflow: hidden;
  }

  .filtro-grupo-total .filtro-grupo-titulo {
    width: 100%;
    min-height: 70px;
    height: 70px;

    flex-direction: row;
    justify-content: center;
    gap: 12px;

    padding: 8px 14px;
  }

  .filtro-grupo-total .filtro-titulo-icono {
    height: 30px;
  }

  .filtro-grupo-total .filtro-titulo-contenido {
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .filtro-grupo-total .filtro-titulo-contenido small {
    flex-direction: row;
    gap: 4px;
  }

  .filtro-grupo-total .filtro-titulo-contenido small::after {
    margin-left: 0;
  }

  /* ----------------------------------------------------------
     GRUPOS DE FILTROS
     ---------------------------------------------------------- */

  .filtro-grupo-disponibilidad,
  .filtro-grupo-rendimiento {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;

    margin-top: 0;
    margin-bottom: 0;
  }

  .filtro-grupo-titulo {
    margin-bottom: 8px;
  }

  /* ----------------------------------------------------------
     SEPARADOR
     ---------------------------------------------------------- */

  .filtros-separador {
    width: 100%;
    height: 1px;

    margin: 1px 0;

    flex: 0 0 1px;
    align-self: stretch;

    background: linear-gradient(
      to right,
      rgba(33, 150, 243, 0.04),
      rgba(0, 172, 193, 0.55),
      rgba(33, 150, 243, 0.04)
    );

    box-shadow:
      0 0 5px rgba(0, 172, 193, 0.10);
  }

  /* ----------------------------------------------------------
     OPCIONES
     ---------------------------------------------------------- */

  .filtros-opciones {
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
  }

  .filtro-opcion {
    flex: 0 0 auto;
    max-width: 100%;
  }
}


/* ------------------------------------------------------------
   TABLET PEQUEÑA
   ------------------------------------------------------------ */

@media (max-width: 760px) {

  .filtros-equipos {
    padding: 11px;
    gap: 10px;
    border-radius: 14px;
  }

  /* ----------------------------------------------------------
     TOTAL
     ---------------------------------------------------------- */

  .filtro-grupo-total {
    min-height: 66px;
    border-radius: 9px;
  }

  .filtro-grupo-total .filtro-grupo-titulo {
    min-height: 66px;
    height: 66px;
    padding: 8px 12px;
    gap: 10px;
  }

  .filtro-grupo-total .filtro-titulo-icono {
    height: 29px;
    gap: 6px;
  }

  .filtro-grupo-total .filtro-titulo-icono i {
    width: 29px;
    height: 29px;
    font-size: 11px;
  }

  .filtro-grupo-total .filtro-titulo-icono::after {
    font-size: 10px;
  }

  .filtro-grupo-total #totalEquipos {
    font-size: 16px;
  }

  .filtro-grupo-total .filtro-titulo-contenido small::after {
    font-size: 8px;
  }

  /* ----------------------------------------------------------
     TITULOS
     ---------------------------------------------------------- */

  .filtro-grupo-titulo {
    gap: 7px;
    margin-bottom: 8px;
  }

  .filtro-titulo-icono {
    width: 29px;
    height: 29px;
    font-size: 13px;
  }

  .filtro-titulo-contenido strong {
    font-size: 11px;
  }

  .filtro-titulo-contenido small {
    font-size: 8px;
  }

  /* ----------------------------------------------------------
     OPCIONES
     ---------------------------------------------------------- */

  .filtros-opciones {
    gap: 6px;
  }

  .filtro-opcion {
    min-height: 33px;
    height: 33px;

    padding: 5px 8px;

    font-size: 9px;
  }

  .filtro-rendimiento {
    padding-left: 7px;
    padding-right: 7px;
  }

  .filtro-cantidad {
    min-width: 18px;
    height: 18px;
    font-size: 8px;
  }

  /* ----------------------------------------------------------
     SEPARADOR
     ---------------------------------------------------------- */

  .filtros-separador {
    margin: 1px 0;
  }
}


/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */

@media (max-width: 560px) {

  .filtros-equipos {
    padding: 10px;
    margin-bottom: 13px;
    gap: 10px;
    border-radius: 13px;
  }

  /* ----------------------------------------------------------
     TOTAL
     ---------------------------------------------------------- */

  .filtro-grupo-total {
    min-height: 62px;
    border-radius: 9px;
  }

  .filtro-grupo-total .filtro-grupo-titulo {
    min-height: 62px;
    height: 62px;

    padding: 7px 10px;
    gap: 9px;
  }

  .filtro-grupo-total .filtro-titulo-icono {
    height: 28px;
    gap: 5px;
  }

  .filtro-grupo-total .filtro-titulo-icono i {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .filtro-grupo-total .filtro-titulo-icono::after {
    font-size: 10px;
  }

  .filtro-grupo-total #totalEquipos {
    font-size: 15px;
  }

  .filtro-grupo-total .filtro-titulo-contenido small::after {
    font-size: 8px;
  }

  /* ----------------------------------------------------------
     TITULOS
     ---------------------------------------------------------- */

  .filtro-grupo-titulo {
    gap: 7px;
    margin-bottom: 7px;
  }

  .filtro-titulo-icono {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .filtro-titulo-contenido strong {
    font-size: 11px;
  }

  .filtro-titulo-contenido small {
    font-size: 7px;
  }

  /* ----------------------------------------------------------
     OPCIONES
     ---------------------------------------------------------- */

  .filtros-opciones {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .filtro-opcion {
    min-height: 32px;
    height: 32px;

    padding: 5px 7px;

    gap: 5px;
    border-radius: 9px;

    font-size: 8px;
  }

  .filtro-disponibilidad {
    padding-left: 8px;
    padding-right: 7px;
  }

  .filtro-rendimiento {
    padding-left: 7px;
    padding-right: 7px;
    gap: 5px;
    font-size: 8px;
  }

  .filtro-icono-rendimiento {
    width: 15px;
    height: 15px;
    font-size: 11px;
  }

  .filtro-disponibilidad .filtro-punto {
    width: 6px;
    height: 6px;
  }

  .filtro-cantidad {
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    margin-left: 1px;
    font-size: 7px;
  }

  /* ----------------------------------------------------------
     SEPARADOR
     ---------------------------------------------------------- */

  .filtros-separador {
    margin: 1px 0;
  }
}


/* ------------------------------------------------------------
   MÓVIL PEQUEÑO
   ------------------------------------------------------------ */

@media (max-width: 400px) {

  .filtros-equipos {
    padding: 9px;
    gap: 9px;
    border-radius: 12px;
  }

  /* ----------------------------------------------------------
     TOTAL
     ---------------------------------------------------------- */

  .filtro-grupo-total {
    min-height: 58px;
    border-radius: 8px;
  }

  .filtro-grupo-total .filtro-grupo-titulo {
    min-height: 58px;
    height: 58px;

    padding: 6px 8px;
    gap: 8px;
  }

  .filtro-grupo-total .filtro-titulo-icono {
    height: 27px;
    gap: 5px;
  }

  .filtro-grupo-total .filtro-titulo-icono i {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }

  .filtro-grupo-total .filtro-titulo-icono::after {
    font-size: 9px;
  }

  .filtro-grupo-total #totalEquipos {
    font-size: 14px;
  }

  .filtro-grupo-total .filtro-titulo-contenido small::after {
    font-size: 7px;
  }

  /* ----------------------------------------------------------
     TITULOS
     ---------------------------------------------------------- */

  .filtro-grupo-titulo {
    gap: 6px;
  }

  .filtro-titulo-icono {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }

  .filtro-titulo-contenido strong {
    font-size: 10px;
  }

  .filtro-titulo-contenido small {
    font-size: 7px;
  }

  /* ----------------------------------------------------------
     OPCIONES
     ---------------------------------------------------------- */

  .filtros-opciones {
    gap: 5px;
  }

  .filtro-opcion {
    min-height: 31px;
    height: 31px;

    padding: 4px 6px;

    gap: 4px;
    border-radius: 8px;

    font-size: 8px;
  }

  .filtro-rendimiento {
    padding-left: 6px;
    padding-right: 6px;
    gap: 4px;
  }

  .filtro-icono-rendimiento {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .filtro-disponibilidad .filtro-punto {
    width: 6px;
    height: 6px;
  }

  .filtro-cantidad {
    min-width: 17px;
    height: 17px;
    font-size: 7px;
  }
}


/* ------------------------------------------------------------
   MÓVIL MUY PEQUEÑO
   ------------------------------------------------------------ */

@media (max-width: 340px) {

  .filtros-equipos {
    padding: 8px;
    gap: 8px;
  }

  /* ----------------------------------------------------------
     TOTAL
     ---------------------------------------------------------- */

  .filtro-grupo-total {
    min-height: 56px;
  }

  .filtro-grupo-total .filtro-grupo-titulo {
    min-height: 56px;
    height: 56px;

    padding: 5px 7px;
    gap: 7px;
  }

  .filtro-grupo-total .filtro-titulo-icono {
    height: 26px;
  }

  .filtro-grupo-total .filtro-titulo-icono i {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .filtro-grupo-total .filtro-titulo-icono::after {
    font-size: 8px;
  }

  .filtro-grupo-total #totalEquipos {
    font-size: 13px;
  }

  /* ----------------------------------------------------------
     OPCIONES
     ---------------------------------------------------------- */

  .filtros-opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .filtro-opcion {
    width: 100%;
    max-width: none;

    justify-content: flex-start;

    min-width: 0;
  }

  .filtro-rendimiento,
  .filtro-disponibilidad {
    width: 100%;
  }

  .filtro-opcion > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .filtro-cantidad {
    margin-left: auto;
  }
}


/* ============================================================
   TOTAL - SIN SEPARACIONES INTERNAS
   ============================================================ */

.filtro-grupo-total,
.filtro-grupo-total .filtro-grupo-titulo {
  border: 0;
  outline: 0;
  box-shadow: none;
}


/* ============================================================
   SEPARACIÓN INTERNA DE LOS FILTROS
   ============================================================ */

.filtro-grupo-disponibilidad,
.filtro-grupo-rendimiento {
  margin-top: 12px;
  margin-bottom: 12px;
}


/* ------------------------------------------------------------
   EN RESPONSIVE NO AGREGAR MARGEN EXTRA A LOS GRUPOS
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

  .filtro-grupo-disponibilidad,
  .filtro-grupo-rendimiento {
    margin-top: 0;
    margin-bottom: 0;
  }

}