/* === Headline Bar === */
.headline {
  background-color: rgba(33, 51, 46, 0.98);
  color: #fff;
  padding: 10px 20px;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === Headline Text === */
.headline-text {
  flex-grow: 1;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === Divider Line Below Headline === */
.headline-line {
  width: 100%;
  height: 1px;
  background-color: #fff;
}

/* === Page Body === */
body {
  margin: 0 auto;
  padding: 0;
  background-color: #f5f5f5;
  padding-top: 70px; /* Ajusta según altura del header */
  max-width: 100%;
  font-family: 'Fira Sans Condensed', sans-serif;
}

/* === Menu Links === */
.menu-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  font-size: 10.5px;
  font-family: 'Fira Sans', sans-serif;
  line-height: 1;
}
.menu-link:hover { color: #25d96a; }
.menu-link .icon { font-size: 12px; line-height: 1; }
.menu-link .label { margin-top: 4px; }

/* === Contenedor centrado === */
.yn-section {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 12px 0;
}

/* === Tarjeta (formulario) === */
.yn-card {
  width: 100%;
  max-width: 414px;   /* 📱 límite ancho iPhone grande */
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 16px;
    margin-bottom: 200px; /* 👈 ajusta a tu gusto */
  box-sizing: border-box;
  font-family: 'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* === Cabecera === */
.yn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.yn-title { font-size: 18px; font-weight: 700; margin: 0; }

/* === Items === */
.q-item {
  padding: 10px 0 12px;
  border-bottom: 1px solid #eee;
}
.q-item:last-child { border-bottom: 0; }
.q-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

/* Inputs */
.q-item input[type="text"],
.q-item input[type="number"],
.q-item input[type="url"],
.q-item textarea,
.q-item select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
}
.q-item input,
.q-item textarea,
.q-item select,
.q-options label,
.q-helper {
  font-family: 'Fira Sans Condensed', sans-serif;
}

/* Checkboxes verticales */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.q-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.q-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Ayuda */
.q-helper {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* Acciones sticky */
.yn-actions {
 
  bottom: 0;
  background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0));
  padding-top: 12px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;   /* 👈 IZQUIERDA */
  gap: 10px;
}
.yn-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.yn-btn.primary {
  background-color: rgba(36, 170, 132, 0.98);
  color: #fff;
}
.yn-btn.primary:hover { background-color: #25d96a; }
.yn-btn.ghost {
  background: transparent;
  border: 1px solid #ddd;
}

/* Mensaje de resultado inline */
.yn-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5fdf8;
  border: 1px solid #ccefdc;
  color: #1f5a3e;
  font-size: 14px;
  display: none;
}

/* === Mensaje centrado en pantalla === */
.center-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f5fdf8;
  border: 1px solid #ccefdc;
  color: #1f5a3e;
  padding: 20px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-size: 18px;
  font-weight: 600;
  z-index: 9999;
  text-align: left;     /* 👈 listas alineadas mejor */
  max-width: 600px;     /* 👈 ancho máximo mayor */
  min-width: 310px;     /* 👈 no se encoja demasiado */
}
.center-popup.error {
  background: #fff6f6;
  border: 1px solid #ffd5d5;
  color: #7a1e1e;
}
.center-popup ul.missing-list {
  text-align: left;
  margin: 8px 0 0 18px;
  padding: 0;
}
.center-popup ul.missing-list li { margin: 4px 0; }

/* Errores de inputs */
.input-error {
  color: #b30000;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 600;
}

/* === Dropdown checklist === */
.dropdown-checklist {
  position: relative;
  width: 100%;
  font-size: 14px;
}
.dropdown-checklist .dropdown-toggle {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.dropdown-checklist .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top: 4px;
  z-index: 1000;
  padding: 8px;
}
.dropdown-checklist .dropdown-menu.open { display: block; }
.dropdown-checklist .dropdown-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}

/* ===== Breakpoints ===== */
@media (min-width: 600px) {
  .yn-card { padding: 18px; }
  .q-label { font-size: 15px; }
  .q-item input, .q-item textarea, .q-item select { font-size: 15px; }
}
@media (min-width: 900px) {
  .q-options { gap: 12px 20px; }
  .q-options label { padding: 7px 10px; }
}
@media (max-width: 380px) {
  .yn-card { padding: 12px; }
  .yn-title { font-size: 16px; }
  .q-label { font-size: 13px; }
  .yn-btn { font-size: 13px; padding: 9px 14px; }
}

/* === Extra: detalles de rate === */
.rate-details { margin-top: 10px; }
.rate-details .meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 0.92rem;
  line-height: 1.35;
}
.rate-details .meta-grid dt {
  font-weight: 600;
  opacity: 0.8;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  font-size: 0.85rem;
  white-space: nowrap;
}.flagname-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.flag-tag-select {
  flex: 0 0 90px;   /* ancho fijo del dropdown */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer
}
select.flag-tag-select {
  cursor: pointer !important;
}
.flagname-row input[type="text"] {
  flex: 1;
}
.flagname-row {
  display: flex;
  gap: 6px;
}

.flag-tag-select {
  flex: 0 0 80px;     /* ancho fijo para el tag */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
    cursor: pointer
}
/* Esto asegura que cada opción también responda con la mano */
.flag-tag-select option {
  cursor: pointer;
}
.flagname-row input[type="text"] {
  flex: 1;            /* ocupa el resto del ancho */
  
}

