/* ── Contenido ────────────────────────────────────────────────────────── */
.contenido {
    padding: 24px;
    margin-left: 80px;
    background: white;
    min-height: 300px;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    overflow-x: auto;
}

.contenido ul li::marker {
    color: var(--color-marca);
}

.contenido a:link,
.contenido a:visited {
    color: var(--color-texto);
}

.contenido a:hover {
    color: var(--color-marca);

}

/* ── Tabla de páginas (índice) ────────────────────────────────────────── */
.tabla-paginas {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.tabla-paginas th {
    background: var(--color-marca);
    color: white;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
}

.tabla-paginas td {
    padding: 9px 14px;
    border-bottom: 1px solid #e8e8e8;
}

.tabla-paginas tr:last-child td {
    border-bottom: none;
}

.tabla-paginas tr:hover td {
    background: #f0f9fa;
}

.tabla-paginas a {
    color: var(--color-marca);
    text-decoration: none;
}

.tabla-paginas a:hover {
    text-decoration: underline;
}

/* ── Aviso de migración (alias de .aviso-info definido en base.css) ───── */
.aviso-migracion {
    background: #f0f9fa;
    border-left: 4px solid var(--color-marca);
    padding: 16px 20px;
    border-radius: 0 6px 6px 0;
    margin-top: 16px;
    color: #444;
}

.aviso-migracion a {
    color: var(--color-marca);
}

/* ── Byline del weathermap ────────────────────────────────────────────── */
/* El <span id="byline"> viene inyectado desde el contenido del weathermap */
#byline {
    display: block;
    background: var(--color-fondo-alt);
    border-top: 1px solid var(--color-borde);
    padding: 8px 24px;
    font-size: 0.875rem;
    color: #555;
    text-align: left;
}

#byline a {
    color: var(--color-marca);
    text-decoration: none;
}

#byline a:hover {
    text-decoration: underline;
}

/* ── Popup overlib (weathermap hover) ─────────────────────────────────── */
/* base.css aplica table{width:100%} y td{width:25%} globalmente, lo que
   estira el popup de overlib al ancho de la página. Se resetea aquí. */
#overDiv table {
    width: auto !important;
    min-width: 180px !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

#overDiv td {
    width: auto !important;
    overflow: visible !important;
    vertical-align: top !important;
    /* Color gris claro para caption y contenido (sobreescribe bgcolor de overlib) */
    background-color: #e8e8e8 !important;
    color: #333 !important;
    padding: 2px 4px !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .contenido {
        padding: 16px;
    }
}

/* ── Páginas Display.html (contenido de arsenico/weber) ───────────────── */

/* Anula td{overflow:hidden} de base.css para todo el contenido tabular */
.contenido table td {
    overflow: visible;
}

/* Título de página */
.contenido h1, .contenido H1 {
    color: var(--color-marca);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 8px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0f0f2;
}

/* Separadores */
.contenido hr {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 10px 0;
}

/* Tabla de metadatos (Línea, Sistema, Administrador).
   Se excluyen: tabla de gráficas (align="center"/"left"), .tabla-paginas y
   tablas de estadísticas diarias (contienen celdas .datahead).
   width/td-width se fuerzan para anular base.css. */
.contenido > table:not([align]):not(.tabla-paginas):not(:has(.datahead)) {
    width: auto !important;
    border-collapse: collapse;
    background: var(--color-fondo-alt);
    border: 1px solid var(--color-borde);
    margin-bottom: 4px;
    font-size: 0.9rem;
    clear: both;
}

.contenido > table:not([align]):not(.tabla-paginas):not(:has(.datahead)) td {
    width: auto !important;
    padding: 4px 12px 4px 10px;
}

.contenido > table:not([align]):not(.tabla-paginas):not(:has(.datahead)) td:first-child {
    color: #555;
    font-weight: 600;
    white-space: nowrap;
    border-right: 1px solid #d0ecef;
}

/* Tablas de estadísticas diarias/mensuales (contienen celdas .datahead) */
.contenido > table:has(.datahead) {
    width: auto !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    margin: 0 0 12px 0;
}

.contenido > table:has(.datahead) td {
    width: auto !important;
    padding: 3px 6px !important;
    text-align: right;
    white-space: nowrap;
    border: 1px solid #ccc;
}

.contenido > table:has(.datahead) td:first-child {
    text-align: left;
    font-weight: 600;
    color: #444;
}

/* Navegación por anclas (Diario, Semanal, Mensual...) */
#wbb_pagelinks {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    clear: both;
}

#wbb_pagelinks li {
    margin: 0;
}

#wbb_pagelinks a {
    display: inline-block;
    padding: 4px 14px;
    background: var(--color-fondo-alt);
    color: #555;
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

#wbb_pagelinks a:hover {
    background: var(--color-borde);
    color: #333;
    border-color: #bbb;
}

/* Contenedor de gráficas (table align="left" o align="center") */
.contenido table[align="left"],
.contenido table[align="center"] {
    float: none !important;
    width: auto !important;
    margin: 0 auto;
    border: none !important;
    background: transparent !important;
}

.contenido table[align="center"] td {
    width: auto !important;
    padding: 0 !important;
    text-align: center;
    overflow: visible !important;
}

/* Imágenes de gráficas MRTG */
.contenido table[align="left"] > tbody > tr > td > img,
.contenido table[align="left"] > tbody > tr > td > a > img,
.contenido table[align="center"] > tbody > tr > td > img,
.contenido table[align="center"] > tbody > tr > td > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 20px 0;
    border: 1px solid #e0ecee;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Títulos de sección histórica */
.contenido h3 {
    color: var(--color-marca);
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 6px;
}

/* ── Tablas del histórico (anidadas dentro de la tabla de gráficas) ───── */
/* Selector: table[align="left"] td > table apunta exactamente a las tablas
   de años/meses, sin afectar la tabla exterior de gráficas ni .tabla-paginas */

.contenido table[align="left"] td > table {
    width: auto !important;       /* anula base.css table{width:100%} */
    border-collapse: collapse;
    margin-bottom: 16px;
}

/* Todas las celdas de datos del histórico */
.contenido table[align="left"] td > table td {
    width: auto !important;
    padding: 2px 5px !important;
    text-align: right;
    border: 1px solid #ccc !important;
    white-space: nowrap;
}

/* Primera celda de cada fila (etiqueta: In / Out / Max / Sum) */
.contenido table[align="left"] td > table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #444;
}

/* Cabeceras de mes */
.contenido .datahead {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #aaa !important;
    white-space: nowrap !important;
}

/* Cabeceras de cuarto / trimestre */
.contenido .total1head {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background-color: #ddd !important;
    border: 1px solid #aaa !important;
    white-space: nowrap !important;
}

/* Cabecera de total anual */
.contenido .total2head {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background-color: #bbb !important;
    border: 1px solid #999 !important;
    white-space: nowrap !important;
}

/* Datos mensuales */
.contenido .data {
    font-size: 0.75rem !important;
    background-color: white !important;
}

/* Totales trimestrales */
.contenido .total1 {
    font-size: 0.75rem !important;
    background-color: #e8e8e8 !important;
}

/* Totales anuales */
.contenido .total2 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background-color: #cccccc !important;
}

/* Links de meses en la cabecera */
.contenido .datahead a,
.contenido .datahead a:visited {
    color: var(--color-marca);
    text-decoration: none;
}

.contenido .datahead a:hover {
    text-decoration: underline;
}