/* portal.css — Portal del Socio, Puerto Cancún Club.
   Paleta de marca: petróleo del wordmark, cian de las velas, gris del compás.
   Tema claro y oscuro por tokens; el diseño aprobado vive en
   prototipo/portal-socio.html. */

:root{
  --ground:#EDF2F4;
  --surface:#FFFFFF;
  --surface-2:#F3F7F9;
  --ink:#12232C;
  --ink-2:#4E6672;
  --ink-3:#87979F;
  --line:#DAE3E8;
  --brand:#007490;        /* petróleo oficial del logo */
  --brand-ink:#005A70;
  --brand-soft:#E0EEF2;
  --agua:#008CC4;         /* cian oficial de las velas */
  --agua-soft:#E1F1F8;
  --steel:#7E7C84;        /* gris oficial del compás */
  --danger:#A8452F;
  --danger-soft:#F6E7E1;
  --warn:#9A6A12;
  --warn-soft:#F7EDD6;
  --busy:#E8ECEE;
  --shadow:0 10px 30px rgba(18,35,44,.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0A1419;
    --surface:#122128;
    --surface-2:#17282F;
    --ink:#E5EDF0;
    --ink-2:#A3B6BE;
    --ink-3:#6E8288;
    --line:#233741;
    --brand:#33A6C6;        /* petróleo elevado para leer en oscuro */
    --brand-ink:#6FC8E0;
    --brand-soft:#0F3644;
    --agua:#3AACDE;
    --agua-soft:#0E2F3E;
    --steel:#9A989F;
    --danger:#D4795F;
    --danger-soft:#3A231C;
    --warn:#E0B15A;
    --warn-soft:#3B3220;
    --busy:#182228;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:430px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 20px}

/* marca — logo oficial (img/logo-puerto-cancun.svg e img/marca.svg) */
.crest{font-family:"Marcellus",Georgia,serif;letter-spacing:.06em}
.logo-full{display:block;width:230px;max-width:72%;height:auto}
.logo-mark{display:block;width:32px;height:28px;flex:0 0 auto}
.brandrow{display:flex;align-items:center;gap:10px;margin:18px 0}
.brandrow .crest{font-size:16px;line-height:1.2}
.brandrow .crest small{display:block;font-size:9px;letter-spacing:.28em;color:var(--ink-3);font-family:"Figtree",sans-serif;font-weight:700;margin-top:2px}
/* En oscuro, un halo suave detrás del logo para que el gris del compás y
   la palabra CLUB no se pierdan sobre el fondo profundo. */
@media (prefers-color-scheme: dark){
  .logo-full,.logo-mark{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
}

/* auth */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 8px 32px}
.auth-head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:34px;text-align:center}
.tagline{font-size:11.5px;letter-spacing:.34em;color:var(--ink-2);font-family:"Figtree",sans-serif;font-weight:700;text-transform:uppercase}
h1.onb-title{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:26px;margin:14px 0 6px}
.sub{color:var(--ink-2);margin:0 0 22px}
.back{display:inline-block;margin:0 0 6px -2px;padding:4px 2px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none}
.back:active{opacity:.7}

/* formularios */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.field input{
  font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;outline:none;width:100%;
}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.btn{
  font:inherit;font-weight:600;cursor:pointer;border:none;border-radius:12px;
  padding:14px 18px;width:100%;text-align:center;display:block;text-decoration:none;
}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-primary{background:var(--brand);color:#fff}
.btn-quiet{background:transparent;color:var(--brand)}
.btn-danger-quiet{background:transparent;color:var(--danger)}
.link{background:none;border:none;font:inherit;color:var(--brand);font-weight:600;cursor:pointer;padding:0;text-decoration:none}

/* mensajes */
.notice{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px;color:var(--ink-2);margin:18px 0 0;
}
.msg-ok{background:var(--brand-soft);border:1px solid var(--brand);border-radius:12px;color:var(--brand-ink);padding:12px 14px;font-size:14px;margin:0 0 16px}
.msg-mal{background:var(--danger-soft);border:1px solid var(--danger);border-radius:12px;color:var(--danger);padding:12px 14px;font-size:14px;margin:0 0 16px}
.auth-foot{margin-top:26px;text-align:center;color:var(--ink-3);font-size:13px}

/* cascada de familia */
.sect{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;margin:20px 0 10px}
.fam-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.fam-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.fam-name{font-weight:600}
.fam-rel{font-size:12px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.fam-row{display:flex;gap:8px}
.fam-row input{
  flex:1;font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;
}
.fam-row input:focus{border-color:var(--brand)}
.chip-ok{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-ink);font-size:12.5px;font-weight:600;border-radius:99px;padding:5px 11px}
.onb-note{font-size:13px;color:var(--ink-3);margin:16px 0 22px}

/* tarjetas genéricas */
.kv{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin-bottom:14px}
.kv-line{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv-line:last-child{border-bottom:none}
.kv-line dt{color:var(--ink-2)}
.kv-line dd{margin:0;font-weight:600}

/* ───────── shell de la app (con sesión) ───────── */
.app-body{flex:1;padding:4px 0 96px}
h1.h-screen{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:24px;margin:0 0 4px}
.apphead{display:flex;align-items:center;justify-content:space-between}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  border:1px solid var(--line);text-decoration:none;
}
.avatar.big{width:54px;height:54px;font-size:18px}
.tabbar{
  position:sticky;bottom:0;z-index:30;margin:auto -20px 0;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:600;color:var(--ink-3);padding:6px 4px;border-radius:10px;text-decoration:none;
}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.active{color:var(--brand)}
.tab:focus-visible,.chip:focus-visible,.cell.free:focus-visible,.seg a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ───────── inicio ───────── */
.next-card{
  display:block;text-decoration:none;background:var(--brand);color:#fff;
  border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow);
}
.next-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;opacity:.8;margin-bottom:6px}
.next-main{font-family:"Marcellus",Georgia,serif;font-size:21px;line-height:1.3}
.next-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;opacity:.92;font-variant-numeric:tabular-nums}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.btn-outline{background:var(--surface);color:var(--brand);border:1px solid var(--line)}
.today-list{display:flex;flex-direction:column;gap:8px}
.today-item{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;
}
.today-item .t{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pill-agua{background:var(--agua-soft);color:var(--agua);font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 10px}

/* ───────── reservar ───────── */
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.chip{
  flex:0 0 auto;min-width:52px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;text-align:center;color:var(--ink);text-decoration:none;
}
.chip .d1{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.08em}
.chip .d2{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.chip.sel{background:var(--brand);border-color:var(--brand)}
.chip.sel .d1,.chip.sel .d2{color:#fff}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:16px}
.seg a{flex:1;font-weight:600;font-size:14px;color:var(--ink-2);padding:9px;border-radius:9px;text-align:center;text-decoration:none}
.seg a.sel{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(18,35,44,.12)}
.gridwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table.rgrid{border-collapse:collapse;width:100%;min-width:372px}
.rgrid th{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);padding:10px 4px 8px;border-bottom:1px solid var(--line);text-transform:uppercase}
.rgrid td{padding:3px}
.rgrid td.hr{font-size:12px;color:var(--ink-3);padding:0 8px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;border-right:1px solid var(--line)}
.cell{height:32px;border-radius:8px;display:block;width:100%;box-sizing:border-box}
.cell.free{background:var(--surface-2);border:1px dashed var(--line)}
.cell.free:hover{border-color:var(--brand);background:var(--brand-soft)}
.cell.busy{background:var(--busy)}
.cell.past{background:transparent;border:1px dashed var(--line);opacity:.35}
.cell.mine{background:var(--brand);opacity:.9}
.cell.clase{background:var(--agua-soft);color:var(--agua);font-size:10px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.dot.free{background:var(--surface-2);border:1px dashed var(--ink-3)}
.dot.busy{background:var(--busy);border:1px solid var(--line)}
.dot.clase{background:var(--agua-soft)}
.dot.mine{background:var(--brand)}
.confirm{background:var(--surface);border:1px solid var(--brand);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.confirm-t{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:21px;margin:0 0 12px}
.free-line{color:var(--brand-ink);font-weight:600}

/* selector de actividad */
.acts{display:flex;gap:8px;overflow-x:auto;margin:0 0 6px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.act{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 14px;text-decoration:none}
.act.sel{background:var(--brand);border-color:var(--brand);color:#fff}
select.sel{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}

/* hora primero, cancha después */
.days .mes{flex:0 0 auto;align-self:center;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;padding:0 4px 0 2px}
.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tp{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 6px;
  color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;font-variant-numeric:tabular-nums;
}
.tp small{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.tp.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.tp.sel small{color:rgba(255,255,255,.85)}
.canchas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.court{
  display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;color:var(--ink);font-weight:600;text-decoration:none;
}
.court small{font-size:11.5px;font-weight:600;color:var(--brand-ink)}
.court.off{background:var(--busy);color:var(--ink-3);border-style:dashed}
.court.off small{color:var(--ink-3)}
/* amigos como acceso directo */
.amigos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.amigos-lbl{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-right:2px}
.amigo{font:inherit;font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);border:1px solid transparent;border-radius:99px;padding:6px 12px;cursor:pointer}
.amigo:hover{border-color:var(--brand)}
/* jugadores */
.jrow{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:8px}
.jrow select{font:inherit;font-size:14px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.j-campo{position:relative}
.j-busca,.j-inv{font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;outline:none}
.j-busca:focus,.j-inv:focus{border-color:var(--brand)}
.j-ok{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-ink);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14px}
.sug{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-top:4px}
.sug-item{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;padding:10px 12px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.sug-item:last-child{border-bottom:none}
.sug-item:hover{background:var(--surface-2)}
.inv-total{margin-top:8px;background:var(--agua-soft);color:var(--agua);border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:600}
.res-con{font-size:13px;color:var(--ink-2);margin-top:4px}

/* ───────── mis reservas ───────── */
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.res-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.res-what{font-weight:600}
.res-when{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:2px}
.res-foot{display:flex;justify-content:flex-end;margin-top:8px}
.res-foot.two{justify-content:space-between;gap:6px;flex-wrap:wrap}
.share{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px}
.share-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--brand);text-decoration:none;cursor:pointer;min-width:96px}
.share-btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.share-wrap{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.share-wrap .fam-row{margin-top:4px}
/* horas llenas con "avísame" (lista de espera) */
.tp.off{opacity:.55;border-style:dashed;pointer-events:none}
.horas-1{grid-template-columns:1fr 1fr;max-width:260px}
.tp-cambiar{border-style:dashed;color:var(--brand)}
.tp-esp{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.tp-esp .tp{pointer-events:none}
.tp-esp .link{font-size:12px;text-align:center}
/* editar jugadores en Mis reservas */
.jug-wrap{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.jug-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;font-size:13.5px}
.jug-add{position:relative;display:flex;gap:8px;margin-top:6px}
.jug-add .j-busca{flex:1}
.jug-add .sug{top:100%}
.abre-wrap{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.abrir-box{margin:10px 0 4px;padding:10px 12px;background:var(--surface-2);border-radius:12px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.chk input{margin-top:3px}
.amigo.sel{background:var(--brand);color:#fff}
/* barra de días de acceso */
.barra{height:8px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:12px;overflow:hidden}
.barra-in{height:100%;background:#fff;border-radius:99px}
/* campanita y avisos */
.apphead-right{display:flex;align-items:center;gap:10px}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.aviso{display:block;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.aviso:last-of-type{border-bottom:none}
.aviso-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.aviso-f{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.aviso-t{font-size:14px;font-weight:600}
.aviso.nuevo .aviso-t{color:var(--brand-ink)}
.aviso-x{font-size:13px;color:var(--ink-2);margin-top:2px}
/* aviso de instalar la app (js/pwa.js) */
.pwa-aviso{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px;font-size:13px}
.pwa-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.pwa-txt{flex:1;display:flex;flex-direction:column;gap:2px;color:var(--ink-2)}
.pwa-txt b{color:var(--ink)}
.pwa-btn{font:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--brand);border:none;border-radius:10px;padding:9px 14px;cursor:pointer}
.pwa-x{font:inherit;font-size:20px;line-height:1;color:var(--ink-3);background:none;border:none;padding:4px 6px;cursor:pointer}
.pwa-share{display:inline-block;border:1.5px solid currentColor;border-radius:4px;padding:0 4px;font-size:11px;line-height:1.3}
@media (display-mode: standalone){.pwa-aviso{display:none}}
/* estado de cuenta */
.next-card.cta-rojo{background:var(--danger)}
.next-card.cta-amarillo{background:var(--warn)}
.next-card.cta-gris{background:var(--ink-3)}
.st-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--surface-2);color:var(--ink-3)}
.st-pill.st-ok{background:var(--brand-soft);color:var(--brand-ink)}
.st-pill.st-warn{background:var(--warn-soft);color:var(--warn)}
.st-pill.st-mal{background:var(--danger-soft);color:var(--danger)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.mov{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mov:last-child{border-bottom:none}
.mov-c{font-size:14px;font-weight:600}
.mov-d{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.mov-r{text-align:right;flex-shrink:0}
.mov-m{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;margin-bottom:3px}
.mov-m.pago{color:var(--brand-ink)}
.cta-item{border-color:var(--brand)}
.tagfree{font-size:11.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:99px;padding:4px 10px;white-space:nowrap}
.res-past{opacity:.62}
.empty{color:var(--ink-3);font-size:14px;text-align:center;padding:26px 0}
.btn-inline{width:auto;padding:6px 4px;font-size:14px}

/* ───────── mi QR ───────── */
.qr-stage{display:flex;flex-direction:column;align-items:center;padding-top:6px;margin-bottom:6px}
.qr-frame{background:#fff;border:1.5px solid var(--steel);border-radius:20px;padding:16px;margin:10px 0 14px;box-shadow:var(--shadow)}
.qr-img{display:block;width:240px;height:240px;image-rendering:pixelated}
.qr-name{font-family:"Marcellus",Georgia,serif;font-size:19px;text-align:center}
.qr-accion{font-size:12.5px;color:var(--ink-2);letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-top:2px}
.qr-renueva{margin-top:10px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ───────── perfil ───────── */
.pro-head{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.pro-name{font-family:"Marcellus",Georgia,serif;font-size:21px}
.pro-plan{font-size:13px;color:var(--ink-2)}
.fam-min{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.fam-min:last-child{border-bottom:none}
.fam-min .st{font-size:12px;color:var(--brand-ink);font-weight:600;white-space:nowrap}
.fam-min .st.pend{color:var(--ink-3)}