/* Revisión de Efecty, Moneygram y Sistecrédito (2026-10-06, rediseño). Usa los tokens del tema (claro/oscuro); el semáforo reutiliza --cc-ok/--cc-mal/--cc-ambar de
   cuadre_caja.css. Los botones de joyería llevan un color propio cada uno (8 tonos oscuros: texto blanco legible en ambos temas cuando están elegidos). */

.tr-pestanas { display: inline-flex; border: 1px solid var(--color-divider); border-radius: 999px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.tr-pestanas button { border: 0; background: transparent; color: inherit; font: inherit; padding: 5px 16px; border-radius: 999px; cursor: pointer; }
.tr-pestanas button[aria-selected="true"] { background: var(--color-accent); color: #fff; font-weight: 600; }
.tr-pestanas button:focus-visible, .tr-joy:focus-visible, .tr-paginas button:focus-visible, .tr-resumen:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.tr-joyerias { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.tr-joy { --tr-c: #c8691a; display: inline-flex; align-items: center; gap: 8px; font: inherit; cursor: pointer; padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid var(--tr-c); color: var(--tr-c); background: color-mix(in srgb, var(--tr-c) 9%, transparent); transition: background .15s, color .15s; }
.tr-joy:hover { background: color-mix(in srgb, var(--tr-c) 20%, transparent); }
.tr-joy[aria-selected="true"] { background: var(--tr-c); color: #fff; font-weight: 600; }
.tr-joy[data-c="0"] { --tr-c: #c8691a; } .tr-joy[data-c="1"] { --tr-c: #167a6b; } .tr-joy[data-c="2"] { --tr-c: #2f67b8; } .tr-joy[data-c="3"] { --tr-c: #7447b8; }
.tr-joy[data-c="4"] { --tr-c: #b23a70; } .tr-joy[data-c="5"] { --tr-c: #3f7d26; } .tr-joy[data-c="6"] { --tr-c: #a8452a; } .tr-joy[data-c="7"] { --tr-c: #475f7b; }
.tr-marca { font-style: normal; font-size: .7rem; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #1b2733; font-weight: 700; padding: 0 4px; }
.tr-joy:not([aria-selected="true"]) .tr-marca { background: var(--tr-c); color: #fff; }
.tr-marca-alerta { background: var(--cc-mal) !important; color: #fff !important; }

.tr-cargas { background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: var(--radius-panel); padding: 8px 14px; }
.tr-cargas summary { cursor: pointer; font-weight: 600; }
.tr-cargas summary small { font-weight: 400; opacity: .65; margin-left: 8px; }
.tr-archivo { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; opacity: .9; }
.tr-archivo input { font-size: .8rem; max-width: 260px; }

.tr-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 8px; }
.tr-titulo { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.tr-regla { font-size: .78rem; opacity: .7; }
.tr-alias { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.tr-alias select { min-width: 220px; }
.tr-sub { margin: 14px 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* Lista del mes: filas compactas, un día abierto a la vez */
.tr-lista { border: 1px solid var(--color-divider); border-radius: var(--radius-panel); background: var(--tz-panel); overflow: hidden; margin-top: 8px; }
.tr-cols, .tr-resumen { display: grid; grid-template-columns: minmax(84px, .8fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(104px, 1fr) minmax(150px, 1.4fr) 18px; gap: 12px; align-items: center; }
.tr-cols { padding: 9px 14px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.tr-dia { border-top: 1px solid var(--color-divider); }
.tr-resumen { list-style: none; cursor: pointer; padding: 6px 14px; min-height: 44px; font-size: .84rem; }
.tr-resumen::-webkit-details-marker { display: none; }
.tr-resumen:hover { background: var(--tz-hover, rgba(127, 127, 127, .08)); }
.tr-fecha { font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-fecha small { display: block; font-weight: 400; font-size: .68rem; opacity: .6; }
.tr-domingo { color: var(--cc-ambar); opacity: 1 !important; }
.tr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-etq { display: none; font-style: normal; font-size: .64rem; opacity: .6; text-align: left; }
.tr-dif { color: var(--cc-mal); font-weight: 600; }
.tr-estcel { display: flex; align-items: center; gap: 6px; }
.tr-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); }
.tr-verde .tr-estado { color: var(--cc-ok); } .tr-ambar .tr-estado { color: var(--cc-ambar); } .tr-rojo .tr-estado { color: var(--cc-mal); } .tr-neutro .tr-estado { color: inherit; opacity: .7; }
.tr-alerta { font-style: normal; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; font-size: .68rem; font-weight: 700; background: var(--cc-mal); color: #fff; }
.tr-flecha { opacity: .5; text-align: center; transition: transform .15s; }
.tr-dia[open] .tr-flecha { transform: rotate(180deg); }
.tr-seq { display: block; font-size: .68rem; font-weight: 400; opacity: .7; overflow: hidden; text-overflow: ellipsis; max-width: 150px; margin-left: auto; letter-spacing: .01em; }
.tr-seq-valor { font-variant-numeric: tabular-nums; font-weight: 600; }

.tr-detalle { padding: 12px 14px 16px; border-top: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 3%, transparent); }
.tr-comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tr-comparacion h5 { margin: 0 0 8px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .65; font-weight: 600; }
.tr-grande { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.tr-par { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border-bottom: 1px solid var(--color-divider); font-size: .82rem; }
.tr-par span:first-child { opacity: .65; }
.tr-par span:last-child { text-align: right; overflow-wrap: anywhere; }
.tr-registro + .tr-registro { margin-top: 12px; padding-top: 4px; border-top: 2px solid var(--color-divider); }
.tr-validaciones { margin-top: 12px; max-width: 520px; }
.tr-pasa { color: var(--cc-ok); } .tr-falla { color: var(--cc-mal); font-weight: 600; }
.tr-explica { margin: 10px 0 4px; font-size: .84rem; }

.tr-novedad { border-left: 3px solid var(--cc-mal); padding: 4px 10px; margin: 8px 0; }
.tr-novedad p { margin: 0 0 4px; font-size: .84rem; }
.tr-decidir { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tr-decidir select, .tr-decidir input { background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 7px; padding: 4px 8px; color: inherit; font: inherit; font-size: .8rem; }
.tr-decidir input { flex: 1; min-width: 180px; }
.tr-decidir select:focus, .tr-decidir input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.tr-decidida { display: block; margin-top: 4px; opacity: .8; }

.tr-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.tr-paginas { display: flex; gap: 6px; }
.tr-paginas button { min-width: 34px; padding: 5px 10px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--tz-panel); color: inherit; font: inherit; cursor: pointer; }
.tr-paginas button[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }

.tr-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.tr-archivar:disabled { opacity: .5; cursor: not-allowed; }
.tr-bloqueo { font-size: .78rem; opacity: .75; }
.tr-estado-mes { flex-basis: 100%; }
.cc-pastilla.tr-rojo { background: color-mix(in srgb, var(--cc-mal) 16%, transparent); color: var(--cc-mal); }

@media (max-width: 780px) { .tr-cols, .tr-resumen { grid-template-columns: 76px 1fr 1fr 1fr 16px; gap: 8px; } .tr-col-dif { display: none; } .tr-comparacion { gap: 12px; } }
@media (max-width: 520px) {
  .tr-cols { display: none; }
  .tr-resumen { grid-template-columns: 1fr 1fr 16px; }
  .tr-resumen .tr-fecha { grid-column: 1; } .tr-resumen .tr-estcel { grid-column: 2; grid-row: 1; } .tr-resumen .tr-flecha { grid-column: 3; grid-row: 1 / span 2; }
  .tr-resumen .tr-num { text-align: left; } .tr-etq { display: block; }
  .tr-comparacion { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tr-joy, .tr-flecha { transition: none; } }

/* Sistecrédito: cada día trae sus componentes (recaudos, créditos, cancelaciones, anulados…) */
.tr-comp { border-left: 3px solid var(--color-divider); padding: 6px 10px; margin: 6px 0; background: var(--tz-panel); border-radius: 0 8px 8px 0; }
.tr-comp.tr-verde { border-left-color: var(--cc-ok); } .tr-comp.tr-ambar { border-left-color: var(--cc-ambar); } .tr-comp.tr-rojo { border-left-color: var(--cc-mal); }
.tr-comp-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; }
.tr-comp-cab .tr-num { margin-left: auto; font-weight: 600; }
.tr-comp .tr-explica { margin: 4px 0; font-size: .8rem; }
.tr-aviso { color: var(--cc-ambar); font-size: .78rem; }