@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Colores inspirados en el afiche */
  --orange: #EE5D49;               /* bloques titulares */
  --ink-90: #222222;               /* texto fuerte */
  --ink-80: #3A3A3A;
  --ink-70: #575757;
  --ink-20: rgba(0,0,0,.20);
  --ink-15: rgba(0,0,0,.15);
  --ink-10: rgba(0,0,0,.10);

  --paper-0:  #ecd3d3;             /* blanco tarjetas */
  --paper-1:  #F5EFE7;             /* beige suave (fondo afiche) */
  --paper-2:  #d4bea5;             /* variante */
  --panel:    #FBFBFB;             /* panel claro */
  --logo-swatch: #96a5bd;
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
}

/* Fondo general tipo afiche (beige suave hacia blanco) */
.bg-page{
  background:
    radial-gradient(1200px 600px at 100% 50%, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(140deg, var(--paper-1) 0%, #F7F4F0 50%, #FFFFFF 100%);
}

.bg-header{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 100%);
  border: 1px solid var(--ink-10);
}
.bg-footer{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 100%);
  border: 1px solid var(--ink-10);
}
.bg-panel{
  background: var(--panel);
}

.title-ink{ color: var(--ink-90); }

/* ===== Tooltip (mantiene estética original, claro sobre fondo claro) ===== */
.tooltip{
  position:absolute;
  pointer-events:none;
  background: #1F2937EE;             /* pizarra oscura translúcida */
  color: #FFF;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  font-size: 0.875rem;
}

/* ===== Scrollbar oculta para contenedores horizontales ===== */
.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

/* ===== Tarjetas suaves / “soft shadow” ===== */
.shadow-soft{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(4px);
}

/* ===== Cápsula Total ===== */
.pill-total{
  display:flex; align-items:center; gap:.5rem;
  padding: .6rem 1rem;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--ink-15);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.pill-kicker{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink-70);
}
.pill-number{
  font-size: clamp(1.15rem, 1.5vw, 1.6rem);
  font-weight: 700;
  color: var(--ink-90);
}

/* ===== Badge superior del segundo gráfico ===== */
.badge-soft{
  display:inline-block;
  padding: .4rem .8rem;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--ink-10);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* ===== Botones ===== */
.btn{ border:1px solid var(--ink-15); background:#FFFFFF; color:var(--ink-80); }
.btn:hover{ background:#FFF2EE; border-color: rgba(238,93,73,.45); color: var(--ink-90); }
.btn:active{ transform: translateY(1px); }

.chip{
  padding: .55rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
}
.chip--primary{
  background: var(--orange);
  border-color: transparent;
  color: #FFFFFF;
}
.dimension-btn.active{
  background: var(--orange) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(238,93,73,.28);
}

/* ===== Botones redondos de control ===== */
.btn-round{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:9999px;
  border:1px solid var(--ink-15);
  background:#FFFFFF; color: var(--ink-80);
  transition: all .2s ease;
}
.btn-round:hover{ background:#FFF2EE; border-color: rgba(238,93,73,.45); color: var(--ink-90); }
.btn-round.play{
  background: var(--orange); color:#FFF; border-color: transparent;
}
.btn-round.play:hover{ filter: brightness(1.05); }

/* ===== Ejes de los SVG (texto oscuro sobre fondo claro) ===== */
#centralChart text, #bottomChart text{ fill: var(--ink-80) !important; font-weight: 500; }
#centralChart .domain, #bottomChart .domain,
#centralChart .tick line, #bottomChart .tick line{ stroke: rgba(0,0,0,.25); }

/* ===== Barras (solo efectos hover; colores vienen del JS) ===== */
.bar-segment{ transition: filter .2s ease, stroke .2s ease; cursor: pointer; }
.bar-segment:hover{ filter: brightness(1.06); stroke: #1F2937; stroke-width: .8; }

/* ===== Hitos (rojo-anaranjado del afiche) ===== */
.milestone-line{
  stroke: var(--orange);
  stroke-width: 5;
  stroke-dasharray: 5 5;
  opacity: 1;
}
.milestone-label{
  fill: var(--orange);
  font-size: 15px; font-weight: 700; text-anchor: middle;
}

/* ===== Labels sobre barras ===== */
.bar-label{
  font-size: 14px;
  fill: var(--ink-90);
  text-anchor: middle;
  font-weight: 700;
  pointer-events: none;
}

/* Contenedor individual del logo (usa las clases que ya tienes en el HTML) */
.icon-container{
  display:flex; align-items:center; justify-content:center;
  width: 3rem; height: 3rem;           /* w-12 h-12 equivalentes */
  padding: 6px;
  background: var(--logo-swatch);      /* <- aquí se hace visible el logo blanco */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 2px 6px rgba(0,0,0,.06);
  transition: transform .2s ease, filter .2s ease;
}
.icon-container:hover{
  transform: scale(1.06);
  filter: none;
}

/* Asegura legibilidad de trazos blancos finos */
.icon-container img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
}

/* === Tamaño mayor para los logos del carrusel superior === */
#ttIcons {              /* sobrescribe h-16 de Tailwind */
  height: 5.25rem;      /* antes ~4rem; sube la tira */
}

#ttIcons .icon-container{
  width: 3.5rem;        /* antes 3rem aprox (w-12) */
  height: 4.5rem;       /* idem (h-12) */
  padding: 8px;         /* un poco más de respiración */
  border-radius: 12px;  /* suaviza el bloque */
}

#ttIcons .icon-container img{
  max-width: 120%;
  max-height: 120%;
  object-fit: contain;
}

/* Opcional: en pantallas chicas, no exagerar el tamaño */
@media (max-width: 720px){
  #ttIcons { height: 4.5rem; }
  #ttIcons .icon-container{ width: 3.8rem; height: 3.8rem; }
}