/* =====================================================================
   LIF Poker - Design System (lif-components.css)
   Tokens (:root) + componentes con prefijo lif-. CSS vanilla.
   Extraido de la referencia visual del rediseno. NUNCA amarillo/dorado.
   Se omiten a proposito los resets globales de body/a/button para no
   afectar el resto del dashboard; las variables :root son inertes hasta
   que una clase lif-* las usa. Font Awesome ya viene del dashboard.
   ===================================================================== */

/* LIF Poker — color. Valores tomados de dashboard-style.css, calc-equity.css, range-builder.css.
   REGLA: nunca amarillo ni dorado. Los "oro"/"total" de los archivos fuente se reemplazan por --acento (celeste). */
:root{
  /* Marca */
  --lif-celeste:#6ECFF0;
  --lif-azul:#1481C0;
  --lif-azul-hover:#1893D8;
  --lif-azul-profundo:#002E67;
  --lif-celeste-rgb:110,207,240; /* @kind other */
  --lif-azul-rgb:20,129,192; /* @kind other */
  --lif-profundo-rgb:0,46,103; /* @kind other */
  --lif-gradiente-marca:linear-gradient(135deg,#6ECFF0 0%,#1481C0 60%,#002E67 130%); /* @kind color */

  /* Navy (escala de superficies oscuras, calc-equity) */
  --navy-950:#050B18;
  --navy-900:#081226;
  --navy-850:#0B1731;
  --navy-800:#0E2044;
  --navy-750:#0F2147;
  --navy-700:#132A57;
  --navy-600:#1A3160;
  --navy-500:#1F3C72;
  --navy-400:#244680;
  --navy-300:#2A5A9A;
  --navy-200:#3D5F96;

  /* Texto sobre navy */
  --tinta-100:#EAF3FB;
  --tinta-200:#CFE3F5;
  --tinta-300:#A9BDD8;
  --tinta-400:#8FA8C8;
  --tinta-500:#6E89AE;
  --tinta-600:#5D7598;

  /* Estado */
  --verde:#3ec98a;
  --verde-fuerte:#10b981;
  --rojo-suave:#ee8888;
  --rojo:#FF5A6E;
  --rojo-fuerte:#ef4444;
  --naranja:#FF7A45;
  --whatsapp-1:#25D366;
  --whatsapp-2:#128C7E;

  /* Acciones de poker (call verde, fold rojo suave) */
  --accion-allin:#E4208C;
  --accion-raise:#9B5CF6;
  --accion-call:#3ec98a;
  --accion-fold:#ee8888;
  --accion-check:#12B5D6;

  /* Jugadores (EquiLIF, paleta LIF). Jugador 4 dorado del original reemplazado. */
  --jugador-1:#E4208C;
  --jugador-2:#9B5CF6;
  --jugador-3:#12B5D6;
  --jugador-4:#3DDC97;
  --jugador-5:#FF7A45;
  --jugador-6:#5AA2FF;
  --jugador-7:#C77DFF;
  --jugador-8:#FF6B7F;
  --jugador-9:#B8C4D6;
  --jugador-10:#8FA8C8;

  /* Baraja 4 colores */
  --palo-corazon:#D92D45;
  --palo-diamante:#1E6FE0;
  --palo-trebol:#16955A;
  --palo-pica:#2A3142;
  --palo-indice:#F4F9FF;

  /* ---- Alias semánticos (tema oscuro, por defecto) ---- */
  --superficie-fondo:#121212;
  --superficie-pagina:var(--navy-950);
  --superficie-panel:var(--navy-850);
  --superficie-elevada:var(--navy-800);
  --superficie-fila:var(--navy-750);
  --superficie-campo:var(--navy-900);
  --superficie-boton:var(--navy-700);
  --superficie-overlay:rgba(3,8,20,.72);
  --superficie-menu:linear-gradient(180deg,rgba(0,46,103,.85),rgba(13,13,13,.95)); /* @kind color */
  --superficie-toast:rgba(13,13,13,.95);

  --borde:var(--navy-600);
  --borde-fuerte:var(--navy-500);
  --borde-campo:var(--navy-400);
  --borde-punteado:var(--navy-300);
  --linea-celeste:rgba(110,207,240,.10);
  --linea-celeste-fuerte:rgba(110,207,240,.22);

  --texto-principal:var(--tinta-100);
  --texto-secundario:var(--tinta-200);
  --texto-suave:var(--tinta-400);
  --texto-tenue:var(--tinta-500);
  --texto-minimo:var(--tinta-600);
  --texto-sobre-acento:#04182a;
  --texto-sobre-azul:#F4F9FF;

  --acento:var(--lif-celeste);
  --acento-fuerte:var(--lif-azul);
  --titulo-color:var(--lif-celeste);

  --exito:var(--verde);
  --exito-fondo:rgba(62,201,138,.12);
  --error:var(--rojo);
  --error-texto:#FF8A98;
  --error-fondo:rgba(238,136,136,.15);
  --aviso:var(--naranja);
  --aviso-fondo:rgba(255,122,69,.12);
  --info-fondo:rgba(110,207,240,.12);

  --celda-vacia:#132547;
  --celda-par:#1E3564;
  --celda-suited:#172C57;
  --celda-texto:#7F97BA;
  --celda-texto-activa:#F4F9FF;
}

/* ---- Tema claro: <html data-tema="claro"> ---- */
[data-tema="claro"]{
  --superficie-fondo:#EEF3F8;
  --superficie-pagina:#EEF3F8;
  --superficie-panel:#FFFFFF;
  --superficie-elevada:#F4F8FC;
  --superficie-fila:#F7FAFD;
  --superficie-campo:#E6EEF6;
  --superficie-boton:#EAF1F8;
  --superficie-overlay:rgba(8,18,38,.45);
  --superficie-menu:linear-gradient(180deg,#FFFFFF,#F1F6FB); /* @kind color */
  --superficie-toast:#FFFFFF;

  --borde:#D6E2EE;
  --borde-fuerte:#BCD0E4;
  --borde-campo:#A9C1DA;
  --borde-punteado:#7FA3CC;
  --linea-celeste:rgba(20,129,192,.12);
  --linea-celeste-fuerte:rgba(20,129,192,.26);

  --texto-principal:#0B1731;
  --texto-secundario:#1F3C72;
  --texto-suave:#3F5A80;
  --texto-tenue:#4E6990;
  --texto-minimo:#5D7598;

  --acento:#1481C0;
  --acento-fuerte:#002E67;
  --titulo-color:#002E67;

  --exito:#11875A;
  --exito-fondo:rgba(17,135,90,.10);
  --error:#C8283C;
  --error-texto:#B0223A;
  --error-fondo:rgba(200,40,60,.08);
  --aviso:#C2501F;
  --aviso-fondo:rgba(194,80,31,.10);
  --info-fondo:rgba(20,129,192,.10);

  --celda-vacia:#E3ECF5;
  --celda-par:#CFDDEC;
  --celda-suited:#DAE5F1;
  --celda-texto:#4E6990;
}

/* Bebas Neue: títulos, etiquetas de sección, números destacados (equity, EV, BB), botón principal.
   Montserrat: textos, etiquetas, datos. Escala agrandada respecto del original para alumnos mayores: cuerpo mínimo 16px. */
:root{
  --fuente-titulo:'Bebas Neue',system-ui,sans-serif; /* @kind font */
  --fuente-texto:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; /* @kind font */
  --fuente-mono:ui-monospace,'SFMono-Regular',Menlo,monospace; /* @kind font */

  /* Display (Bebas) */
  --fs-numero-xl:64px; /* @kind font */
  --fs-numero-lg:48px; /* @kind font */
  --fs-numero:38px; /* @kind font */
  --fs-titulo-xl:44px; /* @kind font */
  --fs-titulo-lg:36px; /* @kind font */
  --fs-titulo:30px; /* @kind font */
  --fs-titulo-sm:24px; /* @kind font */
  --fs-seccion:20px; /* @kind font */

  /* Texto (Montserrat) */
  --fs-cuerpo-lg:18px; /* @kind font */
  --fs-cuerpo:16px; /* @kind font */
  --fs-cuerpo-sm:15px; /* @kind font */
  --fs-dato:14px; /* @kind font */
  --fs-etiqueta:13px; /* @kind font */

  --lh-titulo:1; /* @kind font */
  --lh-cuerpo:1.5; /* @kind font */
  --lh-ajustado:1.25; /* @kind font */

  --ls-titulo:.06em; /* @kind font */
  --ls-seccion:.08em; /* @kind font */
  --ls-etiqueta:.14em; /* @kind font */
  --ls-marca:.32em; /* @kind font */

  --peso-regular:400; /* @kind font */
  --peso-medio:500; /* @kind font */
  --peso-semi:600; /* @kind font */
  --peso-bold:700; /* @kind font */
  --peso-extra:800; /* @kind font */
}

:root{
  --esp-1:4px;
  --esp-2:8px;
  --esp-3:12px;
  --esp-4:16px;
  --esp-5:20px;
  --esp-6:24px;
  --esp-7:28px;
  --esp-8:32px;
  --esp-10:40px;

  --radio-xs:3px;
  --radio-sm:6px;
  --radio:8px;
  --radio-md:10px;
  --radio-lg:12px;
  --radio-xl:14px;
  --radio-modal:18px;
  --radio-pill:999px;

  --sombra-1:0 6px 18px rgba(0,0,0,.30);
  --sombra-2:0 18px 40px rgba(0,0,0,.40);
  --sombra-modal:0 30px 80px rgba(0,0,0,.55);
  --sombra-cta:0 8px 22px rgba(20,129,192,.35);
  --anillo:0 0 0 3px rgba(110,207,240,.28); /* @kind shadow */
  --anillo-calcular:0 0 0 4px rgba(20,129,192,.18); /* @kind shadow */

  --ease:cubic-bezier(.2,.8,.25,1); /* @kind other */
  --t:.22s var(--ease); /* @kind other */
  --t-rapida:.12s linear; /* @kind other */

  --alto-header:88px; /* @kind spacing */
  --ancho-menu:268px; /* @kind spacing */
  --ancho-menu-cerrado:72px; /* @kind spacing */
  --objetivo-tactil:44px; /* @kind spacing */

  --z-overlay:1100; /* @kind other */
  --z-menu:1200; /* @kind other */
  --z-header:1300; /* @kind other */
  --z-modal:9000; /* @kind other */
  --z-toast:9500; /* @kind other */
}
[data-tema="claro"]{
  --sombra-1:0 4px 14px rgba(11,23,49,.08);
  --sombra-2:0 14px 34px rgba(11,23,49,.12);
  --sombra-modal:0 24px 60px rgba(11,23,49,.22);
}
@media (max-width:991.98px){:root{--alto-header:72px}}

/* ==========================================================================
   LIF Poker — componentes (CSS vanilla, clases semánticas en español, prefijo lif-)
   Un solo bloque: se puede copiar tal cual a las vistas vanilla JS del dashboard.
   ========================================================================== */

/* ---------- Texto ---------- */
.lif-titulo{margin:0;font:400 var(--fs-titulo)/1 var(--fuente-titulo);letter-spacing:.05em;color:var(--titulo-color);text-transform:uppercase}
.lif-titulo--xl{font-size:var(--fs-titulo-xl);letter-spacing:.08em}
.lif-titulo--sm{font-size:var(--fs-titulo-sm)}
.lif-seccion{margin:0;font:400 var(--fs-seccion)/1 var(--fuente-titulo);letter-spacing:var(--ls-seccion);color:var(--texto-suave);text-transform:uppercase}
.lif-etiqueta{margin:0;font-size:var(--fs-etiqueta);font-weight:700;letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--texto-suave)}
.lif-texto-suave{color:var(--texto-suave);font-size:var(--fs-dato)}
.lif-acento{color:var(--acento)}

/* ---------- Botón ---------- */
.lif-boton{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--objetivo-tactil);padding:10px 18px;border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);background:var(--superficie-elevada);color:var(--texto-secundario);font:600 var(--fs-cuerpo-sm)/1.2 var(--fuente-texto);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t),filter var(--t)}
.lif-boton:hover{border-color:var(--lif-azul);color:var(--texto-principal)}
.lif-boton:active{transform:translateY(1px)}
.lif-boton:focus-visible{outline:none;box-shadow:var(--anillo)}
.lif-boton:disabled,.lif-boton.is-deshabilitado{opacity:.4;cursor:not-allowed;pointer-events:none}
.lif-boton i{font-size:.95em}
.lif-boton--primario{padding:12px 38px;background:var(--lif-azul);border-color:var(--lif-celeste);color:var(--texto-sobre-azul);font:400 var(--fs-titulo-sm)/1 var(--fuente-titulo);letter-spacing:2px;text-transform:uppercase;box-shadow:var(--anillo-calcular)}
.lif-boton--primario:hover{background:var(--lif-azul-hover);border-color:var(--lif-celeste);color:var(--texto-sobre-azul)}
.lif-boton--cta{background:linear-gradient(135deg,var(--lif-celeste),var(--lif-azul));border-color:transparent;color:var(--texto-sobre-acento);font-weight:700;box-shadow:var(--sombra-cta)}
.lif-boton--cta:hover{filter:brightness(1.05);border-color:transparent;color:var(--texto-sobre-acento)}
.lif-boton--punteado{background:transparent;border-style:dashed;border-color:var(--borde-punteado);color:var(--acento)}
.lif-boton--fantasma{background:transparent;border-color:transparent;color:var(--texto-suave)}
.lif-boton--fantasma:hover{background:var(--info-fondo);border-color:transparent}
.lif-boton--peligro{background:var(--error-fondo);border-color:rgba(239,68,68,.35);color:var(--error-texto)}
.lif-boton--peligro:hover{border-color:rgba(239,68,68,.6);color:var(--error-texto)}
.lif-boton--exito{background:linear-gradient(145deg,var(--whatsapp-1),var(--whatsapp-2));border-color:transparent;color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(37,211,102,.30)}
.lif-boton--exito:hover{filter:brightness(1.06);border-color:transparent;color:#fff}
.lif-boton--chico{min-height:36px;padding:6px 12px;font-size:var(--fs-dato)}
.lif-boton--ancho{width:100%}

/* ---------- Botón ícono ---------- */
.lif-boton-icono{width:var(--objetivo-tactil);height:var(--objetivo-tactil);display:inline-grid;place-items:center;padding:0;border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);background:var(--superficie-boton);color:var(--tinta-300);font-size:15px;cursor:pointer;transition:color var(--t),border-color var(--t),background var(--t)}
[data-tema="claro"] .lif-boton-icono{color:var(--texto-suave)}
.lif-boton-icono:hover{color:var(--texto-principal);border-color:var(--lif-azul)}
.lif-boton-icono:focus-visible{outline:none;box-shadow:var(--anillo)}
.lif-boton-icono--chico{width:36px;height:36px;font-size:13px}

