/* components.css — GameBrief.pro — Comparador de Ciudades Gemelas + fallback tables */

.comparator-instructions{
  background:#fff;border:1px solid #ddd6c4;border-radius:var(--radius);
  padding:20px 24px;margin-bottom:24px;
}
.comparator-instructions ol{padding-left:1.2em}

.comparator{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid #ddd6c4;
}
.comparator-head{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:#fff;padding:12px 16px;border-bottom:1px solid #ddd6c4;
}
.decade-indicator{
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-18);
}
.decade-indicator .decade-num{font-variant-numeric:tabular-nums}
.sync-toggle{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--vina);color:#fff;border-radius:999px;padding:.5em 1.1em;
  font-weight:700;font-size:var(--fs-14);border:0;cursor:pointer;
}
.sync-toggle[aria-pressed="false"]{background:var(--neutral)}
.sync-toggle .dot{width:.6em;height:.6em;border-radius:50%;background:#fff;display:inline-block}

.comparator-body{
  display:flex;flex-direction:column;
}
@media (min-width:720px){
  .comparator-body{flex-direction:row;position:relative}
  .comparator-body::after{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='40' viewBox='0 0 6 40'><path d='M3 0 Q0 5 3 10 T3 20 T3 30 T3 40' fill='none' stroke='%235B6B63' stroke-width='1.5'/></svg>");
    background-repeat:repeat-y;pointer-events:none;
  }
}

.city-column{
  flex:1 1 50%;max-height:70vh;overflow-y:auto;scroll-behavior:smooth;
  padding:16px;
}
@media (prefers-reduced-motion:reduce){.city-column{scroll-behavior:auto}}
.city-column--valpo{background:var(--valpo-dark);color:var(--text-inverse)}
.city-column--vina{background:var(--vina-dark);color:var(--text-inverse)}
.city-column ul{list-style:none;margin:0;padding:0}

.decade-slot{
  min-height:96px;display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.15);
  padding:14px 4px;scroll-margin-top:10px;
}
.decade-slot .decade-label{
  font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.06em;opacity:.75;margin-bottom:.4em;
  font-variant-numeric:tabular-nums;
}
.fact-card{border-left:4px solid transparent;padding-left:10px}
.fact-card--valpo{border-left-color:#E7A46A}
.fact-card--vina{border-left-color:#F2C289}
.fact-card .city-tag{
  display:inline-block;width:.7em;height:.7em;margin-right:.4em;border-radius:2px;
}
.city-column--valpo .city-tag{background:#E7A46A}
.city-column--vina .city-tag{background:#F2C289}
.fact-card h3{color:var(--text-inverse);font-size:var(--fs-16);margin-bottom:.3em}
.fact-card p{color:var(--text-inverse);font-size:var(--fs-14);max-width:none;margin-bottom:.4em}
.fact-card--unverified{border-left-style:dashed}
.card-empty{opacity:.6;font-style:italic;font-size:var(--fs-14)}
.source-note{font-size:var(--fs-12);opacity:.7}

.badge-verify{
  display:inline-flex;align-items:center;gap:.3em;
  background:var(--warn);color:#fff;font-size:var(--fs-12);font-weight:700;
  border-radius:999px;padding:.1em .55em;margin-bottom:.3em;
}
.badge-verify::before{content:"⚠";font-size:.9em}

.deep-link-highlight{background:#E7A46A55}

/* Compact tabs (<720px) */
.compact-tabs{display:none}
@media (max-width:719px){
  .compact-tabs{display:flex;border-bottom:1px solid #ddd6c4}
  .compact-tabs [role="tab"]{
    flex:1;padding:14px;background:#fff;border:0;font-weight:700;font-size:var(--fs-14);cursor:pointer;
    border-bottom:3px solid transparent;
  }
  .compact-tabs [role="tab"][aria-selected="true"].tab-valpo{border-bottom-color:var(--valpo);color:var(--valpo)}
  .compact-tabs [role="tab"][aria-selected="true"].tab-vina{border-bottom-color:var(--vina);color:var(--vina)}
  .city-column{max-height:none}
}

/* fallback static tables (no-js, and permanent duplicate on comparator page) */
.fallback-tables{margin-top:32px}
.fallback-table{width:100%;border-collapse:collapse;margin-bottom:32px;font-size:var(--fs-14)}
.fallback-table caption{
  font-family:var(--font-head);font-size:var(--fs-22);text-align:left;margin-bottom:.5em;font-weight:600;
}
.fallback-table th,.fallback-table td{
  border:1px solid #ddd6c4;padding:10px 12px;text-align:left;vertical-align:top;
}
.fallback-table thead th{background:var(--valpo);color:#fff}
.fallback-table.table-vina thead th{background:var(--vina)}
.fallback-table td.decade-col{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* decade teaser cards on other pages */
.decade-teaser{
  display:flex;gap:12px;flex-wrap:wrap;margin:20px 0;
}
.decade-teaser a{
  display:inline-block;background:var(--valpo);color:#fff;border-radius:999px;
  padding:.5em 1.1em;text-decoration:none;font-weight:700;font-size:var(--fs-14);
}
.decade-teaser a:hover{background:var(--valpo-dark)}
.decade-teaser a.tag-vina{background:var(--vina)}
.decade-teaser a.tag-vina:hover{background:var(--vina-dark)}