/* =============================================
   VARIABLES Y CONFIGURACIÓN GLOBAL
   ============================================= */

/* Paleta de colores----- */
:root {
  --color-azul-oscuro: #285260;  
  --color-azul-medio:  #548C92; 
  --color-azul-claro:  #B4D7D8;  
  --color-crema:       #E0D7CF; 
  --color-arena:       #AB9072;  
  --color-positivo:    #188038;  
  --color-negativo:    #d93025;
  --color-neutro:      #666666;       
  --color-texto-gen:   #1a1a1a;
  --color-texto-prin:  #2C3E50;
  --color-texto-sec:   #BDC3C7;
  --color-fondo:       #ffffff;
}

@font-face {
	font-family: 'Inter';
	src: url('../paquetesDescargados/Inter/static/Inter_18pt-Light.ttf') format('truetype');
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Inter';
}

a {
	text-decoration: none;
	color: var(--color-texto-gen);
}

/* Todo des-seleccionable */
html, body, * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Pero estos sí se pueden seleccionar */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}


.homeContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-fondo);
}

/* =============================================
   SECCIÓN FIJA - DESKTOP
   ============================================= */
.seccionFija {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 98%;
	padding-top: 25px;
	position: fixed;
	z-index: 999;
	background-color: color-mix(in srgb, var(--color-fondo) 55%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	max-width: 1500px;
}

.arriba {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.homeContainer .logo::selection {
	background-color: rgb(200, 200, 200);
}

.homeContainer .arriba .logo {
	height: 100%;
}

/* ── Toggle hamburguesa nav (ya no se usa en header — limpieza) ── */

/* ── NAV Links (Home, Academy, Market Map, Pricing) — mismo estilo que index ── */
.busqueda-af-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.busqueda-af-nav .af-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(26, 26, 26, 0.70);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.busqueda-af-nav .af-nav__link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(26, 26, 26, 0.92);
}

.busqueda-af-nav .af-nav__link.is-active {
  background: var(--brand-soft, rgba(84, 140, 146, 0.12));
  color: var(--color-azul-oscuro);
  border: 1px solid rgba(84, 140, 146, 0.35);
}

/* Barra de busqueda */
/* Barra de búsqueda */
.baraBusqueda {
  position: relative;
  width: 500px;
  min-width: 200px;
  height: 45px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 100, 100, 0.1);
  margin-left: 28px;
  flex-shrink: 1;
}
.baraBusquedaactivada { border-radius: 20px 20px 0 0; box-shadow: none; }
.baraBusqueda a { height: 100%; margin-left: 10px; }
.baraBusqueda .logoAlpha { height: 100%; }
.logoAlpha:hover { transform: scale(1.05); }

.baraBusqueda .input {
  outline: none;
  border: none;
  height: 80%;
  width: 60%;
  font-size: 16px;
  font-weight: normal;
  margin-left: 10px;
  background-color: inherit;
  text-transform: uppercase;
}
.baraBusqueda .input::placeholder { text-transform: none; font-size: 16px; font-weight: normal; }	

.logoAlpha:hover {
  transform: scale(1.05);
}



/* ── AUTOCOMPLETE DROPDOWN — diseño rico ── */
.autocomplete-items {
  display: none; /* oculto por defecto — JS lo muestra con display:block */
  position: absolute;
  z-index: 9999;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(84, 140, 146, 0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(40, 82, 96, 0.16);
}

/* Cada resultado */
.posibleResult {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  cursor: pointer;
  background: #fff;
  border-bottom: 1px solid rgba(84, 140, 146, 0.07);
  transition: background 0.12s ease;
}
.posibleResult:last-child { border-bottom: none; }

.posibleResult:hover,
.posibleResult.autocomplete-active {
  background: rgba(84, 140, 146, 0.07);
}

/* Texto: nombre + ticker */
.ac-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ac-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-ticker {
  font-size: 11.5px;
  font-weight: 700;
  color: #548C92;
  letter-spacing: 0.04em;
}

/* Highlight del texto buscado */
.posibleResult mark {
  background: none;
  color: #285260;
  font-weight: 800;
}

/* Flecha derecha */
.ac-arrow {
  flex-shrink: 0;
  color: #c0d5d7;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.posibleResult:hover .ac-arrow,
.posibleResult.autocomplete-active .ac-arrow {
  color: #548C92;
}

/* Cuando hay lista abierta, la barra solo redondea arriba */
.homeContainer .contenido .baraBusquedaactivada {
  border-radius: 20px 20px 0 0;
  box-shadow: none;
}



/* Usario conectado inicial */
.perfilUsuario {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin-right: 50px;
}
.perfilUsuario:hover { background-color: #e6f0f2; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.perfilCirculo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-azul-medio, #548C92); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; box-shadow: 0 1px 4px rgba(84,140,146,0.2); transition: transform 0.2s ease;
}
.perfilUsuario:hover .perfilCirculo { transform: scale(1.1); }
.nombreUsuario { font-size: 14px; font-weight: 500; color: #333; white-space: nowrap; }


/* Navegación */
.paginas {
	display: flex;
	flex-flow: row;
	justify-content:space-between;
	width: 92%;
	margin-top: 20px;
	border-bottom: 2px solid var(--color-azul-medio);
	background-color: #edefef;
}

.paginas .elementoNav {
	background-color: #edefef;
	width: 100%;
	font-size: 14px;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding-top: 2px;
	padding-bottom: 2px;
	color: var(--color-texto-gen);
}

.paginas .elementoNav:hover {
	background-color: #f3f2f2 !important;
	border: 1px solid var(--color-azul-medio);
	background-color: var(--color-azul-medio) !important;
	color: rgb(255, 255, 255) !important;
	cursor: pointer;
}

.summary {
	background-color: var(--color-azul-medio) !important;
	border: 1px solid var(--color-azul-medio) !important;
	color: rgb(255, 255, 255) !important;
}

/* NAV (MODERNO) — override desktop; móvil se mantiene igual */
@media (min-width: 769px) {
  .paginas {
    position: sticky;
    display: inline-flex;
	overflow: auto;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 92%;
    margin: 25px auto 16px auto;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--color-fondo) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--color-azul-claro) 45%, transparent);
    box-shadow: 0 8px 28px rgba(40, 82, 96, 0.10);
    border-radius: 16px;
  }
  .paginas .elementoNav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--color-texto-prin);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    background: transparent;
  }
  .paginas .elementoNav h3 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
  }
  .paginas .elementoNav:hover {
    background: color-mix(in srgb, var(--color-azul-claro) 26%, transparent);
    border-color: color-mix(in srgb, var(--color-azul-claro) 55%, transparent);
    color: var(--color-azul-oscuro);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(84, 140, 146, 0.16);
  }
  .paginas .elementoNav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-azul-claro) 65%, transparent);
  }
  /* Activo con aria-current (opción recomendada) */
  .paginas .elementoNav[aria-current="page"] {
    background: linear-gradient(135deg, var(--color-azul-medio), var(--color-azul-oscuro));
    border-color: var(--color-azul-medio);
    color: #fff;
    box-shadow: 0 10px 24px rgba(40, 82, 96, 0.28);
  }
  /* Compatible con tu convención actual en esta página */
  .paginas .summary {
    background: linear-gradient(135deg, var(--color-azul-medio), var(--color-azul-oscuro)) !important;
    border-color: var(--color-azul-medio) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(40, 82, 96, 0.28);
  }

}




/* =============================================
   MENÚ MÓVIL - BASE (DESKTOP: OCULTO)
   ============================================= */

/* Botón hamburguesa (oculto en desktop) */
.menu-hambuesa {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	color: var(--color-azul-medio);
	cursor: pointer;
	padding: 10px;
	z-index: 1101; /* por encima del overlay */
}

/* Contenedor del botón login + hamburguesa */
.contenedorBotonLogin {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Panel del menú móvil (off-canvas) */
.menu-mobile,
#menuMobile {
	display: none;              /* se habilita en móvil */
	position: fixed;
	top: 0;
	right: -100%;
	width: 280px;
	height: 100vh;
	background-color: var(--color-fondo);
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease;
	z-index: 1102;              /* por encima del overlay */
	padding-top: 80px;
	overflow-y: auto;
}

/* Estado abierto */
.menu-mobile.menu-abierto,
#menuMobile.menu-abierto {
	right: 0;
}

/* Overlay (base: oculto por opacity/visibility) */
.menu-overlay,
#menuOverlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	z-index: 1100;
}

/* Overlay activo */
.menu-overlay.activo,
#menuOverlay.activo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.menu-mobile-contenido {
	padding: 20px;
}

.menu-mobile-profile {
	padding: 20px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.menu-mobile-profile i {
	font-size: 32px;
	color: var(--color-azul-medio);
}

.menu-mobile-profile span {
	font-size: 16px;
	color: var(--color-texto-gen);
	font-weight: 500;
}

.menu-mobile-item {
	display: block;
	padding: 15px 20px;
	color: var(--color-texto-gen);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid #f0f0f0;
	transition: all 0.3s ease;
}

.menu-mobile-item:hover {
	background-color: var(--color-azul-claro);
	color: var(--color-azul-oscuro);
}

.menu-mobile-item.activo {
	background-color: var(--color-azul-medio);
	color: white;
}

.menu-cerrar {
	display: none; /* Oculto (se cierra con overlay o acciones) */
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	font-size: 24px;
	color: var(--color-azul-medio);
	cursor: pointer;
	padding: 10px;
}

/* Ocultar el botón See More en desktop por defecto */
.see-more-container {
  display: none !important;
}

/* En desktop mostrar el contenido normalmente */
.collapsible-content {
	display: contents; /* contenedor transparente al grid */
	max-height: none;
	overflow: visible;
	width: 100%;
}

/* Ocultar selector de tablas móvil en desktop */
.tabla-selector-mobile {
	display: none;
}

.tabla-mobile-container {
	display: none;
}

/* Mostrar tablas normales en desktop */
.contenedorTablaPuntuacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 40px;
	width: 100%;
}

/* =============================================
   CONTENIDO PRINCIPAL - DESKTOP
   ============================================= */

/* Clases de estado */
.positivo { color: var(--color-positivo); }
.negativo { color: var(--color-negativo); }
.neutro   { color: var(--color-neutro); }

/* Layout principal */
.contenido {
	width: 90%;
	display: grid;
	grid-template-columns: 0.5fr 1fr;
	grid-template-areas:
		'identidad         identidad'
		'puntuacionCirculo graficaPrecio'
		'infoGeneral       graficaPrecio'
		'contenedorAI	  contenedorAI'
		'ranks             ranks'
		'roicYanalystas    roicYanalystas';
	align-items: start;
	justify-content: center;
	column-gap: 32px;
	row-gap: 0;
	margin-top: 175px;
	max-width: 1350px;
}

/* Asegurar grid areas cuando hay colapsables */
.collapsible-content .contenedorAbajoPuntuacion { grid-area: ranks; }
.collapsible-content .contenedorRoicYanalystas  { grid-area: roicYanalystas; }