/* === Grids personalizados === */

/* Stars grid */
.stars-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.star-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.star-btn.active {
  border-color: #f2c200;
  background: #fff9d6;
  color: #a67c00;
  box-shadow: 0 0 4px rgba(242,194,0,0.5);
}

/* Color grid */
/* Grid de colores */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
  gap: 8px;
  margin-top: 6px;
}

/* Botón base */
.color-btn {
  display: flex;
  align-items: center;
  gap: 6px;                      /* separación rectángulo + texto */
  justify-content: flex-start;
  padding: 6px 10px;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;              /* fondo blanco por defecto */
  font-size: 13px;
  font-weight: 600;
  color: #333;
  user-select: none;
  transition: all 0.2s;
}

/* Muestrita de color siempre visible */
.color-btn .swatch {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888;
}

/* Hover */
.color-btn:hover {
  background: #f7f7f7;
}

/* Estado activo → se rellena con su color */
.color-btn.active.red    { background: #d32f2f; color:#fff; border-color:#d32f2f; }
.color-btn.active.blue   { background: #1976d2; color:#fff; border-color:#1976d2; }
.color-btn.active.green  { background: #388e3c; color:#fff; border-color:#388e3c; }
.color-btn.active.yellow { background: #fbc02d; color:#000; border-color:#fbc02d; }
.color-btn.active.orange { background: #f57c00; color:#fff; border-color:#f57c00; }
.color-btn.active.purple { background: #7b1fa2; color:#fff; border-color:#7b1fa2; }
.color-btn.active.black  { background: #212121; color:#fff; border-color:#212121; }
.color-btn.active.white  { background: #f5f5f5; color:#000; border-color:#ccc; }
.color-btn.active.gray   { background: #9e9e9e; color:#fff; border-color:#9e9e9e; }
.color-btn.active.brown  { background: #795548; color:#fff; border-color:#795548; }

/* Items grid */
/* Items grid */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

/* Botón uniforme */
/* Botones de items */
.item-btn {
  padding: 8px;
  border-radius: 6px;
  border: 2px solid #ccc;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  transition: transform 0.1s, border-color 0.2s, background 0.2s;
}

.item-btn:hover {
  transform: scale(1.03);
  background: #f0f0f0;
}

/* Cuando está activo dentro del bloque items */
.form-block.items .item-btn.active {
  border-color: #4CAF50;
  background: #dff6df;   /* verde clarito */
  color: #2e7d32;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}
/* Main color dropdown */
.main-color-select {
  position: relative;
  width: 100%;
}

.main-color-toggle {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-color-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 4px;
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
}.main-color-toggle .swatch {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888;
}

.main-color-menu.open { display: block; }

.main-color-option {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.main-color-option:hover {
  background: #f0f0f0;
}

.main-color-option .swatch {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888;
}/* Bands grid */
/* Grid de bandas */
.bands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.band-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.band-btn:hover {
  background: #f0f0f0;
}

.band-btn.active {
  border-color: #0b6bff;
  background: #e8f0ff;
  color: #0b6bff;
  box-shadow: 0 0 4px rgba(11,107,255,0.5);
}/* Grid para All band colors */
.bands-colors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.band-color-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  user-select: none;
}

.band-color-btn .swatch {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888;
}

.band-color-btn:hover {
  background: #f7f7f7;
}

.band-color-btn.active {
  border-color: #0b6bff;
  background: #e8f0ff;
  color: #0b6bff;
  font-weight: 700;
  box-shadow: 0 0 4px rgba(11,107,255,0.4);
}/* Grids de colores */
.color-grid,
.bands-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.color-btn,
.band-color-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  user-select: none;
  box-sizing: border-box;
}

.color-btn .swatch,
.band-color-btn .swatch {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #888;
  flex-shrink: 0;
}

.color-btn:hover,
.band-color-btn:hover {
  background: #f7f7f7;
}

.color-btn.active,
.band-color-btn.active {
  border-color: #0b6bff;
  background: #e8f0ff;
  color: #0b6bff;
  font-weight: 700;
  box-shadow: 0 0 4px rgba(11,107,255,0.4);
}
/* === Estado activo: botón pintado del color === */
.color-btn.active,
.band-color-btn.active {
 
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* Texto negro en colores claros */
.color-btn.active.yellow,
.color-btn.active.white,
.color-btn.active.gray,
.band-color-btn.active.yellow,
.band-color-btn.active.white,
.band-color-btn.active.gray {
  color: #000;
}.band-selects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.band-select {
  display: flex;
  flex-direction: column;
}

.band-color-select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}@media (min-width: 600px) {
  .band-selects {
    grid-template-columns: repeat(3, 1fr);
  }
}.band-selects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .band-selects {
    grid-template-columns: repeat(3, 1fr);
  }
}

.band-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}/* ==== BLOQUES VISUALES ==== */
/* === Bloques del formulario === */
.form-block {
  margin: 20px 0;
  padding: 14px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Título de cada bloque */
.form-block-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ddd;
  color: #333;
}

/* 🎨 Variantes de color por bloque (opcional) */
.form-block.description      { background: #fff8f8; border-color: #f1c4c4; }
.form-block.items       { background: #f8fff8; border-color: #b7e2b7; }
.form-block.bands       { background: #f8faff; border-color: #b7c8e2; }
.form-block.stars       { background: #fffdf8; border-color: #e2d2b7; }
.form-block.references  { background: #fdf8ff; border-color: #d6b7e2; }
.form-block.colors { background: #f1f1f1; border-color: #ddd; }
.form-block.meta        { background: #fefefe; border-color: #ccc; }


.yn-tabs {
  display: flex;
  gap: 0;
  margin: 0;
  border-bottom: 2px solid #ccc;
}

.yn-tab {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #ccc;
  border-bottom: none; /* 👈 se une con el card */
  border-radius: 12px 12px 0 0;
  background: #f3f3f3;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.yn-tab:not(.active):hover {
  background: #e8e8e8;
}

.yn-tab.active {
  background: #fff; /* mismo fondo que la tarjeta */
  color: #000;
  border-bottom: 2px solid #fff; /* 👈 se funde con el card */
  z-index: 2; /* queda por encima de otras */
}


.page-main-title {
  font-size: 22px;
  font-weight: 700;
  text-align: left;   /* alineado a la izda */
  margin: 4px 0 10px; /* poco espacio arriba y abajo */
  color: #21332e;
  font-family: 'Fira Sans Condensed', sans-serif;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Posición más alta */
  height: 80vh;
  padding-top: 25vh; /* Ajusta la altura desde arriba */
}

.loading-dot {
  font-size: 20px;
  opacity: 0.3;
  transition: opacity 0.5s;
}

.loading-dot.active {
  opacity: 1;
}

.flag-tag-select {
  font-family: 'Fira Sans Condensed', sans-serif;
}

.custom-select {
  position: relative;
  display: inline-block;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 15px;
  cursor: pointer;
}

.custom-select .selected {
  border: 1px solid #ccc;
  padding: 5px 10px;
  background: #fff;
  min-width: 70px;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;        /* 👈 negrita */
  color: #222;
}

.custom-select .selected::after {
  content: " ▼";
  font-size: 11px;
  color: #666;
  font-weight: normal;
}

.custom-select .options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #ccc;
  background: white;
  max-height: 350px;   /* 👈 antes 200px */
  overflow-y: auto;
  z-index: 1000;
  min-width: 180px;
}


.custom-select.open .options {
  display: block;
}

.custom-select .option {
  display: grid;
  grid-template-columns: 45px auto; /* 👈 columna tag fija */
  padding: 5px 12px;                /* 👈 margen izdo */
  white-space: nowrap;
}

.custom-select .option:hover {
  background: #eee;
}

.custom-select .code {
  font-weight: 600;   /* 👈 negrita para tag */
  text-align: left;
  color: #222;
}

.custom-select .name {
  text-align: left;
  color: #444;
}

.combo-wrapper {
  position: relative;
  display: inline-block;
  width: 90px;   /* campo de tag bien estrecho */
  margin-right: 8px;
  font-family: 'Fira Sans Condensed', sans-serif;
}

.combo-input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px 8px;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 600;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.combo-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #ccc;
  background: white;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  border-radius: 6px;
  min-width: 360px;   /* 👈 aún más ancho el menú */
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 14px;
}

.combo-options .option {
  padding: 6px 12px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  align-items: center;
}

.combo-options .option:hover {
  background: #f0f0f0;
}

.combo-options .code {
  font-weight: 600;
  width: 40px;      /* espacio fijo para el tag */
  flex-shrink: 0;
  text-align: left; /* 👈 ahora alineado a la izquierda */
}
.combo-options .name {
  color: #444;
  flex: 1;
}



.year-select-wrapper {
  position: relative;
  width: 100%; /* 👈 mismo ancho que otros campos */
}

.year-display {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.year-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 180px; /* 👈 no mostrar todos de golpe */
  overflow-y: auto;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 50;
  display: none;
}

.year-menu.open {
  display: block;
}

.year-option {
  padding: 6px 10px;
  cursor: pointer;
}
.year-option:hover {
  background: #eee;
}
.year-option.selected {
  background: #c8f7c5; /* verde claro */
}
.q-label .hint {
  font-size: 0.85em;
  color: #777;
  font-weight: normal;
}
.subdivision-dropdown {
  position: relative;
  width: 100%;
}
.subdivision-selected {
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.subdivision-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 20;
}
.subdivision-menu.open {
  display: block;
}
.subdivision-option {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
}
.subdivision-option:hover {
  background: #f2f2f2;
}
.sub-name {
  font-weight: 500;
}
.sub-type {
  color: #777; /* 👈 gris normal */
  font-size: 12px;
}


/* === Font size uniforme en inputs === */
.q-item input[type="text"],
.q-item input[type="number"],
.q-item input[type="url"],
.q-item textarea,
.q-item select,
.combo-input,
.year-display,
.subdivision-selected {
  font-size: 16.1px !important;
}/* === Fuente global para TODO el sitio === */
body, input, textarea, select, button, .yn-card, .headline, .menu-link,
.q-item, .q-label, .combo-input, .combo-options, .year-display, .year-option,
.subdivision-selected, .subdivision-option, .yn-tab, .yn-btn, .pill,
.rate-details, .page-main-title, .custom-select, .custom-select .option {
  font-family: 'Fira Sans Condensed', sans-serif !important;
}

/* Imagen dentro de Rate */
.yn-card .rate-media {
  display: flex;
  justify-content: center;
  margin-bottom: 16px; /* separa de los bloques */
}

.yn-card .rate-img {
  max-width: 200px;   /* 👈 más pequeña */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}.meta-grid .color-btn {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  height: auto;
  min-width: 70px;
}

/* Botones de color dentro de meta-grid (detalles de la bandera) */
.meta-grid .color-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;         /* 👈 mucho más pequeño */
  font-size: 11px;          /* letra más chica */
  border-radius: 4px;
  min-width: unset;         /* no fuerza ancho fijo */
  max-width: 80px;          /* límite opcional */
  height: auto;
  line-height: 1.2;
  white-space: nowrap;
}

.meta-grid .color-btn .swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
}

/* Estado activo (pintado del color) */
.meta-grid .color-btn.active {
  box-shadow: none;
  font-weight: 600;
}
.meta-grid .star-pill {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  background: #f0f0f0;
  font-weight: 600;
  margin-right: 4px;
}.elements-wrap { margin-top: 4px; }
.elements-toggle {
  background: #f6f6f6;
  border: 1px solid #ccc;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  margin-bottom: 6px;
}
.elements-content { margin-top: 6px; }
.element-pill {
  display: inline-block;
  margin: 2px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.element-pill.present { background: #d4f8d4; border: 1px solid #9bd79b; }
.element-pill.absent { background: #f0f0f0; border: 1px solid #ccc; color: #888; }

.meta-grid .star-pill {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  background: #f0f0f0;
  font-weight: 600;
  margin: 2px;
}

.elements-toggle {
  background: #f6f6f6;
  border: 1px solid #ccc;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  margin-bottom: 6px;
}
.elements-content { margin-top: 6px; }
.element-pill {
  display: inline-block;
  margin: 2px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.element-pill.present { background: #d4f8d4; border: 1px solid #9bd79b; }
.element-pill.absent { background: #f0f0f0; border: 1px solid #ccc; color: #888; }

/* que Elements ocupe las dos columnas */
.meta-grid .elements-full {
  grid-column: 1 / -1;
}

/* bloque de present y absent en columnas */
.elements-block {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* ajusta ancho uniforme */
  gap: 6px;
}

.elements-block b {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
}

.element-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-height: 28px;
}

.element-pill.present {
  background: #d4f8d4;
  border: 1px solid #9bd79b;
  color: #084d08;
}
.element-pill.absent {
  background: #f0f0f0;
  border: 1px solid #ccc;
  color: #888;
}
.band-order-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.band-order-pill {
  font-size: 12px;
  justify-content: flex-start !important; /* que se vea el "1st: " delante */
}
.band-order-pill strong {
  margin-right: 4px;
}
.band-order-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.band-order-row {
  display: flex;
  align-items: center;
  gap: 10px; /* siempre mismo espacio entre texto y color */
}

.band-order-pos {
  font-weight: 600;
  color: #333;
  min-width: 60px; /* ancho fijo para alinear todas las filas */
}

.band-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 0;         /* sin fondo, sin padding extra */
  background: none !important;
  border: none !important;
  color: #333;
}

.band-order-pill .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3);
}
.main-color-wrap {
  display: flex;
  align-items: center;
}

.band-order-pill .swatch.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  border: 1px solid rgba(0,0,0,0.3);
}.band-colors-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.band-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 0;
  background: none !important;
  border: none !important;
  color: #333;
}

.band-order-pill .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3);
}.star-colors-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}.flag-ref {
  font-size: 13px;
  margin-top: 6px;
  color: #444;
}

.flag-ref a {
  color: #0b6bff;
  text-decoration: none;
}

.flag-ref a:hover {
  text-decoration: underline;
}.meta-grid {
  display: block;        /* ya no usamos grid de 2 columnas */
}

.meta-grid dt {
  font-weight: 600;
  margin-top: 10px;
  color: #333;
}

.meta-grid dd {
  margin: 4px 0 8px 0;   /* espacio debajo del valor */
  padding-left: 0;       /* sin sangría */
}.meta-grid {
  display: flex;
  flex-direction: column;  /* uno debajo del otro */
  gap: 8px;                /* separación entre bloques */
}

.meta-grid dt {
  font-weight: 600;
  color: #333;
  margin: 0;
}

.meta-grid dd {
  margin: 0 0 8px 0;       /* espacio debajo */
  padding: 0;
}.meta-grid dt::after {
  content: "";
  display: block; /* fuerza salto de línea después de dt */
}/* ============= FLAGDOKU — FIX & OVERRIDES (pegar al final) ============= */

/* 1) Rate details: forzar layout vertical (dt arriba, dd debajo)
   — neutraliza la regla antigua de 2 columnas */
.rate-details .meta-grid,
.meta-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.rate-details .meta-grid { grid-template-columns: none !important; }

.meta-grid dt {
  font-weight: 700;
  color: #333;
  margin: 0;
}
.meta-grid dt::after { content: ""; display: block; }
.meta-grid dd {
  margin: 0 0 12px 0;
  padding: 0;
}

/* 2) Chips/pills pequeños y consistentes dentro de meta-grid */
.pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  font-size: 12px;
  white-space: nowrap;
}

.meta-grid .color-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
  height: auto;
  min-width: 90px;          /* mismo ancho visual */
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
}
.meta-grid .color-btn .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.3);
}

/* Reutiliza tus clases de estado activo por color */
.meta-grid .color-btn.active.red    { background:#d32f2f; color:#fff; border-color:#d32f2f; }
.meta-grid .color-btn.active.blue   { background:#1976d2; color:#fff; border-color:#1976d2; }
.meta-grid .color-btn.active.green  { background:#388e3c; color:#fff; border-color:#388e3c; }
.meta-grid .color-btn.active.yellow { background:#fbc02d; color:#000; border-color:#fbc02d; }
.meta-grid .color-btn.active.orange { background:#f57c00; color:#fff; border-color:#f57c00; }
.meta-grid .color-btn.active.purple { background:#7b1fa2; color:#fff; border-color:#7b1fa2; }
.meta-grid .color-btn.active.black  { background:#212121; color:#fff; border-color:#212121; }
.meta-grid .color-btn.active.white  { background:#f5f5f5; color:#000; border-color:#ccc; }
.meta-grid .color-btn.active.gray   { background:#9e9e9e; color:#fff; border-color:#9e9e9e; }
.meta-grid .color-btn.active.brown  { background:#795548; color:#fff; border-color:#795548; }

/* Arcoíris para "Similar Distribution" (main color = equal) */
.meta-grid .color-btn .swatch.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  border: 1px solid rgba(0,0,0,.3);
}

/* 3) Main/Band/Star colors agrupados con el mismo estilo */
.main-color-wrap,
.band-colors-wrap,
.star-colors-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 4) Band order — mismas separaciones y SIN fondo en la “pill” */
.band-order-list { display: flex; flex-direction: column; gap: 6px; }

/* Fila con columnas fijas: etiqueta (1st/Middle/Last) + chip color */
.band-order-row {
  display: grid;
  grid-template-columns: 60px auto; /* mismo espacio entre “1st:” y el color que entre “Last:” y el color */
  align-items: center;
  column-gap: 10px;
}

.band-order-pos {
  font-weight: 700;
  color: #333;
}

.band-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;                     /* sin fondo ni padding */
  background: none !important;
  border: none !important;
  color: inherit;
}

.band-order-pill .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.3);
}

/* 5) Elements — dos columnas (Present / Not present) con botones igual ancho */
.elements-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.elements-col-title {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  margin-bottom: 4px;
}
.elements-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap: 6px;
}
.element-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;             /* mismo ancho */
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}
.element-pill.present {
  background: #d4f8d4;
  border: 1px solid #9bd79b;
  color: #084d08;
}
.element-pill.absent {
  background: #f0f0f0;
  border: 1px solid #ccc;
  color: #888;
}

/* 6) Wiki link con el mismo tono que el resto de valores */
.meta-grid dd a {
  color: #0b6bff;
  text-decoration: none;
  font-weight: 600;
}
.meta-grid dd a:hover { text-decoration: underline; }

/* 7) Imagen en Rate: pequeña y separada */
.yn-card .rate-media {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.yn-card .rate-img {
  max-width: 200px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
 
 
}:root{
  /* altura del header fijo que ya tienes */
  --header-h: 70px; /* ajústalo si tu header mide otra cosa */
  --sticky-top: var(--header-h);
}

/* contenedor que scrollea: nada de overflow oculto */
.yn-card, .rate-wrap { overflow: visible; }

/* ===== Barra de acciones: sticky, acorde a la marca ===== */
.rate-actions {
  position: sticky;                  /* siempre visible al hacer scroll */
  top: var(--sticky-top);            /* justo debajo del header fijo */
  z-index: 1002;                     /* por encima de imágenes */
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;

  background: linear-gradient(
    180deg,
    rgba(33,51,46,0.96),
    rgba(33,51,46,0.92)
  ); /* verde oscuro, acorde al header */
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Asegura que no quede “sólo un borde” visible */
.rate-actions::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ===== Botones: más atractivos y consistentes ===== */
.yn-btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Hover/active/focus accesibles */
.yn-btn:hover   { transform: translateY(-2px); }
.yn-btn:active  { transform: translateY(0) scale(.98); }
.yn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,217,106,.35), 0 6px 16px rgba(0,0,0,.18);
}

/* 👍 Sí (verde acento de tu marca) */
.yn-btn.primary {
  color: #0c1b16;
  background: linear-gradient(145deg, #25d96a, #21c35f);
  border: 1px solid rgba(12,27,22,.15);
}

/* 👎 No (rojo elegante, sin estridencias) */
.yn-btn.danger {
  color: #fff;
  background: linear-gradient(145deg, #ef4444, #dc2626);
  border: 1px solid rgba(0,0,0,.15);
}

/* ⏭️ Skip (neutro visible) */
.yn-btn.ghost {
  color: #eaf7f1;
  background: linear-gradient(145deg, #3a4a46, #2b3a36);
  border: 1px solid rgba(255,255,255,.12);
}

/* Iconos un poco más grandes si usas emoji */
.yn-btn .icon { font-size: 18px; line-height: 1; }

/* Versión compacta en móviles */
@media (max-width: 560px){
  .rate-actions { gap: 10px; padding: 8px 10px; }
  .yn-btn { padding: 10px 14px; font-size: 15px; border-radius: 12px; }
}/* ========= BUTTONS — ELEMENTS STYLE ========= */
:root{
  --btn-radius: 12px;
  --btn-font: 600;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;

  --c-text:#1f2937;        /* slate-800 */
  --c-border:#d1d5db;      /* gray-300 */
  --c-border-hover:#cbd5e1;/* slate-300 */
  --c-bg:#ffffff;
  --c-bg-hover:#f8fafc;    /* slate-50 */

  --c-primary:#0ea5e9;     /* sky-500 */
  --c-primary-h:#0284c7;   /* sky-600 */
  --c-danger:#ef4444;      /* red-500 */
  --c-danger-h:#dc2626;    /* red-600 */
  --c-neutral:#64748b;     /* slate-500 */
  --c-neutral-h:#475569;   /* slate-600 */

  --header-h: 70px;        /* altura de tu header fijo */
}

/* base para TODOS los .yn-btn */
.yn-btn{
  appearance: none;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: var(--btn-font);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* sin animaciones extra ni efectos */
.yn-btn:hover{
  background: var(--c-bg-hover);
  border-color: var(--c-border-hover);
}
.yn-btn:active{
  background: #eef2f7;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.yn-btn:focus-visible{
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* variantes */
.yn-btn.primary{
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.yn-btn.primary:hover{ background: var(--c-primary-h); border-color: var(--c-primary-h); }

.yn-btn.danger{
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.yn-btn.danger:hover{ background: var(--c-danger-h); border-color: var(--c-danger-h); }

.yn-btn.ghost{
  background: var(--c-bg);
  color: var(--c-text);
  border-color: var(--c-border);
}
.yn-btn.ghost:hover{
  background: var(--c-bg-hover);
  border-color: var(--c-border-hover);
}

/* tamaños */
.yn-btn.btn-lg{ padding: 12px 18px; font-size: 16px; }
.yn-btn.btn-sm{ padding: 8px 12px; font-size: 14px; }

/* ícono (si usas emoji o svgs a la izquierda) */
.yn-btn .icon{ font-size: 18px; line-height: 0; }

/* desactiva por completo cualquier ripple previo que haya quedado */
.yn-btn::before{ content: none !important; }

/* ======= RATE BAR (sticky, sobria) ======= */
.rate-actions{
  position: sticky;
  top: var(--header-h);
  z-index: 1003;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  margin-bottom: 12px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
 
 
  background: #f9fafb;      /* color clarito */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
 
}

/* rate buttons más grandes y consistentes */
.rate-actions .yn-btn{
  min-width: 120px;
  justify-content: center;
}
@media (max-width: 480px){
  .rate-actions .yn-btn{ min-width: 0; padding: 10px 12px; }
}

/* si en algún momento añadiste .yn-fab, neutralízalo */
.yn-fab, .fab-green, .fab-red, .fab-neutral{
  all: unset;
}
:root{
  --btn-radius: 12px;
  --btn-font: 600;
  --btn-pad-y: 10px;
  --btn-pad-x: 14px;

  --c-text:#1f2937;        
  --c-border:#d1d5db;      
  --c-border-hover:#cbd5e1;
  --c-bg:#ffffff;
  --c-bg-hover:#f8fafc;

  --c-primary:#0ea5e9;     /* azul → lo dejamos para otros botones */
  --c-primary-h:#0284c7;

  --c-success:#22c55e;     /* ✅ verde */
  --c-success-h:#16a34a;

  --c-danger:#ef4444;      
  --c-danger-h:#dc2626;    

  --c-neutral:#64748b;     
  --c-neutral-h:#475569;

  --header-h: 70px;
}

/* base .yn-btn igual que antes … */

/* SUCCESS (para YES) */
.yn-btn.success{
  background: var(--c-success);
  border-color: var(--c-success);
  color: #fff;
}
.yn-btn.success:hover{
  background: var(--c-success-h);
  border-color: var(--c-success-h);
}/* Forzar colores de rating por ID */
#rate-yes{
  background:#22c55e !important;  /* verde */
  border-color:#22c55e !important;
  color:#fff !important;
}
#rate-yes:hover{
  background:#16a34a !important;
  border-color:#16a34a !important;
}

#rate-no{
  background:#ef4444 !important;  /* rojo */
  border-color:#ef4444 !important;
  color:#fff !important;
}
#rate-no:hover{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
}

#rate-skip{
  background:#ffffff !important;  /* neutro */
  border-color:#cbd5e1 !important;
  color:#0f172a !important;
}
#rate-skip:hover{
  background:#f8fafc !important;
  border-color:#94a3b8 !important;
}.yn-btn.primary {
  background-color: rgba(36, 170, 132, 0.98);
  color: #fff;
}


/* ===== NEW: pending state + netbar ===== */
.yn-btn.pending{
  position: relative;
  pointer-events: none;
  opacity: .95;
}
.yn-btn.pending .label{ visibility: hidden; }

/* spinner minimalista usando currentColor */
.yn-btn.pending::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:18px; height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: btnspin .7s linear infinite;
}
@keyframes btnspin{ to{ transform: rotate(360deg); } }

/* barra de red (netbar) bajo la rate-actions */
.rate-actions{
  position: sticky; /* ya lo tienes; asegura stacking */
  --net:#94a3b8;    /* color por defecto (neutral) */
}
.rate-actions .netbar{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: rgba(0,0,0,.06);
  overflow:hidden;
  opacity:0;
  transition: opacity .15s ease;
}
.rate-actions .netbar.active{ opacity:1; }
.rate-actions .netbar i{
  display:block;
  height:100%;
  width:34%;
  background: var(--net);
  animation: indet 1.05s linear infinite;
}
@keyframes indet{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(260%);  }
}

/* Opcional: cursor deshabilitado para los otros botones */
.yn-btn:disabled{ opacity:.6; cursor:not-allowed; }


:root{
  --pastel-bg: #D6E6F5;   /* azul pastel uniforme */
  --pastel-brd: #D6E6F5;  /* mismo color que el fondo */
}

.rate-card .rate-body{
  background: var(--pastel-bg);
  border-top: 1px solid var(--pastel-brd);
  box-shadow: none; /* quita la sombra que podía dar contraste */
}

.rate-card .rate-details{
  background: rgba(255,255,255,0.35); /* ligerísimo overlay, opcional */
  border-radius: 10px;
  padding-top: 6px;
}
/* ===== Folder Tabs con gris inactivo ===== */
.yn-tabs {
  display: flex !important;
  margin-bottom: 0 !important;
  border-bottom: 2px solid #ccc !important;
}

.yn-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 18px !important;
  border: 2px solid #ccc !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: background 0.2s, color 0.2s !important;
}

/* Inactivas → gris */
.yn-tab:not(.active) {
  background: #e5e7eb !important; /* gris claro */
  color: #374151 !important;      /* gris oscuro */
}

/* Activas → colores vivos */
.yn-tab.send.active {
  background: #22c55e !important;  /* verde */
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}
.yn-tab.rate.active {
  background: #3b82f6 !important;  /* azul */
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}
.yn-tab.your.active {
  background: #a855f7 !important;  /* morado */
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}

/* Hover en inactivas */
.yn-tab:not(.active):hover {
  background: #d1d5db !important; /* gris un poco más oscuro */
}

/* ===== Barra de rating (No / Skip / Yes) ===== */
.rate-actions {
  position: sticky;
  top: var(--header-h);      /* debajo del header fijo */
  z-index: 1003;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: #f9fafb;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
:root{
  --header-h: 70px; /* ajusta si tu header mide otra cosa */
}

/* Asegura que ningún ancestro corte el sticky */
.yn-section, .yn-card, .yn-pane, .rate-wrap {
  overflow: visible !important;
}

/* Barra pegajosa y por encima de todo */
.rate-actions{
  position: -webkit-sticky !important; /* Safari iOS */
  position: sticky !important;
  top: calc(var(--header-h) + 8px) !important; /* debajo del header fijo */
  z-index: 2001 !important;

  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;

  background: #f9fafb;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  border-radius: 12px;
}

/* Botones (colores ya forzados) */
#rate-yes{
  background:#22c55e !important; border-color:#22c55e !important; color:#fff !important;
}
#rate-yes:hover{ background:#16a34a !important; border-color:#16a34a !important; }

#rate-no{
  background:#ef4444 !important; border-color:#ef4444 !important; color:#fff !important;
}
#rate-no:hover{ background:#dc2626 !important; border-color:#dc2626 !important; }

#rate-skip{
  background:#e5e7eb !important; border-color:#d1d5db !important; color:#374151 !important;
}
#rate-skip:hover{ background:#d1d5db !important; border-color:#9ca3af !important; }:root{
  --header-h: 70px; /* ajusta si tu header fijo mide otra cosa */
}

/* Que ningún ancestro corte el sticky */
.yn-section, .yn-card, .yn-pane, .rate-wrap { overflow: visible !important; }

/* Sticky nativo (cuando funcione) */
.rate-actions{
  position: -webkit-sticky !important; /* iOS Safari */
  position: sticky !important;
  top: calc(var(--header-h) + 8px) !important;
  z-index: 2001 !important;
}

/* Fallback cuando activemos modo fixed */
.rate-actions.is-fixed{
  position: fixed !important;
  top: calc(var(--header-h) + 8px) !important;
  z-index: 2002 !important;

  /* se alinea y dimensiona por JS para encajar con la tarjeta */
  left: 0 !important;                 /* el JS ajusta left con px */
  transform: none !important;
  width: auto !important;

  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Colores de los 3 botones (ya forzados) */
#rate-yes{
  background:#22c55e !important; border-color:#22c55e !important; color:#fff !important;
}
#rate-yes:hover{ background:#16a34a !important; border-color:#16a34a !important; }

#rate-no{
  background:#ef4444 !important; border-color:#ef4444 !important; color:#fff !important;
}
#rate-no:hover{ background:#dc2626 !important; border-color:#dc2626 !important; }

#rate-skip{
  background:#e5e7eb !important; border-color:#cbd5e1 !important; color:#374151 !important;
}
#rate-skip:hover{ background:#d1d5db !important; border-color:#9ca3af !important; }


