:root {
  --ink: #161010;
  --capy: #e58a3a;
  --choc: #58231f;
  --mint: #8fe58f;
  --mug: #3b3f9e;
  --tag: #c9514d;
  --pencil: #f3d33a;
  --wood: #eadfc8;
  --paper: #fffdf8;
  --muted: #6b5b52;
  --card-bg: var(--paper);
  --border-color: var(--ink);
}

[data-theme="dark"] {
  --ink: #f3f3f3;
  --choc: #2d1412;
  --wood: #181616;
  --paper: #242020;
  --muted: #a3958d;
  --card-bg: #2a2525;
  --border-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f3f3f3;
    --choc: #2d1412;
    --wood: #181616;
    --paper: #242020;
    --muted: #a3958d;
    --card-bg: #2a2525;
    --border-color: #000000;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.6 "Atkinson Hyperlegible", system-ui, sans-serif;
  background: var(--wood);
  background-image: linear-gradient(rgba(128, 128, 128, 0.08) 2px, transparent 2px),
                    linear-gradient(90deg, rgba(128, 128, 128, 0.08) 2px, transparent 2px);
  background-size: 96px 96px;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3 { font-family: Fredoka, "Trebuchet MS", sans-serif; line-height: 1.1; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }
a { color: var(--mug); font-weight: 700; }
:focus-visible { outline: 4px solid var(--pencil); outline-offset: 2px; }

main { max-width: 1040px; margin: 0 auto; padding: 28px 20px 56px; }
small { color: var(--muted); }

/* Header & Navegación */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 4px solid var(--border-color);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
nav a { text-decoration: none; color: var(--ink); transition: color 0.2s; }
nav a:hover { text-decoration: underline wavy var(--capy); }

.brand { display: flex; align-items: center; gap: 12px; font: 700 1.35rem Fredoka, sans-serif; margin-right: 12px; }
.brand img { width: 44px; height: 44px; border: 3px solid var(--border-color); border-radius: 50%; object-fit: cover; background: var(--capy); }
.spacer { flex: 1; }

.card {
  background: var(--card-bg);
  border: 3px solid var(--border-color);
  border-radius: 20px 24px 18px 22px;
  padding: 22px 24px;
  margin: 16px 0;
  box-shadow: 6px 6px 0 var(--border-color);
  position: relative;
}
.card.choc { background: var(--choc); color: #fff; }
.card.choc a { color: var(--pencil); }

.btn {
  display: inline-block;
  background: var(--capy);
  color: #161010;
  font: 700 1rem Fredoka, sans-serif;
  border: 3px solid var(--border-color);
  border-radius: 14px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--border-color);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border-color); }
