/* ═══════════════════════════════════════════════════════════════════════════
   La Esquina — foreground (nav, sign, hub, chip/status).

   SAME visual language as the homepage. Every colour below is the homepage's own
   token from css/home.css (its palette is scoped to #lobby/#siteNav, so it cannot be
   imported — the values are mirrored here with the source named on each line, and the
   two blocks must be kept in step). La Esquina keeps its identity through LAYOUT and
   CONTENT — the painted sign, the centred column, the café table in the background,
   the lounge sections — not through a palette of its own.

   Structure/IDs are unchanged — this file only sets the look, so the profile
   chip, status selector, notifications bell, CTAs and matchmaking keep working.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── palette — mirrors css/home.css's #lobby/#siteNav block, value for value ── */
:root {
  --bg:      #0b2352;   /* home --navy-1   base field                          */
  --bg-2:    #16386f;   /* home --navy-2   lifted / stage-light                */
  --bg-deep: #061634;   /* home --navy-0   deepest, page floor                 */
  --paper:   #112a5e;   /* home --surface  raised surfaces: cards, inputs      */
  --paper-2: #17376e;   /* home --surface-2  hover surface                     */
  --ink:     #eaf1ff;   /* home --text     cool off-white                      */
  --ink-strong: #ffffff;/* home --text-strong                                  */
  --ink-soft:#9db0d6;   /* home --text-muted  muted blue-grey                  */
  --line:      rgba(151, 182, 255, .16);  /* home --border                     */
  --line-soft: rgba(151, 182, 255, .09);  /* home --border-soft                */
  --line-lit:  rgba(151, 182, 255, .34);  /* home's secondary-button hover edge */
  --accent:     #d42a39;  /* home --red       the primary action              */
  --accent-deep:#b41f2c;  /* home --red-deep                                  */
  --accent-lit: #e23443;  /* home's primary hover                             */
  --focus:      #7fa8ff;  /* home's focus ring                                */
  --gold:       #d9b46a;  /* home --gold — the one quiet whisper accent        */
  --gold-deep:  #a8823f;
  --good:       #43A047;  /* base.css --good — status only                     */
  /* Head-to-head lead. No homepage equivalent exists, so these are the only two colours
     defined here rather than mirrored — kept desaturated to sit quietly on navy, and never
     the only signal (the row also says "Tu ventaja" / "Su ventaja" / "Empate"). */
  --up:   #7fd6a0;
  --down: #ff9d9d;
}

* { box-sizing: border-box; }
/* base.css already fills the viewport with the app's navy; this keeps the same field so
   nothing pale can show around the layout (mobile letterboxing, safe areas). */
html, body { margin: 0; min-height: 100%; background: var(--bg-deep); }
body {
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg-deep);   /* solid fallback under the fixed .es-scene */
  -webkit-font-smoothing: antialiased;
}

/* ── top section nav — Inicio · Jugar · La Esquina · perfil ── */
.es-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(14px, 4vw, 32px);
  background: rgba(6, 22, 52, .72); backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
/* ONE ROW ON A PHONE: the hamburger at the left edge, and status, language, bell and account
   together at the right, at every width down to 320px. The Capicúa wordmark is a sixth control
   on a desktop and is hidden on a phone — see the media block further down, where the sizes
   that make the row fit are measured rather than guessed.
   flex-wrap stays as a LAST RESORT that no tested width reaches (390px finishes with 42px
   to spare). It only matters if a device enlarges text beyond what CSS asked for — iOS Dynamic
   Type, a desktop zoom — where dropping the cluster to a second line is far better than
   shearing the account chip off the edge of the screen.
   margin-left:auto is what holds it right: justify-content:space-between has nothing to
   distribute on a line carrying one item, so without it a wrapped cluster jumps left. */
.es-nav { flex-wrap: wrap; row-gap: 6px; }
.es-ident { margin-left: auto; }
.es-nav-left { display: flex; align-items: center; gap: clamp(8px, 2.4vw, 22px); }
.es-nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.es-nav-logo img { height: 32px; width: auto; display: block; filter: drop-shadow(0 2px 5px rgba(4, 11, 30, .45)); }
.es-nav-links { display: flex; align-items: center; gap: 2px; }
.es-nav-link {
  color: var(--ink-soft); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  padding: 8px 13px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.es-nav-link:hover { color: var(--ink-strong); background: var(--paper); }
.es-nav-link.active { color: var(--ink-strong); }
.es-nav-link.soon { color: var(--ink-soft); opacity: .7; cursor: default; }
.es-nav-link.soon em {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); background: rgba(217, 180, 106, .12); border: 1px solid rgba(217, 180, 106, .28);
  padding: 2px 6px; border-radius: 999px; margin-left: 6px;
}
@media (max-width: 640px) { .es-nav-links { display: none; } }

