/* Portal Vifer v3 · pase 34: INFORME MENSUAL. En pantalla, una hoja de papel; al imprimir, A4 limpio en blanco. */

.mr { max-width: 900px; }
.mr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mr-doc { display: grid; gap: 26px; padding: clamp(24px, 5vw, 56px); border-radius: 10px; background: #f7f4ee; color: #1b1d22; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.mr-doc .mono { font-family: var(--font-mono); }
.mr-cover { display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 2px solid #1b1d22; }
.mr-cover svg { color: #0a7f8a; }
.mr-eyebrow { margin: 14px 0 0; color: #075e66; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.mr-cover h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: #111; }
.mr-month { margin: 0; font-size: 18px; text-transform: capitalize; }
.mr-dim { margin: 0; color: #5d6068; font-size: 13px; }
.mr-seal { justify-self: start; margin: 6px 0 0; padding: 2px 8px; border: 1px solid #b7791f; border-radius: 4px; color: #8a5a12; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.mr-sec { display: grid; gap: 10px; }
.mr-sec h2 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid #d8d2c6; font-size: 18px; color: #111; }
.mr-p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #22252b; }
.mr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mr-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mr-kpis li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #d8d2c6; border-radius: 8px; background: #fff; }
.mr-kpis li > span:first-child { color: #5d6068; font-size: 12.5px; }
.mr-kpis b { font-size: 22px; color: #111; }
.mr-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.mr-tbl th, .mr-tbl td { padding: 7px 8px; border-bottom: 1px solid #e2ddd2; text-align: right; }
.mr-tbl th:first-child, .mr-tbl td:first-child { text-align: left; }
.mr-tbl th { color: #5d6068; font-weight: 500; }
.mr-tbl tr.is-total td { font-weight: 700; border-top: 2px solid #1b1d22; color: #0a6b45; }
.mr-list { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: #22252b; font-size: 14.5px; }
.mr-sign { padding-top: 14px; border-top: 1px solid #d8d2c6; }
.mr-sign p { margin: 0; }
@media (max-width: 640px) { .mr-kpis, .mr-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  @page { size: A4; margin: 14mm; }
  .mr-bar, .staff-bar, .ai-fab, .ticker { display: none !important; }
  .frame, main, .screen.mr { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .mr-doc { box-shadow: none; border-radius: 0; padding: 0; background: #fff; }
  .mr-sec { break-inside: avoid; }
}

/* La marca y los textos del portal, en tinta oscura sobre el papel */
.mr-doc { --fg: #111318; --fg-muted: #4b4f57; --fg-dim: #6b6f78; }
.mr-month { text-transform: none; }
.app:has(.mr) .ai-fab { display: none; }

/* Graficas sobre papel */
.mr-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mr-charts figure { margin: 0; padding: 10px 12px; border: 1px solid #d8d2c6; border-radius: 8px; background: #fff; }
.mr-charts figcaption { margin-bottom: 6px; color: #22252b; font-size: 13px; font-weight: 600; }
.mr-doc .ch__ax, .mr-doc .ln__v { fill: #4b4f57; }
.mr-doc .ch__grid { stroke: #e2ddd2; }
.mr-doc .hb__bar { background: #0a7f8a; } .mr-doc .hb__r.is-hot .hb__bar { background: #c98a2b; } .mr-doc .hb__l, .mr-doc .hb__v { color: #22252b; }
.mr-doc .spark__l { stroke: #0a7f8a; } .mr-doc .spark__a { fill: rgba(10, 127, 138, 0.12); } .mr-doc .spark__d { fill: #0a7f8a; }
.mr-charts figure:first-child { grid-column: 1 / -1; }
.mr-doc .hb__track { background: #ece7dc; }


/* Ronda 11: graficas en su proporcion, textos de eje legibles, aviso unico de lo que falta */
.mr-charts .ch { height: auto; }
.mr-doc .ch__ax, .mr-doc .ln__v { font-size: 15px; }
.mr-scroll { overflow-x: auto; }
.mr-scroll:focus-visible { outline: 2px solid #0a7f8a; outline-offset: 2px; }
@media (max-width: 640px) { .mr-scroll .ch { min-width: 560px; } .mr-tbl { font-size: 12.5px; } }
.mr-tbl td.mono { white-space: nowrap; }
.mr-charts { align-items: start; }
.mr-charts figure:first-child, .mr-charts figure:nth-child(2) { grid-column: 1 / -1; }
.mr-legend { display: flex; gap: 16px; margin: 6px 0 0; color: #4b4f57; font-size: 12px; }
.mr-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: #8b8f97; }
.mr-legend .is-solo::before { background: #0a7f8a; }
.mr-need { margin-top: 12px; padding: 12px 14px; border: 1px dashed #c9b88f; border-radius: 8px; background: #fbf6ea; color: #22252b; font-size: 13.5px; }
.mr-need ul { margin: 6px 0 8px; padding-left: 18px; }
.mr-need li span { font-weight: 600; }
.mr-need__go { color: #075e66; font-weight: 600; }
@media print { .mr-need__go { display: none; } .mr-scroll { overflow: visible; } }

/* Ronda 12: todas las graficas a todo el ancho (legibles) y pista de deslizar en movil */
.mr-charts { grid-template-columns: minmax(0, 1fr); }
.mr-swipe { display: none; margin: 4px 0 0; color: #4b4f57; font-size: 12px; }
@media (max-width: 640px) { .mr-swipe { display: block; } }
@media print { .mr-swipe { display: none !important; } }
