/* ═══════════════════════════════════════════════════════════════════════
   Pantallas heredadas del portal: ESTRUCTURA de sus clases y la IMPRESIÓN del informe al propietario
   ───────────────────────────────────────────────────────────────────────
   El nombre del archivo viene del código recibido y no se cambia: base.html lo enlaza y el PDF del informe
   (pdf.py + main.py) lo copia al lado del HTML para que Chrome lo imprima. Por eso tiene dos partes:

   1. Estructura (tamaños, espacios, disposición) de las clases que todavía usan las plantillas heredadas
      (.metric-card, .comp-row, .table-rdi…). SIN colores: en pantalla los pone cv.css con los tokens.
   2. Impresión / PDF: acá SÍ van colores, porque el PDF no carga cv.css ni cv-tokens.css. Se usan las mismas
      variables (--cv-brand…) con el valor de Cartera Viva como respaldo: si la instalación tiene marca propia
      (CV_COLOR), base.html trae su <style id="cvMarca"> y el informe sale con los colores del cliente.

   Antes era el estilo de RDI (su verde y su negro, 58 !important) y cv.css le peleaba encima. Ya no.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Estructura ────────────────────────────────────────────────── */
.metric-card { padding: 1rem 1.25rem; height: 100%; }
.metric-val { font-size: 1.7rem; font-weight: 700; line-height: 1.1; word-break: break-word; }
.metric-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; margin-top: .2rem; }

.chart-wrap { border-radius: var(--cv-r-l, 16px); padding: 1.1rem 1rem .8rem; }
.chart-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .6rem; }

.prop-photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--cv-r-s, 8px); }
.prop-photo-placeholder { width: 100%; height: 180px; border-radius: var(--cv-r-s, 8px); display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; }

.table-rdi thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; border: none; }
.table-rdi tbody td { vertical-align: middle; }

.price-tag { font-size: 1.4rem; font-weight: 700; }
.comp-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; font-size: .85rem;
  border-bottom: 1px solid var(--cv-line, #DCE3DD); }
.comp-row:last-child { border-bottom: none; }
.comp-price { font-weight: 700; }

.analysis-text { white-space: pre-wrap; font-size: .87rem; line-height: 1.7; padding: 1rem 1.1rem; }

/* De dónde salió un comparable. Los colores son los de cada sistema (Mercado Libre es amarillo), no los de la marca */
.badge-fuente { display: inline-block; font-size: .6rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; vertical-align: middle;
  line-height: 1.4; letter-spacing: .3px; }
.badge-ml    { background: #FFE600; color: #333333; }   /* fijo: color de Mercado Libre */
.badge-tokko { background: var(--cv-info-soft, #E2EDF8); color: var(--cv-info, #245E9B); }

/* ── 2. Impresión / PDF del informe ───────────────────────────────── */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4 portrait; margin: 1.4cm 1.2cm; }

  .no-print, #btn-edit, #edit-mode, .card-footer { display: none !important; }
  #view-mode { display: block !important; }

  html, body { background: var(--cv-card, #FFFFFF) !important; color: var(--cv-ink, #0F1F1B); width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .container, .container-fluid { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

  .card { box-shadow: none !important; border: 1px solid var(--cv-line, #DCE3DD) !important; break-inside: avoid; }
  .card-header-dark { background: var(--cv-brand-soft, #E1F2EA) !important; color: var(--cv-ink, #0F1F1B) !important;
    border-bottom: 1px solid var(--cv-line, #DCE3DD) !important; }

  .metric-card { background: var(--cv-card, #FFFFFF) !important; color: var(--cv-ink, #0F1F1B) !important; border: 1px solid var(--cv-line, #DCE3DD) !important;
    border-left: 4px solid var(--cv-brand, #0E7A5A) !important; }
  .metric-val { color: var(--cv-ink, #0F1F1B) !important; font-size: 1.3rem !important; }
  .metric-lbl { color: var(--cv-muted, #66756F) !important; }
  .metric-ok .metric-val { color: var(--cv-ok, #1B7F4B) !important; }
  .metric-warn { border-left-color: var(--cv-warn, #9A6200) !important; }
  .metric-warn .metric-val { color: var(--cv-warn, #9A6200) !important; }
  .metric-alert { border-left-color: var(--cv-bad, #B3322B) !important; }
  .metric-alert .metric-val { color: var(--cv-bad, #B3322B) !important; }

  .table-rdi thead th { background: var(--cv-card-2, #F7F9F6) !important; color: var(--cv-muted, #66756F) !important; }

  .prop-photo, .prop-photo-placeholder { height: 140px !important; }
  .chart-wrap { page-break-inside: avoid; box-shadow: none !important; border: 1px solid var(--cv-line, #DCE3DD) !important; }

  /* Dos columnas y cinco métricas por fila, aunque el ancho de la hoja sea de celular */
  .row.g-3  { display: flex !important; flex-wrap: nowrap !important; }
  .col-lg-5 { width: 40% !important; flex: 0 0 40% !important; max-width: 40% !important; }
  .col-lg-7 { width: 60% !important; flex: 0 0 60% !important; max-width: 60% !important; }
  .row-cols-lg-5 > * { flex: 0 0 20% !important; max-width: 20% !important; }

  /* El borrador del informe, como texto */
  textarea.form-control { border: none !important; background: transparent !important; resize: none !important; font-size: .8rem !important;
    line-height: 1.6 !important; color: var(--cv-ink, #0F1F1B) !important; height: auto !important; min-height: 0 !important; }
  .print-logo { height: 44px !important; width: auto !important; }
  .analysis-text { font-size: .82rem !important; line-height: 1.6 !important; padding: .6rem .8rem !important; height: auto !important; overflow: visible !important; }
}