h2 {background: #bbffbb;}
/* he de sobreescribir algunos estilos de org-mode */
div#content {max-width: none;}

/* Qué bien, ahora es fácil esto de mantener la cabecera fija cuando la página corre */
/* El z-index hace falta sólo debido a lo de iluminar la columna actual (pues no combinaba bien) */
table.gantt-de-horas-por-idioma thead {position: sticky; top:0; background-color: rgba(255,255,255,0.7); z-index: 1;}

/* probé font-style:italic pero eso lía y no se ve; mejor cambiar toda la fila */
table.gantt-de-horas-por-idioma tbody tr:hover  {filter: invert(0.05);}
/* También me gustaría iluminar la COLUMNA apuntada pero eso es muy difícil (ahora en 2025). Lo haré por JS… */
.columna-resaltada {filter: invert(0.05);}
th.columna-resaltada {background:#eee;}


/* td.aprox {opacity: 0.5;} */
/* td.aprox {color: #eee;} */

/* comento porque confunde: al estar borroso parece más grande */
/* table.gantt-de-horas-por-idioma td.aprox {filter: blur(1px);} */

/* interesante hacer esto mediante CSS, ya que así puedo ordenar tablas numéricamente sin que el ~ me moleste */
table.gantt-de-horas-por-idioma  td.aprox:before {content: "~";}


/* con rejilla visible. O sea, no le pongo border-collapse: collapse */
table.gantt-de-horas-por-idioma  {border-collapse: separate;}
table.gantt-de-horas-por-idioma {
  border-spacing: 0;
  noooo-border-spacing: 3px;
}

table.gantt-de-horas-por-idioma tbody td, table.gantt-de-horas-por-idioma thead th, table.gantt-de-horas-por-idioma tfoot th {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 0;
border-bottom: 1px solid black;
}
table.gantt-de-horas-por-idioma tbody tr:first-child td {
border-top: 1px solid black;
}



summary {cursor: pointer; }
code[title] {cursor: cell;}

span.descr1id {min-width: 10em; display: inline-block;}
/* v2, va con percentiles /*
/* intento definir color base, y luego variaciones. Uso el v8 de pruebas.html. Es guarrillo lo de la imagen de fondo (es porque no existe un background-opacity) pero funciona bastante bien */

/* nombre_idioma puede usarse en: celda con código+nombre, o celda con nombre completo */
table.gantt-de-horas-por-idioma td.nombre_idioma {background: white;}
table.gantt-de-horas-por-idioma tr.totales_para_cada_año td:last-child {background: white;}

table.gantt-de-horas-por-idioma td.código_y_nombre_familia {background: white;}

/* celdas vacías, a veces en repeticiones de cabeceras */
table.gantt-de-horas-por-idioma td.no_aporta_nada, table.gantt-de-horas-por-idioma th.no_aporta_nada {background: white;}

/*
table.gantt-de-horas-por-idioma td {background-image: url(file:///home/dc/proj/ejd/data/iconos/píxel_rojo.png);}
table.gantt-de-horas-por-idioma td.total_en_año {background-image: url(file:///home/dc/proj/ejd/data/iconos/píxel_verde.png);}
table.gantt-de-horas-por-idioma tr.totales_para_cada_año td {background-image: url(file:///home/dc/proj/ejd/data/iconos/píxel_azul.png);}
*/

/* Uso data, para evitarme tener que colocar los ficherillos de imágenes de 1px en varios lados y tener que definir rutas distintas en función de si estoy en local o en remoto */
/* rojo: */
table.gantt-de-horas-por-idioma td {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpaJVBzuIOASsLtpFRRxrFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxF5wUXaTE/yWFFjEeHPfj3b3H3TvAXy8z1eyIAapmGalEXMhkV4XgK3oQQh/GMSIxU58TxSQ8x9c9fHy9i/Is73N/jl4lZzLAJxDHmG5YxBvEM5uWznmfOMyKkkJ8Tjxh0AWJH7kuu/zGueCwn2eGjXRqnjhMLBTaWG5jVjRU4mniiKJqlO/PuKxw3uKslquseU/+wlBOW1nmOs1hJLCIJYgQIKOKEsqwEKVVI8VEivbjHv4hxy+SSyZXCYwcC6hAheT4wf/gd7dmfmrSTQrFgc4X2/4YBYK7QKNm29/Htt04AQLPwJXW8lfqwOwn6bWWFjkC+reBi+uWJu8BlzvA4JMuGZIjBWj683ng/Yy+KQsM3ALda25vzX2cPgBp6ip5AxwcAmMFyl73eHdXe2//nmn29wO/h3LFM/WmBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kLDA4yK4vL7ngAAAAMSURBVAjXY/jPwAAAAwEBABjdjbAAAAAASUVORK5CYII=);}
/* verde: */
table.gantt-de-horas-por-idioma td.total_en_año {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpaJVBzuIOASsLtpFRRxrFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxF5wUXaTE/yWFFjEeHPfj3b3H3TvAXy8z1eyIAapmGalEXMhkV4XgK3oQQh/GMSIxU58TxSQ8x9c9fHy9i/Is73N/jl4lZzLAJxDHmG5YxBvEM5uWznmfOMyKkkJ8Tjxh0AWJH7kuu/zGueCwn2eGjXRqnjhMLBTaWG5jVjRU4mniiKJqlO/PuKxw3uKslquseU/+wlBOW1nmOs1hJLCIJYgQIKOKEsqwEKVVI8VEivbjHv4hxy+SSyZXCYwcC6hAheT4wf/gd7dmfmrSTQrFgc4X2/4YBYK7QKNm29/Htt04AQLPwJXW8lfqwOwn6bWWFjkC+reBi+uWJu8BlzvA4JMuGZIjBWj683ng/Yy+KQsM3ALda25vzX2cPgBp6ip5AxwcAmMFyl73eHdXe2//nmn29wO/h3LFM/WmBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kLDA4zJAJvwqgAAAAMSURBVAjXY2D4zwAAAgIBAKoqnicAAAAASUVORK5CYII=);}
/* azul: */
table.gantt-de-horas-por-idioma tr.totales_para_cada_año td {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpaJVBzuIOASsLtpFRRxrFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxF5wUXaTE/yWFFjEeHPfj3b3H3TvAXy8z1eyIAapmGalEXMhkV4XgK3oQQh/GMSIxU58TxSQ8x9c9fHy9i/Is73N/jl4lZzLAJxDHmG5YxBvEM5uWznmfOMyKkkJ8Tjxh0AWJH7kuu/zGueCwn2eGjXRqnjhMLBTaWG5jVjRU4mniiKJqlO/PuKxw3uKslquseU/+wlBOW1nmOs1hJLCIJYgQIKOKEsqwEKVVI8VEivbjHv4hxy+SSyZXCYwcC6hAheT4wf/gd7dmfmrSTQrFgc4X2/4YBYK7QKNm29/Htt04AQLPwJXW8lfqwOwn6bWWFjkC+reBi+uWJu8BlzvA4JMuGZIjBWj683ng/Yy+KQsM3ALda25vzX2cPgBp6ip5AxwcAmMFyl73eHdXe2//nmn29wO/h3LFM/WmBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kLDA4zECPbNh0AAAAMSURBVAjXY2Bg+A8AAQMBANmq3bMAAAAASUVORK5CYII=);}


table.gantt-de-horas-por-idioma td {background-blend-mode: lighten; }

/* Estos números: 1 lo hace blanco del todo, 0 cancela el filtro (queda color muy brillante), 0.10 rebaja un poquito el color original, etc. */
table.gantt-de-horas-por-idioma   td.vacía                { background: white; }
table.gantt-de-horas-por-idioma   td.sobrepasa_0porciento { background-color: rgba(255, 255, 255, 0.90); }
table.gantt-de-horas-por-idioma  td.sobrepasa_25porciento { background-color: rgba(255, 255, 255, 0.85); }
table.gantt-de-horas-por-idioma  td.sobrepasa_50porciento { background-color: rgba(255, 255, 255, 0.70); }
table.gantt-de-horas-por-idioma  td.sobrepasa_75porciento { background-color: rgba(255, 255, 255, 0.55); }
table.gantt-de-horas-por-idioma td.sobrepasa_100porciento { background-color: rgba(255, 255, 255, 0.40); }

/* Si lo pongo en el „details“ también es interesante; el recuadro enmarcado es más englobante. Pero da la impresión (quizás) de que todo el recuadro es clicable */
summary       {border: 2px solid transparent;}
summary:hover {border: 2px inset black;}


/* Versión sin textos, sólo para ver iconos */
table.gantt-de-horas-por-idioma.sólo-mediante-cuadritos-vacíos td, table.gantt-de-horas-por-idioma.sólo-mediante-cuadritos-vacíos th {font-size:0; width: 10px; height: 10px;}


/* Para las vistas de diagramas de líneas. */

/* No es nada limpio esto del !important, pero realmente quiero que el CSS siempre sobreescriba cualquier movimiento que el JS haga. La forma buena sería crear yo un nuevo div y pedir a dygraphs que use mi nuevo div */
.diagrama-horas .dygraph-legend {
    left:80px !important;
    width:300px !important;
    background: white !important;
    font-size: x-small;
}
/* No sé por qué me hace falta decirlo */
.dygraph-legend > span.highlight {
    border: 1px solid grey;
}


/* Esta parte es para las pestañas; sobreescribo un poco el estilo por defecto (tabcontent.css). Le añado „div.content“ para ganar en especificidad. No sé si con estos cambios de diseño mejoro algo… o lo empeoro. */

div.content ul.tabs {
margin-top: 7px;
}
div.content ul.tabs li a:focus {
color: green;
}

div.content ul.tabs li a {
background: none;
}

div.content div.tabcontents {
padding: 5px;
}