/* F04 Referidos (V360-HTML-02C). Scoped to referral classes so the accepted
   shell, F01, F02 and F03 styles are not changed by this feature. Geometry
   follows the source KPI band, donut/ranking row and table card (fresh 1728
   read-only Figma capture, see qa/html-02c/figma-refs). */

.referral-overview{display:grid;gap:16px;margin:30px 0 16px;}
.main-content:has(.referral-overview) .page-head{margin-bottom:0;}
@media (min-width:861px){
  .main-content:has(.referral-overview) .page-head{align-items:center;}
}
.referral-kpis{margin:0;}
.referral-charts{margin:0;}
.referral-charts .chart-card{height:292px;min-height:292px;gap:0;}
.referral-charts .chart-card h3{font:600 18px/26px Inter,ui-sans-serif,system-ui,sans-serif;}
.referral-charts .chart-card .chart-sub{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;}
.referral-charts .chart-donut-wrap{min-height:0;}
.referral-charts .chart-card:first-child .chart-donut-wrap{margin-top:-6px;}
.referral-charts .chart-card:first-child .chart-donut-wrap{grid-template-columns:156px minmax(0,270px);gap:48px;padding-left:16px;justify-content:start;}
.referral-charts .chart-card:first-child .chart-legend{gap:16px;}

.referral-rank__bars{display:grid;gap:17px;margin-top:-3px;}
.referral-rank__row{display:grid;gap:0;}
.referral-rank__copy{display:flex;justify-content:space-between;gap:16px;font:400 14px/14px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
.referral-rank__copy strong{font-weight:500;font-variant-numeric:tabular-nums;}
.referral-rank__track{height:10px;}

.referral-list{margin:0;}
.referral-list .table-card__head{padding:12px 18px 6px;border-bottom:0;align-items:flex-start;}
.referral-list .table-card__head h2{margin:0;}
.referral-list .table-card__head p{margin:4px 0 0;}
.referral-toolbar{display:grid;grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto auto;gap:12px;align-items:end;margin:12px 18px 10px;}
.referral-toolbar .button{height:48px;}
.referral-counts{margin:0 18px 10px;}
.referral-table{width:calc(100% - 32px);margin:0 16px 16px;}
.referral-table th,.referral-table td{padding:6px 14px;overflow-wrap:anywhere;}
.referral-table thead th{padding:11px 14px;}
.referral-table th{white-space:nowrap;}
.referral-table td{height:44px;padding-top:5px;padding-bottom:5px;}
.referral-list .chip{min-height:26px;padding:0 10px;font-size:12px;}
.referral-interest{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--radius-full);font:500 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap;}
.referral-interest--success{color:var(--green);background:var(--green-bg);}
.referral-interest--info{color:var(--info);background:var(--info-bg);}
.referral-interest--amber{color:var(--amber);background:var(--amber-bg);}
.referral-interest--danger{color:var(--danger);background:var(--danger-bg);}

.referral-saved{display:grid;gap:10px;padding:16px;background:#fff;border:2px solid var(--green);border-radius:var(--radius-card);}
.referral-saved h3{margin:0;font:600 18px/26px Inter,ui-sans-serif,system-ui,sans-serif;}
.referral-saved__data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;}
.referral-saved__data div{display:grid;gap:2px;min-width:0;}
.referral-saved__wide{grid-column:1/-1;}
.referral-saved__data dt{font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.referral-saved__data dd{margin:0;font:500 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere;}
.referral-saved__note{white-space:pre-wrap;}
.referral-saved .button{justify-self:start;}

.referral-register{min-width:190px;}
.modal--referral{width:min(640px,calc(100vw - 32px));}
.referral-form__explain{margin:0;}
.referral-form .form-row{align-items:start;}
.referral-form .field > select,.referral-form .field > input{align-self:start;}
.referral-detail{display:flex;flex-direction:column;min-height:0;}
.referral-detail__data{display:grid;margin:0;}
.referral-detail__row{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.referral-detail__row dt{font:500 13px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.referral-detail__row dd{margin:0;font:500 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere;}
.referral-detail__text{white-space:pre-wrap;}
.referral-detail__provenance{margin:12px 0 0;}
.referral-disclosure{margin:0;}

@media (max-width:1180px){
  .referral-charts{grid-template-columns:minmax(0,1fr);}
  .referral-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  /* Correction A (document 67): the ring and legend stack here, so the card follows its content.
     The 292px height stays the minimum; desktop and 721px+ keep the fixed reference height. */
  .referral-charts .chart-card{height:auto;}
  .referral-charts .chart-card:first-child .chart-donut-wrap{grid-template-columns:minmax(0,1fr);gap:12px;padding-left:0;justify-items:center;}
  .referral-charts .chart-card:first-child .chart-legend{width:100%;}
  .referral-toolbar{grid-template-columns:minmax(0,1fr);margin:12px 14px 10px;}
  .referral-toolbar .button{width:100%;}
  .referral-counts{margin:0 14px 10px;}
  .referral-table{width:100%;margin:0;table-layout:auto;}
  .referral-saved__data{grid-template-columns:minmax(0,1fr);}
  .referral-detail__row{grid-template-columns:minmax(0,1fr);gap:2px;}
  .referral-register{min-width:0;}
  .modal--referral{width:calc(100vw - 24px);}
}