/* /cl/dividendos y /cl/dividendos/<tk> (11-nov-2026). Hoja propia: sus clases no le
   sirven a otra página. Usa los tokens de plata.css (tema claro y oscuro). */

.dv-ctrl { margin:4px 0 8px; }
.dv-cuenta { color:var(--tx3); font-size:.78rem; margin:2px 0 6px; }
.dv-tbl td, .dv-tbl th { vertical-align:middle; }
.dv-tbl th[data-col] { cursor:pointer; user-select:none; }
.dv-tbl th[aria-sort="ascending"]::after { content:" ▲"; font-size:.6rem; }
.dv-tbl th[aria-sort="descending"]::after { content:" ▼"; font-size:.6rem; }
.dv-tbl td:not(:first-child), .dv-tbl th:not(:first-child) { text-align:left; }
.dv-tbl .dv-num { text-align:right !important; font-variant-numeric:tabular-nums; }
.dv-tbl td:first-child { min-width:150px; }
.dv-est { color:var(--tx2); }
.dv-tenue { color:var(--tx3); font-size:.74rem; }
.dv-alerta { color:var(--amb-tx); font-weight:600; }
.dv-ev { color:var(--tx3); font-size:.7rem; white-space:nowrap; }
.dv-origen { white-space:normal !important; min-width:260px; max-width:420px; font-size:.76rem; color:var(--tx2); line-height:1.4; }
.dv-origen .dv-tenue { display:block; margin-top:2px; }
.dv-muerta td { color:var(--tx3); }

/* Bloques del orden por defecto (pedido de Pedro, 11-nov-2026). Lo que todavía no se
   anuncia va destacado con el tinte de la marca y un borde, como los recuadros .tip; lo
   anunciado va plano; lo que ya pasó, apagado. */
.dv-tbl tr.dv-grupo td { position:static; text-align:left; white-space:normal; padding:16px 8px 7px;
  font-size:.78rem; color:var(--tx3); background:var(--surface); border-bottom:1px solid var(--line2); }
.dv-tbl tbody tr.dv-grupo:first-child td { padding-top:4px; }
.dv-tbl tbody tr.dv-grupo:hover td { background:var(--surface); }
.dv-grupo b { color:var(--tx); font-size:.88rem; }
.dv-g-n { display:inline-block; min-width:22px; text-align:center; font-size:.7rem; font-weight:700;
  padding:1px 7px; border-radius:999px; background:var(--surface2); color:var(--tx2);
  border:1px solid var(--line2); margin:0 8px 0 6px; }
.dv-tbl tr.dv-g1 td { background:var(--acc-bg); }
.dv-tbl tr.dv-g1 td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.dv-tbl tr.dv-g1 .dv-est { color:var(--tx); }
.dv-tbl tbody tr.dv-g1:hover td { background:var(--acc-ln); }
.dv-tbl tr.dv-g3 td, .dv-tbl tr.dv-g3 td a { color:var(--tx3); }
.dv-reorden { margin-left:10px; font-size:.74rem; padding:2px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line2); background:var(--surface); color:var(--accent-d); }
.dv-reorden:hover { border-color:var(--accent); }

/* Etiqueta de estado: el verde es un dato (alta confianza, ESTILO §10); anunciado va en
   azul de información; lo que falta o es dudoso, en ámbar o gris. */
.dv-et { display:inline-block; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:999px;
  white-space:nowrap; border:1px solid var(--line2); }
.dv-anun { background:var(--info-bg); color:var(--info-tx); }
.dv-alta { background:var(--ok-bg); color:var(--ok-tx); border-color:var(--ok-ln); }
.dv-media { background:var(--amb-bg); color:var(--amb-tx); }
.dv-baja { background:var(--surface2); color:var(--tx2); }
.dv-atr { background:var(--amb-bg); color:var(--amb-tx); }

.dv-sin { font-size:.84rem; line-height:1.7; margin:6px 0; }
.dv-metodo { margin:4px 0 0; padding-left:20px; font-size:.88rem; line-height:1.55; color:var(--tx2); }
.dv-metodo li { margin:0 0 8px; }
.dv-metodo b { color:var(--tx); }
.dv-h3 { font-size:.92rem; margin:16px 0 6px; }
.dv-texto { font-size:.88rem; line-height:1.55; color:var(--tx2); margin:6px 0; }
.dv-bt td { text-align:right; }

/* Barras por año: HTML puro, sin JS (se ven aunque falle el script y no dependen del
   ancho del contenedor al dibujar). */
.dv-barras { display:flex; align-items:flex-end; gap:4px; height:180px; padding:6px 0 0;
  border-bottom:1px solid var(--line2); overflow-x:auto; }
.dv-barra { flex:1 1 0; min-width:16px; height:100%; display:flex; flex-direction:column; align-items:center; }
.dv-col { flex:1; width:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.dv-col i { display:block; width:100%; border-radius:3px 3px 0 0; }
.dv-b-rec { background:var(--up); }
.dv-b-ext { background:var(--tx3); opacity:.55; border-radius:3px 3px 0 0; }
.dv-col i + i { border-radius:0; }
.dv-barra span { font-size:.66rem; color:var(--tx3); margin-top:3px; white-space:nowrap; }
.dv-scroll-alto { max-height:520px; overflow-y:auto; }

@media (max-width:640px) {
  /* En el teléfono la primera columna (fija) se come la pantalla: el nombre largo se
     corta y quedan a la vista el monto y la fecha de pago, que es lo que se busca. */
  .dv-tbl td:first-child { min-width:0; max-width:112px; }
  .dv-tbl td:first-child .res-nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dv-barra span { font-size:.58rem; }
}