/* Identidad de la empresa */
.identidad {
	grid-area: identidad;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
}





/* infoPrecio, precioAccion, cambios — definidos en bloque IDENTIDAD más abajo */

/* Círculo de puntuación */
.contenedorCirculoDePuntuacion {
	grid-area: puntuacionCirculo;
	width: 80%;
	max-width: 400px;
	justify-self: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-top: 20px;
}

.alphaScoreTitulo {
  position: absolute;
  top: -25px;   /* súbelo o bájalo según tu gusto */
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  z-index: 100;
  color: #548C92;
}

.contenedorGraficaPuntuacion {
	width: 70% !important;
  min-width: 200px !important;
	max-width: 210px !important;
	background-color: var(--color-fondo);
	transform: perspective(400px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
	padding: 10px;
	border-radius: 20px;

	/* >>> para que se vea clickeable <<< */
	cursor: pointer;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.contenedorGraficaPuntuacion:hover,
.contenedorGraficaPuntuacion:focus-visible {
	/* mantenemos la perspectiva y le añadimos un ligero “lift” */
	transform: perspective(400px) translateY(-2px) scale(1.02);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14),
	            0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Escalar la puntuación cuando el contenedor es hover */
.contenedorGraficaPuntuacion:hover ~ .puntuacion,
.contenedorGraficaPuntuacion:focus-visible ~ .puntuacion {
	transform: scale(1.12);
}

/* Animación suave */
.puntuacion {
	transition: transform 0.18s ease-out;
}


.contenedorCirculoDePuntuacion .puntuacion {
	position: absolute;
	font-size: 22px;
	font-weight: 600;
}


/* Seccion AI ----------------------------- */
.contenedorAI {
  grid-area: contenedorAI;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 18px;
}

/* ---- Unified AI Card — AlphaAI style ---- */
.ai-card {
  width: 100%;
  background: #fafcfc;
  border: 1px solid rgba(84, 140, 146, 0.18);
  border-top: 2px solid var(--color-azul-medio);
  border-left: 3px solid var(--color-azul-medio);
  border-radius: 0 12px 12px 12px;
  padding: 14px 18px 12px 18px;
  box-shadow: 0 2px 8px rgba(40, 82, 96, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Header row */
.ai-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-card__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* AlphaAI icon (logo wrap) */
.aai-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(84,140,146,0.08);
  border: 1px solid rgba(84,140,146,0.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ai-card__name-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-card__brand {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a2a2e;
  display: flex;
  align-items: center;
  gap: 7px;
}

.aai-pill {
  display: inline-flex; align-items: center;
  background: rgba(84,140,146,0.10);
  border: 1px solid rgba(84,140,146,0.25);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.05em; color: #548C92;
}

.ai-card__sublabel {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aabcc0;
}

/* keep old label class in case JS references it */
.ai-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-azul-medio);
}

/* Divider */
.aai-divider {
  border: none;
  border-top: 1px solid rgba(84,140,146,0.10);
  margin: 12px 0;
}

/* Controls (button / lock) */
.ai-card__controls {
  display: flex;
  align-items: center;
}

/* Body */
.ai-card__body {
  display: flex;
  flex-direction: column;
}

.ai-card__text {
  font-size: 0.82rem;
  line-height: 1.68;
  color: #3a4e55;
  margin: 0;
  text-align: left;
}

/* Footer opinion strip */
.ai-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid rgba(84, 140, 146, 0.10);
}

.ai-card__opinion-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #aabcc0;
  white-space: nowrap;
}

.ai-card__opinion-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-texto-gen);
  letter-spacing: 0.02em;
}

/* Semantic opinion colors */
.ai-card__opinion-value[data-opinion="BUY"],
.ai-card__opinion-value.opinion-buy   { color: var(--color-positivo); }
.ai-card__opinion-value[data-opinion="SELL"],
.ai-card__opinion-value.opinion-sell  { color: var(--color-negativo); }
.ai-card__opinion-value[data-opinion="HOLD"],
.ai-card__opinion-value.opinion-hold  { color: var(--color-arena); }

/* Generate button */
.btn-analisis {
  background: linear-gradient(135deg, #548C92, #285260);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.18s, transform 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  outline: none;
}

.btn-analisis:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-analisis:disabled {
  opacity: 0.45;
  cursor: wait;
  transform: none;
}

/* Timestamp del análisis AI */
.ai-card__timestamp {
  margin-left: auto;
  font-size: 10px;
  color: #aabcc0;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Botón Analyze again — versión más sutil */
.btn-analisis--again {
  background: transparent;
  color: #548C92;
  border: 1.5px solid rgba(84, 140, 146, 0.45);
}
.btn-analisis--again:hover {
  background: rgba(84, 140, 146, 0.08);
  border-color: #548C92;
  opacity: 1;
}

/* Lock message */
.ai-lock-message {
  font-size: 11px;
  color: var(--color-azul-medio);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color 0.15s;
}

.ai-lock-message:hover {
  color: var(--color-azul-oscuro);
}


/* Loading dots */
.cargando::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--color-azul-medio);
  animation: dotPulse 1s infinite steps(3, end);
}

@keyframes dotPulse {
  0%, 20% { transform: scale(0); }
  50%     { transform: scale(1); }
  100%    { transform: scale(0); }
}


/* Info General */
.infoGeneral {
  grid-area: infoGeneral;
  display: flex;
  justify-content: stretch;
  align-self: flex-start;
  gap: 0;
  font-size: 12px;
  color: #2C3E50;
  flex-wrap: nowrap;
  margin-top: 16px;
  width: 100%;
}

.infoGeneral1, .infoGeneral2 { width: 50%; border-collapse: collapse; }

.infoGeneral1, .infoGeneral2 {
  flex: 1;              /* Ambas ocupan el mismo espacio */
  border-collapse: collapse;
}

.nombreInfoGeneral {
  font-weight: 500;
  color: #666;
  padding: 5px 8px 5px 0;
  white-space: nowrap;
  text-align: left;
}

.valorInfoGeneral {
  font-weight: 600;
  padding: 5px 8px 5px 4px;
  text-align: right;
  white-space: nowrap;
  color: #1a1a1a;
}

.alrededor { border-bottom: 1px solid #ddd; }

.infoGeneral1 tr:last-child .alrededor,
.infoGeneral2 tr:last-child .alrededor { border-bottom: none; }

/* Botón para info más discreto */
.infoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(84, 140, 146, 0.15);
  color: var(--color-azul-medio);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  border: 1.5px solid rgba(84, 140, 146, 0.45);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
  vertical-align: middle;
}

.infoBtn:hover {
  background: var(--color-azul-medio);
  color: #fff;
  border-color: var(--color-azul-medio);
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(84, 140, 146, 0.40);
}

.infoBtn:active {
  background: var(--color-azul-oscuro);
  border-color: var(--color-azul-oscuro);
  color: #fff;
  transform: scale(0.92);
  box-shadow: none;
}

/* Alinear texto y botón (i) dentro de la celda */
.nombreInfoGeneral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  width: 130px;
}

.contenedorTablaPuntuacion .infoBtn, .contenedorTablaPuntuacion .infoBtn .tabla-mobile-container{
	margin-left: 10px;
}

/* Gráfica principal */
.seccionGrafica {
	grid-area: graficaPrecio;
	display: flex;
	flex-flow: column;
	align-items: stretch;
	align-self: start;
	min-width: 0;
	overflow: hidden;
	/* Limitar altura para no hacer overlap con filas siguientes */
	max-height: 420px;
}



