/* Renovaciones — panel de agente v2 (journey Renovación + Cobranza). Reutiliza los tokens de v2.css; solo añade lo propio con prefijo rn-. */

.rn-subnav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rn-subtab {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .03em; padding: .5rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-2); background: var(--card); color: var(--muted); display: inline-flex; align-items: center; gap: .45rem;
  transition: background .15s, color .15s, border-color .15s;
}
.rn-subtab:hover { border-color: var(--pulse); color: var(--fg); }
.rn-subtab--active { background: var(--pulse); color: #0d1220; border-color: var(--pulse); }
.rn-badge { background: var(--attention); color: var(--attention-ink); border-radius: var(--radius-pill); font-size: .66rem; font-weight: 700; padding: .05rem .45rem; }

.rn-group { margin-bottom: 1.6rem; }
.rn-card { text-align: left; width: 100%; font: inherit; color: inherit; }
.rn-card .wk-card-bottom { margin-top: .2rem; }
.rn-note { font-size: .74rem; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
.rn-note--ok { color: var(--aurora); }
.rn-foot { font-size: .72rem; color: var(--muted); max-width: 62ch; margin-top: 1.6rem; line-height: 1.55; }
.rn-foot--top { margin: 0 0 1.1rem; }
.rn-plain { list-style: none; font-size: .82rem; color: var(--fg); display: grid; gap: .45rem; line-height: 1.45; }
.rn-plain li { padding-left: .9rem; position: relative; }
.rn-plain li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

.rn-chip { font-family: var(--f-mono); font-size: .66rem; padding: .2rem .6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.rn-chip--calma { background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.rn-chip--pulse { background: var(--pulse-dim); color: var(--pulse); }
.rn-chip--atencion { background: var(--attention-dim); color: var(--attention); }
.rn-chip--alerta { background: rgba(255, 138, 138, .14); color: #ff8a8a; }
.rn-chip--ok { background: var(--aurora-dim); color: var(--aurora); }

.rn-banner { font-size: .78rem; padding: .7rem .95rem; border-radius: var(--radius); margin-bottom: 1.1rem; line-height: 1.5; }
.rn-banner--prueba { background: var(--insight-dim); color: var(--insight); border: 1px solid rgba(201, 164, 255, .3); }

.rn-list { display: grid; gap: .6rem; }
.rn-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; }
.rn-row-main { min-width: 0; }
.rn-row-detail { font-size: .8rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.rn-row-action { font-size: .78rem; color: var(--attention); margin-top: .25rem; }

.rn-btn {
  display: inline-block; font-size: .84rem; font-weight: 600; padding: .65rem 1.2rem; border-radius: var(--radius-pill); background: var(--aurora); color: var(--aurora-ink);
  text-align: center; text-decoration: none; margin-top: .75rem; margin-right: .5rem;
}
.rn-btn:hover { filter: brightness(1.08); }
.rn-btn[disabled] { opacity: .5; cursor: not-allowed; }
.rn-btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-2); }
.rn-btn--wa { background: var(--pulse); color: #0d1220; }
.rn-btn-row { display: flex; flex-wrap: wrap; align-items: center; }

.rn-label { display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .85rem 0 .35rem; }
.rn-help { font-size: .78rem; color: var(--muted); line-height: 1.5; max-width: 62ch; }
.rn-help--warn { color: var(--attention); margin-top: .5rem; }
.rn-text { font-size: .88rem; line-height: 1.55; max-width: 62ch; }
.rn-msg {
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: .95rem 1.1rem; font-size: .95rem; line-height: 1.6;
  margin: .8rem 0 .2rem; max-width: 62ch; white-space: pre-wrap;
}
.rn-details summary { cursor: pointer; list-style: none; }
.rn-details summary::-webkit-details-marker { display: none; }
.rn-details[open] summary { margin-bottom: .6rem; }

.rn-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 140%); max-width: min(92vw, 520px); z-index: 50;
  padding: .8rem 1.1rem; border-radius: var(--radius); font-size: .84rem; line-height: 1.45; transition: transform .25s ease;
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--fg); box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.rn-toast--visible { transform: translate(-50%, 0); }
.rn-toast--error { border-color: rgba(255, 138, 138, .5); color: #ffb3b3; }
.rn-toast--ok { border-color: rgba(127, 227, 196, .45); }

@media (max-width: 640px) {
  .rn-row { flex-direction: column; align-items: stretch; }
  .rn-btn { display: block; width: 100%; margin-right: 0; }
  .rn-btn-row .rn-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .rn-toast { transition: none; } }

.rn-select {
  display: block; width: 100%; max-width: 420px; font: inherit; font-size: .88rem; color: var(--fg); background-color: var(--bg-2);
  border: 1px solid var(--border-2); border-radius: var(--radius); padding: .6rem 2rem .6rem .75rem; margin-top: .1rem;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.rn-select:focus-visible { outline: 2px solid var(--aurora); outline-offset: 1px; }
.rn-btn-row .rn-select { margin-top: .75rem; margin-right: .5rem; width: auto; min-width: 200px; }

.rn-toolbar { display: flex; justify-content: flex-end; margin: -.4rem 0 1rem; }
.rn-toolbar .rn-btn { margin-top: 0; margin-right: 0; }
.rn-hint { font-size: .72rem; color: var(--attention); margin-top: .3rem; }
.rn-err { font-size: .74rem; color: #ff8a8a; margin-top: .3rem; }
.rn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.rn-form .rn-full { grid-column: 1 / -1; }
.rn-drop { border: 1px dashed var(--border-2); border-radius: var(--radius); padding: 1.4rem 1.2rem; background: var(--card); text-align: center; }
.rn-drop input[type=file] { max-width: 100%; color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .rn-form { grid-template-columns: 1fr; } }