/* identity chip + status (unchanged behaviour — esquina.js) */
.es-ident { display: inline-flex; align-items: center; gap: 8px; }
.es-chip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 5px 12px 5px 5px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 13.5px;
  background: var(--paper); border: 1px solid var(--line);
}
.es-chip:hover { background: var(--paper-2); border-color: var(--line-lit); }
.es-chip-av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: var(--ink);
  background: var(--paper-2);
  background-size: cover; background-position: center;
}
/* Chosen avatar image (same has-img convention as the nav chip / player cards). */
.es-chip-av.has-img { background-repeat: no-repeat; color: transparent; }
.es-status { position: relative; }
.es-status-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
}
.es-status-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line-lit); }
.es-status-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-status-caret { font-size: 10px; opacity: .7; }
.es-status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-soft); box-shadow: 0 0 0 2px var(--paper);
}
/* Status is never colour-only: every dot sits beside its Spanish label (.es-status-label) and
   the chosen option carries aria-selected. */
.es-status-dot[data-status="online"]  { background: var(--good); }
.es-status-dot[data-status="away"]    { background: var(--gold); }
.es-status-dot[data-status="busy"]    { background: var(--accent); }
.es-status-dot[data-status="offline"] { background: var(--ink-soft); }
.es-status-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 5px; list-style: none; min-width: 168px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper); box-shadow: 0 14px 34px rgba(4, 11, 30, .5);
}
.es-status-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 10px; border-radius: 9px; color: var(--ink); font-weight: 700; font-size: 13px;
}
.es-status-opt:hover { background: var(--paper-2); }
.es-status-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.es-status-opt[aria-selected="true"] { color: var(--ink-strong); }
.es-status.hidden, .es-status-menu.hidden { display: none; }
@media (max-width: 460px) { .es-status-label { display: none; } }
/* ── the one-row phone header ──────────────────────────────────────────────
   NO CAPICUA LOGO ON A PHONE. The sign two hundred pixels below says LA ESQUINA in letters
   an inch tall; a 39px wordmark above it was saying the same thing again, and it was the one
   thing in this row that nothing else needed. Dropping it hands back 46px — the logo plus the
   gap after it — and that is what pays for the rest of the row being comfortable instead of
   merely fitting. Desktop keeps it: this is presentation, the markup is untouched.
   What the 46px bought, measured at 390px: header padding 9 -> 10, hamburger 36 -> 38,
   status 36.7 -> 40.6, language 70.3 -> 75.6, bell 35.3 -> 38.7, account chip 102.1 -> 106.5
   with its name capped at 120px again rather than 84. Spare went from 19.6px to 41.6px, so
   the space between the hamburger and the cluster is real space, not a rounding error.
   Height is not the scarce dimension, so every control is still --tap (44px) tall.
   padding-top stays absent on purpose: css/mobile.css owns it, and it is the iPhone safe area.
   (max-height) catches phone landscape, where the section links would otherwise hold the
   cluster off the row — they are in the hamburger on every screen this size anyway. */
