/* Herramientas de calendario y tablas de advise.ec (14-nov-2026): estilos extra sobre css/herramientas.css (no la reemplaza).
   Los usa js/herramientas-calendario.js: feriados de Ecuador (tarjetas, resumen por mes, descarga .ics) y tabla buscable de
   retenciones del SRI. Prefijo hzc-. Móvil primero: en pantallas angostas las tablas se leen como tarjetas. */
.hzc [hidden] { display: none !important; }
.hzc-controles { display: grid; gap: 14px; }
.hzc-radios { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.hzc-radios legend { padding: 0; margin-bottom: 8px; }
.hzc-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.hzc-op, .hzc-check { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1.5px solid rgba(2,22,47,.22);
  border-radius: 12px; background: #fff; cursor: pointer; font-size: 15.5px; line-height: 1.3; box-sizing: border-box; }
.hzc-op { flex: 1 1 220px; }
.hzc-check { width: 100%; }
.hzc-op input, .hzc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--hz-acc); flex: none; }
.hzc-op:has(input:checked), .hzc-check:has(input:checked) { border-color: var(--hz-acc); background: rgba(14,128,196,.06); }
.hzc-op:has(input:focus-visible), .hzc-check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(14,128,196,.25); }
@media (min-width: 720px) { .hzc-op { flex: 0 1 auto; } .hzc-check { width: auto; } }
.hzc-btns { margin-top: 0; }
.hz-btn:disabled { opacity: .5; cursor: not-allowed; }
.hzc-estado, .hzc-conteo { margin: 0; font-size: 14.5px; color: var(--hz-ink2); }
.hzc-estado:empty { display: none; }
.hzc .hzc-link { color: var(--hz-acc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hzc-res { margin-top: 20px; }
.hzc-vacio { margin: 12px 0 0; font-size: 15.5px; }

/* Resumen */
.hzc-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.hzc-dato { background: var(--hz-bg); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.hzc-dato p { margin: 0; }
.hzc-dato-n { font-size: clamp(28px, 7vw, 38px); font-weight: 800; color: var(--hz-navy); letter-spacing: -.02em; line-height: 1.05; }
.hzc-dato-t { font-size: 14px; color: var(--hz-ink2); margin-top: 4px !important; }

/* Tarjetas de feriados */
.hzc-mes-t { font-size: 17px; font-weight: 700; color: var(--hz-navy); margin: 22px 0 10px; }
.hzc-fes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hzc-fe { background: #fff; border: 1px solid var(--hz-hair); border-left: 4px solid var(--hz-acc); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.hzc-fe p { margin: 0; }
.hzc-fe-decreto { border-left-color: var(--hz-ok); }
.hzc-fe-por-definir { border-left-color: var(--hz-aviso); }
.hzc-fe-prov { border-left-color: rgba(2,22,47,.28); }
.hzc-fe-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.hzc-fe-f { font-weight: 800; font-size: 18px; color: var(--hz-navy); letter-spacing: -.01em; }
.hzc-fe-n { font-weight: 600; font-size: 15.5px; color: var(--hz-ink); margin-top: 4px !important; }
.hzc-fe-a { font-size: 13.5px; color: var(--hz-ink2); margin-top: 2px !important; }
.hzc-fe-t { font-size: 14px; color: var(--hz-ink2); margin-top: 6px !important; }
.hzc-fe-aviso { color: var(--hz-aviso); }
.hzc-fe-p { font-size: 14px; color: var(--hz-ink); margin-top: 6px !important; font-weight: 600; }
.hzc-chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(14,128,196,.1); color: var(--hz-acc-ink); white-space: nowrap; }
.hzc-chip-decreto { background: rgba(15,122,74,.1); color: var(--hz-ok); }
.hzc-chip-por-definir { background: rgba(154,103,0,.12); color: var(--hz-aviso); }
.hzc-chip-calculada, .hzc-chip-ley { background: rgba(2,22,47,.07); color: var(--hz-ink2); }

/* Tablas */
.hzc-scroll { margin-top: 18px; min-width: 0; }
.hzc-cap { text-align: left; font-weight: 700; font-size: 15.5px; color: var(--hz-navy); padding: 0 0 8px; caption-side: top; }
.hzc .hz-tabla th { width: auto; }
.hzc .hz-tabla td { overflow-wrap: anywhere; }
.hzc-meses .hzc-mes-vacio td, .hzc-meses .hzc-mes-vacio th { color: var(--hz-ink2); font-weight: 400; }
.hzc-meses .hzc-total th, .hzc-meses .hzc-total td { color: var(--hz-navy); font-weight: 700; border-top: 1.5px solid rgba(2,22,47,.25); }
.hzc-grupo th { background: rgba(2,22,47,.05); color: var(--hz-navy); font-weight: 700; font-size: 14px; }
.hzc-cod { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--hz-navy) !important; white-space: nowrap; }
.hzc-pct { font-weight: 700; color: var(--hz-navy); }
.hzc-base, .hzc-quien { font-size: 13.5px; color: var(--hz-ink2); }

/* Buscador de retenciones */
.hzc .hz-field { align-content: start; }
@media (min-width: 720px) { .hzc-grid-buscar { grid-template-columns: 2fr 1fr; } }
.hzc-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.hzc-atajo { font: 600 14px/1 Figtree, system-ui, sans-serif; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1.5px solid rgba(2,22,47,.2);
  background: #fff; color: var(--hz-navy); cursor: pointer; }
.hzc-atajo:hover { border-color: var(--hz-acc); }
.hzc-atajo:focus-visible { outline: 2px solid var(--hz-acc); outline-offset: 2px; }
.hzc-sec { margin-top: 26px; }
.hzc-sec-t { font-size: 18px; font-weight: 700; color: var(--hz-navy); margin: 0 0 4px; }
.hzc-sec-s { margin: 0; font-size: 14.5px; color: var(--hz-ink2); }
.hzc-codigos-caja { max-width: 420px; }
@media (min-width: 720px) {
  .hzc-ret thead th:nth-child(1) { width: 9%; } .hzc-ret thead th:nth-child(2) { width: 37%; } .hzc-ret thead th:nth-child(3) { width: 11%; }
  .hzc-ret thead th:nth-child(4) { width: 12%; } .hzc-ret thead th:nth-child(5) { width: 31%; }
  .hzc-iva thead th:nth-child(1) { width: 32%; } .hzc-iva thead th:nth-child(2) { width: 26%; } .hzc-iva thead th:nth-child(3) { width: 11%; }
  .hzc-iva thead th:nth-child(4) { width: 9%; } .hzc-iva thead th:nth-child(5) { width: 22%; }
}

/* Móvil: cada fila de las tablas largas como tarjeta, con la etiqueta de la columna */
@media (max-width: 719px) {
  .hzc-ret thead, .hzc-meses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hzc-ret, .hzc-ret tbody, .hzc-ret tr, .hzc-ret th, .hzc-ret td,
  .hzc-meses, .hzc-meses tbody, .hzc-meses tr, .hzc-meses th, .hzc-meses td { display: block; width: 100%; box-sizing: border-box; }
  .hzc-ret caption, .hzc-meses caption { display: block; }
  .hzc-ret tr, .hzc-meses tr { border: 1px solid var(--hz-hair); border-radius: 12px; padding: 8px 12px; margin-top: 8px; background: #fff; }
  .hzc-ret tr.hzc-grupo { border: 0; background: transparent; padding: 14px 0 0; }
  .hzc-ret .hzc-grupo th { background: transparent; padding: 0; font-size: 14.5px; }
  .hzc-ret th, .hzc-ret td, .hzc-meses th, .hzc-meses td { border: 0; padding: 3px 0; }
  .hzc-ret td[data-etiqueta]::before, .hzc-meses td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 600; color: var(--hz-ink2); }
  .hzc-ret .hzc-cod { font-size: 16px; }
  .hzc-ret td.hzc-cod::before { font: 600 15px/1.4 Figtree, system-ui, sans-serif; letter-spacing: 0; }
  .hzc-ret .hzc-con { font-size: 15.5px; color: var(--hz-ink); }
  .hzc-iva th.hzc-con { font-weight: 600; }
  .hzc-meses th { font-weight: 700; color: var(--hz-navy); }
  .hzc-meses .hzc-total td:last-child { display: none; }
  .hzc-meses .hzc-total { border-color: rgba(2,22,47,.25); }
}