:root{
  --pastel-bg: #ffffff;   /* blanco */
  --pastel-brd: #ffffff;
}

.rate-card .rate-body{
  background: var(--pastel-bg) !important;
  border-top: 1px solid #eee !important; /* un gris neutro si quieres división sutil */
  box-shadow: none !important;
}

.rate-card .rate-details{
  background: transparent !important; /* sin overlay raro */
  border-radius: 0;
  padding-top: 6px;
}/* === RATE BAR (barra sticky distinta) === */
.rate-actions {
  position: sticky;
  top: var(--header-h, 70px); /* justo debajo del header */
  z-index: 1003;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;

  background: #8795a3;             /* gris muy claro */
  border-top: 2px solid #e2e8f0;   /* gris medio */
  border-bottom: 2px solid #e2e8f0;
}

/* === Botones con otra forma === */
.rate-actions .yn-btn {
  flex: 1;                       /* todos ocupan lo mismo */
  justify-content: center;
  padding: 14px 0;
  border-radius: 8px;            /* rectangular con esquinas suaves */
  font-size: 15px;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease;
}

/* efecto al presionar */
.rate-actions .yn-btn:active {
  transform: scale(0.96);
}

/* === Colores por acción === */
#rate-no {
  background: #fee2e2;   /* rojo claro */
  color: #991b1b;
}
#rate-no:hover {
  background: #fecaca;
}