/* ── Header de la gráfica: mini identidad + estado del mercado ── */
.graficaHeader {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 3px;
	margin-bottom: 6px;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
.graficaIdentidad {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.graficaLogo {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #ececec;
	padding: 2px;
	flex-shrink: 0;
}
.graficaIdTextos {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}
.graficaTicker {
	font-weight: 700;
	font-size: 14px;
	color: #1a1a1a;
	letter-spacing: -0.01em;
}
.graficaNombre {
	font-size: 12px;
	color: #9aa0a6;
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.graficaMercado {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #5f6368;
	flex-wrap: wrap;
}
.mercadoDot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
	background: #9aa0a6;
	flex-shrink: 0;
}
.mercadoDot.abierto { background: #1a9e5c; box-shadow: 0 0 0 3px rgba(26,158,92,0.15); }
.mercadoDot.cerrado { background: #9aa0a6; box-shadow: 0 0 0 3px rgba(154,160,166,0.15); }
.mercadoSep { color: #c4c7cc; }

.cambioDeLaAccion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 15px;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	font-weight: 500;
	color: #444;
	margin-bottom: 2px;
}
.cambioEntreEsasFechas {
	font-weight: 600;
	letter-spacing: -0.01em;
}
.fa-arrow-down { color: var(--color-negativo); font-size: 13px; }
.fa-arrow-up   { color: var(--color-positivo); font-size: 13px; }
.desdeCuando   {
	color: #9aa0a6;
	font-size: 13px;
	font-weight: 400;
}

/* Botones de temporalidad */
.botonesTemporalidadGrafica {
	display: flex;
	justify-content: center;
	gap: 2px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.botonesTemporalidadGrafica button {
	background-color: transparent;
	border: none;
	color: #5f6368;
	border-radius: 20px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 500;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.botonesTemporalidadGrafica button:hover {
	background-color: rgba(0,0,0,0.06);
	color: #202124;
}
.botonActivo {
	background-color: #1a8a8a !important;
	color: #fff !important;
	font-weight: 600 !important;
}

/* Tooltip — card estilo Google Finance */
.tooltipGraficaPrincipalDesign {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	padding: 10px 14px;
	opacity: 0;
	position: absolute;
	pointer-events: none;
	transition: opacity 0.1s ease;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	min-width: 120px;
	z-index: 99;
}
.tooltipGraficaPrincipalDesign .tooltipul {
	margin: 0;
	list-style: none;
	padding: 0;
}
.tooltipGraficaPrincipalDesign .tt-date {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: #9aa0a6;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 4px;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
.tooltipGraficaPrincipalDesign .textoPrecio {
	margin: 0 0 2px 0;
	font-size: 16px;
	font-weight: 700;
	color: #202124;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	letter-spacing: -0.02em;
}
.tooltipGraficaPrincipalDesign .textoCambio {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
}

/* Gráfica contenedor */
.contenedorGraficaPrecio {
	width: 100%;
	display: flex;
	align-items: flex-end;
	position: relative;
	height: 260px;
	min-width: 0;
}

.contenedorGraficaPrecio canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Sección completa de la gráfica — borde delimitador */
.seccionGrafica {
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	padding: 14px 10px 12px 10px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	max-height: 420px;
}

/* Parte de abajo - ranks */
.contenedorAbajoPuntuacion {
	grid-area: ranks;
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-top: 40px;
}

/* Radar de puntuaciones */
.contenedorPuntuacionesCircular {
	width: 35%;
	max-width: 400px;
	display: flex;
	align-items: center;
	margin-left: 50px;
}

.contenedorDataPuntuacion {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 850px;
}

.tituloDeTablas {
	text-align: center;
	font-size: 14px;
	color: #548C92;
	font-weight: 600;
	margin-bottom: 14px;
}

.contenedorTablaPuntuacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 40px;
	width: 100%;
}
.contenedorTablaPuntuacion table {
	width: 280px;
	border-collapse: collapse;
	border-radius: 6px;
	overflow: hidden;
	font-size: 12px;
	table-layout: fixed;
	background-color: white;
	transform: perspective(800px);
	box-shadow: 0 8px 16px rgba(84, 140, 146, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.contenedorTablaPuntuacion table th,
.contenedorTablaPuntuacion table td {
	padding: 6px 8px;
	border-bottom: 1px solid #eee;
	width: 50%;
}
.contenedorTablaPuntuacion table th { background-color: #f5f5f5; text-align: left; font-weight: 600; color: #333; }
.contenedorTablaPuntuacion table td { text-align: center; }
/* :not(.scoreCard__table) — esta regla es del diseño viejo de tablas. Se aplicaba
   directo al primer <th> de las scoreCard, ganándole al font-size que esas tablas
   solo HEREDAN, y dejaba la primera métrica (PE, Total Revenue…) más grande. */
.contenedorTablaPuntuacion table:not(.scoreCard__table) tr:first-child th { font-size: 14px; color: #548C92; background-color: #eaf2f3; text-align: center; padding: 8px; }
.puntuacionTabla { font-weight: bold; color: #222; text-align: center; font-size: 13px; }
.contenedorTablaPuntuacion table tr:last-child td,
.contenedorTablaPuntuacion table tr:last-child th { border-bottom: none; }

/* Sección ROIC / Analystas */
.contenedorRoicYanalystas {
	grid-area: roicYanalystas;
	justify-self: center;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	margin-bottom: 0px;
	margin-top: 50px;
}

/* Roic */
.contenedorRoic {
	display: flex;
	width: 50%;
	min-width: 500px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.contenedorGraficaROIC {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.05),
		0 1px 3px rgba(0, 0, 0, 0.03),
		inset 0 1px 2px rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background-color: #ffffff;
	padding: 15px 0;
	transition: box-shadow 0.3s ease;
}
.contenedorCanvasGraficaRoic {
  width: 95%;
  position: relative;
  height: 260px;
}

/* ── Tooltip ROIC ── */
.tooltipGraficaROICDesign {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.1s ease;
  box-shadow: 0 4px 16px rgba(40,82,96,0.13);
  min-width: 130px;
  z-index: 99;
}
.tooltipGraficaROICDesign .tooltipul { margin: 0; list-style: none; padding: 0; }
.tooltipGraficaROICDesign .tt-date {
  display: block; font-size: 10px; font-weight: 500;
  color: #9aa0a6; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
}
.tooltipGraficaROICDesign .tt-roic-row {
  display: flex; align-items: center; gap: 6px;
  margin: 3px 0; font-size: 12px; font-family: 'Inter', sans-serif;
}
.tooltipGraficaROICDesign .tt-roic-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tooltipGraficaROICDesign .tt-roic-label { color: #9aa0a6; font-weight: 500; }
.tooltipGraficaROICDesign strong { font-size: 13px; font-weight: 700; color: #202124; }

/* Tabla Roic */
.tablaRoic {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
	font-size: 13px;
	background-color: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	overflow: hidden;
	table-layout: fixed;
}
.tablaRoic tr:first-child th {
	background-color: #eaf2f3;
	color: #548C92;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	padding: 10px;
}
.tablaRoic tr:nth-child(odd) { background-color: #f9f9f9; }
.tablaRoic th, .tablaRoic td { border-bottom: 1px solid #ddd; padding: 8px; text-align: center; color: #333; }
.tablaRoic tr:last-child td, .tablaRoic tr:last-child th { border-bottom: none; }
.tablaRoic .roicValor { font-weight: 700; color: #2f4f53; }

/* Analystas */
.contenedorAnalystas {
	display: flex;
	flex-direction: column;
	width: 36%;
	min-width: 340px;
}
.contenedorOpinionesAnalystas {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.05),
		0 1px 3px rgba(0, 0, 0, 0.03),
		inset 0 1px 2px rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background-color: #ffffff;
	padding: 15px 0;
	transition: box-shadow 0.3s ease;
}
.contenedorCanvasOpinionesAnalystas {
  width: 95%;
  position: relative;
  height: 200px;
}

/* tooltip analistas */
.tooltipGraficaBarraDesign {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.1s ease;
  box-shadow: 0 4px 16px rgba(40,82,96,0.13);
  min-width: 120px;
  z-index: 99;
}
.tooltipGraficaBarraDesign .tooltipul { margin: 0; list-style: none; padding: 0; }
.tooltipGraficaBarraDesign .tt-date {
  display: block; font-size: 10px; font-weight: 600;
  color: #9aa0a6; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 5px;
  font-family: 'Inter', sans-serif;
}
.tooltipGraficaBarraDesign .tt-bar-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-family: 'Inter', sans-serif; margin: 0;
}
.tooltipGraficaBarraDesign strong { font-size: 13px; font-weight: 700; color: #202124; }

/* Earnings */
.contenedorEarnings {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.05),
		0 1px 3px rgba(0, 0, 0, 0.03),
		inset 0 1px 2px rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background-color: #ffffff;
	padding: 15px 0;
	transition: box-shadow 0.3s ease;
}
.contenedorCanvasEarnings {
  width: 95%;
  position: relative;
  height: 270px;
}

.tooltipGraficaEarnings {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.1s ease;
  box-shadow: 0 4px 16px rgba(40,82,96,0.13);
  min-width: 140px;
  z-index: 99;
}
.tooltipGraficaEarnings .tooltipul { margin: 0; list-style: none; padding: 0; }
.tooltipGraficaEarnings .tt-date {
  display: block; font-size: 10px; font-weight: 600;
  color: #9aa0a6; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
}
.tooltipGraficaEarnings .tt-roic-row {
  display: flex; align-items: center; gap: 6px;
  margin: 3px 0; font-size: 12px; font-family: 'Inter', sans-serif;
}
.tooltipGraficaEarnings .tt-roic-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tooltipGraficaEarnings .tt-roic-label { color: #9aa0a6; font-weight: 500; }
.tooltipGraficaEarnings strong { font-size: 13px; font-weight: 700; color: #202124; }

.user-status-container {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.user-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.9em;
  font-weight: 600;
  background: #eee;
  color: #555;
  border: 1px solid #ddd;
  transition: background 0.3s, color 0.3s;
}
.user-status.online {
  background: #d2fbe4;
  color: #05984c;
  border-color: #41e17b;
}
.user-status.offline {
  background: #fbe2e2;
  color: #ce1d1d;
  border-color: #e15a5a;
}

.contenedorBotonLogin {
    display: flex;
    align-items: center;
    gap: 10px;
}

.botonesAuth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.botonLogin, .botonSignin {
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid var(--color-azul-medio);
}

.botonLogin {
    background-color: var(--color-azul-medio);
    color: white;
}

.botonLogin:hover {
    background-color: var(--color-azul-oscuro);
    border-color: var(--color-azul-oscuro);
    color: white;
}

.botonSignin {
    background-color: transparent;
    color: var(--color-azul-medio);
}

.botonSignin:hover {
    background-color: var(--color-azul-medio);
    color: white;
}




.contenedorLogin i {
    font-size: 28px;
    color: var(--color-azul-medio);
    transition: color 0.3s ease;
}

.contenedorLogin:hover i {
    color: var(--color-azul-oscuro);
}



/* Resultado Busqueda/busqueda.css */
/* Botón hamburguesa (oculto en desktop) */
.menu-hamburguesa {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-azul-medio);
  cursor: pointer;
  padding: 10px;
  z-index: 1101; /* por encima del overlay */
}



/* ===== Bloqueo por premium (blur de contenidos) ===== */

/* Sin sesión → blur (excepto puntuacionTabla — tienen badge dorado) */
body[data-online="0"] [data-lock="premium"]:not(.puntuacionTabla),
body[data-online="0"] .locked-by-presence {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
/* Con sesión pero sin premium → blur (excepto puntuacionTabla) */
body[data-online="1"][data-premium="0"] [data-lock="premium"]:not(.puntuacionTabla),
body[data-online="1"][data-premium="0"] .locked-by-presence {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
/* Premium → sin blur */
body[data-premium="1"] [data-lock="premium"],
body[data-premium="1"] .locked-by-presence {
  filter: none;
  pointer-events: auto;
}

/* ===== Overlay por encima de la gráfica ===== */
.grafica-lock-wrapper { position: relative; width: 100%; }
.grafica-lock-wrapper .avg-lock-img {
  position: absolute;
  inset: 0;
  z-index: 10;          /* por encima del canvas */
  display: none;        /* oculto por defecto */
  pointer-events: none;
}
.grafica-lock-wrapper .avg-lock-img > a { position: absolute; inset: 0; display: block; }
.grafica-lock-wrapper .avg-lock-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}

/* Sin sesión → mostrar candado */
body[data-online="0"] .avg-lock-img {
  display: flex !important;
  pointer-events: auto !important;
}
/* Con sesión pero sin premium → mostrar candado */
body[data-online="1"][data-premium="0"] .avg-lock-img {
  display: flex !important;
  pointer-events: auto !important;
}
/* Premium → ocultar candado */
body[data-premium="1"] .avg-lock-img {
  display: none !important;
  pointer-events: none !important;
}

/* Estado deshabilitado (sin login) para botones de la gráfica */
.botonesTemporalidadGrafica button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.2);
}




/*  === CSS CRÍTICO: blur + overlays por premium ----------------------------------------- */

/* Sin sesión → blur (excepto puntuacionTabla) */
body[data-online="0"] [data-lock="premium"]:not(.puntuacionTabla) {
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}
/* Con sesión pero sin premium → blur (excepto puntuacionTabla) */
body[data-online="1"][data-premium="0"] [data-lock="premium"]:not(.puntuacionTabla) {
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}
/* Premium → sin blur */
body[data-premium="1"] [data-lock="premium"] {
	filter: none;
	pointer-events: auto;
}

/* Wrapper para poder posicionar la imagen por encima del canvas */
.grafica-lock-wrapper {
	position: relative;
}
/* Overlay oculto por defecto */
.avg-lock-img {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: none;
	pointer-events: none;
	border-radius: 50px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avg-lock-img:hover {
	transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.avg-lock-img > a { position: absolute; inset: 0; display: block; }
.avg-lock-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block; border: 0;
}
/* Sin sesión → mostrar candado */
body[data-online="0"] .avg-lock-img {
	display: flex !important;
	pointer-events: auto !important;
}
/* Con sesión pero sin premium → mostrar candado */
body[data-online="1"][data-premium="0"] .avg-lock-img {
	display: flex !important;
	pointer-events: auto !important;
}
/* Premium → ocultar candado */
body[data-premium="1"] .avg-lock-img {
	display: none !important;
	pointer-events: none !important;
}


/* Desk Poner radar de tablas arriba de las tablas para que las tablas tomen el 100% del with  */
@media (max-width: 1185px) {
	.contenedorAbajoPuntuacion {
		flex-direction: column;
		align-items: center;
		margin-top: 0px !important
	}

	/* Forzamos desktop tables y grid 2x2 */
	.tabla-mobile-container{ display:none !important; }
	.contenedorTablaPuntuacion{
		display:grid !important;
		grid-template-columns:repeat(2, minmax(340px, 1fr));
		justify-content: center;
		align-items: center;
		gap:20px; width:100%;
  	}
  .contenedorTablaPuntuacion > table{ width:100% !important; table-layout:auto; margin:0; }
}

/* Desk Poner grafucas de earnings y opinion de analistas arriba de tabla y grafuca ROIC porque ya no caben  */
@media (max-width: 970px) {
	.contenedorRoicYanalystas {
		flex-direction: column-reverse !important;
		margin-top: 40px;
	}

	.contenedorAnalystas {
		flex-direction: row;
		width: 100%;
		gap: 15px;
	}

	.contenedorEarnings {
		margin-top: 0px;
	}

	.contenedorRoic {
		margin-top: 30px;
		width: 100%;
	}

	.contenedorGraficaROIC {
		max-width: 700px;
	}
}



/* < 770px: mantenemos tu acordeón móvil */
@media (max-width: 769px){
  .contenedorAbajoPuntuacion{ display:flex; flex-direction:column; align-items:stretch; }
  .contenedorPuntuacionesCircular{ order:1; width:100%; max-width:100%; margin:0 0 12px; }
  .contenedorDataPuntuacion{ order:2; width:100%; max-width:100%; padding-left:0; padding-right:0; }
  .contenedorTablaPuntuacion{ display:none !important; }
  .tabla-mobile-container{ display:block !important; }
}



/* Desk Top bajar resumen abajo de grafuca y indicador */
@media (max-width: 1290px)  {
	.contenido{
		width: 90%;
		display: grid;
		grid-template-columns: 33% 67%;
		grid-template-areas:
			'identidad         identidad'
			'puntuacionCirculo graficaPrecio'
			'infoGeneral       infoGeneral'
			'contenedorAI	  contenedorAI'
			'ranks             ranks'
			'roicYanalystas    roicYanalystas';
		align-items: center;
		justify-content: center;
		margin-top: 180px;
		max-width: 1350px;
	}

	.infoGeneral {
		width: 100%;
		justify-self: center;
		max-width: 800px;
	}
}

@media (max-width: 1100px) {
	.baraBusqueda {
		width: 340px;
	}
	.busqueda-af-nav .af-nav__link {
		font-size: 13px;
		padding: 7px 8px;
	}
}

@media (max-width: 900px) {
	.baraBusqueda {
		width: 260px;
	}
	.busqueda-af-nav {
		gap: 2px;
	}
	.busqueda-af-nav .af-nav__link {
		font-size: 12px;
		padding: 6px 7px;
	}
}



/* Phone Mode */
@media (max-width: 768px) {
	.seccionFija {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 98%;
		padding-top: 25px;
		position: fixed;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.55);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
	}
	.busqueda-af-nav {
		display: none;
	}
	.arriba {
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}	
		/* Botones de autenticación en móvil */
	.botonesAuth {
		width: 100%;
		display: none;
		justify-content: center;
		margin-top: -8px;
		order: 1;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
	}

	
	.perfilUsuario{
		display: none;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		border-radius: 8px;
		background-color: #f8f9fa;
		box-shadow: 0 1px 4px rgba(0,0,0,0.08);
		transition: all 0.2s ease-in-out;
		cursor: pointer;
		position: absolute;
		top: -13px;
		right: -20px;
		z-index: 15;
	}

	/* Barra de búsqueda en móvil: al lado de los botones auth */
	.homeContainer .baraBusqueda {
		width: calc(100% - 30px);
		max-width: 450px;
		height: 40px;
		margin: 0 auto 0 auto;
		box-sizing: border-box;
		order: 2;
		display: flex;
		margin-top: 40px;
		z-index: 10;
	}
	
	.menu-mobile,
	#menuMobile {
		display: block;         
		position: fixed;
		top: 0;
		right: -85%;
		width: 85%;
		max-width: 360px;
		height: 100vh;
		background: var(--color-fondo);
		box-shadow: -4px 0 16px rgba(0,0,0,0.18);
		padding: 20px;
		overflow-y: auto;
		transition: right 0.3s ease;
		z-index: 1102;
	}
	/* hacer menu deslizante */
	.paginas {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Oculta la barra en Firefox */
		background-color: transparent; /* Quitar fondo gris */
		border-bottom: none; /* Quitar borde inferior */
		padding: 10px 15px; /* Añadir padding para separación */
		gap: 12px; /* Espacio entre burbujas */
		margin-top: 15px;
		transition: transform 0.3s ease, opacity 0.3s ease;
		transform: translateY(0);
		opacity: 1;
		width: 100%;
		z-index: 9;		
	}
	
	/* Estado oculto cuando se hace scroll hacia abajo */
	.paginas.hidden {
		transform: translateY(-100%);
		opacity: 0;
		pointer-events: none;
	}
	.paginas::-webkit-scrollbar {
		display: none; /* Oculta la barra en Chrome/Safari */
	}

	.paginas .elementoNav {
		background-color: white;
		border: 2px solid var(--color-azul-claro);
		border-radius: 20px;
		padding: 8px 8px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		min-width: fit-content;
		box-shadow: 0 2px 8px rgba(84, 140, 146, 0.15);
		transition: all 0.3s ease;
		color: var(--color-azul-medio);
		animation: paginas-scroll-hint 1.2s ease-in-out 0.3s 1 alternate;
	}

	.paginas .elementoNav:hover {
		background-color: var(--color-azul-claro) !important;
		border-color: var(--color-azul-medio) !important;
		color: var(--color-azul-oscuro) !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(84, 140, 146, 0.25);
	}

	.paginas .elementoNavs{
		background-color: var(--color-azul-medio) !important;
		border-color: var(--color-azul-medio) !important;
		color: white !important;
		box-shadow: 0 3px 10px rgba(40, 82, 96, 0.4);
		transform: translateY(-1px);
	}

	@keyframes paginas-scroll-hint {
		0%   { transform: translateX(0); }
		20%  { transform: translateX(-30px); }
		40%  { transform: translateX(0); }
		60%  { transform: translateX(-20px); }
		80%  { transform: translateX(0); }
		100% { transform: translateX(0); }
	}


		/*Contenido*/

		.contenido {
		display: block;
		margin-top: 130px;
		padding: 0 5px;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* Mostrar el botón See More en móvil */
	.see-more-container { display: flex; }

	/* En móvil el contenido colapsable funciona normalmente */
	.collapsible-content {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
		opacity: 0;
		visibility: hidden;
		position: relative;
	}
	.collapsible-content.expanded {
		max-height: 3000px;
		transition: max-height 0.7s ease-in, opacity 0.4s ease-in, visibility 0.4s ease-in;
		opacity: 1;
		visibility: visible;
	}

	/* Botón See More - solo móvil */
	.see-more-container {
    order: 5;
    display: flex;
    justify-content: center;
    margin-top: 30px; /* ✅ Espacio razonable */
    width: 100%;
	}

	.espacioAbajo {
		width: 100%;
		height: 20px;
	}
	.see-more-btn {
		background: linear-gradient(135deg, #548C92 0%, #4a7a7f 100%);
		color: white;
		border: none;
		padding: 12px 30px;
		font-size: 16px;
		font-weight: 600;
		border-radius: 25px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(84, 140, 146, 0.3);
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: 'Inter';
	}
	.see-more-btn:hover {
		background: linear-gradient(135deg, #3b676c 0%, #2f5356 100%);
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(84, 140, 146, 0.4);
	}
	.see-more-btn:active { transform: translateY(0); }
	.see-more-arrow { transition: transform 0.3s ease; font-size: 14px; }
	.see-more-arrow.rotated { transform: rotate(180deg); }

	/* Contenedor colapsable en móvil */
	.collapsible-content { order: 6; width: 100%; min-height: 0; }
	.collapsible-content:not(.expanded) * {
		max-height: 0 !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		overflow: hidden !important;
	}

	.contenedorAbajoPuntuacion { margin-top: 40px; }
	.contenedorRoicYanalystas  { margin-top: 0px !important; margin-bottom: 0px !important;}



	.homeContainer .contenedorLogo { height: 60px; }
	.homeContainer .contenedorLogoEmpresa { height: 100%; }
	.homeContainer .logo::selection { background-color: rgb(200, 200, 200); }
	.homeContainer .arriba .logo { height: 100%; }

	/* Botón de usuario: si lo quieres oculto en móvil, deja 'none'; si lo quieres visible, cámbialo a 'flex' */

	/* Identidad en móvil — estilos en bloque IDENTIDAD */
	.identidad { order: 1; }
	.contenedorAI {
		width: 100%;
		padding: 0 20px;
	}

	.ai-card {
		border-radius: 0 12px 12px 12px;
		padding: 12px 13px 10px;
	}

	.alphaScoreTitulo {
		position: absolute;
		top: 455px;   /* súbelo o bájalo según tu gusto */
		font-size: 18px;
		font-weight: 700;
		pointer-events: none;
		user-select: none;
		z-index: 1000;
		color: #548C92;
	}

	.contenedorCirculoDePuntuacion { order: 2; }
	.infoGeneral { 
    order: 3; 
    margin-top: 30px; 
    padding: 0px 10px;
    align-self: center;
  }
  .nombreInfoGeneral{
    width: 95px;
  }
	.seccionGrafica { order: 4; margin-top: 20px; align-items: center; text-align: center; width: 100%; min-width: 0; }

	.contenedorAbajoPuntuacion {
		margin-top: 40px;
		flex-direction: column;
		align-items: center;
	}
	.contenedorRoicYanalystas { margin-top: 40px; }

	.contenedorLogoEmpresa {
		position: relative;
		margin-bottom: 0;
		z-index: 2;
	}
	.contenedorCirculoDePuntuacion {
		position: static;
		margin: 20px auto 0 auto;
		width: 50%;
		max-width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.contenedorGraficaPuntuacion {
		width: 100%;
		height: 100%;
		padding: 8px;
		border-radius: 50%;
		box-shadow: none !important;
	}
	.contenedorCirculoDePuntuacion .puntuacion {
		font-size: 18px;
		font-weight: 600;
		color: var(--color-azul-medio);
		z-index: 1;
	}

	.contenedorPuntuacionesCircular  {
		max-width: 500px !important;
	}

	.contenedorRoicYanalystas {
		flex-direction: column;
		gap: 0px;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
	/* Roic */
	.contenedorRoic {
		display: none;
		width: 100%;
		max-width: 100%;
		min-width: unset;
	}
	/* Analystas */
	.contenedorAnalystas {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		min-width: unset;
		box-sizing: border-box;
		padding: 15px 35px 35px 35px;
		background-color: var(--color-fondo);
	}
	.contenedorOpinionesAnalystas { background-color: var(--color-fondo); box-shadow: none; }
	.contenedorEarnings          { background-color: var(--color-fondo); box-shadow: none; }

	.contenedorPuntuacionesCircular {
		width: 100%;
		min-width: unset;
		max-width: 100%;
		margin-left: 0;
		order: 1;
		padding: 0px 50px;
	}
	.contenedorDataPuntuacion {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		order: 2;
		padding: 0px 35px 35px 35px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Tablas móviles */
	.tabla-mobile-item {
		display: none;                 /* se activa con .active */
		width: 100% !important; 
		border-collapse: collapse;
		border-radius: 6px;            /* como desktop */
		overflow: hidden;
		font-size: 12px;               /* como desktop */
		background-color: #fff;        /* como desktop */
		box-shadow: 0 8px 16px rgba(84,140,146,0.25), 0 3px 6px rgba(0,0,0,0.08);
		box-sizing: border-box;
		table-layout: fixed;           /* como desktop */

	}

	.tabla-mobile-item th,
	.tabla-mobile-item td {
		padding: 6px 8px;              /* como desktop */
		border-bottom: 1px solid #eee; /* como desktop */
		width: 50%;
		background-color: #fff;
		color: #1a1a1a;
	}

	/* Selector de tablas móvil */
	.tabla-selector-mobile {
		display: block !important;
		width: auto;
		max-width: none;
		margin: 0 0 20px 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		position: relative;
		box-sizing: border-box;
		align-self: flex-start;
	}
	.tabla-mobile-container {
		display: block !important;
		max-width: none;
		margin: 0 30px;
		box-sizing: border-box;
		align-self: center;
	}
	/* Ocultar tablas normales en móvil */
	.contenedorTablaPuntuacion { display: none !important; }

	.tabla-selector-header {
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 30px;
		background: rgba(255, 255, 255, 0.122);
		color: #545454;
		cursor: pointer;
		user-select: none;
		font-weight: 600;
		font-size: 13px;
		border-radius: 25px;
		z-index: 10;
		position: relative;
		transition: all 0.3s ease;
		font-family: 'Inter';
		gap: 4px;
		width: auto;
		min-width: 180px;
		border: 2px solid #afafaf21;
		left: 15px;
	}
	.tabla-selector-header:hover { background: #f8f9fa; transform: translateY(-2px); border-color: #afafaf21; }
	.tabla-selector-header:active { transform: translateY(0); }
	.tabla-selector-arrow { transition: transform 0.3s ease; font-size: 14px; }
	.tabla-selector-arrow.rotated { transform: rotate(180deg); }

	.tabla-selector-options {
		display: none;
		background: white;
		border-top: 1px solid #eee;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		border-radius: 0 0 25px 25px;
		border: 1px solid #ddd;
		border-top: none;
		min-width: 100%;
		width: auto;
	}
	.tabla-selector-options.show { display: block; }

	.tabla-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 20px;
		cursor: pointer;
		transition: background-color 0.2s ease;
		border-bottom: 1px solid #f0f0f0;
		font-size: 14px;
	}
	.tabla-option:hover { background-color: #f8f9fa; }
	.tabla-option:last-child { border-bottom: none; }
	.tabla-option.active { background-color: #e8f4f5; color: #285260; font-weight: 600; }

	/* Tablas móviles activas: mismo look que desktop */
	.tabla-mobile-item.active { display: table; }

	/* Etiquetas (th) como desktop */
	.tabla-mobile-item th {
		background-color: #f5f5f5;
		text-align: left;
		font-weight: 600;
		color: #333;
	}

	/* Valores (td) como desktop: centrados y peso normal */
	.tabla-mobile-item td {
		text-align: center;
		font-weight: 400;
	}

	/* Header (título) igual que desktop */
	.tabla-mobile-item tr:first-child th {
		font-weight: 700;
		font-size: 13px;
		background-color: #eaf2f3;
		text-align: center;
		padding: 8px;
		color: #2b4850;
		letter-spacing: .2px;
	}

	/* Última fila sin borde */
	.tabla-mobile-item tr:last-child td,
	.tabla-mobile-item tr:last-child th { border-bottom: none; }

	/* Puntuación igual que desktop */
	.tabla-mobile-item .puntuacionTabla {
		font-weight: 700;
		color: #222;
		text-align: center;
		font-size: 13px;
	}



	/* Anchos seguros en móvil */
	.contenedorOpinionesAnalystas,
	.contenedorEarnings,
	.contenedorGraficaROIC,
	.contenedorCanvasOpinionesAnalystas,
	.contenedorCanvasEarnings,
	.contenedorCanvasGraficaRoic {
		width: 100%;
		max-width: 100%;
		min-width: unset;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	.contenedorOpinionesAnalystas,
	.contenedorEarnings { padding: 20px 5px; }

	img, canvas { max-width: 100%; height: auto; }


	/* Prevenir scroll horizontal */
	html, body { overflow-x: hidden; max-width: 100vw; position: relative; }
	.homeContainer *, .contenido, .contenido * { max-width: 100vw; box-sizing: border-box; }
}



/* Estado deshabilitado del botón AI */
.botonAI.disabled {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: all !important; /* Mantener eventos para capturar click y redirigir */
  box-shadow: none !important;
}

.botonAI.disabled:hover {
  background-color: #cccccc !important;
  transform: none !important;
}

/* ===== IDENTIDAD DE LA EMPRESA ===== */
.identidad {
  grid-area: identidad;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: var(--color-fondo, #ffffff);
  border-radius: 14px;
  border: 0.5px solid rgba(84, 140, 146, 0.18);
  margin-bottom: 40px;
  gap: 12px;
}

/* Izquierda: Logo + Nombre + Ticker */
.nombreTickerLogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Contenedor logo */
.contenedorLogoEmpresa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 8px;
  background: #f0f4f4;
  border-radius: 10px;
  border: 0.5px solid rgba(84, 140, 146, 0.18);
  flex-shrink: 0;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}

.contenedorLogoEmpresa:hover { opacity: 0.85; }

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

/* Textos: nombre + ticker */
.id-textos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nombreEmpresa {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-azul-oscuro, #285260);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickerEmpresa {
  font-size: 11px;
  font-weight: 700;
  color: #548C92;
  margin: 0;
  padding: 2px 7px;
  background: rgba(84, 140, 146, 0.10);
  border-radius: 5px;
  display: inline-block;
  width: fit-content;
  letter-spacing: 0.04em;
}

/* Derecha: precio + cambio */
.infoPrecio {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* Fila punto + precio */
.precioRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Punto parpadeante */
.liveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #188038;
  animation: livePulse 2s ease-in-out infinite;
}
.liveDot.negativo { background: #d93025; }
.liveDot.neutro   { background: #888; animation: none; }
/* Mercado cerrado: gris y sin parpadeo (pisa positivo/negativo) */
.liveDot.mercado-cerrado { background: #9aa0a6 !important; animation: none !important; }

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(0.65); }
}

.precioAccion {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-azul-oscuro, #285260);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Badge de cambio: flecha · nominal · sep · porcentaje */
.cambios {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
}

.cambios.positivo {
  background: rgba(24, 128, 56, 0.10);
  color: #188038;
}
.cambios.negativo {
  background: rgba(217, 48, 37, 0.10);
  color: #d93025;
}
.cambios.neutro {
  background: rgba(136, 136, 136, 0.10);
  color: #666;
}

.cambioFlecha {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}

.cambioNominal {
  font-weight: 500;
}

.cambioSep {
  opacity: 0.45;
  font-weight: 400;
  margin: 0 1px;
}

.cambioPorcentual {
  font-weight: 700;
}


/* ── MOBILE: dos filas — logo+nombre+ticker arriba, precio+cambio abajo ── */
@media (max-width: 768px) {
  .identidad {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    margin-bottom: 36px;
    gap: 12px;
  }

  .nombreTickerLogo {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .contenedorLogoEmpresa {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .logo {
    width: 100%;
    height: 100%;
  }

  .id-textos {
    gap: 5px;
  }

  .nombreEmpresa {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-azul-oscuro, #285260);
    max-width: 220px;
  }

  .tickerEmpresa {
    font-size: 11px;
  }

  .infoPrecio {
    border-top: 0.5px solid rgba(84, 140, 146, 0.15);
    padding-top: 11px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .precioRow {
    gap: 7px;
  }

  .precioAccion {
    font-size: 24px;
  }

  .cambios {
    font-size: 12px;
  }
}


/* === Identidad sticky en desktop === */
@media (min-width: 769px) {
  .identidad {
    position: sticky;
    top: 180px;
    z-index: 900;
    background-color: var(--color-fondo);
    transition: all 180ms ease;
  }

  /* --- MODO COMPACTO --- */
  .identidad.identidad--compact {
    top: 175px;
    right: 24px;
    left: auto;
    margin-left: 0;
    max-width: 420px;
    box-sizing: border-box;
    padding: 8px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-fondo) 94%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .identidad.identidad--compact .nombreTickerLogo,
  .identidad.identidad--compact .infoPrecio {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .identidad.identidad--compact .nombreEmpresa {
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  .identidad.identidad--compact .tickerEmpresa {
    font-size: 11px;
    white-space: nowrap;
  }

  .identidad.identidad--compact .logo {
    width: 26px;
    height: 26px;
  }

  .identidad.identidad--compact .infoPrecio {
    margin-left: auto;
  }

  .identidad.identidad--compact .nombreEmpresa { display: none; }
}



/* =============================================
   FOOTER / BANNER GLOBAL ALPHA FINANCE
   ============================================= */

/* =============================================
   FOOTER — LIGHT & MODERN
   ============================================= */
.alpha-footer {
  grid-area: footer;
  width: 100%;
  margin-top: 40px;
  background: #F4F9FA;
  border-top: 2px solid var(--color-azul-medio);
  font-size: 0.875rem;
}

.alpha-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Home (logo + texto) */
.alpha-footer__home-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-azul-oscuro);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease;
}
.alpha-footer__home-link:hover { opacity: 0.7; }
.alpha-footer__home-link:hover .alpha-footer__logo { transform: scale(1.08); }

.alpha-footer__logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: transform .2s ease;
}

.alpha-footer__home-text {
  font-size: 0.875rem;
}

/* Navegación central */
.alpha-footer__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.alpha-footer__sep {
  color: var(--color-azul-medio);
  font-size: 0.8rem;
  padding: 0 2px;
  opacity: 0.4;
}

.alpha-footer__link {
  text-decoration: none;
  color: var(--color-azul-medio);
  font-weight: 400;
  font-size: 0.875rem;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.alpha-footer__link:hover {
  color: var(--color-azul-oscuro);
  background: rgba(84,140,146,0.08);
}

/* Iconos sociales */
.alpha-footer__social {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alpha-footer__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-azul-medio);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-azul-medio);
  transition: color 0.15s ease, border-color 0.15s ease,
              background 0.15s ease, transform 0.15s ease;
}
.alpha-footer__icon i { font-size: 0.82rem; }
.alpha-footer__icon:hover {
  color: #ffffff;
  background: var(--color-azul-medio);
  border-color: var(--color-azul-medio);
  transform: translateY(-1px);
}

.footer-logo-link {
  display: flex;
  align-items: center;
}

/* Mobile */
@media (max-width: 600px) {
  .alpha-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    text-align: center;
  }
  .alpha-footer__nav { flex-wrap: wrap; justify-content: center; }
}

/* ===== FIX: Evitar que el último elemento se corte en móvil ===== */

/* Asegurar padding inferior suficiente en el contenido principal */
@media (max-width: 768px) {
  .contenido {
    padding-bottom: 120px !important; /* Espacio extra para el footer + margen de seguridad */
    margin-bottom: 0;
  }

  /* Asegurar que el contenido colapsable también tenga espacio inferior */
  .collapsible-content.expanded {
    padding-bottom: 40px !important;
  }

  /* Agregar padding al último contenedor para que no se corte */
  .contenedorRoicYanalystas {
    margin-bottom: 60px !important;
    padding-bottom: 30px !important;
  }

  /* Asegurar espacio después del contenedor de analistas */
  .contenedorAnalystas {
    margin-bottom: 40px !important;
  }

  /* Footer debe tener margen superior en móvil */
  .alpha-footer {
    margin-top: 40px !important;
  }
}

/* CORRECTO - Una sola definición */
.see-more-container {
    order: 5;
    display: flex;
    justify-content: center;
    margin-top: 30px; /* ✅ Espacio razonable */
    width: 100%;
}


@media (max-width: 768px) {
    /* Reducir padding inferior del contenido */
    .contenido {
        padding-bottom: 40px !important; /* ✅ Era 120px */
        margin-bottom: 0;
    }
    
    /* Reducir espaciado en secciones colapsables */
    .collapsible-content.expanded {
        padding-bottom: 20px !important; /* ✅ Era 40px */
    }
    
    
    .contenedorAnalystas {
        margin-bottom: 20px !important; /* ✅ Era 40px */
    }
    
    /* Footer móvil */
    .alpha-footer {
        margin-top: 30px !important; /* ✅ Era 40px */
    }
}

/* Espaciado entre secciones principales */
.contenedorAbajoPuntuacion {
    grid-area: ranks;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 30px; /* ✅ Era 40px */
}

.contenedorRoicYanalystas {
    grid-area: roicYanalystas;
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-bottom: 0;
    margin-top: 40px; /* ✅ Era 50px */
}

/* =============================================
   FIX: MOSTRAR BOTÓN "SEE MORE" SOLO EN MÓVIL
   ============================================= */

/* Desktop: ocultar el botón See More */
@media (min-width: 769px) {
  .see-more-container {
    display: none !important;
  }
  
  /* Mostrar contenido expandido por defecto en desktop */
  .collapsible-content {
    display: contents !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Móvil: mostrar el botón See More */
@media (max-width: 768px) {
  .see-more-container {
    display: flex !important;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
    order: 5;
  }
  
  /* Contenido colapsable funciona normalmente en móvil */
  .collapsible-content {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
    opacity: 0;
    visibility: hidden;
    position: relative;
  }
  
  .collapsible-content.expanded {
    max-height: 3000px;
    transition: max-height 0.7s ease-in, opacity 0.4s ease-in, visibility 0.4s ease-in;
    opacity: 1;
    visibility: visible;
  }
}

/* =============================================
   FIX: REDUCIR ESPACIO BLANCO ANTES DEL FOOTER
   ============================================= */

@media (max-width: 768px) {
  
  /* Reducir min-height del contenido cuando está expandido */
  .contenido {
    min-height: auto !important;
  }
  
  /* Ajustar padding-bottom del contenido colapsable */
  .collapsible-content.expanded {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  /* Reducir el espacio después de las tablas */
  .insider-transactions,
  .portfolio-section {
    margin-bottom: 10px !important;
  }
  
  /* Asegurar que el footer no tenga margin-top excesivo */
  .alpha-footer {
    margin-top: 10px !important;
  }
  
  /* Ajustar el botón See More para que no ocupe mucho espacio */
  .see-more-container {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* Desktop: también reducir espacios innecesarios */
@media (min-width: 769px) {
  
  .contenido {
    min-height: auto !important;
    padding-bottom: 10px;
  }
  
  .alpha-footer {
    margin-top: 10px !important;
  }
}

/* =============================================
   FIX: ELIMINAR ESPACIO BLANCO ENTRE CONTENIDO Y FOOTER
   ============================================= */

@media (max-width: 768px) {
  
  /* Reducir padding y margin del contenido principal */
  .contenido {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }
  
  /* Reducir espacio del contenido expandido */
  .collapsible-content.expanded {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }

  
  .contenedorAnalystas {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
  }
  
  /* Footer más cerca del contenido */
  .alpha-footer {
    margin-top: 20px !important;
  }
  
  /* Reducir espacio del botón See More */
  .see-more-container {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  
  /* Asegurar que no haya espacios vacíos */
  .espacioAbajo {
    display: none !important;
  }
}

@media (min-width: 769px) {
  
  /* Desktop: reducir padding también */
  .contenido {
    padding-bottom: 30px !important;
  }
  
  .alpha-footer {
    margin-top: 30px !important;
  }
}

.identidadSticky-contenido {
    display: none;
}

/* ── Tarjeta flotante móvil ── */
.identidad.identidad--floating {
  position: fixed !important;
  /* 25px padding-top seccionFija + 40px row logo/perfil + 8px gap + 50px barra búsqueda + 8px gap */
  top: 126px;
  left: 50%;
  transform: translateX(-50%) translateY(0);

  /* Pill compacta */
  width: auto;
  max-width: calc(100vw - 32px);
  overflow: hidden;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 4px 20px rgba(40, 82, 96, 0.12);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.6);

  padding: 6px 14px 6px 6px;
  z-index: 500;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: space-between;

  animation: floatIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes floatIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Logo pill — contenedor circular que recorta el img */
.identidad.identidad--floating .contenedorLogoEmpresa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f9f9;
  border: 1px solid rgba(84,140,146,0.15);
  flex-shrink: 0;
}

.identidad.identidad--floating .logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  border: none;
  display: block;
}

/* Nombre: oculto en móvil */
.identidad.identidad--floating .nombreTickerLogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.identidad.identidad--floating .nombreEmpresa {
  display: none !important;
}

/* Ticker badge */
.identidad.identidad--floating .tickerEmpresa {
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-azul-oscuro);
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  vertical-align: middle;
}

/* Separador */
.identidad.identidad--floating .nombreTickerLogo::after {
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(84,140,146,0.25);
}

/* Bloque precio — empujado a la derecha */
.identidad.identidad--floating .infoPrecio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.identidad.identidad--floating .precioAccion {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-texto-prin);
  white-space: nowrap;
}

.identidad.identidad--floating .cambios {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}

.identidad.identidad--floating .cambios b {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Ocultar cambio nominal en pill — solo mostrar % */
.identidad.identidad--floating .cambioNominal {
  display: none !important;
}

.contenedorCirculoDePuntuacion {
    position: relative;
}


.alphaScoreTitulo {
    position: absolute;
    width: 200px;
    text-align: center;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%); /* Súper estable */
    font-size: 18px;
    font-weight: 700;
    z-index: 5;
    pointer-events: none;
}






/* ============================================
   Tarjeta sticky móvil — ya gestionada arriba
   ============================================ */

/* =========================================
   ESTILOS NUEVOS: CABECERA FLEXIBLE
   ========================================= */

/* Hacemos que la cabecera alinee sus elementos en fila (Título - Botón) */
.aiAnalisisHeader {
    display: flex;
    justify-content: space-between; /* Título izquierda, Botón derecha */
    align-items: center;            /* Centrados verticalmente */
    width: 100%;
    margin-bottom: 15px;            /* Espacio antes del texto del análisis */
    position: relative;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Línea sutil separadora (opcional) */
}

/* El título ya no necesita márgenes extraños */
.aiAnalisisHeader .tituloSeccion {
    margin: 0;
}

/* El contenedor del botón ahora se adapta al tamaño del botón */
#aiButtonContainer {
    width: auto;
    margin: 0;
}

/* Diseño del Botón (Compacto para cabecera) */
.btn-analisis {
    background: linear-gradient(135deg, var(--color-azul-medio) 0%, var(--color-azul-oscuro) 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(84, 140, 146, 0.3);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-analisis:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(84, 140, 146, 0.4);
}

.btn-analisis:disabled {
    background: #bdc3c7;
    cursor: wait;
    transform: none;
    box-shadow: none;
}


/* =============================================
   BOTTOM TAB BAR — MÓVIL
   ============================================= */
@media (max-width: 768px) {

  /* Ocultar la nav horizontal de tabs */
  .seccionFija .paginas {
    display: none !important;
  }

  .menu-hamburguesa {
    display: none !important;
  }

  /* Nav pills ocultos en mobile */
  .busqueda-af-nav {
    display: none;
  }

  /* Section labels y íconos dentro del menu-mobile */
  .menu-mobile-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-azul-medio);
    padding: 16px 16px 6px;
    opacity: 0.7;
  }
  .menu-mobile-item i {
    width: 18px;
    text-align: center;
    margin-right: 8px;
    opacity: 0.7;
  }

  /* Bottom nav bar fijo */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    background: var(--color-fondo);
    border-top: 1px solid rgba(84, 140, 146, 0.18);
    box-shadow: 0 -4px 20px rgba(40, 82, 96, 0.10);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px 8px;
    gap: 3px;
    cursor: pointer;
    border: none;
    background: none;
    border-top: 2px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
    color: var(--color-neutro);
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav__item.activo,
  .bottom-nav__item[aria-current="page"] {
    border-top-color: var(--color-azul-medio);
    color: var(--color-azul-oscuro);
  }

  .bottom-nav__icon {
    font-size: 18px;
    line-height: 1;
  }

  .bottom-nav__label {
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* Drawer del botón "More" */
  .bottom-nav__drawer {
    position: fixed;
    bottom: 58px; /* altura del nav bar */
    left: 0;
    right: 0;
    z-index: 1199;
    background: var(--color-fondo);
    border-top: 0.5px solid rgba(84, 140, 146, 0.2);
    box-shadow: 0 -4px 20px rgba(40, 82, 96, 0.12);
    padding: 10px 16px 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  .bottom-nav__drawer.abierto {
    transform: translateY(0);
  }

  .bottom-nav__drawer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 0.5px solid rgba(84, 140, 146, 0.2);
    background: #f5f9f9;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-azul-medio);
    font-size: 10px;
    font-weight: 500;
  }

  .bottom-nav__drawer-item i {
    font-size: 16px;
  }

  .alpha-footer {
    margin-bottom: 60px !important;
  }
}

/* Ocultar el bottom-nav en desktop */
@media (min-width: 769px) {
  .bottom-nav,
  .bottom-nav__drawer {
    display: none !important;
  }
}


/* ===============================
   Alternancia por estado de sesión
   =============================== */
/* No logeado: mostrar botones, ocultar perfil */
body[data-online="0"] .botonesAuth { display: flex !important; }
body[data-online="0"] .perfilUsuario { display: none !important; }

/* Logeado: ocultar botones, mostrar perfil */
body[data-online="1"] .botonesAuth { display: none !important; }
body[data-online="1"] .perfilUsuario { display: flex !important; }

.perfilUsuario {
  display: none;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: #f8f9fa;
  border: 1px solid transparent;
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.perfilUsuario:hover {
  background: #e6f0f2;
}
.perfilUsuario a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}
.nombreUsuario {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}
.perfilCirculo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-azul-medio);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

/* === Premium gold === */
.perfilUsuario.is-premium {
  background: linear-gradient(135deg, rgba(182,138,58,0.13), rgba(210,178,95,0.06));
  border-color: rgba(182,138,58,0.38);
  box-shadow: 0 2px 10px rgba(182,138,58,0.15);
}
.perfilUsuario.is-premium:hover {
  background: linear-gradient(135deg, rgba(182,138,58,0.20), rgba(210,178,95,0.10));
}
.perfilUsuario.is-premium .perfilCirculo {
  background: linear-gradient(135deg, #B68A3A, #D2B25F);
  box-shadow: 0 0 0 2px rgba(182,138,58,0.22);
}
.perfilUsuario.is-premium .nombreUsuario {
  color: #8A6423;
}

/* =============================================
   AI LOCK — PREMIUM TRIAL BANNER
   ============================================= */

/* Variables doradas premium (alineadas con .is-premium) */
:root {
  --gold-a:    #B68A3A;
  --gold-b:    #D2B25F;
  --gold-c:    #E8C97A;
  --gold-glow: rgba(182, 138, 58, 0.22);
  --gold-bg:   rgba(182, 138, 58, 0.07);
  --gold-border: rgba(182, 138, 58, 0.35);
}

/* Wrapper del lock — reemplaza el viejo .ai-lock-message inline */
#aiLockMessage.ai-lock-message {
  display: none; /* controlado por JS */
  width: 100%;
}

/* Banner principal */
.ai-trial-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(182,138,58,0.10) 0%,
    rgba(210,178,95,0.05) 100%
  );
  border: 1px solid var(--gold-border);
  box-shadow: 0 2px 14px var(--gold-glow);
  position: relative;
  overflow: hidden;
  /* shimmer track */
  animation: trialBannerIn 0.35s ease both;
}

@keyframes trialBannerIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer de fondo */
.ai-trial-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 220, 130, 0.12) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: trialShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes trialShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Ícono / corona */
.ai-trial-banner__crown {
  font-size: 18px;
  color: var(--gold-b);
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px var(--gold-glow));
}

/* Texto */
.ai-trial-banner__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.ai-trial-banner__headline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-a);
}

.ai-trial-banner__sub {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA button */
.ai-trial-banner__btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--gold-a);
  background: linear-gradient(135deg, var(--gold-a) 0%, var(--gold-b) 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px var(--gold-glow), 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ai-trial-banner__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(182,138,58,0.35), 0 2px 6px rgba(0,0,0,0.10);
  filter: brightness(1.08);
}

.ai-trial-banner__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--gold-glow);
}

/* ---- MOBILE ---- */
@media (max-width: 500px) {
  .ai-trial-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .ai-trial-banner__sub {
    white-space: normal;
  }

  .ai-trial-banner__btn {
    width: 100%;
    text-align: center;
  }
}

/* =============================================
   AI TRIAL BANNER — PREMIUM
   ============================================= */
:root {
  --gold-a:    #B68A3A;
  --gold-b:    #D2B25F;
  --gold-c:    #E8C97A;
  --gold-glow: rgba(182, 138, 58, 0.22);
  --gold-bg:   rgba(182, 138, 58, 0.07);
  --gold-border: rgba(182, 138, 58, 0.35);
}

#aiLockMessage.ai-lock-message { display: none; width: 100%; }

.ai-trial-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(182,138,58,0.10) 0%, rgba(210,178,95,0.05) 100%);
  border: 1px solid var(--gold-border);
  box-shadow: 0 2px 14px var(--gold-glow);
  position: relative;
  overflow: hidden;
  animation: trialBannerIn 0.35s ease both;
}
@keyframes trialBannerIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-trial-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,220,130,0.12) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: trialShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes trialShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.ai-trial-banner__crown {
  font-size: 18px;
  color: var(--gold-b);
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px var(--gold-glow));
}
.ai-trial-banner__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ai-trial-banner__headline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-a);
}
.ai-trial-banner__sub {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-trial-banner__btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--gold-a);
  background: linear-gradient(135deg, var(--gold-a) 0%, var(--gold-b) 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px var(--gold-glow), 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ai-trial-banner__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(182,138,58,0.35), 0 2px 6px rgba(0,0,0,0.10);
  filter: brightness(1.08);
}
.ai-trial-banner__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--gold-glow);
}
@media (max-width: 500px) {
  .ai-trial-banner { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .ai-trial-banner__sub { white-space: normal; }
  .ai-trial-banner__btn { width: 100%; text-align: center; }
}

/* =============================================
   PUNTUACION TABLA — BLOQUEO PREMIUM BADGE
   ============================================= */
.puntuacionTabla[data-lock="premium"] { position: relative; }

body[data-online="0"] .puntuacionTabla[data-lock="premium"],
body[data-online="1"][data-premium="0"] .puntuacionTabla[data-lock="premium"] {
  color: transparent !important;
  filter: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
body[data-online="0"] .puntuacionTabla[data-lock="premium"]::before,
body[data-online="1"][data-premium="0"] .puntuacionTabla[data-lock="premium"]::before {
  content: '? / 10';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: linear-gradient(135deg, #B68A3A 0%, #D2B25F 60%, #E8C97A 100%);
  background-size: 200% 100%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 50px;
  padding: 3px 10px;
  box-shadow: 0 2px 8px rgba(182,138,58,0.35), 0 1px 2px rgba(0,0,0,0.10);
  animation: scoreBadgeShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scoreBadgeShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
body[data-online="0"] .puntuacionTabla[data-lock="premium"]::after,
body[data-online="1"][data-premium="0"] .puntuacionTabla[data-lock="premium"]::after {
  content: '\1F512';
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% + 14px);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}
body[data-premium="1"] .puntuacionTabla[data-lock="premium"] {
  color: inherit !important;
  filter: none !important;
  cursor: default !important;
}
body[data-premium="1"] .puntuacionTabla[data-lock="premium"]::before,
body[data-premium="1"] .puntuacionTabla[data-lock="premium"]::after {
  display: none !important;
}
.tabla-option .puntuacionTabla[data-lock="premium"] { font-size: 11px; }

/* =============================================
   MAX BUTTON — BLOQUEO PREMIUM
   ============================================= */

/* =============================================
   MAX BUTTON + SCORE BADGES — PREMIUM TOOLTIP
   ============================================= */

/* Botón MAX bloqueado — misma pill dorada que el badge ?/10 */
#botonMax.max-btn--locked {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  background: linear-gradient(135deg, #B68A3A 0%, #D2B25F 60%, #E8C97A 100%) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 3px 10px !important;
  box-shadow: 0 2px 8px rgba(182,138,58,0.35), 0 1px 2px rgba(0,0,0,0.10) !important;
  animation: scoreBadgeShimmer 3s ease-in-out infinite !important;
  opacity: 1;
}

#botonMax.max-btn--locked:disabled {
  pointer-events: auto !important;
}

/* Tooltip dorado — compartido por MAX y score badges */
.premium-upgrade-tooltip {
  position: fixed;
  z-index: 99999;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: 8px;
  background: linear-gradient(135deg, #B68A3A, #D2B25F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(182,138,58,0.40);
  /* visibility:hidden keeps dimensions for offsetHeight measurement */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.premium-upgrade-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #D2B25F transparent transparent;
}
.premium-upgrade-tooltip--visible {
  visibility: visible;
  opacity: 1;
}


/* =============================================
   RADAR CHART — PREMIUM OVERLAY (Opción B)
   ============================================= */

.contenedorPuntuacionesCircular {
  position: relative;
}

/* Overlay ocupa el mismo espacio que el canvas */
.radar-premium-overlay {
  display: none; /* controlado por JS */
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  animation: radarOverlayIn 0.3s ease both;
}

@keyframes radarOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* El SVG placeholder llena el espacio del canvas */
.radar-placeholder-svg {
  width: 100%;
  height: 100%;
}
/* ═══════════════════════════════════════════════════════════
   SUMMARY — MODERN OVERRIDES
   ═══════════════════════════════════════════════════════════ */

/* ── Info General: modernized table styling (same layout, refined look) ── */
.infoGeneral {
  grid-area: infoGeneral;
  display: flex;
  justify-content: stretch;
  align-self: flex-start;
  gap: 0;
  font-size: 12px;
  color: #2C3E50;
  flex-wrap: nowrap;
  margin-top: 16px;
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(84,140,146,0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(40,82,96,0.06);
}

.infoGeneral1, .infoGeneral2 {
  flex: 1;
  border-collapse: collapse;
  width: 50%;
}

.infoGeneral1 { border-right: 1px solid rgba(84,140,146,0.12); }

.infoGeneral .nombreInfoGeneral {
  font-weight: 600;
  color: #7a9099;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 10px 9px 14px;
  width: 130px;
}

.infoGeneral .valorInfoGeneral {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-azul-oscuro);
  padding: 9px 14px 9px 8px;
  text-align: right;
  white-space: nowrap;
}

.infoGeneral .alrededor {
  border-bottom: 1px solid rgba(84,140,146,0.08);
}
.infoGeneral1 tr:last-child .alrededor,
.infoGeneral2 tr:last-child .alrededor { border-bottom: none; }

.infoGeneral tr:hover { background: rgba(84,140,146,0.04); }

/* ── Temporalidad buttons — pill style ── */
.botonesTemporalidadGrafica button {
  border-radius: 20px !important;
  padding: 5px 13px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}
.botonesTemporalidadGrafica button:hover {
  background-color: rgba(84,140,146,0.1) !important;
  color: var(--color-azul-oscuro) !important;
  border-color: rgba(84,140,146,0.2) !important;
}
.botonActivo {
  background-color: var(--color-azul-medio) !important;
  color: #fff !important;
  border-color: var(--color-azul-medio) !important;
}

/* ── Score cards — modern card treatment ── */
.contenedorTablaPuntuacion {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  justify-content: unset !important;
}

.scoreCard {
  background: #ffffff;
  border: 1px solid rgba(84,140,146,0.15);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(40,82,96,0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}

.scoreCard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(84,140,146,0.1);
}
.scoreCard__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-azul-oscuro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scoreCard__score {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--color-azul-medio) !important;
  background: rgba(84,140,146,0.08);
  border-radius: 8px;
  padding: 2px 10px;
}

.scoreCard__table {
  width: 100% !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  font-size: 12px !important;
  transform: none !important;
}
.scoreCard__table th,
.scoreCard__table td {
  padding: 6px 4px !important;
  border: none !important;
  border-bottom: 1px solid rgba(84,140,146,0.07) !important;
  height: auto !important;
}
.scoreCard__table tr:last-child th,
.scoreCard__table tr:last-child td { border-bottom: none !important; }
.scoreCard__table th {
  background: transparent !important;
  color: #555 !important;
  font-weight: 500 !important;
  text-align: left !important;
}
.scoreCard__table td {
  color: var(--color-azul-oscuro) !important;
  font-weight: 700 !important;
  text-align: right !important;
  background: transparent !important;
}
.scoreCard__table tr:nth-child(odd) { background: rgba(84,140,146,0.03) !important; }

/* ── Sector Benchmark Card ── */
.sectorBenchmark {
  background: linear-gradient(135deg, rgba(40,82,96,0.05) 0%, rgba(84,140,146,0.08) 100%);
  border: 1px solid rgba(84,140,146,0.20);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sectorBenchmark__header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.sectorBenchmark__icon {
  font-size: 10px;
  color: var(--color-azul-medio);
  opacity: 0.8;
}

.sectorBenchmark__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-azul-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sectorBenchmark__name {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-azul-oscuro);
  background: rgba(84,140,146,0.12);
  border-radius: 5px;
  padding: 1px 7px;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.sectorBenchmark__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 6px;
}

.sectorBenchmark__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.65);
  border-radius: 6px;
  padding: 4px 3px;
  gap: 2px;
  border: 1px solid rgba(84,140,146,0.10);
}

.sectorBenchmark__metric {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-azul-medio);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.sectorBenchmark__val {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-azul-oscuro);
  line-height: 1;
}

/* Mobile variant: full-width inside the table row */
.sectorBenchmark--mobile {
  margin: 4px 0;
  border-radius: 8px;
}
.sectorBenchmark__mobileRow td {
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── ROIC + Analysts cards ── */
.contenedorGraficaROIC,
.contenedorOpinionesAnalystas,
.contenedorEarnings {
  border: 1px solid rgba(84,140,146,0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(40,82,96,0.07) !important;
}

.tablaRoic {
  border: 1px solid rgba(84,140,146,0.12) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.tablaRoic tr:first-child th {
  background: var(--color-azul-oscuro) !important;
  color: #fff !important;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .infoGeneral__pills { grid-template-columns: 1fr 1fr; gap: 8px; }
  .contenedorTablaPuntuacion { grid-template-columns: 1fr !important; }
  .scoreCard__table th { font-size: 11px !important; }
}

/* ── Mobile: hide new scoreCards, show original mobile dropdown ── */
@media (max-width: 768px) {
  /* Hide desktop score cards on mobile */
  .contenedorTablaPuntuacion {
    display: none !important;
  }
  /* Show mobile dropdown system */
  .tabla-selector-mobile,
  .tabla-mobile-container {
    display: block !important;
  }
}

/* ── Desktop: hide mobile dropdown, show score cards ── */
@media (min-width: 769px) {
  .tabla-selector-mobile,
  .tabla-mobile-container {
    display: none !important;
  }
  .contenedorTablaPuntuacion {
    display: grid !important;
  }
}

/* ── Mobile dropdown tables — same modern style as scoreCards ── */
@media (max-width: 768px) {

  .tabla-mobile-container {
    width: 100%;
    margin-top: 8px;
  }

  .tabla-mobile-item {
    background: #ffffff !important;
    border: 1px solid rgba(84,140,146,0.15) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 4px 16px rgba(40,82,96,0.07) !important;
    overflow: hidden !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    transform: none !important;
  }

  /* Header row (tituloTabla + score) */
  .tabla-mobile-item tr:first-child th,
  .tabla-mobile-item tr:first-child td {
    background: transparent !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(84,140,146,0.1) !important;
  }
  .tabla-mobile-item tr:first-child th {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-azul-oscuro) !important;
    text-align: left !important;
  }
  .tabla-mobile-item tr:first-child td {
    text-align: right !important;
  }
  .tabla-mobile-item tr:first-child .puntuacionTabla {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--color-azul-medio) !important;
    background: rgba(84,140,146,0.08) !important;
    border-radius: 8px !important;
    padding: 2px 10px !important;
    display: inline-block !important;
  }

  /* Data rows */
  .tabla-mobile-item tr:not(:first-child) th,
  .tabla-mobile-item tr:not(:first-child) td {
    padding: 8px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(84,140,146,0.07) !important;
    height: auto !important;
    background: transparent !important;
  }
  .tabla-mobile-item tr:last-child th,
  .tabla-mobile-item tr:last-child td { border-bottom: none !important; }

  .tabla-mobile-item tr:not(:first-child) th {
    color: #555 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-align: left !important;
    background: transparent !important;
  }
  .tabla-mobile-item tr:not(:first-child) td {
    color: var(--color-azul-oscuro) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: right !important;
  }
  .tabla-mobile-item tr:nth-child(even) { background: rgba(84,140,146,0.03) !important; }
  .tabla-mobile-item tr:hover { background: rgba(84,140,146,0.05) !important; }
}

/* ── Mobile: infoGeneral stack vertically, full width ── */
@media (max-width: 768px) {
  .infoGeneral {
    flex-direction: column !important;
    border-radius: 14px !important;
  }
  .infoGeneral1,
  .infoGeneral2 {
    width: 100% !important;
    flex: unset !important;
  }
  .infoGeneral1 {
    border-right: none !important;
    border-bottom: 1px solid rgba(84,140,146,0.12) !important;
  }
  /* Remove bottom border on last row of table 1 since the card border takes over */
  .infoGeneral1 tr:last-child .alrededor {
    border-bottom: none !important;
  }
  .infoGeneral .nombreInfoGeneral {
    width: 120px !important;
    font-size: 10px !important;
  }
  .infoGeneral .valorInfoGeneral {
    font-size: 13px !important;
  }
}

/* ── ScoreCard progress bar ── */
.scoreCard__header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.scoreCard__bar-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scoreCard__score-val {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--color-azul-oscuro) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 36px;
  white-space: nowrap;
}

.scoreCard__bar {
  flex: 1;
  height: 7px;
  background: rgba(84,140,146,0.12);
  border-radius: 99px;
  overflow: hidden;
}

.scoreCard__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-azul-claro), var(--color-azul-medio));
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* Color shift by score range */
.scoreCard__bar-fill[data-score-level="low"] {
  background: linear-gradient(90deg, #ffb3b3, #d93025);
}
.scoreCard__bar-fill[data-score-level="mid"] {
  background: linear-gradient(90deg, #ffd580, #f4a31a);
}
.scoreCard__bar-fill[data-score-level="high"] {
  background: linear-gradient(90deg, var(--color-azul-claro), var(--color-azul-medio));
}

/* ── Mobile dropdown: progress bar in header row ── */
@media (max-width: 768px) {
  .tabla-mobile-item tr:first-child td {
    width: 55% !important;
    padding: 12px 14px 12px 8px !important;
    vertical-align: middle !important;
  }
  .mobileBar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .mobileBar .scoreCard__score-val {
    min-width: 32px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--color-azul-oscuro) !important;
    white-space: nowrap !important;
  }
  .mobileBar .scoreCard__bar {
    flex: 1 !important;
    height: 6px !important;
  }
}
/* ── Alpha Score CTA clickeable ── */
.alphaScore-circulo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.alphaScore-circulo-link:hover .contenedorGraficaPuntuacion {
  transform: perspective(400px) translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.12) !important;
}

.alphaScore-circulo-link:hover .puntuacion {
  transform: scale(1.12);
}

.alphaScore-circulo-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(84,140,146,0.10);
  border: 1px solid rgba(84,140,146,0.25);
  color: #548C92;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
  pointer-events: none;
}

.alphaScore-circulo-link:hover .alphaScore-circulo-cta {
  background: rgba(84,140,146,0.18);
  border-color: rgba(84,140,146,0.45);
  transform: translateY(-1px);
}

/* ── Fix: puntuacion centrada en el canvas ── */
.contenedorGraficaPuntuacion {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.contenedorCirculoDePuntuacion .puntuacion {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* ── CTA standalone (ya no dentro del link wrapper) ── */
.alphaScore-circulo-cta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 10px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(84,140,146,0.10) !important;
  border: 1px solid rgba(84,140,146,0.25) !important;
  color: #548C92 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.16s, border-color 0.16s, transform 0.16s !important;
  text-decoration: none !important;
}

.alphaScore-circulo-cta:hover {
  background: rgba(84,140,146,0.20) !important;
  border-color: rgba(84,140,146,0.50) !important;
  transform: translateY(-1px) !important;
}

/* Quitar cursor pointer del círculo ya que no es clickeable */
.contenedorGraficaPuntuacion {
  cursor: default !important;
}

/* ── Alpha Score: layout columna, botón abajo centrado ── */
.contenedorCirculoDePuntuacion {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: default !important;
}

.contenedorGraficaPuntuacion {
  cursor: default !important;
  pointer-events: none !important;
}

.alphaScore-circulo-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: rgba(84,140,146,0.10) !important;
  border: 1.5px solid rgba(84,140,146,0.30) !important;
  color: #548C92 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
  width: fit-content !important;
  align-self: center !important;
  position: static !important;
  letter-spacing: 0.01em !important;
}

.alphaScore-circulo-cta:hover {
  background: rgba(84,140,146,0.18) !important;
  border-color: #548C92 !important;
  box-shadow: 0 4px 12px rgba(84,140,146,0.20) !important;
  transform: translateY(-2px) !important;
  color: #285260 !important;
}

.alphaScore-circulo-cta:active {
  transform: translateY(0px) !important;
  box-shadow: none !important;
}

/* ── AlphaAI card: botón baja a segunda línea en mobile ── */
@media (max-width: 600px) {
  .ai-card__header {
    flex-wrap: wrap;
  }
  .ai-card__controls {
    width: 100%;
    margin-top: 10px;
  }
  .ai-card__controls .btn-analisis,
  .ai-card__controls #aiButtonContainer,
  .ai-card__controls #aiLockMessage {
    width: 100%;
    justify-content: center;
  }
  .btn-analisis {
    width: 100%;
    justify-content: center;
  }
}