/* --------- Cabecera: filtros de búsqueda --------- */

th.max {
  width: 100px;
  max-width: 100px;
}

.filtro {
  position: relative;
  display: flex;
  flex-direction: column;
}

.filtro input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  color: black;
  border: 1px solid #6c6c6c;
}

/* Dropdown flotante de resultados */
.results {
  position: absolute;
  top: calc(100% + 2px); /* justo debajo del input */
  left: 0;
  width: 100%;
  background: #e6ccccff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
  color: black;
}

.results div {
  padding: 6px 8px;
  cursor: pointer;
}

.results div:hover {
  background: #f5f5f5;
}

/* --------- Tabla principal ComparaTE --------- */

.tabla_balances {
  table-layout: fixed;      /* clave para anchos fijos */
  width: 100%;
  border-collapse: collapse;
  cursor: default;
}

.tabla_balances tbody tr:hover {
  background-color: #f9f9f9;
  transition: background-color 0.2s ease-in-out;
}

.tabla_balances tbody td {
  border: 1px solid #d1d7d1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Para que el desplegable y tooltips se vean fuera del th */
.tabla_balances thead th,
.tabla_balances tbody td {
  position: relative;
  overflow: visible;
  white-space: nowrap;
}

/* Anchos por tipo de columna (vía colgroup) */
.tabla_balances .col-concepto   { width: 260px; }  /* texto "Cuenta de resultados..." */
.tabla_balances .col-valor      { width: 110px; }  /* importes € */
.tabla_balances .col-porcentaje { width: 60px;  }  /* columna % */
.tabla_balances .col-dif        { width: 60px;  }  /* columna DIF % */

/* --------- Colores especiales y columnas DIF --------- */

.bg-verde-mejor {
  background-color: #edffed !important;
  font-weight: 600;
  border: 3px solid green !important;
}

.bg-dif-mejor { background-color: #edffed !important; }
.bg-dif-peor  { background-color: #fdebeb !important; }

/* Por defecto, ocultamos las columnas de diferencias */
difvsmejor { display: none !important; }

/* Cuando la tabla lleve la clase "show-difvsmejor", se muestran */
.show-difvsmejor .difvsmejor { display: table-cell !important; }

/* --------- Tooltip para la mejor celda (bg-verde-mejor) --------- */

.tabla_balances tbody td.bg-verde-mejor::after {
  content: "Mejor porcentaje de Resultados del Ejercicio";
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances tbody td.bg-verde-mejor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances tbody td.bg-verde-mejor:hover::after,
.tabla_balances tbody td.bg-verde-mejor:hover::before {
  opacity: 1;
}

/* --------- Tooltips para cabeceras empresaX --------- */
/* Patrón de IDs:
   empresa1-anyo-th, empresa2-anyo-th, empresa3-anyo-th, empresa4-anyo-th
   empresaX-porcen-th
   empresaX-dif-th
*/

/* 1) ANYO: Ejercicio correspondiente a las partidas mostradas. */
.tabla_balances thead th[id^="empresa"][id$="-anyo-th"]::after {
  content: "Ejercicio correspondiente a las partidas mostradas.";
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-anyo-th"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-anyo-th"]:hover::after,
.tabla_balances thead th[id^="empresa"][id$="-anyo-th"]:hover::before {
  opacity: 1;
}

/* 2) PORCEN: % con respecto a Ingresos */
.tabla_balances thead th[id^="empresa"][id$="-porcen-th"]::after {
  content: "% con respecto a Ingresos";
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-porcen-th"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-porcen-th"]:hover::after,
.tabla_balances thead th[id^="empresa"][id$="-porcen-th"]:hover::before {
  opacity: 1;
}

/* 3) DIF: % diferencia con respecto a la empresa (Destacada) */
.tabla_balances thead th[id^="empresa"][id$="-dif-th"]::after {
  content: "% diferencia con respecto a la empresa (Destacada)";
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-dif-th"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 300;
}

.tabla_balances thead th[id^="empresa"][id$="-dif-th"]:hover::after,
.tabla_balances thead th[id^="empresa"][id$="-dif-th"]:hover::before {
  opacity: 1;
}

/* --------- Impresión: ocultar DIF si no interesa --------- */
@media print {
  .difvsmejor { display: none !important; }
}

.table_responsive {
  overflow: hidden;
}

/* --------- Contenedor con scroll horizontal sin barra --------- */

#activo.table-responsive {
  width: 100%;
  overflow-x: auto;                  /* permite desplazar horizontalmente */
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */

  /* Ocultar la barra de scroll pero mantener el desplazamiento */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE / Edge antiguo */
}

#activo.table-responsive::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Edge (Chromium) */
}

/* En pantallas pequeñas, obligamos a que la tabla sea más ancha
   que la pantalla para que haya contenido desplazable */
@media (max-width: 768px) {
  .tabla_balances {
    width: 100%;
    max-width: none;
    min-width: 900px;    /* ajusta según cuántas columnas quieras ver cómodamente */
  }
}