/* Página «Revisión de cartera»: landing del informe técnico. La base común está en assets/kalculia-ui.css. */
:root { --rv-ease: cubic-bezier(0.16, 1, 0.3, 1); }
/* Red de seguridad: lo que lleva [hidden] desaparece siempre, aunque su clase fije un display */
[hidden] { display: none !important; }
/* Las anclas del menú no quedan tapadas por la cabecera fija */
main section[id] { scroll-margin-top: 4.5rem; }

/* ---- Hero ---- */
.rv-hero h1 { max-width: 20ch; }
.rv-hero .hero-sub { max-width: 56ch; }
.rv-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.rv-hero .byline-top { margin-top: var(--s-5); }
@media (max-width: 479px) { .rv-hero-actions .btn { flex: 1 1 100%; } }

/* ---- Qué incluye: 4 tarjetas de igual altura ---- */
.rv-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 640px) { .rv-cards { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
.rv-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface); }
.rv-card-num { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--accent); }
.rv-card h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.rv-card p { color: var(--text-muted); font-size: .94rem; line-height: 1.6; }

/* ---- Maqueta del informe ---- */
.rv-report { margin: 0; padding: var(--s-5); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
@media (min-width: 720px) { .rv-report { padding: var(--s-6); } }
.rv-report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.rv-report-title { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }

.rv-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.rv-tag--neutral { background: var(--surface-2); color: var(--text-muted); }
.rv-tag--loss { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
.rv-tag--warn { background: var(--warning-soft); color: var(--warning); }
.rv-tag--ok { background: var(--money-soft); color: var(--money); }

.rv-kpis { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 640px) { .rv-kpis { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } }
.rv-kpi { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--radius); background: var(--surface-2); }
.rv-kpi-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.rv-kpi-value { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rv-kpi-sub { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rv-loss { color: var(--loss); }
.rv-money { color: var(--money); }

.rv-report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 860px) { .rv-report-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.rv-panel-title { margin-bottom: var(--s-3); font-size: .84rem; font-weight: 700; color: var(--text-muted); }
.rv-panel-title--spaced { margin-top: var(--s-5); }

.rv-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.rv-table th, .rv-table td { padding: var(--s-3) var(--s-2); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.rv-table th:first-child, .rv-table td:first-child { padding-left: 0; }
.rv-table thead th { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.rv-table tbody tr:last-child td { border-bottom: 0; }
.rv-table td:nth-child(2), .rv-table td:nth-child(3) { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.rv-bars { display: grid; gap: var(--s-3); }
.rv-bar-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 5.4rem; align-items: center; gap: var(--s-3); font-size: .86rem; }
.rv-bar-label { color: var(--text-muted); font-weight: 600; }
.rv-bar-track { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rv-bar { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--loss); transform-origin: left; }
.rv-bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-report.is-in .rv-bar { animation: rv-grow .9s var(--rv-ease) both; }
.rv-report.is-in .rv-bar-row:nth-child(2) .rv-bar { animation-delay: .08s; }
.rv-report.is-in .rv-bar-row:nth-child(3) .rv-bar { animation-delay: .16s; }
@keyframes rv-grow { from { transform: scaleX(0); } }

.rv-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.rv-stack > span { width: var(--w); }
.rv-stack-a { background: var(--opt-a); }
.rv-stack-b { background: var(--opt-b); }
.rv-stack-c { background: var(--warning); }
.rv-stack-d { background: var(--border); }
.rv-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rv-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.rv-legend i { width: 10px; height: 10px; border-radius: 3px; }

.rv-finding { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--radius); background: var(--surface-2); }
.rv-finding p { flex: 1 1 28ch; font-size: .9rem; line-height: 1.55; }
.rv-report-caption { margin-top: var(--s-4); font-size: .8rem; line-height: 1.55; color: var(--text-muted); max-width: 72ch; }

/* ---- Formulario ---- */
.rv-form-card { padding: var(--s-5); border-radius: var(--radius-xl); background: var(--surface); }
@media (min-width: 720px) { .rv-form-card { padding: var(--s-6); } }
.informe-form .field { margin-bottom: var(--s-4); }
.informe-form .field label .field-hint { display: block; margin-top: 2px; }
.informe-form textarea { min-height: 9rem; resize: vertical; line-height: 1.5; font-weight: 500; }
.informe-form input::placeholder, .informe-form textarea::placeholder { color: var(--text-muted); opacity: .8; font-weight: 500; }
.informe-form :where(input[type="text"], input[type="email"], textarea) { transition: box-shadow .15s ease, background-color .15s ease; }
.informe-form :where(input[type="text"], input[type="email"], textarea):focus { background: var(--surface); }
.informe-form [aria-invalid="true"], .informe-form [aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--loss); }

.informe-err { margin-top: calc(var(--s-1) * -1); font-size: .8rem; font-weight: 600; color: var(--loss); }
.informe-err::before { content: "! "; font-family: var(--mono); }

.rv-attach { margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--radius); background: var(--surface-2); font-size: .86rem; line-height: 1.55; color: var(--text-muted); }
.rv-attach-title { margin-bottom: var(--s-1); font-weight: 700; color: var(--text); }
.rv-attach a { color: var(--text); font-weight: 700; text-underline-offset: .18em; }

.informe-consent { margin-top: var(--s-2); }
.informe-consent .checkbox-inline { font-size: .86rem; color: var(--text-muted); }
.informe-consent .checkbox-inline a { color: var(--text); font-weight: 600; text-underline-offset: .18em; }
.informe-consent input[aria-invalid="true"] { outline: 2px solid var(--loss); outline-offset: 2px; }

.informe-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.informe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.informe-status { font-size: .86rem; color: var(--text-muted); }
.informe-status.is-error { color: var(--loss); font-weight: 600; }
.informe-status a { color: inherit; font-weight: 700; }

/* Las dos etiquetas del botón ocupan la misma celda: el ancho no cambia al pasar a «Enviando…» */
.informe-submit { display: inline-grid; justify-items: center; min-width: 13.5rem; }
.informe-submit > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--s-2); transition: opacity .18s ease, transform .24s var(--rv-ease); }
.informe-submit-busy { opacity: 0; transform: translateY(6px); }
.informe-submit.is-busy { cursor: progress; }
.informe-submit.is-busy:active { transform: none; }
.informe-submit.is-busy .informe-submit-label { opacity: 0; transform: translateY(-6px); }
.informe-submit.is-busy .informe-submit-busy { opacity: 1; transform: none; }
.informe-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: informe-spin .7s linear infinite; }
@keyframes informe-spin { to { transform: rotate(360deg); } }