/* ---------- Segmentado (calle, mano/rango) ---------- */
.lif-segmentado{display:inline-flex;gap:2px;padding:3px;background:var(--superficie-campo);border-radius:var(--radio-sm)}
.lif-segmentado__opcion{min-height:40px;padding:8px 16px;border:0;border-radius:4px;background:transparent;color:var(--texto-suave);font:600 var(--fs-cuerpo-sm)/1 var(--fuente-texto);cursor:pointer;transition:background var(--t),color var(--t)}
.lif-segmentado__opcion:hover{color:var(--texto-principal)}
.lif-segmentado__opcion.is-activa{background:var(--lif-azul);color:var(--texto-sobre-azul)}
.lif-segmentado--vertical{flex-direction:column}
.lif-segmentado--vertical .lif-segmentado__opcion{min-height:28px;padding:4px 10px;font-size:12px}
.lif-segmentado--lleno{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}

/* ---------- Selector (select con etiqueta) ---------- */
.lif-selector{display:inline-flex;align-items:center;gap:8px;min-height:var(--objetivo-tactil);padding:0 4px 0 14px;background:var(--superficie-elevada);border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);font-size:var(--fs-cuerpo-sm);color:var(--texto-secundario)}
.lif-selector select{min-height:34px;background:var(--superficie-campo);color:var(--texto-principal);border:0;border-radius:4px;padding:6px 10px;font:500 var(--fs-cuerpo-sm) var(--fuente-texto);cursor:pointer}