#rate-skip {
  background: #e2e8f0;   /* gris neutro */
  color: #334155;
}
#rate-skip:hover {
  background: #cbd5e1;
}

#rate-yes {
  background: #dcfce7;   /* verde claro */
  color: #166534;
}
#rate-yes:hover {
  background: #bbf7d0;
}
/* === RATE BAR (barra sticky distinta) === */
.rate-actions {
  position: sticky;
  top: var(--header-h, 70px); /* justo debajo del header */
  z-index: 1003;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;

  background: #f1f5f9;             /* gris muy claro */
  border-top: 2px solid #e2e8f0;   /* gris medio */
  border-bottom: 2px solid #e2e8f0;
}

/* === Botones con otra forma === */
.rate-actions .yn-btn {
  flex: 1;                       /* todos ocupan lo mismo */
  justify-content: center;
  padding: 14px 0;
  border-radius: 8px;            /* rectangular con esquinas suaves */
  font-size: 15px;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease;
}

/* efecto al presionar */
.rate-actions .yn-btn:active {
  transform: scale(0.96);
}

/* === Colores por acción === */
#rate-no {
  background: #fee2e2;   /* rojo claro */
  color: #991b1b;
}
#rate-no:hover {
  background: #fecaca;
}

#rate-skip {
  background: #e2e8f0;   /* gris neutro */
  color: #334155;
}
#rate-skip:hover {
  background: #cbd5e1;
}