.informe-done { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: start; outline: none; }
.informe-done h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.informe-done p { grid-column: 2; margin-top: var(--s-1); color: var(--text-muted); font-size: .95rem; line-height: 1.55; max-width: 56ch; }
.informe-done-ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.informe-done-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.informe-done.is-in { animation: informe-in .32s var(--rv-ease) both; }
.informe-done.is-in .informe-done-ico svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: informe-check .36s var(--rv-ease) .12s forwards; }
@keyframes informe-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes informe-check { to { stroke-dashoffset: 0; } }

@media (max-width: 479px) {
  .informe-submit { width: 100%; }
  .informe-actions { flex-direction: column; align-items: stretch; }
}

/* ---- Aviso legal ---- */
.rv-legal-wrap { padding-block: var(--s-2) var(--s-7); }
.rv-legal { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.rv-legal-title { margin-bottom: var(--s-2); font-size: .84rem; font-weight: 800; }
.rv-legal p:not(.rv-legal-title) { font-size: .86rem; line-height: 1.6; color: var(--text-muted); max-width: 78ch; }

@media (prefers-reduced-motion: reduce) {
  .informe-submit > span { transition: none; }
  .rv-report.is-in .rv-bar { animation: none; }
  .informe-done.is-in, .informe-done.is-in .informe-done-ico svg path { animation: none; stroke-dashoffset: 0; }
  .informe-spinner { animation-duration: 1.6s; }
}