/* ============================================================
   MUS BOCARRANA — hoja de estilos global
   ============================================================ */

:root{
  /* Marca */
  --verde:        #0B351F;
  --verde-2:      #12472A;
  --verde-3:      #1B5C39;
  --dorado:       #E09E23;
  --dorado-2:     #B87F14;
  --crema:        #F0E5C8;
  --rojo:         #AE231E;   /* solo logo / detalles mínimos */

  /* Superficies e ink */
  --bg:           #FBFAF6;
  --surface:      #FFFFFF;
  --surface-2:    #F4F1E7;
  --surface-3:    #EDE8D9;
  --ink:          #17251C;
  --ink-2:        #405046;
  --muted:        #6B7A70;
  --border:       rgba(11,53,31,.13);
  --border-2:     rgba(11,53,31,.22);

  --radius:   14px;
  --radius-s: 10px;
  --radius-l: 20px;
  --shadow:   0 1px 2px rgba(11,53,31,.05), 0 8px 24px rgba(11,53,31,.07);
  --shadow-l: 0 12px 40px rgba(11,53,31,.13);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.serif{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}

a{ color:var(--verde); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:780px; margin:0 auto; padding:0 24px; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--verde);
  color:var(--crema);
  border-bottom:1px solid rgba(240,229,200,.12);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:70px; gap:20px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.nav__brand img{ width:42px; height:42px; }
.nav__brand span{
  font-family:'Playfair Display',serif; font-weight:800; font-size:19px;
  letter-spacing:.02em; color:var(--crema); white-space:nowrap;
}
.nav__brand:hover{ text-decoration:none; opacity:.9; }

.nav__links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__item{ position:relative; }
.nav__link{
  display:flex; align-items:center; gap:5px;
  color:var(--crema); font-size:14.5px; font-weight:500;
  padding:9px 13px; border-radius:8px; white-space:nowrap;
  transition:background .15s;
}
.nav__link:hover{ background:rgba(240,229,200,.11); text-decoration:none; }
.nav__link.is-active{ background:rgba(240,229,200,.16); font-weight:700; }
.nav__caret{ font-size:9px; opacity:.65; margin-top:1px; }

.nav__menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0;
  background:var(--verde-2); min-width:210px; padding:6px;
  border-radius:12px; border:1px solid rgba(240,229,200,.15);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu{ display:block; }
.nav__menu a{
  display:block; padding:9px 12px; border-radius:7px;
  color:var(--crema); font-size:14px; font-weight:500;
}
.nav__menu a:hover{ background:rgba(240,229,200,.13); text-decoration:none; }
.nav__menu a.is-active{ background:rgba(224,158,35,.22); font-weight:700; }

.nav__cta{
  background:var(--dorado); color:var(--verde) !important;
  font-weight:700; font-size:13.5px; padding:9px 17px; border-radius:22px;
  margin-left:8px; white-space:nowrap; transition:transform .15s, box-shadow .15s;
}
.nav__cta:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 16px rgba(224,158,35,.35); }

.nav__burger{
  display:none; background:none; border:0; color:var(--crema);
  font-size:24px; cursor:pointer; padding:6px 10px; line-height:1;
}

@media (max-width:1040px){
  .nav__links{
    display:none; position:absolute; top:70px; left:0; right:0;
    background:var(--verde-2); flex-direction:column; align-items:stretch;
    padding:10px; gap:2px; border-bottom:1px solid rgba(240,229,200,.15);
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav__links.is-open{ display:flex; }
  .nav__menu{ display:block; position:static; background:transparent; border:0;
              box-shadow:none; padding:2px 0 6px 14px; min-width:0; }
  .nav__caret{ display:none; }
  .nav__cta{ margin:8px 0 4px; text-align:center; }
  .nav__burger{ display:block; }
}

/* ============================================================
   CABECERAS DE PÁGINA
   ============================================================ */
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 72% -20%, rgba(224,158,35,.22), transparent 62%),
    linear-gradient(170deg, var(--verde) 0%, #0d4026 100%);
  color:var(--crema);
  padding:76px 0 84px;
  text-align:center;
}
.hero__logo{ width:150px; height:150px; margin:0 auto 26px;
             filter:drop-shadow(0 12px 30px rgba(0,0,0,.4)); }
.hero h1{ font-size:clamp(38px,6vw,62px); margin-bottom:14px; }
.hero__tag{ font-size:18px; opacity:.9; max-width:560px; margin:0 auto 30px; line-height:1.55; }
.hero__pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero__pills span{
  border:1px solid rgba(240,229,200,.32); padding:7px 16px;
  border-radius:22px; font-size:13.5px; opacity:.92;
}