/* ---------- Campo de texto ---------- */
.lif-campo{display:flex;flex-direction:column;gap:6px}
.lif-campo__entrada{width:100%;min-height:var(--objetivo-tactil);padding:10px 12px;background:var(--superficie-campo);border:1px solid var(--borde-campo);border-radius:var(--radio-sm);color:var(--texto-principal);font:500 var(--fs-cuerpo-sm)/1.5 var(--fuente-texto)}
.lif-campo__entrada::placeholder{color:var(--texto-tenue)}
.lif-campo__entrada:focus{outline:none;border-color:var(--acento);box-shadow:var(--anillo)}
textarea.lif-campo__entrada{resize:vertical;min-height:96px}
.lif-campo.has-error .lif-campo__entrada{border-color:var(--error)}
.lif-campo__ayuda{font-size:var(--fs-etiqueta);color:var(--texto-tenue)}
.lif-campo.has-error .lif-campo__ayuda{color:var(--error-texto);font-weight:500}

/* ---------- Tarjeta / panel ---------- */
.lif-tarjeta{background:var(--superficie-panel);border:1px solid var(--borde);border-radius:var(--radio-md);overflow:hidden;display:flex;flex-direction:column}
.lif-tarjeta__cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 28px;border-bottom:1px solid var(--borde);background:linear-gradient(180deg,var(--superficie-elevada),var(--superficie-panel))}
.lif-tarjeta__titulo{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.lif-tarjeta__meta{font-size:var(--fs-dato);color:var(--texto-suave)}
.lif-tarjeta__meta b{color:var(--texto-principal)}
.lif-tarjeta__meta b.lif-acento{color:var(--acento)}
.lif-tarjeta__cuerpo{padding:20px 28px}
.lif-tarjeta__pie{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap;padding:18px 28px 22px;border-top:1px solid var(--borde)}
.lif-tarjeta--widget{position:relative;align-items:center;text-align:center;padding:1.6rem 1.4rem;border-radius:var(--radio-xl);border-color:var(--linea-celeste);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--superficie-panel);box-shadow:var(--sombra-1);gap:6px;transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.lif-tarjeta--widget::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(110,207,240,.55),transparent)}
.lif-tarjeta--clic{cursor:pointer}
.lif-tarjeta--clic:hover{transform:translateY(-3px);border-color:var(--linea-celeste-fuerte);box-shadow:var(--sombra-2)}
@media (max-width:720px){.lif-tarjeta__cabecera,.lif-tarjeta__cuerpo,.lif-tarjeta__pie{padding-left:16px;padding-right:16px}.lif-tarjeta{border-radius:16px}}

