/* Ubuntu: berenjena + naranja Ubuntu, look Yaru redondeado. */
:root[data-estilo="ubuntu"] {
  --acento-2: #e95420;
  --radio: 16px;
  --radio-chico: 12px;
}
:root[data-estilo="ubuntu"][data-tema="claro"] {
  --verde: #77216f;
  --verde-claro: #9c4b93;
  --gris-100: #f7f7f7;
  --gris-200: #e9e9e9;
  --superficie: #ffffff;
  --superficie-alta: #f2eaf1;
  --texto: #2c001e;
  --borde-tarjeta: 1px solid #e6d9e4;
  --sombra: 0 2px 6px rgba(119, 33, 111, .1), 0 10px 26px rgba(233, 84, 32, .10);
  --sombra-alta: 0 18px 44px rgba(119, 33, 111, .2);
}
:root[data-estilo="ubuntu"][data-tema="oscuro"] {
  --verde: #e95420;
  --verde-claro: #ff7847;
  --gris-100: #150014;
  --gris-200: #2c0a29;
  --superficie: #260b26;
  --superficie-alta: #341432;
  --texto: #f7f0f6;
  --borde-tarjeta: 1px solid #3d1a3a;
  --sombra: 0 2px 8px rgba(0, 0, 0, .5), 0 0 26px rgba(233, 84, 32, .14);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .55);
}
:root[data-estilo="ubuntu"] header.topbar {
  background-image: none;
  background: linear-gradient(135deg, var(--verde) 0%, color-mix(in srgb, var(--verde) 70%, black) 100%);
  color: #fff;
  box-shadow: 0 2px 20px color-mix(in srgb, var(--acento-2) 30%, transparent);
  border-bottom: none;
}
:root[data-estilo="ubuntu"] header.topbar select,
:root[data-estilo="ubuntu"] .boton-gestion { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }
:root[data-estilo="ubuntu"] nav.bottomnav a.activo { color: var(--acento-2); }
:root[data-estilo="ubuntu"] .card,
:root[data-estilo="ubuntu"] .tarjeta-partido,
:root[data-estilo="ubuntu"] .tarjeta-rivales { border-radius: 20px; }