.pagehead{
  background:linear-gradient(170deg, var(--verde) 0%, #0d4026 100%);
  color:var(--crema); padding:52px 0 56px;
}
.pagehead .eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:11.5px;
  font-weight:700; color:var(--dorado); margin-bottom:10px;
}
.pagehead h1{ font-size:clamp(30px,4.4vw,46px); margin-bottom:12px; }
.pagehead p{ font-size:16.5px; opacity:.86; max-width:640px; margin:0; line-height:1.6; }

/* ============================================================
   SECCIONES Y TIPOGRAFÍA
   ============================================================ */
.section{ padding:66px 0; }
.section--tight{ padding:44px 0; }
.section--alt{ background:var(--surface-2); }

.section__title{ font-size:clamp(24px,3vw,33px); margin-bottom:10px; }
.section__sub{ color:var(--muted); font-size:15.5px; max-width:620px; margin:0 0 32px; line-height:1.6; }
.section__head--center{ text-align:center; }
.section__head--center .section__sub{ margin-left:auto; margin-right:auto; }

.eyebrow{
  text-transform:uppercase; letter-spacing:.13em; font-size:11px;
  font-weight:700; color:var(--dorado-2); margin-bottom:9px;
}

.prose{ font-size:16.5px; line-height:1.8; color:var(--ink-2); }
.prose p{ margin:0 0 18px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose h3{ font-size:20px; color:var(--ink); margin:30px 0 10px; }
.prose ul{ padding-left:20px; margin:0 0 18px; }
.prose li{ margin-bottom:7px; }
.lead{ font-size:19px; line-height:1.65; color:var(--ink); font-weight:500; }

/* ============================================================
   TARJETAS
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px;
}
.card--pad-l{ padding:32px; }
.card--flat{ background:var(--surface-2); border-color:transparent; }
.card--raised{ box-shadow:var(--shadow); }
.card h3{ font-size:21px; margin-bottom:8px; }
.card__meta{ color:var(--muted); font-size:14px; }

.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* Botones y badges */
.btn{
  display:inline-block; background:var(--verde); color:var(--crema);
  font-weight:600; font-size:14.5px; padding:11px 24px; border-radius:24px;
  border:0; cursor:pointer; font-family:inherit; transition:transform .15s, box-shadow .15s;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow); }
.btn--gold{ background:var(--dorado); color:var(--verde); }
.btn--ghost{ background:transparent; color:var(--verde); border:1.5px solid var(--border-2); }
.btn--ghost:hover{ background:var(--surface-2); }
.btn--sm{ padding:8px 18px; font-size:13.5px; }

.badge{
  display:inline-block; padding:5px 13px; border-radius:16px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
}
.badge--gold{ background:var(--dorado); color:var(--verde); }
.badge--green{ background:var(--verde); color:var(--crema); }
.badge--soft{ background:var(--surface-3); color:var(--ink-2); }
.badge--a{ background:rgba(11,53,31,.09); color:var(--verde); }
.badge--b{ background:rgba(184,127,20,.15); color:var(--dorado-2); }

/* ============================================================
   CIFRAS / CONTADORES
   ============================================================ */
.stats{
  background:var(--verde); color:var(--crema); border-radius:var(--radius-l);
  padding:38px 28px; display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px; text-align:center;
}
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats__num{ font-family:'Playfair Display',serif; font-size:44px; font-weight:800; color:var(--dorado); line-height:1; }
.stats__lbl{ font-size:13px; opacity:.82; margin-top:9px; line-height:1.4; }

.statbox{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px;
}
.statbox__lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.statbox__val{ font-family:'Playfair Display',serif; font-size:30px; font-weight:800; color:var(--verde); margin-top:6px; line-height:1.1; }
.statbox__note{ font-size:12.5px; color:var(--muted); margin-top:4px; }

/* ============================================================
   TABLAS
   ============================================================ */
.tablebox{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; padding:13px 10px;
  border-bottom:1.5px solid var(--border-2); background:var(--surface-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--verde); }
th .arrow{ opacity:.35; font-size:9px; margin-left:3px; }
th.sorted .arrow{ opacity:1; color:var(--dorado-2); }
th.sorted{ color:var(--verde); }
tbody td{
  padding:11px 10px; border-bottom:1px solid var(--border);
  font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--surface-2); }
.t-num{ text-align:right; font-variant-numeric:tabular-nums; }
.t-ctr{ text-align:center; }
.table--fixed{ table-layout:fixed; }

/* Columnas secundarias: en pantallas estrechas se ocultan en vez de recortarse
   o de sacar barra de desplazamiento horizontal. */