@media (max-width: 640px), (max-height: 560px) {
  .es-nav { padding-left: 10px; padding-right: 10px; column-gap: 8px; }
  .es-ident { gap: 7px; }
  .es-nav .nav-right { gap: 7px; }
  .es-nav .es-nav-logo { display: none; }
  .es-nav .es-nav-links { display: none; }
  #siteNav .es-nav .nav-burger { min-width: 38px; padding-left: 7px; padding-right: 7px; font-size: 19px; }
  .es-nav .es-status-btn { padding: 5px 8px; gap: 5px; }
  .es-nav .es-status-caret { font-size: 10px; }
  .es-nav .notif-bell { padding: 6px 7px; font-size: 18px; min-height: var(--tap); }
  #siteNav .es-nav .nav-lang { padding: 7px 10px; gap: 5px; font-size: 13px; }
  #siteNav .es-nav .profile-trigger { padding: 5px 10px; gap: 6px; font-size: 13px; min-height: var(--tap); }
  .es-nav .profile-av { font-size: 13px; }
  .es-nav .profile-name { max-width: 120px; }
}
/* Smaller phones: the same row, a little tighter. 360px still finishes 33px clear. */
@media (max-width: 380px) {
  .es-nav { padding-left: 7px; padding-right: 7px; column-gap: 6px; }
  .es-ident { gap: 5px; }
  .es-nav .nav-right { gap: 5px; }
  .es-nav .es-status-btn { padding: 5px 7px; }
  .es-nav .notif-bell { padding: 6px 6px; }
  #siteNav .es-nav .nav-lang { padding: 7px 9px; }
  #siteNav .es-nav .profile-trigger { padding: 5px 9px; }
  .es-nav .profile-name { max-width: 90px; }
}
/* 320px. This used to be where the username was dropped and the account fell back to an
   avatar — there was no room for it once a logo had taken its share. There is now: the row
   finishes 16.6px clear WITH the name, so the name stays, and the fallback is gone. The cap
   is what ellipsises a username longer than this width can hold. */
@media (max-width: 344px) {
  .es-nav { padding-left: 6px; padding-right: 6px; column-gap: 5px; }
  .es-ident { gap: 4px; }
  .es-nav .nav-right { gap: 4px; }
  .es-nav .es-status-btn { padding: 5px 6px; gap: 4px; }
  .es-nav .notif-bell { padding: 6px 5px; }
  #siteNav .es-nav .nav-lang { padding: 7px 8px; gap: 4px; }
  #siteNav .es-nav .profile-trigger { padding: 5px 7px; gap: 4px; }
  .es-nav .profile-name { max-width: 56px; }
}

/* Notifications bell — notifications.css is already authored for the app's navy, so this only
   needs the nav's own text colour and hover surface. */
.es-nav .notif-bell { color: var(--ink); }
.es-nav .notif-bell:hover { background: var(--paper); }

/* ── foreground container over the fixed scene ── */
.esquina-fg {
  position: relative; z-index: 2;
  min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 8vh, 88px) 20px 48px; text-align: center;
}
.es-inner { width: 100%; max-width: 560px; margin: 0 auto; }

/* ── "LA ESQUINA" sign — a painted board on the wall (no neon glow) ── */
.es-led { display: inline-block; margin: 0 auto; animation: esRise 1.4s cubic-bezier(.16,1,.3,1) both; }
.es-led-plaque {
  position: relative; padding: clamp(12px, 2.2vh, 20px) clamp(24px, 6vw, 56px); border-radius: 16px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(4, 11, 30, .45), inset 0 1px 0 rgba(151, 182, 255, .14);
}
.es-led-plaque::before, .es-led-plaque::after {   /* small brass mounts, one per top corner */
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 9px;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--gold-deep));
}
.es-led-plaque::before { left: 10px; } .es-led-plaque::after { right: 10px; }
.es-led-text {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: clamp(24px, 6vw, 54px); letter-spacing: .16em; line-height: 1; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(4, 11, 30, .55), 0 2px 3px rgba(4, 11, 30, .4);
}
.es-led-tag {
  display: block; margin-top: 10px; font-family: 'Cinzel', Georgia, serif; font-weight: 600;
  font-size: clamp(9px, 2vw, 12px); letter-spacing: .42em; text-indent: .42em; color: var(--ink-soft);
}

/* ── hub: tagline + primary actions ── */
.es-hub { margin-top: clamp(20px, 4vh, 40px); animation: esRise 1.4s cubic-bezier(.16,1,.3,1) .18s both; }
/* READABLE ON THE TABLE, not just on the navy above it. .es-scene is position:fixed, so on
   a page tall enough to scroll this line travels across the lit tabletop — and a cool blue-grey
   on warm honey wood measured 1.29:1, which is nearer invisible than faint. Nothing here moves
   or resizes it: the colour comes up one step and the ink behind it does the real work, the
   same dark-halo trick .es-led-text already uses to hold the gold sign against the same wood.
   Measured on the worst backdrop the line can reach: 2.20:1 -> 3.21:1 glyph against its own
   edge; on the navy where it usually sits, 5.97:1 -> 9.35:1. Still smaller, lighter and
   quieter than the sign — the size and the italic serif are what keep it secondary. */
