/* ==========================================
   CHATCITO 2026 - CABECERA FINAL VERDE
   ========================================== */

:root {
  --cch-pink: #df72ac;
  --cch-pink-2: #ea8bc0;
  --cch-green: #1fa463;
  --cch-green-2: #128c7e;
  --cch-ink: #2a1d28;
  --cch-white-soft: rgba(255,255,255,.16);
  --cch-white-soft-2: rgba(255,255,255,.22);
  --cch-dark-active: #2d2030;
}

/* Barra principal */
.kiwi-header {
  box-sizing: border-box !important;
  min-height: 58px !important;
  padding: 0 14px !important;
  background: linear-gradient(180deg, var(--cch-pink-2) 0%, var(--cch-pink) 100%) !important;
  color: var(--cch-green) !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Nombre de sala */
.kiwi-header .kiwi-header-name-container {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
}

.kiwi-header .kiwi-header-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
  color: var(--cch-ink) !important;
  position: relative !important;
}

.kiwi-header .kiwi-header-name::before {
  content: "🏠";
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  flex: 0 0 auto;
  filter: saturate(1.15);
}

.kiwi-header .kiwi-header-name,
.kiwi-header .kiwi-header-name * {
  color: #2d1e29 !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.kiwi-header .kiwi-header-name a,
.kiwi-header .kiwi-header-name span,
.kiwi-header .kiwi-header-name div {
  color: #2d1e29 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ocultar el centro antiguo */
.kiwi-header .kiwi-header-center {
  display: none !important;
}

/* CONTENEDOR DERECHO: unir nativos + salas/radio */
.kiwi-header .kiwi-header-options,
#cc-menu-botones {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Quitamos separación artificial */
#cc-menu-botones {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* Cada icono del grupo */
.kiwi-header-options .kiwi-header-option,
#cc-menu-botones .cc-menu-button {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--cch-green) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.kiwi-header-options .kiwi-header-option:hover,
#cc-menu-botones .cc-menu-button:hover {
  background: var(--cch-white-soft) !important;
}

#cc-menu-botones .cc-menu-button[aria-expanded="true"] {
  background: var(--cch-dark-active) !important;
  color: #ffffff !important;
}

#cc-menu-botones .cc-menu-button[aria-expanded="true"] * {
  color: #ffffff !important;
}

/* Iconos SVG de SALAS y RADIO */
#cc-menu-botones .cc-menu-button svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
}

/* ocultar texto Salas/Radio */
#cc-menu-botones .cc-header-label {
  display: none !important;
}

/* Usuarios con contador */
.kiwi-header-option-nicklist {
  width: auto !important;
  min-width: 54px !important;
  padding: 0 10px !important;
  gap: 7px !important;
}

.kiwi-header-option-nicklist,
.kiwi-header-option-nicklist * {
  color: var(--cch-green) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* Ocultar gráficos viejos */
.kiwi-header-option-settings > i,
.kiwi-header-option-settings > svg,
.kiwi-header-option-about > i,
.kiwi-header-option-about > svg,
.kiwi-header-option-nicklist > i,
.kiwi-header-option-nicklist > svg {
  opacity: 0 !important;
}

/* Máscaras de los iconos nativos */
.kiwi-header-options .kiwi-header-option-settings::after,
.kiwi-header-options .kiwi-header-option-about::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cch-green);
  pointer-events: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.kiwi-header-option-settings::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3M4.9 4.9 7 7m10 10 2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3M4.9 4.9 7 7m10 10 2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kiwi-header-option-about::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7h.01' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7h.01' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Móvil */
@media (max-width: 700px) {
  .kiwi-header {
    min-height: 50px !important;
    padding: 0 8px !important;
    gap: 8px !important;
  }

  .kiwi-header .kiwi-header-name {
    padding: 6px 12px !important;
  }

  .kiwi-header .kiwi-header-name::before {
    font-size: 16px;
  }

  .kiwi-header .kiwi-header-name a,
  .kiwi-header .kiwi-header-name span,
  .kiwi-header .kiwi-header-name div {
    font-size: 14px !important;
  }

  .kiwi-header-options .kiwi-header-option,
  #cc-menu-botones .cc-menu-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .kiwi-header-option-nicklist {
    min-width: 48px !important;
    padding: 0 8px !important;
  }
}

/* CHATCITO 2026 - ICONOS VERDE Y NEGRO */

:root {
  --cc-icon-green: #128c65;
  --cc-icon-dark: #172c27;
}

/* Mantener juntos los controles */
.kiwi-header .kiwi-header-options,
.kiwi-header #cc-menu-botones {
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Salas y radio: mismo estilo que los nativos */
#cc-menu-botones .cc-menu-button {
  color: var(--cc-icon-green) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#cc-menu-botones .cc-menu-button svg {
  color: var(--cc-icon-green) !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.22));
}

#cc-menu-botones .cc-menu-button:hover {
  background: rgba(18,140,101,.13) !important;
  border-color: rgba(18,140,101,.25) !important;
}

#cc-menu-botones .cc-menu-button[aria-expanded="true"] {
  background: #173d34 !important;
  border-color: #128c65 !important;
  color: #ffffff !important;
}

#cc-menu-botones
.cc-menu-button[aria-expanded="true"] svg {
  color: #8df0c1 !important;
}

/* Nativos: iconos verdes y contador oscuro */
.kiwi-header-options
.kiwi-header-option-settings::after,
.kiwi-header-options
.kiwi-header-option-nicklist::after,
.kiwi-header-options
.kiwi-header-option-about::after {
  background-color: var(--cc-icon-green) !important;
}

.kiwi-header-option-nicklist {
  color: var(--cc-icon-dark) !important;
  font-weight: 800 !important;
}