@media (max-width:860px){
  thead th{ font-size:9.5px; letter-spacing:.02em; }
  th, td{ padding-left:7px; padding-right:7px; }
  .c-sm{ display:none; }
}
@media (max-width:620px){
  thead th{ font-size:9px; letter-spacing:0; }
  th, td{ padding-left:5px; padding-right:5px; font-size:12.5px; }
  .c-xs{ display:none; }
  /* Con pocas columnas dejamos que se repartan el ancho y que el texto
     largo pase de línea, en vez de recortarlo. */
  .table--fixed{ table-layout:auto; }
  .table--fixed th, .table--fixed td{ width:auto !important; white-space:normal; overflow-wrap:break-word; }
}
@media (max-width:340px){
  /* Móviles muy estrechos (320px): recortamos aún más el espaciado para que
     quepan todas las columnas sin desbordar la pantalla. */
  th, td{ padding-left:3px; padding-right:3px; }
  thead th{ font-size:8.5px; }
  tbody td{ font-size:11.5px; }
  .badge{ padding:4px 8px; font-size:11px; }
}

.player-link{ font-weight:600; color:var(--verde); }
.rankpos{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:27px; height:27px; padding:0 7px; border-radius:14px;
  background:var(--surface-3); color:var(--ink-2); font-weight:700; font-size:12.5px;
}
.rankpos--top{ background:var(--dorado); color:var(--verde); }
.rankpos--med{ background:var(--verde); color:var(--crema); }

.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.tag{
  display:inline-block; font-size:11px; font-weight:600; padding:3px 9px;
  border-radius:11px; background:var(--surface-3); color:var(--ink-2);
}

.toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.search{ position:relative; flex:1; min-width:230px; }
.search input{
  width:100%; padding:12px 18px 12px 42px; border-radius:26px;
  border:1px solid var(--border-2); font-size:14.5px; font-family:inherit;
  background:var(--surface); color:var(--ink);
}
.search input:focus{ outline:2px solid var(--dorado); outline-offset:1px; border-color:transparent; }
.search::before{ content:"⌕"; position:absolute; left:17px; top:50%; transform:translateY(-50%);
                 color:var(--muted); font-size:18px; pointer-events:none; }
.select{
  padding:11px 16px; border-radius:22px; border:1px solid var(--border-2);
  background:var(--surface); font-size:14px; font-family:inherit; color:var(--ink); cursor:pointer;
}
.count{ font-size:13px; color:var(--muted); white-space:nowrap; }

.morebar{ text-align:center; padding:16px; border-top:1px solid var(--border); background:var(--surface-2); }

/* ============================================================
   LISTA DE EDICIONES
   ============================================================ */
.edlist{ display:grid; gap:16px; }
.edcard{
  display:grid; grid-template-columns:142px 1fr auto; gap:24px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.edcard:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border-2); }
.edcard__num{
  font-family:'Playfair Display',serif; font-size:40px; font-weight:800;
  color:var(--verde); text-align:center; line-height:1;
  border-right:1px solid var(--border); padding-right:20px;
}
.edcard__date{ font-size:12.5px; color:var(--muted); font-weight:600; margin-top:6px; letter-spacing:.02em; }
.edcard__champs{ display:flex; flex-direction:column; gap:9px; }
.edcard__champ{ display:flex; align-items:center; gap:10px; font-size:14.5px; }
.edcard__champ b{ font-weight:600; }
.edcard__go{ color:var(--muted); font-size:22px; }
@media (max-width:760px){
  .edcard{ grid-template-columns:1fr; gap:16px; }
  .edcard__num{ border-right:0; border-bottom:1px solid var(--border); padding:0 0 14px; text-align:left; }
  .edcard__go{ display:none; }
}

/* ============================================================
   FICHA DE JUGADOR
   ============================================================ */