.es-tagline {
  margin: 0 0 clamp(20px, 4vh, 30px);
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic;
  font-size: clamp(16px, 4.4vw, 23px); letter-spacing: .04em; color: #cfdcf2;
  text-shadow: 0 1px 2px rgba(4, 11, 30, .95), 0 0 3px rgba(4, 11, 30, .95),
               0 0 9px rgba(4, 11, 30, .6);
}
.es-cta-row { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 0 auto; }

.es-cta {
  display: block; width: 100%; cursor: pointer; font: inherit; text-align: center; text-decoration: none;
  border-radius: 14px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease, color .15s ease;
}
.es-cta:active { transform: translateY(1px); }
.es-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* PRIMARY — JUGAR YA: the same flat flag red as the homepage's .home-btn-primary. */
.es-cta-primary {
  padding: 20px 24px; font-size: clamp(18px, 5vw, 22px); font-weight: 800; letter-spacing: .06em;
  color: #fff; background: var(--accent);
  box-shadow: 0 16px 34px rgba(180, 30, 45, .30), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.es-cta-primary:hover {
  background: var(--accent-lit);
  box-shadow: 0 20px 42px rgba(200, 36, 52, .38), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* SECONDARY — CREAR MESA: the same calm outline on navy as .home-btn-secondary. */
.es-cta-secondary {
  padding: 16px 22px; font-size: clamp(14px, 4vw, 16px); font-weight: 700; letter-spacing: .04em;
  color: var(--ink); background: var(--paper); border-color: var(--line);
}
.es-cta-secondary:hover { background: var(--paper-2); border-color: var(--line-lit); color: var(--ink-strong); }
.es-hub-alt {
  display: block; margin: 16px auto 0; cursor: pointer; background: none; border: 0;
  color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.es-hub-alt:hover { color: var(--ink-strong); }

@keyframes esRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .es-led, .es-hub { animation: none; } }

/* ── "Amigos conectados" MOUNT (the widget itself is friends.js + .esquina-friends/.esf-* in
   friends.css — nothing about its look is redefined or duplicated here) ──
   Two placement-only corrections for living inside this centred foreground:
     • text-align — .esquina-fg centres the sign and the CTAs, and that inherits into the
       section. This is a LIST of people, so restore the left alignment the widget is authored
       for (its other home, the friends modal, is left-aligned by default).
     • margin-top — space under the CTAs so it reads as its own part of the room.
   Scoped as `.es-inner .esquina-friends` (0,2,0) on purpose: friends.css is linked AFTER this
   file and sets `margin: 0 auto` at (0,1,0), which would otherwise reset the top margin.

   The same (0,2,0) scope re-points the widget's PALETTE at this page's tokens. friends.css
   declares those variables on `.fr-overlay, .fr-panel, .pm-friend, .esquina-friends`, so this
   override reaches ONLY La Esquina's copy — the Amigos modal and the player-card friend button
   keep the component's own look wherever else they appear. Without it this was the one card in
   the column still wearing the old warm-brown shell. */
.es-inner .esquina-friends {
  margin-top: clamp(20px, 4vh, 34px); text-align: left;
  /* friends.css's own token names, pointed at this page's values */
  --surface: var(--paper);
  --border: var(--line);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --amber: var(--gold);
  --amber-hover: var(--gold);
  --success: var(--good);
  /* its shell is a hardcoded warm wash at (0,1,0) — replace it with the same surface the
     Dato / players / search cards use, so the four read as one stack. */
  background: var(--paper);
  border-color: var(--line);
}
/* The invite button inside the widget is .esi-btn/.esf-invite from friends.css; give it the
   same resting outline the other row actions (.esp-action) use here. */
.es-inner .esquina-friends .esf-invite { border-color: var(--line); }
/* "Ver todos" — the widget's own footer control. */
.es-inner .esquina-friends .esf-all:focus-visible,
.es-inner .esquina-friends .esf-invite:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── 💡 Dato (js/esquina.js) ─────────────────────────────────────────────────
   One short line from the admin panel. Same width and rhythm as the social cards below
   so the stack reads as one column, but deliberately quieter — no title bar, no actions,
   italic serif like a note chalked on the café wall rather than another panel. */
.esquina-fact {
  width: min(440px, 92%); margin: clamp(14px, 2.6vh, 20px) auto 0;
  padding: 12px 18px; border-radius: 16px; text-align: left;
  background: var(--paper); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.esquina-fact.hidden { display: none; }
.esf-label {
  display: block; margin: 0 0 4px;
  font-family: 'Nunito', system-ui, sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold); opacity: .9;
}
.esf-text {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 16.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere;
}

/* ── 🕹️ Jugadores recientes · ⚔️ Rivalidades (js/esquinaPlayers.js) ──────────
   Deliberate SIBLINGS of "Amigos conectados": same width, radius, translucent card and blur, so
   the three social blocks read as one stack on the café table rather than three designs. They
   use this file's own tokens (which mirror the homepage) rather than reaching into friends.css's
   component palette, so that widget keeps its own file to itself. Compact by intent —
   a lounge glance, not a dashboard: a few rows, one action, no panels. */
.esquina-players {
  width: min(440px, 92%); margin: clamp(14px, 2.6vh, 20px) auto 0;
  padding: 14px 18px; border-radius: 16px; text-align: left;
  background: var(--paper); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); font-family: 'Nunito', system-ui, sans-serif;
}
.esquina-players.hidden { display: none; }
.esp-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--gold); }
.esp-empty { margin: 0; font-size: 13px; color: var(--ink-soft); }
.esp-list { display: flex; flex-direction: column; gap: 9px; }
.esp-row { display: flex; align-items: center; gap: 10px; min-width: 0; }

.esp-avwrap { position: relative; flex: none; line-height: 0; }
.esp-av {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; line-height: 1; color: var(--ink);
  background: var(--paper-2);
  background-size: cover; background-position: center;
}
.esp-av.has-img { color: transparent; }
.esp-dot {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--paper);
}
/* Presence is never colour-only — every dot sits beside its Spanish label (.esp-pres). */
.esp-dot.is-online { background: var(--good); }
.esp-dot.is-playing { background: var(--gold); }

.esp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.esp-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); }
.esp-tag { font-weight: 700; color: var(--gold); opacity: .85; }
/* Who is ahead is also spelled out in words ("Tu ventaja" / "Su ventaja" / "Empate"), so the
   colour only reinforces the label it sits on. */
.esp-lead { font-weight: 800; }
.esp-lead.is-up { color: var(--up); }
.esp-lead.is-down { color: var(--down); }
.esp-lead.is-even { color: var(--ink-soft); }

/* Head-to-head score — the only number here, straight from the API. */
.esp-score { flex: none; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .04em; }

.esp-action {
  flex: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; color: var(--ink);
  background: transparent; border: 1px solid var(--line);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.esp-action:hover { background: var(--paper-2); border-color: var(--line-lit); color: var(--ink-strong); }
.esp-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── footer — pinned to the bottom of the foreground ── */
.es-foot { margin-top: auto; padding-top: clamp(28px, 6vh, 56px); text-align: center; }
.es-foot a { color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 13px; }
.es-foot a:hover { color: var(--ink-strong); }
/* ── Mesa card: simple by default, detailed on demand ──────────────────────
   The card says the table's name and how full it is. Everything else lives in .esp-details,
   revealed three ways so no input method is left out:
     • :hover        desktop pointer
     • :focus-within keyboard — tabbing to the row's ⓘ / Unirse / Espectar reveals it
     • .is-open      the ⓘ toggle, which is the ONLY one of the three that works on touch
   The panel is absolutely positioned so revealing it never reflows the list under the
   reader's cursor. */
.esp-row { position: relative; }
.esp-count { font-size: 11.5px; color: var(--ink-soft); }

.esp-info {
  flex: none; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  font: inherit; font-size: 13px; line-height: 1; color: var(--ink-soft); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
}
.esp-info:hover { color: var(--ink-strong); background: var(--paper-2); border-color: var(--line-lit); }
.esp-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.esp-details {
  display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  padding: 10px 12px; text-align: left;
  background: var(--paper); border: 1px solid var(--line-lit); border-radius: 11px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.esp-row:hover > .esp-details,
.esp-row:focus-within > .esp-details,
.esp-details.is-open { display: block; }

.esp-drow { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 2px 0; }
.esp-dlabel { color: var(--ink-soft); flex: none; }
.esp-dvalue { color: var(--ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.esp-drules { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.esp-drules-head { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.esp-drules-head.is-custom { color: var(--gold); }
.esp-drule {
  font-size: 11px; font-weight: 700; color: var(--ink); padding: 2px 7px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
}

/* Narrow screens: the popover spans the card rather than trying to sit beside it. */
@media (max-width: 480px) {
  .esp-details { left: -4px; right: -4px; }
}