/* ---------- Valor destacado (equity, EV, BB) ---------- */
.lif-valor{display:inline-flex;flex-direction:column;gap:6px;min-width:0}
.lif-valor__etiqueta{font-size:var(--fs-etiqueta);font-weight:700;letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--texto-suave)}
.lif-valor__fila{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.lif-valor__numero{font:400 var(--fs-numero)/.9 var(--fuente-titulo);letter-spacing:.5px;color:var(--texto-principal)}
.lif-valor__unidad{font:700 .42em var(--fuente-texto);color:var(--texto-secundario)}
.lif-valor__margen{font:600 13px var(--fuente-texto);color:var(--acento)}
.lif-valor__detalle{font-size:var(--fs-dato);color:var(--texto-suave)}
.lif-valor--lg .lif-valor__numero{font-size:var(--fs-numero-lg)}
.lif-valor--xl .lif-valor__numero{font-size:var(--fs-numero-xl)}
.lif-valor--gradiente .lif-valor__numero{background:linear-gradient(180deg,#fff 30%,var(--lif-celeste) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-tema="claro"] .lif-valor--gradiente .lif-valor__numero{background:none;color:var(--lif-azul-profundo)}
.lif-valor--positivo .lif-valor__numero{color:var(--exito)}
.lif-valor--negativo .lif-valor__numero{color:var(--error)}
.lif-valor--centro{align-items:center;text-align:center}

/* ---------- Insignia / pill ---------- */
.lif-insignia{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9px;font:700 var(--fs-etiqueta)/1.2 var(--fuente-texto);white-space:nowrap;background:var(--info-fondo);color:var(--acento)}
.lif-insignia--verde{background:var(--exito-fondo);color:var(--exito)}
.lif-insignia--rojo{background:var(--error-fondo);color:var(--error-texto)}
.lif-insignia--naranja{background:var(--aviso-fondo);color:var(--aviso)}
.lif-insignia--neutra{background:rgba(159,179,188,.10);color:var(--texto-suave)}
.lif-insignia--rol{padding:10px 16px;border-radius:var(--radio-pill);border:1px solid rgba(110,207,240,.40);background:rgba(110,207,240,.10);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.lif-insignia__punto{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Barra de progreso ---------- */
.lif-progreso{display:flex;flex-direction:column;gap:6px;width:100%}
.lif-progreso__texto{display:flex;justify-content:space-between;font-size:var(--fs-etiqueta);font-weight:600;color:var(--texto-suave)}
.lif-progreso__texto strong{color:var(--acento)}
.lif-progreso__pista{height:8px;background:var(--superficie-campo);border-radius:4px;overflow:hidden}
.lif-progreso__relleno{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--lif-azul),var(--lif-celeste));transition:width .6s cubic-bezier(.16,1,.3,1)}
.lif-progreso--fino .lif-progreso__pista{height:4px}
.lif-progreso--indeterminado .lif-progreso__relleno{width:35%!important;animation:lifBarra 1.1s ease-in-out infinite}
@keyframes lifBarra{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}

/* ---------- Ver más (detalle plegado) ---------- */
.lif-vermas{display:flex;flex-direction:column;gap:8px}
.lif-vermas__boton{width:100%;display:flex;align-items:center;gap:.6rem;min-height:var(--objetivo-tactil);padding:10px 14px;border-radius:var(--radio-md);background:rgba(255,255,255,.03);border:1px dashed var(--borde-fuerte);color:var(--texto-secundario);font:600 var(--fs-cuerpo-sm)/1.2 var(--fuente-texto);cursor:pointer;text-align:left;transition:background var(--t),border-color var(--t)}
.lif-vermas__boton span{flex:1}
.lif-vermas__boton:hover{background:var(--info-fondo);border-color:var(--borde-punteado)}
.lif-vermas__chevron{color:var(--texto-suave);font-size:12px;transition:transform var(--t)}
.lif-vermas.is-abierto .lif-vermas__boton{border-style:solid}
.lif-vermas.is-abierto .lif-vermas__chevron{transform:rotate(180deg);color:var(--acento)}
.lif-vermas__cuerpo{padding:14px 16px;border-radius:var(--radio-md);background:var(--superficie-fila);border:1px solid var(--borde)}
.lif-vermas__cuerpo[hidden]{display:none}

/* ---------- Pestañas (Bebas, constructor de rangos) ---------- */
.lif-pestanas{display:flex;background:var(--superficie-elevada);border:1px solid var(--borde);border-radius:var(--radio-xs);overflow:hidden}
.lif-pestanas__opcion{flex:1;min-height:var(--objetivo-tactil);border:0;background:transparent;color:var(--texto-tenue);font:400 18px/1 var(--fuente-titulo);letter-spacing:1.5px;padding:10px 8px;cursor:pointer}
.lif-pestanas__opcion+.lif-pestanas__opcion{border-left:1px solid var(--borde)}
.lif-pestanas__opcion:hover{color:var(--texto-principal)}
.lif-pestanas__opcion.is-activa{color:var(--acento);background:var(--info-fondo);box-shadow:inset 0 -2px 0 var(--acento)}

/* ---------- Carta ---------- */
.lif-carta{width:40px;height:56px;border-radius:5px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;line-height:1;border:0;padding:0;color:var(--palo-indice);font-family:var(--fuente-texto)}
.lif-carta__rango{font-size:18px}
.lif-carta__palo{font-size:16px;margin-top:2px}
.lif-carta--h{background:var(--palo-corazon)}
.lif-carta--d{background:var(--palo-diamante)}
.lif-carta--c{background:var(--palo-trebol)}
.lif-carta--s{background:var(--palo-pica)}
.lif-carta--vacia{background:transparent;border:1.5px dashed var(--borde-punteado);color:var(--texto-tenue);font-size:20px;cursor:pointer}
.lif-carta--chica{width:34px;height:46px}
.lif-carta--chica .lif-carta__rango{font-size:16px}
.lif-carta--chica .lif-carta__palo{font-size:14px}
.lif-carta--grande{width:52px;height:72px}
.lif-carta--grande .lif-carta__rango{font-size:24px}
.lif-carta--grande .lif-carta__palo{font-size:20px}
.lif-carta.is-seleccionada{box-shadow:0 0 0 3px var(--lif-celeste);transform:translateY(-3px)}
.lif-carta.is-error{box-shadow:0 0 0 3px var(--error)}
.lif-cartas{display:inline-flex;gap:6px}

/* ---------- Grilla de manos 13×13 ---------- */
.lif-grilla{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px;aspect-ratio:1/1;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.lif-grilla--ejes{grid-template-columns:22px repeat(13,minmax(0,1fr));grid-template-rows:22px repeat(13,minmax(0,1fr));aspect-ratio:auto}
.lif-grilla__eje{display:flex;align-items:center;justify-content:center;font:400 15px/1 var(--fuente-titulo);color:var(--acento)}
.lif-celda{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;aspect-ratio:1/1;overflow:hidden;border:0;padding:0;border-radius:3px;background:var(--celda-vacia);color:var(--celda-texto);font:600 clamp(8px,1vw,13px)/1 var(--fuente-texto);cursor:pointer}
.lif-celda--par{background:var(--celda-par)}
.lif-celda--suited{background:var(--celda-suited)}
.lif-celda.is-activa{color:var(--celda-texto-activa);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lif-celda:hover{outline:1px solid var(--lif-azul);outline-offset:-1px}
.lif-celda.is-foco{outline:2px solid var(--lif-celeste);outline-offset:-2px;z-index:2}
.lif-celda__pct{font-size:.7em;font-weight:500;opacity:.85}
.lif-grilla--mini{width:auto;gap:1px;padding:3px;background:var(--superficie-campo);border-radius:4px;grid-template-columns:repeat(13,4px);aspect-ratio:auto}
.lif-grilla--mini .lif-celda{width:4px;height:4px;border-radius:0;font-size:0}
@media (max-width:560px){.lif-grilla{gap:1px}.lif-celda{border-radius:2px;font-size:clamp(7px,2.4vw,11px)}.lif-celda__pct{display:none}}

/* ---------- Leyenda de acciones ---------- */
.lif-leyenda{display:flex;gap:8px;flex-wrap:wrap}
.lif-leyenda__item{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;background:var(--superficie-elevada);border:1px solid var(--borde-fuerte);border-radius:var(--radio-xs);font-size:var(--fs-dato);color:var(--texto-secundario)}
.lif-leyenda__punto{width:12px;height:12px;border-radius:2px;flex:none}
.lif-leyenda__pct{color:var(--texto-suave);font-variant-numeric:tabular-nums}

/* ---------- Barra de equity ---------- */
.lif-barra-equity{display:flex;height:40px;border-radius:var(--radio-sm);overflow:hidden;gap:2px}
.lif-barra-equity__segmento{display:flex;align-items:center;padding:0 12px;color:#081226;font-weight:700;font-size:var(--fs-dato);white-space:nowrap;overflow:hidden;min-width:0;transition:width var(--t-rapida)}
.lif-barra-equity--vacia{border:1px dashed var(--borde-punteado);align-items:center;padding:0 14px;font-size:var(--fs-dato);color:var(--texto-suave)}
@media (max-width:720px){.lif-barra-equity{height:14px}.lif-barra-equity__segmento{font-size:0;padding:0}}

/* ---------- Diálogo ---------- */
.lif-dialogo{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:24px;animation:lifFade .2s ease-out}
.lif-dialogo__fondo{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
[data-tema="claro"] .lif-dialogo__fondo{background:var(--superficie-overlay)}
.lif-dialogo__caja{position:relative;width:min(92vw,480px);max-height:calc(100vh - 48px);overflow:auto;background:linear-gradient(160deg,var(--superficie-elevada),var(--superficie-panel));border:1px solid rgba(110,207,240,.3);border-radius:var(--radio-modal);padding:36px 32px 28px;box-shadow:var(--sombra-modal),0 0 0 1px rgba(110,207,240,.1) inset;text-align:center;animation:lifSubir .3s var(--ease)}
.lif-dialogo__cerrar{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.05);color:var(--texto-suave);cursor:pointer;display:grid;place-items:center;font-size:16px}
.lif-dialogo__cerrar:hover{background:rgba(255,255,255,.1);color:var(--texto-principal)}
.lif-dialogo__icono{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;background:linear-gradient(135deg,var(--lif-celeste),var(--lif-azul));color:var(--lif-azul-profundo);box-shadow:0 8px 24px rgba(110,207,240,.4)}
.lif-dialogo__icono--peligro{background:var(--error-fondo);color:var(--error-texto);box-shadow:none}
.lif-dialogo__titulo{margin:0 0 8px;font:400 30px/1 var(--fuente-titulo);letter-spacing:.06em;color:var(--titulo-color);text-transform:uppercase}
.lif-dialogo__cuerpo{margin:0 0 26px;font-size:var(--fs-cuerpo);color:var(--texto-secundario);line-height:1.55}
.lif-dialogo__acciones{display:flex;flex-direction:column;gap:10px}
@keyframes lifFade{from{opacity:0}to{opacity:1}}
@keyframes lifSubir{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){.lif-dialogo{padding:0;align-items:end}.lif-dialogo__caja{width:100%;border-radius:18px 18px 0 0;padding:30px 20px 24px}}

/* ---------- Toast ---------- */
.lif-toasts{position:fixed;z-index:var(--z-toast);right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px))}
.lif-toast{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--superficie-toast);border:1px solid rgba(110,207,240,.25);border-radius:var(--radio-lg);box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(8px);color:var(--texto-principal);animation:lifSubir .3s var(--ease)}
[data-tema="claro"] .lif-toast{border-color:var(--borde-fuerte);box-shadow:var(--sombra-2)}
.lif-toast__icono{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--info-fondo);color:var(--acento)}
.lif-toast--exito .lif-toast__icono{background:var(--exito-fondo);color:var(--exito)}
.lif-toast--error .lif-toast__icono{background:var(--error-fondo);color:var(--error-texto)}
.lif-toast--aviso .lif-toast__icono{background:var(--aviso-fondo);color:var(--aviso)}
.lif-toast__texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lif-toast__titulo{font-weight:700;font-size:var(--fs-cuerpo-sm)}
.lif-toast__mensaje{font-size:var(--fs-dato);color:var(--texto-secundario);line-height:1.45}
.lif-toast__cerrar{flex:none;border:0;background:transparent;color:var(--texto-suave);cursor:pointer;width:28px;height:28px;font-size:14px}
@media (max-width:560px){.lif-toasts{left:16px;right:16px;bottom:16px;width:auto}}

/* ---------- Encabezado (header de marca) ---------- */
.lif-encabezado{position:sticky;top:0;z-index:var(--z-header);height:var(--alto-header);display:grid;grid-template-columns:minmax(56px,1fr) auto minmax(56px,1fr);align-items:center;padding:0 1.25rem;color:var(--lif-azul-profundo);background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 45%),var(--lif-gradiente-marca);border-bottom:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(255,255,255,.10) inset,var(--sombra-1)}
.lif-encabezado__izq{justify-self:start;display:flex;align-items:center;gap:.5rem}
.lif-encabezado__der{justify-self:end;display:flex;align-items:center;gap:.6rem}
.lif-marca{justify-self:center;display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
.lif-marca__nombre{display:inline-flex;align-items:baseline;gap:.32em;font:400 clamp(1.7rem,2.4vw + .9rem,2.6rem)/.9 var(--fuente-titulo);letter-spacing:.10em}
.lif-marca__lif{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18),0 0 16px rgba(255,255,255,.18)}
.lif-marca__poker{background:linear-gradient(180deg,#fff 10%,var(--lif-celeste) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lif-marca__lema{display:inline-flex;align-items:center;gap:.55rem;font:700 11px var(--fuente-texto);text-transform:uppercase;letter-spacing:var(--ls-marca);color:#fff;opacity:.85}
.lif-marca__punto{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.lif-encabezado__boton{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);color:var(--lif-azul-profundo);font-size:1.05rem}
.lif-encabezado__boton:hover{background:rgba(255,255,255,.28)}
.lif-usuario{display:inline-flex;align-items:center;gap:.7rem;padding:6px 14px 6px 6px;border-radius:var(--radio-pill);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:var(--lif-azul-profundo)}
.lif-usuario__avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 .8rem var(--fuente-texto);color:#fff;background:linear-gradient(145deg,var(--lif-azul-profundo),#051a3a);border:1px solid rgba(255,255,255,.30)}
.lif-usuario__datos{display:flex;flex-direction:column;line-height:1.05;gap:2px}
.lif-usuario__nombre{font-weight:800;font-size:.95rem;color:#04162a}
.lif-usuario__estado{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(4,22,42,.7)}
.lif-usuario__estado::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.lif-encabezado .lif-insignia--rol{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.35);color:#fff}
@media (max-width:1100px){.lif-marca__lema{display:none}}
@media (max-width:720px){.lif-usuario__datos{display:none}.lif-usuario{padding:4px}.lif-marca__lema{display:none}.lif-encabezado .lif-insignia--rol{display:none}}

/* ---------- Menú lateral ---------- */
.lif-menu{display:flex;flex-direction:column;gap:4px;padding:14px 12px;background:var(--superficie-menu);border-right:1px solid var(--linea-celeste);backdrop-filter:blur(12px)}
.lif-menu__item{position:relative;display:flex;align-items:center;gap:.8rem;min-height:48px;padding:.78rem .9rem;border-radius:10px;border:0;background:transparent;width:100%;text-align:left;color:var(--texto-secundario);font:600 1rem/1.25 var(--fuente-texto);text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t)}
.lif-menu__item>i:first-child{width:20px;text-align:center;color:var(--texto-suave)}
.lif-menu__item:hover{background:rgba(110,207,240,.06);color:var(--texto-principal)}
.lif-menu__item:hover>i:first-child{color:var(--acento)}
.lif-menu__item.is-activo{background:linear-gradient(90deg,rgba(20,129,192,.22),rgba(20,129,192,0));color:var(--texto-principal)}
.lif-menu__item.is-activo::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--lif-celeste),var(--lif-azul))}
.lif-menu__item.is-activo>i:first-child{color:var(--acento)}
.lif-menu__chevron{margin-left:auto;font-size:.75rem;color:var(--texto-suave);transition:transform var(--t)}
.lif-menu__carpeta.is-abierta .lif-menu__chevron{transform:rotate(180deg);color:var(--acento)}
.lif-menu__contenido{display:flex;flex-direction:column;gap:2px;padding-left:.75rem;margin:2px 0 4px 18px;border-left:1px dashed rgba(110,207,240,.18)}
.lif-menu__contenido .lif-menu__item{font-size:.95rem;min-height:44px;padding:.6rem .8rem}