#rate-yes {
  background: #dcfce7;   /* verde claro */
  color: #166534;
}
#rate-yes:hover {
  background: #bbf7d0;
}
/* Estado activo WHITE más destacado */
.color-btn.active.white,
.band-color-btn.active.white,
.meta-grid .color-btn.active.white {
  background: #e2e4ddc0 !important;   /* blanco puro */
  color: #000 !important;
  border: 1.5px solid #000 !important; /* borde negro fuerte */
 
}



.meta-grid {
  display: grid;
  grid-template-columns: 140px 1fr; /* 1ª columna fija, 2ª ocupa resto */
  column-gap: 8px;
  row-gap: 4px;
}
.meta-grid dt {
  grid-column: 1; /* fuerza en la primera columna */
  font-weight: 600;
  margin: 0;
}
.meta-grid dd {
  grid-column: 2; /* fuerza en la segunda columna */
  margin: 0;
}/* Flag colors (más grueso que el 600 global) */
.meta-grid dt.is-flag-colors,
.meta-grid dt.is-flag-colors::before,
.meta-grid dt.is-flag-colors::after{
  font-weight: 800 !important;
}

.meta-grid {
  display: grid;
  grid-template-columns: 140px 1fr; /* 1ª columna fija, 2ª ocupa resto */
  column-gap: 8px;
  row-gap: 4px;
}
.meta-grid dt {
  grid-column: 1; /* fuerza en la primera columna */
  font-weight: 600;
  margin: 0;
}
.meta-grid dd {
  grid-column: 2; /* fuerza en la segunda columna */
  margin: 0;
}.meta-grid dt {
  font-weight: 700 !important; /* fuerza negrita */
  color: #000000 !important;      /* fuerza color negro */
}.meta-grid dt,
.meta-grid dd {
  font-weight: 700 !important; /* ambos en negrita */
  color: #000 !important;      /* ambos en negro */
  margin: 0;
}.flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.flag-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform .2s;
}
.flag-card:hover {
  transform: scale(1.03);
}
.flag-thumb {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: #fafafa;
}
.flag-title {
  padding: 6px;
  font-size: 14px;
  font-weight: 600;
}.flag-counter {
  font-size: 13px;
  color: #444;
  margin: 6px 0 8px;
}.flag-card {
  border-radius: 16px;  /* 👈 bordes redondeados */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flag-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
.flag-card.voted-yes {
  background: #e6f8ec;   /* pastel green */
  border: 2px solid #3cb371; /* borde verde */
  border-radius: 12px;
}

.flag-card.voted-no {
  background: #fdeaea;   /* pastel red */
  border: 2px solid #dc143c; /* borde rojo */
  border-radius: 12px;
}


.rate-img.sticky {
  position: fixed;
  top: 70px;
  right: 10px;
  width: 120px;
  height: 84px;
  object-fit: fill;
  border-radius: 8px;
  border: 1px solid #ccc;
  z-index: 9999;
  cursor: zoom-in;
}
.rate-img.sticky.zoomed {
  height: 250px;
  width: auto;
  max-width: 90vw;
}

/* Botón XS para barras dentro de las cards */
.yn-btn.btn-xs{
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 8px;
}
@media (max-width: 380px){
  .yn-btn.btn-xs{
    padding: 6px 8px;
    font-size: 12px;
  }
}
/* Pink en grids de colores */
.color-btn.active.pink {
  background: #e91e63;   /* rosa fuerte */
  color: #fff;
  border-color: #e91e63;
}
.band-color-btn.active.pink {
  background: #e91e63;
  color: #fff;
  border-color: #e91e63;
}

/* Pink dentro de meta-grid */
.meta-grid .color-btn.active.pink {
  background: #e91e63;
  color: #fff;
  border-color: #e91e63;
}