.ficha{
  background:linear-gradient(165deg,var(--verde) 0%, #0d4026 100%);
  color:var(--crema); border-radius:var(--radius-l); padding:36px 38px;
  display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
}
@media (max-width:820px){ .ficha{ grid-template-columns:1fr; gap:22px; text-align:center; } }
.ficha__avatar{
  width:96px; height:96px; border-radius:50%; background:rgba(240,229,200,.12);
  border:2px solid rgba(224,158,35,.55); display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:34px; font-weight:800; color:var(--dorado); flex-shrink:0;
}
@media (max-width:820px){ .ficha__avatar{ margin:0 auto; } }
.ficha__name{ font-family:'Playfair Display',serif; font-size:clamp(26px,3.6vw,38px); font-weight:800; margin-bottom:10px; }
.ficha__tags{ display:flex; gap:9px; flex-wrap:wrap; }
@media (max-width:820px){ .ficha__tags{ justify-content:center; } }
.ficha__ovr{ text-align:center; flex-shrink:0; }
.ficha__ovr .n{ font-family:'Playfair Display',serif; font-size:66px; font-weight:800; color:var(--dorado); line-height:.95; }
.ficha__ovr .l{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; opacity:.75; margin-top:6px; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:17px 18px; }
.kpi__l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.kpi__v{ font-family:'Playfair Display',serif; font-size:26px; font-weight:800; color:var(--verde); margin-top:5px; line-height:1.1; }
.kpi__n{ font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ============================================================
   SALÓN DE LA FAMA
   ============================================================ */
.record{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.record__head{ padding:20px 24px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.record__head h3{ font-size:19px; margin-bottom:4px; }
.record__head p{ font-size:13px; color:var(--muted); margin:0; line-height:1.5; }
.record__list{ list-style:none; margin:0; padding:8px 0; }
.record__list li{
  display:flex; align-items:center; gap:13px; padding:10px 24px;
  font-size:14.5px; border-bottom:1px solid rgba(11,53,31,.05);
}
.record__list li:last-child{ border-bottom:0; }
.record__pos{
  width:23px; height:23px; border-radius:50%; background:var(--surface-3);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:var(--ink-2); flex-shrink:0;
}
.record__pos--1{ background:var(--dorado); color:var(--verde); }
.record__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record__val{ font-weight:700; color:var(--verde); font-variant-numeric:tabular-nums; flex-shrink:0; }
@media (max-width:520px){
  .record__list li{ padding-left:16px; padding-right:16px; gap:10px; font-size:13.5px; }
  .card{ padding:20px; }
  .card--pad-l{ padding:22px; }
  .ctaband{ padding:24px 22px; }
  .ficha{ padding:26px 20px; }
}

/* ============================================================
   AVISOS
   ============================================================ */
.notice{
  background:var(--surface-2); border:1px dashed var(--border-2);
  border-radius:var(--radius); padding:20px 24px; font-size:14px; color:var(--ink-2); line-height:1.65;
}
.notice strong{ color:var(--ink); }
.notice--gold{ background:rgba(224,158,35,.09); border-color:rgba(224,158,35,.4); }

.empty{ text-align:center; padding:56px 24px; color:var(--muted); }
.empty__ico{ font-size:38px; margin-bottom:14px; opacity:.5; }

/* Banda CTA */
.ctaband{
  background:linear-gradient(120deg,var(--verde),var(--verde-3));
  color:var(--crema); border-radius:var(--radius-l); padding:32px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.ctaband h3{ font-size:22px; margin-bottom:5px; }
.ctaband p{ margin:0; font-size:14.5px; opacity:.85; }

/* Galería */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:820px){ .gal{ grid-template-columns:repeat(2,1fr); } }
.gal div{
  aspect-ratio:1/1; border-radius:var(--radius-s);
  background:linear-gradient(140deg,var(--verde-2),var(--verde-3)); opacity:.4;
}
.gal img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-s);
  cursor:pointer; display:block; transition:opacity .15s ease, transform .15s ease;
}
.gal img:hover{ opacity:.88; transform:scale(1.015); }

/* Breadcrumb */
.crumb{ font-size:13px; color:var(--muted); margin-bottom:18px; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--verde); }

/* ============================================================
   PIE
   ============================================================ */
.footer{ background:var(--verde); color:rgba(240,229,200,.66); padding:52px 0 34px; margin-top:0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__brand{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.footer__brand img{ width:44px; height:44px; }
.footer__brand span{ font-family:'Playfair Display',serif; font-weight:800; font-size:18px; color:var(--crema); }
.footer p{ font-size:13.5px; line-height:1.65; margin:0; }
.footer h4{ font-family:'Inter',sans-serif; font-size:11.5px; text-transform:uppercase;
            letter-spacing:.13em; color:var(--dorado); margin:0 0 13px; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:8px; }
.footer a{ color:rgba(240,229,200,.75); font-size:13.5px; }
.footer a:hover{ color:var(--crema); }
.footer__bottom{
  border-top:1px solid rgba(240,229,200,.13); padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px;
}

/* Botón flotante */
.fab{
  /* A la izquierda a propósito: todas nuestras tablas alinean el dato importante
     (puntos, WR...) a la derecha, y un botón fijo ahí lo tapaba al hacer scroll. */
  position:fixed; bottom:24px; left:24px; z-index:90;
  width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.24); transition:transform .15s;
}
.fab:hover{ transform:scale(1.06); text-decoration:none; }
.fab svg{ width:27px; height:27px; fill:currentColor; }

/* Utilidades */
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:32px}.mt-4{margin-top:48px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:32px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:13px}