:root {
  /* Paleta institucional del ingenio: verde y dorado */
  --verde: #1e7b3c;
  --verde-osc: #145c2b;
  --verde-claro: #eaf4ed;
  --dorado: #ffc000;
  --dorado-osc: #d9a300;
  --dorado-claro: #fff8e2;
  --rojo: #c00000;

  --fondo: #f2f4f2;
  --panel: #ffffff;
  --borde: #d5dbd6;
  --texto: #1f2723;
  --suave: #6a7570;
  --sombra: 0 1px 2px rgba(20, 40, 28, .06), 0 3px 10px rgba(20, 40, 28, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ------------------------------------------------------------ lateral */

.lateral {
  width: 232px;
  flex: 0 0 232px;
  background: var(--verde-osc);
  color: #d8e8dd;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { padding: 18px 18px 14px; border-bottom: 1px solid #1c7038; }
.marca strong { display: block; color: #fff; font-size: 15px; letter-spacing: .2px; }
.marca span { display: block; font-size: 11.5px; color: #9dc4ab; margin-top: 3px; }

#nav {
  flex: 1; overflow-y: auto; padding: 10px 0;
  /* La barra por defecto sale blanca y corta el verde del menu. */
  scrollbar-width: thin;
  scrollbar-color: #4a9a63 var(--verde-osc);
}
#nav::-webkit-scrollbar { width: 10px; }
#nav::-webkit-scrollbar-track { background: var(--verde-osc); }
#nav::-webkit-scrollbar-thumb {
  background: #4a9a63; border-radius: 5px;
  border: 2px solid var(--verde-osc);
}
#nav::-webkit-scrollbar-thumb:hover { background: #5cb277; }

#nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: #c4dccd;
  font: inherit;
  cursor: pointer;
}
#nav button:hover { background: #1a6d34; color: #fff; }
#nav button.activo {
  background: #1a6d34;
  border-left-color: var(--dorado);
  color: #fff;
  font-weight: 600;
}

.pie-lateral { padding: 14px; border-top: 1px solid #1c7038; }

.btn-actualizar {
  width: 100%;
  padding: 8px 10px;
  background: var(--dorado);
  color: #3c2f00;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn-actualizar:hover { background: #ffcd2e; }
.btn-actualizar:disabled { opacity: .6; cursor: default; }

.estado-datos { font-size: 11.5px; color: #9dc4ab; margin-top: 9px; line-height: 1.5; }

/* ---------------------------------------------------------- principal */

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px 13px;
  background: var(--panel);
  border-bottom: 3px solid var(--verde);
  position: sticky;
  top: 0;
  z-index: 5;
}
.cabecera h1 { margin: 0; font-size: 19px; font-weight: 650; color: var(--verde-osc); }
.subtitulo { margin: 3px 0 0; font-size: 12.5px; color: var(--suave); }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtro { display: flex; flex-direction: column; gap: 3px; }
.filtro label { font-size: 11px; color: var(--verde-osc); text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600; }
.filtro select, .filtro input {
  padding: 5px 8px; border: 1px solid var(--borde); border-radius: 4px;
  background: #fff; font: inherit; min-width: 130px; color: var(--texto);
}
.filtro select:focus { outline: 2px solid var(--dorado); outline-offset: -1px; }

/* Segmentador de varios valores, como el del tablero de Power BI: el boton
   resume lo elegido y la lista despliega las casillas. */
.multi { position: relative; }
.multi-boton { display: flex; align-items: center; gap: 8px; width: 100%;
  min-width: 150px; padding: 5px 8px; border: 1px solid var(--borde);
  border-radius: 4px; background: #fff; font: inherit; color: var(--texto);
  cursor: pointer; text-align: left; }
.multi-boton:hover { border-color: var(--verde); }
.multi-boton.con-seleccion { border-color: var(--verde);
  background: var(--verde-claro); font-weight: 600; }
.multi-texto { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.multi-flecha { color: var(--suave); font-size: 11px; }
.multi-lista { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 300px; max-height: 300px; overflow-y: auto;
  overflow-x: hidden; padding: 5px; background: #fff;
  border: 1px solid var(--borde); border-radius: 5px;
  box-shadow: 0 6px 20px rgba(20, 40, 28, .16); }
.multi-buscar { width: 100%; box-sizing: border-box; margin-bottom: 4px;
  padding: 4px 7px; border: 1px solid var(--borde); border-radius: 4px;
  font: inherit; font-size: 12.5px; }
/* Las opciones son <label>, asi que hay que deshacer el estilo del rotulo
   del filtro (mayusculas y verde) que heredarian de .filtro label. */
.multi-lista .opcion { display: flex; align-items: center; gap: 7px;
  padding: 4px 7px; border-radius: 4px; cursor: pointer;
  font-size: 13px; font-weight: 400; color: var(--texto);
  text-transform: none; letter-spacing: 0; }
.multi-lista .opcion span { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.multi-lista .opcion:hover { background: var(--verde-claro); }
.multi-lista .opcion.todos { border-bottom: 1px solid var(--borde);
  border-radius: 0; margin-bottom: 3px; padding-bottom: 6px;
  color: var(--verde-osc); font-weight: 600; }
/* La casilla es un <input> y heredaba el ancho minimo de los campos de la
   barra de filtros, que empujaba el texto fuera de la lista. */
.multi-lista .opcion input { flex: none; min-width: 0; width: auto;
  padding: 0; margin: 0; }
.multi-lista .opcion span { flex: 1 1 auto; min-width: 0; }
.multi-lista input { accent-color: var(--verde); margin: 0; }

.contenido { padding: 20px 24px 60px; }
.cargando { color: var(--suave); padding: 40px 0; }

.avisos { padding: 0 24px; }
.aviso {
  margin: 12px 0 0; padding: 10px 13px; border-radius: 4px;
  background: var(--dorado-claro); border: 1px solid #e8c86a; color: #6b5310;
  font-size: 13px;
}

/* -------------------------------------------------------------- panel */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  min-width: 0;
  overflow: hidden;
}
.panel > h2 {
  margin: 0 0 12px; padding: 7px 14px;
  background: var(--verde); color: #fff;
  font-size: 13px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .5px;
}
.panel > h2 .sufijo { float: right; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: #cfe6d7; }
.panel > *:not(h2) { margin-left: 14px; margin-right: 14px; }
.panel > .tabla-envoltura { margin: 0 0 0; }
.panel > *:last-child { margin-bottom: 14px; }
.panel > .tabla-envoltura:last-child { margin-bottom: 0; }

.rejilla { display: grid; gap: 18px; align-items: start; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.dos-uno { grid-template-columns: 2fr 1fr; }
.rejilla.uno-dos { grid-template-columns: 1fr 2fr; }
@media (max-width: 1180px) {
  .rejilla.dos, .rejilla.tres, .rejilla.dos-uno, .rejilla.uno-dos
    { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ tarjetas */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 18px; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 4px;
  box-shadow: var(--sombra); overflow: hidden;
}
.tarjeta .rotulo {
  background: var(--verde); color: #fff;
  font-size: 11.5px; font-weight: 650; letter-spacing: .3px;
  padding: 5px 10px; text-align: center;
}
.tarjeta .cifra { font-size: 23px; font-weight: 700; letter-spacing: -.3px;
  padding: 9px 10px 4px; text-align: center; }
.tarjeta .unidad { font-size: 12px; color: var(--suave); font-weight: 400;
  margin-left: 3px; }
.tarjeta .nota { font-size: 11.5px; color: var(--suave); padding: 0 10px 8px;
  text-align: center; }
.tarjeta.positiva .cifra { color: var(--verde); }
.tarjeta.negativa .cifra { color: var(--rojo); }

.medidor { height: 5px; background: #e7ebe8; margin: 4px 10px 10px;
  border-radius: 3px; overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: 3px; }

/* Tarjetas que filtran la tabla al pulsarlas (Apreta 3.000) */
.tarjeta.pulsable { cursor: pointer; transition: box-shadow .12s; }
.tarjeta.pulsable:hover { box-shadow: 0 0 0 2px var(--verde-claro), var(--sombra); }
.tarjeta.elegida { box-shadow: 0 0 0 3px var(--dorado); }
.tarjeta.tono-rojo .rotulo { background: var(--rojo); }
.tarjeta.tono-dorado .rotulo { background: var(--dorado-osc); color: #3c2f00; }
.tarjeta.tono-gris .rotulo { background: #7b8680; }

/* ------------------------------------------- pestanas dentro de una pagina */

.pestanas { display: flex; gap: 3px; flex-wrap: wrap; margin: 0 0 16px;
  border-bottom: 3px solid var(--verde); }
.pestanas button {
  padding: 8px 22px; border: 1px solid var(--borde); border-bottom: 0;
  border-radius: 5px 5px 0 0; background: #e3e9e5; color: var(--verde-osc);
  font: inherit; font-weight: 650; cursor: pointer; letter-spacing: .2px;
}
.pestanas button:hover { background: var(--verde-claro); }
.pestanas button.activa { background: var(--verde); border-color: var(--verde);
  color: #fff; box-shadow: inset 0 3px 0 var(--dorado); }
.pestanas .cuenta { margin-left: 8px; padding: 0 7px; border-radius: 9px;
  font-size: 11.5px; background: rgba(0, 0, 0, .08); }
.pestanas button.activa .cuenta { background: rgba(255, 255, 255, .22); }

.filtros-internos { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 10px; }

/* Buscador de tablaDatos (opcion 'buscador') */
.buscador { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.buscador input { flex: 0 1 360px; min-width: 0; padding: 6px 9px; font: inherit;
  border: 1px solid var(--borde); border-radius: 4px; background: #fff; color: var(--texto); }
.buscador input:focus { outline: 2px solid var(--dorado); outline-offset: -1px; }
.buscador .conteo { font-size: 12px; color: var(--suave); white-space: nowrap; }
.nota-panel { margin: 0 0 4px; font-size: 12px; color: var(--suave); }

/* Estado en una celda de tabla */
.chip { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11.5px;
  font-weight: 650; line-height: 1.6; white-space: nowrap;
  background: #eef1ef; color: #4d5752; }
.chip.rojo { background: #fbe4e4; color: var(--rojo); }
.chip.dorado { background: var(--dorado-claro); color: #7a5a00; }
.chip.verde { background: var(--verde-claro); color: var(--verde-osc); }
.chip.gris { background: #eef1ef; color: #5d6762; }

/* Tarjeta de objetivo por area, como las del tablero original */
.kpis-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; }
.kpi-area { border: 1px solid var(--borde); border-radius: 4px; overflow: hidden;
  background: #fff; }
.kpi-area header { background: var(--verde); color: #fff; font-weight: 650;
  font-size: 12.5px; padding: 5px 10px; }
.kpi-area .cifra { font-size: 27px; font-weight: 700; padding: 10px 12px 2px;
  color: var(--rojo); letter-spacing: -.5px; }
.kpi-area .cifra.cumple { color: var(--verde); }
.kpi-area .objetivo { font-size: 11.5px; color: #4a534d; padding: 0 12px 10px; }
.kpi-area .objetivo b { font-weight: 650; }
.kpi-area .objetivo .peor { color: var(--rojo); }
.kpi-area .objetivo .mejor { color: var(--verde); }

/* ------------------------------------------------------------- tablas */

.tabla-envoltura { overflow-x: auto; max-height: 520px; overflow-y: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: 12.9px;
  table-layout: auto; }

/* Tablas con anchos declarados (Control de materiales y Control de servicios).
   Van una al lado de la otra, asi que reparten el espacio por columna y usan
   letra algo mas pequena para caber enteras; lo que sobra se recorta con
   puntos suspensivos y el texto completo queda en el tooltip. */
table.datos.fija { table-layout: fixed; font-size: 12.1px; }
table.datos.fija th, table.datos.fija td {
  overflow: hidden; text-overflow: ellipsis;
  padding: 6px 8px;
}
table.datos.fija th { font-size: 10.4px; letter-spacing: .2px; }

/* Cuando las dos tablas comparten una pantalla estrecha, un punto menos de
   letra evita que el nombre del centro de costo salga recortado. */
@media (max-width: 1360px) {
  table.datos.fija { font-size: 11.5px; }
  table.datos.fija th, table.datos.fija td { padding: 5px 6px; }
}

table.datos th, table.datos td {
  padding: 7px 10px; text-align: left; white-space: nowrap;
}
table.datos td { border-bottom: 1px solid #eef2ef; }

/* Encabezado en tono claro: el verde fuerte ya lo pone el titulo del panel,
   repetirlo aqui hacia que la tabla pesara mas que su propio contenido. */
table.datos th {
  position: sticky; top: 0; z-index: 1; cursor: pointer;
  background: #eef3ef; color: var(--verde-osc);
  font-weight: 650; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 2px solid var(--verde);
}
table.datos th:hover { background: #e2ebe5; }
table.datos th::after { content: ''; }
table.datos th.ordenada::after { content: ' ▾'; color: var(--verde); }
table.datos th.ordenada.asc::after { content: ' ▴'; }

table.datos th.num, table.datos td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
table.datos tbody tr:nth-child(even) { background: #fafcfa; }
table.datos tbody tr:hover { background: var(--verde-claro); }

/* La descripcion se recorta con puntos suspensivos en vez de estirar la
   tabla y obligar a desplazarse en horizontal. */
table.datos td.ancho { max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; }
table.datos.fija td.ancho { max-width: none; }
table.datos td.primera { font-weight: 600; color: #2c3a31; }

table.datos tfoot td { font-weight: 700; background: var(--dorado-claro);
  border-top: 2px solid var(--dorado); border-bottom: 0;
  position: sticky; bottom: 0; }

/* Cabecera de grupo: separa visualmente cada area y lleva sus subtotales. */
table.datos tr.grupo td {
  background: var(--verde-claro); font-weight: 700; color: var(--verde-osc);
  border-top: 1px solid #bdd8c6; border-bottom: 1px solid #bdd8c6;
  font-variant-numeric: tabular-nums;
}
table.datos tr.grupo:hover td { background: #e0eee6; }
table.datos tr.grupo td.nombre-grupo { text-transform: uppercase;
  letter-spacing: .3px; font-size: 11.5px; }
table.datos tr.grupo td.cuenta-grupo { font-weight: 400; color: var(--suave);
  font-size: 11.5px; }

/* En una tabla agrupada la columna del area queda vacia en las filas de
   detalle, asi que la flecha de despliegue se pone junto al nombre. */
table.datos.agrupada tbody tr.pulsable:not(.grupo) td:first-child::before {
  content: none;
}
table.datos.agrupada tbody tr.pulsable:not(.grupo) td:first-child + td {
  position: relative; padding-left: 22px;
}
table.datos.agrupada tbody tr.pulsable:not(.grupo) td:first-child + td::before {
  content: '▸'; position: absolute; left: 8px; color: var(--verde);
  font-size: 11px; opacity: .75;
}
table.datos.agrupada tbody tr.pulsable.abierta:not(.grupo)
  td:first-child + td::before { content: '▾'; opacity: 1; }

.neg { color: var(--rojo); }
.pos { color: var(--verde); }
/* Disponible: el signo se lee por el color del numero, sin recuadros. */
td.saldo span { font-weight: 650; font-variant-numeric: tabular-nums; }
td.saldo span.mal { color: var(--rojo); }
td.saldo span.bien { color: #1a6634; }

.vacio { color: var(--suave); padding: 18px 14px; font-size: 13px; }

/* Globo del cursor sobre la grafica */
.globo-grafico {
  position: absolute; pointer-events: none; z-index: 4;
  background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--verde);
  border-radius: 4px; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 3px 12px rgba(20, 40, 28, .18); white-space: nowrap;
}
.globo-grafico b { color: var(--texto); }
.globo-grafico .fila { display: block; color: #55655a; }
.globo-grafico .fila i { display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 6px; }
.globo-grafico .fila b { margin-left: 10px; float: right;
  font-variant-numeric: tabular-nums; }
.globo-grafico .dif { display: block; margin-top: 3px; padding-top: 3px;
  border-top: 1px solid #eef2ef; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.globo-grafico .dif.peor { color: var(--rojo); }
.globo-grafico .dif.mejor { color: var(--verde); }

table.matriz td:first-child { background: var(--dorado); font-weight: 700;
  color: #3c2f00; }
table.matriz td.mes { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ graficos */

.grafico { width: 100%; }
.grafico-vacio { color: var(--suave); font-size: 13px; padding: 26px 0;
  text-align: center; }
text.eje { font-size: 10.5px; fill: #78827c; }
text.eje-anio { font-size: 12px; font-weight: 700; fill: var(--verde-osc);
  letter-spacing: .3px; }
text.eje-etiqueta { font-size: 11.5px; fill: #3d4640; }
text.valor-barra { font-size: 10.5px; fill: #4a534d; font-variant-numeric: tabular-nums; }
text.donut-total { font-size: 19px; font-weight: 700; fill: var(--verde-osc); }
text.donut-sub { font-size: 10.5px; fill: #78827c; }

/* Etiquetas de datos sobre la serie: halo blanco para que se lean encima
   del area sombreada sin tener que oscurecer el relleno. */
text.marca-serie {
  font-size: 10.5px; fill: #26332b; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
text.marca-serie.destacada { font-weight: 700; fill: var(--verde-osc); }
text.rotulo-meta { font-size: 11px; font-weight: 700; fill: var(--dorado-osc); }
text.valor-actual { font-size: 12.5px; font-weight: 700; fill: #fff;
  font-variant-numeric: tabular-nums; }

.leyenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px;
  font-size: 11.5px; color: #3d4640; }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px; }
.leyenda svg { margin-right: 5px; vertical-align: -2px; flex: none; }

/* --------------------------------------------------------- bloque area */

.bloque-area { border: 1px solid var(--borde); border-radius: 4px;
  background: var(--panel); box-shadow: var(--sombra); margin-bottom: 20px;
  overflow: hidden; }
.bloque-area > header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px; background: var(--verde); color: #fff;
}
.bloque-area > header h2 { margin: 0; font-size: 14.5px; font-weight: 650; }
.bloque-area > header .resumen { font-size: 12.5px; color: #dcefe3; }
.bloque-area > header .resumen strong { color: #fff; }
.bloque-area > header .resumen .neg { color: var(--dorado); }
.bloque-area > header .resumen .pos { color: #a8e6bd; }
.bloque-cuerpo { padding: 14px 16px 16px; }

.mini-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px; margin-bottom: 14px; }
.mini { border: 1px solid var(--borde); border-radius: 4px; overflow: hidden;
  background: #fff; }
.mini .rotulo { font-size: 10.5px; color: #fff; background: var(--verde);
  letter-spacing: .3px; padding: 3px 8px; text-align: center; font-weight: 600; }
.mini .cifra { font-size: 17px; font-weight: 700; padding: 6px 8px; text-align: center; }

/* -------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; background: rgba(12, 32, 20, .55);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.oculto { display: none; }
.modal-caja { background: #fff; border-radius: 5px; padding: 20px 22px;
  width: min(760px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
.modal-caja h2 { margin: 0 0 6px; font-size: 16px; }
.modal-nota { margin: 0 0 12px; color: var(--suave); font-size: 13px; }
.modal-caja pre { flex: 1; overflow: auto; background: #10241a; color: #cfe6d7;
  padding: 12px; border-radius: 4px; font-size: 11.5px; line-height: 1.5;
  margin: 0 0 12px; white-space: pre-wrap; }
.btn-secundario { align-self: flex-end; padding: 7px 16px;
  border: 1px solid var(--borde); background: #fff; border-radius: 4px;
  font: inherit; cursor: pointer; }
.btn-secundario:hover { background: var(--verde-claro); }
.btn-secundario:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------- filas que se despliegan */

table.datos tbody tr.pulsable { cursor: pointer; }
table.datos tbody tr.pulsable:hover { background: var(--verde-claro); }
table.datos tbody tr.pulsable td:first-child { position: relative; padding-left: 20px; }
table.datos tbody tr.pulsable td:first-child::before {
  content: '▸'; position: absolute; left: 6px; color: var(--verde);
  font-size: 11px; opacity: .75;
}
table.datos tbody tr.pulsable.abierta { background: var(--verde-claro);
  font-weight: 600; }
table.datos tbody tr.pulsable.abierta td:first-child::before {
  content: '▾'; opacity: 1;
}

tr.expansion > td {
  padding: 0 0 0 22px;
  background: #f3f7f4;
  border-bottom: 2px solid var(--verde);
  border-left: 4px solid var(--verde);
  white-space: normal;
}
tr.expansion:hover > td { background: #f3f7f4; }

.sub-panel { padding: 9px 12px 11px 0; }
.sub-cabecera { font-size: 11.8px; color: #47564c; margin-bottom: 7px;
  font-weight: 600; }
.sub-panel .tabla-envoltura { max-height: none; overflow: visible; }
.sub-panel table.datos { font-size: 12.2px; background: #fff; }
.sub-panel table.datos th {
  position: static; background: #e3ece6; color: #37493e; font-size: 10.8px;
  border-bottom: 1px solid #cddbd2;
}
.sub-panel table.datos th:hover { background: #d7e4dc; }
.sub-panel table.datos th, .sub-panel table.datos td { padding: 4px 9px; }
.sub-panel table.datos tbody tr:nth-child(even) { background: #fafcfb; }

/* Cada nivel cambia de tono y de color de borde: centro de costo (verde),
   area (dorado) y orden (verde oscuro). Asi se ve de donde cuelga cada lista
   sin necesidad de mas sangria. */
.sub-panel tr.expansion > td { background: #eef4f0; border-left-width: 3px;
  border-left-color: var(--dorado-osc); border-bottom-color: var(--dorado-osc); }
.sub-panel tr.pulsable td:first-child::before { color: var(--dorado-osc); }
.sub-panel tr.pulsable.abierta { background: #fdf6e0; }

.sub-panel .sub-panel tr.expansion > td { background: #e9f0eb;
  border-left-color: var(--verde-osc); border-bottom-color: var(--verde-osc); }
.sub-panel .sub-panel tr.pulsable td:first-child::before {
  color: var(--verde-osc); }
.sub-panel .sub-panel tr.pulsable.abierta { background: #e2ede6; }

.sub-panel .sub-panel { padding-top: 7px; }
.sub-panel .sub-cabecera { color: #55655a; }

.sub-pie { margin-top: 6px; }
.ver-mas { background: none; border: 1px solid var(--borde); border-radius: 3px;
  color: var(--verde-osc); font: inherit; font-size: 11.8px; padding: 3px 11px;
  cursor: pointer; }
.ver-mas:hover { background: var(--verde-claro); border-color: var(--verde); }

.cargando-sub { padding: 12px 4px; color: var(--suave); font-size: 12.5px; }
.vacio-sub { margin: 0; padding: 8px 4px; color: var(--suave); font-size: 12.5px; }


/* --------------------------------------------------- pagina Archivos */

.ficha-datos { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 4px 0 2px; }
.ficha-datos .et { display: block; font-size: 11px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .3px; }
.ficha-datos b { font-size: 15px; font-variant-numeric: tabular-nums; }

.lista-carpetas { margin: 0; padding-left: 18px; font-size: 12.5px;
  color: #47564c; line-height: 1.7; }
.lista-carpetas li { word-break: break-all; }

/* ============================================================ menu plegable

   El menu verde se abre y se cierra con el boton de la esquina. En el
   telefono se superpone al contenido en vez de robarle la mitad del ancho.  */

.btn-menu {
  position: fixed; top: 10px; left: 10px; z-index: 30;
  width: 40px; height: 38px; padding: 9px 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--verde); border: 0; border-radius: 5px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 40, 28, .25);
}
.btn-menu span { display: block; height: 2.5px; background: #fff; border-radius: 2px;
  transition: transform .2s, opacity .2s; }
body.menu-abierto .btn-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-abierto .btn-menu span:nth-child(2) { opacity: 0; }
body.menu-abierto .btn-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Con el menu cerrado la barra se sale de la pantalla y el contenido ocupa
   todo el ancho. */
.lateral { transition: margin-left .22s ease; }
body:not(.menu-abierto) .lateral { margin-left: -232px; }
/* Con el menu abierto el boton se recoge dentro de la franja verde: puesto
   fuera, quedaba encima del titulo de la pagina. */
body.menu-abierto .btn-menu { left: 184px; background: transparent;
  box-shadow: none; }
body.menu-abierto .btn-menu:hover { background: rgba(255, 255, 255, .14); }
.principal { transition: none; }

/* Sitio para el boton, que va flotando sobre la cabecera */
.cabecera { padding-left: 62px; }
body.menu-abierto .cabecera { padding-left: 24px; }

.fondo-menu { display: none; }

@media (max-width: 820px) {
  /* En el telefono el menu flota encima y se cierra al tocar fuera */
  .lateral { position: fixed; top: 0; left: 0; z-index: 25; margin-left: 0;
    transform: translateX(-100%); transition: transform .22s ease; }
  body.menu-abierto .lateral { transform: translateX(0); }
  body:not(.menu-abierto) .lateral { margin-left: 0; }
  body.menu-abierto .btn-menu { left: auto; right: 10px; }
  .cabecera { padding-left: 60px; }
  body.menu-abierto .cabecera { padding-left: 60px; }
  body.menu-abierto .fondo-menu {
    display: block; position: fixed; inset: 0; z-index: 24;
    background: rgba(12, 32, 20, .45);
  }
}

/* ------------------------------------------------------------- telefono */

@media (max-width: 820px) {
  .contenido { padding: 14px 12px 48px; }
  .cabecera { padding: 12px 14px 11px 60px; gap: 10px; }
  .cabecera h1 { font-size: 17px; }
  .subtitulo { font-size: 12px; }
  .filtros { width: 100%; gap: 8px; }
  .filtro { flex: 1 1 140px; }
  .filtro select, .filtro .multi-boton { min-width: 0; width: 100%; }
  /* En el telefono la lista se ancla al ancho del filtro para no salirse. */
  .multi-lista { max-width: none; right: 0; }

  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .tarjeta .cifra { font-size: 19px; padding: 7px 8px 3px; }
  .tarjeta .rotulo { font-size: 10.5px; padding: 4px 8px; }

  .kpis-area { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kpi-area .cifra { font-size: 22px; padding: 8px 10px 2px; }

  .panel > h2 { font-size: 11.5px; padding: 6px 11px; letter-spacing: .3px; }
  .panel > h2 .sufijo { float: none; display: block; margin-top: 2px; }
  .panel > *:not(h2) { margin-left: 10px; margin-right: 10px; }

  .rejilla { gap: 12px; }
  .bloque-cuerpo { padding: 10px 11px 12px; }
  .bloque-area > header { flex-direction: column; align-items: flex-start; gap: 3px; }

  table.datos { font-size: 12px; }
  table.datos th, table.datos td { padding: 6px 7px; }
  .tabla-envoltura { max-height: 420px; }

  /* En pantalla estrecha no hay sitio para repartir columnas: se deja que la
     tabla se desplace de lado, que es preferible a recortarlo todo. */
  table.datos.fija { table-layout: auto; }
  table.datos.fija td.ancho { max-width: 200px; }
}

/* Textos del grafico en pantalla estrecha */
text.eje.chico { font-size: 9px; }
text.eje-anio.chico { font-size: 10px; }
text.marca-serie.chico { font-size: 9px; stroke-width: 2.5px; }
text.rotulo-meta.chico { font-size: 9.5px; }
text.valor-actual.chico { font-size: 10.5px; }

/* --------------------------------------------------- pastel en 3D */

text.pastel-pct { font-size: 19px; font-weight: 800; fill: #fff;
  paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 3px; }
text.pastel-pct.chico { font-size: 14px; stroke-width: 2px; }
text.pastel-nombre { font-size: 12.5px; font-weight: 650; fill: #2c3a31; }
text.pastel-valor { font-size: 11.5px; fill: var(--suave);
  font-variant-numeric: tabular-nums; }
text.pastel-total { font-size: 11px; fill: var(--suave);
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------- subir datos al servidor */

.zona-subir { display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px; }
.zona-subir.oculto { display: none; }
.zona-subir .campo { display: flex; flex-direction: column; gap: 4px; }
.zona-subir .campo span { font-size: 11.5px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.zona-subir input { padding: 7px 9px; border: 1px solid var(--borde);
  border-radius: 4px; font: inherit; font-size: 13px; }
.zona-subir input:focus { outline: 2px solid var(--verde); outline-offset: -1px; }
.zona-subir .btn-actualizar { align-self: flex-start; padding: 8px 18px; }
.barra-subida { height: 6px; background: #e7ebe8; border-radius: 3px;
  overflow: hidden; }
.barra-subida.oculto { display: none; }
.barra-subida span { display: block; height: 100%; width: 0;
  background: var(--verde); transition: width .15s; }

/* Seguro para la leyenda: nunca debe salirse de su panel */
.leyenda { max-width: 100%; }
.leyenda span { display: inline-flex; align-items: baseline; max-width: 100%;
  min-width: 0; overflow-wrap: anywhere; }

/* --- Capex: la orden elegida filtra el resto de la pagina --------------- */
.filtro-activo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 14px; border-radius: 10px;
  background: var(--verde-claro); border-left: 4px solid var(--verde);
  font-size: 13px; }
.filtro-activo .et { color: var(--suave); text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px; font-weight: 600; }
.filtro-activo strong { color: var(--verde-osc); font-weight: 600;
  overflow-wrap: anywhere; }
.quitar-filtro { margin-left: auto; border: 1px solid var(--verde);
  background: #fff; color: var(--verde-osc); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.quitar-filtro:hover { background: var(--verde); color: #fff; }

/* La fila que esta filtrando el resto se distingue del resto de la tabla */
table.datos tbody tr.elegida > td { background: var(--verde-claro);
  font-weight: 600; }
table.datos tbody tr.elegida > td.primera {
  box-shadow: inset 3px 0 0 var(--verde); }

/* =================================================== Apreta 3.000 (v2) */

/* Tabla de lectura comoda: letra normal, filas mas altas y la descripcion baja
   de renglon en vez de recortarse. En pantallas angostas se desplaza de lado. */
table.datos.legible { font-size: 13.4px; min-width: 900px; }
table.datos.legible th { font-size: 11.2px; padding: 9px 10px; }
table.datos.legible td { padding: 8px 10px; vertical-align: middle; }
table.datos.legible td.primera { font-weight: 650; color: var(--verde-osc); }
table.datos td.envuelve { white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.35; }
table.datos tr.con-detalle { cursor: help; }

.panel.sin-recorte { overflow: visible; }
.panel.sin-recorte > h2 { border-radius: 4px 4px 0 0; }
.panel.sin-recorte .tabla-envoltura { max-height: 640px; border-radius: 0 0 4px 4px; }
.panel.sin-recorte > .nota-panel { margin-top: -2px; margin-bottom: 8px; }

/* Ficha flotante con el resto del registro */
.ficha-fila {
  position: fixed; z-index: 60; max-width: 400px; pointer-events: none;
  background: #fff; border: 1px solid var(--borde); border-top: 3px solid var(--verde);
  border-radius: 5px; box-shadow: 0 8px 26px rgba(20, 40, 28, .2);
  padding: 9px 13px 11px; font-size: 12.6px; line-height: 1.4;
}
.ficha-titulo { font-weight: 700; color: var(--verde-osc); margin-bottom: 6px; }
.ficha-fila dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.ficha-fila dt { color: var(--suave); white-space: nowrap; }
.ficha-fila dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.ficha-vacia { margin: 0; color: var(--suave); }

/* Buscador con sugerencias */
.buscador-sug { flex: 1 1 300px; max-width: 440px; }
.sug-envoltura { position: relative; }
.sug-envoltura input {
  width: 100%; padding: 5px 9px; font: inherit; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 4px; background: #fff;
}
.sug-envoltura input:focus { outline: 2px solid var(--dorado); outline-offset: -1px; }
.sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 40;
  margin: 0; padding: 4px 0; list-style: none; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: 4px;
  box-shadow: 0 8px 20px rgba(20, 40, 28, .16);
}
.sugerencias li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px;
  cursor: pointer; font-size: 13px; }
.sugerencias li:hover, .sugerencias li.activa { background: var(--verde-claro); }
.sug-tipo { flex: 0 0 68px; font-size: 10.4px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--suave); font-weight: 650; }
.sug-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sug-texto mark { background: var(--dorado-claro); color: inherit; font-weight: 700; }
.sug-n { flex: 0 0 auto; font-size: 11px; color: var(--suave); }

.filtro select.motivo { max-width: 320px; }

.acciones-apreta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.conteo-apreta { font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.btn-descargar {
  padding: 6px 14px; font: inherit; font-weight: 650; cursor: pointer;
  border: 1px solid var(--verde); border-radius: 4px;
  background: #fff; color: var(--verde-osc);
}
.btn-descargar:hover { background: var(--verde-claro); }
.btn-descargar:disabled { opacity: .5; cursor: default; }

/* El PDF es la accion principal del panel: va en verde lleno. */
.btn-pdf {
  padding: 6px 14px; font: inherit; font-weight: 650; cursor: pointer;
  border: 1px solid var(--verde); border-radius: 4px;
  background: var(--verde); color: #fff;
}
.btn-pdf:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.btn-pdf:disabled { opacity: .5; cursor: default; }

@media (max-width: 820px) {
  .buscador-sug { max-width: none; flex-basis: 100%; }
  .acciones-apreta { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
  .acciones-apreta .conteo-apreta { flex-basis: 100%; }
  .acciones-apreta button { flex: 1 1 0; }
  .filtro select.motivo { max-width: 100%; }
}