.btn.gray { background: #fff; color: #161010; }
.btn.red { background: var(--tag); color: #fff; }
.btn.green { background: var(--mint); color: #161010; }
.btn.blue { background: var(--mug); color: #fff; }

.theme-toggle {
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.tag { display: inline-block; padding: 2px 10px; border: 2px solid var(--border-color); border-radius: 999px; font: 600 .85rem Fredoka, sans-serif; background: #fff; color: #161010; }
.tag.ok { background: var(--mint); }
.tag.warn { background: var(--pencil); }

.nametag { display: inline-block; background: var(--tag); color: #fff; font: 700 1.1rem "Comic Sans MS", cursive; border: 3px solid var(--border-color); border-radius: 6px; padding: 2px 14px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--border-color); }
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; padding: 20px 0 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.portrait { position: relative; justify-self: center; max-width: 380px; width: 100%; }
.portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 5px solid var(--border-color); border-radius: 46% 54% 50% 50%/52% 46% 54% 48%; box-shadow: 10px 10px 0 var(--border-color); background: var(--capy); }
.portrait .nametag { position: absolute; right: -6px; bottom: 18px; font-size: 1.3rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.plan .price { font: 700 2.4rem Fredoka, sans-serif; }
.plan .price small { font-size: 1rem; }
.plan.top { background: var(--pencil); color: #161010; }
.plan.top::after { content: attr(data-badge); position: absolute; top: -16px; right: 14px; background: var(--tag); color: #fff; border: 3px solid var(--border-color); border-radius: 8px; padding: 0 10px; font: 700 .85rem Fredoka, sans-serif; transform: rotate(3deg); }

.feat { list-style: none; padding: 0; margin: 8px 0; }
.feat li { padding: 5px 0 5px 32px; position: relative; }
.feat li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border: 2px solid var(--border-color); border-radius: 50%; background: var(--mint); color: #161010; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }

.opt { position: relative; display: flex; flex-direction: column; gap: 4px; border: 3px solid var(--border-color); border-radius: 16px; padding: 14px; background: var(--card-bg); cursor: pointer; margin: 0; transition: transform 0.1s; }
.opt input { position: absolute; opacity: 0; }
.opt:has(input:checked) { background: var(--pencil); color: #161010; box-shadow: 4px 4px 0 var(--border-color); transform: translateY(-2px); }

.opt:has(input:focus-visible) { outline: 4px solid var(--pencil); outline-offset: 3px; }
.row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ico { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-color); flex: none; }
.feature-img { display: block; max-width: 100%; height: auto; max-height: 320px; object-fit: contain; border: 3px solid var(--border-color); border-radius: 12px; margin-top: 12px; }
.lang-switch { font: 700 .9rem Fredoka, sans-serif; }
.lang-switch a[aria-current="true"] { text-decoration: underline wavy var(--capy); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border-color); vertical-align: middle; }

footer { border-top: 4px solid var(--border-color); background: var(--paper); padding: 22px; text-align: center; margin-top: 40px; }
footer p { margin: 6px 0; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  nav { flex-direction: column; align-items: flex-start; }
  .spacer { display: none; }
}

/* ==========================================
   FUNCIONES: filas horizontales + galería
   ========================================== */
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; margin: 0 0 28px; }

.features { display: flex; flex-direction: column; gap: 44px; margin-top: 12px; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: center;
  background: var(--card-bg);
  border: 3px solid var(--border-color);
  border-radius: 24px 28px 22px 26px;
  box-shadow: 8px 8px 0 var(--border-color);
  padding: 30px;
  position: relative;
}
.feature:nth-child(even) .gallery, .feature:nth-child(even) .ft-media { order: -1; }          /* alterna izquierda / derecha */
.feature.no-media { grid-template-columns: minmax(0, 1fr); }

/* --- Texto --- */
.ft-text { min-width: 0; }
.ft-num {
  display: inline-block;
  font: 700 .95rem Fredoka, sans-serif;
  background: var(--pencil);
  color: #161010;
  border: 2px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 12px;
  margin-bottom: 10px;
  transform: rotate(-3deg);
}
.ft-title { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 .6em; }
.ft-body { font-size: 1.04rem; line-height: 1.75; overflow-wrap: anywhere; }
.ft-body > :first-child { margin-top: 0; }
.ft-body > :last-child { margin-bottom: 0; }
.ft-body p { margin: 0 0 1.1em; }
.ft-body strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(243, 211, 58, .55) 62%); }
.ft-body code { background: rgba(128, 128, 128, .18); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.ft-body hr { border: 0; border-top: 3px dashed var(--border-color); opacity: .35; margin: 1.4em 0; }
.ft-h { font: 700 1.2rem Fredoka, sans-serif; margin: 1.5em 0 .5em; color: var(--capy); display: flex; align-items: center; gap: 10px; }
.ft-h::before { content: ""; width: 22px; height: 4px; border-radius: 4px; background: currentColor; }
.ft-body ul, .ft-body ol { margin: 0 0 1.1em; padding: 0; list-style: none; counter-reset: n; }
.ft-body li { position: relative; padding: 4px 0 4px 34px; }
.ft-body ul li::before {
  content: "✓"; position: absolute; left: 0; top: 6px; width: 22px; height: 22px;
  border: 2px solid var(--border-color); border-radius: 50%; background: var(--mint); color: #161010;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
.ft-body ol li { counter-increment: n; }
.ft-body ol li::before {
  content: counter(n); position: absolute; left: 0; top: 6px; width: 22px; height: 22px;
  border: 2px solid var(--border-color); border-radius: 6px; background: var(--capy); color: #161010;
  display: grid; place-items: center; font: 700 .8rem Fredoka, sans-serif;
}
.ft-note {
  margin: 0 0 1.1em; padding: 12px 16px;
  background: var(--pencil); color: #161010;
  border: 3px solid var(--border-color); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--border-color); font-weight: 700;
}

/* --- Galería horizontal --- */
.gallery {
  position: relative;
  border: 3px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--border-color);
  background: var(--wood);
  overflow: hidden;
  min-width: 0;
}
.g-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.g-track::-webkit-scrollbar { display: none; }
.g-track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  scroll-snap-align: center;
  cursor: zoom-in;
  background: var(--card-bg);
  display: block;
}
.g-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--border-color); background: var(--capy); color: #161010;
  font: 700 1.6rem/1 Fredoka, sans-serif; cursor: pointer; padding: 0 0 4px;
  box-shadow: 2px 2px 0 var(--border-color); display: grid; place-items: center;
  transition: transform .1s;
}
.g-btn:hover { transform: translateY(-50%) scale(1.08); }
.g-btn.prev { left: 10px; }
.g-btn.next { right: 10px; }
.g-count {
  position: absolute; top: 10px; right: 10px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--border-color); border-radius: 999px;
  font: 600 .8rem Fredoka, sans-serif; padding: 1px 10px;
}
.g-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.g-dots button {
  pointer-events: auto; width: 12px; height: 12px; padding: 0; border-radius: 50%;
  border: 2px solid var(--border-color); background: var(--paper); cursor: pointer;
}
.g-dots button.on { background: var(--capy); transform: scale(1.25); }

/* --- Ampliar imagen --- */
.lightbox { border: 0; background: transparent; padding: 0; max-width: 94vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox img { display: block; max-width: 94vw; max-height: 92vh; border: 4px solid #161010; border-radius: 14px; background: var(--paper); cursor: zoom-out; }

/* --- Formulario del dueño --- */
.owner-form input[type="text"], .owner-form textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 3px solid var(--border-color); border-radius: 12px;
  background: var(--paper); color: var(--ink);
}
.owner-form textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.fmt-help { margin: 0 0 14px; }
.fmt-help summary { cursor: pointer; font-weight: 700; }
.fmt-help small { color: #e8d9d4; }
.fmt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.fmt-grid code { background: rgba(255, 255, 255, .12); border-radius: 8px; padding: 4px 8px; font-size: .88rem; }
.feat-prev { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.feat-prev img { width: 84px; height: 64px; object-fit: cover; border: 2px solid #fff; border-radius: 8px; }

@media (max-width: 820px) {
  .feature, .feature.no-media { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 22px; box-shadow: 5px 5px 0 var(--border-color); }
  .feature:nth-child(even) .gallery, .feature:nth-child(even) .ft-media { order: 0; }
}

/* --- Edición (solo dueño) --- */
.edit-box { grid-column: 1 / -1; order: 3; border-top: 3px dashed var(--border-color); padding-top: 14px; margin-top: 4px; }
.edit-box > summary { list-style: none; display: inline-block; cursor: pointer; }
.edit-box > summary::-webkit-details-marker { display: none; }
.edit-box[open] > summary { margin-bottom: 14px; }
.edit-box .owner-form { max-width: 760px; }
.edit-imgs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.edit-img { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: .85rem; cursor: pointer; }
.edit-img img { width: 120px; height: 84px; object-fit: cover; border: 3px solid var(--border-color); border-radius: 10px; background: var(--paper); }
.edit-img:has(input:checked) img { opacity: .35; outline: 3px solid var(--tag); }
.edit-img:has(input:checked) span { color: var(--tag); font-weight: 700; }

/* --- Suscripción en "Soporte y pagos" --- */
.sub-card { background: var(--card-bg); }
.sub-days { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 12px; }
.sub-days .num { font: 700 clamp(3rem, 9vw, 4.6rem)/1 Fredoka, sans-serif; color: var(--capy); }
.sub-days .lbl { font: 600 1.2rem Fredoka, sans-serif; color: var(--muted); }
.bar { height: 18px; border: 3px solid var(--border-color); border-radius: 999px; background: var(--wood); overflow: hidden; margin-bottom: 14px; }
.bar > span { display: block; height: 100%; background: var(--mint); border-right: 3px solid var(--border-color); min-width: 4px; }
.sub-meta { line-height: 1.9; }

.refund-blocked { background: var(--wood); border: 2px dashed var(--border-color); border-radius: 12px; padding: 10px 14px; margin: 10px 0 0; }

/* ==========================================
   CUENTA REGRESIVA EN VIVO (fichas giratorias)
   ========================================== */
.cd { margin: 6px 0 16px; }
.cd-tiles { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.cd-tile {
  flex: 0 1 112px; min-width: 0; text-align: center;
  background: var(--card-bg); color: var(--ink);
  border: 3px solid var(--border-color); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--border-color);
  padding: 10px 6px 8px; perspective: 500px;
}
.cd-tile[data-u="d"] { background: var(--capy); color: #161010; }
.cd-num {
  position: relative; display: block;
  font: 700 clamp(2rem, 8vw, 3.6rem)/1.05 Fredoka, "Trebuchet MS", sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cd-num::after {            /* línea de bisagra, como un tablero de fichas */
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%;
  height: 3px; background: var(--border-color); opacity: .35;
}
.cd-num.tick { animation: cd-flip .38s ease-in-out; }
.cd-lbl { display: block; margin-top: 4px; font: 700 .72rem Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.cd-sep { font: 700 clamp(1.6rem, 5vw, 2.4rem) Fredoka, sans-serif; margin-bottom: 18px; animation: cd-blink 1s steps(2, start) infinite; }
.cd-bar { height: 14px; margin-top: 14px; border: 3px solid var(--border-color); border-radius: 999px; background: var(--wood); overflow: hidden; }
.cd-bar span { display: block; height: 100%; width: 100%; min-width: 4px; background: var(--mint); border-right: 3px solid var(--border-color); transition: width 1s linear; }
.cd.nobar .cd-bar { display: none; }

.cd.warn .cd-tile[data-u="d"] { background: var(--pencil); }
.cd.warn .cd-bar span { background: var(--pencil); }
.cd.crit .cd-tile { background: var(--tag); color: #fff; }
.cd.crit .cd-tile[data-u="s"] .cd-num { animation: cd-pulse 1s ease-in-out infinite; }
.cd.crit .cd-bar span { background: var(--tag); }
.cd.done .cd-tile { opacity: .55; filter: grayscale(.6); }
.cd.done .cd-sep { animation: none; }

.cd.sm { margin: 10px 0 4px; }
.cd.sm .cd-tile { flex-basis: 70px; padding: 6px 4px 5px; border-width: 2px; border-radius: 11px; box-shadow: 3px 3px 0 var(--border-color); }
.cd.sm .cd-num { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.cd.sm .cd-lbl { font-size: .6rem; margin-top: 2px; }
.cd.sm .cd-sep { font-size: 1.2rem; margin-bottom: 12px; }
.cd.sm .cd-bar { height: 10px; border-width: 2px; margin-top: 10px; }

@keyframes cd-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-88deg); opacity: .4; } 51% { transform: rotateX(88deg); opacity: .4; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes cd-blink { 50% { opacity: .15; } }
@keyframes cd-pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .cd-num.tick, .cd-sep, .cd.crit .cd-tile[data-u="s"] .cd-num { animation: none; }
  .cd-bar span { transition: none; }
}

/* ==========================================
   GALERÍA con mensajes + edición
   ========================================== */
.g-stage { position: relative; }
.g-slide { flex: 0 0 100%; min-width: 0; margin: 0; position: relative; scroll-snap-align: center; }
.g-slide img { width: 100%; }
.g-cap {                    /* "mensajito" sobre la imagen, estilo etiqueta */
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--border-color); border-radius: 12px 14px 12px 4px;
  padding: 6px 12px; box-shadow: 3px 3px 0 var(--border-color);
  font: 600 .92rem/1.35 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.g-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 3px solid var(--border-color); background: var(--card-bg); }
.g-foot .g-dots { position: static; display: flex; gap: 7px; pointer-events: auto; }
.g-foot .g-count { position: static; background: transparent; border: 0; padding: 0; color: var(--muted); }

.lightbox { overflow: visible; }
.lightbox img { border-radius: 14px 14px 0 0; }
.lb-cap { margin: 0; padding: 10px 16px; text-align: center; font-weight: 700; background: var(--paper); color: var(--ink); border: 4px solid #161010; border-top: 0; border-radius: 0 0 14px 14px; }

.edit-imgs { flex-direction: column; gap: 14px; }
.edit-img-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cap-fields { flex: 1 1 260px; display: grid; gap: 6px; min-width: 0; }
.cap-field { display: flex; align-items: center; gap: 8px; margin: 0; }
.cap-chip { flex: none; font: 700 .75rem Fredoka, sans-serif; background: var(--pencil); color: #161010; border: 2px solid var(--border-color); border-radius: 6px; padding: 0 7px; }
.owner-form .cap-field input[type="text"] { flex: 1; width: auto; min-width: 0; padding: 7px 10px; }
.cap-rows { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.cap-row { display: flex; align-items: center; gap: 12px; }
.cap-row > img { width: 96px; height: 68px; object-fit: cover; border: 2px solid #fff; border-radius: 8px; flex: none; }

@media (max-width: 520px) {
  .cd-tiles { gap: 4px; }
  .cd-tile { padding: 8px 3px 6px; border-radius: 12px; box-shadow: 3px 3px 0 var(--border-color); }
  .cd-lbl { letter-spacing: .06em; font-size: .62rem; }
}

/* ==========================================================
   PANEL DE CONTROL: menú lateral, servidores, ajustes, animaciones
   ========================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
nav { view-transition-name: topnav; position: sticky; top: 0; z-index: 50; }
.side { view-transition-name: side; }

#topbar { position: fixed; top: 0; left: 0; height: 5px; width: 0; z-index: 999; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--capy), var(--pencil), var(--mint)); transition: opacity .25s; }
html.nav-loading #topbar { opacity: 1; animation: topbar 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes topbar { to { width: 92%; } }

.page { min-width: 0; animation: page-in .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
.reveal { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.card, .btn, .opt, .tag { transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, background-color .2s; }
.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--border-color); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 var(--border-color); }
.btn.sm { padding: 4px 12px; font-size: .85rem; }
.btn.busy { opacity: .6; pointer-events: none; }

/* ---- Layout con menú lateral ---- */
.side-h { margin: 14px 8px 4px; font: 700 .72rem Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.side-h:first-child { margin-top: 4px; }
.side-servers { display: flex; flex-direction: column; gap: 3px; }
.side-srv .sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-srv .gold { font-style: normal; color: var(--pencil); text-shadow: 0 0 0 var(--border-color), 1px 1px 0 #161010; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.3) rotate(15deg); } }
.side-empty { padding: 6px 10px; }

/* ---- Iconos de servidor ---- */
.sicon { flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); background: var(--paper); display: inline-grid; place-items: center; }
.sicon.xs { width: 30px; height: 30px; border-width: 2px; }
.sicon.md { width: 46px; height: 46px; }
.sicon.lg { width: 66px; height: 66px; }
.sicon.xl { width: 104px; height: 104px; border-width: 4px; box-shadow: 4px 4px 0 var(--border-color); }
.sicon.ph { background: hsl(var(--h, 30) 70% 58%); color: #161010; font: 700 1rem Fredoka, sans-serif; }
.sicon.xs.ph { font-size: .72rem; }
.sicon.xl.ph { font-size: 2.2rem; }

/* ---- Encabezados y estadísticas ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 22px; }
.stat { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--border-color); padding: 14px 18px; transition: transform .18s, box-shadow .18s; }
.stat:hover { transform: translate(-2px, -3px) rotate(-.6deg); box-shadow: 7px 8px 0 var(--border-color); }
.stat-ic { font-size: 1.9rem; width: 52px; height: 52px; display: grid; place-items: center; background: var(--pencil); color: #161010;
  border: 3px solid var(--border-color); border-radius: 14px; flex: none; }
.stat > div { display: flex; flex-direction: column; min-width: 0; }
.stat-n { font: 700 2rem/1 Fredoka, sans-serif; }
.stat-t { font: 700 1.1rem/1.2 Fredoka, sans-serif; overflow-wrap: anywhere; }
.stat-l { color: var(--muted); font-size: .9rem; }
.quick { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 20px; }
.notice { margin-top: 0; }
.notice.ok { background: rgba(143, 229, 143, .22); }

/* ---- Tarjetas de servidor ---- */
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 30px 24px; margin: 18px 0; padding-top: 6px; }
.srv-card { position: relative; background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 24px 28px 22px 26px;
  box-shadow: 7px 7px 0 var(--border-color); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.srv-card:hover { transform: translate(-3px, -6px) rotate(-.5deg); box-shadow: 11px 13px 0 var(--border-color); }
.srv-card.prem { box-shadow: 7px 7px 0 var(--border-color), 0 0 0 3px var(--pencil); }
.srv-cover { display: block; position: relative; text-decoration: none; height: 128px; }
.srv-banner { position: absolute; inset: 0; overflow: hidden; border-radius: 20px 24px 0 0;
  background: linear-gradient(135deg, hsl(var(--h, 30) 75% 62%), hsl(calc(var(--h, 30) + 50) 70% 48%)); border-bottom: 3px solid var(--border-color); }
.srv-bg { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.5); transform: scale(1.35); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.srv-card:hover .srv-bg { transform: scale(1.5) rotate(2deg); }
.srv-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 150% 0; transition: background-position .8s; }
.srv-card:hover .srv-banner::after { background-position: -50% 0; }
.srv-avatar { position: absolute; left: 20px; bottom: -48px; z-index: 2; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.srv-card:hover .srv-avatar { transform: scale(1.08) rotate(-5deg); }
.ribbon { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--pencil); color: #161010; font: 700 .8rem Fredoka, sans-serif;
  border: 2px solid var(--border-color); border-radius: 999px; padding: 1px 12px; box-shadow: 2px 2px 0 var(--border-color); transform: rotate(3deg); }
.srv-body { padding: 60px 20px 20px; }
.srv-body h3 { font-size: 1.4rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.srv-body h3 a { color: var(--ink); text-decoration: none; }
.srv-body h3 a:hover { text-decoration: underline wavy var(--capy); }
.srv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---- Cabecera del servidor ---- */
.srv-hero { position: relative; overflow: hidden; border: 3px solid var(--border-color); border-radius: 26px 30px 24px 28px; box-shadow: 8px 8px 0 var(--border-color);
  background: linear-gradient(135deg, hsl(var(--h, 30) 75% 62%), hsl(calc(var(--h, 30) + 50) 70% 48%)); margin-bottom: 20px; }
.srv-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.srv-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.5) brightness(.8); transform: scale(1.5); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.6) translate(2%, -3%); } }
.srv-hero-in { position: relative; display: flex; align-items: center; gap: 24px; padding: 34px 30px; flex-wrap: wrap; }
.srv-hero .sicon.xl { width: 128px; height: 128px; animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }
.srv-hero h1 { color: #fff; text-shadow: 3px 3px 0 #161010; margin-bottom: 10px; font-size: clamp(1.8rem, 4.5vw, 3rem); overflow-wrap: anywhere; }
.srv-hero-txt { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Pestañas ---- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 7px; background: var(--paper); border: 3px solid var(--border-color); border-radius: 18px; box-shadow: 4px 4px 0 var(--border-color); margin: 0 0 20px; }
.tab { font: 700 1rem Fredoka, sans-serif; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: 12px; padding: 8px 18px; cursor: pointer; transition: transform .18s, background-color .2s; }
.tab:hover { background: rgba(229, 138, 58, .18); transform: translateY(-2px); }
.tab.on { background: var(--capy); color: #161010; border-color: var(--border-color); box-shadow: 3px 3px 0 var(--border-color); }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: panel-in .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }

/* ---- Ajustes del bot ---- */
.tab-panel[data-panel="settings"] { padding-bottom: 90px; }
.cfg-card { background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 22px 26px 20px 24px; box-shadow: 6px 6px 0 var(--border-color); padding: 20px 24px; margin: 0 0 22px; }
.cfg-card h3 { margin-bottom: .25em; font-size: 1.35rem; }
.cfg-desc { margin: 0 0 16px; color: var(--muted); }
.cfg-desc em { display: block; font-size: .9rem; }
.warn-card { background: var(--pencil); color: #161010; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill input, .game input, .chan-pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill { position: relative; margin: 0; }
.pill span { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--border-color); border-radius: 999px; padding: 8px 18px; font: 700 1rem Fredoka, sans-serif;
  background: var(--paper); cursor: pointer; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, box-shadow .18s; user-select: none; }
.pill span:hover { transform: translateY(-3px); }
.pill input:checked + span { background: var(--pencil); color: #161010; transform: translateY(-2px); box-shadow: 3px 3px 0 var(--border-color); }
.pill input:focus-visible + span, .game input:focus-visible + .game-in, .chan-pill input:focus-visible + span { outline: 4px solid var(--pencil); outline-offset: 3px; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.game { position: relative; display: block; margin: 0; cursor: pointer; }
.game-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 18px 10px 14px; background: var(--paper);
  border: 3px solid var(--border-color); border-radius: 18px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background-color .2s; user-select: none; }
.game-in:hover { transform: translateY(-4px) rotate(-1deg); }
.game-emoji { font-size: 2.2rem; line-height: 1.2; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.game:hover .game-emoji { transform: scale(1.2) rotate(8deg); }
.game-in strong { font: 700 1.05rem Fredoka, sans-serif; }
.game-in small { color: inherit; opacity: .7; }
.game-in .tag { margin-top: 4px; }
.check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--mint); color: #161010; border: 2px solid var(--border-color); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.game input:checked + .game-in { background: var(--capy); color: #161010; box-shadow: 4px 4px 0 var(--border-color); transform: translateY(-2px); }
.game input:checked + .game-in .check { transform: scale(1); }

.chan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.chan-search { flex: 1 1 200px; min-width: 0; padding: 8px 14px; font: inherit; border: 3px solid var(--border-color); border-radius: 999px; background: var(--paper); color: var(--ink); }
.chan-count { color: var(--muted); font-size: .9rem; }
.chan-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 270px; overflow-y: auto; padding: 4px 4px 8px; }
.chan-pill { position: relative; margin: 0; }
.chan-pill[hidden] { display: none; }
.chan-pill span { display: inline-flex; align-items: baseline; gap: 4px; border: 2px solid var(--border-color); border-radius: 999px; padding: 4px 13px; background: var(--paper);
  cursor: pointer; font-weight: 700; font-size: .93rem; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background-color .15s; user-select: none; }
.chan-pill span i { font-style: normal; opacity: .55; }
.chan-pill span small { opacity: .6; font-size: .72rem; margin-left: 4px; font-weight: 400; }
.chan-pill span:hover { transform: translateY(-2px); }
.chan-pill input:checked + span { background: var(--mint); color: #161010; box-shadow: 2px 2px 0 var(--border-color); }

.savebar { position: fixed; left: 50%; bottom: 22px; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 20px;
  background: var(--choc); color: #fff; border: 3px solid var(--border-color); border-radius: 20px; box-shadow: 6px 6px 0 var(--border-color);
  transform: translate(-50%, 180%); opacity: 0; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; font-weight: 700; max-width: calc(100vw - 24px); }
.savebar.show { transform: translate(-50%, 0); opacity: 1; }

/* ---- Avisos ---- */
#toasts { position: fixed; right: 20px; top: 92px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 40px); }
.toast { background: var(--paper); color: var(--ink); border: 3px solid var(--border-color); border-left-width: 10px; border-radius: 14px; box-shadow: 5px 5px 0 var(--border-color);
  padding: 10px 16px; font-weight: 700; transform: translateX(130%); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.toast.ok { border-left-color: var(--mint); }
.toast.err { border-left-color: var(--tag); }
.toast.in { transform: none; }

/* Si el sistema pide "reducir movimiento" (en Windows: Accesibilidad > Efectos visuales > Efectos de animación desactivado),
   no se quitan las animaciones: se cambian por un fundido suave, sin desplazamientos ni zoom. */
@keyframes fade-soft { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .page, .tab-panel.on { animation-name: fade-soft; animation-duration: .35s; }
  .srv-hero .sicon.xl, .srv-hero-bg img, .side-srv .gold, ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ==========================================================
   v3: barra lateral global (se contrae), scrollbars, imágenes, no-copiar
   ========================================================== */
:root { --sw: 264px; --nav-h: 76px; }
html.side-min { --sw: 78px; }

/* ---- Scrollbars con el estilo de la página ---- */
* { scrollbar-width: thin; scrollbar-color: var(--capy) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--capy); border: 2px solid var(--border-color); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pencil); }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-color: var(--capy) var(--wood); }
html::-webkit-scrollbar { width: 16px; }
html::-webkit-scrollbar-track { background: var(--paper); border-left: 3px solid var(--border-color); }
html::-webkit-scrollbar-thumb { border-width: 3px; min-height: 60px; }

/* ---- No copiar textos (salvo campos y .copyable) ---- */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.sel, input, textarea, select, [contenteditable], .copyable, .sel { -webkit-user-select: text; user-select: text; }
.copyable { -webkit-user-select: all; user-select: all; cursor: copy; }
.copyable:hover { text-decoration: underline dotted; }
img { -webkit-user-drag: none; }

/* ---- Cabecera ---- */
nav { gap: 12px 14px; padding: 10px 22px; min-height: var(--nav-h); flex-wrap: nowrap; }
nav .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
nav .brand { margin-right: 0; white-space: nowrap; }
.nav-burger { width: 44px; height: 44px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 11px;
  background: var(--capy); border: 3px solid var(--border-color); border-radius: 14px; box-shadow: 3px 3px 0 var(--border-color); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.nav-burger:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border-color); }
.nav-burger span { display: block; height: 3px; border-radius: 3px; background: #161010; transition: transform .3s, opacity .2s, width .3s; }
.nav-burger span:nth-child(2) { width: 70%; }
html.side-min .nav-burger span:nth-child(2) { width: 100%; }

/* ---- Estructura con barra lateral ---- */
main.with-side { max-width: none; width: 100%; margin: 0; padding: 26px 24px 56px 0; display: grid; grid-template-columns: var(--sw) minmax(0, 1fr); gap: 28px; align-items: start; transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1); }
.page { width: 100%; max-width: 1120px; margin: 0 auto; }
.side { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); padding: 26px 0 26px 20px; z-index: 40; }
.side-inner { height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; overflow-y: auto; overflow-x: hidden;
  background: var(--paper); border: 3px solid var(--border-color); border-radius: 22px 26px 20px 24px; box-shadow: 6px 6px 0 var(--border-color); }
.side-h { margin: 16px 8px 4px; font: 700 .72rem Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.side-h:first-child { margin-top: 4px; }
.side-link, .side-srv, .side-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 2px solid transparent; background: none;
  color: var(--ink); font: 700 1rem "Atkinson Hyperlegible", system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s, background-color .18s; }
.side-link .si, .side-toggle .si { width: 28px; flex: none; text-align: center; font-size: 1.2rem; }
.side-link .sl, .side-toggle .sl { overflow: hidden; text-overflow: ellipsis; }
.side-servers { display: flex; flex-direction: column; gap: 3px; margin: 0 0 0 10px; padding-left: 8px; border-left: 3px dashed var(--border-color); }
.side-srv { padding: 6px 8px; font-size: .95rem; }
.side-link.invite { margin-top: 4px; background: var(--mug); color: #fff; }
.side-toggle { margin-top: auto; color: var(--muted); }
.side-toggle:hover { color: var(--ink); }
.side-arrow { transition: transform .35s; font-weight: 700; }
html.side-min .side-arrow { transform: rotate(180deg); }

/* contraída: solo iconos */
html.side-min .side-inner { padding: 14px 8px; }
html.side-min .side .sl, html.side-min .side .gold { display: none; }
html.side-min .side-h { height: 3px; margin: 12px 14px 8px; padding: 0; border-radius: 3px; background: var(--border-color); opacity: .25; font-size: 0; }
html.side-min .side-h span { display: none; }
html.side-min .side-link, html.side-min .side-toggle, html.side-min .side-srv { justify-content: center; padding: 8px 0; gap: 0; }
html.side-min .side-servers { margin: 0; padding: 0; border: 0; align-items: center; }

/* ---- Móvil: panel que se desliza ---- */
#side-ov { display: none; }
@media (max-width: 960px) {
  html.side-min { --sw: 264px; }
  main.with-side { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 48px; gap: 0; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(300px, 86vw); padding: 12px; transform: translateX(-110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); z-index: 120; }
  html.side-open .side { transform: none; }
  #side-ov { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
  html.side-open #side-ov { opacity: 1; pointer-events: auto; }
  html.side-open body { overflow: hidden; }
  html.side-min .side .sl, html.side-min .side .gold { display: initial; }
  html.side-min .side-link, html.side-min .side-toggle, html.side-min .side-srv { justify-content: flex-start; padding: 8px 10px; gap: 12px; }
  html.side-min .side-h { height: auto; margin: 16px 8px 4px; background: none; opacity: 1; font-size: .72rem; }
  html.side-min .side-h span { display: inline; }
  html.side-min .side-servers { margin: 0 0 0 10px; padding-left: 8px; border-left: 3px dashed var(--border-color); align-items: stretch; }
  .side-toggle { display: none; }
  nav { position: sticky; padding: 8px 14px; }
  nav .who, nav .tag { display: none; }
  .srv-hero-in { padding: 24px 20px; }
  .srv-hero .sicon.xl { width: 96px; height: 96px; }
  #toasts { top: 12px; }
}
@media (max-width: 520px) { nav .brand { font-size: 1.1rem; } nav .brand img { width: 36px; height: 36px; } }

/* ---- Imágenes: rellenan el marco ---- */
.g-track img { object-fit: cover; aspect-ratio: 16 / 10; background: var(--wood); -webkit-user-drag: none; }
.gallery { background: var(--card-bg); }
.feature { align-items: stretch; }
.feature .gallery { align-self: center; }
.feature-img { width: 100%; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; }
.edit-img img, .cap-row > img, .feat-prev img { object-fit: cover; }
.lightbox img { object-fit: contain; }

.game-img { display: block; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.game-emoji { display: grid; place-items: center; min-height: 48px; }

@media (prefers-reduced-motion: reduce) { main.with-side, .side, .side-arrow { transition: none; } }
@media (max-width: 760px) { nav { flex-direction: row; align-items: center; } .spacer { display: block; } }

/* ==========================================================
   v4: pulido — botones simétricos, alineaciones y detalles
   ========================================================== */
body { min-height: 100vh; display: flex; flex-direction: column; }
main.with-side { flex: 1 0 auto; }
footer { margin-top: 0; }
footer a { color: var(--ink); text-decoration: none; padding: 3px 12px; border-radius: 999px; border: 2px solid transparent; transition: background-color .2s, border-color .2s; }
footer a:hover { background: var(--capy); border-color: var(--border-color); color: #161010; }

/* Botones: misma altura y centrado, sean <a> o <button> */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; min-height: 44px; padding: 8px 20px; text-align: center; white-space: nowrap; font-family: Fredoka, "Trebuchet MS", sans-serif; }
.btn.sm { min-height: 34px; padding: 4px 14px; font-size: .88rem; }
.card.choc a.btn, .card.choc .btn { color: #161010; }
.card.choc .btn.red, .card.choc .btn.blue { color: #fff; }
.actions .btn, .srv-actions .btn { flex: 1 1 0; }

/* Cabecera: todos los controles a la misma altura */
nav { gap: 10px 12px; }
nav .nav-burger { width: 42px; height: 42px; padding: 0 10px; }
nav .theme-toggle { width: 42px; height: 42px; flex: none; background: var(--paper); border-width: 3px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
nav .theme-toggle:hover { transform: rotate(25deg) scale(1.08); }
nav .btn.sm { min-height: 42px; padding: 0 18px; font-size: .95rem; }
nav .who { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border: 3px solid var(--border-color); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 .92rem Fredoka, sans-serif; }
.lang-switch { display: inline-flex; align-items: center; height: 42px; font-size: 0; border: 3px solid var(--border-color); border-radius: 999px; overflow: hidden; background: var(--paper); }
.lang-switch a { display: grid; place-items: center; height: 100%; padding: 0 13px; font: 700 .88rem Fredoka, sans-serif; text-decoration: none; color: var(--ink); transition: background-color .2s; }
.lang-switch a:hover { background: rgba(229, 138, 58, .25); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--capy); color: #161010; text-decoration: none; }
nav .tag.warn { height: 30px; display: inline-flex; align-items: center; }

/* Barra lateral alineada con el contenido */
.side { top: calc(var(--nav-h) + 26px); height: calc(100vh - var(--nav-h) - 46px); padding: 0 0 0 20px; }
.side-link:hover, .side-srv:hover { background: rgba(229, 138, 58, .16); transform: translateX(4px); }
.side-link.on, .side-srv.on { background: var(--capy); color: #161010; border-color: var(--border-color); box-shadow: 3px 3px 0 var(--border-color); }
.side-link.invite:hover { background: var(--mug); filter: brightness(1.15); }
html.side-min .side-link:hover, html.side-min .side-srv:hover { transform: scale(1.1); }

/* Títulos de página */
.page > h1, .page-head h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); position: relative; padding-bottom: 14px; margin: 0 0 .6em; }
.page > h1::after, .page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 7px; border-radius: 7px; border: 2px solid var(--border-color);
  background: repeating-linear-gradient(135deg, var(--capy) 0 10px, var(--pencil) 10px 20px); }
.page-head { align-items: center; }
.page-head h1 { margin-top: 14px; }
.page-head .lead { margin: 0; }
.page-head > .btn { flex: none; }

/* Estadísticas y pestañas simétricas */
.stats { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.stat { min-height: 88px; }
.stat-t { font-size: 1.02rem; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tab { text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Tarjetas de servidor: acciones iguales y ancladas abajo */
.srv-card { display: flex; flex-direction: column; }
.srv-body { flex: 1; display: flex; flex-direction: column; }
.srv-actions { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.srv-actions .btn { padding: 8px 10px; font-size: .95rem; }

/* Ajustes */
.game-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.game { flex: 1 1 172px; }
.game-in { height: 100%; justify-content: center; }
.chan-tools > * { height: 42px; }
.chan-search { padding: 0 16px; }
.chan-count { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.chan-tools .btn { min-height: 42px; height: 42px; }

/* Cuenta regresiva: la ficha de días crece si hay muchas cifras */
.cd-tile { flex: 0 0 auto; min-width: 96px; padding: 10px 16px 8px; }
.cd.sm .cd-tile { min-width: 66px; padding: 6px 10px 5px; }
.cd-tiles { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 520px) { .cd-tile { min-width: 66px; padding: 8px 8px 6px; } .srv-actions { grid-template-columns: 1fr; } .tab { padding: 6px 4px; font-size: .88rem; } }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.game { flex: none; }
.savebar:not(.show) { visibility: hidden; pointer-events: none; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s, visibility 0s .4s; }

/* Móvil: cabecera compacta, sin desbordes */
html, body { overflow-x: clip; }
.lang-switch { flex: none; }
@media (max-width: 960px) { nav .who { display: none; } }
@media (max-width: 560px) {
  nav { gap: 8px; padding: 8px 12px; }
  nav .brand { font-size: 0; gap: 0; }
  nav .brand img { width: 40px; height: 40px; }
  nav .btn.sm { padding: 0 12px; }
  .lang-switch a { padding: 0 10px; }
}
@media (max-width: 560px) { .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .game-in { padding: 14px 6px 10px; } .game-in strong { font-size: .95rem; } }

/* Casillas de juegos: tamaño fijo e igual para todas */
.game-grid { grid-template-columns: repeat(auto-fill, 180px); justify-content: start; gap: 16px; }
.game { width: 180px; flex: none; }
.game-in { height: 100%; min-height: 150px; }
@media (max-width: 560px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 10px; } .game { width: auto; } .game-in { min-height: 136px; } }
.game-grid { grid-auto-rows: 168px; } .game-in { min-height: 0; } @media (max-width: 560px) { .game-grid { grid-auto-rows: 150px; } }

/* Las animaciones no deben dejar un transform activo: ancla los elementos fixed (barra de guardado) a la pantalla */
.page, .tab-panel.on, .reveal, .side-sub { animation-fill-mode: backwards; }
@media (max-width: 640px) {
  .savebar { left: 12px; right: 12px; bottom: 12px; transform: translateY(220%); max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
  .savebar.show { transform: none; }
  .savebar > span { grid-column: 1 / -1; text-align: center; }
  .savebar .btn { width: 100%; }
  .tab-panel[data-panel="settings"] { padding-bottom: 150px; }
}

/* ==========================================================
   v5: barra de guardado fija (también en móvil), planes, FAQ, historial
   ========================================================== */
/* Causa del bug: una animación con transform y fill "both" deja al ancestro como bloque contenedor de los
   elementos fixed, y la barra quedaba al final de la página. Con "backwards" el transform desaparece al terminar. */
.page, .reveal, .tab-panel.on, .side-sub { animation-fill-mode: backwards; }
.savebar { z-index: 90; }

@media (max-width: 600px) {
  .tab-panel[data-panel="settings"] { padding-bottom: 130px; }
  .savebar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none; padding: 12px; gap: 10px;
    transform: translateY(190%); justify-content: stretch; border-radius: 18px; }
  .savebar.show { transform: none; }
  .savebar > span { flex: 1 1 100%; text-align: center; font-size: .95rem; }
  .savebar .btn { flex: 1 1 0; }
}

/* Planes: filas reservadas, descripción flexible y botón siempre abajo, del mismo ancho */
.menu { align-items: stretch; }
.menu .plan { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 0; }
.plan-tagrow { min-height: 30px; display: flex; align-items: center; }
.menu .plan h3 { margin: 0; min-height: 2.3em; }
.menu .plan .price { line-height: 1; }
.plan-desc { flex: 1 1 auto; margin: 0; }
.plan-btn { width: 100%; margin-top: auto; }

/* Preguntas frecuentes */
.faq { display: grid; gap: 12px; margin: 14px 0 22px; }
.faq details { background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 16px; box-shadow: 4px 4px 0 var(--border-color); padding: 0 18px; transition: transform .2s, box-shadow .2s; }
.faq details:hover { transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--border-color); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 40px 14px 0; font: 700 1.05rem Fredoka, "Trebuchet MS", sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pencil); color: #161010; border: 2px solid var(--border-color); font-weight: 700; transition: transform .3s, background-color .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--capy); }
.faq details p { margin: 0 0 16px; color: var(--muted); animation: rise .35s both; animation-fill-mode: backwards; }

/* Historial */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; border: 2px solid var(--border-color); border-radius: 14px; background: var(--paper); transition: transform .18s; }
.hist li:hover { transform: translateX(4px); }
.hist li > div { display: flex; flex-direction: column; min-width: 0; }
.hist small { color: var(--muted); }
.empty-s { margin: 0; color: var(--muted); }

/* Inicio */
.home-stat { display: inline-flex; align-items: baseline; gap: 10px; margin: 18px 0 0; padding: 8px 20px; background: var(--paper); border: 3px solid var(--border-color); border-radius: 999px; box-shadow: 4px 4px 0 var(--border-color); }
.home-stat b { font: 700 1.8rem Fredoka, sans-serif; color: var(--capy); }
.home-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 16px 0 8px; }
.home-feat { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.home-feat .stat-ic { margin-bottom: 6px; }
.home-feat h3 { margin: 0; }
.home-feat p { margin: 0; color: var(--muted); }

/* Estado vacío */
.empty { text-align: center; padding: 34px 24px; }
.empty-ic { font-size: 3.4rem; display: inline-block; animation: float 4s ease-in-out infinite; }
.empty .btn { margin-top: 6px; }

/* Accesibilidad */
.skip { position: fixed; left: 12px; top: -80px; z-index: 2000; background: var(--pencil); color: #161010; padding: 10px 18px; border: 3px solid var(--border-color); border-radius: 12px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.page:focus { outline: none; }

/* Inicio en móvil */
@media (max-width: 760px) { .portrait { max-width: 240px; } .hero { gap: 22px; } .actions .btn { flex: 1 1 100%; } .home-stat { width: 100%; justify-content: center; } }
@media (max-width: 760px) { .menu .plan h3 { min-height: 0; } .plan-tagrow:empty { display: none; } }

/* ==========================================================
   v6: iconos propios, menú de usuario con foto de Discord
   ========================================================== */
.ic { --ic-ink: var(--ink); width: 1.4em; height: 1.4em; flex: none; display: inline-block; vertical-align: -.32em; overflow: visible; }
.ic use { pointer-events: none; }
.btn .ic, .tab .ic { width: 1.3em; height: 1.3em; vertical-align: -.28em; }
.side-link .si, .side-toggle .si { display: grid; place-items: center; }
.side-link .si .ic { width: 26px; height: 26px; vertical-align: 0; }
.side-srv .gold { display: inline-grid; place-items: center; }
.side-srv .gold .ic, .usr-link .gold .ic { width: 18px; height: 18px; vertical-align: 0; }
.ribbon .ic { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.stat-ic { background: var(--wood); }
.stat-ic .ic { width: 34px; height: 34px; vertical-align: 0; }
.cfg-card h3 .ic, .page h3 .ic { width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: 2px; }
.game-emoji .ic { width: 46px; height: 46px; vertical-align: 0; }
.game-in small .ic { width: 1.1em; height: 1.1em; vertical-align: -.22em; }
.empty-ic .ic { width: 88px; height: 88px; vertical-align: 0; }
.notice .ic, .savebar .ic { vertical-align: -.3em; }
/* sobre fondos naranja el color principal pasa a crema para que el icono no desaparezca */
.tab.on, .side-link.on, .side-srv.on, .btn:not(.gray):not(.green):not(.red):not(.blue), .game input:checked + .game-in { --ic1: #fffdf8; }
.theme-toggle .ic { width: 24px; height: 24px; vertical-align: 0; }
.theme-toggle { display: grid; place-items: center; padding: 0; }

.lang-code { display: inline-grid; place-items: center; min-width: 32px; height: 22px; margin-right: 8px; padding: 0 6px; border-radius: 7px; background: var(--mug); color: #fff;
  border: 2px solid var(--border-color); font: 700 .72rem Fredoka, sans-serif; letter-spacing: .04em; }
.pill input:checked + span .lang-code { background: var(--capy); color: #161010; }

/* Menú de usuario */
.usr { position: relative; flex: none; }
.usr-btn { display: block; width: 46px; height: 46px; padding: 0; border: 3px solid var(--border-color); border-radius: 50%; background: var(--capy); overflow: hidden; cursor: pointer;
  box-shadow: 3px 3px 0 var(--border-color); transition: transform .12s, box-shadow .12s; }
.usr-btn:hover, .usr.open .usr-btn { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border-color); }
.usr-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.usr-menu { position: absolute; right: 0; top: calc(100% + 14px); width: 310px; max-width: calc(100vw - 24px); padding: 12px; z-index: 300;
  background: var(--paper); border: 3px solid var(--border-color); border-radius: 22px 26px 20px 24px; box-shadow: 6px 6px 0 var(--border-color);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.96); transform-origin: top right;
  transition: opacity .2s, transform .28s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .28s; }
.usr.open .usr-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.usr-menu::before { content: ""; position: absolute; right: 16px; top: -11px; width: 18px; height: 18px; background: var(--paper); border-left: 3px solid var(--border-color); border-top: 3px solid var(--border-color); transform: rotate(45deg); }
.usr-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; margin-bottom: 6px; border-bottom: 3px dashed var(--border-color); }
.usr-head img { width: 56px; height: 56px; flex: none; object-fit: cover; border: 3px solid var(--border-color); border-radius: 50%; box-shadow: 3px 3px 0 var(--border-color); background: var(--capy); }
.usr-head > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.usr-head small { color: var(--muted); }
.usr-head strong { font: 700 1.1rem Fredoka, sans-serif; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--ink);
  font: 700 .98rem "Atkinson Hyperlegible", system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; transition: transform .16s, background-color .16s; }
.usr-link:hover { background: rgba(229, 138, 58, .18); transform: translateX(3px); text-decoration: none; }
.usr-link .ic { width: 26px; height: 26px; vertical-align: 0; }

.usr-link.sm { padding: 5px 8px; font-size: .92rem; }
.usr-link.sm .sicon { width: 26px; height: 26px; }
.usr-link .gold { display: inline-grid; place-items: center; font-style: normal; }
.usr-link.out { color: var(--tag); }
.usr-link.out:hover { background: rgba(201, 81, 77, .16); }
.usr-h { margin: 12px 8px 4px; font: 700 .72rem Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.usr-srv { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; padding-left: 8px; border-left: 3px dashed var(--border-color); }
.usr-none { padding: 4px 8px; color: var(--muted); }
.usr-more { padding: 4px 10px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.usr-sep { height: 3px; margin: 10px 4px; border-radius: 3px; background: var(--border-color); opacity: .2; }
.usr form { margin: 0; }
.badge { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--capy); color: #161010; border: 2px solid var(--border-color); font: 700 .75rem Fredoka, sans-serif; }

@media (max-width: 560px) {
  .usr-btn { width: 42px; height: 42px; }
  .usr-menu { position: fixed; left: 10px; right: 10px; top: calc(var(--nav-h) - 4px); width: auto; max-width: none; max-height: calc(100vh - var(--nav-h) - 16px); overflow-y: auto; }
  .usr-menu::before { right: 20px; }
}
.usr-link > span:not(.sicon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-link > .sicon { flex: none; }

/* --- Campos ES/EN del formulario de funciones --- */
.bi-field { display: flex; align-items: flex-start; gap: 8px; }
.bi-field .cap-chip { margin-top: 10px; }
.owner-form .bi-field input[type="text"], .owner-form .bi-field textarea { flex: 1; width: auto; min-width: 0; }

/* --- Páginas legales --- */
.legal { max-width: 78ch; }
.legal h2 { font-size: 1.35rem; margin: 1.8em 0 .5em; color: var(--capy); }
.legal p { margin: 0 0 1em; line-height: 1.7; overflow-wrap: anywhere; }

/* --- Ajustes finales de maquetación --- */
@media (min-width: 641px) { .savebar { width: max-content; max-width: calc(100vw - 32px); } }   /* la barra de guardado no se parte en dos líneas */
.stats { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }                          /* 4 tarjetas de resumen en una fila */

/* ==========================================================
   FUNCIONES: una imagen por idioma (PNG transparente, sin marco ni fondo)
   ========================================================== */
.ft-media { min-width: 0; display: flex; justify-content: center; align-items: center; align-self: center; }
.ft-img { display: block; max-width: 100%; height: auto; max-height: 460px; object-fit: contain; background: none; border: 0; box-shadow: none; border-radius: 0; }
.ft-num { display: none; }


/* ==========================================================
   FUNCIONES (final): solo imágenes, una por idioma, sin marcos
   ========================================================== */
.fx-list { display: flex; flex-direction: column; gap: 56px; margin-top: 8px; }
.fx { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fx-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: none; object-fit: contain; -webkit-user-drag: none; }
.fx-empty { margin: 0; color: var(--muted); }
.fx-edit { width: 100%; max-width: 760px; }
.fx-edit > summary { list-style: none; display: inline-flex; cursor: pointer; }
.fx-edit > summary::-webkit-details-marker { display: none; }
.fx-edit[open] { background: var(--choc); color: #fff; border: 3px solid var(--border-color); border-radius: 18px; padding: 14px 18px; box-shadow: 4px 4px 0 var(--border-color); }
.fx-edit[open] > summary { margin-bottom: 14px; }
.fx-edit form + form { margin-top: 14px; }

/* Botones grises: el fondo es siempre blanco, así que el icono siempre debe ser negro (en tema claro y oscuro). */
.btn.gray .ic, .btn.gray .ic use { --ic-ink: #161010; color: #161010; }

/* ---- Iconos: color de trazo según la superficie (--ic-ink) ----
   Superficies siempre oscuras (en ambos temas): trazo claro. */
.card.choc .ic, .savebar .ic, .fx-edit[open] .ic, .side-link.invite .ic, .btn.blue .ic { --ic-ink: #f3f3f3; }
/* Superficies siempre claras/de color vivo (en ambos temas): trazo oscuro. Van después para ganar a las de arriba. */
.tab.on .ic, .side-link.on .ic, .side-srv.on .ic, .btn.green .ic, .btn.gray .ic { --ic-ink: #161010; }
/* Botones y chips de color vivo (naranja, rojo, menta…) y juegos marcados: el trazo del icono también es oscuro. */
.btn:not(.blue) .ic, .tag .ic, .badge .ic, .game input:checked + .game-in .ic, .pill input:checked + span .ic { --ic-ink: #161010; }
/* Sobre una superficie del tema (tarjetas, barra lateral, menús) el contorno de los iconos sigue al tema: oscuro en claro, claro en oscuro (icons.svg usa --ic-ink). */

/* ==========================================================
   NOTICIAS (changelog): embeds estilo Discord + redactor
   ========================================================== */
.news-list { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
.dmd-embed { --embed: #e58a3a; position: relative; background: var(--card-bg); color: var(--ink); border: 3px solid var(--border-color); border-left: 10px solid var(--embed);
  border-radius: 16px; box-shadow: 5px 5px 0 var(--border-color); padding: 16px 20px 16px 18px; max-width: 760px; overflow-wrap: anywhere; }
.dmd-embed > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dmd-embed h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; color: inherit; }
.dmd-embed > header time { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.dmd { font-size: 1rem; line-height: 1.55; }
.dmd p { margin: 0 0 .6em; }
.dmd > :last-child { margin-bottom: 0; }
.dmd .dmd-h { margin: .7em 0 .3em; line-height: 1.25; }
.dmd h2.dmd-h { font-size: 1.4rem; } .dmd h3.dmd-h { font-size: 1.2rem; } .dmd h4.dmd-h { font-size: 1.05rem; }
.dmd .dmd-sub { font-size: .82rem; color: var(--muted); }
.dmd ul, .dmd ol { margin: 0 0 .6em; padding-left: 1.5em; }
.dmd li { margin: .15em 0; }
.dmd a { color: var(--mug); text-decoration: underline; font-weight: 700; }
[data-theme="dark"] .dmd a { color: #9aa0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dmd a { color: #9aa0ff; } }
.dmd code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: rgba(127, 127, 127, .22); padding: 1px 6px; border-radius: 6px; }
.dmd .dmd-pre { margin: .4em 0 .7em; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .28); overflow-x: auto; }
.dmd .dmd-pre code { background: none; padding: 0; white-space: pre; }
.dmd .dmd-quote { margin: .3em 0 .7em; padding: 2px 0 2px 12px; border-left: 4px solid var(--muted); color: inherit; }
.dmd .dmd-spoiler { background: #161010; color: transparent; border-radius: 5px; padding: 0 3px; cursor: pointer; transition: color .2s, background-color .2s; }
.dmd .dmd-spoiler:hover, .dmd .dmd-spoiler:focus { background: rgba(127, 127, 127, .3); color: inherit; outline: none; }
.dmd .dmd-emoji { width: 1.4em; height: 1.4em; vertical-align: -.3em; }
.dmd-img { display: block; max-width: 100%; height: auto; margin-top: 12px; border-radius: 10px; }
.news-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--border-color); }
.news-foot form { margin: 0; }
.news-compose { max-width: 800px; margin-bottom: 28px; }
.news-compose input[type=text], .news-compose input[type=url], .news-compose textarea, .news-select {
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 3px solid var(--border-color); border-radius: 12px; background: var(--paper); color: var(--ink); }
.news-compose textarea { resize: vertical; min-height: 160px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }
.news-opts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.news-opts input[type=url] { flex: 1 1 260px; width: auto; }
.news-color { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.news-color input { width: 46px; height: 38px; padding: 2px; border: 3px solid var(--border-color); border-radius: 10px; background: var(--paper); cursor: pointer; }
.fmt-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fmt-bar button { min-width: 38px; height: 36px; padding: 0 8px; font: 700 .95rem Fredoka, sans-serif; color: #161010; background: #fff; border: 2px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: transform .15s, background-color .15s; }
.fmt-bar button:hover { transform: translateY(-2px); background: var(--pencil); }
.news-compose .dmd-embed { max-width: none; box-shadow: none; }
.news-select { max-width: 520px; cursor: pointer; }

/* ===== Tabla comparativa Gratis vs Premium (página de planes) ===== */
.cmp-wrap { overflow-x: auto; margin: 16px 0; border: 3px solid var(--border-color); border-radius: 12px; background: var(--card-bg); box-shadow: 5px 5px 0 var(--border-color); }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp thead th:first-child { width: 52%; }
.cmp th, .cmp td { padding: 11px 14px; text-align: center; border-bottom: 2px solid var(--border-color); }
.cmp thead th { font: 700 1rem Fredoka, sans-serif; background: var(--wood); }
.cmp tbody th { text-align: left; font-weight: 600; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { font-weight: 700; }
.cmp .cmp-top { background: var(--pencil); color: #161010; border-left: 2px solid var(--border-color); }
@media (max-width: 760px) { .cmp th, .cmp td { padding: 9px 8px; font-size: .88rem; overflow-wrap: anywhere; } .cmp thead th:first-child { width: 42%; } .cmp thead th:not(:first-child) { width: 29%; overflow-wrap: normal; font-size: .85rem; } }

/* Rol de avisos (ajustes del servidor) */
.rol-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.cfg-msg { font-weight: 800; }
.cfg-msg.ok { color: #2e7d32; }
.cfg-msg.err { color: #c9514d; }

/* ===== Tema: icono fijo (mitad negro / mitad blanco), no cambia con el tema de la web ===== */
.theme-toggle .ic-theme { display: block; width: 24px; height: 24px; flex: none; }
.theme-toggle .ic-theme * { fill-opacity: 1; }

/* ===== Menú desplegable con búsqueda (combo.js) ===== */
.combo { position: relative; max-width: 520px; }
.combo-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.combo-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-weight: 600; color: var(--ink);
  padding: 10px 14px; background: var(--paper); border: 3px solid var(--border-color); border-radius: 12px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--border-color); transition: transform .12s, box-shadow .12s; }
.combo-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--border-color); }
.combo-btn:focus-visible, .combo-search:focus-visible { outline: 3px solid var(--mug, #4a90e2); outline-offset: 2px; }
.combo.open .combo-btn { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border-color); }
.combo-cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.combo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.combo-txt.is-none, .combo-opt.is-none .combo-txt { color: var(--muted); font-weight: 500; }
.combo-sub { flex: none; font-size: .78rem; font-weight: 600; padding: 1px 8px; border: 2px solid var(--border-color); border-radius: 999px; color: var(--muted); }
.combo-sub.warn { background: var(--pencil, #ffd966); color: #161010; }
.combo-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-color); }
.combo-caret { flex: none; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.combo.open .combo-caret { transform: rotate(-135deg) translate(-2px, -2px); }
.combo-pop { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 8px); background: var(--card-bg); border: 3px solid var(--border-color);
  border-radius: 14px; box-shadow: 5px 5px 0 var(--border-color); padding: 10px; animation: combo-in .14s ease-out; }
.combo-pop[hidden] { display: none; }
.combo.up .combo-pop { top: auto; bottom: calc(100% + 8px); }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.combo-search { width: 100%; box-sizing: border-box; font: inherit; padding: 9px 12px; margin-bottom: 8px; color: var(--ink); background: var(--paper); border: 2px solid var(--border-color); border-radius: 10px; }
.combo-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.combo-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-weight: 600; }
.combo-opt.is-act { background: var(--pencil, #ffd966); color: #161010; }
.combo-opt.is-act .combo-sub { color: #161010; }
.combo-opt.is-sel::after { content: "✓"; margin-left: auto; font-weight: 800; }
.combo-empty { padding: 12px; text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .combo-pop { animation: none; } .combo-btn, .combo-caret { transition: none; } }

/* ===== ID que se copia con un clic (no se puede seleccionar a mano) ===== */
.copy-id { font: 600 .85rem Fredoka, sans-serif; line-height: 1.4; cursor: copy; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .12s, background-color .15s; }
.copy-id:hover { transform: translateY(-1px); background: var(--pencil); color: #161010; }
.copy-id:focus-visible { outline: 3px solid var(--mug, #4a90e2); outline-offset: 2px; }
.copy-id.copied { background: var(--mint); color: #161010; }

/* Rol de noticias dentro de la tarjeta del canal de noticias */
.cfg-sub { margin-top: 20px; padding-top: 16px; border-top: 3px dashed var(--border-color); }
.cfg-sub h4 { margin: 0 0 .25em; font: 700 1.1rem Fredoka, sans-serif; }
.cfg-sub h4 .ic { width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-right: 2px; }

/* ===== Panel de administración ===== */
.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.adm-search { flex: 1 1 260px; min-width: 0; max-width: 420px; font: inherit; padding: 10px 14px; color: var(--ink); background: var(--paper); border: 3px solid var(--border-color); border-radius: 12px; box-shadow: 3px 3px 0 var(--border-color); }
.adm-search:focus-visible, .adm-chip:focus-visible, .adm-more summary:focus-visible { outline: 3px solid var(--mug, #4a90e2); outline-offset: 2px; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-chip { font: 700 .9rem Fredoka, sans-serif; color: var(--ink); background: var(--paper); border: 2px solid var(--border-color); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: transform .15s, background-color .15s; }
.adm-chip:hover { transform: translateY(-2px); background: rgba(229, 138, 58, .2); }
.adm-chip.on { background: var(--capy); color: #161010; box-shadow: 2px 2px 0 var(--border-color); }
.adm-count { margin-left: auto; color: var(--muted); font-weight: 700; font-size: .9rem; }
.adm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 370px), 1fr)); gap: 16px; }
.adm-srv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: var(--card-bg); border: 3px solid var(--border-color);
  border-radius: 20px 24px 18px 22px; box-shadow: 5px 5px 0 var(--border-color); padding: 16px 18px; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; animation: rise .5s both; }
.adm-srv:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--border-color); }
.adm-srv[hidden] { display: none; }
.adm-main { min-width: 0; }
.adm-main h3 { margin: 0 0 6px; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-main h3 a { color: inherit; text-decoration: none; }
.adm-main h3 a:hover { text-decoration: underline; }
.adm-meta { margin: 8px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.adm-meta b { color: var(--ink); }
.adm-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; margin-top: 6px; border-top: 3px dashed var(--border-color); }
.adm-act form { margin: 0; }
.adm-more { position: relative; margin-left: auto; }
.adm-more summary { list-style: none; cursor: pointer; }
.adm-more summary::-webkit-details-marker { display: none; }
.adm-pop { position: absolute; z-index: 40; right: 0; bottom: calc(100% + 8px); display: grid; gap: 10px; min-width: 250px; padding: 12px; background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 14px; box-shadow: 5px 5px 0 var(--border-color); }
.adm-pop form { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-empty, .adm-empty-all { padding: 28px 16px; text-align: center; color: var(--muted); font-weight: 700; }
.adm-sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.adm-sys-i { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--paper); border: 2px solid var(--border-color); border-radius: 14px; }
.adm-sys-i b { display: block; }
.adm-sys-i small { color: var(--muted); overflow-wrap: anywhere; }
.adm-sys .dot { flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--pencil); }
.adm-sys .dot.ok { background: var(--mint); }
.adm-sys .dot.bad { background: var(--tag); }
.adm-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 6px 0 22px; padding: 20px 24px; background: var(--card-bg); border: 3px solid var(--border-color); border-radius: 24px 28px 22px 26px; box-shadow: 6px 6px 0 var(--border-color); }
.adm-hero h1 { margin: 0 0 8px; overflow-wrap: anywhere; }
.adm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; align-items: start; }
.adm-form { margin: 0 0 14px; }
.adm-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-num, .adm-note { font: inherit; padding: 9px 12px; color: var(--ink); background: var(--paper); border: 3px solid var(--border-color); border-radius: 12px; }
.adm-num { width: 90px; }
.adm-note { flex: 1 1 180px; min-width: 0; }
.adm-note.full { width: 100%; margin-bottom: 10px; }
.cfg-card h4 { margin: 18px 0 .25em; font: 700 1.1rem Fredoka, sans-serif; }
.adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; }
.adm-dl dt { font-weight: 700; color: var(--muted); }
.adm-dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-hist { margin: 0; padding-left: 18px; line-height: 1.8; }
@media (max-width: 560px) { .adm-dl { grid-template-columns: 1fr; gap: 2px; } .adm-dl dd { margin-bottom: 8px; } .adm-count { margin-left: 0; width: 100%; } .adm-pop { right: auto; left: 0; } }
@media (prefers-reduced-motion: reduce) { .adm-srv { animation: fade-soft .3s both; } }
.stats.adm-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }