/* ════════════════════════════════════════════════════════════
   SPORTS MATCH — Hoja de estilos única (rediseño oct 2026)
   Marca "Punto" · paleta negro y lima · tema claro.
   Un solo molde para jugador y negocio, en celular y PC.
   ════════════════════════════════════════════════════════════ */

@font-face { font-family: "Jakarta"; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "SoraMarca"; font-weight: 600; font-display: block; src: url("fonts/sora-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Marca */
  --pri: #111111;
  --acc: #C6F432;
  --acc-soft: #F2FBD6;
  --acc-dark: #4D7C0F;
  /* Superficies y texto */
  --bg: #FFFFFF;
  --sur: #F5F6F7;
  --sur2: #EDEFF2;
  --bor: #E7E9EC;
  --bor2: #D9DDE2;
  --txt: #111111;
  --txt2: #5B6270;
  --txt3: #8C93A0;
  /* Estados */
  --rojo: #D92D20; --rojo-soft: #FEF3F2; --rojo-bor: #FECDCA;
  --ambar: #93370D; --ambar-soft: #FFFAEB; --ambar-bor: #FEDF89;
  --azul: #1D4ED8; --azul-soft: #EEF4FF;
  /* Formas */
  --r-s: 10px; --r: 14px; --r-l: 20px;
  --sombra: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.06);
  --sombra-l: 0 12px 36px rgba(16,24,40,.12);
  --alto-top: 60px;
  --alto-nav: 68px;
  --ancho: 1120px;
  /* Nombres antiguos (los usan algunos textos dentro de las pantallas) */
  --verde: var(--acc-dark);
  --negro: #111111;
  --tarjeta: #FFFFFF;
  --borde: var(--bor);
  --borde-suave: var(--bor2);
  --texto: var(--txt);
  --texto-suave: var(--txt2);
  --texto-tenue: var(--txt3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--txt); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  min-height: 100vh; overflow-x: clip;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
b, strong { font-weight: 700; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.oculto { display: none !important; }

/* ── Logo "Punto" ── */
.sm-logo { font-family: "SoraMarca", "Jakarta", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.025em; color: var(--txt); text-decoration: none; white-space: nowrap; line-height: 1; display: inline-flex; align-items: baseline; }
.sm-logo i { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--acc); margin: 0 .035em; transform: translateY(.01em); font-style: normal; }
.sm-logo.blanco { color: #fff; }
.sm-logo.grande { font-size: 30px; }

/* ════════════ MOLDE COMÚN ════════════ */
/* Encabezado */
.sm-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--bor); }
.sm-top-in { height: var(--alto-top); max-width: var(--ancho); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.sm-top .sm-logo { font-size: 21px; }
.sm-esp { flex: 1; }
.sm-top-nav { display: none; }
.sm-modo { display: inline-flex; background: var(--sur); border-radius: 12px; padding: 3px; gap: 2px; }
.sm-modo a { height: 34px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--txt2); text-decoration: none; white-space: nowrap; }
.sm-modo a .ic { width: 16px; height: 16px; }
.sm-modo a.on { background: #fff; color: var(--txt); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.sm-modo .solo-pc { display: none; }
.sm-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--acc-soft); color: var(--acc-dark); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; overflow: hidden; }
.sm-avatar .ic { width: 18px; height: 18px; }
.sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-link { font-size: 14px; font-weight: 700; color: var(--txt); text-decoration: none; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--bor); background: #fff; white-space: nowrap; }
.sm-link.suave { border: none; background: none; color: var(--txt2); padding: 8px 4px; font-weight: 600; }

/* Menú inferior (celular) */
.menu-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--alto-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--bor); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; }
.item-menu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--txt3); text-decoration: none; padding-top: 4px; }
.item-menu .ic, .item-menu .icono-nav { width: 24px; height: 24px; }
.item-menu.activo { color: var(--txt); font-weight: 800; }
.item-menu.activo::before { content: ""; position: absolute; top: -9px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pri); }
.badge-notificacion { position: absolute; top: -2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid #fff; box-sizing: content-box; }

/* Contenedores */
body.con-menu { padding-bottom: calc(var(--alto-nav) + 24px + env(safe-area-inset-bottom)); }
.contenedor-principal { max-width: var(--ancho); margin: 0 auto; padding: 18px 16px 24px; }
.contenedor-formulario { max-width: 520px; margin: 0 auto; padding: 18px 16px 32px; }
.powered-by-footer { text-align: center; color: var(--txt3); font-size: 12px; margin: 32px 0 8px; }

@media (min-width: 900px) {
  :root { --alto-top: 72px; }
  .sm-top-in { padding: 0 32px; gap: 20px; }
  .sm-top .sm-logo { font-size: 24px; }
  .sm-top-nav { display: flex; gap: 4px; margin-left: 12px; }
  .sm-top-nav a { position: relative; height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--txt2); text-decoration: none; }
  .sm-top-nav a .ic { width: 19px; height: 19px; }
  .sm-top-nav a:hover { background: var(--sur); color: var(--txt); }
  .sm-top-nav a.activo { background: var(--sur); color: var(--txt); font-weight: 800; }
  .sm-top-nav .badge-espejo { position: static; display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; align-items: center; justify-content: center; }
  .sm-modo a { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .sm-modo .solo-pc { display: inline; }
  .sm-avatar { width: 40px; height: 40px; }
  .menu-inferior { display: none; }
  body.con-menu { padding-bottom: 40px; }
  .contenedor-principal { padding: 32px 32px 40px; }
  .contenedor-formulario { padding: 40px 24px 48px; }
}
@media (max-width: 899px) {
  .sm-modo a { padding: 0 10px; font-size: 12.5px; }
  .sm-modo a .ic { display: none; }
  .sm-top-in { gap: 8px; }
  .sm-top.con-titulo .sm-logo { display: none; }
}

/* ── Título de pantalla con flecha atrás ── */
.titulo-con-volver, .encabezado, .cabecera-volver { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.boton-volver, .btn-volver, .encabezado .volver, .encabezado .cerrar {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bor); background: #fff; color: var(--txt);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; font-size: 0; cursor: pointer;
}
.boton-volver::before, .btn-volver::before, .encabezado .volver::before, .encabezado .cerrar::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i-back) center/contain no-repeat; mask: var(--i-back) center/contain no-repeat;
}
.encabezado .cerrar::before { -webkit-mask-image: var(--i-x); mask-image: var(--i-x); }
.boton-volver:hover, .btn-volver:hover { background: var(--sur); }
.titulo-pantalla, .encabezado h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.titulo-con-volver .titulo-pantalla { margin: 0; }
.subtitulo-pantalla { color: var(--txt2); font-size: 15px; margin: 6px 0 22px; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-dark); }
@media (min-width: 900px) { .titulo-pantalla, .encabezado h1 { font-size: 32px; } }

/* ════════════ PIEZAS BASE ════════════ */
/* Botones */
.btn, .btn-continuar, .btn-publicar, .btn-guardar, .btn-ingresar, .btn-unirme, .btn-ir-chat, .btn-instalar,
.btn-cta-principal, .btn-cta-secundario, .btn-secundario-ancho, .btn-crear-partido, .btn-modal-primario, .btn-modal-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px;
  border-radius: var(--r); border: 1.5px solid transparent; font-size: 15.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: transform .08s, background .15s, border-color .15s; line-height: 1.2;
}
.btn:active, .btn-continuar:active, .btn-publicar:active, .btn-guardar:active, .btn-ingresar:active, .btn-unirme:active,
.btn-cta-principal:active, .btn-secundario-ancho:active { transform: scale(.985); }
/* Negro (acción principal) */
.btn-pri, .btn-continuar, .btn-publicar, .btn-guardar, .btn-ingresar, .btn-cta-principal, .btn-modal-primario, .btn-instalar { background: var(--pri); color: #fff; }
.btn-pri:hover, .btn-continuar:hover, .btn-publicar:hover, .btn-guardar:hover, .btn-ingresar:hover, .btn-cta-principal:hover, .btn-modal-primario:hover { background: #2A2A2A; }
/* Lima (unirse / acción positiva) */
.btn-acc, .btn-unirme, .btn-ir-chat { background: var(--acc); color: var(--txt); }
.btn-acc:hover, .btn-unirme:hover, .btn-ir-chat:hover { background: #B8E826; }
/* Borde */
.btn-bor, .btn-secundario-ancho, .btn-cta-secundario, .btn-crear-partido, .btn-modal-secundario { background: #fff; color: var(--txt); border-color: var(--bor2); }
.btn-bor:hover, .btn-secundario-ancho:hover, .btn-cta-secundario:hover, .btn-crear-partido:hover, .btn-modal-secundario:hover { background: var(--sur); }
.btn-ancho, .btn-continuar, .btn-publicar, .btn-guardar, .btn-ingresar, .btn-unirme, .btn-ir-chat, .btn-secundario-ancho, .btn-instalar, .btn-crear-partido { width: 100%; }
.btn-chico { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; }
.btn .ic { width: 19px; height: 19px; }
button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none !important; }
.btn-ir-chat { margin-top: 12px; }
.btn-crear-partido { margin-top: 10px; }

/* Peligro */
.btn-salir, .btn-cancelar { min-height: 48px; padding: 0 18px; border-radius: var(--r); background: #fff; border: 1.5px solid var(--rojo-bor); color: var(--rojo); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-salir:hover, .btn-cancelar:hover { background: var(--rojo-soft); }
.btn-modal-primario.peligro { background: var(--rojo); }

/* Formularios */
.grupo { margin-bottom: 16px; }
.grupo-doble { display: flex; gap: 12px; }
.grupo-doble .grupo { flex: 1; min-width: 0; }
label { display: block; font-size: 13.5px; font-weight: 700; color: var(--txt); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--bor);
  background: #fff; color: var(--txt); font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--txt3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 4px rgba(17,17,17,.06); }
input:disabled { background: var(--sur); color: var(--txt3); }
input[type="file"] { display: none; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--pri); padding: 0; }
select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px; }
.nota-campo, .nota-correo { font-size: 13px; color: var(--txt3); margin: -8px 0 14px; }
.nota-correo { margin: 6px 0 0; }
.error { display: none; color: var(--rojo); background: var(--rojo-soft); border: 1px solid var(--rojo-bor); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45; margin: 12px 0; }
.error.centrado { text-align: center; }
.exito { display: none; color: var(--acc-dark); background: var(--acc-soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin: 12px 0; }
.olvide-clave { text-align: right; margin: -6px 0 16px; }
.olvide-clave a, .enlace-centrado a, .fila-check a, .enlace { color: var(--txt); font-weight: 700; text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.enlace-centrado { text-align: center; font-size: 14.5px; color: var(--txt2); margin-top: 16px; }
.separador-texto { display: flex; align-items: center; gap: 12px; color: var(--txt3); font-size: 13px; margin: 20px 0 14px; }
.separador-texto::before, .separador-texto::after { content: ""; flex: 1; height: 1px; background: var(--bor); }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.fila-check, .fila-check-registro { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 500; color: var(--txt2); line-height: 1.5; margin: 0; }
.fila-check input, .fila-check-registro input { flex-shrink: 0; margin-top: 1px; }
.obligatorio { display: inline-block; font-size: 11px; font-weight: 800; color: var(--acc-dark); background: var(--acc-soft); border-radius: 6px; padding: 1px 6px; margin-left: 2px; }
.texto-legal-pequeno { font-size: 12px; color: var(--txt3); line-height: 1.5; margin: -4px 0 18px 30px; }
.aviso-privacidad { display: flex; gap: 10px; align-items: flex-start; background: var(--sur); border-radius: 12px; padding: 12px 14px; margin: 4px 0 18px; }
.aviso-privacidad .ic { color: var(--acc-dark); }
.aviso-privacidad p { font-size: 13.5px; color: var(--txt2); line-height: 1.45; }
.aviso-privacidad b { color: var(--txt) !important; }

/* Chips y filtros */
.chips, .deportes, .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px 2px; }
.filtros::-webkit-scrollbar { display: none; }
.chip, .chip-deporte, .chip-filtro {
  min-height: 38px; padding: 0 15px; border-radius: 19px; border: 1.5px solid var(--bor); background: #fff; color: var(--txt);
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none;
}
.chip:hover, .chip-deporte:hover, .chip-filtro:hover { border-color: var(--bor2); }
.chip.activo, .chip-deporte.activo, .chip-filtro.activo { background: var(--pri); border-color: var(--pri); color: #fff; }
.chip-filtro .n { font-size: 12px; font-weight: 700; color: var(--txt3); }
.chip-filtro.activo .n { color: rgba(255,255,255,.65); }
.fila-filtros-extra { display: flex; gap: 10px; margin-bottom: 16px; }
.filtro-extra { flex: 1; min-height: 44px; font-size: 14.5px; border-radius: 12px; padding: 8px 12px; }
select.filtro-extra { padding-right: 36px; }

/* Selector segmentado (pestañas) */
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 4px; border-radius: 14px; background: var(--sur); margin-bottom: 18px; }
.pestanas a, .pestanas button { height: 42px; border-radius: 11px; border: none; background: none; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--txt2); text-decoration: none; }
.pestanas a .ic, .pestanas button .ic { width: 18px; height: 18px; }
.pestanas .activo { background: #fff; color: var(--txt); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
@media (min-width: 900px) { .pestanas { max-width: 420px; } }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--txt2); background: var(--sur); cursor: pointer; white-space: nowrap; }
.tab.activo { background: var(--pri); color: #fff; }

/* Opciones (tarjetas seleccionables) */
.tipo-equipo, .tipo-visibilidad, .opciones-tres { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.opcion-tipo { min-height: 50px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--bor); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--txt); cursor: pointer; }
.opcion-tipo small { font-size: 12px; font-weight: 500; color: var(--txt3); }
.opcion-tipo.activo { border-color: var(--pri); background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--pri); }
.descripcion-visibilidad { font-size: 13px; color: var(--txt3); margin: -10px 0 18px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; border: 1.5px solid var(--bor); margin-bottom: 18px; }
.stepper button { width: 42px; height: 42px; border-radius: 10px; border: none; background: var(--sur); font-size: 20px; font-weight: 600; }
.stepper span { min-width: 44px; text-align: center; font-size: 17px; font-weight: 800; }

/* Tarjetas */
.tarjeta, .card { background: #fff; border: 1px solid var(--bor); border-radius: var(--r); box-shadow: var(--sombra); }
.subtitulo-seccion { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--txt); margin: 28px 0 12px; }
.subtitulo-seccion.sin-margen-superior { margin-top: 0; }
.fila-titulo-seccion, .cabecera-seccion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.fila-titulo-seccion .subtitulo-seccion, .cabecera-seccion .subtitulo-seccion { margin: 0; }
.ver-todo { font-size: 14px; font-weight: 700; color: var(--acc-dark); text-decoration: none; white-space: nowrap; }
.sin-resultados, .mensaje, .mensaje-vacio { text-align: center; color: var(--txt3); font-size: 14.5px; padding: 28px 12px; line-height: 1.5; }

/* Etiquetas */
.etq, .tag, .badge-cupos, .badge-rol, .badge-deporte, .badge-privado, .badge-cerrado, .badge-distrito-cancha, .sello-cancha, .etiqueta-grupo-origen, .pronto {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; font-style: normal; line-height: 1.4;
}
.badge-deporte, .etq-acc, .sello-destacada { background: var(--acc); color: var(--txt); }
.badge-cupos, .badge-rol, .etiqueta-grupo-origen, .etq-soft, .sello-cancha, .pronto { background: var(--acc-soft); color: var(--acc-dark); }
.badge-privado, .badge-cerrado, .badge-distrito-cancha, .etq-gris { background: var(--sur); color: var(--txt2); }
.badge-rol.cancelado, .etq-rojo { background: var(--rojo-soft); color: var(--rojo); }
.etq-ambar { background: var(--ambar-soft); color: var(--ambar); }
.etq-azul { background: var(--azul-soft); color: var(--azul); }
.etiqueta-grupo-origen { margin-top: 6px; }
.pronto { margin-left: 6px; font-size: 11px; background: var(--pri); color: #fff; }

/* Avisos */
.aviso, .aviso-estado, .banner-cancelado, .banner-reprogramado, .aviso-grupo, .aviso-admin-unico, .estado-solicitud {
  display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r); padding: 14px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 16px;
}
.aviso-estado b { display: block; font-size: 15px; margin-bottom: 2px; }
.aviso-estado span { display: block; }
.aviso-estado.pendiente { background: var(--ambar-soft); border: 1px solid var(--ambar-bor); color: var(--ambar); }
.aviso-estado.rechazado, .banner-cancelado, .aviso-admin-unico { background: var(--rojo-soft); border: 1px solid var(--rojo-bor); color: var(--rojo); }
.banner-reprogramado, .aviso-grupo, .estado-solicitud { background: var(--acc-soft); color: var(--acc-dark); font-weight: 600; }
.aviso-grupo { display: none; }
.estado-solicitud { justify-content: center; align-items: center; }
.aviso-solicitudes { display: none; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--rojo-soft); color: var(--rojo); font-size: 13px; font-weight: 700; }
.caja-estado { background: var(--sur); border-radius: var(--r); padding: 18px; text-align: center; }
.caja-estado b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.caja-estado span { color: var(--txt2); font-size: 14px; }

/* Botón flotante */
.boton-crear { position: fixed; right: 18px; bottom: calc(var(--alto-nav) + 18px + env(safe-area-inset-bottom)); z-index: 25; width: 56px; height: 56px; border-radius: 18px; background: var(--pri); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0; text-decoration: none; box-shadow: var(--sombra-l); }
.boton-crear::before { content: ""; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; }
@media (min-width: 900px) { .boton-crear { right: 40px; bottom: 40px; } }

/* Modales */
.fondo-modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(17,17,17,.45); align-items: flex-end; justify-content: center; padding: 0; }
.fondo-modal.activo { display: flex; }
.caja-modal { width: 100%; max-width: 480px; background: #fff; border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-l); max-height: 92vh; overflow-y: auto; }
.titulo-modal { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.descripcion-modal { font-size: 14.5px; color: var(--txt2); margin-bottom: 18px; }
.grupo-modal { margin-bottom: 14px; }
.fila-modal-doble { display: flex; gap: 10px; }
.fila-modal-doble .grupo-modal { flex: 1; }
.botones-modal { display: flex; gap: 10px; margin-top: 18px; }
.botones-modal > * { flex: 1; }
@media (min-width: 900px) { .fondo-modal { align-items: center; padding: 20px; } .caja-modal { border-radius: 22px; padding: 26px; } }

/* Aviso flotante (toast) */
.toast { position: fixed; left: 50%; bottom: calc(var(--alto-nav) + 20px); transform: translateX(-50%); background: var(--pri); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 80; box-shadow: var(--sombra-l); }

/* ════════════ AUTENTICACIÓN (bienvenida, ingreso, registro) ════════════ */
body.fondo-suave { background: var(--sur); }
.auth { max-width: 1080px; margin: 0 auto; padding: 16px 16px 32px; }
.auth-caja { background: #fff; border-radius: 22px; }
.auth-form { padding: 6px 2px; }
.auth-vitrina, .auth-vitrina.vitrina { display: none; }
@media (min-width: 900px) {
  .auth { padding: 36px 32px 48px; }
  .auth-caja { display: grid; grid-template-columns: 440px 1fr; border: 1px solid var(--bor); box-shadow: var(--sombra-l); overflow: hidden; min-height: 620px; }
  .auth-vitrina, .auth-vitrina.vitrina { display: flex; }
  .auth-form { padding: 44px 56px; max-width: 560px; width: 100%; }
}
@media (max-width: 899px) { body.fondo-suave { background: #fff; } }

/* Vitrina: tarjetas reales de la app sobre fondo negro */
.vitrina { position: relative; overflow: hidden; border-radius: 22px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(198,244,50,.30), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(198,244,50,.12), transparent 60%), #111; }
.auth-vitrina.vitrina { border-radius: 0; }
.vitrina .flota { position: absolute; }
.vitrina .texto-vitrina { position: relative; z-index: 2; }
.vitrina .texto-vitrina b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px; }
.vitrina .texto-vitrina span { color: rgba(255,255,255,.75); font-size: 14.5px; }
.vc { background: #fff; color: var(--txt); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.vc .fila { display: flex; align-items: center; gap: 12px; }
.vc .check { width: 38px; height: 38px; border-radius: 12px; background: var(--acc); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vc .t1 { font-size: 14px; font-weight: 800; display: block; }
.vc .t2 { font-size: 12px; color: var(--txt3); display: block; }
.vc .avs { display: flex; padding-left: 7px; }
.vc .avs span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: var(--sur2); }
.vc .barras { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 10px; }
.vc .barras i { flex: 1; border-radius: 4px; background: var(--sur2); }
.vc .barras i.on { background: var(--acc); }
.vc .kpi { display: flex; gap: 18px; margin-top: 6px; }
.vc .kpi b { font-size: 22px; font-weight: 800; display: block; line-height: 1.1; }
.vc .kpi span { font-size: 11px; color: var(--txt3); }

/* Bienvenida */
.bienvenida { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px 32px; }
.bienvenida-grid { display: flex; flex-direction: column; gap: 22px; }
.bienvenida .vitrina { height: 240px; padding: 0; order: -1; }
.bienvenida h1 { font-size: 32px; line-height: 1.08; letter-spacing: -.035em; }
.bienvenida .lead { color: var(--txt2); font-size: 16px; margin: 10px 0 22px; }
.opciones-entrada { display: flex; flex-direction: column; gap: 10px; }
.opcion-entrada { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--bor); background: #fff; color: var(--txt); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.opcion-entrada:hover { border-color: var(--bor2); box-shadow: var(--sombra); }
.opcion-entrada .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--sur); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opcion-entrada .txt { flex: 1; min-width: 0; }
.opcion-entrada .txt b { display: block; font-size: 16.5px; }
.opcion-entrada .txt span { display: block; font-size: 13.5px; color: var(--txt2); }
.opcion-entrada.principal { background: var(--pri); border-color: var(--pri); color: #fff; }
.opcion-entrada.principal .ico { background: var(--acc); color: var(--txt); }
.opcion-entrada.principal .txt span { color: rgba(255,255,255,.7); }
.confianza { display: flex; align-items: center; gap: 8px; color: var(--txt3); font-size: 13px; margin-top: 18px; }
.confianza .ic { width: 17px; height: 17px; }
@media (min-width: 900px) {
  .bienvenida { padding: 40px 32px 48px; }
  .bienvenida-grid { flex-direction: row; align-items: center; gap: 56px; }
  .bienvenida-grid > .col-texto { flex: 1; }
  .bienvenida .vitrina { width: 500px; height: 600px; flex-shrink: 0; border-radius: 32px; order: 0; }
  .bienvenida h1 { font-size: 54px; }
  .bienvenida .lead { font-size: 18px; max-width: 520px; }
  .opciones-entrada { max-width: 520px; }
}

/* Registro en pasos */
.progreso-pasos { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.progreso-pasos span { font-size: 13px; font-weight: 700; color: var(--txt2); }
.progreso-barra { height: 4px; border-radius: 2px; background: var(--sur2); overflow: hidden; }
.progreso-barra i { display: block; height: 100%; background: var(--pri); transition: width .25s; }
.paso-registro { display: none; }
.paso-registro.activo { display: block; }
.etiqueta-modo { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; padding: 5px 9px; border-radius: 8px; background: var(--acc-soft); color: var(--acc-dark); }

/* Foto de perfil */
.foto-perfil-selector { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.circulo-foto { width: 88px; height: 88px; border-radius: 50%; background: var(--sur); border: 1.5px dashed var(--bor2); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; color: var(--txt3); font-size: 26px; }
.circulo-foto img { width: 100%; height: 100%; object-fit: cover; }
.texto-foto-opcional { font-size: 13px; color: var(--txt3); margin-bottom: 10px; }
.botones-foto { display: flex; gap: 8px; }
.btn-foto { min-height: 40px; padding: 0 14px; border-radius: 11px; border: 1.5px solid var(--bor); background: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.btn-quitar-foto { display: none; background: none; border: none; color: var(--rojo); font-size: 13.5px; font-weight: 700; margin-top: 8px; }

/* ════════════ INICIO DEL JUGADOR ════════════ */
.saludo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.saludo h1 { font-size: 26px; letter-spacing: -.03em; }
.saludo p { color: var(--txt2); font-size: 15px; }
.zona-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--txt); background: var(--sur); padding: 7px 12px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
.zona-chip .ic { width: 16px; height: 16px; color: var(--acc-dark); }
.buscador { display: flex; align-items: center; gap: 10px; height: 50px; border-radius: 14px; background: var(--sur); padding: 0 16px; color: var(--txt3); font-size: 15px; text-decoration: none; margin-bottom: 20px; border: 1.5px solid transparent; }
.buscador .ic { width: 20px; height: 20px; }
#formBuscar { margin-bottom: 20px; }
input.buscador-input { height: 50px; min-height: 0; border-radius: 14px; background: var(--sur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C93A0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center/20px; padding-left: 46px; border-color: transparent; }
input.buscador-input:focus { background-color: #fff; }
.categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--txt); font-size: 13px; font-weight: 700; text-align: center; }
.cat .ico { position: relative; width: 64px; height: 64px; border-radius: 20px; background: var(--sur); display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.cat .ico .ic { width: 28px; height: 28px; }
.cat:active .ico { transform: scale(.95); }
.cat.principal .ico { background: var(--acc); }
.cat.pronto-cat { color: var(--txt3); pointer-events: none; }
.cat.pronto-cat .ico { color: var(--txt3); }
.cat .marca-pronto { position: absolute; top: -7px; right: -10px; font-size: 10px; font-weight: 800; background: var(--pri); color: #fff; border-radius: 6px; padding: 2px 6px; }
.proximo-evento { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--acc-soft); color: var(--txt); text-decoration: none; margin-bottom: 4px; }
.proximo-evento .ic { color: var(--acc-dark); }
.proximo-evento .textos { flex: 1; min-width: 0; }
.proximo-evento .etiqueta { display: block; font-size: 14.5px; font-weight: 800; }
.proximo-evento .texto { display: block; font-size: 13.5px; color: var(--txt2); }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; flex-shrink: 0; }
@media (min-width: 900px) {
  .saludo h1 { font-size: 34px; }
  .inicio-top { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
  .categorias { grid-template-columns: repeat(4, 96px); justify-content: start; gap: 16px; }
  .cat .ico { width: 80px; height: 80px; border-radius: 24px; }
  .carrusel { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 16px; }
  .carrusel.cuatro > *:nth-child(n+5), .carrusel.tres > *:nth-child(n+4) { display: none; }
  .carrusel.tres { grid-template-columns: repeat(3, 1fr); }
  .carrusel .tarjeta-partido, .carrusel .cancha-card { width: auto; }
  .carrusel.cuatro { grid-template-columns: repeat(4, 1fr); }
  .buscador, input.buscador-input { max-width: 560px; }
}

/* Tarjeta de partido (lista y carrusel) */
.tarjeta-partido { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--bor); border-radius: var(--r); box-shadow: var(--sombra); cursor: pointer; margin-bottom: 12px; text-decoration: none; color: var(--txt); transition: border-color .15s, box-shadow .15s; }
.tarjeta-partido:hover { border-color: var(--bor2); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.08); }
.carrusel .tarjeta-partido { width: 300px; margin: 0; }
.fecha-bloque { width: 54px; height: 58px; border-radius: 12px; background: var(--sur); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.fecha-bloque small { font-size: 11px; font-weight: 800; color: var(--txt3); text-transform: uppercase; letter-spacing: .03em; }
.fecha-bloque b { font-size: 21px; font-weight: 800; line-height: 1.05; }
.tarjeta-partido .cuerpo { flex: 1; min-width: 0; }
.tarjeta-partido .etqs { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.tarjeta-partido .etqs .der { margin-left: auto; }
.tarjeta-partido .etqs .nivel { font-size: 12.5px; color: var(--txt3); font-weight: 600; }
.nombre-partido, .nombre-grupo { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tarjeta-partido .nombre-partido { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detalle-partido, .detalle-grupo { font-size: 13.5px; color: var(--txt2); margin-top: 2px; }
.tarjeta-partido .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.tarjeta-partido.bloque { display: block; }
.fila-partido, .fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Listas en PC */
@media (min-width: 900px) {
  #listaPartidos, #listaMisPartidos, #listaMisGrupos, #listaGruposCerca, #listaChats, #listaCanchas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
  #listaPartidos > *, #listaMisPartidos > *, #listaMisGrupos > *, #listaGruposCerca > *, #listaChats > *, #listaCanchas > * { margin: 0; }
  #listaPartidos > .sin-resultados, #listaMisPartidos > .sin-resultados, #listaMisGrupos > .sin-resultados, #listaGruposCerca > .sin-resultados, #listaChats > .sin-resultados, #listaCanchas > .sin-resultados { grid-column: 1 / -1; }
  #listaCanchas { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

/* ════════════ CANCHAS ════════════ */
.cancha-card { background: #fff; border: 1px solid var(--bor); border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .15s, transform .15s; text-decoration: none; color: var(--txt); margin-bottom: 14px; }
.cancha-card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px rgba(16,24,40,.10); }
.carrusel .cancha-card { width: 250px; margin: 0; }
.cancha-card .cuerpo { padding: 12px 14px 14px; }
.cancha-card .nombre { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.cancha-card .sub { font-size: 13px; color: var(--txt2); margin-top: 2px; }
.cancha-card .sellos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* Imagen de la cancha: ícono fino del deporte mientras el club no suba fotos */
.foto-cancha { position: relative; height: 128px; background: linear-gradient(135deg, #F5F6F8, #E4E8EC); overflow: hidden; flex-shrink: 0; }
.foto-cancha::after { content: ""; position: absolute; right: 14px; bottom: -16px; width: 92px; height: 92px; background: var(--i-dep-tenis) no-repeat center/contain; opacity: .9; }
.foto-cancha.padel { background: linear-gradient(135deg, #F6FCE3, #DCF19A); }
.foto-cancha.padel::after { background-image: var(--i-dep-padel); width: 84px; height: 84px; bottom: -14px; }
.foto-cancha.futbol::after { background-image: var(--i-dep-futbol); }
.foto-cancha img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.foto-cancha .etq-deporte { position: absolute; top: 10px; left: 10px; z-index: 2; background: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 7px; }
.foto-cancha .etq-dest { position: absolute; top: 10px; right: 10px; z-index: 2; }
.foto-cancha.grande { height: 210px; }
.foto-cancha.grande::after { width: 160px; height: 160px; bottom: -28px; right: 10%; }
.foto-cancha.padel.grande::after { width: 150px; height: 150px; bottom: -26px; }
@media (min-width: 900px) { .foto-cancha.grande { height: 300px; border-radius: var(--r-l); } }

.cta-unete, .cta-registro-cancha { background: var(--sur); border-radius: var(--r-l); padding: 18px; margin-bottom: 18px; }
.cta-unete { display: none; }
body.visitante .cta-unete { display: block; }
.cta-unete-titulo { font-size: 18px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 4px; }
.cta-unete-texto { font-size: 14px; color: var(--txt2); margin-bottom: 14px; }
.cta-unete-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-unete-botones > * { flex: 1; min-width: 140px; }
.aviso-datos-canchas { font-size: 12px; color: var(--txt3); line-height: 1.55; margin-top: 22px; text-align: center; }
.aviso-datos-canchas a { color: var(--txt2); }
.contador-lista { font-size: 14px; font-weight: 600; color: var(--txt2); margin: 4px 0 14px; }

/* Ficha de la cancha (hoja que se abre encima) */
.ficha-fondo { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(17,17,17,.45); align-items: flex-end; justify-content: center; }
.ficha-fondo.activo { display: flex; }
.ficha { width: 100%; max-width: 980px; max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: var(--sombra-l); }
.ficha .foto-cancha { border-radius: 0; }
.ficha-cerrar { position: absolute; top: 14px; left: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 12px; border: none; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); }
.ficha-cuerpo { padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); }
.ficha h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin: 8px 0 4px; }
.ficha .dir { display: flex; gap: 6px; align-items: center; color: var(--txt2); font-size: 14px; }
.ficha .dir .ic { width: 17px; height: 17px; }
.ficha .linea { height: 1px; background: var(--bor); margin: 16px 0; }
.ficha .telefonos { font-size: 14.5px; color: var(--txt2); }
.ficha .telefonos a { color: var(--txt); font-weight: 700; }
.acciones-cancha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.btn-cancha { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--bor); background: #fff; color: var(--txt); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.btn-cancha .ic { width: 18px; height: 18px; }
.btn-cancha:hover { background: var(--sur); }
.btn-cancha.desactivado { opacity: .35; pointer-events: none; }
.reserva-pronto { display: flex; gap: 12px; align-items: center; background: var(--sur); border-radius: var(--r); padding: 14px 16px; margin-top: 14px; font-size: 13.5px; color: var(--txt2); }
.reserva-pronto b { color: var(--txt); display: block; font-size: 14.5px; }
@media (min-width: 900px) {
  .ficha-fondo { align-items: center; padding: 24px; }
  .ficha { border-radius: 24px; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
  .ficha .foto-cancha.grande { height: 100%; min-height: 460px; border-radius: 0; }
  .ficha-cuerpo { padding: 32px; overflow-y: auto; max-height: 94vh; }
}

/* ════════════ AGENDA, GRUPOS ════════════ */
.tarjeta-grupo, .tarjeta-grupo-cerca { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--bor); border-radius: var(--r); box-shadow: var(--sombra); cursor: pointer; margin-bottom: 12px; }
.tarjeta-grupo-cerca { display: block; }
.tarjeta-bloqueada { cursor: default; opacity: .7; }
.icono-grupo { width: 48px; height: 48px; border-radius: 14px; background: var(--acc-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

/* ════════════ DETALLE DE PARTIDO Y GRUPO ════════════ */
#contenidoPartido, #contenidoGrupo { max-width: 680px; }
.tarjeta-info { background: #fff; border: 1px solid var(--bor); border-radius: var(--r-l); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px; position: relative; overflow: hidden; }
.tarjeta-info::after { content: ""; position: absolute; right: -20px; top: -20px; width: 120px; height: 120px; border-radius: 50%; background: var(--acc-soft); z-index: 0; }
.tarjeta-info > * { position: relative; z-index: 1; }
.badge-privado, .badge-cerrado { margin-left: 6px; }
.nombre-partido.titulo, .nombre-grupo.titulo { font-size: 24px; letter-spacing: -.025em; margin: 12px 0 2px; white-space: normal; }
.lugar-partido, .distrito-grupo { color: var(--txt2); font-size: 14.5px; }
.descripcion-grupo { color: var(--txt2); font-size: 14.5px; margin-top: 10px; }
.datos-partido { display: grid; gap: 10px; margin-bottom: 18px; }
.fila-dato { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--txt); background: var(--sur); border-radius: 12px; padding: 12px 14px; }
.fila-dato .icono { width: 22px; text-align: center; }
.lista-jugadores-simple { display: flex; padding-left: 8px; margin-bottom: 20px; }
.avatar-jugador { width: 32px; height: 32px; border-radius: 50%; background: var(--sur2); border: 2px solid #fff; margin-left: -8px; }
.lista-jugadores-completa, .lista-integrantes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fila-jugador-confirmado, .fila-integrante { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bor); border-radius: 12px; background: #fff; }
.avatar-iniciales, .avatar-solicitante { width: 38px; height: 38px; border-radius: 50%; background: var(--acc-soft); color: var(--acc-dark); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.avatar-iniciales img { width: 100%; height: 100%; object-fit: cover; }
.info-integrante { flex: 1; min-width: 0; }
.nombre-jugador-confirmado, .nombre-integrante, .nombre-solicitante { font-size: 15px; font-weight: 700; }
.distrito-jugador-confirmado, .distrito-integrante, .detalle-solicitante { font-size: 13px; color: var(--txt3); }
.etiqueta-organizador, .etiqueta-admin, .etiqueta-coadmin { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; background: var(--acc); color: var(--txt); }
.etiqueta-coadmin { background: var(--azul-soft); color: var(--azul); }
.acciones-integrante { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn-accion-mini, .btn-accion-chat { min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--bor); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--txt2); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.btn-accion-mini.peligro, .btn-accion-chat.btn-eliminar { border-color: var(--rojo-bor) !important; color: var(--rojo) !important; }
.btn-accion-mini.destacado { border-color: var(--pri); color: var(--txt); }
.tarjeta-solicitud { background: #fff; border: 1px solid var(--bor); border-radius: var(--r); padding: 14px; margin-bottom: 10px; }
.fila-solicitante { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acciones-solicitud, .acciones-organizador { display: flex; gap: 10px; }
.acciones-organizador { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bor); }
.acciones-organizador > * { flex: 1; }
.btn-aceptar, .btn-rechazar, .btn-reprogramar { flex: 1; min-height: 44px; border-radius: 12px; font-size: 14.5px; font-weight: 700; border: 1.5px solid var(--bor); background: #fff; color: var(--txt); }
.btn-aceptar { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-reprogramar { min-height: 48px; }
.btn-copiar-link { width: 100%; min-height: 46px; margin-top: 10px; border-radius: 12px; border: 1.5px dashed var(--bor2); background: #fff; font-size: 14.5px; font-weight: 700; }
.btn-unirme { margin-top: 4px; }

/* ════════════ PERFIL ════════════ */
.cabecera-perfil { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.avatar-perfil { width: 76px; height: 76px; border-radius: 50%; background: var(--acc-soft); color: var(--acc-dark); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.avatar-perfil img { width: 100%; height: 100%; object-fit: cover; }
.nombre-perfil { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.zona-perfil { color: var(--txt2); font-size: 14.5px; }
.stats-perfil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.stat { background: var(--sur); border-radius: var(--r); padding: 14px 12px; }
.stat-valor { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.stat-etiqueta { font-size: 13px; color: var(--txt2); }
.chip-deporte-nivel { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 18px; background: var(--acc-soft); color: var(--acc-dark); margin: 0 6px 8px 0; }
.lista-opciones { background: #fff; border: 1px solid var(--bor); border-radius: var(--r); overflow: hidden; }
.opcion-menu { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #fff; border: none; border-bottom: 1px solid var(--bor); font-size: 15px; font-weight: 600; color: var(--txt); text-decoration: none; text-align: left; }
.opcion-menu:last-child { border-bottom: none; }
.opcion-menu:hover { background: var(--sur); }
.opcion-menu .flecha { color: var(--txt3); }
.opcion-menu.salir { color: var(--rojo); }
.banner-instalar { display: none; background: var(--sur); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.banner-instalar p { font-size: 14px; color: var(--txt2); margin-bottom: 12px; }
.btn-instalar { min-height: 46px; }
.cambio-modo { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--pri); color: #fff; text-decoration: none; margin-top: 16px; }
.cambio-modo .ico-modo { width: 42px; height: 42px; border-radius: 12px; background: var(--acc); color: var(--txt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cambio-modo .textos { flex: 1; display: flex; flex-direction: column; }
.cambio-modo b { font-size: 15.5px; }
.cambio-modo small { font-size: 13px; color: rgba(255,255,255,.7); }
@media (min-width: 900px) { .perfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } }

/* ════════════ CHATS ════════════ */
.btn-ver-archivados { background: none; border: none; font-size: 13.5px; font-weight: 700; color: var(--txt2); display: inline-flex; align-items: center; gap: 6px; }
.fila-chat { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--bor); border-radius: var(--r); margin-bottom: 10px; }
.fila-chat.no-leido { border-color: var(--pri); }
.fila-chat.silenciado { opacity: .6; }
.contenido-fila-chat { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.avatar-chat { width: 46px; height: 46px; border-radius: 50%; background: var(--acc-soft); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.info-fila-chat { min-width: 0; }
.nombre-chat { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.icono-silenciado { font-size: 11px; color: var(--txt3); }
.ultimo-mensaje { font-size: 13.5px; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-leido .ultimo-mensaje { color: var(--txt); font-weight: 700; }
.punto-no-leido { position: absolute; top: 14px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--acc-dark); }
.acciones-chat { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* Conversación */
body.layout-chat { padding-bottom: calc(var(--alto-nav) + 82px + env(safe-area-inset-bottom)); }
.cabecera-chat { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 14px 16px 10px; }
.info-chat { flex: 1; min-width: 0; }
.info-chat h1 { font-size: 18px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-chat p { font-size: 13px; color: var(--txt3); }
.zona-mensajes { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; word-wrap: break-word; }
.burbuja-otro { align-self: flex-start; background: var(--sur); border-bottom-left-radius: 6px; }
.burbuja-mia { align-self: flex-end; background: var(--pri); color: #fff; border-bottom-right-radius: 6px; }
.autor-burbuja { font-size: 12px; font-weight: 800; color: var(--acc-dark); margin-bottom: 2px; }
.zona-envio { position: fixed; left: 0; right: 0; bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom)); z-index: 29; background: #fff; border-top: 1px solid var(--bor); padding: 10px 16px; display: flex; gap: 10px; }
.zona-envio input { flex: 1; min-height: 48px; border-radius: 24px; background: var(--sur); border-color: transparent; }
.btn-enviar { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--pri); color: #fff; font-size: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.btn-enviar::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-send) center/contain no-repeat; mask: var(--i-send) center/contain no-repeat; }
@media (min-width: 900px) {
  body.layout-chat { padding-bottom: 96px; }
  .zona-envio { bottom: 0; justify-content: center; padding: 14px calc(50% - 380px); }
}

/* ════════════ PANEL DEL NEGOCIO ════════════ */
.tarjetas-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tarjeta-numero { background: #fff; border: 1px solid var(--bor); border-radius: var(--r); box-shadow: var(--sombra); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-numero .numero { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.tarjeta-numero .etiqueta { font-size: 12.5px; color: var(--txt2); line-height: 1.3; }
.pasos-negocio { display: flex; flex-direction: column; gap: 10px; }
.paso-negocio { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--bor); }
.paso-negocio .num { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sur); font-weight: 800; font-size: 13px; }
.paso-negocio.hecho .num { background: var(--acc); }
.paso-negocio b { display: block; font-size: 15px; }
.paso-negocio span { font-size: 13.5px; color: var(--txt2); }
.proximamente { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; border-radius: var(--r-l); background: var(--sur); }
.proximamente .ico-grande { width: 64px; height: 64px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); margin-bottom: 4px; }
.proximamente b { font-size: 18px; letter-spacing: -.015em; }
.proximamente span { font-size: 14.5px; color: var(--txt2); max-width: 480px; }
.ficha-datos { background: #fff; border: 1px solid var(--bor); border-radius: var(--r); padding: 2px 16px; }
.ficha-datos div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--bor); font-size: 14.5px; }
.ficha-datos div:last-child { border-bottom: none; }
.ficha-datos span { color: var(--txt2); }
.ficha-datos b { text-align: right; font-weight: 700; }
@media (min-width: 900px) {
  .panel-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
  .tarjeta-numero .numero { font-size: 34px; }
  .ficha-datos, .proximamente { max-width: 760px; }
}

/* ════════════ TEXTOS LEGALES ════════════ */
.contenido-legal { max-width: 760px; margin: 0 auto; padding: 18px 16px 48px; line-height: 1.65; }
.contenido-legal h1 { font-size: 28px; margin: 8px 0 6px; }
.contenido-legal h2 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; margin: 28px 0 8px; }
.contenido-legal p, .contenido-legal li { font-size: 15px; color: var(--txt2); margin-bottom: 10px; }
.contenido-legal ul { padding-left: 22px; }
.contenido-legal a { color: var(--txt) !important; font-weight: 700; }
.fecha-actualizacion { color: var(--txt3); font-size: 13px; margin-bottom: 20px; }
.destacado { background: var(--acc-soft); border-radius: var(--r); padding: 14px 16px; margin: 16px 0; }
.destacado p { color: var(--acc-dark); margin: 0; font-weight: 600; }
.contenido-legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.contenido-legal th, .contenido-legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bor); color: var(--txt2); }
.contenido-legal th { color: var(--txt); }

/* ════════════ ÍCONOS DE LÍNEA ════════════ */
.ic { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; vertical-align: middle; }
.ic-sm { width: 18px; height: 18px; } .ic-lg { width: 26px; height: 26px; } .ic-xl { width: 30px; height: 30px; }

/* Posición de las tarjetas de la vitrina */
.vitrina .f1 { left: 16px; top: 20px; width: 345px; transform: scale(.8); transform-origin: top left; }
.vitrina .f2 { right: 16px; top: 98px; width: 335px; transform: scale(.8); transform-origin: top right; }
.vitrina .f3 { display: none; }
@media (min-width: 900px) {
  .bienvenida .vitrina .f1 { left: 44px; top: 70px; width: 330px; transform: none; }
  .bienvenida .vitrina .f2 { right: 36px; top: 196px; width: 330px; transform: none; }
  .bienvenida .vitrina .f3 { display: block; left: 60px; bottom: 64px; width: 300px; }
  .auth-vitrina .f1 { left: 36px; top: 56px; width: 330px; transform: none; }
  .auth-vitrina .f2 { right: 28px; top: 168px; width: 320px; transform: none; }
}

@media (min-width: 900px) {
  .carrusel .tarjeta-partido, .carrusel .cancha-card { width: auto; }
}

/* Visitante (Canchas sin sesión): sin menú de la app */
body.visitante .menu-inferior, body.visitante .sm-top-nav, body.visitante .sm-modo, body.visitante .sm-avatar { display: none; }
body.visitante.con-menu { padding-bottom: 24px; }

@media (max-width: 899px) {
  #listaCanchas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #listaCanchas .cancha-card { margin: 0; border-radius: var(--r); }
  #listaCanchas .foto-cancha { height: 96px; }
  #listaCanchas .foto-cancha::after { width: 64px; height: 64px; right: 8px; bottom: -12px; }
  #listaCanchas .cancha-card .cuerpo { padding: 10px 12px 12px; }
  #listaCanchas .cancha-card .nombre { font-size: 14px; }
  #listaCanchas .sin-resultados { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .filtros { flex-wrap: wrap; margin: 0 0 12px; padding: 0; overflow: visible; }
  .fila-filtros-extra { max-width: 560px; }
}

@media (max-width: 899px) {
  .fila-integrante { flex-wrap: wrap; }
  .acciones-integrante { flex-basis: 100%; justify-content: flex-start; padding-left: 50px; }
}
.acciones-integrante { align-items: center; }
.acciones-integrante .btn-accion-mini { min-height: 32px; }
.btn-eliminar-grupo, #btnEliminarGrupo { display: inline-flex; align-items: center; gap: 6px; }
.acciones-chat .btn-accion-chat { min-height: 28px; font-size: 12px; padding: 0 9px; }

/* ════════════ ETAPAS 2–5: RESERVAS, TORNEOS Y MARKET ════════════ */
.btn-peligro { background: var(--rojo); color: #fff; }
.caja-modal.ancho { max-width: 560px; }
.boton-volver.adelante::before { transform: scaleX(-1); }
.contador-mini { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rojo); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.contador-mini:empty { display: none; }
.lista-grid, .lista-clubes { display: grid; gap: 12px; }
.lista-grid > *, .lista-clubes > * { margin: 0; }
@media (max-width: 899px) { .lista-clubes { grid-template-columns: 1fr 1fr; } .lista-clubes .foto-cancha { height: 96px; } .lista-clubes .foto-cancha::after { width: 64px; height: 64px; right: 8px; bottom: -12px; } }
@media (min-width: 900px) { .lista-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; } .lista-clubes { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } }
.aviso-mini { margin-top: 10px; font-size: 13px; color: var(--ambar); background: var(--ambar-soft); border-radius: 10px; padding: 8px 12px; }
.check-grande { width: 64px; height: 64px; border-radius: 20px; background: var(--acc); display: inline-flex; align-items: center; justify-content: center; }

/* Código privado */
.caja-codigo { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: var(--sur); border-radius: var(--r); padding: 14px; margin-top: 12px; }
.caja-codigo span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); }
.caja-codigo b { font-size: 28px; font-weight: 800; letter-spacing: .2em; margin-right: -.2em; }
.caja-codigo small { font-size: 12.5px; color: var(--txt2); }
.caja-codigo-buscar { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--bor2); border-radius: var(--r); padding: 6px 6px 6px 14px; margin-bottom: 14px; }
.caja-codigo-buscar .ic { color: var(--txt3); width: 18px; height: 18px; }
.caja-codigo-buscar input { border: none; min-height: 40px; padding: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; box-shadow: none !important; background: transparent; }
.caja-codigo-buscar input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (min-width: 900px) { .caja-codigo-buscar { max-width: 520px; } }

/* Tira de días */
.nav-fechas { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dias-strip { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.dias-strip::-webkit-scrollbar { display: none; }
.dia { flex: 1 0 52px; min-width: 52px; height: 58px; border-radius: 12px; border: 1.5px solid var(--bor); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.dia small { font-size: 11px; font-weight: 800; color: var(--txt3); text-transform: uppercase; }
.dia b { font-size: 19px; font-weight: 800; line-height: 1.1; }
.dia.hoy { border-color: var(--acc-dark); }
.dia.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.dia.on small { color: rgba(255,255,255,.7); }
.dias-strip.ancho .dia { flex: 0 0 56px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--txt2); margin-bottom: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .pt { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--bor2); background: #fff; }
.pt.reservado { background: var(--ambar-soft); border-color: var(--ambar-bor); }
.pt.confirmado { background: var(--acc); border-color: var(--acc); }
.pt.bloqueado { background: var(--sur2); border-color: var(--sur2); }

/* Calendario del club */
.cal-envoltura { overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; }
.cal { display: grid; gap: 6px; min-width: min-content; }
.cal-cab { position: sticky; top: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; }
.cal-cab b { font-size: 14px; }
.cal-cab small { font-size: 12px; color: var(--txt3); }
.cal-hora { font-size: 12.5px; font-weight: 700; color: var(--txt2); display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.celda { min-height: 54px; border-radius: 10px; border: 1.5px solid var(--bor); background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 10px; text-align: left; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--txt); overflow: hidden; }
.celda span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.celda small { font-size: 11px; font-weight: 700; opacity: .75; }
.celda.libre { color: var(--txt3); font-weight: 600; border-style: dashed; }
.celda.libre:hover { border-color: var(--pri); color: var(--txt); border-style: solid; }
.celda.reservado { background: var(--ambar-soft); border-color: var(--ambar-bor); color: var(--ambar); }
.celda.confirmado { background: var(--acc); border-color: var(--acc); }
.celda.bloqueado { background: var(--sur2); border-color: var(--sur2); color: var(--txt2); }
.celda.pasado { background: var(--sur); border-color: var(--sur); cursor: default; }
@media (min-width: 900px) { .cal-envoltura { margin: 0; padding: 0 0 8px; } }

/* Filas de reservas y pedidos */
.fila-reserva { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; background: #fff; border: 1px solid var(--bor); border-radius: var(--r); margin-bottom: 10px; }
.fila-reserva .cuerpo { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.fila-reserva .cuerpo > b { font-size: 15px; }
.fila-reserva .etqs { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.fila-reserva .etqs .nivel { font-size: 12px; color: var(--txt3); font-weight: 600; }
.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 899px) { .fila-reserva .acciones-fila { width: 100%; padding-left: 68px; } }

/* Sedes y canchas */
.sede-tarjeta { padding: 16px; margin-bottom: 14px; }
.sede-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sede-cab .etq { vertical-align: 2px; margin-left: 4px; }
.lista-canchas-sede { border: 1px solid var(--bor); border-radius: 12px; overflow: hidden; }
.fila-cancha { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: none; border-bottom: 1px solid var(--bor); cursor: pointer; }
.fila-cancha:last-child { border-bottom: none; }
.fila-cancha:hover { background: var(--sur); }
.fila-cancha b { display: block; font-size: 14.5px; }
.fila-cancha small { display: block; font-size: 12.5px; color: var(--txt3); }
.fila-cancha .precio { text-align: right; font-weight: 800; font-size: 14.5px; }
.ico-dep { width: 38px; height: 38px; border-radius: 12px; background: var(--acc-soft); color: var(--acc-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Personal del club */
.fila-invitar { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .fila-invitar { grid-template-columns: 1fr 280px auto; } }
.fila-miembro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--bor); flex-wrap: wrap; }
.fila-miembro:last-child { border-bottom: none; }
.fila-miembro b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.fila-miembro small { display: block; font-size: 12.5px; color: var(--txt3); }
.fila-miembro select { width: auto; min-height: 38px; font-size: 14px; padding: 6px 34px 6px 10px; }

/* Productos */
.grilla-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } }
.producto-card { display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid var(--bor); border-radius: var(--r); overflow: hidden; cursor: pointer; padding: 0; box-shadow: var(--sombra); transition: box-shadow .15s; }
.producto-card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px rgba(16,24,40,.10); }
.producto-foto { position: relative; aspect-ratio: 1 / 1; width: 100%; background: var(--sur); display: flex; align-items: center; justify-content: center; color: var(--txt3); overflow: hidden; }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.etq-flota { position: absolute; top: 8px; left: 8px; }
.producto-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.producto-cuerpo b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.producto-cuerpo small { font-size: 12px; color: var(--txt3); }
.producto-cuerpo .precio { font-size: 16px; font-weight: 800; margin-top: 4px; }
.fotos-producto { display: flex; gap: 8px; margin-bottom: 14px; }
.foto-mini { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--sur); flex-shrink: 0; }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.foto-mini button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(17,17,17,.75); color: #fff; font-size: 16px; line-height: 1; }
.foto-mini.agregar { border: 1.5px dashed var(--bor2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--txt2); cursor: pointer; }
.foto-mini.agregar small { font-size: 12px; font-weight: 700; }
.ficha-producto .galeria { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); }
.ficha-producto .galeria img, .ficha-producto .galeria .producto-foto { flex: 0 0 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); scroll-snap-align: start; max-height: 340px; }
.precio-grande { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.vendido-por { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--txt2); margin-top: 6px; }
.fila-cantidad { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.fila-cantidad > span { font-weight: 700; }
.fila-cantidad small { color: var(--txt3); font-size: 13px; }
.pedido-mini { overflow: hidden; }
.pedido-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Reservar en un club */
.sede-grid { display: block; }
.resumen-reserva { padding: 18px; margin-top: 22px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
.slot { min-height: 54px; border-radius: 12px; border: 1.5px solid var(--bor); background: #fff; font-size: 14px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.slot small { font-size: 11.5px; font-weight: 600; color: var(--txt3); }
.slot:hover { border-color: var(--pri); }
.slot.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.slot.on small { color: rgba(255,255,255,.75); }
.slot.ocupado { background: var(--sur); border-color: var(--sur); color: var(--txt3); text-decoration: line-through; cursor: not-allowed; }
.slot.ocupado small { text-decoration: none; }
.barra-reserva { display: none; }
@media (max-width: 899px) {
  .barra-reserva { display: block; position: fixed; left: 0; right: 0; bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom)); z-index: 28; background: #fff; border-top: 1px solid var(--bor); padding: 10px 16px; }
  body.visitante .barra-reserva { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .resumen-reserva #btnReservar { display: none; }
  body:has(.barra-reserva) { padding-bottom: calc(var(--alto-nav) + 100px); }
}
@media (min-width: 900px) {
  .sede-grid { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
  .resumen-reserva { position: sticky; top: calc(var(--alto-top) + 20px); margin-top: 0; }
}

/* Chat: hora del mensaje */
.hora-burbuja { display: block; text-align: right; font-size: 10.5px; opacity: .6; margin-top: 2px; }
.cal-hora { white-space: nowrap; font-size: 12px; }
@media (max-width: 899px) {
  .fila-miembro > div { flex: 1 1 calc(100% - 52px); }
  .fila-miembro select { flex: 1; margin-left: 50px; }
}
@media (min-width: 900px) { .sede-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.fila-reserva .fecha-bloque { width: auto; min-width: 54px; padding: 0 8px; }
.fila-reserva .fecha-bloque b { font-size: 18px; }

/* Funcionalidades del negocio (Mi negocio › Datos) */
.caja-funciones { margin-top: 18px; padding: 16px; border: 1px solid var(--bor); border-radius: 16px; background: #fff; }
.fila-funcion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--bor); cursor: pointer; }
.fila-funcion:first-of-type { border-top: 0; }
.fila-funcion input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pri); flex-shrink: 0; }
.fila-funcion span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.fila-funcion small { color: var(--txt3); font-size: 12.5px; }

/* Aviso de tarifa de Sports Match al crear un torneo */
.aviso-tarifa { display: flex; gap: 10px; align-items: flex-start; background: var(--acc-soft, #F3FBD9); border: 1px solid rgba(77,124,15,.25); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--txt2); line-height: 1.5; margin: 4px 0 16px; }
.aviso-tarifa b { color: var(--txt); }

/* Menú inferior con 5 opciones y textos largos (Marketplace) */
.item-menu { min-width: 0; white-space: nowrap; letter-spacing: -0.1px; }
@media (max-width: 380px) { .item-menu { font-size: 10.5px; } }

:root {
  --i-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E");
  --i-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202L11%2013M22%202l-7%2020-4-9-9-4z%22/%3E%3C/svg%3E");
  --i-dep-tenis: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%22.9%22%20stroke-opacity%3D%220.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%280%200%29%20rotate%280%2060.0%2060.0%29%20scale%285.0%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M5.6%205.6c3.2%203.2%203.2%209.6%200%2012.8M18.4%205.6c-3.2%203.2-3.2%209.6%200%2012.8%22/%3E%3C/g%3E%3C/svg%3E");
  --i-dep-padel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%234D7C0F%22%20stroke-width%3D%22.9%22%20stroke-opacity%3D%220.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%280%200%29%20rotate%280%2060.0%2060.0%29%20scale%285.0%29%22%3E%3Cpath%20d%3D%22M12%201.8c4.1%200%207%202.9%207%206.9%200%203.6-2.4%206.2-5.3%207l-.2%202.2h-3l-.2-2.2C7.4%2014.9%205%2012.3%205%208.7c0-4%202.9-6.9%207-6.9z%22/%3E%3Cpath%20d%3D%22M10.5%2017.9h3l-.3%204.3h-2.4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225.2%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%229.3%22%20cy%3D%226.8%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%2214.7%22%20cy%3D%226.8%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.9%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%229.3%22%20cy%3D%2211%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%2214.7%22%20cy%3D%2211%22%20r%3D%22.55%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%22.55%22/%3E%3C/g%3E%3C/svg%3E");
  --i-dep-futbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%22.9%22%20stroke-opacity%3D%220.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%280%200%29%20rotate%280%2060.0%2060.0%29%20scale%285.0%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208.2l3.4%202.5-1.3%204h-4.2l-1.3-4zM12%208.2V3.1M15.4%2010.7l4.8-1.6M14.1%2014.7l3%204.1M9.9%2014.7l-3%204.1M8.6%2010.7L3.8%209.1%22/%3E%3C/g%3E%3C/svg%3E");
}
.ic-back{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22/%3E%3C/svg%3E")}
.ic-bell{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d%3D%22M10.3%2021a1.9%201.9%200%200%200%203.4%200%22/%3E%3C/svg%3E")}
.ic-pin{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22/%3E%3C/svg%3E")}
.ic-ppl{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c0-3.6%202.9-6%206.5-6s6.5%202.4%206.5%206%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%229%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M16%2014.2c3.2-.4%205.5%201.7%205.5%205%22/%3E%3C/svg%3E")}
.ic-cup{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200V4z%22/%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203M17%206h3v2a3%203%200%200%201-3%203M12%2014v4M8%2021h8%22/%3E%3C/svg%3E")}
.ic-home{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207v9a1%201%200%200%201-1%201h-5v-6h-6v6H4a1%201%200%200%201-1-1z%22/%3E%3C/svg%3E")}
.ic-cal{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%203v4M16%203v4M4%2010h16%22/%3E%3C/svg%3E")}
.ic-chat{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-11.6%207.1L4%2020l1-4.6A8%208%200%201%201%2021%2012z%22/%3E%3C/svg%3E")}
.ic-user{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22/%3E%3C/svg%3E")}
.ic-chev{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22/%3E%3C/svg%3E")}
.ic-down{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E")}
.ic-copy{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2211%22%20height%3D%2211%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M5%2015V5a1%201%200%200%201%201-1h10%22/%3E%3C/svg%3E")}
.ic-share{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M8.6%2013.5l6.8%204M15.4%206.5l-6.8%204%22/%3E%3C/svg%3E")}
.ic-search{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M20%2020l-3.5-3.5%22/%3E%3C/svg%3E")}
.ic-lock{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2211%22%20width%3D%2214%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22/%3E%3C/svg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205%209-10%22/%3E%3C/svg%3E")}
.ic-x{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22/%3E%3C/svg%3E")}
.ic-cam{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-3h6l2%203h3v11H4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.5%22/%3E%3C/svg%3E")}
.ic-send{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202L11%2013M22%202l-7%2020-4-9-9-4z%22/%3E%3C/svg%3E")}
.ic-edit{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22/%3E%3C/svg%3E")}
.ic-chart{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E")}
.ic-plus{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E")}
.ic-clock{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E")}
.ic-gear{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1A1.7%201.7%200%200%200%209%2019.4a1.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1A1.7%201.7%200%200%200%204.6%209a1.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22/%3E%3C/svg%3E")}
.ic-store{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209l1.5-5h13L20%209%22/%3E%3Cpath%20d%3D%22M4%209h16v1.5a2.7%202.7%200%200%201-5.3%200%202.7%202.7%200%200%201-5.4%200%202.7%202.7%200%200%201-5.3%200z%22/%3E%3Cpath%20d%3D%22M5.5%2013v8h13v-8M10%2021v-5h4v5%22/%3E%3C/svg%3E")}
.ic-swap{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204L3%208l4%204M3%208h14M17%2020l4-4-4-4M21%2016H7%22/%3E%3C/svg%3E")}
.ic-racket{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%229%22%20rx%3D%226%22%20ry%3D%227%22/%3E%3Cpath%20d%3D%22M14.2%2014.3L20%2021M7%206.5l6%205M6.5%2010l5%204%22/%3E%3C/svg%3E")}
.ic-logout{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h5v16h-5M10%208l-4%204%204%204M6%2012h11%22/%3E%3C/svg%3E")}
.ic-phone{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z%22/%3E%3C/svg%3E")}
.ic-bolt{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202L4%2014h7l-1%208%209-12h-7z%22/%3E%3C/svg%3E")}
.ic-info{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22/%3E%3C/svg%3E")}
.ic-download{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11M7%2010l5%205%205-5M5%2020h14%22/%3E%3C/svg%3E")}
.ic-doc{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6z%22/%3E%3Cpath%20d%3D%22M14%203v4h4M9%2012h6M9%2016h6%22/%3E%3C/svg%3E")}
.ic-shield{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%22/%3E%3C/svg%3E")}
.ic-wa{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2011.6a8.5%208.5%200%200%201-12.6%207.4L3.5%2020.5l1.6-4.2A8.5%208.5%200%201%201%2020.5%2011.6z%22/%3E%3Cpath%20d%3D%22M9%208.5c0%203.5%203%206.5%206.5%206.5l1-1.6-2-1-1%201a5%205%200%200%201-3-3l1-1-1-2z%22/%3E%3C/svg%3E")}
.ic-nav{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l18-8-8%2018-2-8z%22/%3E%3C/svg%3E")}
.ic-img{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M21%2016l-5-5-8%208%22/%3E%3C/svg%3E")}
.ic-filter{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M7%2012h10M10%2018h4%22/%3E%3C/svg%3E")}
.ic-star{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.7%205.6%206.1.9-4.4%204.3%201%206.1L12%2017l-5.4%202.9%201-6.1L3.2%209.5l6.1-.9z%22/%3E%3C/svg%3E")}
.ic-menu{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2012h16M4%2017h16%22/%3E%3C/svg%3E")}
.ic-archive{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%225%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M5%209v10a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1V9M10%2013h4%22/%3E%3C/svg%3E")}
.ic-mute{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%205L6%209H3v6h3l5%204z%22/%3E%3Cpath%20d%3D%22M22%209l-6%206M16%209l6%206%22/%3E%3C/svg%3E")}
.ic-trash{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M10%2011v6M14%2011v6M6%207l1%2013h10l1-13M9%207V4h6v3%22/%3E%3C/svg%3E")}
.ic-link{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201%22/%3E%3Cpath%20d%3D%22M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22/%3E%3C/svg%3E")}
.ic-alert{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9.5%2017h-19z%22/%3E%3Cpath%20d%3D%22M12%2010v4M12%2017.5v.5%22/%3E%3C/svg%3E")}
.ic-refresh{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.8-3.5M4%204v4h4M4%2013a8%208%200%200%200%2014.8%203.5M20%2020v-4h-4%22/%3E%3C/svg%3E")}
.ic-level{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020v-5M12%2020V10M19%2020V4%22/%3E%3C/svg%3E")}