/* TravCrew — sistema visual (maqueta aprobada: docs/diseno/home-v1). Fondo hueso, cabecera y pie "noche" con
   patrón propio, tarjetas blancas redondeadas, botones píldora. Fuentes locales: Cabinet Grotesk (títulos) y
   Satoshi (texto). Nada externo: ni CDN, ni imágenes ni archivos del juego. */
@font-face { font-family: Cabinet; src: url(fonts/CabinetGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Cabinet; src: url(fonts/CabinetGrotesk-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Cabinet; src: url(fonts/CabinetGrotesk-Extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: Satoshi; src: url(fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url(fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Satoshi; src: url(fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noche: #16130F; --noche2: #211D18; --noche3: #2E2922;
  --hueso: #F5F1E6; --papel: #FFFDF8;
  --tinta: #15130F; --gris: #5E584D; --gris-c: #8B8478;
  --oro: #C9A35A; --oro-o: #A9843E; --oro-c: #F1E5C8;
  --rojo: #8E1B1B; --rojo-bg: #F6DEDA; --crema: #F1E2C0;
  --ok: #2F6B3A; --ok-bg: #E2EEDC;
  --prog: #8A5A0B; --prog-bg: #F7EBCF;
  --noche-bg: #ECE6FB; --noche-t: #5B43A8;
  --linea: rgba(21, 19, 15, .10); --linea-f: rgba(21, 19, 15, .18); --linea-o: rgba(241, 226, 192, .12);
  --r: 18px; --r-s: 12px; --sombra: 0 1px 0 rgba(21, 19, 15, .04), 0 12px 32px -12px rgba(21, 19, 15, .18);
  --ancho: 1160px;
  /* Tipografía en UN solo lugar */
  --font-titulo: Cabinet, system-ui, sans-serif;
  --font-texto: Satoshi, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Patrón propio (espadas, escudos, trigo) para cabecera y pie */
  --patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23F1E2C0' stroke-width='3' stroke-linecap='round'%3E%3Cg transform='translate(40 44) rotate(-20)'%3E%3Cpath d='M0-26V14M-9 14H9M0 14V24'/%3E%3C/g%3E%3Cg transform='translate(160 60)'%3E%3Cpath d='M0-20 16-14V0C16 11 8 18 0 22-8 18-16 11-16 0V-14Z'/%3E%3C/g%3E%3Cg transform='translate(70 160) rotate(15)'%3E%3Cpath d='M0 24V-24M0-14C6-18 10-18 12-24M0-14C-6-18-10-18-12-24M0-2C6-6 10-6 12-12M0-2C-6-6-10-6-12-12M0 10C6 6 10 6 12 0M0 10C-6 6-10 6-12 0'/%3E%3C/g%3E%3Cg transform='translate(170 170) rotate(35)'%3E%3Cpath d='M-20 0H20M14-6 20 0 14 6M-20-5V5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  font: 400 15px/1.55 var(--font-texto); color: var(--tinta); background: var(--hueso);
}
a { color: var(--oro-o); text-decoration: none; }
a:hover { color: var(--tinta); }
p a, li a, td a, .muted a, .small a, .warn a, .warn-box a, .panel-note a { text-decoration: none; }
p a:hover, li a:hover, td a:hover, .warn-box a:hover, .panel-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, .cab { font-family: var(--font-titulo); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: 0 0 .4rem; }
.muted { color: var(--gris); }
.small, small { font-size: .84rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
abbr[title] { text-decoration: none; cursor: help; }
code, kbd { font: 600 .85em var(--mono); background: var(--hueso); border: 1px solid var(--linea); border-radius: 6px; padding: 1px 6px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* ================= Cabecera ================= */
.patron { position: relative; background: var(--noche); color: var(--crema); overflow: hidden; }
.patron::before {
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: var(--patron);
}
/* Brillo dorado arriba a la derecha, dentro de la caja (la cabecera no recorta: tiene menús desplegables). */
.patron::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at calc(100% - 140px) 100px, rgba(201, 163, 90, .18), rgba(201, 163, 90, 0));
}
.top { z-index: 20; overflow: visible; }
.top-in {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--ancho); min-height: 76px; margin: 0 auto; padding: 0 24px;
}
.brand { display: inline-flex; align-items: center; color: var(--crema); flex: none; }
.brand:hover { color: var(--crema); }
.logo-lockup { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.logo-emblem { display: block; flex: none; width: 40px; height: 40px; }
.logo-words { display: flex; flex-direction: column; }
.logo-name { font: 800 22px/1 var(--font-titulo); letter-spacing: .06em; color: var(--crema); }
.logo-hq { color: var(--oro); }
.logo-sub { display: block; font: 500 10px/1 var(--font-texto); letter-spacing: .32em; color: var(--oro); margin-top: 6px; white-space: nowrap; }
.acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; margin-left: auto; }
.top-in.con-sesion { max-width: 1400px; gap: 12px; }
.con-sesion .acciones { flex-wrap: nowrap; }

/* Idiomas: píldora con banderas SVG */
.idiomas { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(241, 226, 192, .07); border: 1px solid var(--linea-o); }
.idiomas button {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; font: 700 13px var(--font-texto); letter-spacing: .04em; color: rgba(241, 226, 192, .72);
}
.idiomas button:hover { color: var(--crema); background: rgba(241, 226, 192, .06); }
.idiomas button.active { background: var(--crema); color: var(--tinta); }
/* Con sesión: solo las banderas (el nombre del idioma va en el tooltip y en aria-label). */
.idiomas .sr-lang, .con-sesion .idiomas button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.con-sesion .idiomas button { padding: 0 8px; }
.idiomas svg { width: 20px; height: 14px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }

/* Menús: botones píldora */
.nav { display: flex; align-items: center; gap: 6px; flex: none; }
.menu-group { position: relative; }
.menu-group > summary, .menu-toggle {
  list-style: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: 700 14px var(--font-texto); color: var(--crema); white-space: nowrap; background: transparent; border: 1px solid rgba(241, 226, 192, .28);
}
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
}
.menu-group > summary:hover, .menu-toggle:hover { border-color: var(--crema); }
.menu-group.active > summary { border-color: var(--oro); color: #FBF4E2; }
.menu-group[open] > summary { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.menu-group.user > summary { max-width: 12rem; }
.user-name { overflow: hidden; text-overflow: ellipsis; }
.ico-user { width: 16px; height: 16px; flex: none; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 230px; display: flex; flex-direction: column; padding: 6px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
}
.menu-group.user .menu-panel, .menu-group:last-child .menu-panel { left: auto; right: 0; }
.menu-panel a, .menu-panel button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 14px var(--font-texto); color: var(--tinta);
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--hueso); color: var(--tinta); }
.menu-panel a.active { background: var(--oro-c); font-weight: 700; }
.menu-toggle { display: none; justify-content: center; width: 40px; padding: 0; font-size: 18px; }
.btn-sm.login-link { height: 40px; }

/* Reloj compacto (solo con sesión) */
.clock-chip {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(241, 226, 192, .07); border: 1px solid var(--linea-o); font-size: 13px; color: rgba(241, 226, 192, .72);
}
.cc-srv { font-weight: 700; color: var(--oro); letter-spacing: .03em; }
.cc-time { font: 700 15px var(--font-titulo); color: var(--crema); font-variant-numeric: tabular-nums; min-width: 4.4em; }
.cc-sep { opacity: .5; }
.cc-loc { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.cc-loc:hover { background: rgba(241, 226, 192, .08); color: var(--crema); }
#clock-local { font-weight: 700; color: var(--crema); font-variant-numeric: tabular-nums; }
.edit { opacity: .75; }
[data-time="server"] .cc-loc-part { display: none !important; }
[data-time="local"] .cc-srv-part { display: none !important; }
.top-note {
  position: relative; z-index: 2; display: block; max-width: calc(var(--ancho) - 48px); margin: 0 auto 12px; padding: 7px 14px; border-radius: 12px; font-size: .88rem;
}
.night-banner { background: rgba(236, 230, 251, .12); color: #DCD2FA; }
.pending-banner { background: var(--prog-bg); color: var(--prog); font-weight: 700; }
.pending-banner:hover { color: var(--tinta); }
.acct-select { width: auto; height: 40px; min-height: 0; padding: 0 30px 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background-color: rgba(241, 226, 192, .07); color: var(--crema); border-color: var(--linea-o); }
.acct-select option { color: var(--tinta); }
.raid-mini { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--oro); color: var(--tinta); font: 700 13px var(--font-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.raid-mini:hover { color: var(--tinta); background: #D4B06A; }

/* ================= Botones píldora ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px;
  font: 700 15px var(--font-texto); white-space: nowrap; cursor: pointer; text-decoration: none !important;
  background: var(--oro); color: var(--tinta); border: 1px solid transparent;
}
.btn:hover { background: #D4B06A; color: var(--tinta); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-oro { background: var(--oro); color: var(--tinta); height: 48px; }
.btn-claro { background: transparent; color: var(--crema); border-color: rgba(241, 226, 192, .28); }
.btn-claro:hover { background: transparent; border-color: var(--crema); color: var(--crema); }
.btn-ghost-claro { background: transparent; color: rgba(241, 226, 192, .78); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost-claro:hover { background: transparent; color: var(--crema); }
.btn-sm { height: 40px; min-height: 0; padding: 0 16px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--tinta); border-color: var(--linea-f); }
.btn.ghost:hover { border-color: var(--tinta); background: transparent; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn.danger { background: transparent; color: var(--rojo); border-color: rgba(142, 27, 27, .35); }
.btn.danger:hover { border-color: var(--rojo); }
.btn.discord { background: #5865F2; color: #fff; }
.btn.discord:hover { background: #4752C4; color: #fff; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--oro-o); cursor: pointer; text-align: left; }
.linkish:hover { color: var(--tinta); }
.icon-btn { background: none; border: 0; color: var(--gris); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.icon-btn:hover { background: var(--hueso); color: var(--tinta); }

/* ================= Estados (chips) ================= */
.pill, .wip, .badge, .late-tag, .night {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  font: 700 12px/1 var(--font-texto); vertical-align: middle; border: 0;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-prog, .wip { background: var(--prog-bg); color: var(--prog); }
.pill-rojo { background: var(--rojo-bg); color: var(--rojo); }
.pill-noche { background: rgba(241, 226, 192, .1); color: var(--crema); height: 28px; padding: 0 12px; }
.wip { cursor: help; }
.badge { height: 22px; padding: 0 9px; font-size: 11.5px; }
.badge.kind-normal { background: #E3ECF8; color: #1D4F91; }
.badge.kind-between, .badge.prio-medium { background: var(--prog-bg); color: var(--prog); }
.badge.kind-permanent { background: var(--noche-bg); color: var(--noche-t); }
.badge.st-pending, .badge.prio-low { background: #EEEAE0; color: var(--gris); }
.badge.st-accepted { background: var(--ok-bg); color: var(--ok); }
.badge.st-rejected, .badge.prio-high { background: var(--rojo-bg); color: var(--rojo); }
/* Llamada vencida (la hora límite pasó sin completarse): gris, no es un error ni un logro. */
.badge.st-expired { background: #EEEAE0; color: var(--gris); }
.late-tag { background: var(--rojo-bg); color: var(--rojo); }
.night { background: var(--noche-bg); color: var(--noche-t); height: 20px; font-size: 11px; margin-left: 4px; }
.ready { color: var(--ok); font-weight: 700; }

/* ================= Contenido ================= */
.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 32px 24px 56px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.card {
  position: relative; padding: 24px 26px; border-radius: var(--r); background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); box-shadow: var(--sombra); min-width: 0;
}
.card > h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.card > h1 .coord { color: var(--oro-o); }
.card > p.sub { margin: -2px 0 12px; color: var(--gris); font-size: 1rem; }
.card > p.muted:first-of-type { margin-top: 0; }
.card h2 { font: 700 1.15rem var(--font-titulo); margin: 22px 0 10px; padding: 0; border: 0; color: var(--tinta); }
.card h3 { font-weight: 700; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.grid-form label, .grid-form fieldset, .inline-form label { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); min-width: 0; }
.grid-form p { margin: 0; font-weight: 400; }
.f-wide, .f-actions, .f-coords { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--linea-f); border-radius: var(--r-s); background: #fff;
  color: var(--tinta); font: 400 15px var(--font-texto);
}
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235E584D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
textarea { font: 13px/1.45 var(--mono); resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 163, 90, .25); }
input::placeholder, textarea::placeholder { color: var(--gris-c); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; padding: 0; accent-color: var(--oro-o); box-shadow: none; }
input[type=range] { padding: 0; min-height: 0; border: 0; accent-color: var(--oro-o); box-shadow: none; }
select option:disabled { color: #A09A90; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset.mode { display: flex; }
.mode { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
.mode legend { width: 100%; margin-bottom: 6px; }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; color: var(--tinta) !important; font-size: .92rem !important; }

/* Opciones tipo chip (radio/checkbox) y sub-pestañas: segmentos píldora */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-f); background: #fff; color: var(--tinta); font: 500 14px var(--font-texto);
}
.grid-form .chip, .inline-form .chip { flex-direction: row; gap: 8px; color: var(--tinta); font-weight: 500; font-size: 14px; }
.chip:hover { border-color: var(--tinta); }
.chip:has(input:checked) { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.chip input { accent-color: var(--oro); }
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 0; padding: 4px; border-radius: 999px; background: var(--hueso); width: fit-content; max-width: 100%; }
.subtabs button {
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--gris); font: 700 14px var(--font-texto);
}
.subtabs button:hover { color: var(--tinta); }
.subtabs button.active { background: var(--noche); color: var(--crema); }
.paste-box { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.paste-box p { margin: 0; }
.pick-info { font-size: .86rem; font-weight: 400; margin-top: 4px; min-height: 1.2em; color: var(--tinta); }
.pick-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.pick-list button { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; color: var(--tinta); padding: 8px 10px; font: inherit; font-size: .88rem; cursor: pointer; }
.pick-list button:hover { background: var(--hueso); }
.coord { font-variant-numeric: tabular-nums; color: var(--gris); white-space: nowrap; }
.mono { font-family: var(--mono); }

/* ================= Avisos ================= */
.result { display: flex; flex-direction: column; gap: 12px; }
.card .result { margin-top: 14px; }
.result:empty { display: none; }
.warn, .err, .ok, .warn-box { border-radius: var(--r-s); padding: 10px 14px; font-size: .9rem; border: 0; }
.warn { background: var(--prog-bg); color: #6B4A00; }
.err { background: var(--rojo-bg); color: var(--rojo); }
.ok { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.warn-box { background: var(--prog-bg); color: #6B4A00; border-left: 4px solid var(--oro); }
.warn-box p { margin: .2rem 0 .4rem; }
.warn-box ul { margin: 0; padding-left: 1.1rem; }
.warn-box a { color: var(--prog); font-weight: 700; }
.missing { color: var(--prog); font-style: italic; }
.missing-v { color: var(--rojo); }
.panel-note { background: var(--hueso); border-radius: var(--r-s); padding: 10px 14px; }
.note { background: var(--hueso); border-left: 3px solid var(--oro); border-radius: 0 10px 10px 0; padding: 8px 12px; white-space: pre-wrap; }
.hours-warn, .warn-inline { color: var(--prog); font-size: .82rem; font-weight: 700; }

/* ================= Tablas ================= */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.tbl th, .tbl td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--linea); vertical-align: middle; text-align: left; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1; background: var(--hueso); color: var(--gris); white-space: nowrap;
  font: 700 .74rem var(--font-texto); text-transform: uppercase; letter-spacing: .06em;
}
.tbl tbody th { font-weight: 700; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover, .tbl tbody tr.active { background: #FBF8EF; }
.tbl tfoot th, .tbl tfoot td { font-weight: 700; background: var(--hueso); border-top: 1px solid var(--linea-f); border-bottom: 0; }
.num, .tbl .num, .tbl thead th.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.zero { color: #B4AEA2; }
.tbl .role { background-color: rgba(201, 163, 90, .08); font-weight: 700; }
.tbl thead .role { background: var(--oro-c); }
.tbl tr.stale, .tbl tr.stale:hover, .tbl tr.off-hours, .tbl tr.off-hours:hover { background: #FBF3DE; }
.tbl tr.late, .tbl tr.late:hover { background: #FBEDEB; }
.tbl .state .countdown { margin: 0; font-size: .88rem; }
.tbl.reports tbody tr, .tbl tbody tr[data-id], .alliance tbody tr { cursor: pointer; }
.alliance tr.nodata { color: var(--gris); }
.sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; text-transform: inherit; letter-spacing: inherit; }
.sort:hover { color: var(--tinta); }
.troops .vname { min-width: 7.5rem; position: sticky; left: 0; z-index: 1; background: #fff; }
.troops tbody tr:hover .vname { background: #FBF8EF; }
.troops tr.stale .vname { background: #FBF3DE; }
.troops .vname span:first-child { display: block; color: var(--tinta); }
.troops .vname .coord, .troops .vname .flag { font-size: .76rem; font-weight: 400; }
.troops td.num { line-height: 1.2; }
.flag { color: var(--prog); white-space: nowrap; }
.lvl { display: block; font-size: .7rem; color: var(--oro-o); font-weight: 700; }
.lvl-cell, .level { color: var(--oro-o) !important; font-weight: 700; }
.name { color: var(--tinta); font-weight: 700; }
.age { font-size: .8rem; color: var(--gris); white-space: nowrap; }
.ts-sel { width: auto; min-height: 0; padding: 4px 30px 4px 10px; font-size: .86rem; background-position: right 10px center; }
.ts-sel.saved { border-color: var(--ok); }
.tbl.manual .vname { min-width: 6.5rem; position: sticky; left: 0; z-index: 1; background: #fff; }
.tbl.manual .vname span { display: block; }
.tbl.hours input[type=time] { width: auto; min-height: 0; padding: 5px 8px; font-size: .9rem; border-radius: 8px; }
.tbl tfoot tr.sum th, .tbl tfoot tr.sum td { background: var(--hueso); }
.stamps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; }
.stamps .lbl { margin-bottom: 2px; }
.dual-mini { display: flex; flex-direction: column; line-height: 1.25; font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--tinta); }
.dual-mini small { font-size: .74rem; color: var(--gris); }
.dual-mini .tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.legend { margin: 10px 0 6px; }
.unit-legend { margin: 6px 0 10px; font-size: .82rem; }
.unit-legend summary { cursor: pointer; color: var(--gris); }
.unit-legend ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; }
.unit-legend b { display: inline-block; min-width: 2.6em; }

/* ================= Calculadoras y tiempos ================= */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv > div, .time-card { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 12px 16px; }
.time-card.accent { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 163, 90, .18); }
.k, .lbl { display: block; font: 700 .72rem var(--font-texto); text-transform: uppercase; letter-spacing: .07em; color: var(--gris); }
.v { font: 700 1.2rem var(--font-titulo); font-variant-numeric: tabular-nums; }
.v.big { font-size: 1.6rem; color: var(--tinta); }
.times { display: grid; gap: 12px; }
.dual-srv { font-variant-numeric: tabular-nums; }
.dual-srv b { font: 800 1.8rem var(--font-titulo); letter-spacing: -.01em; }
.dual-srv .d, .dual-loc .d { color: var(--gris); font-size: .84rem; }
.dual-loc { color: var(--gris); font-size: .95rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dual .tag { font-size: .7rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
[data-time="server"] .dual-loc, [data-time="server"] .dual-mini small { display: none !important; }
[data-time="local"] .dual-srv, [data-time="local"] .dual-mini > span:first-child { display: none !important; }
[data-time="local"] .dual-loc { font-size: 1.1rem; color: var(--tinta); }
.countdown { margin-top: 8px; font: 700 1.05rem var(--font-titulo); font-variant-numeric: tabular-nums; color: var(--ok); }
.countdown.soon { color: var(--prog); }
.countdown.late { color: var(--rojo); }
#send-result > .muted, #inactive-result > .muted, #inactive-result > p { background: var(--hueso); border-radius: var(--r-s); padding: 8px 12px; margin: 0; color: var(--tinta); }
.big-steps { margin: 4px 0 2px; padding-left: 1.6rem; display: flex; flex-direction: column; gap: 10px; font-size: 1rem; }
.big-steps li::marker { font: 800 1.1rem var(--font-titulo); color: var(--oro-o); }
.big-steps .btn { margin-left: 6px; vertical-align: middle; }
.steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 6px; }
.steps li::marker { font: 800 1rem var(--font-titulo); color: var(--oro-o); }
.working { display: block; font-size: .74rem; color: var(--gris-c); font-weight: 400; }
.tribe-pick { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; max-width: 16rem; }

/* ================= Sesión, grupo y permisos ================= */
.login-invite { margin: 6px 0 12px; }
.login-invite p { margin: 2px 0 0; }
.login-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.dev-login { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px dashed var(--linea-f); border-radius: var(--r-s); }
.dev-login input { width: 9rem; min-height: 36px; padding: 6px 10px; font-size: .88rem; }
.perm-group { font: 700 .95rem var(--font-titulo); margin: 12px 0 4px; }
.perm-list { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.perm-list li.on { color: var(--ok); font-weight: 700; }
.perm-list li.off { color: var(--gris-c); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.perm-fs { background: #fff; border: 1px solid var(--linea) !important; border-radius: var(--r-s); padding: 8px 12px 10px !important; }
.perm-fs legend { font: 700 .9rem var(--font-titulo); padding: 0 4px; }
.perm-check { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; padding: 3px 0; cursor: pointer; }
.perm-check input, .unit-opt input[type=checkbox] { margin-top: 3px; }
details.rank, details.box, details.advanced, .alarm-box, .changes, .calc, .target, .order, .sim-side, .preset-card, .raid-timer {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 12px 14px; margin: 10px 0;
}
details > summary { cursor: pointer; font-weight: 700; }
.rank-name { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; margin-top: 8px; max-width: 20rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0; }
.inline-form input, .inline-form select { width: auto; min-width: 7rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.copy-row { display: flex; gap: 8px; margin: 6px 0 10px; }
.copy-row input { font: 12px var(--mono); }
.copy-text { width: 100%; margin-top: 6px; font: 12px/1.4 var(--mono); }
.group-head { margin-bottom: 8px; }
.gate p { margin: .4rem 0; }
.grow { flex: 1; min-width: 200px; }
.grow input { width: 100%; }

/* ================= Ops, órdenes, defensa ================= */
.target-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-bottom: 8px; }
.unit-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-opt { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--linea-f); border-radius: 999px; padding: 4px 12px; font-size: .86rem; font-weight: 500 !important; color: var(--tinta) !important; flex-direction: row !important; }
.unit-opt.on { background: var(--oro-c); border-color: var(--oro); }
.unit-opt .unit-count { width: 5.5rem; min-height: 0; padding: 4px 8px; font-size: .86rem; border-radius: 8px; }
.preview { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: var(--hueso); border-radius: var(--r-s); padding: 8px 12px; font-size: .88rem; }
.order.late { border-color: rgba(142, 27, 27, .3); background: #FBEDEB; }
.order header { font: 700 1.05rem var(--font-titulo); }
.order p { margin: 4px 0; }
.order .times { margin-top: 6px; }
.order.ringing, .raid-timer.ringing { outline: 3px solid var(--oro); }
.order-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.alarm-box p { margin: 0 0 4px; }
.alarm-min { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.alarm-min input { width: 4.6rem; min-height: 0; padding: 5px 8px; }
.game-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slot { white-space: nowrap; }
.call > h1 { font-size: 1.3rem !important; }
.call-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; }
.call-meta .grow { flex: 1; min-width: 200px; }
.progress { height: 10px; background: var(--hueso); border-radius: 99px; overflow: hidden; margin: 4px 0; }
.progress span { display: block; height: 100%; background: var(--oro); border-radius: 99px; }
.unit-times { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.unit-times li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.unit-times .ok-t b { color: var(--ok); }
.unit-times .late-t { color: var(--rojo); }
.preset-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.preset-card { border-top: 4px solid var(--ok); margin: 0; }
.preset-card.preset-officer { border-top-color: var(--oro); }
.preset-card.preset-leader { border-top-color: var(--noche); }
.preset-card h3 { font: 700 1.05rem var(--font-titulo); margin: 0 0 4px; }
.preset-card p { margin: 4px 0; }
.prio-card-high { border-color: rgba(142, 27, 27, .35); box-shadow: 0 0 0 3px rgba(142, 27, 27, .12), var(--sombra); }
.up { color: var(--ok); font-weight: 700; }
.down { color: var(--rojo); font-weight: 700; }
.changes { background: var(--hueso); border: 0; font-size: .88rem; }
.changes ul { margin: 4px 0 0; padding-left: 1.2rem; }

/* Ataques entrantes, calculador, simulador */
.wave { border-top: 1px solid var(--linea); padding: 12px 0; }
.wave p { margin: 4px 0; }
.wave-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: flex-start; }
.calc h3 { margin: 0 0 4px; font-size: .95rem; }
.calc-res { margin: 4px 0 8px; }
.calc-head { font: 700 1.05rem var(--font-titulo); margin: 2px 0 6px; color: var(--tinta); }
.calc-head.head-catapults, .calc-head.head-rams_chief { color: var(--rojo); }
.calc .unit-times, .calc-res .unit-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
.sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim-side { min-width: 0; margin: 0; }
.sim-side legend { font: 700 1rem var(--font-titulo); padding: 0 4px; }
.sim-units input { width: 100%; min-width: 0; max-width: 7.5rem; min-height: 0; padding: 5px 8px; text-align: right; border-radius: 8px; }
.sim-units td { padding: 3px 4px; }
.sim-group { border-top: 1px dashed var(--linea-f); margin-top: 10px; padding-top: 8px; }
.sim-points { display: flex; flex-wrap: wrap; gap: 12px; }
.sim-points .time-card { flex: 1; min-width: 200px; }
.sim-points .v { font-size: 1.4rem; display: block; }
.sim-winner { font-size: 1.1rem; }
.need-n { font: 700 1.2rem var(--font-titulo); }
.report-when { margin: 2px 0 6px; }
#bonus-in { width: 5rem; }
.tool { margin-top: 8px; }
.res { white-space: nowrap; }
.fb { border-top: 1px solid var(--linea); padding: 10px 0; }
.fb p { margin: 3px 0; white-space: pre-wrap; }

/* Gráfico */
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--linea-f); border-radius: 999px; padding: 4px 12px; font: 500 .82rem var(--font-texto); cursor: pointer; }
.legend-item.off { opacity: .45; text-decoration: line-through; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.chart-box { position: relative; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; overflow: hidden; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg .grid { stroke: #ECE8DE; stroke-width: 1; }
.chart-svg .axis { font: 11px var(--font-texto); fill: var(--gris); }
.chart-svg .hover-line { stroke: var(--gris-c); stroke-dasharray: 3 3; }
.chart-tip { position: absolute; top: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 6px 10px; font-size: .8rem; box-shadow: var(--sombra); pointer-events: none; white-space: nowrap; }
.chart-tip div { display: flex; gap: 6px; align-items: center; }

/* Reloj de atracos */
.raid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.raid-timer { margin: 0; border-top: 4px solid var(--linea-f); }
.raid-timer.state-running { border-top-color: var(--ok); }
.raid-timer.state-done { border-top-color: var(--oro); background: #FDF8EC; }
.raid-clock { font: 800 2.1rem/1.1 var(--font-titulo); font-variant-numeric: tabular-nums; margin: 4px 0; }
.raid-state { color: var(--gris); margin-bottom: 4px; }
.raid-mode { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.raid-mode select { min-height: 0; padding: 5px 28px 5px 10px; font-size: .86rem; background-position: right 10px center; }

/* Diálogos */
.sheet { border: 0; border-radius: var(--r); background: var(--papel); color: var(--tinta); padding: 0; width: min(520px, calc(100vw - 24px)); max-height: 80vh; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.sheet::backdrop { background: rgba(22, 19, 15, .55); }
.sheet-inner { display: flex; flex-direction: column; gap: 10px; padding: 18px; max-height: 80vh; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; font: 700 1.15rem var(--font-titulo); }
.tz-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 200px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); }
.tz-list button { width: 100%; display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; border-radius: 8px; color: var(--tinta); padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; }
.tz-list button:hover, .tz-list button.sel { background: var(--oro-c); }
.tz-list small { color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ================= Inicio (maqueta) ================= */
.home-main { flex: 1; }
.pg-home .wrap { padding-top: 0; padding-bottom: 0; flex: none; display: block; }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 56px 0 96px; }
.ceja { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.hero h1 { font-weight: 800; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.025em; margin: 16px 0 20px; color: #FBF4E2; }
.oro { color: var(--oro); }
.hero p.lead { font-size: 18px; color: rgba(241, 226, 192, .78); max-width: 520px; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cta .btn { height: 48px; }
.invite-form { margin-top: 16px; max-width: 520px; }
.invite-form label { display: block; font-size: 14px; color: rgba(241, 226, 192, .78); margin-bottom: 8px; }
.invite-row { display: flex; gap: 8px; }
.invite-row input { flex: 1; min-width: 0; border-radius: 999px; padding: 0 18px; height: 44px; background: rgba(241, 226, 192, .08); border-color: rgba(241, 226, 192, .28); color: var(--crema); }
.invite-row input::placeholder { color: rgba(241, 226, 192, .45); }
.invite-row .btn { height: 44px; }
.invite-err { color: #F2B8AE; font-size: 14px; margin: 8px 0 0; }
.confianza { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 14px; color: rgba(241, 226, 192, .66); }
.confianza > span { display: flex; align-items: center; gap: 8px; }
.confianza svg { width: 16px; height: 16px; color: var(--oro); flex: none; }
.previa { position: relative; display: grid; gap: 16px; }
.tarjeta { background: var(--papel); color: var(--tinta); border-radius: var(--r); padding: 20px 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.tarjeta .cab-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tarjeta h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ola { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linea); }
.ola .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); }
.ola .dot.f { background: var(--gris-c); }
.ola b { font-weight: 700; font-size: 15px; }
.ola small { display: block; color: var(--gris); font-size: 13px; }
.ola .hora { font: 700 18px var(--font-titulo); font-variant-numeric: tabular-nums; }
.barras { display: grid; gap: 12px; }
.barra { display: grid; grid-template-columns: 86px 1fr 64px; gap: 12px; align-items: center; font-size: 14px; }
.barra i { display: block; height: 10px; border-radius: 99px; background: var(--hueso); overflow: hidden; }
.barra i em { display: block; height: 100%; border-radius: 99px; }
.barra b { text-align: right; font-variant-numeric: tabular-nums; }
.b-atk { width: 72%; background: var(--rojo); }
.b-def { width: 88%; background: var(--oro); }
.b-scout { width: 24%; background: var(--gris-c); }
.t2 { margin-left: 48px; }
.hola { position: relative; z-index: 1; padding: 36px 0 48px; }
.hola h1 { font-weight: 800; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; color: #FBF4E2; }
.hola-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hola-cta { margin: 20px 0 0; }
.seccion { padding: 96px 0; }
.seccion-pasos { padding-top: 0; }
.pg-home .seccion .wrap { display: block; }
.titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.titulo h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.titulo p { color: var(--gris); max-width: 460px; margin: 10px 0 0; }
.leyenda { display: flex; gap: 10px; }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cat { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 22px 8px 10px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.cat-cab { display: flex; align-items: center; gap: 12px; padding: 0 14px 14px; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--noche); color: var(--oro); flex: none; }
.ico svg { width: 20px; height: 20px; }
.cat-ancho { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.cat-ancho .cat-cab { grid-column: 1 / -1; }
@media (max-width: 640px) { .cat-ancho { grid-template-columns: 1fr; } }
.grilla > .sit-inbox, .sit-inbox { margin: 0 0 20px; }
.cat h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 12px;
  border-top: 1px solid var(--linea); font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--tinta);
}
.item:hover { background: var(--hueso); border-top-color: transparent; color: var(--tinta); }
.item:hover + .item { border-top-color: transparent; }
.item .pill, .item .wip { flex: none; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.paso { border-radius: var(--r); padding: 28px; background: var(--noche); color: var(--crema); position: relative; overflow: hidden; }
.paso .n { font: 800 15px var(--font-titulo); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: var(--tinta); margin-bottom: 18px; }
.paso h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; color: #FBF4E2; }
.paso p { color: rgba(241, 226, 192, .72); font-size: 15px; margin: 0; }
.paso kbd { font: 700 13px var(--font-texto); padding: 2px 7px; border-radius: 6px; background: rgba(241, 226, 192, .12); border: 0; color: var(--crema); }
.keys { white-space: nowrap; }
.keys kbd { margin: 0 2px; }
.notfound { max-width: 640px; }

/* ================= Pie ================= */
.foot { background: var(--noche); color: rgba(241, 226, 192, .62); font-size: 14px; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: var(--ancho); margin: 0 auto; padding: 28px 24px; }
.foot .logo-emblem { width: 28px; height: 28px; }
.foot .logo-name { font-size: 16px; }
.foot a { color: rgba(241, 226, 192, .62); }
.foot a:hover { color: var(--crema); }
.made-by { font-weight: 500; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7FB069; margin-right: 8px; flex: none; }
.punto.stale { background: #E0A43A; }
.data-state { display: inline-flex; align-items: center; }

/* ================= Inicio: descripción de cada función ================= */
.item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-desc { color: var(--gris); font-size: 13px; font-weight: 400; line-height: 1.35; }

/* ================= Entrar ================= */
.entrar { max-width: 1080px; }
.never-pw { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--ok); font-weight: 700; font-size: .95rem; }
.never-pw svg { width: 18px; height: 18px; flex: none; }
.metodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metodo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; }
.metodo .n { font: 800 13px var(--font-titulo); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--oro); }
.card .metodo h2 { margin: 6px 0 0; font-size: 1.1rem; }
.metodo p { margin: 0; }
.metodo .btn.discord { align-self: flex-start; margin-top: 8px; }
.stack-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.stack-form label { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; }
.stack-form .btn { align-self: flex-start; }
.stack-form .links { margin: 2px 0 0; }
.panel-entrar { max-width: 640px; }
.card .panel-entrar h2 { margin-top: 4px; }
.recovery-code { font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; padding: 16px 18px; border-radius: var(--r-s); background: var(--hueso); border: 1px dashed var(--linea-f); user-select: all; word-break: break-all; }
.demo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1080px; }
.card.demo-card h2 { margin: 0 0 4px; }
.demo-card p { margin: 0; }
.dev-login { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dev-login input { width: 7rem; }

/* ================= Modo prueba ================= */
.demo-bar {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--oro); color: var(--tinta); font-size: 14px;
}
.demo-bar .btn { height: 34px; background: var(--noche); color: var(--crema); }
.demo-bar .btn:hover { background: var(--noche3); color: var(--crema); }

/* ================= Responsive ================= */
@media (min-width: 760px) {
  .grid-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f-coords { grid-column: span 2; }
  .grid-form .f-wide { grid-column: span 2; }
  .grid-form .village-pick, .grid-form .mode { grid-column: 1 / -1; }
  .f-actions { grid-column: 1 / -1; }
  .times { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 641px) and (max-width: 1439px) {
  .con-sesion .clock-chip .cc-loc-part { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .con-sesion .logo-sub { display: none; }
  .con-sesion .menu-group.user > summary { max-width: 9.5rem; }
}
@media (max-width: 1279px) {
  .con-sesion { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
  .con-sesion .menu-toggle { display: flex; }
  .con-sesion .nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 6px; }
  .con-sesion .nav.open { display: flex; }
  .con-sesion .nav .menu-group > summary { justify-content: space-between; }
  .con-sesion .nav .menu-panel { position: static; margin-top: 6px; box-shadow: none; }
}
@media (max-width: 960px) {
  .top-in { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
  .menu-toggle { display: flex; }
  .nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 6px; }
  .nav.open { display: flex; }
  .menu-group > summary { justify-content: space-between; }
  .nav .menu-panel { position: static; margin-top: 6px; box-shadow: none; }
  .metodos { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 72px; }
  .t2 { margin-left: 0; }
  .pasos { grid-template-columns: 1fr; }
  .sim-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap, .top-in, .foot-in { padding-left: 16px; padding-right: 16px; }
  .wrap { padding-top: 20px; gap: 16px; }
  .top-note { max-width: calc(100% - 32px); }
  .logo-sub { display: none; }
  .logo-name { font-size: 19px; }
  .logo-emblem { width: 34px; height: 34px; }
  .idiomas button { padding: 0 8px; }
  .idiomas button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .con-sesion .acciones { flex-wrap: wrap; }
  .clock-chip { order: 5; }
  .menu-group.user > summary { max-width: 8rem; }
  .grilla { grid-template-columns: 1fr; }
  .cta .btn { width: 100%; }
  .seccion { padding: 64px 0; }
  .seccion-pasos { padding-top: 0; }
  .barra { grid-template-columns: 72px 1fr 56px; }
  .card { padding: 18px 16px; }
  .card > h1 { font-size: 1.45rem; }
  .grid-form { gap: 12px; }
  .btn { width: 100%; }
  .btn.small, .btn-sm, .row-actions .btn, .login-box .btn, .big-steps .btn, .inline-form .btn { width: auto; }
  .tbl { font-size: .84rem; }
  .tbl th, .tbl td { padding: 8px; }
  .kv { grid-template-columns: 1fr; }
  .foot-in { gap: 12px; }
  .invite-row { flex-direction: column; }
  .invite-row .btn { width: 100%; }
}
@media (max-width: 400px) {
  .top-in:not(.con-sesion) .idiomas button { padding: 0 6px; }
}

/* ================= Sitters: tarjeta pergamino (formato aprobado) ================= */
/* Cinzel y EB Garamond (SIL OFL, licencias en fonts/pergamino/), auto-alojadas, con latin-ext para el lituano. */
@font-face { font-family: Cinzel; src: url(fonts/pergamino/cinzel-latin.woff2) format("woff2"); font-weight: 400 900; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Cinzel; src: url(fonts/pergamino/cinzel-latin-ext.woff2) format("woff2"); font-weight: 400 900; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; src: url(fonts/pergamino/ebgaramond-latin.woff2) format("woff2"); font-weight: 400 800; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; src: url(fonts/pergamino/ebgaramond-latin-ext.woff2) format("woff2"); font-weight: 400 800; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.marco { background: #2b2419; border-radius: var(--r); padding: 16px; overflow: hidden; }
.marco-in { position: relative; overflow: hidden; }
.escala { width: 1100px; transform-origin: top left; }
.s-sheet {
  position: relative; width: 1100px; padding: 60px 68px 54px; font-family: "EB Garamond", Georgia, serif; font-style: normal; color: #2f2512; text-align: left;
  background: radial-gradient(1200px 500px at 20% 0%, #f3e6c8 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #e6d2a8 0%, transparent 65%), linear-gradient(170deg, #f5ead1, #e9d9b4);
  box-shadow: inset 0 0 90px rgba(140, 105, 50, .18); border-radius: 4px; line-height: 1.2;
}
.s-sheet * { font-style: normal; }
.s-sheet::before { content: ""; position: absolute; inset: 16px; border: 1px solid #b99a62; opacity: .55; pointer-events: none; }
.s-sheet::after { content: ""; position: absolute; inset: 22px; border: 1px solid #b99a62; opacity: .28; pointer-events: none; }
.s-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.s-eyebrow { font-family: Cinzel, serif; font-size: 15px; letter-spacing: 4.5px; color: #8a6c38; text-transform: uppercase; }
.s-h1 { font-family: Cinzel, serif; font-size: 60px; color: #3b2e18; letter-spacing: 1px; margin: 12px 0 0; line-height: 1; overflow-wrap: anywhere; }
.s-away { font-family: Cinzel, serif; font-size: 17px; letter-spacing: 2px; color: #8a6c38; margin-top: 16px; text-transform: uppercase; }
.s-away b { color: #3b2e18; font-weight: 700; }
.s-sep { margin: 0 6px; }
.s-crest { flex: none; margin-top: 2px; filter: drop-shadow(0 7px 14px rgba(70, 50, 20, .38)); }
.s-rule { height: 2px; background: linear-gradient(90deg, transparent, #b08a4a 10%, #b08a4a 90%, transparent); margin: 30px 0 0; }
.s-sheet table { width: 100%; border-collapse: collapse; margin-top: 16px; table-layout: fixed; }
.s-sheet th { font-family: Cinzel, serif; font-weight: 400; font-size: 16px; letter-spacing: 3px; color: #8a6c38; text-transform: uppercase; text-align: left; padding: 0 0 16px; border-bottom: 1.5px solid #c0a267; background: none; position: static; }
.s-sheet th:first-child { width: 230px; }
.s-sheet th:nth-child(2) { width: 350px; }
.s-sheet td { padding: 22px 0; border-bottom: 1px solid rgba(176, 138, 74, .32); vertical-align: middle; }
.s-sheet tbody tr:last-child td { border-bottom: none; }
.s-sheet tr.g td { font-family: Cinzel, serif; font-size: 19px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #3b2e18; padding: 8px 18px; border-bottom: none; }
.s-sheet .v { font-family: Cinzel, serif; font-size: 34px; font-weight: 700; color: #3b2e18; overflow-wrap: anywhere; }
.s-sheet .c { font-size: 22px; color: #8a7347; margin-left: 11px; white-space: nowrap; }
.s-sheet .o { font-size: 31px; color: #2f2512; font-weight: 600; line-height: 1.25; padding-right: 22px; overflow-wrap: anywhere; }
.s-sheet .o.no { color: #9b8862; font-weight: 500; }
.s-sheet .sb { display: block; font-size: 27px; color: #5e4a28; font-weight: 500; margin-top: 8px; }
.s-note { margin-top: 28px; padding: 24px 32px; background: rgba(176, 138, 74, .18); border-left: 6px solid #8a6c38; overflow-wrap: anywhere; }
.s-note + .s-note { margin-top: 16px; }
.s-note small { display: block; font-family: Cinzel, serif; font-size: 15px; letter-spacing: 3px; color: #8a6c38; margin-bottom: 8px; text-transform: uppercase; }
.s-note b { font-size: 30px; color: #3b2e18; font-weight: 700; }
.s-note span { font-size: 28px; color: #5e4a28; }

/* ================= Sitters: Instrucciones (editor) ================= */
.sit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sit-head h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.sit-head p { margin: 8px 0 0; color: var(--gris); }
.sit-head .row-actions { margin: 0; }
.sit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 28px; align-items: start; }
.sit-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sit-col > .card { margin: 0; }
.sit-opts { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 16px; }
.lbl-up { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.horas { display: flex; align-items: center; gap: 8px; }
.horas input { text-align: center; font: 700 17px var(--font-titulo); min-width: 0; }
.conv { margin: 8px 0 0; font-size: 13px; color: var(--gris); }
.conv b { color: var(--tinta); }
.sec-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-cab h2 { margin: 0; font: 700 22px var(--font-titulo); letter-spacing: -.01em; }
.sec-cab .acc { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-s { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-f); background: var(--papel);
  font: 700 12px var(--font-texto); color: var(--tinta); }
button.chip-s { cursor: pointer; }
button.chip-s:hover { border-color: var(--tinta); }
.chip-s.on { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.card.aldeas { padding: 0; overflow: hidden; }
.grupo-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 22px; font: 800 12px var(--font-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.grupo-b input[type=color] { width: 28px; height: 22px; min-height: 0; padding: 0; border: 1px solid var(--linea-f); border-radius: 6px; background: none; cursor: pointer; }
.aldea { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 18px 22px; border-top: 1px solid var(--linea); }
.grupo-b + .aldea, .aldeas > .aldea:first-child { border-top: 0; }
.nom b { display: block; font: 800 20px var(--font-titulo); overflow-wrap: anywhere; }
.nom small { color: var(--gris-c); font-size: 13px; font-variant-numeric: tabular-nums; }
.orden { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orden .sub-in { font-size: 13px; }
.add-sub { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--oro-o); font: 700 13px var(--font-texto); cursor: pointer; }
/* Atajos de Instrucciones para el sitter: un panel flotante debajo del campo enfocado (no empuja nada) */
.orden { position: relative; }
.atajos { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max(100%, 300px); max-width: min(340px, calc(100vw - 40px));
  padding: 8px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(42, 41, 39, .16); }
.orden:focus-within .atajos { display: grid; }
.atajos-troops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.atajos-build { grid-template-columns: 1fr; gap: 2px; }
.atajos button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 10px; background: none;
  font: 600 13px/1.2 var(--font-texto); color: var(--tinta); text-align: left; cursor: pointer; }
.atajos-troops button { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 4px; text-align: center; font-size: 11.5px; }
.atajos button .uicon { width: 30px; height: 30px; flex: none; }
.atajos button:hover, .atajos button:focus-visible { background: var(--hueso); outline: none; }
.mas-aldeas { padding: 12px 22px 14px; border-top: 1px solid var(--linea); color: var(--gris); font-size: 14px; }
.mas-aldeas button { border: 0; background: none; padding: 0; color: var(--oro-o); font: 700 14px var(--font-texto); cursor: pointer; }
.paste-game { padding: 16px 22px; border-bottom: 1px solid var(--linea); background: var(--hueso); display: flex; flex-direction: column; gap: 10px; }
.paste-game textarea { min-height: 110px; }
.bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card.bloque { margin: 0; padding: 18px 20px; }
.bloque h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bloque h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); }
.bloque textarea { min-height: 66px; }
.fila2 { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; }
.bloque .sel-from { margin-top: 10px; }
.calc { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--oro-c); font-size: 13px; }
.calc b { font: 700 15px var(--font-titulo); }
.previa { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.previa-cab { display: flex; align-items: center; justify-content: space-between; }
.previa-cab h2 { margin: 0; font: 700 18px var(--font-titulo); }
.acciones-p { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acciones-p .btn { height: 46px; width: 100%; }
.acciones-p .ancho { grid-column: 1 / -1; }
.btn-negro { background: var(--noche); color: var(--crema); }
.btn-negro:hover { background: var(--noche3); color: var(--crema); }
.nota-p { font-size: 13px; color: var(--gris); margin: 0; text-align: center; }
.sit-msg:empty { display: none; }
.sit-link { display: flex; gap: 8px; }
.sit-link input { flex: 1; min-width: 0; }

/* ================= Sitters: Buscar ================= */
.find-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.card.semana { margin: 0; padding: 22px; }
.semana h2 { margin: 0 0 4px; font: 700 20px var(--font-titulo); }
.semana .tz { color: var(--gris); font-size: 14px; margin: 0 0 14px; }
.dia { padding: 14px 0; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; }
.dia > span { font-size: 14px; font-weight: 700; }
.dia small { font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.mini { position: relative; height: 10px; border-radius: 99px; background: var(--ok-bg); overflow: hidden; }
.mini i, .lane i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.mini i { background: var(--noche); }
.toggle { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linea); font-weight: 500; font-size: 14px; color: var(--tinta); }
input.sw { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 99px; background: #D9D3C6; position: relative; cursor: pointer; flex: none; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.sw:checked { background: var(--oro); }
.sw:checked::after { left: auto; right: 3px; }
.langs-w { padding: 12px 0; border-top: 1px solid var(--linea); font-weight: 500; font-size: 14px; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.langs label { cursor: pointer; position: relative; }
.langs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.langs input:checked + .chip-s { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.langs input:focus-visible + .chip-s { outline: 2px solid var(--oro); outline-offset: 2px; }
.semana .btn { width: 100%; margin-top: 14px; }
.semana .fine { font-size: 12px; color: var(--gris-c); margin: 12px 0 0; }
.tabs-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs-f .chip-s { height: 36px; padding: 0 16px; font-size: 14px; }
.tabs-f .dias { margin-left: auto; display: flex; gap: 6px; }
.card.lista { margin: 0; padding: 6px 0 0; }
.eje, .fila { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; gap: 20px; padding-left: 22px; padding-right: 22px; }
.eje { padding-top: 14px; padding-bottom: 6px; font-size: 12px; color: var(--gris-c); font-variant-numeric: tabular-nums; }
.ticks { position: relative; height: 16px; }
.ticks span { position: absolute; transform: translateX(-50%); }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }
.fila { align-items: center; padding-top: 22px; padding-bottom: 18px; border-top: 1px solid var(--linea); }
.quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--font-titulo); color: var(--crema); background: var(--noche3); flex: none; }
.av.mio { background: var(--oro); color: var(--tinta); }
.quien b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.quien small { display: block; color: var(--gris); font-size: 13px; }
.badge-s { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-o); }
.lineas { position: relative; display: grid; gap: 6px; }
.lane { position: relative; height: 12px; border-radius: 99px; background: #EFEAE0; overflow: hidden; }
.lane.yo i { background: var(--noche); }
.lane.el i { background: #7FB069; }
.ahora { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--rojo); border-radius: 2px; }
.ahora span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--rojo); white-space: nowrap; }
.cob { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pcts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pc { white-space: nowrap; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--hueso); color: var(--gris); }
.pc.alta { background: var(--ok-bg); color: var(--ok); }
.pc.media { background: var(--prog-bg); color: var(--prog); }
.pc.baja { background: #F3E1DE; color: var(--rojo); }
.cob .btn { height: 36px; font-size: 13px; }
.cob .row-actions { margin: 0; justify-content: flex-end; }
.leyenda-f { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 22px 18px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris); }
.leyenda-f span { display: flex; align-items: center; gap: 8px; }
.leyenda-f i { width: 22px; height: 8px; border-radius: 99px; }
.leyenda-f .k-yo { background: var(--noche); }
.leyenda-f .k-el { background: #7FB069; }
.leyenda-f .k-ah { background: var(--rojo); width: 2px; height: 14px; }
.card.pedidos { margin: 22px 0 0; padding: 20px 22px; }
.pedidos h3 { margin: 0 0 12px; font: 700 18px var(--font-titulo); }
.ped { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linea); }
.ped p { margin: 0; font-size: 14px; color: var(--gris); overflow-wrap: anywhere; }
.ped p b { color: var(--tinta); }
.ped-form { padding: 14px 0; border-top: 1px solid var(--linea); }
.sit-inbox .marco { margin-top: 12px; }
.sit-inbox h2 { margin: 0; }
.crest-prev { width: 120px; }

@media (max-width: 1180px) {
  .sit-grid, .find-grid { grid-template-columns: minmax(0, 1fr); }
  .previa { position: static; }
}
@media (max-width: 760px) {
  .sit-opts, .bloques { grid-template-columns: 1fr; }
  .aldea { grid-template-columns: 1fr; gap: 10px; }
  .eje { display: none; }
  .fila { grid-template-columns: 1fr; gap: 12px; }
  .cob { align-items: flex-start; }
  .pcts, .cob .row-actions { justify-content: flex-start; }
  .ped { grid-template-columns: auto minmax(0, 1fr); }
  .ped .btn { grid-column: 1 / -1; }
  .tabs-f .dias { margin-left: 0; }
  .marco { padding: 10px; }
  .acciones-p { grid-template-columns: 1fr; }
}
.bloque textarea, .paste-game textarea { font: 400 15px/1.45 var(--font-texto); }

/* ================= Coordinación: barras, empujes, miembros y vigilancia ================= */
.bar2 { display: flex; height: 10px; border-radius: 99px; background: #EFEAE0; overflow: hidden; margin: 6px 0 4px; }
.bar2 span { display: block; height: 100%; }
.bar2 .b-ok { background: var(--ok); }
.bar2 .b-pend { background: #E0C27A; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 12px 0; }
.prog-block .lbl { display: block; }
.prog-block small { color: var(--gris); }
.ok-v { color: var(--ok); }
.call.is-closed { opacity: .92; }
.closed-list > summary { cursor: pointer; }
.closed-list[open] > summary { margin-bottom: 12px; }
.closed-list .call { box-shadow: none; border: 1px solid var(--linea); }
.push-res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 12px 0; }
.push-res .prog-block small { display: block; }
.res-ico { display: inline-flex; align-items: center; gap: 6px; }
.res-ico i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.r-wood i { background: #8A5A2B; } .r-clay i { background: #B5643C; } .r-iron i { background: #6E7680; } .r-crop i { background: #D6A93A; }
.push-form .grid-form { margin-top: 10px; }
.sheet-tbl th[data-sort] { cursor: pointer; white-space: nowrap; }
.sheet-tbl th[data-sort]::after { content: " ↕"; color: var(--gris-c); font-weight: 400; }
.sheet-tbl td small, .sheet-tbl th small { display: block; color: var(--gris); font-weight: 400; }
.sheet-tbl th[scope=row] { min-width: 150px; }
.spec { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--hueso); }
.spec-off { background: #F6DEDA; color: var(--rojo); } .spec-def { background: #E3ECF8; color: #1D4F91; }
.spec-mixed { background: var(--prog-bg); color: var(--prog); } .spec-farmer { background: var(--ok-bg); color: var(--ok); } .spec-support { background: var(--noche-bg); color: var(--noche-t); }
.ev-day { margin: 16px 0 6px; font: 700 15px var(--font-titulo); }
.ev { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linea); }
.ev b { min-width: 0; overflow-wrap: anywhere; }
.ev .up { color: var(--ok); font-weight: 700; } .ev .down { color: var(--rojo); font-weight: 700; }
@media (max-width: 900px) {
  .push-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= Tanda B: correcciones, alarmas, Premium, oleadas y desborde ================= */
.sheet-tbl { font-size: .86rem; }
.sheet-tbl th, .sheet-tbl td { padding: 7px 8px; }
.sheet-tbl th[scope=row] { min-width: 130px; max-width: 190px; }
.sheet-tbl .dual-mini small { font-size: .74rem; }
.push-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.pa-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-note { flex-basis: 100%; font-size: 12px; }
.pa-right { display: flex; gap: 8px; margin-left: auto; }
.watch-share { flex-direction: row !important; align-items: center; gap: 6px !important; }
.watch-share input { margin: 0; }
.tf-prev { display: block; margin-top: 4px; font-weight: 400; }
.tf-prev.err-t { color: var(--rojo); }
.chip-premium { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font: 700 10.5px var(--font-texto);
  letter-spacing: .06em; text-transform: uppercase; color: #5C4310; background: linear-gradient(180deg, #F1DFA9, #D9B567); border: 1px solid #C9A35A; vertical-align: middle; }
h1 .chip-premium { margin-left: 8px; position: relative; top: -3px; }
.menu-panel a .chip-premium { margin-left: 6px; height: 17px; font-size: 9.5px; }
.item .chip-premium { margin-left: 6px; }
.alarm-pop { position: fixed; z-index: 90; top: 92px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  background: var(--papel); color: var(--tinta); border: 2px solid var(--oro); border-radius: var(--r); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); }
.alarm-pop.is-now { border-color: var(--rojo); }
.alarm-in { padding: 20px 22px; text-align: center; }
.alarm-kicker { margin: 0; font: 700 12px var(--font-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-o); }
.alarm-in h2 { margin: 4px 0 6px; font: 800 22px var(--font-titulo); overflow-wrap: anywhere; }
.alarm-count { font: 800 48px/1.1 var(--font-titulo); font-variant-numeric: tabular-nums; color: var(--noche); margin: 6px 0; }
.alarm-pop.is-now .alarm-count { color: var(--rojo); }
.alarm-times, .alarm-game { margin: 4px 0; font-size: 14px; }
.alarm-game { font-weight: 700; color: var(--prog); }
.alarm-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--rojo-bg); color: var(--rojo); font-size: 13px; font-weight: 700; }
.alarm-in .row-actions { justify-content: center; margin-top: 14px; }
.alarm-bar { position: fixed; z-index: 85; right: 20px; bottom: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  width: min(380px, calc(100vw - 32px)); padding: 14px 40px 14px 16px; border-radius: 16px; background: var(--noche); color: var(--crema); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); font-size: 13.5px; line-height: 1.4; }
.alarm-bar .btn { grid-column: 2; justify-self: start; }
.alarm-bar-ic { grid-row: 1 / span 2; align-self: start; font-size: 18px; }
.alarm-bar-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--crema); opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; }
.alarm-bar-x:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
@media (max-width: 640px) { .alarm-bar { right: 16px; left: 16px; width: auto; } }
.alarm-list { list-style: none; margin: 0; padding: 0; }
.alarm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.alarm-list li:first-child { border-top: 0; }
.alarm-left { font: 700 18px var(--font-titulo); font-variant-numeric: tabular-nums; }
.wave-tbl input[type=number] { width: 4.6rem; min-height: 32px; padding: 4px 6px; }
.wave-units { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.wave-units label { display: flex; flex-direction: column; font-size: 11px; color: var(--gris); }
.diff-ok { background: var(--ok-bg); color: var(--ok); font-weight: 700; border-radius: 10px; padding: 8px 12px; }
.diff-bad { background: var(--rojo-bg); color: var(--rojo); font-weight: 700; border-radius: 10px; padding: 8px 12px; }
.evasion-band { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--rojo); color: #fff; font-weight: 700; }
.ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.ov-res { border: 1px solid var(--linea); border-radius: var(--r-s); padding: 14px; background: #fff; }
.ov-res.is-over { border-color: var(--rojo); box-shadow: inset 0 3px 0 var(--rojo); }
.ov-res.is-ok { box-shadow: inset 0 3px 0 var(--ok); }
.ov-res h3 { margin: 0 0 6px; font-size: 16px; }
.ov-big { font: 800 22px var(--font-titulo); font-variant-numeric: tabular-nums; }
.ov-advice { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--oro-c); }
@media (max-width: 900px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wave-units label { width: 5.4rem; line-height: 1.15; }
.wave-units label span { min-height: 2.3em; display: flex; align-items: flex-end; }
.pg-members .wrap { max-width: 1400px; }
.sheet-tbl th[data-sort] { white-space: normal; }
.sheet-tbl th { line-height: 1.25; vertical-align: bottom; }
.sheet-tbl td.num { white-space: nowrap; }
.wave-tbl select[data-f=type] { min-width: 8.5rem; }
.wave-tbl select[data-f=village_key] { min-width: 12rem; }
/* Tanda C: reloj confiable */
.clock-note { position: fixed; z-index: 84; left: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px)); padding: 7px 12px; border-radius: 10px;
  background: var(--papel); border: 1px solid var(--oro); color: var(--tinta); font-size: 12.5px; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .45); }
.clock-note.is-bad { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 700; }
/* Planificador: las tropas de cada oleada en UNA fila de 11 columnas (como la Plaza del juego) */
.wave-tbl th, .wave-tbl td { padding: 8px 6px; }
.wave-tbl select[data-f=type] { min-width: 7.5rem; }
.wave-tbl select[data-f=village_key] { min-width: 10rem; max-width: 12rem; }
.wt-grid { display: grid; grid-template-columns: repeat(11, 3.4rem); gap: 4px; align-items: center; justify-items: center; }
.wt-grid span { font-size: 10.5px; line-height: 1.15; text-align: center; text-transform: none; letter-spacing: 0; max-width: 3.4rem; align-self: end; }
.wave-tbl .wt-grid input[type=number] { width: 3.4rem; min-height: 32px; padding: 4px 3px; text-align: right; }
.wave-tbl input[data-f=gap_s] { width: 4.4rem; }
.pg-waves .wrap { max-width: 1400px; }
.wave-tbl .wt-grid input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.wave-tbl .wt-grid input[type=number]::-webkit-inner-spin-button, .wave-tbl .wt-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.has-clock-note { padding-bottom: 56px; }

/* ================= Tanda D: ingreso (maqueta docs/diseno/entrar-v1/) ================= */
.pg-entrar .wrap, .pg-join .wrap { align-items: center; justify-content: center; padding-top: 48px; padding-bottom: 56px; }
.auth { width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--linea);
  box-shadow: 0 1px 0 rgba(21, 19, 15, .04), 0 30px 60px -24px rgba(21, 19, 15, .35); }
.auth-side { order: -1; position: relative; display: flex; flex-direction: column; padding: 52px 48px; background: var(--noche); color: var(--crema); }
.auth-side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 0% 0%, rgba(201, 163, 90, .16), transparent 60%); pointer-events: none; }
.auth-side img { width: 56px; height: 56px; }
.auth-h1 { font: 800 38px/1.08 var(--font-titulo); letter-spacing: -.02em; margin: 28px 0 14px; color: var(--crema); }
.auth-h1 em { font-style: normal; color: var(--oro); }
.auth-lead { color: rgba(241, 226, 192, .72); font-size: 16px; max-width: 380px; margin: 0; }
.auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: rgba(241, 226, 192, .9); }
.auth-points i { flex: 0 0 30px; height: 30px; border-radius: 9px; background: rgba(201, 163, 90, .14); display: grid; place-items: center; color: var(--oro); }
.auth-points i svg { width: 16px; height: 16px; }
.auth-points b { display: block; color: var(--crema); font-weight: 700; }
.auth-side-foot { margin: auto 0 0; padding-top: 36px; border-top: 1px solid var(--linea-o); font-size: 14px; color: rgba(241, 226, 192, .65); }
.auth-form { background: var(--papel); padding: 52px 48px; display: flex; flex-direction: column; }
.auth-panel { display: flex; flex-direction: column; flex: 1; }
.auth-panel[hidden] { display: none; }
.auth-form h2 { font: 800 30px var(--font-titulo); letter-spacing: -.01em; margin: 0; }
.auth-sub { color: var(--gris); margin: 6px 0 0; font-size: 15px; }
.auth-btn { position: relative; width: 100%; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 700 16px var(--font-texto); cursor: pointer; text-decoration: none; }
.auth-btn svg { width: 22px; height: 22px; flex: none; }
.auth-discord { margin-top: 28px; background: #5865F2; color: #fff; border: 0; box-shadow: 0 10px 24px -12px rgba(88, 101, 242, .8); }
.auth-discord:hover { background: #4752C4; color: #fff; }
.auth-google { margin-top: 12px; background: #fff; color: #1f1f1f; border: 1px solid rgba(21, 19, 15, .16); }
.auth-google:hover { background: #F8F8F8; color: #1f1f1f; }
.auth-mail { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.auth-mail:hover { border-color: var(--oro); color: var(--tinta); }
.auth-mail svg { width: 20px; height: 20px; }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.auth-btn .soon { position: absolute; right: 14px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hueso); color: var(--gris); }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--gris-c); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.auth-note { text-align: center; font-size: 13px; color: var(--gris-c); margin: 12px 0 0; }
.auth-trust { margin-top: auto; padding-top: 30px; display: grid; gap: 10px; }
.auth-trust div { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--gris); }
.auth-trust svg { width: 18px; height: 18px; color: var(--ok); flex: 0 0 18px; }
.auth-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--font-texto); color: var(--gris); background: none; border: 0; padding: 0; margin-bottom: 22px; cursor: pointer; }
.auth-back svg { width: 16px; height: 16px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--hueso); border-radius: 12px; padding: 4px; margin-top: 24px; }
.auth-tabs button { height: 40px; border-radius: 9px; border: 0; background: none; font: 700 14px var(--font-texto); color: var(--gris); cursor: pointer; }
.auth-tabs button.on { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(21, 19, 15, .12); }
.auth-fields { display: flex; flex-direction: column; }
.auth-fields[hidden] { display: none; }
.auth-field { display: block; margin-top: 18px; }
.auth-field > span:first-child { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.auth-field input { width: 100%; height: 50px; border: 1px solid rgba(21, 19, 15, .18); border-radius: 12px; background: #fff; padding: 0 16px; font-size: 16px; }
.auth-field input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(201, 163, 90, .18); }
.auth-field small { display: block; margin-top: 6px; color: var(--gris-c); font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; top: 5px; width: 40px; height: 40px; border: 0; background: none; color: var(--gris-c); cursor: pointer; display: grid; place-items: center; border-radius: 10px; }
.pw-eye.on, .pw-eye:hover { color: var(--tinta); }
.pw-eye svg { width: 20px; height: 20px; }
.auth-prim { margin-top: 24px; height: 54px; border-radius: 14px; border: 0; background: var(--noche); color: var(--crema); font: 700 16px var(--font-texto); cursor: pointer; }
.auth-prim:hover { background: var(--noche3); }
.auth-alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--gris); }
.auth-alt .link, .auth-msg .link { background: none; border: 0; padding: 0; color: var(--oro-o); font: 700 14px var(--font-texto); cursor: pointer; text-decoration: none; }
.auth-msg:not(:empty) { margin-top: 14px; }
.auth-form .dev-login { margin-top: 18px; }
.auth-inv { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: var(--hueso); border: 1px solid var(--linea); margin-top: 26px; }
.auth-inv .s-crest { width: 54px; height: 60px; flex: 0 0 54px; }
.auth-inv b { display: block; font: 800 20px var(--font-titulo); }
.auth-inv .by { font-size: 14px; color: var(--gris); }
.auth-inv .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.auth-inv .chip2 { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid var(--linea); display: inline-flex; align-items: center; color: var(--gris); }
.auth-join-pick { margin-top: 22px; }
.auth-join-pick select { width: 100%; height: 50px; border-radius: 12px; border: 1px solid rgba(21, 19, 15, .18); padding: 0 14px; font-size: 16px; background: #fff; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; border-radius: 20px; }
  .auth-form { padding: 32px 22px; }
  .auth-side { order: 0; padding: 30px 22px; }
  .auth-side img, .auth-points, .auth-side-foot { display: none; }
  .auth-h1 { font-size: 28px; margin: 0 0 8px; }
  .auth-lead { font-size: 15px; }
  .auth-form h2 { font-size: 26px; }
  .auth-trust { padding-top: 24px; }
  .pg-entrar .wrap, .pg-join .wrap { padding: 16px 16px 32px; }
}

/* Bandas chicas: confirmá tu email / conectá Discord */
.band { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; font-size: 14px; border: 1px solid var(--linea); background: #fff; }
.band[hidden] { display: none; }
.band > span { flex: 1; min-width: 200px; }
.band-mail { background: var(--oro-c); border-color: rgba(201, 163, 90, .4); }
.band-discord { background: #EEF0FE; border-color: rgba(88, 101, 242, .25); }
.btn.btn-discord { background: #5865F2; color: #fff; border-color: #5865F2; }
.btn.btn-discord:hover { background: #4752C4; color: #fff; }
.foot-links { font-size: 13px; color: rgba(241, 226, 192, .6); }
.foot-links a { color: rgba(241, 226, 192, .75); }
.foot-links a:hover { color: var(--crema); }
/* Mis ajustes: cómo entrás */
.methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.methods li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.methods .m-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.methods .m-ico svg { width: 22px; height: 22px; }
.methods .m-discord .m-ico { background: #5865F2; color: #fff; }
.methods .m-google .m-ico { background: #fff; border: 1px solid var(--linea); }
.methods .m-password .m-ico { background: var(--hueso); color: var(--tinta); }
.methods .m-txt { flex: 1; min-width: 180px; }
.methods .m-txt b { display: block; }
.methods .m-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.danger-zone { border-color: rgba(142, 27, 27, .3); }

/* ================= Tanda E: estructura con sesión (maqueta docs/diseno/app-v2/app-shell) ================= */
body.pg-home, body:has(.shell) { display: block; }
.shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px 14px; overflow-y: auto;
  background: var(--noche); color: var(--crema); scrollbar-width: thin; scrollbar-color: rgba(241, 226, 192, .2) transparent; z-index: 60; }
.side > * { flex: 0 0 auto; }
.side-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; color: var(--crema); }
.side-logo:hover { color: var(--crema); }
.side-logo img { width: 34px; height: 34px; }
.side-logo b { font: 800 19px var(--font-titulo); letter-spacing: .06em; }
.side-logo b span { color: var(--oro); }
.side-alli { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(241, 226, 192, .06); border: 1px solid var(--linea-o);
  margin-bottom: 14px; color: var(--crema); }
.side-alli:hover { color: var(--crema); border-color: rgba(241, 226, 192, .3); }
.side-alli i { width: 28px; height: 32px; flex: 0 0 28px; display: grid; place-items: center; }
.side-alli i img { width: 28px; height: 28px; }
.side-alli > span { min-width: 0; }
.side-alli b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-alli small { display: block; color: rgba(241, 226, 192, .55); font-size: 12px; }
.side-alli .ch { margin-left: auto; color: rgba(241, 226, 192, .5); flex: none; }
.side-search { display: flex; align-items: center; gap: 8px; height: 38px; border-radius: 10px; background: rgba(241, 226, 192, .06); padding: 0 10px 0 12px;
  color: rgba(241, 226, 192, .5); margin-bottom: 10px; border: 1px solid transparent; }
.side-search:focus-within { border-color: rgba(201, 163, 90, .55); }
.side-search input { flex: 1; min-width: 0; min-height: 0; height: 36px; padding: 0; border: 0; background: none; color: var(--crema); font: 400 13.5px var(--font-texto); box-shadow: none; }
.side-search input:focus { box-shadow: none; }
.side-search input::placeholder { color: rgba(241, 226, 192, .5); }
.side-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.side-search kbd { background: transparent; font: 11px var(--font-texto); border: 1px solid var(--linea-o); border-radius: 5px; padding: 1px 6px; color: rgba(241, 226, 192, .55); }
.side-g { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 226, 192, .38); padding: 12px 12px 4px; }
.side-it { display: flex; align-items: center; gap: 11px; min-height: 32px; padding: 4px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.25;
  color: rgba(241, 226, 192, .72); }
.side-it:hover { background: rgba(241, 226, 192, .06); color: var(--crema); }
.side-it.on { background: rgba(201, 163, 90, .16); color: var(--crema); font-weight: 700; box-shadow: inset 3px 0 0 var(--oro); }
.side-it svg { flex: 0 0 18px; opacity: .85; }
.side-it .tx { flex: 1; min-width: 0; }
.side-pr { color: var(--oro); font-size: 12px; }
.side-bd { min-width: 20px; height: 20px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.side-empty { margin: 10px 12px; font-size: 13px; color: rgba(241, 226, 192, .5); }
.side-pie { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea-o); }
.side-nav { padding-bottom: 12px; }
.side { scrollbar-width: thin; scrollbar-color: rgba(241, 226, 192, .2) transparent; }
.side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(21, 19, 15, .55); }
.shell-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 32px;
  border-bottom: 1px solid var(--linea); background: var(--papel); }
.topbar-title { font: 700 15px var(--font-texto); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-sp { flex: 1; }
.side-open { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); cursor: pointer; place-items: center; flex: none; }
.top-chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--prog-bg); color: var(--prog); border: 1px solid rgba(138, 90, 11, .18); }
.top-chip.night-banner { background: var(--noche-bg); color: var(--noche-t); border-color: rgba(91, 67, 168, .2); }
.top-chip.is-bad { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.topbar .clock-chip { height: 38px; padding: 0 6px 0 14px; background: #fff; border: 1px solid var(--linea); color: var(--gris); }
.topbar .cc-srv { color: var(--gris); font-weight: 500; }
.topbar .cc-time { color: var(--tinta); min-width: 4.2em; }
.topbar .cc-loc:hover { background: var(--hueso); color: var(--tinta); }
.topbar #clock-local { color: var(--tinta); font-family: var(--font-titulo); }
.topbar .idiomas { padding: 3px; background: #fff; border-color: var(--linea); }
.topbar .idiomas button { height: 30px; width: 34px; padding: 0; justify-content: center; color: var(--gris); }
.topbar .idiomas button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.topbar .idiomas button:hover { background: var(--hueso); }
.topbar .idiomas button.active { background: var(--hueso); box-shadow: inset 0 0 0 1px var(--linea-f); }
.topbar .idiomas svg { width: 18px; height: 12px; }
.topbar .menu-group > summary { height: 38px; padding: 0 14px 0 4px; color: var(--tinta); background: #fff; border-color: var(--linea); }
.topbar .menu-group > summary:hover, .topbar .menu-group.active > summary, .topbar .menu-group[open] > summary { border-color: var(--linea-f); background: #fff; color: var(--tinta); }
.me-ini { width: 30px; height: 30px; border-radius: 50%; background: var(--noche); color: var(--oro); display: grid; place-items: center; font: normal 800 14px var(--font-titulo); flex: none; }
.topbar .acct-select { height: 38px; background-color: #fff; color: var(--tinta); border-color: var(--linea); }
.topbar .raid-mini { height: 38px; }
.shell-notes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 32px 0; }
.note-chip { display: inline-flex; align-items: center; margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
main.cont { width: 100%; max-width: 1240px; margin: 0 auto; padding: 30px 32px 48px; flex: 1; }
.foot-app { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 32px 26px; font-size: 13px;
  color: var(--gris-c); border-top: 1px solid var(--linea); }
.foot-app .foot-links, .foot-app .foot-links a, .foot-app .made-by { color: var(--gris); }
.foot-app a:hover { color: var(--tinta); }
@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 288px; max-width: 86vw; transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
  body.side-on .side { transform: none; visibility: visible; }
  body.side-on { overflow: hidden; }
  .side-open { display: grid; }
  .topbar { padding: 0 16px; gap: 8px; }
  main.cont { padding: 22px 16px 40px; }
  .shell-notes { padding: 12px 16px 0; }
  .foot-app { padding: 16px; }
}
@media (max-width: 760px) {
  .topbar .clock-chip .cc-loc-part, .topbar .clock-chip .cc-sep, .topbar .user-name, .top-chips, .topbar .cc-srv { display: none; }
  .topbar .clock-chip { padding: 0 12px; }
  .topbar .menu-group > summary { padding: 0 4px; }
  .topbar .menu-group > summary::after { display: none; }
  .topbar-title { font-size: 14px; }
}
@media (max-width: 420px) { .topbar .idiomas { display: none; } }

/* Títulos de página y tarjetas dentro de la estructura nueva */
main.cont > .card:first-child > h1, main.cont > section:first-of-type > h1 { font-size: 30px; }

/* ================= Controles: mismo alto, borde, radio y foco en todo el sitio ================= */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select { height: 44px; min-height: 44px; }
textarea { height: auto; }
.inline-form .btn, .grid-form .f-actions .btn:not(.small) { min-height: 44px; }
.inline-form .btn.small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.inline-form .check { min-height: 44px; }
select:hover, input:not([type=checkbox]):not([type=radio]):hover, textarea:hover { border-color: rgba(21, 19, 15, .3); }
select:focus:hover, input:focus:hover, textarea:focus:hover { border-color: var(--oro); }
.tbl input:not([type=checkbox]), .tbl select, .wave-tbl input:not([type=checkbox]) { height: 34px; min-height: 34px; }
.raid-mode select { height: 34px; }

.side-search input { height: 36px; min-height: 0; }
.subtabs button { height: 36px; }

/* Sub-pestañas entre páginas hermanas (Tropas | Miembros, Ataques entrantes | Plaza de reuniones) */
.page-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); width: fit-content; max-width: 100%; margin: 0 0 16px; }
.page-tabs a { height: 34px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; color: var(--gris); font: 700 14px var(--font-texto); }
.page-tabs a:hover { color: var(--tinta); }
.page-tabs a.on { background: var(--noche); color: var(--crema); }

/* Estado vacío: texto y qué hacer */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 14px; background: var(--hueso); border: 1px dashed var(--linea-f); }
.empty p { margin: 0; color: var(--gris); }

/* Páginas legales (04/11: Privacidad, Términos, Cookies; src/LegalView.php): tarjeta centrada, texto en una columna legible (≤ 72ch),
   pestañas entre las tres, "Resumen en simple" y el índice arriba. */
.legal { max-width: 840px; width: 100%; margin-left: auto; margin-right: auto; padding: clamp(20px, 4vw, 40px); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.legal-tabs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea-f);
  background: #fff; color: var(--tinta); font: 600 13px var(--font-texto); text-decoration: none; }
.legal-tabs a:hover { border-color: var(--tinta); }
.legal-tabs a[aria-current=page] { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.legal-head h1 { margin: 0; }
.legal-head .sub { margin: 6px 0 0; max-width: 72ch; }
.legal-upd { margin: 8px 0 0; font-size: 13px; color: var(--gris); }
.legal-sum { margin: 22px 0 0; padding: 16px 20px; border: 1px solid var(--oro); border-radius: var(--r-s); background: #FFFBF1; max-width: 72ch; }
.legal-sum h2 { margin: 0 0 8px; font-size: 1.05rem; }
.legal-sum ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal-sum-note { margin: 10px 0 0; font-size: 13px; color: var(--gris); }
.legal-toc { margin: 22px 0 0; padding: 0 0 18px; border-bottom: 1px solid var(--linea); }
.legal-toc h2 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2 16rem; column-gap: 32px; }
.legal-toc li { break-inside: avoid; padding: 2px 0; }
.legal-toc a { color: var(--tinta); }
.legal-body { max-width: 72ch; }
.legal-sec { scroll-margin-top: 84px; }
.legal-sec h2 { margin: 26px 0 8px; font-size: 1.2rem; }
.legal-sec p, .legal-sec li { line-height: 1.6; overflow-wrap: anywhere; }
.legal-sec p { margin: 0 0 10px; }
.legal-sec ul { margin: 0 0 10px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal-link a, .legal-mail a { font-weight: 600; }
.legal-ck code { white-space: nowrap; }
.legal-sec .table-wrap { margin: 0 0 12px; }
.legal-ck td, .legal-ck th { vertical-align: top; }

/* ================= Inicio "Hoy" ================= */
.hoy-h1 { font: 800 34px var(--font-titulo); letter-spacing: -.02em; margin: 0; }
.hoy-sub { color: var(--gris); margin: 4px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.kpi { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--sombra); color: var(--tinta); }
.kpi:hover { color: var(--tinta); border-color: var(--linea-f); }
.kpi .h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gris); }
.kpi .h i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--hueso); color: var(--tinta); }
.kpi .n { font: 800 34px/1 var(--font-titulo); margin-top: 10px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 13px; color: var(--gris); margin-top: 6px; min-height: 2.6em; }
.kpi.alerta { border-color: rgba(142, 27, 27, .35); }
.kpi.alerta .h i { background: #F6E1DE; color: var(--rojo); }
.kpi.alerta .n { color: var(--rojo); }
.kpi.vacio .n { color: var(--gris-c); }
.hoy-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.hoy-cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hoy-card { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); padding: 20px 22px; }
.hoy-card h2 { font: 700 18px var(--font-titulo); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hoy-card h2 a { font: 700 13px var(--font-texto); color: var(--oro-o); }
.ev { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--linea); color: var(--tinta); }
.ev:first-of-type { border-top: 0; }
.ev:hover { color: var(--tinta); }
.ev .t b { display: block; font: 700 17px var(--font-titulo); font-variant-numeric: tabular-nums; }
.ev .t small { font-size: 12px; color: var(--gris-c); }
.ev .w { min-width: 0; }
.ev .w b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .w span { font-size: 13px; color: var(--gris); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.tag.r { background: #F6E1DE; color: var(--rojo); }
.tag.o { background: var(--prog-bg); color: var(--prog); }
.tag.v { background: var(--ok-bg); color: var(--ok); }
.tag.n { background: var(--noche-bg); color: var(--noche-t); }
.hoy-list { margin-top: 10px; }
.hoy-empty { margin: 12px 0 0; padding: 16px; border-radius: 12px; background: var(--hueso); color: var(--gris); font-size: 14px; }
.hoy-card .steps { margin-top: 12px; padding-left: 0; display: grid; gap: 8px; }
.st { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--hueso); font-size: 14px; }
.st i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gris-c); flex: 0 0 24px; }
.st.ok i { background: var(--ok); border-color: var(--ok); color: #fff; }
.st.ok { color: var(--gris); }
.st.ok span { text-decoration: line-through; }
.st a, .st button { margin-left: auto; font: 700 13px var(--font-texto); color: var(--oro-o); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.prog-line { height: 8px; border-radius: 99px; background: var(--hueso); margin-top: 12px; overflow: hidden; }
.prog-line em { display: block; height: 100%; background: var(--oro); }
/* Atajos (03/11, Santi: "Sitter instructions" se salía de la tarjeta a 1280 en inglés): las columnas salen del ancho de la tarjeta
   (container query), cada atajo de al menos 11.5rem: 4, 2 o 1 por fila (nunca 3 + 1 suelto); el texto se parte entre palabras DENTRO
   del atajo y nunca lo empuja (min-width: 0). */
#sc-card { container-type: inline-size; }
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
@container (min-width: 24rem) { .acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 48.5rem) { .acc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--linea); background: #fff; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--tinta); }
.ac > span { min-width: 0; overflow-wrap: break-word; }
.ac:hover { color: var(--tinta); border-color: var(--oro); }
.ac i { width: 34px; height: 34px; border-radius: 10px; background: var(--noche); color: var(--oro); display: grid; place-items: center; flex: none; }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hoy-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kpis { grid-template-columns: minmax(0, 1fr); } .ev { grid-template-columns: 84px minmax(0, 1fr); } .ev .tag { grid-column: 2; justify-self: start; } .hoy-h1 { font-size: 28px; } }

/* ================= Todas las calculadoras ================= */
.calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.calc-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); }
.calc-card:hover { color: var(--tinta); border-color: var(--oro); }
.calc-card i { width: 36px; height: 36px; border-radius: 10px; background: var(--noche); color: var(--oro); display: grid; place-items: center; }
.calc-card b { font: 700 16px var(--font-titulo); margin-top: 6px; }
.calc-card small { color: var(--gris); font-size: 13.5px; }
.calc-group { margin-top: 26px; }
.calc-group h2 { margin: 0; }
@media (max-width: 1000px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .calc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Inicio con la estructura nueva: mismo aire que el resto (las reglas del inicio viejo no aplican) */
.pg-home main.cont.wrap { padding: 30px 32px 48px; display: flex; flex-direction: column; gap: 0; flex: 1; }
.pg-home main.cont .sit-inbox { margin-top: 16px; }
@media (min-width: 1101px) { .shell { background: linear-gradient(to right, var(--noche) 272px, transparent 272px); } }
@media (max-width: 1100px) { .pg-home main.cont.wrap { padding: 22px 16px 40px; } }
/* Alto fijo: el texto se centra solo (sin relleno vertical que lo corte) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select { padding-top: 0; padding-bottom: 0; line-height: normal; }
.tbl select { padding-left: 10px; padding-right: 30px; background-position: right 10px center; }
.inline-form input[type=checkbox], .inline-form input[type=radio] { min-width: 0; width: auto; }
@media (max-width: 1100px) { .side { z-index: 88; } .side-scrim { z-index: 87; } }
/* Planificador dentro de la estructura nueva: la tabla de oleadas entra entera */
.wave-tbl .wt-grid { grid-template-columns: repeat(11, 3rem); gap: 3px; }
.wave-tbl .wt-grid input[type=number] { width: 3rem; }
.wt-grid span { max-width: 3rem; font-size: 10px; }
.wave-tbl select[data-f=type] { min-width: 6.4rem; }
.wave-tbl select[data-f=village_key] { min-width: 8.5rem; max-width: 10rem; }
.wave-tbl input[data-f=gap_s] { width: 3.8rem; }
.wave-tbl th, .wave-tbl td { padding: 8px 4px; }

/* ---------- Mapa del servidor ---------- */
.map-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin-top: 16px; }
.map-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.map-find { display: grid; gap: 8px; }
.map-find label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.map-h { font-size: 15px; margin-top: 4px; }
.map-hl { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.map-hl li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.map-hl li span { flex: 1; min-width: 0; display: grid; }
.map-hl li b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-hl li small { font-size: 12px; color: var(--gris); }
.map-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linea); cursor: pointer; flex: none; padding: 0; }
.map-x { border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--gris); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.map-x:hover { background: var(--hueso); color: var(--tinta); }
.map-legend p { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.lg { display: inline-block; width: 12px; height: 12px; flex: none; }
.lg-me { border: 2px solid #8E1B1B; border-radius: 50%; }
.lg-settle { background: #C9A35A; border: 1px solid #16130F; transform: rotate(45deg); width: 10px; height: 10px; }
.lg-natar { background: rgba(70, 70, 70, .55); }
.map-info { border-top: 1px solid var(--linea); padding-top: 12px; }
.map-info h3 { font-size: 16px; }
.map-info h3 small { font-weight: 500; color: var(--gris); font-size: 13px; }
.map-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 10px 0; }
.map-dl dt { color: var(--gris); }
.map-dl dd { margin: 0; font-weight: 600; }
.map-settle { display: grid; gap: 8px; margin-top: 8px; }
.map-stage { position: relative; min-width: 0; }
.map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.map-tools .btn.small { min-width: 38px; }
.map-goto { margin-left: auto; }
.map-goto input { width: 120px; }
#map-canvas { display: block; width: 100%; height: min(72vh, 760px); border-radius: 16px; border: 1px solid var(--linea); background: #FBF7EC; cursor: grab; touch-action: none; }
#map-canvas:active { cursor: grabbing; }
.map-tip { position: absolute; pointer-events: none; background: var(--noche); color: var(--crema); font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.missing-list { columns: 3 220px; column-gap: 24px; list-style: none; padding: 0; margin: 12px 0; }
.missing-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.missing-list li small { color: var(--gris); }
@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-stage { order: -1; }
  #map-canvas { height: 60vh; }
}

/* ---------- Guía rápida ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.guide-card { position: relative; padding-top: 26px; }
.guide-n { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; border-radius: 50%; background: var(--noche); color: var(--oro); display: grid; place-items: center; font-family: var(--font-titulo); font-weight: 800; }
.guide-card h2 { font-size: 19px; padding-right: 40px; }
.guide-steps { margin: 12px 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.guide-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* Inicio: la tarjeta del sitter se ve chica (un vistazo) y se agranda con un botón */
.sit-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sit-inbox .marco { max-width: 460px; }
.sit-inbox.big .marco { max-width: none; }

.calc-fold { padding: 0; }
.calc-fold > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.calc-fold > summary::-webkit-details-marker { display: none; }
.calc-fold > summary::before { content: '▸'; color: var(--gris); }
.calc-fold[open] > summary::before { content: '▾'; }
.calc-fold > summary b { font-size: 13px; }
.calc-fold[open] { padding: 0 12px 10px; }
.calc-fold[open] > summary { padding: 10px 0; }
.calc-fold > h3 { display: none; }
/* Barra superior: los chips nunca quedan a medias (son cortos); si no entra todo, el título se acorta con "…" (el título
   completo está en la página). */
.topbar-title { flex: 0 1 auto; min-width: 90px; }
.top-chips { flex: none; }
.top-chip { display: inline-block; line-height: 28px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.topbar .clock-chip, .topbar .idiomas, .topbar .menu-group { flex: none; }
@media (max-width: 1440px) {
  .top-chip.night-banner { font-size: 0; padding: 0 9px; }
}
/* Instrucciones para el sitter: "Para" e "Idioma" lado a lado, el horario abajo a todo el ancho (nada cortado). */
.sit-opts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sit-opts > div:nth-child(3) { grid-column: 1 / -1; }
.sit-opts select { width: 100%; }
.sit-opts .lbl-up { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sit-opts .horas input { flex: 1; }
@media (max-width: 760px) { .sit-opts { grid-template-columns: 1fr; } }
/* Miembros: cobertura de las próximas 24 h */
.cov-card { margin-top: 22px; padding: 18px 18px 14px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.cov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cov-head h3 { margin: 0; font-size: 1rem; }
.cov-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; }
.cov-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 92px; padding-bottom: 32px; border-radius: 8px; background: var(--hueso); overflow: hidden; }
.cov-bar { position: absolute; left: 0; right: 0; bottom: 32px; max-height: calc(100% - 32px); background: linear-gradient(180deg, rgba(201, 162, 90, .55), rgba(201, 162, 90, .85)); border-radius: 6px 6px 0 0; }
.cov-cell b { position: relative; font: 700 12px var(--font-titulo); color: var(--tinta); margin-bottom: 2px; }
.cov-h, .cov-hl { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.cov-h { bottom: 15px; font-weight: 700; color: var(--tinta); }
.cov-hl { bottom: 2px; color: var(--gris); }
.cov-zero { background: var(--rojo-bg); }
.cov-zero b { color: var(--rojo); }
.cov-legend { display: flex; justify-content: flex-end; gap: 16px; margin-top: 6px; }
.cov-legend span:first-child { font-weight: 700; color: var(--tinta); }
.cov-gaps { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--rojo-bg); color: var(--rojo); font-size: 13px; }
.cov-ok { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .cov-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.sit-opts > div:first-child:has(#sit-free:not([hidden])) { grid-column: 1 / -1; }
#sit-free:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
#sit-free input { margin: 0; }
.steps-guide { margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.steps-guide a { color: var(--oro-o, #8A5A0B); text-decoration: none; }
.steps-guide a:hover { text-decoration: underline; }
/* Planificador de oleadas: la tabla entra siempre en el ancho de la tarjeta (sin scroll horizontal).
   Columnas fijas y las tropas en una grilla que baja a una segunda fila si no entran; el título de cada tropa
   está en la misma columna, así queda alineado igual. */
.wave-tbl { table-layout: fixed; width: 100%; }
.wave-tbl col.wc-n { width: 26px; }
.wave-tbl col.wc-type { width: 7.2rem; }
.wave-tbl col.wc-vil { width: 9.6rem; }
.wave-tbl col.wc-gap { width: 4.6rem; }
.wave-tbl col.wc-del { width: 46px; }
.wave-tbl select[data-f=type], .wave-tbl select[data-f=village_key] { min-width: 0; max-width: none; width: 100%; }
.wave-tbl input[data-f=gap_s] { width: 100%; }
.wave-tbl .wt-grid { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: 4px; }
.wave-tbl .wt-grid input[type=number] { width: 100%; }
.wave-tbl .wt-grid span { max-width: none; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wave-tbl th { white-space: normal; }
/* Tablas de tropas y Miembros: un poco más compactas para que entren sin scroll. */
.tbl.troops th, .tbl.troops td { padding: 8px 7px; }
.tbl.sheet-tbl th, .tbl.sheet-tbl td { padding: 8px 7px; }
.tbl.sheet-tbl thead th { white-space: normal; font-size: 10.5px; }
.sheet-tbl .narrow-only { display: none; }
@media (max-width: 1360px) {
  .sheet-tbl .col-x { display: none; }
  .sheet-tbl .narrow-only { display: block; }
}
.wave-tbl thead th { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; vertical-align: bottom; }
.wave-tbl col.wc-gap { width: 5.8rem; }
/* Mis tropas → "A mano" (03/11, Santi: "la PT mal ubicada, el héroe apretado"). UNA sola regla para todo el editor:
   - ancho de la caja ≥ 950 px (cada tropa con lugar para su nombre más largo, "Imperatoriaus"): tabla de columnas fijas; las 10 tropas y el héroe con el MISMO ancho (lo que sobra), la PT con el botón
     "PT 10" (el mismo de "Tropas por aldea") y el ✓, todo centrado debajo de su encabezado;
   - más angosta: cada aldea es una tarjeta (nombre arriba y una grilla de casillas con el ícono de la tropa encima), sin scroll. */
#manual { container-type: inline-size; }
.tbl.manual { table-layout: fixed; width: 100%; }
.tbl.manual col.mc-v { width: 7.2rem; }
.tbl.manual col.mc-ts { width: 4.6rem; }
.tbl.manual col.mc-s { width: 48px; }
.tbl.manual td, .tbl.manual th { padding: 6px 3px; }
.tbl.manual thead th { vertical-align: bottom; }
.tbl.manual thead th.mc-ts { text-align: center; }
.tbl.manual td.mc-u, .tbl.manual td.mc-ts, .tbl.manual td.mc-s { text-align: center; vertical-align: middle; }
.tbl.manual .mc-ic { display: none; }
.tbl.manual input.cnt, .tbl.manual input.hero { width: 100%; padding: 0 4px; font-size: 13px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.tbl.manual input.cnt::-webkit-inner-spin-button, .tbl.manual input.cnt::-webkit-outer-spin-button,
.tbl.manual input.hero::-webkit-inner-spin-button, .tbl.manual input.hero::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tbl.manual .vname { font-size: 13px; }
.tbl.manual .vname input { width: 100%; }
.tbl.manual .ts-pick > summary.ts-btn { min-width: 0; width: 100%; max-width: 4.2rem; height: 34px; padding: 0 6px; }
.tbl.manual .save-row { width: 34px; height: 34px; padding: 0; }
@container (max-width: 949px) {
  .tbl.manual, .tbl.manual tbody { display: block; width: 100%; }
  .tbl.manual colgroup, .tbl.manual thead { display: none; }
  .tbl.manual tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 8px 6px; align-items: end; padding: 12px; border-bottom: 1px solid var(--linea); }
  .tbl.manual tbody tr:last-child { border-bottom: 0; }
  .tbl.manual th, .tbl.manual td { display: block; padding: 0; border: 0; background: none; }
  .tbl.manual .vname { grid-column: 1 / -1; position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
  .tbl.manual .vname span { display: inline; }
  .tbl.manual td.mc-u { display: grid; justify-items: center; gap: 4px; }
  .tbl.manual .mc-ic { display: flex; align-items: center; justify-content: center; height: 22px; }
  /* PT y ✓ siempre juntos en el último renglón de la tarjeta: la PT empieza renglón (columna 1) y el ✓ va a la derecha. */
  .tbl.manual td.mc-ts { grid-column: 1 / span 2; justify-self: start; align-self: end; }
  .tbl.manual td.mc-s { grid-column: -2 / -1; justify-self: end; align-self: end; }
  .tbl.manual .ts-pick > summary.ts-btn { width: auto; max-width: none; min-width: 72px; }
}
/* Links al juego en las tablas (inactivos, reclutar): se ven como link y se abren con la rueda en otra pestaña. */
a.glink { color: var(--tinta); text-decoration: none; border-bottom: 1px solid rgba(169, 132, 62, .45); }
a.glink:hover { color: var(--oro-o); border-bottom-color: var(--oro-o); }
a.glink:visited { color: #6B5A3A; }
input.t-time { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
input.t-time.t-bad { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(142, 27, 27, .12); }
/* Planificador: cada oleada en 2 filas (datos arriba, tropas abajo con su nombre). */
.wave-tbl col.wc-type { width: 9rem; }
.wave-tbl col.wc-gap { width: 9rem; }
.wave-tbl select[data-f=village_key] { max-width: 22rem; }
.wave-tbl tbody tr[data-i] td { border-bottom: 0; padding-bottom: 4px; }
.wave-tbl tbody tr.wt-sub td { padding-top: 4px; padding-bottom: 14px; }
.wave-tbl tbody tr.wt-sub:hover, .wave-tbl tbody tr[data-i]:hover { background: transparent; }
.wave-tbl .wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 8px 8px; align-items: end; justify-items: stretch; }
.wave-tbl .wt-u { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wave-tbl .wt-u span { font-size: 11px; font-weight: 700; color: var(--gris); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.wave-tbl .wt-u input[type=number] { width: 100%; text-align: right; }
.wave-tbl .wt-hero { align-items: center; }
.wave-tbl .wt-hero input { width: 20px; height: 20px; margin: 7px 0; }
.wave-tbl .wt-hero input { margin: 12px 0; }
.wave-tbl .wt-grid { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
.tbl.hours input.t-time { width: 5.4rem; min-height: 0; height: 36px; padding: 5px 8px; font-size: .9rem; border-radius: 8px; text-align: center; }
/* Formularios: si un título ocupa 2 líneas, los campos de la misma fila igual quedan alineados abajo. */
/* (alineación de filas: core.js alignRows iguala el alto de los títulos de una misma fila) */
.grid-form > label:not(.chip):not(.check) > span:first-child, .inline-form > label:not(.chip):not(.check) > span:first-child { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 6px; }
.grid-form > label:not(.chip):not(.check) > span:first-child { line-height: 1.3; }
/* Reloj de atracos: el sonido se elige y se prueba acá mismo. */
.raid-sound { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 16px 0 18px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--hueso); }
.raid-sound .rs-title { flex-basis: 100%; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.raid-sound label:not(.check) { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.raid-sound select { width: 13rem; }
.raid-sound .rs-vol input { width: 11rem; height: 44px; }
.raid-sound .rs-notify { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; color: var(--tinta); }
.raid-sound .btn { min-height: 44px; }
.raid-sound .rs-saved { align-self: center; color: var(--ok); font-weight: 700; }

/* ---------- Tanda F: grilla semanal (weekgrid.js) ---------- */
.ok-inline { color: var(--ok); font-weight: 700; }
.err-inline { color: var(--rojo); font-weight: 700; }

/* ---------- Tanda G: horario en filas (como la programación de anuncios): [días] [desde] a [hasta] [✕] ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wr-help { margin: 0 0 12px; }
.wr-list { display: grid; gap: 10px; }
.wr-row { display: grid; grid-template-columns: minmax(12rem, 16rem) auto 44px minmax(0, 1fr); align-items: center; gap: 6px 12px;
          padding: 10px 12px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.wr-days select { width: 100%; }
.wr-times { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gris); }
.wr-times input { width: 5.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.wr-del { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea-f); background: transparent; color: var(--gris); font-size: 15px; cursor: pointer; }
.wr-del:hover, .wr-del:focus-visible { border-color: var(--rojo); color: var(--rojo); }
.wr-srv { color: var(--gris); font-size: 12.5px; line-height: 1.35; }
.wr-srv b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.wr-empty { margin: 0; padding: 14px; border: 1px dashed var(--linea-f); border-radius: 14px; color: var(--gris); }
.wr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 4px; }
.wr-msg { font-size: 13px; }
.wr-sum { margin: 10px 0 8px; font-size: 14px; }
.wr-sum b { margin-right: 4px; }
.wr-prev { display: grid; gap: 4px; max-width: 760px; }
.wr-pr { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; }
.wr-pd { font-size: 12.5px; font-weight: 700; color: var(--gris); }
.wr-tk { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris-c); font-variant-numeric: tabular-nums; }
.wr-bar { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); height: 14px; border-radius: 5px; overflow: hidden; background: #EFEAE0; }
.wr-bar i { display: block; }
.wr-bar i.q { box-shadow: inset 1px 0 0 rgba(21, 19, 15, .12); }
.wr-bar i.on { background: #7FB069; }
.wr-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--gris); }
.wr-key i { width: 12px; height: 12px; border-radius: 3px; background: #EFEAE0; border: 1px solid var(--linea-f); margin-left: 6px; }
.wr-key i:first-child { margin-left: 0; }
.wr-key i.on { background: #7FB069; border-color: #7FB069; }
@media (max-width: 700px) {
  .wr-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .wr-days { grid-column: 1; }
  .wr-del { grid-column: 2; grid-row: 1; }
  .wr-times, .wr-srv { grid-column: 1 / -1; }
  .wr-times input { flex: 1; width: auto; min-width: 0; }
}

/* ---------- Tanda F: selector de zona propio ---------- */
.tz-pick { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; min-width: 16rem; max-width: 100%; padding: 0 14px;
  border: 1px solid var(--linea-f); border-radius: var(--r-s); background: #fff; color: var(--tinta); font: inherit; cursor: pointer; text-align: left; }
.tz-pick:hover { border-color: var(--tinta); }
.tz-pick:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.tz-pick i { font-style: normal; color: var(--gris); }
.tz-auto-tag { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.tz-none { padding: 12px; color: var(--gris); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .lbl { font-size: 13px; font-weight: 700; color: var(--gris); }
.field-ok { color: var(--ok); font-weight: 700; font-size: 13px; }
.field-ok:empty { display: none; }

/* ---------- Tanda F: Buscador de sitters con la grilla arriba ---------- */
.card.semana-f { padding: 22px; }
.semana-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.semana-head h2 { margin: 0; font: 700 20px var(--font-titulo); }
.semana-head .tz { margin: 0; color: var(--gris); font-size: 14px; }
.semana-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 6px; }
.semana-opts .toggle, .semana-opts .langs-w { border-top: 0; justify-content: flex-start; }
.semana-opts .langs-w { display: flex; align-items: center; gap: 10px; }
.semana-opts .langs { margin: 0; }
.semana-f .fine { font-size: 12px; color: var(--gris-c); margin: 8px 0 0; }
.find-grid { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }

/* ---------- Tanda F: validación propia, sugerencias, rangos de fechas ---------- */
.field-err { display: block; color: var(--rojo); font-size: 13px; font-weight: 700; margin-top: 4px; }
.is-bad, input.t-bad { border-color: var(--rojo) !important; box-shadow: 0 0 0 3px var(--rojo-bg); }
.sug-wrap { position: relative; }
.sug { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--linea-f); border-radius: var(--r-s); box-shadow: var(--sombra); max-height: 280px; overflow-y: auto; }
.sug button { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; color: var(--tinta); cursor: pointer; }
.sug button:hover, .sug button:focus { background: var(--oro-c); outline: none; }
.when-f { display: flex; flex-direction: column; gap: 6px; }
.when-f .when-l { font-size: 13px; font-weight: 700; color: var(--gris); }
.chips-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; }
details.more { border-top: 1px solid var(--linea); padding-top: 8px; }
details.more > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--oro-o); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸"; transition: none; }
details.more[open] > summary::before { content: "▾"; }
details.more > .grid-form { margin-top: 8px; }
.empty-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; }
.empty-act p { margin: 0; color: var(--gris); }
.tbl.push-sends th, .tbl.push-sends td { padding-left: 8px; padding-right: 8px; } .tbl.push-sends td, .tbl.push-sends td * { white-space: normal; } .tbl.push-sends th { white-space: normal; }
#hours > h2 { margin-top: 0; }
.sim-side .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .sim-side .grid-form .f-wide { grid-column: 1 / -1; }
.grid-form label:has(> .unit-sel) { grid-column: span 2; }
/* ---------- Analizar listas de asaltos ---------- */
.steps-mini { margin: 10px 0 14px; padding-left: 20px; color: var(--tinta); font-size: 14px; line-height: 1.6; }
#farm-form textarea { width: 100%; font: 13px/1.4 ui-monospace, Consolas, monospace; }
.farm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.farm-kpis .kpi { padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.farm-kpis .kpi .lbl { font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.farm-kpis .kpi .v { font: 700 26px var(--font-titulo); color: var(--tinta); }
.farm-kpis .kpi-warn .v { color: var(--rojo); }
.farm-h { font-size: 1rem; margin: 18px 0 6px; }
.farm-sum { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.farm-sum .fs-bad { color: var(--rojo); font-weight: 700; }
.farm-sum .fs-full { color: var(--ok); font-weight: 700; }
.farm-sum .fs-low { color: var(--prog); font-weight: 700; }
.farm-filter { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: var(--hueso); }
.farm-filter button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--gris); cursor: pointer; }
.farm-filter button.on { background: var(--noche); color: var(--crema); }
.farm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.farm-head h2 { margin: 0 0 2px; }
.farm-head p { margin: 0; }
.farm-unit { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.farm-unit select { width: 16rem; }
.farm-tbl th[scope=row] { font-weight: 700; }
.farm-tbl th[scope=row] small { display: block; font-weight: 500; margin-top: 2px; }
.farm-dup { color: var(--prog); font-weight: 700; }
.farm-bounty { display: flex; align-items: center; gap: 8px; }
.farm-bounty b { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.farm-bounty small { color: var(--gris); font-variant-numeric: tabular-nums; min-width: 3em; }
.fbar { position: relative; width: 70px; height: 8px; border-radius: 99px; background: var(--hueso); overflow: hidden; flex: none; }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--oro); border-radius: 99px; }
.fr-full .fbar i { background: var(--ok); }
.fr-low .fbar i { background: #D9A23B; }
.fhint { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.fh-bad { background: var(--rojo-bg); color: var(--rojo); }
.fh-full { background: var(--ok-bg); color: var(--ok); }
.fh-low { background: var(--prog-bg); color: var(--prog); }
.fh-idle { background: var(--hueso); color: var(--gris); }
@media (max-width: 1180px) { .farm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .farm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .farm-unit select { width: 100%; } }

/* Pantallas anchas: el contenido queda centrado en el espacio libre y un poco más ancho. */
@media (min-width: 1700px) { main.cont { max-width: 1360px; } }
/* Desborde: pasos numerados, claros como para un chico de 10 años */
.ov-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ov-step { padding: 16px 18px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.ov-step h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-step h2 small { font-weight: 500; font-size: 13px; }
.ov-step .steps-mini { margin: 4px 0 8px; }
.ov-step textarea { width: 100%; }
.ov-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--noche); color: var(--crema); font: 700 13px var(--font-titulo); flex: none; }
@media (max-width: 900px) { .ov-steps { grid-template-columns: 1fr; } }
.grid-form .ov-steps { grid-column: 1 / -1; }
.ov-step h2 { flex-wrap: nowrap; }
.ov-step h2 .ov-n + span { flex: 1; }
/* ---------- Alarmas: alarma nueva como la del celular ---------- */
.al-new { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.al-name { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); max-width: 520px; }
.al-when { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hueso); width: fit-content; }
.seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--gris); cursor: pointer; }
.seg button.on { background: var(--noche); color: var(--crema); }
.seg-sm button { padding: 7px 12px; font-size: 13px; }
.al-at { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.al-at input.t-time, .al-at input[name=time] { width: 9.5rem; font: 700 22px var(--font-titulo); text-align: center; height: 52px; }
.al-in { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.al-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.al-chips .chip-s.on { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.al-custom { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--gris); }
.al-custom input { width: 7rem; }
.al-preview { margin: 0; font-size: 15px; min-height: 1.4em; }
.al-paste { margin-top: 16px; }
.raid-timer header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.raid-edit { margin-left: auto; font-size: 12.5px; }
.raid-editf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.raid-editf input[name=name] { flex: 1 1 8rem; min-width: 0; }
.raid-editf input[name=minutes] { width: 5rem; }
.al-new.editing .al-when { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 163, 90, .2); }
.alarm-list li .row-actions { display: flex; gap: 6px; }
.farm-hnote { margin: 10px 0 0; }
.farm-vilw { max-width: 720px; }
/* Puntos de cultura */
.cult-res { margin: 18px 0 10px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.cult-big { margin: 0 0 8px; font: 700 1.2rem var(--font-titulo); color: var(--tinta); }
.cult-big.ok { color: var(--ok); }
.cult-tw { max-width: 760px; margin-bottom: 12px; }
/* 04/11: 3 campos parejos y el resultado en una tarjeta que no se estira de más. */
.cult-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); max-width: 820px; }
.cult-res { max-width: 820px; }
.cult-when { margin: 6px 0 6px; font-weight: 600; color: var(--tinta-2, #4a463f); }
.cult-hint { margin: 14px 0; }
/* Rutas de recursos */
.rt-steps { margin-top: 14px; }
.rt-step-full, .rt-src, .rt-every { margin-top: 18px; }
.rt-src .table-wrap { max-width: 560px; }
.rt-merch { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
#rt-add { width: auto; margin-top: 10px; }
.rt-tbl input { width: 130px; text-align: right; }
.rt-tbl th input { width: 110px; text-align: left; }
.rt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 12px; }
.rt-miss { margin-top: 16px; }
#rt-int { flex-wrap: wrap; border-radius: 18px; }
@media (max-width: 600px) { .rt-kpis { grid-template-columns: 1fr; } }
#rt-int { width: auto; max-width: 100%; } #rt-int button { white-space: nowrap; }

/* ---------- Tanda G: Ops "Agregar atacante" en 3 pasos ---------- */
.op-step { padding: 14px 16px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; margin: 12px 0; display: grid; gap: 8px; }
.op-step h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.op-field { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); max-width: 40rem; }
.op-wave input { max-width: 8rem; }
.op-step .grid-form { margin: 0; }
.op-step .row-actions { align-items: center; }
.notice { border-radius: var(--r-s); padding: 12px 16px; background: var(--oro-c); border-left: 4px solid var(--oro); color: var(--tinta); }
.notice p { margin: .15rem 0 .45rem; }
.notice p:last-child { margin-bottom: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--prog); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.unit-type { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 8px 12px; }
.unit-type label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--gris); }
.op-step .grid-form { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 44rem; }
@media (max-width: 700px) { .op-step .grid-form { grid-template-columns: 1fr; } .unit-type { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Tanda G: pasos numerados para pegar del juego (mismo estilo que Desborde) ---------- */
.paste-steps { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.paste-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.45; }
.paste-steps li > div { padding-top: 2px; }
.paste-steps li .btn { margin-left: 6px; vertical-align: middle; }
#sit-free .tz-pick { min-width: 0; width: 100%; }
@media (max-width: 600px) { #sit-free:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }
.alarm-do { margin: 0 0 8px; font-weight: 700; color: var(--rojo); }
.pop-stack { position: fixed; z-index: 90; top: 92px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 110px); overflow-y: auto; }
.pop-stack:empty { display: none; }
.pop-stack .alarm-pop { position: static; transform: none; width: auto; flex: none; }
.alarm-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--hueso); color: var(--gris); font-size: 12.5px; line-height: 1.45; }
.alarm-note .btn { margin-left: 6px; }
.raid-mini { gap: 6px; min-width: 0; max-width: 280px; }
.raid-mini .rm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.raid-mini b { flex: none; }
@media (max-width: 1400px) { .raid-mini { max-width: 210px; } }
@media (max-width: 700px) { .raid-mini .rm-name { display: none; } }
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .topbar .raid-mini { padding: 0 10px; font-size: 12px; } }
.topbar .raid-mini { flex: none; }
@media (max-width: 760px) { .topbar-title { min-width: 0; } }
/* Alarma nueva: hora con flechas, sin escribir */
.tstep { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.ts-u { display: flex; flex-direction: column; align-items: center; }
.ts-u button { border: 0; background: transparent; color: var(--gris); font-size: 14px; line-height: 1; padding: 4px 12px; border-radius: 8px; cursor: pointer; }
.ts-u button:hover { background: var(--hueso); color: var(--tinta); }
.ts-u input { width: 54px; height: 44px; text-align: center; font: 700 28px var(--font-titulo); font-variant-numeric: tabular-nums; border: 0; background: transparent; padding: 0; }
.ts-u input:focus { outline: 2px solid var(--oro); border-radius: 8px; }
.ts-sep { font: 700 26px var(--font-titulo); color: var(--gris); }
.al-at { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.al-at-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.al-plus { margin: 0; }
.mstep { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--gris); }
.mstep button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font: 700 18px var(--font-texto); cursor: pointer; }
.mstep input { width: 64px; text-align: center; font-weight: 700; }
.al-opts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin-top: 14px; }
.al-opts .lbl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.al-snd-row { display: flex; gap: 8px; align-items: center; }
.al-snd select { min-width: 230px; }
.al-rep-h { margin: 22px 0 6px; font-size: 1rem; }
.al-when > .seg button { white-space: nowrap; }
@media (max-width: 480px) {
  .al-when > .seg { width: 100%; } .al-when > .seg button { padding: 9px 10px; font-size: 13px; flex: 1; }
  .al-snd { width: 100%; } .al-snd select { min-width: 0; flex: 1; }
}
/* Un sonido para cada cosa */
.snd-table h2 { margin: 6px 0 2px; font-size: 1rem; }
.snd-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 260px) max-content; justify-content: start; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.snd-row span { font-weight: 700; font-size: 14px; }
@media (max-width: 600px) { .snd-row { grid-template-columns: minmax(0, 1fr) auto; } .snd-row span { grid-column: 1 / -1; } }
.al-snd a { display: block; margin-top: 6px; }
.grid-form .snd-table { grid-column: 1 / -1; }
.snd-row .btn { width: auto; }
.def-units { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; width: 100%; }
.def-units .lbl { width: 100%; font-size: 13px; font-weight: 700; }
.def-units .du { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.def-units .du input { width: 110px; }
.on-now { display: block; font-size: 12px; font-weight: 700; margin-bottom: 2px; } .on-now.yes { color: var(--ok); } .on-now.no { color: var(--gris); }
/* Instrucciones del sitter: los bloques de "Además" nunca quedan apretados (columna izquierda angosta) */
.bloques { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fila2 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.wave-units label span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.wave-units label { width: 6.2rem; }
.rt-src #rt-add, .ov-step #rt-add { width: auto; display: inline-flex; align-self: flex-start; }
.ev .t .ev-day { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--prog); }
/* Analizador: pérdidas en el último asalto (lo primero a mirar), botón para abrir la lista en el juego */
.fh-loss { background: var(--rojo); color: #fff; }
.farm-tbl tr.fr-loss th[scope=row] { color: var(--rojo); }
.farm-open { align-self: flex-end; margin-left: auto; }
.farm-tip { margin: 10px 0 0; }
.paste-steps .paste-note { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--rojo-bg); color: var(--rojo); font-weight: 700; font-size: .9rem; }
.farm-rep { margin-left: 6px; padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.fhint { border-radius: 12px; }
/* Tabla del analizador: todo centrado en la fila, "Qué hacer" corto */
.farm-tbl td, .farm-tbl th[scope=row] { vertical-align: middle; }
.farm-tbl .farm-last { text-align: center; }
.farm-last .farm-when { display: block; white-space: nowrap; }
.farm-last .farm-rep { display: inline-block; margin: 4px 0 0; }
.farm-tbl .fhint { padding: 4px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.3; max-width: 15rem; }
/* Comillas del botón en los pasos, según el idioma: «Analizar» · “Analyze” · „Analizuoti“ */
.paste-steps q { quotes: "«" "»"; }
html[lang=en] .paste-steps q { quotes: "“" "”"; }
html[lang=lt] .paste-steps q { quotes: "„" "“"; }
/* Grupos plegables de la barra lateral (04/11, Santi: "que no quede infinita ni overwhelming"): el título es el botón; plegado muestra
   cuántas herramientas tiene y la suma de sus números rojos. */
.side-fold > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 8px; user-select: none; }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary:hover { color: rgba(241, 226, 192, .7); }
.side-fold > summary:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.side-fold .side-ch { margin-left: auto; flex: none; }
.side-fold[open] .side-ch { transform: rotate(90deg); }
.side-gn { font-size: 10px; font-weight: 700; letter-spacing: 0; color: rgba(241, 226, 192, .32); }
.side-fold[open] .side-gn, .side-fold[open] .side-gbd { display: none; }
.side-gbd { min-width: 18px; height: 18px; font-size: 10.5px; letter-spacing: 0; }
.side-fold:not([open]) > summary { color: rgba(241, 226, 192, .55); }
/* Barra lateral sin scroll en las pantallas comunes: se compacta según el ALTO de la ventana (no el ancho). */
@media (min-width: 1101px) and (max-height: 1340px) {
  .side { padding-top: 14px; padding-bottom: 10px; }
  .side-logo { padding-bottom: 12px; }
  .side-g { padding: 9px 12px 3px; }
  .side-it { min-height: 29px; padding-top: 3px; padding-bottom: 3px; }
  .side-nav { padding-bottom: 6px; }
  .side-pie { padding-top: 8px; }
}
@media (min-width: 1101px) and (max-height: 1160px) {
  .side-logo { padding-bottom: 8px; }
  .side-logo img { width: 28px; height: 28px; }
  .side-alli { padding-top: 6px; padding-bottom: 6px; }
  .side-search { height: 32px; }
  .side-search input { height: 30px; }
  .side-g { padding: 6px 12px 2px; font-size: 10px; }
  .side-it { min-height: 26px; padding-top: 2px; padding-bottom: 2px; font-size: 13.5px; }
}
@media (min-width: 1101px) and (max-height: 1010px) {
  .side { padding-top: 10px; }
  .side-alli small { display: none; }
  .side-g { padding: 4px 12px 1px; }
  .side-it { min-height: 24px; padding-top: 1px; padding-bottom: 1px; font-size: 13px; }
  .side-it svg { width: 16px; height: 16px; flex-basis: 16px; }
}
/* Conectados en TravCrew: abajo a la derecha, chico, sin tapar nada (sube si aparece la barra "Activá el sonido") */
.online-fab { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body:has(.alarm-bar) .online-fab { bottom: 96px; }
.online-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea);
  background: #fff; color: var(--tinta); font: 600 13px var(--font-texto); cursor: pointer; box-shadow: 0 4px 16px rgba(21, 19, 15, .12); }
.online-btn:hover { border-color: var(--oro); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 125, 50, .18); }
.online-panel { width: min(280px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow-y: auto; padding: 12px 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(21, 19, 15, .18); }
.online-h { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.online-panel ul { list-style: none; margin: 0 0 8px; padding: 0; }
.online-panel li { padding: 5px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.online-panel li:last-child { border-bottom: 0; }
@media print { .online-fab { display: none; } }
.miss-h { margin-top: 26px; }
/* Botones de "tocá dos veces" (borrar, anular, echar): mismo ancho antes y después, así la tabla no salta */
#group-view .btn.small.danger, [data-inv-del], [data-del-sample] { min-width: 9.5em; justify-content: center; text-align: center; }
.btn[data-confirm="1"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
/* Chat de la alianza (dentro del botón de abajo a la derecha) */
.fab-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chat-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.chat-panel { width: min(380px, calc(100vw - 32px)); max-height: none; height: min(560px, 72vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--linea); }
.chat-head p { margin: 0; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-panel .chat-list { padding: 10px 12px; margin: 0; }
.chat-panel .chat-list li { border: 0; padding: 0; }
.chat-panel .chat-list li.chat-m { padding: 6px 10px; }
.chat-m { max-width: 88%; align-self: flex-start; background: var(--hueso); border-radius: 12px; padding: 6px 10px; }
.chat-m.mine { align-self: flex-end; background: rgba(201, 163, 90, .18); }
.chat-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.chat-time { color: var(--gris); white-space: nowrap; }
.chat-time small { opacity: .75; }
.chat-del { margin-left: auto; border: 0; background: none; color: var(--gris); cursor: pointer; font-size: 13px; padding: 0 2px; white-space: nowrap; }
.chat-del[data-confirm="1"] { color: var(--rojo); font-weight: 700; }
.chat-body { font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-more, .chat-empty { align-self: center; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--linea); }
.chat-form textarea { flex: 1; min-height: 38px; resize: none; font: 400 14px var(--font-texto); padding: 8px 10px; }
.chat-panel > .err { margin: 0 12px; }
/* Planificador de oleadas: cada oleada es una tarjeta (sin tabla): todo alineado y los nombres de las tropas completos */
.wave-list { display: grid; gap: 12px; margin: 8px 0 14px; }
.wave-card { border: 1px solid var(--linea); border-radius: 14px; background: #fff; padding: 12px 14px 14px; }
.wave-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; }
.wave-head label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gris); }
.wave-n { align-self: center; font: 700 15px var(--font-titulo); color: var(--tinta); min-width: 5.5rem; }
.wave-type select { width: 9rem; }
.wave-vil { flex: 1 1 14rem; max-width: 22rem; }
.wave-vil select { width: 100%; }
.wave-gap-in { display: flex; align-items: center; gap: 6px; }
.wave-gap-in input { width: 6rem; text-align: right; }
.wave-gap-in b { font-weight: 600; color: var(--gris); }
.wave-ref { margin: 0; align-self: center; max-width: 22rem; }
.wave-del { margin-left: auto; align-self: center; min-width: 40px; }
.wave-card .wt-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px 8px; align-items: end; }
.wave-card .wt-u { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wave-card .wt-u > span:first-child { font-size: 11.5px; font-weight: 700; color: var(--gris); line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wave-card .wt-u input[type=number] { width: 100%; min-height: 38px; text-align: right; padding: 4px 8px; -moz-appearance: textfield; appearance: textfield; }
.wave-card .wt-u input[type=number]::-webkit-inner-spin-button, .wave-card .wt-u input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wave-card .wt-box { height: 38px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 10px; background: var(--hueso); cursor: pointer; }
.wave-card .wt-box input { width: 20px; height: 20px; margin: 0; }
@media (max-width: 1250px) { .wave-card .wt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wave-card .wt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wave-del { margin-left: 0; } }
.wave-card .wt-u > span:first-child { text-align: left; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wave-card .wt-u.wt-hero { align-items: stretch; }
.wave-card .wt-box { width: 100%; }
.wave-card .wt-grid { justify-items: stretch; }
.wave-card .wt-grid span { max-width: none; align-self: auto; font-size: 11.5px; }
.wave-card .wt-u > span:first-child { min-height: 2.4em; display: flex; align-items: flex-end; -webkit-line-clamp: unset; }
.wave-card { position: relative; }
.wave-head { padding-right: 48px; }
.wave-del { position: absolute; top: 12px; right: 12px; margin: 0; }
.wave-card .wt-u input[type=number], .wave-card .wt-box { height: 40px; min-height: 40px; box-sizing: border-box; }
@media (max-width: 640px) { .wave-type select { width: 8rem; } .wave-vil { flex-basis: 100%; max-width: none; } }
.wave-card .wt-u input[type=number], .wave-card .wt-box { height: 44px; min-height: 44px; }
/* Estandarte (Grupo → Estandarte): a la izquierda los 4 pasos, a la derecha cómo queda */
.ban-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; margin-top: 10px; }
.ban-steps { margin-bottom: 12px; flex-wrap: wrap; }
.ban-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ban-opt { height: 62px; border: 1px solid var(--linea); border-radius: 12px; background: var(--hueso); display: grid; place-items: center; cursor: pointer; padding: 4px; }
.ban-opt:hover { border-color: var(--oro); }
.ban-opt.on { border: 2px solid var(--oro); background: #fff; box-shadow: 0 0 0 3px rgba(201, 163, 90, .2); }
.ban-opt svg { width: 46px; height: 46px; }
.ban-none { font-size: 22px; color: var(--rojo); font-weight: 700; }
.ban-ctabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ban-ctabs button { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 5px 12px; font: 600 13px var(--font-texto); cursor: pointer; color: var(--tinta); }
.ban-ctabs button.on { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.ban-clabel { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--gris); }
.ban-pal { display: grid; grid-template-columns: repeat(8, 30px); gap: 6px; align-items: center; }
.ban-sw { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
.ban-sw.on { outline: 3px solid var(--oro); outline-offset: 1px; }
.ban-other { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gris); margin-top: 10px; }
.ban-other input[type=color] { width: 44px; height: 30px; min-height: 30px; padding: 2px; }
.ban-side { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 16px; }
.ban-side .crest-prev svg { width: 200px; height: 200px; }
.ban-side .row-actions { justify-content: center; }
@media (max-width: 760px) { .ban-wrap { grid-template-columns: 1fr; } .ban-side { position: static; order: -1; } .ban-side .crest-prev svg { width: 150px; height: 150px; }
  .ban-pal { grid-template-columns: repeat(8, minmax(0, 1fr)); } .ban-sw { width: 100%; } }
.ban-side .crest-prev { width: auto; }
/* Íconos de tropas (assets/unit-icons.js) en los encabezados y en la leyenda */
.uhead, .tbl th .uh { text-align: center; }
.uh { display: inline-flex; justify-content: center; }
.uicon { display: inline-block; vertical-align: middle; }
.tbl.troops thead th.uhead, .tbl thead th .uh { padding-top: 6px; padding-bottom: 6px; }
.unit-legend li b { display: inline-flex; min-width: 26px; justify-content: center; }
.tbl thead th .uicon, .tbl thead th.uhead .uicon { width: 30px; height: 30px; max-width: none; }
.tbl th.num .uh, .tbl th.uhead { text-align: right; }
.tbl th.num .uh { justify-content: flex-end; }
/* Ranking y cuotas */
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--hueso); border: 1px solid var(--linea); }
.role-off { background: #fbe4e1; color: #8e1b1b; border-color: #f1c4be; }
.role-def { background: #e2ebf8; color: #1f3f7a; border-color: #c4d3ee; }
.role-hybrid { background: #f3e8d2; color: #6b4a12; border-color: #e6d2a6; }
.role-scout { background: #e3f1e1; color: #2c5e27; border-color: #c4e0bf; }
.rank-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 6px 0 12px; }
.rank-filters .farm-filter { flex-wrap: wrap; }
.sort-btn { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; }
.sort-btn.on { color: var(--oro-d, #8a6a1f); }
.rank-tbl .role-sel { min-width: 9.5rem; height: 36px; min-height: 36px; padding: 4px 8px; }
.quota { border: 1px solid var(--linea); border-radius: 14px; background: #fff; padding: 14px 16px; margin-bottom: 12px; }
.quota.past { background: var(--hueso); }
.quota header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.quota h3 { margin: 0 0 4px; font-size: 1.05rem; }
.quota header p { margin: 0 0 2px; }
.q-sum { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0; font-weight: 700; font-size: 14px; }
.q-ok { color: var(--ok); font-weight: 700; }
.q-bad { color: var(--rojo); font-weight: 700; }
.q-wait { color: var(--prog); font-weight: 700; }
.warn-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f6e7c8; color: #7a5a12; font-size: 11.5px; font-weight: 700; }
.my-role { margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.my-role-q { margin: 0 0 8px; }
.role-pick { flex-wrap: wrap; }
.rank-guide .paste-steps { margin-top: 10px; }
.tbl thead th .uicon, .tbl thead th.uhead .uicon { width: 26px; height: 26px; }
.tbl.troops th, .tbl.troops td { padding-left: 6px; padding-right: 6px; }
.tbl.troops td.age { white-space: nowrap; font-size: 12px; }
.tbl.troops th, .tbl.troops td { padding-left: 5px; padding-right: 5px; }
.tbl.troops td.role, .tbl.troops tfoot td { font-size: 13px; }
/* Encabezado de tropa: ícono + nombre corto debajo (se reconoce sin pasar el mouse) */
/* 03/11 (Santi: "Rastrea-dor", "Swords-man", íconos desalineados): bloque de ALTO FIJO = fila del ícono (26 px) + 2 renglones de
   nombre (24 px). Con todas las celdas del mismo alto y abajo de la fila, los íconos quedan en la misma línea aunque un nombre ocupe
   1 renglón y otro 2. El nombre va en un renglón si hay lugar; si no, se corta SOLO entre palabras (troopsView.headCell arma a lo
   sumo 2 trozos que no se parten): sin guiones automáticos ni cortes en medio de una palabra. */
.tbl th .uh { display: inline-grid; grid-template-rows: 26px 24px; row-gap: 4px; justify-items: center; align-items: start; vertical-align: bottom; }
.uh .uh-ic { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; }
.tbl th.num .uh { justify-content: center; }
.tbl thead th.num:has(> .uh), .tbl thead th.uhead, .tbl thead th:has(> .uh) { text-align: center !important; vertical-align: bottom; }
.uh .uname { display: block; font-size: 10px; line-height: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--noche, #2a2927); white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; text-align: center; }
.uh .uname .ul { white-space: nowrap; }
.tbl.troops thead th.uhead, .tbl.troops thead th:has(> .uh) { padding-left: 2px; padding-right: 2px; }
.tbl.troops thead th.role { white-space: normal; line-height: 1.15; }
.tbl.troops .vname { min-width: 5.5rem; }
/* Íconos de rol (THQ.roleIcon) */
.ricon { display: inline-block; vertical-align: -3px; flex: none; }
.role-chip .ricon, .role-pick .ricon, .farm-filter .ricon { margin-right: 1px; }
.role-sel-wrap { display: inline-flex; align-items: center; gap: 6px; }
.role-sel-ic { display: inline-flex; width: 18px; justify-content: center; }
.tbl.troops thead th.role { letter-spacing: 0; }
.ricon-off { color: #a3201a; } .ricon-def { color: #1f4a8f; } .ricon-hybrid { color: #7a5410; } .ricon-scout { color: #2c6e26; }
.farm-filter button.on .ricon { color: var(--crema); }
.farm-filter button .ricon, .role-pick .ricon { vertical-align: -5px; margin-right: 3px; }
/* ---------- Mis tropas (2026-11-01): cabecera con cifras, tabla, actualizar en pestañas ---------- */
.tp-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.tp-top h1 { margin: 0; }
.tp-acc { margin: 0; min-width: min(320px, 100%); }
.tp-acc label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.tp-acc select { min-width: 100%; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--tinta); }
.tp-head > .sub { margin: 6px 0 18px; }
.tp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; min-height: 104px; }
.tp-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 13px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; min-width: 0; }
.tp-kpi-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--hueso); margin-bottom: 8px; }
.tp-kpi-ic .uicon { width: 26px; height: 26px; }
.tp-kpi-v { font-family: var(--font-titulo); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-kpi-l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.tp-kpi.k-count { background: var(--noche); border-color: var(--noche); }

.tp-kpi.k-count .tp-kpi-v { color: var(--oro); }
.tp-kpi.k-count .tp-kpi-l { color: var(--crema); opacity: .8; }
.tp-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.tp-stamp { display: flex; flex-wrap: wrap; gap: 10px 32px; min-height: 52px; align-items: flex-start; }
.tp-st { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tp-st .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.tp-st .dual-mini { font-size: 12px; color: var(--gris); }
.tp-chip { display: inline-block; vertical-align: 1px; margin-left: 6px; }
#tp-update-btn { white-space: nowrap; }
.tp-head .my-role { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 14px; background: var(--hueso); border: 0; }
.tp-head .my-role-q { margin: 0; }
.tp-head .role-pick { background: #fff; }
.tp-table-card h2, #tp-update h2 { margin-top: 0; }
.tp-table-slot { min-height: 220px; }
.tp-table-slot > .table-wrap:first-child { margin-top: 0; }
body.tp-loading .tp-kpis, body.tp-loading .tp-table-slot, body.tp-loading .tp-stamp { opacity: .5; }
#tp-update .subtabs { margin-top: 6px; }
#tp-update .paste-box[data-kind=manual] { gap: 10px; }
.tp-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; max-width: min(520px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 999px; background: var(--noche); color: var(--crema); font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tp-toast.bad { background: var(--rojo); color: #fff; }
@media (max-width: 900px) { .tp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tp-kpi.k-count { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .tp-kpi.k-count .tp-kpi-ic { margin: 0; }
  .tp-kpi.k-count .tp-kpi-l { order: 2; }
  .tp-kpi { padding: 12px 14px; }
  .tp-acc { width: 100%; }
  .tp-meta { flex-direction: column; align-items: stretch; }
  #tp-update-btn { justify-content: center; }
  .tp-head .my-role { flex-direction: column; align-items: stretch; }
}
.tp-ago { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tp-ago .tp-chip { margin: 0; }
.tp-kpi.k-count .tp-kpi-ic { background: var(--crema); }
@media (max-width: 700px) { .tp-head .role-pick { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; width: 100%; } .tp-head .role-pick button { justify-content: center; } }
/* Tabla de tropas con la estética del juego (Visión general → Tropas): grilla fina, números centrados, filas compactas */
.tbl.troops { border-collapse: collapse; }
.tbl.troops th, .tbl.troops td { border: 1px solid #e6e1d5; }
.tbl.troops tr > :first-child { border-left: 0; }
.tbl.troops tr > :last-child { border-right: 0; }
.tbl.troops thead tr:first-child > * { border-top: 0; }
.tbl.troops tfoot tr:last-child > * { border-bottom: 0; }
.tbl.troops thead th { background: #fbfaf6; vertical-align: bottom; }
.tbl.troops thead th.role { background: var(--oro-c); }
.tbl.troops tbody td.num, .tbl.troops tfoot td.num, .tbl.troops thead th.num { text-align: center !important; }
.tbl.troops tbody td, .tbl.troops tbody th { padding-top: 7px; padding-bottom: 7px; }
.tbl.troops td.num { font-size: 14px; line-height: 1.15; }
.tbl.troops td.zero { color: #b9b3a6; }
.tbl.troops tbody tr:hover, .tbl.troops tbody tr:hover .vname { background: #f1f6e7; }
.tbl.troops tbody tr.stale { background: #fffaf0; }
.tbl.troops .vname { white-space: normal; max-width: 9.5rem; }
.tbl.troops .vname .coord { white-space: nowrap; }
.tbl.troops .vname .vn { display: inline; color: var(--ok); font-weight: 800; }
.tbl.troops .vname .coord { margin-left: 4px; }
.tbl.troops .vname .working { display: inline; margin-left: 6px; }
.tbl.troops .lvl { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; color: var(--oro-o); letter-spacing: .01em; }
.tbl.troops tfoot td, .tbl.troops tfoot th { border-top: 2px solid #d9d2c2; background: #fbfaf6; }
@media (max-width: 700px) { .tbl.troops .vname { white-space: normal; } .tbl.troops .vname .coord { display: block; margin-left: 0; } }
.tbl.troops tbody td.num, .tbl.troops tfoot td.num { padding-left: 4px; padding-right: 4px; }
/* Instrucciones para el sitter: el panel de atajos no se corta; campos con aire en pantallas medianas; color del grupo como muestra redonda */
.card.aldeas { overflow: visible; }
.card.aldeas > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card.aldeas > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.grupo-b input[type=color] { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42, 41, 39, .25); overflow: hidden; }
.grupo-b input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.grupo-b input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.grupo-b input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
@media (min-width: 701px) and (max-width: 1560px) {
  .sit-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 24px; }
  .aldea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
  .aldea .nom { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; }
  .aldea .nom b { display: inline; font-size: 18px; }
}

/* ---------- Crédito CheWeb (estándar v1, igual en todos los sitios de Santi; ÚNICA animación del sitio, pedida por Santi; sin ella con prefers-reduced-motion) ---------- */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/hanken/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }
/* CREDITO CHEWEB v1 (02/10/2026): estandar para todos los sitios. NO se modifica por sitio:
   solo se elige oscuro (por defecto) o claro (clase cw-claro). Fuente: Hanken Grotesk 500 y 700. */
.cw-credito{--cw-violeta:#4d5bff;--cw-texto:#fff;--cw-borde:rgba(255,255,255,.22);--cw-fondo:rgba(255,255,255,.06);--cw-humo:#8f99ff;position:relative;display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;min-height:46px;border-radius:999px;border:1px solid var(--cw-borde);background:var(--cw-fondo);color:var(--cw-texto);font:500 15px/1.2 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;text-decoration:none;isolation:isolate;transition:border-color .25s,background .25s,transform .25s}
.cw-credito>span:first-child{white-space:nowrap}
.cw-credito b{font-weight:700}
.cw-credito:hover,.cw-credito:focus-visible{border-color:var(--cw-violeta);background:rgba(77,91,255,.14);transform:translateY(-1px)}
.cw-credito:focus-visible{outline:2px solid var(--cw-violeta);outline-offset:3px}
.cw-mate{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;position:relative}
.cw-mate svg{position:relative;z-index:1;width:18px;height:26px;overflow:visible}
.cw-vapor{position:absolute;top:0;left:0;width:36px;height:36px;pointer-events:none;z-index:0}
.cw-vapor i{position:absolute;top:10px;width:2.5px;height:5px;border-radius:2px;background:var(--cw-humo);opacity:0;animation:cw-humo 2.1s ease-out infinite}
.cw-vapor i:nth-child(1){left:13.5px}
.cw-vapor i:nth-child(2){left:16.75px;animation-delay:.7s}
.cw-vapor i:nth-child(3){left:20px;animation-delay:1.4s}
@keyframes cw-humo{0%{opacity:0;transform:translateY(2px) scaleY(.6)}20%{opacity:1}80%{opacity:0;transform:translateY(-13px) scaleY(1.1)}100%{opacity:0}}
.cw-credito.cw-claro{--cw-texto:#08080a;--cw-borde:rgba(8,8,10,.14);--cw-fondo:rgba(77,91,255,.05);--cw-humo:#4d5bff}
.cw-credito.cw-claro .cw-mate{background:#eef0ff}
@media (max-width:360px){.cw-credito{font-size:14px;gap:10px;padding-left:16px}}
@media (prefers-reduced-motion:reduce){.cw-credito{transition:none}.cw-vapor{display:none}}

/* =====================================================================================================================
   UI 2026 (01/11/2026): un solo sistema para todo el sitio. Esto va al final a propósito: unifica lo de arriba.
   ===================================================================================================================== */
:root { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --sombra-s: 0 1px 2px rgba(42, 41, 39, .06), 0 4px 14px rgba(42, 41, 39, .06); }
.ic { display: inline-block; flex: none; vertical-align: -3px; }

/* ---- Capa flotante: el aviso de alarmas es una banda en el contenido; chat y conectados, botones compactos ---- */
main .alarm-bar { position: static; display: flex; align-items: center; gap: 12px; width: auto; margin: 0 0 18px; padding: 10px 10px 10px 16px; border-radius: var(--r-s);
  background: var(--noche); color: var(--crema); box-shadow: none; font-size: 14px; }
main .alarm-bar .alarm-bar-ic { display: inline-flex; color: var(--oro); }
main .alarm-bar .alarm-bar-tx { flex: 1; min-width: 0; }
main .alarm-bar .btn { flex: none; }
main .alarm-bar .alarm-bar-x { position: static; display: inline-grid; place-items: center; width: 36px; height: 36px; opacity: .7; }
@media (max-width: 640px) { main .alarm-bar { flex-wrap: wrap; } main .alarm-bar .alarm-bar-tx { flex-basis: calc(100% - 80px); } }
body:has(.alarm-bar) .online-fab { bottom: 16px; }
.online-fab { right: 18px; bottom: 18px; }
.fab-row { flex-wrap: nowrap; }
.online-btn { position: relative; height: 44px; min-width: 44px; padding: 0 14px; justify-content: center; border-color: var(--linea-f); font-size: 13.5px; box-shadow: var(--sombra-s); }
.online-btn .fab-l { display: none; }
.fab-online b { font-variant-numeric: tabular-nums; }
.fab-chat { width: 44px; padding: 0; }
.fab-chat .chat-badge { position: absolute; top: -4px; right: -4px; }
@media (min-width: 1280px) { .fab-chat { width: auto; padding: 0 16px; } .online-btn .fab-l { display: inline; } .fab-online b { display: none; } }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.online-panel .chat-head { padding: 0 0 8px; margin-bottom: 4px; }
.chat-panel .chat-head { padding: 12px 10px 10px 16px; }
.chat-priv { display: inline-flex; align-items: center; gap: 4px; }
.fab-x { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 10px; background: none; color: var(--gris); cursor: pointer; }
.fab-x:hover { background: var(--hueso); color: var(--tinta); }
.chat-empty { padding: 28px 16px; text-align: center; }
@media (max-width: 640px) { .chat-panel { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; z-index: 90; } }

/* ---- Botones: 3 tamaños (48 / 40 / 32) ---- */
.btn { min-height: 44px; }
.btn-oro { height: auto; min-height: 44px; }
.btn.small, .btn-sm { min-height: 36px; height: auto; padding: 0 14px; font-size: 13.5px; }
.btn .ic { width: 18px; height: 18px; }
.btn.small .ic { width: 16px; height: 16px; }
.btn.ghost { background: #fff; }
.btn.ghost:hover { background: #fff; border-color: var(--tinta); }
.btn.danger { background: #fff; }
.tbl .btn.small { min-height: 32px; padding: 0 12px; }
.chip-s { height: 32px; }

/* ---- Pestañas y segmentos: uno solo para todo el sitio; en el celular se deslizan en vez de amontonarse ---- */
.subtabs, .page-tabs, .tabs-f { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hueso); border: 0; width: fit-content;
  max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar, .page-tabs::-webkit-scrollbar, .tabs-f::-webkit-scrollbar { display: none; }
.subtabs button, .page-tabs a, .tabs-f .chip-s { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--gris);
  font: 700 14px var(--font-texto); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.subtabs button:hover, .page-tabs a:hover, .tabs-f .chip-s:hover { color: var(--tinta); background: rgba(255, 255, 255, .6); }
.subtabs button.active, .page-tabs a.on, .page-tabs a[aria-current], .tabs-f .chip-s.on { background: var(--noche); color: var(--crema); }
/* Opciones tipo chip con radio/checkbox: el control nativo no se ve; elegido = oscuro con tilde */
.chip { min-height: 38px; }
.chip > input[type=radio], .chip > input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip { position: relative; }
.chip:has(input:checked)::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(201, 163, 90, .35); }

/* ---- Etiquetas de estado: una sola altura y paleta de tokens ---- */
.pill, .wip, .badge, .late-tag, .tag { height: 24px; padding: 0 10px; font: 700 12px/1 var(--font-texto); border-radius: 999px; }
.badge.kind-normal { background: var(--hueso); color: var(--tinta); }
.badge.st-pending, .badge.prio-low { background: var(--hueso); color: var(--gris); }

/* ---- Desplegables: todos con el mismo chevron, fila de 44 px ---- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details.more > summary, details.box > summary, details.unit-legend > summary, details.advanced > summary, details.rank > summary, .calc-fold > summary, details.more-opts > summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; font: 700 14.5px var(--font-texto); color: var(--tinta); }
details.more > summary::before, details.box > summary::before, details.unit-legend > summary::before, details.advanced > summary::before,
details.rank > summary::before, .calc-fold > summary::before, details.more-opts > summary::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--oro-o); transition: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
details[open].more > summary::before, details[open].box > summary::before, details[open].unit-legend > summary::before, details[open].advanced > summary::before,
details[open].rank > summary::before, details[open].calc-fold > summary::before, details[open].more-opts > summary::before { transform: rotate(90deg); }
details.unit-legend > summary { font-size: 13.5px; color: var(--gris); min-height: 34px; }
details.box { border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; padding: 4px 16px; }
details.box[open] { padding-bottom: 16px; }

/* ---- Controles nativos con la cara de TravCrew ---- */
textarea { font: 14px/1.5 var(--font-texto); }
input[type=checkbox]:not(.sw) { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 20px; margin: 0; border: 1.5px solid var(--linea-f); border-radius: 6px;
  background: #fff center / 14px no-repeat; cursor: pointer; vertical-align: -5px; }
input[type=checkbox]:not(.sw):checked { background-color: var(--noche); border-color: var(--noche);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1E2C0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E"); }
input[type=checkbox]:not(.sw):focus-visible { box-shadow: 0 0 0 3px rgba(201, 163, 90, .35); outline: none; }
.sw input[type=checkbox]:not(.sw) { -webkit-appearance: auto; appearance: auto; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--hueso); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--hueso); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--oro); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--oro-o); box-shadow: var(--sombra-s); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--oro-o); }
input[type=color] { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; min-height: 0; padding: 0; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linea-f); cursor: pointer; background: none; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---- Horas: número claro, sin rótulos en mayúscula; números alineados sin fuente monoespaciada ---- */
.mono, .tbl .mono, code.t { font-family: var(--font-texto); font-variant-numeric: tabular-nums; }
.dual-mini > span { font-weight: 700; color: var(--tinta); }
.dual-mini .tag { height: auto; padding: 0; background: none; color: var(--gris-c); font: 600 11px var(--font-texto); text-transform: none; letter-spacing: 0; margin-left: 2px; }
.dual-mini small { color: var(--gris-c); }

/* ---- Celdas de nombre: sin cortar palabra por palabra ---- */
.tbl td.who, .tbl th.who, .tbl .vill, .tbl .player-cell { white-space: nowrap; }

/* ---- Estados vacíos y errores ---- */
.empty-act { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.empty-act p { margin: 0; max-width: 46ch; color: var(--gris); }
.empty-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hueso); color: var(--oro-o); }
.err { position: relative; padding: 12px 14px 12px 44px; border-radius: var(--r-s); background: var(--rojo-bg); border-left: 4px solid var(--rojo); color: var(--rojo); }
.err::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: var(--rojo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.ok { border-radius: var(--r-s); }

/* ---- Rótulos de formulario: un solo estilo ---- */
.grid-form label > span:first-child, .lbl-up { font: 600 13px var(--font-texto); letter-spacing: 0; text-transform: none; color: var(--gris); }

/* ---- Menú del usuario y diálogos ---- */
.menu-pop a.danger, .user-menu .logout, .menu-pop a[href*="logout"] { color: var(--rojo); }
.dual .tag { height: auto; padding: 0; }
/* Avisos de "listo": la tilde la pone el CSS (antes era un "✓" escrito) */
span[class="ok"], span[class="ok small"], .ok-inline, .q-ok, .ok-v { display: inline-flex; align-items: center; gap: 6px; }
div[class="ok"], p[class="ok"], p[class="ok small"] { display: flex; align-items: center; gap: 8px; }
div[class="ok"]::before, p[class="ok"]::before, p[class="ok small"]::before, span[class="ok"]::before, span[class="ok small"]::before, .ok-inline::before, .q-ok::before, .ok-v::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.night-banner .ic, .top-chip .ic, .rm-ic .ic { vertical-align: -3px; }
.rm-ic { display: inline-flex; }
input[type=range]::-webkit-slider-runnable-track { background: #E3DDD0; }
input[type=range]::-moz-range-track { background: #E3DDD0; }
@media (min-width: 1280px) and (max-width: 1599px) { .fab-chat { width: 44px; padding: 0; } .online-btn .fab-l { display: none; } .fab-online b { display: inline; } }
/* Diálogo "Mi rango": permisos en dos columnas, tilde verde o cruz gris, sin muro de texto */
.perm-group { margin: 16px 0 6px; font: 700 12px var(--font-texto); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.perm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 14px; }
.perm-list li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-weight: 500 !important; }
.perm-list li.on { color: var(--tinta); }
.perm-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; }
.perm-list li.on .perm-ic { background: var(--ok-bg); color: var(--ok); }
.perm-list li.off .perm-ic { background: var(--hueso); color: var(--gris-c); }
@media (max-width: 560px) { .perm-list { grid-template-columns: 1fr; } }
/* Menú del usuario */
.user-pop a, .user-pop button, .menu-pop a { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.user-pop { min-width: 240px; padding: 6px; }
.user-pop a, .user-pop button { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.user-pop [data-ic] { display: inline-flex; color: var(--gris); }
.um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linea); }
.um-head span { display: flex; flex-direction: column; min-width: 0; }
.um-head b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head small { color: var(--gris); font-size: 12.5px; }
.um-sep { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }
.user-pop .um-out, .user-pop .um-out [data-ic] { color: var(--rojo); }

/* Aviso de "Revisá el tipo de envío": nota chica en su propia línea, con el chip "En desarrollo" al lado (no huérfano) */
.game-link { row-gap: 6px; }
.game-link .warn-inline { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; font-size: 13px; color: var(--gris); }
.game-link .warn-inline + .wip { margin-top: -2px; }
/* Rótulos en mayúscula de los formularios largos: en minúscula y gris, como el resto */
legend, .lbl-caps, .call .lbl, .stamps .lbl { font: 600 13px var(--font-texto) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gris); }
.top-chip.night-banner { display: inline-flex; align-items: center; gap: 6px; }
.note-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; color: var(--gris); }
.note-line .ic { color: var(--oro-o); }
/* Aviso "Activá el sonido": chip en la barra de arriba (no tapa contenido ni lo corre) */
.alarm-bar.alarm-chip { position: static; display: inline-flex; align-items: center; gap: 2px; width: auto; height: 36px; padding: 0 4px 0 2px; border-radius: 999px;
  background: var(--noche); color: var(--crema); box-shadow: none; font-size: 13px; }
.alarm-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--oro); color: var(--tinta);
  font: 700 13px var(--font-texto); cursor: pointer; white-space: nowrap; }
.alarm-chip-btn .ic { color: var(--tinta); }
.alarm-chip .alarm-bar-x { position: static; display: inline-grid; place-items: center; width: 28px; height: 28px; opacity: .75; }
@media (max-width: 700px) { .alarm-chip-btn span { display: none; } .alarm-chip-btn { padding: 0 10px; } }

/* Inicio en el celular: las 4 cifras de a dos (antes una por fila ocupaba toda la pantalla) */
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .kpis .kpi { padding: 14px; } .kpi .n { font-size: 28px; } .kpi .h { font-size: 12.5px; } }

/* ===== UI 2026 tanda 2 ===== */
/* -- Utilidades -- */
.nowrap, .nw { white-space: nowrap; }
.icon-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0; border-radius: 999px; }
.icon-btn.danger { color: var(--rojo); }
.icon-btn.danger:hover { background: var(--rojo-bg); color: var(--rojo); }
.tag-warn { background: var(--prog-bg); color: var(--prog); gap: 4px; cursor: help; }
.tag-soon { background: var(--hueso); color: var(--gris); font-weight: 600; cursor: default; }
.btn .ic, .btn [data-ic] { flex: none; }
.btn [data-ic] { display: inline-flex; }

/* -- Hora compacta en tablas (THQ.dtCell): servidor en negrita y debajo "HH:MM tu hora" -- */
.dt { display: inline-flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-1 > b { font-weight: 700; color: var(--tinta); font-size: .9rem; }
.dt .dt-d { font-size: .76rem; font-weight: 600; color: var(--gris); }
.dt > small { font-size: .76rem; color: var(--gris); }
.dt .dt-s { display: none; }
[data-time="server"] .dt > small { display: none !important; }
[data-time="local"] .dt .dt-1 { display: none !important; }
[data-time="local"] .dt > small { font-size: .9rem; font-weight: 700; color: var(--tinta); }
[data-time="local"] .dt .dt-s { display: inline; }

/* -- Celdas de nombre: una línea + coordenadas chicas debajo -- */
.who-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
th.who-cell { display: table-cell; }
th.who-cell > .who-n, th.who-cell > small { display: block; }
.who-n { white-space: nowrap; font-weight: 700; }
.who-cell small { font-size: .76rem; font-weight: 500; white-space: nowrap; }
.cell-act { text-align: right; white-space: nowrap; width: 1%; }
.cell-act .row-actions { justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
@media (min-width: 641px) { .units-cell { min-width: 11rem; } }
.slow-ic { color: var(--prog); vertical-align: -3px; }
.state-cell { white-space: nowrap; }
.state-cell .tag-warn { margin-top: 4px; }
.tbl .state .countdown { white-space: nowrap; }
.tbl.sends td, .tbl.sends th { vertical-align: middle; }

/* -- Menú "⋯" de una fila (Grupo → Miembros) -- */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--linea-f); background: #fff; color: var(--tinta); cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { border-color: var(--tinta); }
.row-menu-pnl { position: fixed; z-index: 70; width: 248px; padding: 6px; border-radius: var(--r-s); background: var(--papel); border: 1px solid var(--linea); box-shadow: 0 18px 40px -16px rgba(21, 19, 15, .35); text-align: left; white-space: normal; }
.rm-field { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; font: 600 13px var(--font-texto); color: var(--gris); }
.rm-field select { width: 100%; }
.rm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 600 14px var(--font-texto); color: var(--tinta); cursor: pointer; text-align: left; }
.rm-item:hover { background: var(--hueso); }
.rm-item.danger { color: var(--rojo); }
.rm-item.danger.confirm { background: var(--rojo-bg); }
.row-menu-pnl .um-sep { margin: 2px 4px; }
.members-tbl td, .members-tbl th { vertical-align: middle; }

/* -- Plaza de torneos editable en "Tropas por aldea" (Mis tropas, 03/11): botón "PT 10" y menú chico con los niveles 0 a 20 -- */
.ts-pick > summary.ts-btn { width: auto; min-width: 58px; height: 30px; padding: 0 10px; font: 700 13px/1 var(--font-texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-pick > summary.ts-btn.unset { color: var(--gris); border-style: dashed; }
.ts-pnl { width: 260px; padding: 10px; }
.ts-pnl-h { margin: 0 0 8px; font: 700 13px/1.3 var(--font-texto); color: var(--tinta); }
.ts-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ts-grid button { height: 32px; min-width: 0; padding: 0; border: 1px solid var(--linea-f); border-radius: 8px; background: #fff; font: 700 13px/1 var(--font-texto); color: var(--tinta); cursor: pointer; font-variant-numeric: tabular-nums; }
.ts-grid button:hover { border-color: var(--tinta); }
.ts-grid button.on { background: var(--noche); border-color: var(--noche); color: #fff; }
.ts-pnl-n { margin: 8px 0 0; }
.ts-line { margin: 10px 0 0; color: var(--tinta); }

/* -- Tablas apiladas en el celular: cada fila es una tarjeta, nada queda fuera de la pantalla -- */
@media (max-width: 640px) {
  .table-wrap:has(> .tbl.stack) { overflow: visible; border: 0; background: none; }
  .tbl.stack { background: none; }
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody { display: block; width: 100%; }
  .tbl.stack tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; margin: 0 0 10px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-s); }
  .tbl.stack tr[hidden] { display: none; }
  .tbl.stack tr.late { background: #FBEDEB; } .tbl.stack tr.off-hours { background: #FBF3DE; }
  .tbl.stack th, .tbl.stack td { display: flow-root; position: relative; padding: 0 0 0 8rem; border: 0; text-align: left !important; min-width: 0 !important; min-height: 1.4em; }
  .tbl.stack th[scope=row] { padding: 0 0 8px; font-size: 1rem; border-bottom: 1px solid var(--linea); }
  .tbl.stack [data-label]::before { content: attr(data-label); float: left; width: 7.4rem; margin: 1px 0 0 -8rem; font: 600 12px/1.35 var(--font-texto); color: var(--gris); text-transform: none; letter-spacing: 0; }
  .tbl.stack th[scope=row]::before { content: none; }
  .tbl.stack th[scope=row] { order: -1; }
  .tbl.stack td:empty { display: none; }
  .tbl.stack td.cell-act { width: auto; padding: 4px 0 0; }
  .tbl.stack td.cell-act::before { content: none; }
  .tbl.stack td.cell-act .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .tbl.stack td.cell-act:has(> .row-menu), .tbl.stack td.cell-act:has(> .icon-btn) { position: absolute; top: 10px; right: 10px; padding: 0; }
  .tbl.stack tr:has(> td.cell-act > .row-menu), .tbl.stack tr:has(> td.cell-act > .icon-btn) { position: relative; }
  .tbl.stack tr:has(> td.cell-act > .row-menu) > th[scope=row], .tbl.stack tr:has(> td.cell-act > .icon-btn) > th[scope=row] { padding-right: 44px; }
  .tbl.stack .who-n { white-space: normal; }
  .tbl.stack ul.unit-times { margin: 0; }
  .tbl.stack.sheet-tbl .col-x { display: none; }
  .tbl.stack tbody tr:hover { background: #fff; }
}

/* -- Defensa: "Quién llega" compacto -- */
.cands .unit-times li { display: grid; grid-template-columns: 6.5rem 4.6rem auto; gap: 0 8px; align-items: baseline; padding: 2px 0; }
.cands .unit-times .ut-c { font-weight: 700; }
.cands .unit-times .ok-t .ut-c, .cands .unit-times .ok-t .ut-t { color: var(--ok); }
.cands .unit-times .late-t { color: var(--tinta); }
.cands .unit-times .late-t .ut-c, .cands .unit-times .late-t .ut-t { color: var(--gris); }
.cands .unit-times .ut-t { font-variant-numeric: tabular-nums; }
.cands .unit-times .ut-ok { color: var(--ok); display: inline-flex; }
.cands .unit-times .ut-late { font-size: 12px; font-weight: 700; color: var(--rojo); white-space: nowrap; }
.cands .unit-times .ut-d { grid-column: 1 / -1; color: var(--gris); font-size: .76rem; margin-top: -1px; }
.cands th.who-cell { min-width: 11rem; }
.resp-tbl .cell-act .btn + .btn { margin-left: 6px; }

/* -- Ejércitos enemigos -- */
.hammers .delta-list { display: flex; flex-direction: column; gap: 1px; }
.hammers .delta-list span { white-space: nowrap; }
.hammers .seen-by { display: block; margin-top: 3px; font-size: .74rem; }
.hammers th.name { min-width: 9rem; }

/* -- Miembros: "Juega (próximas 24 h)" en dos líneas como mucho -- */
.onl { white-space: normal; }
.onl > .dt-1 { display: flex; align-items: center; } .onl .dt-1 > b { display: inline-flex; flex-wrap: wrap; gap: 0 2px; font-size: .86rem; }
.onl > small { display: block; white-space: normal; }
.onl .sep { color: var(--gris-c); font-weight: 400; }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex: none; }
.on-dot.yes { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.on-dot.no { background: transparent; border: 1.5px solid var(--gris-c); }
.sheet-tbl td:has(> .onl) { min-width: 9.5rem; }

/* -- Informes -- */
.tbl.reports .badge { white-space: nowrap; }
.tbl.reports td .ic { vertical-align: -2px; }

/* -- Órdenes, Objetivos y Ops: un botón dorado por tarjeta -- */
.order-route .ic { vertical-align: -3px; color: var(--oro-o); }
.route-arrow { color: var(--gris); margin: 0 2px; }
.targets-tbl .cell-act .row-actions { gap: 6px; }

/* Ops: selector de ops (chips) + "Nueva op" al final; el formulario aparece al tocarlo */
.op-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.op-switch .subtabs { margin: 0; }
.op-new-btn { height: 40px; }
.op-new { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--linea-f); border-radius: var(--r-s); background: #fff; }
.op-new[hidden] { display: none !important; }
#ops-list:has(> p.muted) + .op-new { border-style: solid; }
.target-head { gap: 8px 22px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--linea); align-items: center; }
.target-head .tg-name { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; }
.target-head .tg-name .ic { color: var(--rojo); }
.tg-meta { display: inline-flex; align-items: center; gap: 8px; }
.tg-meta .lbl { margin: 0; }
.tg-del { margin-left: auto; }
#op-publish .ic, #op-copy .ic { margin-right: 2px; }
/* "Agregar atacante": un solo nivel (sin tarjeta dentro de un plegable dentro de una tarjeta) */
.op-add { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.op-add h2 { margin: 0 0 6px; }
.op-steps .op-step { border: 0; border-radius: 0; background: none; padding: 14px 0 14px 40px; margin: 0; position: relative; }
.op-steps .op-step + .op-step { border-top: 1px solid var(--linea); }
.op-steps .op-step h3 { margin-left: -40px; }
.op-steps .op-step h3 .ov-n { width: 28px; height: 28px; margin-right: 4px; }
@media (max-width: 640px) { .op-steps .op-step { padding-left: 0; } .op-steps .op-step h3 { margin-left: 0; } .tg-del { margin-left: 0; } }

/* -- Oleadas: Calcular primero; los demás, secundarios. Héroe = casilla normal; campos alineados abajo -- */
.waves-actions { align-items: center; }
.wave-card .wt-grid { align-items: end; }
.wave-card .wt-u > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-hero2 { display: flex; align-items: center; gap: 8px; height: 38px; font: 600 13px var(--font-texto); color: var(--tinta); cursor: pointer; white-space: nowrap; min-width: 0; }
.wt-hero2 input { width: 18px; height: 18px; margin: 0; accent-color: var(--oro-o); flex: none; }
.wave-del { margin-left: auto; color: var(--gris); }
.wave-del:hover { color: var(--rojo); background: var(--rojo-bg); }

/* -- Ataques entrantes: calculador en una línea + "Ver tiempos"; banda de evasión sobria -- */
.calc.calc-1 { background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--r-s); padding: 10px 14px; font-size: 14px; }
.calc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.calc-ic { color: var(--oro-o); align-self: center; display: inline-flex; }
.calc-t { font: 600 13px var(--font-texto); color: var(--gris); }
.calc-vs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.calc-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.calc.calc-1 .calc-v b { font: 700 14px var(--font-texto); color: var(--tinta); }
.calc-v.head-none b { color: var(--prog); }
.calc-ts { font: 700 11px var(--font-texto); color: var(--gris); background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 1px 7px; }
.calc-slow { font-size: 13px; color: var(--gris); }
.calc-same { font-size: 13px; color: var(--gris); }
.calc-more { margin-top: 6px; }
.calc-more > summary { cursor: pointer; font: 700 13px var(--font-texto); color: var(--oro-o); width: fit-content; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.calc-more > summary::-webkit-details-marker { display: none; }
.calc-more > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.calc-more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.calc-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }
.calc-wip { margin: 0 0 6px; }
.calc-body .unit-times li { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.calc-body .unit-times li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-body .unit-times .ut-i { display: inline-flex; flex: none; }
.calc-body .unit-times .ok-t, .calc-body .unit-times .ok-t b { color: var(--ok); }
.calc-body .unit-times .no-t, .calc-body .unit-times .no-t b { color: var(--gris); font-weight: 500; }
.calc-body .unit-times .no-t b { font-weight: 600; }
.calc-body .unit-times b.mono { font: 700 13px var(--mono); margin-left: auto; }
.calc-body .ts-form { margin-top: 8px; }
.evasion-band { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: var(--rojo-bg); color: var(--rojo); border-left: 4px solid var(--rojo); font-weight: 600; }
.evasion-band .eb-ic { display: inline-flex; margin-top: 1px; }
.evasion-band .eb-t { margin: 0; font-weight: 700; }
.evasion-band small { font-weight: 500; }
.evasion-band .eb-chip { background: transparent; border-color: rgba(142, 27, 27, .3); color: var(--rojo); height: 18px; font-size: 9.5px; margin-left: 4px; }

/* -- Barra superior: el título nunca se corta con "…"; debajo de 900 px no se muestra -- */
.topbar-title { flex: none; min-width: 0 !important; overflow: visible; text-overflow: clip; }
.topbar .raid-mini { flex: 0 1 auto; min-width: 0; }
.topbar .alarm-chip { flex: none; }
@media (max-width: 1440px) { .topbar .alarm-chip-btn span { display: none; } .topbar .alarm-chip-btn { padding: 0 10px; } }
@media (max-width: 899px) { .topbar-title { display: none; } }

/* -- Mis ajustes: índice fijo de secciones (≥ 1100 px) y "✓ Guardado" al lado del título -- */
.sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.sec-head h1 { margin-bottom: 0; }
.save-state { font-size: 13px; font-weight: 700; color: var(--ok); min-height: 1em; }
.save-state .ok-inline { color: var(--ok); font-size: 13px; }
.save-state .ok-inline::before { width: 14px; height: 14px; }
.set-toc { display: none; }
.set-main > .card { scroll-margin-top: 88px; }
#raid { scroll-margin-top: 88px; }
@media (min-width: 1100px) {
  .set-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 24px; align-items: start; }
  .set-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 92px; padding: 6px 0; }
  .set-toc-h { margin: 0 0 6px 12px; font: 700 12px var(--font-texto); color: var(--gris); }
  .set-toc a { display: block; padding: 7px 12px; border-radius: 10px; color: var(--gris); font-weight: 600; font-size: 14px; border-left: 2px solid transparent; }
  .set-toc a:hover { background: #fff; color: var(--tinta); }
  .set-toc a.toc-danger { color: var(--rojo); }
  .set-main { min-width: 0; }
  .set-main > .card:first-child { margin-top: 0; }
}
.snd-row .btn [data-ic] { display: inline-flex; }

/* -- Alarmas: un solo estilo de segmentado; flechas con íconos; rótulos en minúscula -- */
.pg-alarmas .seg, .pg-alarmas .seg-sm { padding: 4px; gap: 4px; }
.pg-alarmas .seg button { height: 36px; padding: 0 16px; font: 700 14px var(--font-texto); display: inline-flex; align-items: center; gap: 6px; }
.pg-alarmas .seg button [data-ic] { display: inline-flex; }
.ts-u .ts-b { display: grid; place-items: center; width: 36px; height: 26px; padding: 0; border-radius: 8px; color: var(--gris); }
.ts-u .ts-b:hover { background: var(--hueso); color: var(--tinta); }
.ts-u .ts-b [data-ic] { display: inline-flex; }
.mstep button { display: inline-grid; place-items: center; padding: 0; color: var(--tinta); }
.mstep button [data-ic] { display: inline-flex; }
.al-opts .lbl, .al-lead .lbl, .al-snd .lbl { font: 600 13px var(--font-texto) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--gris); }
#alarm-test2 [data-ic] { display: inline-flex; }

/* -- Simulador: título de tarjeta con ícono (sin <legend> que corte el borde) -- */
.sim-side { padding-top: 14px; }
.sim-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); font: 700 1.05rem var(--font-titulo); }
.sim-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--noche); color: var(--oro); }

/* -- Diálogos: aviso grande centrado con fondo oscuro; una advertencia; "Ver grande"; zonas horarias -- */
.pop-stack { inset: 0; top: 0; left: 0; transform: none; width: auto; max-height: none; padding: 16px; justify-content: center; align-items: center; background: rgba(22, 19, 15, .55); overflow-y: auto; }
.pop-stack .alarm-pop { width: min(520px, 100%); }
.alarm-warn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px; }
.alarm-warn p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.alarm-note { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alarm-note .btn { margin-left: 0; }
.sheet.sheet-wide { width: min(90vw, 900px); max-height: 92vh; }
.sheet-wide .sheet-inner { max-height: 92vh; }
.sheet-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.sheet-scroll .marco { max-width: none; margin: 0; }
.sheet-head .icon-btn [data-ic], .sheet-head .icon-btn .ic { display: inline-flex; }
.tz-list button:hover { background: var(--hueso); }
.tz-list button.sel, .tz-list button.sel:hover { background: var(--oro-c); font-weight: 700; box-shadow: inset 3px 0 0 var(--oro-o); }

/* -- 404 con sesión: tarjeta centrada -- */
.notfound { max-width: 560px; margin: 48px auto; text-align: center; }
.notfound p .btn { margin-top: 4px; }

/* -- Tropas por día con un solo dato -- */
.chart-one { padding: 32px 16px; }
@media (min-width: 641px) {
  .tbl.sends th, .tbl.sends td { padding: 9px 8px; }
  .tbl.sends thead th { white-space: normal; line-height: 1.25; }
  .tbl.sends .units-cell { min-width: 8.5rem; }
}
@media (max-width: 1440px) { .topbar .raid-mini .rm-name { display: none; } }
.tg-meta .lbl { text-transform: none; letter-spacing: 0; font: 600 13px var(--font-texto); color: var(--gris); }
@media (max-width: 640px) { .cands .unit-times li { grid-template-columns: minmax(0, 1fr) auto auto; } .tbl.stack td.role { background: none; } }
.onl-more { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--hueso); border: 1px solid var(--linea); font: 700 11px var(--font-texto); color: var(--gris); cursor: help; }
.calc-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; }
.calc-vs { flex-direction: column; gap: 3px; }
.calc-body .unit-times b.mono { font: 700 13px var(--font-texto); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .calc-line { grid-template-columns: auto minmax(0, 1fr); } .calc-vs { grid-column: 1 / -1; } }
.set-main { display: flex; flex-direction: column; gap: 20px; }
.set-main > .card { margin: 0; }
.set-main > .card:first-child .sec-head h1 { font-size: 30px; }
.sec-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
@media (max-width: 640px) {
  .pg-alarmas .seg button { padding: 0 10px; font-size: 13px; }
  .pg-alarmas .al-when > .seg button { flex: 1; justify-content: center; }
  .alarm-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .alarm-list li > .row-actions { grid-column: 1 / -1; }
}
.wave-card .wt-hero2 { height: 44px; align-self: end; } /* mismo alto que los campos: la casilla queda centrada con ellos */
.cands thead th, .hammers thead th { white-space: normal; line-height: 1.25; }
.hammers .delta-list span { white-space: normal; }
.travel-cell { white-space: nowrap; }
.travel-cell b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.travel-cell small { display: block; font-size: .76rem; }
@media (min-width: 641px) { .tbl.sends .state-cell { white-space: normal; min-width: 6.5rem; } .tbl.sends .state .countdown { white-space: normal; } }
.alarm-warn p { display: block; text-align: center; } .alarm-warn p .ic { vertical-align: -3px; margin-right: 4px; }
@media (max-width: 640px) { .tbl.stack th[scope=row] { max-width: none !important; } }

/* Pie de la app: el crédito queda a la misma altura que los botones de chat y conectados, a su izquierda (01/11) */
.foot-app { padding: 18px 150px 15px 32px; min-height: 80px; align-items: center; }
body:not(:has(.online-fab)) .foot-app { padding-right: 32px; }
@media (max-width: 700px) { .foot-app { padding: 16px 16px 84px; } }
/* Alarmas (01/11): "Avisar antes" y "Sonido" en dos columnas alineadas arriba, mismo rótulo; estado en chips en una fila */
.al-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px 28px; }
.al-opts .lbl { display: block; min-height: 18px; margin-bottom: 8px !important; }
.al-lead, .al-snd { display: flex; flex-direction: column; margin: 0; }
.al-snd-row { flex-wrap: wrap; }
.al-snd a { margin-top: 8px; font-size: 13px; }
.al-when .seg button { color: var(--tinta); }
.al-when .seg button:not(.on) { color: #5E584D; }
.al-preview { margin-top: 16px !important; }
.al-status { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.al-status li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--hueso); font-size: 13px; color: var(--tinta); }
.al-status li .ic { color: var(--ok); }
@media (max-width: 700px) { .al-opts { grid-template-columns: 1fr; } }
.al-when .seg button.on, .seg button.on { color: var(--crema) !important; }
.al-snd-row { flex-wrap: nowrap; }
.al-snd select { flex: 1; min-width: 0; max-width: 320px; }
.al-status li { border-radius: 14px; padding: 6px 12px; }
.al-status li .ic { color: var(--gris); }
@media (max-width: 700px) { .al-snd select { max-width: none; } }

/* ===== Desborde v2 ===== */
/* Una alarma: almacén y granero lado a lado, el próximo resaltado; "Avisarme N min antes" arriba. */
#ov-form textarea { width: 100%; }
.ovw-manual { margin: 12px 0 0; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 10px 14px 14px; }
.ovw-manual legend { padding: 0 6px; font-weight: 700; font-size: .9rem; }
.card.ovw > h2:first-child, .ovw-top h2 { margin: 0; }
.ovw-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.ovw-meta { margin: 2px 0 0; font-size: .86rem; color: var(--gris); }
.ovw-meta b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ovw-lead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ovw-lead-l { font-weight: 700; font-size: .9rem; }
.ovw-lead .seg button { white-space: nowrap; }
.ovw-lead #ov-test-sound { margin-left: 4px; }
.ovw-stale { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--prog-bg); color: var(--prog); font-size: .9rem; font-weight: 600; }
.ovw-stale .ic { margin-top: 2px; }
.ovw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.ovw-store { border: 1px solid var(--linea); border-radius: 16px; background: #fff; padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ovw-store.is-first { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset, var(--sombra-s); }
.ovw-store.is-bad { border-color: rgba(142, 27, 27, .45); box-shadow: 0 0 0 1px rgba(142, 27, 27, .45) inset; }
.ovw-head { display: flex; align-items: center; gap: 12px; }
.ovw-head > div { flex: 1; min-width: 0; }
.ovw-head h3 { margin: 0; font: 700 1.1rem var(--font-titulo); }
.ovw-head small { color: var(--gris); font-size: .8rem; font-variant-numeric: tabular-nums; }
.ovw-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--hueso); color: var(--tinta); flex: none; }
.ovw-store.is-first .ovw-ic { background: var(--oro-c); color: var(--oro-o); }
.ovw-store.is-bad .ovw-ic { background: var(--rojo-bg); color: var(--rojo); }
.ovw-event { display: flex; flex-direction: column; gap: 4px; }
.ovw-what { margin: 0; font-size: .86rem; font-weight: 700; color: var(--gris); }
.ovw-when { display: flex; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.ovw-when .dt-1 > b { font: 800 1.9rem/1.05 var(--font-titulo); letter-spacing: -.01em; }
.ovw-when .dt .dt-d { font-size: .86rem; margin-left: 4px; }
.ovw-when .dt > small { font-size: .82rem; margin-top: 2px; }
[data-time="local"] .ovw-when .dt > small { font: 800 1.9rem/1.05 var(--font-titulo); }
.ovw-left { font-variant-numeric: tabular-nums; color: var(--gris); font-size: .86rem; white-space: nowrap; }
.ovw-left.big { padding: 4px 10px; border-radius: 999px; background: var(--hueso); color: var(--tinta); font-weight: 700; font-size: .9rem; margin-bottom: 18px; }
.ovw-event.is-empty .dt-1 > b, .ovw-event.is-empty .ovw-what { color: var(--rojo); }
.ovw-starve { margin: 4px 0 0; font-weight: 700; color: var(--rojo); font-size: .92rem; }
.ovw-now { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: var(--rojo-bg); color: var(--rojo); }
.ovw-now p { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.4; }
.ovw-now .ic { margin-top: 1px; }
.ovw-calm { margin: 0; display: flex; gap: 8px; align-items: center; color: var(--ok); font-weight: 700; font-size: .95rem; }
.ovw-alarm { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ovw-alarm .btn { gap: 8px; }
.ovw-hint { color: var(--gris); font-size: .84rem; }
.ovw-hint b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ovw-set { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-s); background: var(--ok-bg); color: var(--ok); font-size: .9rem; font-weight: 600; }
.ovw-set > span:nth-child(2) { flex: 1; min-width: 180px; }
.ovw-set b { font-variant-numeric: tabular-nums; }
.ovw-set .ovw-left { color: var(--ok); }
.ovw-set small { display: block; font-weight: 500; }
.ovw-set-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ovw-set .btn.small { background: #fff; }
.ovw-res { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.ovw-res li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .86rem; padding: 6px 8px; border-radius: 10px; }
.ovw-res li > svg { width: 24px; height: 24px; }
.ovw-res li.is-first { background: var(--oro-c); }
.ovw-ri { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 260px; }
.ovw-rn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ovw-rn b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovw-ri > small { color: var(--gris); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovw-track { position: relative; height: 6px; border-radius: 99px; background: var(--hueso); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .06); }
.ovw-track i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #6E9B4E; }
.ovw-res li.is-first .ovw-track i { background: var(--oro-o); }
.ovw-store.is-bad li.is-first { background: var(--rojo-bg); }
.ovw-store.is-bad li.is-first .ovw-track i { background: var(--rojo); }
.ovw-prod { font-weight: 700; font-size: .8rem; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovw-prod.neg { color: var(--rojo); }
.ovw-rt { justify-self: end; text-align: right; }
.ovw-rt .dt { align-items: flex-end; }
.ovw-note { margin: 16px 0 0; font-size: .84rem; color: var(--gris); }
#ov-alarm-err:not(:empty) { margin-top: 10px; }
#ov-alarms h2 { margin-top: 0; }
.ovw-alist { list-style: none; margin: 0; padding: 0; display: grid; }
.ovw-alist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linea); }
.ovw-alist li:first-child { border-top: 0; padding-top: 4px; }
.ovw-al-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ovw-al-name .ic { color: var(--oro-o); }
.ovw-al-name b { font-weight: 700; }
.ovw-al-when { display: flex; align-items: center; gap: 14px; }
@media (max-width: 1100px) { .ovw-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ovw-top { align-items: flex-start; flex-direction: column; }
  .ovw-top > div:first-child, .ovw-lead { width: 100%; }
  .ovw-lead .ovw-lead-l:last-of-type { order: 1; margin-left: -4px; }
  .ovw-lead #ov-test-sound { order: 2; margin-left: auto; }
  .ovw-lead .seg { order: 3; width: 100%; }
  .ovw-lead .seg button { flex: 1; padding: 7px 6px; }
  .ovw-store { padding: 16px 14px 12px; }
  .ovw-when .dt-1 > b, [data-time="local"] .ovw-when .dt > small { font-size: 1.6rem; }
  .ovw-res li { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; padding: 6px 8px; }
  .ovw-ri { max-width: none; }
  .ovw-rt { grid-column: 2; justify-self: start; text-align: left; }
  .ovw-rt .dt { flex-direction: row; align-items: baseline; gap: 8px; }
  .ovw-alarm .btn:not(.small) { width: 100%; justify-content: center; }
  .ovw-alist li { grid-template-columns: 1fr; }
  .ovw-alist li .btn { justify-self: start; }
}
/* Horas en tablas: la fecha (si no es hoy) va en su propia línea, así la columna no se ensancha */
.tbl .dt .dt-1 { display: flex; flex-direction: column; }
.tbl .dt .dt-d { order: 2; font-size: .72rem; }
.tbl .dt { white-space: normal; max-width: 8.5rem; }
.tbl .dt > small { display: block; }
.tbl.sends td:nth-last-child(2) { max-width: 9rem; }

/* Confirmación de dos toques ("Sí, borrar"): roja también en los botones ghost (el .btn.ghost blanco de la UI 2026 le
   ganaba y quedaba un botón blanco con letra blanca). */
.btn[data-confirm="1"], .btn.ghost[data-confirm="1"], .btn.ghost[data-confirm="1"]:hover, .btn.ghost.danger[data-confirm="1"] {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}
.btn[data-confirm="1"]:hover { background: #741515; border-color: #741515; color: #fff; }

/* Informes: "Pérdidas reales" (muertas − heridas del hospital) debajo de las filas del juego. */
.tbl tr.row-lost th, .tbl tr.row-lost td { border-top: 2px solid var(--linea-f); font-weight: 700; }

/* ===== Ops v2 (01/11): planificador como los planes de Travco; Mis órdenes como "Mis ataques" ===== */
.ops-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ops-top h1 { margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.ops-top .sub { margin: 0; color: var(--gris); }
.ops-top > .btn { flex: none; }
.ops-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.sw-l { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-texto); color: var(--tinta); cursor: pointer; white-space: nowrap; }
.sw-l input.sw { margin: 0; }
.sw-l:has(input:disabled) { opacity: .6; cursor: wait; }
.sw-cell { width: 1%; }
.ops-plans tr[data-open] { cursor: pointer; }
.ops-plans tr.is-on > th { box-shadow: inset 3px 0 0 var(--oro); }
.ops-plans .state-cell { display: table-cell; }
.ops-plans .state-cell .tag { margin-left: 8px; }
.clamp { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Real / Fake y olas × catapultas */
.atk-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 800 10.5px/1 var(--font-texto); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.atk-kind.k-real { background: var(--rojo); color: #fff; }
.atk-kind.k-fake { background: #E6E1D6; color: #4C473F; }
.kind-count { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc { display: inline-flex; align-items: center; gap: 2px; font: 700 13px var(--font-texto); font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.wc i { font-style: normal; color: var(--gris-c); margin: 0 1px; }
.wc .uicon { width: 16px; height: 16px; margin-left: 3px; border-radius: 4px; }
.badge.prio-very_high { background: var(--rojo); color: #fff; }
/* Cabecera del plan */
.ops-head { padding-bottom: 14px; }
.oph-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--linea-f); border-radius: 999px; background: #fff; color: var(--tinta); font: 700 13px var(--font-texto); cursor: pointer; }
.back-btn .ic { transform: rotate(90deg); }
.back-btn:hover { border-color: var(--tinta); }
.oph-acts { display: flex; align-items: center; gap: 12px; }
.ops-head h1 { margin: 4px 0 4px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.oph-note { margin: 0 0 4px; color: var(--gris); }
.oph-facts { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--hueso); }
.fact .lbl { font: 600 12.5px var(--font-texto); color: var(--gris); }
.fact > b { font-size: 1.05rem; }
.fact small { font-size: 12px; }
.fact-imp { background: #fff; border: 1px solid var(--oro); box-shadow: 0 0 0 3px rgba(201, 163, 90, .14); }
.fact-imp .dual-mini > span:first-child { font: 800 1.35rem/1.15 var(--font-titulo); }
.fact-imp .dual-mini small { font-size: 12.5px; }
.fact-imp .link-btn { color: var(--oro-o); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; width: fit-content; }
.fact .cd .countdown { margin: 2px 0 0; font-size: .92rem; }
.ops-notify { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px 10px 14px; border-radius: var(--r-s); background: var(--prog-bg); color: var(--prog); font-weight: 600; font-size: 14px; }
.ops-notify > span { flex: 1; min-width: 200px; }
.ops-tabs { margin-top: 16px !important; }
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(21, 19, 15, .08); font: 700 11.5px var(--font-texto); }
.subtabs button.active .tab-n { background: rgba(241, 226, 192, .18); color: var(--crema); }
.ops-msg:not(:empty) { margin-top: 12px; }
/* Herramientas de cada pestaña */
.ops-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.ops-tools h2 { margin: 0 0 2px !important; }
.ops-tools-l p { margin: 0; max-width: 62ch; }
.ops-tools .row-actions { margin: 0; }
.ops-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-f { position: relative; display: flex; align-items: center; }
.search-f .ic { position: absolute; left: 12px; color: var(--gris-c); pointer-events: none; }
.search-f input { width: 240px; max-width: 100%; padding-left: 36px; }
.ops-filter .chip { min-height: 44px; }
.ops-body > .row-actions { margin: 0 0 12px; }
.tr-ics { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.tr-ic { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-ic .uicon { width: 20px; height: 20px; border-radius: 5px; }
.off-n { display: inline-flex; align-items: center; gap: 4px; color: var(--rojo); }
.ops-pool tr.is-on, .ops-gt tr.is-on { background: #FBF8EF; }
.tg-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin: 1px 0; border-radius: 999px; background: var(--hueso); border: 1px solid var(--linea); font: 600 12px var(--font-texto); color: var(--gris); white-space: nowrap; }
.note-cell { max-width: 22ch; font-size: .86rem; }
.cap-ic { color: var(--oro-o); display: inline-flex; vertical-align: -2px; }
.ally { color: var(--gris); font-weight: 600; }
/* Planificación: grilla atacantes × objetivos */
.pg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.pg-wrap { border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; max-height: 74vh; overflow: auto; }
.pg-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.pg-grid th, .pg-grid td { border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); vertical-align: top; text-align: left; }
.pg-grid thead th { position: sticky; top: 0; z-index: 2; background: #FBF8EF; }
.pg-grid tbody th { position: sticky; left: 0; z-index: 1; background: #fff; }
.pg-grid thead th.pg-corner { left: 0; z-index: 3; min-width: 210px; padding: 12px 14px; vertical-align: bottom; font: 600 12px var(--font-texto); color: var(--gris); }
.pg-th { min-width: 178px; padding: 10px 10px 10px 12px; position: relative; }
.pg-th .row-menu { position: absolute; top: 8px; right: 8px; }
.pg-th .row-menu > summary { width: 28px; height: 28px; }
.pg-tgt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 30px; }
.pg-tn { font: 700 14px var(--font-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tgt > small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.pg-badges .badge { height: 20px; font-size: 11px; padding: 0 8px; }
.pg-note { display: inline-flex; color: var(--oro-o); cursor: help; }
.pg-att { min-width: 210px; max-width: 250px; padding: 10px 12px; }
.pg-att > * { position: relative; }
.pg-attin { display: flex; flex-direction: column; gap: 2px; padding-right: 28px; }
.pg-attin .who-n, .pg-who .who-n { font-size: 14px; }
.pg-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.pg-meta span { display: inline-flex; align-items: center; gap: 3px; }
.pg-meta .uicon { width: 14px; height: 14px; border-radius: 3px; }
.pg-att .pg-rm { position: absolute; top: 8px; right: 6px; min-width: 26px; height: 26px; color: var(--gris-c); }
.pg-att { position: sticky; }
.pg-cell { padding: 6px; min-width: 178px; background: #FDFCF8; }
.pg-atk { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 76px; padding: 8px 10px; border: 1px solid var(--linea-f); border-left: 4px solid var(--rojo); border-radius: 10px;
  background: #fff; color: var(--tinta); text-align: left; font: 500 12.5px var(--font-texto); cursor: pointer; box-shadow: 0 1px 2px rgba(21, 19, 15, .05); }
.pg-atk.k-fake { border-left-color: #A9A297; }
.pg-atk:hover { border-color: var(--tinta); }
.pg-atk:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.pg-atk.is-off { opacity: .55; border-style: dashed; }
.pg-atk.is-late { background: #FBEDEB; }
.pg-l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-l2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pg-l2 b { font: 700 14px var(--font-texto); }
.pg-sp { color: var(--gris); }
.pg-sp small { font-size: 11px; }
.pg-l3 { color: var(--gris); font-variant-numeric: tabular-nums; }
.pg-atk.is-late .pg-l3 { color: var(--rojo); font-weight: 700; }
.pg-delay { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--prog-bg); color: var(--prog); font: 700 11px var(--font-texto); font-variant-numeric: tabular-nums; }
.pg-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 76px; border: 1px dashed var(--linea-f); border-radius: 10px; background: transparent;
  color: var(--gris-c); font: 600 12.5px var(--font-texto); cursor: pointer; }
.pg-add:hover, .pg-add:focus-visible { border-color: var(--oro-o); color: var(--oro-o); background: #fff; }
.pg-cards { display: none; }
@media (max-width: 640px) {
  .pg-wrap { display: none; }
  .pg-cards { display: flex; flex-direction: column; gap: 12px; }
  .pg-card { border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; overflow: hidden; }
  .pg-card > header { position: relative; padding: 12px 14px; background: #FBF8EF; border-bottom: 1px solid var(--linea); }
  .pg-card > header .row-menu { position: absolute; top: 10px; right: 10px; }
  .pg-list { list-style: none; margin: 0; padding: 0; }
  .pg-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linea); }
  .pg-list li:first-child { border-top: 0; }
  .pg-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pg-who .who-n { white-space: normal; }
  .pg-list .pg-atk, .pg-list .pg-add { min-height: 64px; }
  .pg-add span { display: none; }
}
.ops-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ops-step { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.ops-step.done { background: var(--ok-bg); border-color: transparent; }
.ops-step.done .ov-n { background: var(--ok); color: #fff; }
.ops-step p { margin: 4px 0 10px; }
@media (max-width: 640px) { .ops-steps { grid-template-columns: 1fr; } }
/* Línea de tiempo */
.ops-tl .state .countdown { margin: 2px 0 0; font-size: .8rem; }
.tl-info { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.tl-info:hover { background: var(--hueso); }
.conf { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; }
.conf.ok-t { flex-direction: row; align-items: center; gap: 4px; color: var(--ok); }
.conf.warn-t small { color: var(--prog); font-weight: 700; }
.ops-tl td, .ops-tl th { vertical-align: top; }
/* Diálogos de Ops */
.ops-sheet { width: min(600px, calc(100vw - 24px)); max-height: 92vh; }
.ops-sheet .sheet-inner { max-height: 92vh; gap: 12px; padding: 20px; }
.ops-sheet .sheet-head { align-items: flex-start; gap: 10px; }
.ops-sheet .sheet-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dlg-sub { font: 500 13px var(--font-texto); color: var(--gris); overflow-wrap: anywhere; }
.dlg-body { overflow-y: auto; margin: 0 -4px; padding: 2px 4px; }
.dlg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dlg-grid > label, .dlg-grid > .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 600 13px var(--font-texto); color: var(--gris); }
.dlg-grid > label > input, .dlg-grid > label > select, .dlg-grid > label > textarea { width: 100%; }
.dlg-grid small { font-weight: 500; font-size: 12px; }
.dlg-grid .check { color: var(--tinta); }
.dlg-hint { margin: -6px 0 0; }
.fld-l { font: 600 13px var(--font-texto); color: var(--gris); }
.fld .seg { flex-wrap: wrap; width: auto; max-width: 100%; }
.fld .seg button { display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--noche); color: var(--crema); }
.sw-row { gap: 10px !important; }
.dlg-err:empty { display: none; }
.dlg-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linea); }
.dlg-foot .dlg-del { margin-left: auto; }
.btn.danger-solid { background: var(--rojo); color: #fff; }
.btn.danger-solid:hover { background: #741515; color: #fff; }
.atk-prev { padding: 12px 14px; border-radius: var(--r-s); background: var(--hueso); color: var(--tinta); font-weight: 500; }
.prev-row { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.prev-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.prev-times > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.prev-times .lbl { font: 600 12px var(--font-texto); color: var(--gris); }
.prev-times .dual-mini > span:first-child { font: 800 1.1rem var(--font-titulo); }
.prev-times .late-tag { margin-top: 4px; width: fit-content; }
.imp-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.imp-list li label { padding: 8px 6px; border-radius: 8px; }
.imp-list li label:hover { background: var(--hueso); }
.imp-list .is-dis { opacity: .55; }
@media (max-width: 520px) { .dlg-grid { grid-template-columns: 1fr; } .prev-times { grid-template-columns: 1fr; } .dlg-foot .dlg-del { margin-left: 0; } .dlg-foot .btn { flex: 1; } }
/* Aviso con Deshacer */
.ops-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--noche); color: var(--crema); font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ops-toast:not(:has(button)) { padding-right: 20px; }
.ops-toast button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--oro); color: var(--tinta); font: 700 13px var(--font-texto); cursor: pointer; }
@media (max-width: 1100px) { .oph-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ops-top > .btn { width: 100%; }
  .oph-facts { grid-template-columns: 1fr 1fr; } .fact-imp { grid-column: 1 / -1; }
  .search-f, .search-f input { width: 100%; } .ops-filter { width: 100%; }
  .ops-tools .row-actions { width: 100%; }
  .clamp { max-width: none; white-space: normal; }
  .ops-plans .state-cell { display: flow-root; }
  .tbl.stack td.sw-cell { padding-left: 0; } .tbl.stack td.sw-cell::before { content: none; }
  .ops-pool tr, .ops-gt tr { position: relative; }
  .tbl.stack.ops-pool td.sw-cell, .tbl.stack.ops-gt td.sw-cell { position: absolute; top: 12px; right: 12px; width: auto; min-height: 0; }
  .tbl.stack.ops-gt td.cell-act { position: absolute; top: 46px; right: 10px; padding: 0; }
  .tbl.stack.ops-pool th[scope=row], .tbl.stack.ops-gt th[scope=row] { padding-right: 56px; }
  .ops-toast { left: 16px; right: 16px; transform: none; max-width: none; border-radius: 16px; bottom: 16px; }
  .ops-toast span { flex: 1; }
}
/* Mis órdenes */
.orders-head { padding-bottom: 16px; }
.orders-head .row-actions { align-items: center; margin-top: 12px; }
.fake-rule { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--hueso); }
.fake-rule.is-on { background: #fff; border: 1px solid var(--linea-f); }
.fake-rule > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.fake-rule small { flex-basis: 100%; font-size: 12.5px; }
.fr-n { font: 800 1.05rem var(--font-titulo); font-variant-numeric: tabular-nums; }
.fr-ic { display: inline-flex; flex: none; }
.fr-ic .uicon { width: 30px; height: 30px; border-radius: 8px; }
.orders-view { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.orders-view > .card { margin: 0; }
.ord-op-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.ord-op-h h2 { margin: 0 !important; }
.ord-op-h p { margin: 2px 0 0; }
.ord-op-imp { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.ord-op-imp .lbl { font: 600 12px var(--font-texto); color: var(--gris); }
.ord-op-imp .dt { align-items: flex-end; }
.ord-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.ord { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border: 1px solid var(--linea); border-left: 5px solid var(--rojo); border-radius: var(--r-s); background: #fff; box-shadow: var(--sombra-s); }
.ord.k-fake { border-left-color: #A9A297; }
.ord.late { background: #FBEDEB; }
.ord.is-upd { box-shadow: 0 0 0 2px var(--oro), var(--sombra-s); }
.ord-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ord-kind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ord-cd .countdown { margin: 0; font-size: 1.15rem; }
.ord-cd .late-tag { height: 26px; }
.tag-upd { background: var(--oro-c); color: var(--oro-o); gap: 4px; }
.ord-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 15px; }
.ord-to { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 600; }
.ord-to .ic { color: var(--rojo); }
.ord-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ord-times .time-card { padding: 10px 12px; min-width: 0; }
.ord-times .lbl { display: block; margin-bottom: 2px; font: 600 12.5px var(--font-texto); color: var(--gris); }
.ord-times .dual-srv b { font-size: 1.45rem; }
.ord-times .dual-srv .tag, .ord-times .dual-loc .tag { text-transform: none; letter-spacing: 0; font: 600 12px var(--font-texto); }
.ord-times .dual-loc { font-size: .88rem; }
.ord-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.ord-facts > div { display: flex; flex-direction: column; gap: 2px; }
.ord-facts dt { font: 600 12px var(--font-texto); color: var(--gris); }
.ord-facts dd { margin: 0; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.ord-facts select { height: 34px; min-height: 34px; width: 74px; padding: 0 26px 0 10px; }
.ord-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--oro-c); font-size: 13.5px; }
.ord-note .ic { color: var(--oro-o); margin-top: 2px; }
.ord-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ord-conf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 13.5px; font-weight: 600; }
.ord-conf.is-diff { background: var(--prog-bg); color: var(--prog); }
.ord-conf .link-btn { margin-left: auto; color: inherit; }
.ord-conf-form { padding: 12px 14px; border-radius: 10px; background: var(--hueso); }
.ord-conf-form p { margin: 0 0 4px; }
.ord-conf-form .tf { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font: 600 13px var(--font-texto); color: var(--gris); }
.ord-conf-form .tf input { max-width: 320px; }
.link-btn.danger { color: var(--rojo); }
@media (max-width: 640px) {
  .ord { padding: 14px; }
  .ord-op-imp { text-align: left; } .ord-op-imp .dt { align-items: flex-start; }
  .ord-times .dual-srv b { font-size: 1.25rem; }
  .ord-act .btn { flex: 1 1 auto; }
  .ord-act .btn:first-child { flex-basis: 100%; }
}
@media (max-width: 380px) { .ord-times { grid-template-columns: 1fr; } }
/* Ops v2: ajustes después de mirar las capturas (390 / 1280 / 1920) */
.ops-app { display: flex; flex-direction: column; gap: 20px; }
.ops-app > .card { margin: 0; }
.fact .lbl, .ord .lbl, .ord-op-imp .lbl, .prev-times .lbl, .ord-times .lbl { text-transform: none !important; letter-spacing: 0 !important; }
.kc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pg-legend > span.pg-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ops-plans .state-cell { white-space: normal; }
.ops-plans .state-cell .tag { margin: 4px 0 0 8px; }
.ops-tl td.who-cell { display: table-cell; }
.ops-tl td.who-cell > .who-n, .ops-tl td.who-cell > small { display: block; }
.orders-head .note-line { margin-top: 10px; }
@media (max-width: 640px) {
  .ops-plans tr.is-on > th { box-shadow: none; }
  .ops-plans .state-cell .tag { margin: 6px 0 0; }
  .oph-facts .fact:last-child { grid-column: 1 / -1; }
  .oph-facts .fact small.muted { display: none; }
  .tbl.stack .note-cell { max-width: none; }
  .tbl.stack.ops-gt td.cell-act { top: 10px; right: 58px; }
  .tbl.stack.ops-gt th[scope=row] { padding-right: 100px; }
  .ops-tl td.who-cell { display: flow-root; }
  .ord-times { grid-template-columns: 1fr; }
  .ord-act .btn.ghost { flex: 1 1 140px; }
}
@media (max-width: 520px) { .dlg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlg-grid > label:not(.f-wide) small .hl { display: none; } }
@media (max-width: 340px) { .dlg-grid { grid-template-columns: 1fr; } }
.orders-head .row-actions .note-line { flex-basis: 100%; margin: 2px 0 0; }
.orders-head .note-line > span { flex: 1 1 220px; } .orders-head .note-line > .ic { margin-top: 3px; } .orders-head .note-line { align-items: flex-start; }
.dlg-grid textarea { min-height: 64px; font: 400 14px/1.45 var(--font-texto); }
.fld .seg { align-self: flex-start; }
.dlg-grid small .wip { margin-left: 4px; vertical-align: 1px; }
.ops-gt .note-cell { max-width: 30ch; min-width: 12rem; }
.note-cell > span { display: block; }
.nc-att { font-weight: 600; } .nc-att .ic { color: var(--oro-o); vertical-align: -2px; }
.nc-int { font-size: .82rem; margin-top: 2px; }
.nc-tags { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
@media (max-width: 640px) { .ops-gt .note-cell { min-width: 0; max-width: none; } }
.ops-tl .travel-cell small .ic, .ops-tl .travel-cell small small { font-size: inherit; } .ops-tl .tl-info { flex-wrap: nowrap; }
.ops-tl .tl-sp { white-space: nowrap; } .ops-tl .tl-sp small { font-size: inherit; }
.ops-tl .tl-sp small { display: inline; } .ops-tl td.who-cell small { white-space: normal; } .ops-tl td.who-cell { min-width: 9rem; }
.ops-tl thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
@media (min-width: 641px) { .ops-tl th, .ops-tl td { padding: 10px 8px; } .ops-tl th:first-child, .ops-tl td:first-child { padding-left: 12px; } }

/* Diálogo de ataque: el interruptor "Activo" no se estira (lo estiraba el width:100% de los campos) y su texto se ve al lado. */
.dlg-grid > label.sw-row { flex-direction: row; align-items: center; justify-content: flex-start; color: var(--tinta); font-size: 14px; }
.dlg-grid > label.sw-row > input.sw { width: 40px; flex: none; }
.dlg-grid > label.sw-row > span { white-space: normal; }

/* Mis cuentas: duales de cada cuenta, uno por línea con "Quitar". */
.dual-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dual-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ================= Fakes (targets.php): campañas de fakes de la alianza ================= */
.fk-rule-in { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-s); background: var(--hueso); border: 1px solid var(--linea); }
.fk-rule-in > div { flex: 1 1 220px; min-width: 0; }
.fk-rule-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); flex: none; }
.fk-rule-ic svg { width: 22px; height: 22px; }
.fk-rule-l { font-weight: 700; color: var(--gris); }
.fk-rule-v { font: 800 1.08rem var(--font-titulo); }
.fk-rule-in small { display: block; margin-top: 2px; }
.fk-rule-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; align-self: center; }
.fk-rule-edit svg { width: 14px; height: 14px; }
.fk-new { margin-top: 14px; }
.fk-new > summary, .fk-add > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--oro-o); list-style: none; }
.fk-new > summary::-webkit-details-marker, .fk-add > summary::-webkit-details-marker { display: none; }
.fk-new > summary svg, .fk-add > summary svg { width: 16px; height: 16px; }
.fk-form .f-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fk-view { display: flex; flex-direction: column; gap: 20px; }
.fk-list .fk-lh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fk-lh-t { min-width: 0; }
.fk-list h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.fk-list .note { margin: 4px 0; }
.fk-meta { margin: 2px 0 0; }
.fk-sum { margin: 10px 0 4px; }
.fk-menu > summary { width: 40px; height: 40px; }
.fk-menu .row-menu-pnl { width: 260px; }
.fk-goal-row { display: flex; gap: 8px; align-items: center; }
.fk-goal-row input { min-height: 40px; width: 90px; flex: 1; }
.fk-goal-row .btn { min-height: 40px; }
.fk-add { margin: 10px 0 4px; padding: 0 14px; border: 1px dashed var(--linea-f); border-radius: var(--r-s); background: var(--papel); }
.fk-add[open] { padding-bottom: 14px; }
.fk-add-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.fk-add-in .fk-msg { grid-column: 1 / -1; }
.fk-add-in label { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.fk-add-in textarea { min-height: 96px; }
.fk-add-f { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fk-add-f label { align-self: stretch; }
.fk-sugg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fk-sugg li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 6px 6px 10px; border-radius: var(--r-s); background: var(--hueso); }
.fk-sugg .btn { min-height: 40px; }
.fk-sg-n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.fk-targets { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.fk-t { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-s); border: 1px solid var(--linea); background: #fff; min-width: 0; }
.fk-t.is-full { background: #FBFDF9; border-color: rgba(47, 107, 58, .25); }
.fk-t-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fk-t-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fk-t-who .coord { font-weight: 700; font-variant-numeric: tabular-nums; }
.fk-vn { overflow-wrap: anywhere; }
.fk-t-sub, .fk-dist { flex-basis: 100%; color: var(--gris); }
.fk-t-count { display: flex; align-items: center; gap: 8px; flex: none; }
.fk-n { font: 700 1.05rem var(--font-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gris); }
.fk-n b { font-size: 1.35rem; color: var(--tinta); }
.fk-bar { height: 8px; border-radius: 99px; background: #EFEAE0; overflow: hidden; }
.fk-bar span { display: block; height: 100%; background: var(--oro); }
.fk-bar.is-full span { background: var(--ok); }
.fk-t-sent { color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.fk-who.is-me { color: var(--tinta); font-weight: 700; }
.fk-dot { color: var(--gris-c); }
.fk-mine { margin-left: auto; font-weight: 700; color: var(--ok); }
.fk-t-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.fk-t-act .btn { min-height: 44px; flex: 1 1 auto; width: auto; padding: 0 16px; }
.fk-t-act .fk-sent { flex: 1 1 130px; }
.fk-t-act .fk-undo { flex: 0 0 auto; }
.fk-empty { margin: 14px 0 0; }
.fk-fin > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.fk-fin > .fk-list { margin-top: 14px; box-shadow: none; }
.fk-list.is-closed .fk-t { background: var(--papel); }
@media (max-width: 760px) { .fk-add-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .fk-targets { grid-template-columns: minmax(0, 1fr); }
  .fk-t { padding: 12px 14px; }
  .fk-t-act .fk-open { flex: 1 1 100%; }
}
/* Ops: en el celular las 4 pestañas del plan no entraban en una fila (se cortaba "Planificación"): grilla 2 × 2, todas a la vista */
@media (max-width: 640px) {
  .ops-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; overflow: visible; }
  .ops-tabs button { justify-content: center; padding: 0 8px; min-width: 0; }
}

/* ================= UX tanda 3 (01/11, Santi: "espacio desaprovechado, desalineado, botones encima del pie") ================= */
/* Ancho de la página: aprovecha pantallas grandes (antes 1240 → a 2000 px quedaba una franja angosta en el medio). */
main.cont { max-width: 1480px; }
/* Botones flotantes (conectados + chat) abajo a la derecha: el pie les deja su lugar y no tapan el crédito. */
/* Compactos: "● 1" (el texto largo va en el título al pasar el mouse y en su panel) + "Chat" → el pie solo reserva ~210 px. */
.online-fab .fab-online .fab-l { display: none; }
.online-fab .fab-online b { display: inline; }
.online-fab .fab-online { padding: 0 14px; gap: 7px; }
@media (min-width: 761px) { body:has(.online-fab) .foot-app { padding-right: 230px; } }
@media (max-width: 760px) { body:has(.online-fab) .foot-app { padding-bottom: 84px; } }
/* Hoy: "mañana" pegado a la hora (heredaba el margen grande de .ev-day de otra página y abría huecos). */
.ev .t .ev-day { margin: 2px 0 1px; line-height: 1.2; }
/* Hoy: columna derecha = instrucciones del sitter (lo urgente de hoy), primeros pasos y atajos; la tarjeta ocupa su columna. */
.hoy-cols { grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr); }
.hoy-card.sit-inbox { margin: 0; }
.hoy-card.sit-inbox .marco { max-width: none; margin-top: 10px; }
.sit-inbox-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; }
.sit-inbox-meta p { margin: 0; }
.sit-inbox-meta .row-actions { gap: 8px; }
.hoy-card h2 .steps-done { font: 600 13px var(--font-texto); color: var(--gris); }
@media (max-width: 1279px) { .hoy-cols { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); } }
@media (max-width: 900px) { .hoy-cols { grid-template-columns: minmax(0, 1fr); } }
/* Celular: el título de cada evento de Hoy se lee entero (antes "Attack on Jugador D · 01 (10|-14) …"). */
@media (max-width: 640px) { .ev .w b, .ev .w span { white-space: normal; overflow: visible; } }
/* Instrucciones para el sitter: la tarjeta recibida no se estira a todo el ancho con el pergamino chico a un costado. */
.pg-sitters .sit-inbox:not(.hoy-card) { max-width: 720px; }
.pg-sitters .sit-inbox:not(.hoy-card) .marco { max-width: none; }
/* Pantallas muy anchas (2560): la página sigue creciendo; en Hoy la columna derecha queda en 540 px y crece "Lo próximo". */
@media (min-width: 2200px) { main.cont, .pg-members main.cont.wrap, .pg-waves main.cont.wrap { max-width: 1840px; } }
@media (min-width: 1800px) { .hoy-cols { grid-template-columns: minmax(0, 1fr) 540px; } }

/* ================= Votaciones (polls.php, 02/11): la alianza decide votando ================= */
.pl-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pl-head-t { min-width: 0; flex: 1 1 320px; }
.pl-head-t h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.pl-head-t .sub { margin: -2px 0 0; color: var(--gris); font-size: 1rem; }
.pl-head-act:empty { display: none; }
.pl-head-act .btn { min-height: 44px; }
/* Formulario "Nueva votación" */
.pl-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 16px; }
.pl-form h2 { margin: 0; }
.pl-public { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-s); background: var(--oro-c); color: #5A4415; font-weight: 700; font-size: .92rem; }
.pl-public svg { width: 18px; height: 18px; flex: none; color: var(--oro-o); }
.pl-f-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.pl-f-main, .pl-f-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pl-fld { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); min-width: 0; margin: 0; padding: 0; border: 0; }
.pl-fld > legend { padding: 0; margin-bottom: 6px; }
.pl-fld small { font-weight: 500; }
.pl-fld textarea { font: 15px/1.45 var(--font-texto); min-height: 64px; }
.pl-opt-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.pl-opt-rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.pl-opt-n { font: 700 14px var(--font-titulo); color: var(--gris-c); text-align: center; font-variant-numeric: tabular-nums; }
.pl-opt-x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--linea-f); background: #fff; color: var(--gris); cursor: pointer; }
.pl-opt-x:hover:not(:disabled) { border-color: var(--rojo); color: var(--rojo); }
.pl-opt-x:disabled { opacity: .35; cursor: not-allowed; }
.pl-opt-add { align-self: flex-start; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips .chip { min-height: 44px; font-weight: 600; }
.pl-until { margin-top: 10px; }
.pl-until .tf { display: flex; flex-direction: column; gap: 6px; }
.pl-close-prev { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-s); background: var(--hueso); font-weight: 500; color: var(--tinta); }
.pl-f-act { display: flex; flex-wrap: wrap; gap: 10px; }
/* Lista */
.pl-view { display: flex; flex-direction: column; gap: 20px; }
/* Abiertas: una columna; desde ~1800 px de contenido, dos (auto-fit: una sola votación usa todo el ancho). */
.pl-open { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 860px), 1fr)); gap: 20px; align-items: start; }
.pl-poll { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; }
.pl-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-ph-t { min-width: 0; }
.pl-poll h2 { margin: 0 0 6px; font-size: 1.3rem; overflow-wrap: anywhere; line-height: 1.25; }
.pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.pl-menu > summary { width: 40px; height: 40px; }
.pl-note { margin: 0; }
.pl-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pl-left { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--prog-bg); color: var(--prog); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.pl-win { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--ok-bg); color: var(--ok); font-size: 1rem; }
.pl-win svg { width: 18px; height: 18px; flex: none; }
.pl-win b { overflow-wrap: anywhere; }
.pl-win.is-tie { background: var(--prog-bg); color: #6B4A00; }
.pl-win.is-none { background: var(--hueso); color: var(--gris); }
.pl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container (min-width: 760px) { .pl-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; } }
.pl-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-opt { border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; min-width: 0; }
.pl-opt.is-sel { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; background: #FFFBF1; }
.pl-opt.is-top { border-color: rgba(47, 107, 58, .35); background: #FBFDF9; }
.pl-o-btn { display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 56px; padding: 12px 14px; border: 0; border-radius: inherit; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
button.pl-o-btn:hover { background: var(--hueso); }
button.pl-o-btn:disabled { cursor: progress; opacity: .7; }
.pl-o-btn.is-ro { cursor: default; }
.pl-o-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-o-l { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.pl-you { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 4px; border-radius: 999px; background: var(--oro); color: var(--tinta); font-size: 11.5px; font-weight: 700; vertical-align: 2px; white-space: nowrap; }
.pl-o-n { flex: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-o-n b { font: 800 1.1rem var(--font-titulo); }
.pl-o-n small { color: var(--gris); }
.pl-radio, .pl-box, .pl-top-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--gris-c); background: #fff; }
.pl-radio { border-radius: 50%; }
.pl-radio.on { border-color: var(--noche); box-shadow: inset 0 0 0 4px #fff; background: var(--noche); }
.pl-box { border-radius: 6px; color: #fff; }
.pl-box.on { border-color: var(--noche); background: var(--noche); }
.pl-box svg, .pl-top-ic svg { width: 14px; height: 14px; }
.pl-top-ic { border-radius: 50%; border-color: var(--ok); background: var(--ok); color: #fff; }
.pl-bar { display: block; height: 8px; border-radius: 99px; background: #EFEAE0; overflow: hidden; }
.pl-bar > span { display: block; height: 100%; width: 0; background: var(--oro); }
.pl-opt.is-top .pl-bar > span { background: var(--ok); }
.pl-o-who { display: block; padding: 0 14px 12px; color: var(--gris); margin-top: -2px; }
.pl-names { overflow-wrap: anywhere; }
.pl-nm.is-me { color: var(--tinta); font-weight: 700; }
.pl-more { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-f); background: var(--papel); color: var(--tinta); font: 700 12.5px var(--font-texto); cursor: pointer; vertical-align: middle; }
.pl-more:hover { border-color: var(--tinta); }
.pl-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-s); background: var(--hueso); min-width: 0; }
.pl-turn { display: flex; align-items: baseline; gap: 8px; }
.pl-turn-n { font: 700 1.1rem var(--font-titulo); color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-turn-n b { font-size: 1.6rem; color: var(--tinta); }
.pl-turn-l { color: var(--gris); font-weight: 600; }
.pl-bar-t { background: #E4DDCD; }
.pl-bar-t > span { background: var(--noche); }
.pl-miss { margin: 0; color: var(--gris); }
.pl-miss b { color: var(--tinta); }
.ok-t, .pl-miss b.ok-t { color: var(--ok); }
.pl-me { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.pl-me svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.pl-dual { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-s); background: var(--papel); border: 1px solid var(--linea); color: var(--gris); }
.pl-dual svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--oro-o); }
.pl-dual b { color: var(--tinta); }
.pl-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-save .btn { min-height: 44px; flex: 1 1 auto; }
.pl-save small { flex-basis: 100%; }
.pl-err { margin: 0; }
.pl-fin > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pl-fin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; margin-top: 14px; }
.pl-fin-list > .pl-poll { box-shadow: none; }
.pl-poll.is-closed .pl-opt { background: var(--papel); }
/* Editar una votación (tanda H): diálogo con los mismos campos que al crear; opciones con votos fijas (candado) */
.pl-sheet .dlg-body { display: flex; flex-direction: column; gap: 14px; }
.pl-sheet .pl-f-grid { gap: 18px 24px; }
.pl-lock-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-s); background: var(--hueso); color: var(--gris); font-weight: 500; }
.pl-lock-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--oro-o); }
.pl-opt-ro { position: relative; display: block; min-width: 0; }
.pl-opt-ro input { width: 100%; padding-right: 116px; background: var(--hueso); color: var(--tinta); cursor: default; }
.pl-lock { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
  border-radius: 999px; background: var(--oro-c); color: #5A4415; font: 700 11.5px/1 var(--font-texto); white-space: nowrap; pointer-events: none; }
.pl-lock svg { width: 12px; height: 12px; }
.pl-opt-rows li.is-locked .pl-opt-x:disabled { opacity: .55; }
.pl-chips .chip.is-off { opacity: .5; cursor: not-allowed; }
.pl-remind { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-weight: 500; }
.pl-remind svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.pl-edited { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.pl-sheet .dlg-foot .btn { min-height: 44px; }
@media (max-width: 900px) { .pl-f-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pl-head-act, .pl-head-act .btn { width: 100%; }
  .pl-poll h2 { font-size: 1.15rem; }
  .pl-o-btn { padding: 12px; }
  .pl-o-who { padding: 0 12px 12px; }
  .pl-f-act .btn { flex: 1 1 auto; }
  .pl-fin { padding: 18px 14px; }
  .pl-fin-list > .pl-poll { padding: 16px 14px; }
}
/* Hoy: etiqueta "Votación" en Lo próximo */
.tag.p { background: #E3ECF8; color: #1D4F91; }
/* Instrucciones del sitter con la ausencia ya terminada (se ven 24 h más): aviso en ámbar, no gris */
.sit-inbox .inbox-ended { color: var(--prog); font-weight: 600; margin: 0; }
/* Sitter escrito a mano: solo el nombre (02/11: sin la zona horaria del sitter; solo hora del servidor y la de quien mira) */
#sit-free:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
.sit-opts > div:first-child:has(#sit-free:not([hidden])) { grid-column: auto; }

/* ================= Premium y apoyo (premium.php, 02/11): carta de Santi, estado, 3 opciones, Mis compras, webhook (desarrollador) ================= */
/* ♥ Supporter al lado del nombre propio (barra de arriba: solo el corazón; en el menú del usuario, con el texto) */
.sup-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: #FBE3E0; color: #A3242B;
  font: 700 11.5px/1 var(--font-texto); white-space: nowrap; flex: none; }
.sup-badge > span[aria-hidden] { font-size: 12px; }
.menu-group.user > summary .sup-badge { padding: 0 7px; margin-left: 2px; }
.menu-group.user > summary .sup-tx { display: none; }
.um-head .sup-badge, .um-head .sup-badge span { display: inline-flex; flex-direction: row; align-self: flex-start; }
.um-head .sup-badge { margin: 3px 0 2px; }
.sup-badge.is-big { height: 28px; padding: 0 12px; font-size: 13px; }
/* "¡Gracias!" (vuelta del checkout o pago hecho en el iframe) */
.pr-done { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--oro-c); color: #5A4415; font-size: .98rem; }
.pr-done b { font-family: var(--font-titulo); font-size: 1.05rem; margin-right: 4px; }
.pr-done-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #A3242B; font-size: 18px; }
.pr-done.is-ok { background: var(--ok-bg); color: var(--ok); }
.pr-done.is-slow { background: var(--prog-bg); color: #6B4A00; }
/* Arriba: la carta (lo largo) a la izquierda y "Tu estado" (lo corto) a la derecha */
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1180px) { .pr-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 36px; } }
/* Pantallas anchas: la carta queda en ~80 caracteres por línea y "Tu estado" toma el resto (sin hueco en el medio). */
@media (min-width: 1800px) { .pr-hero-grid { grid-template-columns: minmax(0, 80ch) minmax(380px, 1fr); gap: 48px; } }
.pr-letter h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.pr-letter .sub { margin: -2px 0 0; color: var(--gris); font-size: 1rem; }
.pr-letter-body { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linea); max-width: 80ch; }
.pr-letter-body p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.65; color: #2B2721; }
.pr-letter-body .pr-lead { font: 700 1.3rem/1.35 var(--font-titulo); color: var(--tinta); letter-spacing: -.01em; }
.pr-sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 0 !important; padding-top: 6px; }
.pr-sign > span:first-child { font-weight: 700; color: var(--tinta); }
.pr-sign-by { color: var(--gris); overflow-wrap: anywhere; }
.pr-sign-by a { color: var(--oro-o); font-weight: 600; }
.pr-me { padding: 20px 22px; border-radius: var(--r-s); background: var(--hueso); border: 1px solid var(--linea); }
.pr-me h2 { margin: 0 0 14px !important; font-size: 1.05rem !important; }
.pr-me-body { display: flex; flex-direction: column; gap: 14px; }
.pr-st { display: flex; align-items: flex-start; gap: 12px; }
.pr-st + .pr-st { padding-top: 14px; border-top: 1px solid var(--linea); }
.pr-st > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-st b { font: 700 1.05rem var(--font-titulo); }
.pr-st p { margin: 0; }
.pr-st-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--gris-c); border: 1px solid var(--linea); }
.pr-st.is-on .pr-st-ic { background: var(--oro); color: var(--tinta); border-color: var(--oro); }
.pr-st.is-sup .pr-st-ic { background: #FBE3E0; color: #A3242B; border-color: #F3C9C4; }
.pr-st-gift { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.pr-st-when { display: flex; flex-direction: column; gap: 2px; }
.pr-st-when > .muted { font-size: .84rem; }
.pr-st-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-dt .dt-1 > b { font-size: .95rem; }
/* Tres opciones */
.pr-offers { display: flex; flex-direction: column; gap: 14px; }
.pr-offers-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pr-offers-head h2 { margin: 0; font: 800 1.35rem var(--font-titulo); letter-spacing: -.01em; }
.pr-soon { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--prog-bg); color: var(--prog); font-weight: 700; font-size: .9rem; }
.pr-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (min-width: 1000px) { .pr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 999px) { .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-c-support { grid-column: 1 / -1; } }
.pr-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pr-c-top { display: flex; align-items: center; gap: 12px; }
.pr-c-top h3 { margin: 0; font: 800 1.2rem var(--font-titulo); }
.pr-c-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--oro-c); color: var(--oro-o); }
.pr-c-support .pr-c-ic { background: #FBE3E0; color: #A3242B; }
.pr-c-premium { border-color: rgba(201, 163, 90, .55); box-shadow: 0 0 0 1px rgba(201, 163, 90, .35) inset, var(--sombra); }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 0; color: var(--gris); font-weight: 600; }
.pr-price b { font: 800 2rem/1.1 var(--font-titulo); color: var(--tinta); letter-spacing: -.02em; }
.pr-c-desc { margin: 0; color: #2B2721; }
.pr-c-act { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-c-act:empty { display: none; }
.pr-c-act > .btn { width: 100%; }
.pr-c-act > .pr-have { flex: 1 1 100%; justify-content: center; }
.pr-have { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.pr-facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.pr-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: #2B2721; }
.pr-facts [data-ic] { flex: none; display: inline-flex; margin-top: 3px; color: var(--oro-o); }
/* Regalar: buscar a alguien de mis alianzas */
.pr-gift { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pr-g-fld { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.pr-g-fld input { width: 100%; }
.pr-g-picked { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 14px; border-radius: var(--r-s); border: 1px solid var(--oro); background: #FFFBF1; color: var(--tinta); font-size: .95rem; }
.pr-g-picked b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-g-picked small { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.pr-g-who, .pr-gr-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-g-res { min-width: 0; }
.pr-g-res:empty { display: none; }
.pr-g-chg { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-f); background: #fff; color: var(--tinta); font: 600 13px var(--font-texto); cursor: pointer; }
.pr-g-chg:hover { border-color: var(--tinta); }
.pr-g-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; max-height: 240px; overflow-y: auto; }
.pr-g-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.pr-g-opt:hover, .pr-g-opt:focus-visible { background: var(--hueso); }
.pr-g-opt small { font-size: .78rem; }
.pr-g-msg, .pr-g-nog { margin: 0; }
.pr-g-go { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.pr-g-go .btn { width: 100%; }
.pr-g-go .btn { min-width: 0; }
.pr-g-bt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Abajo: Mis compras (lo largo) y, para el desarrollador, el webhook (lo corto) */
.pr-lower { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.pr-lower > .card { margin: 0; }
.pr-orders { flex: 1.7 1 780px; min-width: 0; }
.pr-dev { flex: 1 1 380px; min-width: 0; }
.pr-orders h2, .pr-dev h2 { margin: 0 0 14px !important; }
.pr-o-what { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.pr-o-what svg { color: var(--oro-o); flex: none; }
.pr-o-tbl .pr-o-date, .pr-o-tbl .pr-o-date .dt { white-space: nowrap; max-width: none; }
.pr-o-tbl td:first-child { min-width: 170px; }
.pr-o-amt { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-o-act { text-align: right !important; white-space: nowrap; }
.pr-o-act .btn + .btn { margin-left: 6px; }
.pr-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EEEAE0; color: var(--gris); white-space: nowrap; }
.pr-chip.st-active, .pr-chip.st-on_trial { background: var(--ok-bg); color: var(--ok); }
.pr-chip.st-past_due, .pr-chip.st-unpaid { background: var(--rojo-bg); color: var(--rojo); }
.pr-chip.st-cancelled, .pr-chip.st-paused { background: var(--prog-bg); color: var(--prog); }
@media (max-width: 640px) { .pr-o-act { text-align: left !important; } }
.pr-dev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pr-dev-head h2 { margin-bottom: 8px !important; }
.pr-dev-only { color: var(--noche-t); background: var(--noche-bg); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.pr-dev-mode { margin: 0 0 6px; font-weight: 700; font-size: .9rem; }
.pr-dev-mode.is-test { color: var(--prog); }
.pr-dev-mode.is-live { color: var(--ok); }
#pr-dev-body > p.small { margin: 0 0 14px; }
.pr-dev-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--linea); }
.pr-dev-l { font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: none; }
.pr-dev-v { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pr-dev-v code { display: block; max-width: 100%; font-size: .84rem; padding: 7px 10px; overflow-wrap: anywhere; }
.pr-dev-v .pr-secret { word-break: break-all; }
.pr-dev-v .pr-dev-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-dev-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-dev-ev code { font-size: .8rem; }
/* Checkout de Lemon Squeezy en un iframe propio (sin lemon.js): pantalla completa, "cargando" hasta "mounted" */
html.ls-open, html.ls-open body { overflow: hidden; }
.ls-ov { position: fixed; inset: 0; z-index: 2000; background: rgba(22, 19, 15, .62); }
.ls-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; visibility: hidden; }
.ls-ov.is-ready .ls-frame { visibility: visible; }
.ls-ov.is-ready .ls-load, .ls-ov.is-ready .ls-x { display: none; }
.ls-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(360px, calc(100vw - 32px)); padding: 26px 24px; border-radius: var(--r); background: var(--papel); color: var(--tinta); text-align: center; font-weight: 600; box-shadow: var(--sombra); }
.ls-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--oro-c); border-top-color: var(--oro); }
.ls-slow { font-weight: 500; font-size: .9rem; color: var(--gris); }
.ls-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--papel); color: var(--tinta); cursor: pointer; box-shadow: var(--sombra); }

/* ================= Vigilancia: resumen por fila e historial de población (02/11, pedido de Crookis) ================= */
.zero { color: var(--gris); font-weight: 700; }
.wh-none { color: var(--gris-c); font-weight: 500; font-style: normal; }

/* Diálogo del historial: ancho para el gráfico y la tabla al lado; en el celular, una columna y ocupa la pantalla. */
.sheet.wh-sheet { width: min(1080px, calc(100vw - 32px)); max-height: 90vh; }
.wh-sheet .sheet-inner { gap: 14px; padding: 22px 24px 24px; max-height: 90vh; overflow-y: auto; }
.wh-head { align-items: flex-start; gap: 12px; }
.wh-head strong { display: block; font: 800 22px/1.2 var(--font-titulo); overflow-wrap: anywhere; }
.wh-head .dlg-sub { display: block; margin-top: 2px; font: 500 13px var(--font-texto); color: var(--gris); }
.wh-head .icon-btn { flex: none; width: 40px; height: 40px; }
.wh-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--hueso); font-size: 13.5px; color: var(--gris); }
.wh-note svg { flex: none; margin-top: 2px; color: var(--oro-o); }
.wh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 12px; }
.wh-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; min-width: 0; }
.wh-k-l { font-size: 12.5px; font-weight: 700; color: var(--gris); }
.wh-k-n { font: 800 24px/1.15 var(--font-titulo); font-variant-numeric: tabular-nums; }
.wh-k-n .wh-none { font: 600 15px/1.6 var(--font-texto); }
.wh-k-s { font-size: 12.5px; line-height: 1.4; color: var(--gris); }
.wh-hour { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.wh-est { white-space: nowrap; }
.wh-span { display: block; }
.wh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
/* La tabla no estira la fila: mide lo mismo que el gráfico + leyenda y se desplaza adentro. */
.wh-grid > .wh-tbl-wrap { contain: size; }
.wh-chart { min-width: 0; }
.wh-chart-box { background: #fff; }
.wh-svg .wh-gap { fill: rgba(21, 19, 15, .045); }
.wh-svg .wh-area { fill: rgba(201, 163, 90, .16); stroke: none; }
.wh-svg .wh-line { fill: none; stroke: var(--oro-o); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.wh-svg .wh-dot { fill: #fff; stroke: var(--oro-o); stroke-width: 2; }
.wh-svg .wh-zero { stroke: var(--linea-f); stroke-width: 1; }
.wh-svg .wh-bar.up { fill: var(--ok); }
.wh-svg .wh-bar.down { fill: var(--rojo); }
.wh-svg .wh-ch-lbl { font-weight: 700; }
.wh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; font-size: 12.5px; color: var(--gris); }
.wh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wh-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.wh-sw.line { height: 3px; background: var(--oro-o); }
.wh-sw.bars { background: linear-gradient(90deg, var(--ok) 50%, var(--rojo) 50%); }
.wh-sw.gap { background: rgba(21, 19, 15, .09); }
.wh-tbl-wrap { overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.wh-tbl { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wh-tbl th, .wh-tbl td { padding: 7px 12px; }
.wh-tbl thead th { position: sticky; top: 0; z-index: 1; background: #fff; box-shadow: inset 0 -1px 0 var(--linea); }
.wh-tbl tbody th { font-weight: 600; white-space: nowrap; }
.wh-tbl .num { text-align: right; white-space: nowrap; }
.wh-tbl tr.wh-miss th { color: var(--gris-c); font-weight: 500; }
@media (max-width: 980px) {
  .wh-grid { grid-template-columns: minmax(0, 1fr); }
  .wh-grid > .wh-tbl-wrap { contain: none; }
  .wh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wh-kpi:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sheet.wh-sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .wh-sheet .sheet-inner { max-height: 100dvh; padding: 16px; }
  .wh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wh-k-n { font-size: 20px; }
  .wh-tbl th, .wh-tbl td { padding: 7px 10px; }
}

/* ================= Grupo → Discord: "Conectar Discord" en un clic (03/11, OAuth webhook.incoming) =================
   Dos columnas parejas desde 1100 px: a la izquierda conectar (botón de Discord #5865F2, como el de entrar, y una línea de qué pide
   Discord) o el estado con "Cambiar canal" / "Desconectar"; a la derecha qué avisa (casillas que se guardan solas). Debajo, plegado,
   pegar el webhook a mano ("Más opciones"). */
.dc-box { display: grid; gap: 16px; margin-top: 12px; }
.dc-box > .ok, .dc-box > .err { margin: 0; }
.dc-box > .result:empty { display: none; }
.dc-cols { display: grid; gap: 16px; }
.dc-panel { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid rgba(88, 101, 242, .22); background: #F5F6FE; border-radius: var(--r); }
.dc-logo { width: 44px; height: 44px; border-radius: 12px; background: #5865F2; color: #fff; display: grid; place-items: center; flex: none; }
.dc-logo svg { width: 26px; height: 26px; }
.dc-txt { min-width: 0; flex: 1; }
.dc-txt h3, .dc-flags-head h3 { margin: 0; font: 700 1.08rem/1.3 var(--font-titulo); color: var(--tinta); display: flex; align-items: center; gap: 8px; }
.dc-on { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }
.dc-lead { margin: 6px 0 16px; max-width: 60ch; color: var(--gris); }
.dc-btn { gap: 10px; height: 46px; padding: 0 22px; font-size: 15px; }
.dc-btn svg { width: 20px; height: 20px; flex: none; }
.dc-hint { margin: 10px 0 0; max-width: 60ch; }
.dc-meta { margin: -6px 0 16px; color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.dc-meta a { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.dc-meta code { font-size: 12px; margin-left: 4px; }
.dc-m { display: inline-flex; align-items: center; }
.dc-m + .dc-m::before { content: "·"; margin: 0 8px; color: var(--gris-c); }
.dc-acts .btn { min-width: 9.5em; justify-content: center; }
.dc-flags { padding: 20px 22px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; }
.dc-flags-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.dc-flags-sub { margin: 4px 0 0; }
/* Idioma de los avisos (04/11): arriba de "Qué avisa", con su línea de ayuda. */
.dc-lang { margin: 14px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.dc-lang-t { margin: 0 0 8px; font-weight: 600; color: var(--tinta); }
.dc-lang .mode { margin: 0; }
.dc-lang-h { margin: 8px 0 0; }
.dc-flag-list { display: grid; gap: 0; margin-top: 6px; }
.dc-flag-list .check { align-items: flex-start !important; padding: 8px 0; line-height: 1.35; }
.dc-flag-list .check input { margin: 1px 0 0; flex: none; }
.dc-box > details.more { border-top: 0; padding-top: 0; }
.dc-manual { max-width: 640px; }
.dc-manual > p { margin: 0; }
.dc-solo h3 { margin: 0; font: 700 1.08rem/1.3 var(--font-titulo); }
.dc-solo .dc-lead { margin: 6px 0 12px; }
@media (min-width: 1100px) {
  .dc-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 640px) {
  .dc-panel { padding: 16px; gap: 12px; }
  .dc-logo { width: 36px; height: 36px; border-radius: 10px; }
  .dc-logo svg { width: 21px; height: 21px; }
  .dc-btn { width: 100%; justify-content: center; }
  .dc-flags { padding: 16px; }
  .dc-acts .btn { flex: 1; min-width: 0; }
  .dc-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dc-m + .dc-m::before { display: none; }
}

/* Flotantes (conectados + chat, tanda H): el final del contenido siempre puede quedar libre de ellos. main.cont termina con un margen
   de abajo al menos igual a lo que ocupa el flotante (botón de 44 px + 18 px del borde), aunque no hubiera pie debajo. Pedido de Santi:
   en Vigilancia los botones tapaban las últimas novedades. tests/browser_ux3.py lo controla en todas las páginas. */
:root { --fab-h: 62px; }
body:has(.online-fab) main.cont, body:has(.online-fab).pg-home main.cont.wrap { padding-bottom: max(48px, calc(var(--fab-h) + 8px)); }
@media (max-width: 1100px) { body:has(.online-fab) main.cont, body:has(.online-fab).pg-home main.cont.wrap { padding-bottom: max(40px, calc(var(--fab-h) + 8px)); } }

/* Correcciones 03/11 (Santi). Número rojo en una pestaña o un título ("Solicitudes 2"): el mismo rojo que la barra lateral. */
.tab-bd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
  background: var(--rojo); color: #fff; font: 700 11px/1 var(--font-texto); vertical-align: 2px; }
h2 .tab-bd, h3 .tab-bd { vertical-align: 3px; }
/* DUAL: quien juega una cuenta que es de otro. "Crookis [DUAL] de Pushkis" en una sola pieza que no se parte. */
.acct { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.acct-cell { line-height: 1.3; }
.acct-cell .acct { display: flex; }
.acct-cell .acct + .acct { margin-top: 6px; }
.chip-dual { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--noche); color: var(--crema);
  font: 800 10.5px/1 var(--font-texto); letter-spacing: .06em; }
.dual-of { font-size: 13px; color: var(--gris); }
.req-h { display: flex; align-items: center; gap: 4px; }
.req-h + p { margin-top: 2px; }
/* Mis órdenes: la regla de fakes dice quién la eligió; la explicación fija de TravCrew va marcada como "Ayuda". */
.fr-who { font-size: 13px; color: var(--gris); }
.fr-who::before { content: "· "; }
.fake-rule .fr-help { color: var(--gris); }
.fr-help-l { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--tinta); }
.fr-help-l svg { flex: none; }
.orders-head .note-line > .wip { flex: none; }
@media (max-width: 640px) { .fr-who { flex-basis: 100%; } .fr-who::before { content: none; } }

/* Vigilancia v2 (03/11, Santi: "si vigilás a alguien debe ser un solo tracking continuo"). UNA fila por vigilado. La lista es un
   contenedor (container query): con lugar (≥ 1000 px de lista) es una tabla con sus columnas; si no, tarjetas en grilla.
   Arriba, la barra para agregar en una línea (desde 1100 px de pantalla). */
.watch-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 40px; }
.watch-head .wh-titles h1 { margin-bottom: 4px; }
.watch-head .wh-titles .sub { margin: 0; }
.watch-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; }
.wa-q { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; margin: 0; }
.wa-l { font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.wa-q input { width: 100%; }
.watch-add .watch-share { display: inline-flex; align-items: center; gap: 8px !important; height: 44px; margin: 0; white-space: nowrap; cursor: pointer; }
.watch-add .btn { height: 44px; flex: none; }
.watch-found { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.watch-found:empty { display: none; }
.watch-found li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--linea);
  border-radius: var(--r-s); background: #fff; min-width: 0; }
.watch-found li.wf-none { border-style: dashed; background: transparent; }
.wf-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wf-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-nm small { font-size: 12.5px; color: var(--gris); }
.watch-found .btn { flex: none; gap: 6px; }
.wf-have { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; font-weight: 700; color: var(--ok); padding-right: 6px; }
.watch-head .result:empty { display: none; }
@media (min-width: 1100px) {
  .watch-head { grid-template-columns: minmax(260px, 1fr) minmax(0, 760px); align-items: end; }
  .watch-add { flex-wrap: nowrap; }
  .watch-head .watch-found, .watch-head .result { grid-column: 1 / -1; }
}

.watch-list { container-type: inline-size; }
.wl-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.wl-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.wl-total { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--hueso);
  font: 700 13px var(--font-texto); color: var(--gris); }
.wl-total:empty { display: none; }
.wl-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.watch-list .watch-q { margin: 0; }
.watch-list .watch-q { flex: none; width: 240px; }
.watch-list .watch-q input, #watch-q { width: 100%; height: 38px; min-height: 0; }
@media (min-width: 641px) { .wl-tools { flex-wrap: nowrap; margin-left: auto; } }
@media (max-width: 640px) { .wl-tools { width: 100%; } .watch-list .watch-q { flex: 1 1 100%; width: auto; } }
.wl-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--gris); white-space: nowrap; }
.wl-sort select { width: auto; height: 38px; min-height: 0; padding: 0 34px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--tinta); border-radius: 999px; }
.watch-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; }
.watch-by:empty { display: none; }
.wb-l { font-size: 13.5px; font-weight: 700; color: var(--gris); margin-right: 2px; }
.wb-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--hueso); font-size: 11px; color: var(--tinta); }
.chip-s.on .wb-n { background: rgba(255, 255, 255, .16); color: var(--crema); }
.wl-empty { padding: 26px 18px; border: 1px dashed var(--linea-f); border-radius: var(--r-s); text-align: center; color: var(--gris); }
.wl-empty p { margin: 0; }
.card.watch-list > p.wl-foot { margin: 18px 0 0; }

/* Tarjetas (lista angosta): nombre + "⋯" arriba, 4 números, la rayita a todo el ancho, lo último que pasó y "Historial". */
.wl-th { display: none; }
.wl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.wr { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas:
    "id id id id" "pop d1 d7 d30" "spark spark spark spark" "ev ev ev ev" "act act act act";
  gap: 12px 10px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; min-width: 0; align-content: start; }
.wr.is-new { border-color: rgba(201, 163, 90, .55); box-shadow: inset 3px 0 0 var(--oro); }
.wr-id { grid-area: id; min-width: 0; padding-right: 40px; }
.wr-name { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 17px/1.25 var(--font-titulo); min-width: 0; }
.wr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wr-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-o); box-shadow: 0 0 0 3px rgba(201, 163, 90, .22); }
.wr-meta { margin: 2px 0 0; font-size: 13px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-since { white-space: nowrap; }
.wr-v, .wr-meta .wr-since { display: none; }
.wr-who { margin: 2px 0 0; font-size: 12.5px; color: var(--gris); overflow-wrap: anywhere; }
.wr-n { display: flex; flex-direction: column; min-width: 0; font: 700 15px/1.25 var(--font-texto); font-variant-numeric: tabular-nums; }
.wr-pop { grid-area: pop; } .wr-d1 { grid-area: d1; } .wr-d7 { grid-area: d7; } .wr-d30 { grid-area: d30; }
.wr-n small { font: 500 11.5px var(--font-texto); color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-n .wh-none { font-size: 13px; }
.wr-gone { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; }
.wr-spark { grid-area: spark; height: 40px; min-width: 0; }
.wr-svg { display: block; overflow: visible; }
.wr-svg .wr-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wr-svg .wr-gap { stroke-width: 1.5; stroke-dasharray: 2 3; }
.wr-svg.up .wr-line { stroke: var(--ok); } .wr-svg.up .wr-area { fill: rgba(46, 125, 50, .09); } .wr-svg.up .wr-end { fill: var(--ok); }
.wr-svg.down .wr-line { stroke: var(--rojo); } .wr-svg.down .wr-area { fill: rgba(142, 27, 27, .08); } .wr-svg.down .wr-end { fill: var(--rojo); }
.wr-svg.flat .wr-line { stroke: var(--gris-c); } .wr-svg.flat .wr-area { fill: rgba(21, 19, 15, .04); } .wr-svg.flat .wr-end { fill: var(--gris); }
.wr-ev { grid-area: ev; min-width: 0; padding-top: 10px; border-top: 1px solid var(--linea); }
/* Cada novedad = cuándo + qué; la columna "cuándo" mide lo que mide la más larga de la fila (li con display: contents). */
.wr-evl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 10px; align-items: baseline;
  font-size: 13.5px; line-height: 1.35; }
.wr-e { display: contents; }
.wr-when { font-size: 12px; font-weight: 700; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-what { min-width: 0; overflow-wrap: anywhere; }
.wr-what::first-letter { text-transform: uppercase; }
.wr-e.bad .wr-what { color: var(--rojo); } .wr-e.good .wr-what { color: var(--ok); }
.wr-none { margin: 0; font-size: 13px; color: var(--gris-c); }
.wr-act { grid-area: act; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wr-since-c { font-size: 12.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wr-act .btn { min-height: 34px; height: 34px; gap: 6px; }
.wr-act .row-menu { position: absolute; top: 12px; right: 12px; }
.wr-act .row-menu > summary { width: 34px; height: 34px; }
.rm-note { margin: 4px 8px 6px; font-size: 12.5px; line-height: 1.4; color: var(--gris); }
.w-more { display: flex; margin: 14px auto 0; }
.wl-none { margin: 12px 0; }
.w-hidden { margin-top: 16px; }
.w-hid-list { list-style: none; margin: 6px 0 0; padding: 0; }
.w-hid-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); }
.w-hid-list li > span { min-width: 0; overflow-wrap: anywhere; }
.w-hid-list .btn { flex: none; }

/* Tabla (lista ancha): las mismas filas, una por línea, con títulos de columna arriba (las etiquetas chicas se esconden). */
@container (min-width: 1000px) {
  .wl-th, .wl-rows > .wr { display: grid; grid-template-columns: minmax(200px, 1fr) 72px 58px 62px 66px minmax(112px, .6fr) minmax(190px, 1.25fr) 132px;
    grid-template-areas: "id pop d1 d7 d30 spark ev act"; column-gap: 14px; align-items: center; }
  .wl-th { padding: 0 14px 8px; border-bottom: 1px solid var(--linea-f); font-size: 12px; font-weight: 700; color: var(--gris); }
  .wl-th .num { text-align: right; }
  .wl-rows { display: block; }
  .wl-rows > .wr { gap: 0 14px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; }
  .wl-rows > .wr:hover { background: rgba(244, 239, 228, .5); }
  .wl-rows > .wr.is-new { box-shadow: inset 3px 0 0 var(--oro); border-color: var(--linea); background: rgba(201, 163, 90, .06); }
  .wr-id { padding-right: 0; }
  .wr-n { align-items: flex-end; text-align: right; }
  .wr-n small { display: none; }
  .wr-pop .wr-v { display: block; font: 500 12px var(--font-texto); color: var(--gris); white-space: nowrap; }
  .wr-meta .wr-since { display: inline; } .wr-meta .wr-mv { display: none; }
  .wr-gone { grid-column: 2 / 6; grid-row: 1; text-align: right; }
  .wr-spark { height: 34px; }
  .wr-ev { padding-top: 0; border-top: 0; }
  .wr-evl { font-size: 13px; gap: 3px 10px; }
  .wr-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wr-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wr-act { justify-content: flex-end; }
  .wr-act .wr-since-c { display: none; }
  .wr-act .row-menu { position: relative; top: auto; right: auto; }
}

/* Salvar tropas (03/11): pasos numerados con una pregunta por campo, a quién mandar explicado y el ejemplo de cómo queda. */
.sv-form { margin-top: 18px; }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 760px; }
.sv-steps > li { display: flex; align-items: flex-start; gap: 12px; }
.sv-steps > li > .ov-n { margin-top: 1px; }
.sv-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-b > small { font-size: 13px; line-height: 1.4; }
.sv-f { display: flex; flex-direction: column; gap: 6px; }
.sv-q, .sv-b .tf > span { font: 700 1rem/1.3 var(--font-titulo); color: var(--tinta); }
.sv-f input, .sv-f select, .sv-b .tf input { max-width: 360px; width: 100%; }
.sv-b .tf { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sv-b .tf .tf-prev { font-size: 13px; line-height: 1.4; }
.sv-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-prev { margin: 22px 0 6px; padding: 14px 16px; border-radius: var(--r-s, 12px); background: var(--hueso); max-width: 760px; }
.sv-prev-h { margin: 0 0 10px; font-weight: 700; font-size: 14px; }
.sv-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-line li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; border-top: 3px solid var(--linea); }
.sv-line li b { font: 800 1.15rem var(--font-titulo); font-variant-numeric: tabular-nums; }
.sv-line li span { font-size: 13px; color: var(--gris); line-height: 1.35; }
.sv-line li.go { border-top-color: var(--oro); }
.sv-line li.hit { border-top-color: var(--rojo); }
.sv-line li.back { border-top-color: var(--ok); }
.sv-prev-n { margin: 10px 0 0; }
.sv-form > details.more { max-width: 760px; }
.sv-form .f-actions { margin-top: 14px; }
.sv-res { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.sv-res .time-card { flex: none; }
.sv-res-t { flex: 1 1 280px; margin: 0; max-width: 520px; }
.sv-res-h { margin: 18px 0 8px; font: 700 1.05rem var(--font-titulo); }
@media (max-width: 640px) {
  .sv-line { grid-template-columns: minmax(0, 1fr); }
  .sv-f input, .sv-f select, .sv-b .tf input { max-width: none; }
}
/* Desde 1100 px el ejemplo va a la derecha de los pasos (sin espacio muerto) y se lee de arriba abajo, como pasa el tiempo. */
@media (min-width: 1100px) {
  .sv-form { display: grid; grid-template-columns: minmax(0, 720px) minmax(300px, 400px); column-gap: 40px; align-items: start; }
  .sv-form > .sv-steps { grid-column: 1; grid-row: 1; }
  .sv-form > .sv-prev { grid-column: 2; grid-row: 1 / span 3; margin: 0; position: sticky; top: 90px; }
  .sv-form > details.more { grid-column: 1; }
  .sv-form > .f-actions { grid-column: 1; }
  .sv-line { grid-template-columns: minmax(0, 1fr); }
  .sv-line li { flex-direction: row; align-items: baseline; gap: 12px; border-top: 0; border-left: 3px solid var(--linea); }
  .sv-line li.go { border-left-color: var(--oro); } .sv-line li.hit { border-left-color: var(--rojo); } .sv-line li.back { border-left-color: var(--ok); }
  .sv-line li b { flex: none; min-width: 5.6em; }
}
.ic-time .tf { max-width: 560px; }

/* Elegir día y hora sin escribir (THQ.plan.dayHourPicker, 03/11): chips de día + hora en punto o y media, en tu hora y la del servidor al lado. */
.dh { display: flex; flex-direction: column; gap: 10px; }
.dh-days { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-day.chip { min-height: 40px; gap: 6px; }
.dh-dn::first-letter { text-transform: uppercase; }
.dh-dn { display: inline-block; }
.dh-day small { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.dh-hour { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 600; }
.dh-hour > span:first-child { color: var(--gris); }
.dh-hour select { width: auto; min-width: 104px; font-variant-numeric: tabular-nums; }
.dh-tz { font-weight: 600; }
.dh-srv { color: var(--gris); font-weight: 500; font-size: 12.5px; }
.dh-prev { padding: 10px 12px; border-radius: var(--r-s); background: var(--hueso); }

/* Hoy: votaciones abiertas arriba de "Lo próximo" (03/11): una línea por votación, "Votar" dorado si me falta, "Ya votaste" si no. */
.hoy-polls { display: grid; gap: 8px; margin: 4px 0 12px; }
.hp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-s, 12px);
  background: #EEF3FA; border: 1px solid #D5E2F3; }
.hp.done { background: var(--hueso); border-color: var(--linea); }
.hp-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #1D4F91; }
.hp.done .hp-ic { color: var(--ok); }
.hp-t { min-width: 0; line-height: 1.35; }
.hp-t b { overflow-wrap: anywhere; }
.hp-k { font-weight: 700; color: #1D4F91; }
.hp.done .hp-k { color: var(--gris); }
.hp-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gris); }
.hp-miss { color: var(--rojo); font-weight: 700; }
.hp-ok { color: var(--ok); font-weight: 700; }
.hp-when { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.hp-when .ev-day { font-style: normal; font-weight: 600; margin-left: 4px; color: var(--prog); }
.hp-you { margin-left: 6px; }
.hp .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .hp { grid-template-columns: auto minmax(0, 1fr); }
  .hp .btn { grid-column: 1 / -1; justify-content: center; }
}
.dh-field { display: flex; flex-direction: column; gap: 8px; }
.dh-lbl { font-size: .84rem; font-weight: 700; color: var(--gris); }
/* Dentro de un formulario en grilla, el selector de día y hora no hereda la columna de las etiquetas. */
.grid-form .dh label.dh-day.chip { flex-direction: row; align-items: center; font-size: 14px; }
.grid-form .dh label.dh-day.chip:not(:has(input:checked)) { color: var(--tinta); }
.grid-form .dh .dh-hour { flex-direction: row; align-items: center; font-size: 14px; color: var(--tinta); }
.grid-form .dh .dh-hour > span:first-child { color: var(--gris); }
.grid-form .dh-field { grid-column: 1 / -1; }
@media (min-width: 900px) { .grid-form .dh-field .dh-prev { max-width: 520px; } }

/* ================= Salud (health.php, 03/11, solo el desarrollador): verde / amarillo / rojo en palabras simples ================= */
.hl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.hl-head-tx { min-width: 0; flex: 1 1 380px; }
.hl-head-tx .sub { margin-bottom: 0; }
.hl-head-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hl-sum { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700;
  background: var(--hueso); color: var(--gris); }
.hl-sum.lv-ok { background: var(--ok-bg); color: var(--ok); }
.hl-sum.lv-warn { background: var(--prog-bg); color: var(--prog); }
.hl-sum.lv-bad { background: var(--rojo-bg); color: var(--rojo); }
.hl-grid { display: grid; gap: 16px; align-items: start; }
.hl-col { display: grid; gap: 16px; min-width: 0; }
.hl-col > .card { margin: 0; }
@media (min-width: 1100px) { .hl-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hl-it { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.45; overflow-wrap: anywhere; }
.hl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-c); flex: none; }
.hl-dot.lv-ok { background: var(--ok); }
.hl-dot.lv-warn { background: #C98A12; }
.hl-dot.lv-bad { background: var(--rojo); }
.hl-dot.lv-info { background: var(--linea-f); }
.hl-word { font-weight: 700; white-space: nowrap; }
.hl-word.lv-ok { color: var(--ok); }
.hl-word.lv-warn { color: var(--prog); }
.hl-word.lv-bad { color: var(--rojo); }
.hl-srv + .hl-srv { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.hl-srv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.hl-srv-h b { font-size: 1.02rem; }
.hl-srv-h small { color: var(--gris); font-variant-numeric: tabular-nums; }
.hl-st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hl-detail { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris); font-size: 12px; }
.hl-tables code { font-size: 11.5px; margin-left: 4px; color: var(--gris); }
.hl-col > .card > h2:first-child { margin-top: 0; }
.hl-job + .hl-job { margin-top: 18px; }
.hl-job-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hl-job-h h3 { margin: 0; font-size: 1rem; }
.hl-job-h small { color: var(--gris); font-variant-numeric: tabular-nums; }
/* Angosto: una sola columna con lo urgente primero (servidores, base y cron) y las listas largas al final. */
@media (max-width: 1099px) {
  .hl-col { display: contents; }
  .hl-o1 { order: 1; } .hl-o2 { order: 2; } .hl-o3 { order: 3; } .hl-o4 { order: 4; }
}
@media (max-width: 640px) {
  .hl-runs th, .hl-runs td, .hl-tables th, .hl-tables td { padding-left: 8px; padding-right: 8px; }
  .hl-tables code { display: none; }
  .hl-detail { max-width: 18ch; }
}

/* ================= Grupo → Servidor (03/11, Líder): el servidor de la alianza y registrar otro ================= */
.sv-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .sv-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.sv-panel { padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--papel); min-width: 0; }
.sv-panel h3 { margin: 0 0 10px; font-size: 1.02rem; }
.sv-name { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sv-name b { font-size: 1.1rem; }
.sv-name a { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.sv-facts { margin: 0; display: grid; gap: 8px; }
.sv-facts > div { display: grid; grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.sv-facts dt { color: var(--gris); font-size: 13.5px; }
.sv-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sv-ver { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.sv-ver.ok { background: var(--ok-bg); color: var(--ok); }
.sv-ver.pend { background: var(--prog-bg); color: var(--prog); }
.sv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 12px 0 4px; }
.sv-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; font-size: .84rem; font-weight: 700; color: var(--gris); }
.sv-field input { width: 100%; font-weight: 500; }
.sv-form .btn { flex: none; }
.sv-note { margin: 10px 0 0; }
.sv-mine-h { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--linea); }
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sv-row { padding: 12px 14px; border-radius: var(--r-s); background: var(--hueso); }
.sv-row-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-host { display: block; margin: 2px 0 8px; color: var(--gris); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .sv-panel { padding: 14px; }
  .sv-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .sv-form .btn { width: 100%; justify-content: center; }
}

/* ================= TEMPORADAS (03/11): selector de alianza · servidor, "¿venís?", Grupo → Temporadas, resumen y Hoy =================
   El selector va DENTRO de la barra lateral (se abre empujando el menú, nada flota): cada alianza · servidor que jugás, la actual con
   ✓ y las demás con su número rojo; las preguntas "¿Venís a …?" en dorado. */
.side-switch { margin-bottom: 14px; }
.side-switch > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.side-switch > summary::-webkit-details-marker { display: none; }
.side-switch > summary .side-bd { flex: none; }
.side-switch > summary .ch { transition: transform .15s; }
.side-switch[open] > summary { border-color: rgba(201, 163, 90, .45); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.side-switch[open] > summary .ch { transform: rotate(180deg); }
.sw-pop { display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(201, 163, 90, .45); border-top: 0; border-radius: 0 0 14px 14px; background: var(--noche2); }
.sw-h { margin: 4px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 226, 192, .45); }
.sw-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: rgba(241, 226, 192, .8);
  text-align: left; cursor: pointer; font: inherit; }
.sw-it > span:first-child { flex: 1; min-width: 0; }
.sw-it b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-it small { display: block; font-size: 12px; color: rgba(241, 226, 192, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-it:hover { background: rgba(241, 226, 192, .07); color: var(--crema); }
.sw-it.on { background: rgba(201, 163, 90, .16); color: var(--crema); box-shadow: inset 3px 0 0 var(--oro); }
.sw-ok { color: var(--oro); flex: none; }
.sw-ask small { color: var(--oro); }
.sw-new { flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--oro); color: var(--noche); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; }
.sw-links { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--linea-o); font-size: 12.5px; }
.sw-links a { color: rgba(241, 226, 192, .7); }
.sw-links a:hover { color: var(--crema); }

/* Bandas: "¿venís?" (dorada, con sus dos botones a la derecha) y "esta temporada terminó" (gris). */
.band-season { background: var(--oro-c); border-color: rgba(201, 163, 90, .55); box-shadow: inset 4px 0 0 var(--oro); }
.band-archived { background: var(--hueso); border-color: var(--linea-f); }
.band > .band-acts { flex: none; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.band-season, .band-archived { margin-bottom: 18px; }
.band-season + .band, .band-archived + .band { margin-top: -8px; }

/* Diálogo "Tu cuenta en …" */
.season-dlg .sheet-inner { display: grid; gap: 14px; padding: 20px 22px; }
.season-dlg .sheet-head { align-items: flex-start; gap: 10px; }
.season-dlg .sheet-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.season-steps { margin: 0; }
.season-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.season-field select { width: 100%; }
.season-why { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--hueso); font-size: 14px; color: var(--gris); }
.season-why svg { flex: none; margin-top: 2px; color: var(--oro-o); }
.sheet-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.season-msg:empty { display: none; }

/* Grupo → Temporadas: a la izquierda las temporadas (tarjetas parejas), a la derecha "Empezar nueva temporada" (solo Líder). */
.st-sub { margin: 4px 0 18px; max-width: 860px; }
.st-cols { display: grid; gap: 18px; align-items: start; }
.st-main { min-width: 0; }
.st-h { margin: 0 0 10px; font-size: 1.02rem; }
.st-grid + .st-h { margin-top: 22px; }
/* 03/11 (Santi: la tarjeta de la temporada quedaba angosta con lugar vacío al lado): auto-fit = las tarjetas llenan el ancho (una sola, a
   todo el ancho; dos, mitad y mitad) y cada tarjeta es un contenedor: ancha, datos a la izquierda y botones a la derecha. */
.st-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.st-card { padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--papel); min-width: 0; container: st-card / inline-size; }
.st-in { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.st-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-facts { display: flex; flex-direction: column; gap: 8px; }
@container st-card (min-width: 600px) {
  .st-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; }
  .st-facts { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
  .st-in > .st-acts { margin: 0; padding: 0; flex-direction: column; align-items: stretch; justify-content: center; min-width: 190px; }
  .st-in > .st-acts .btn { justify-content: center; }
}
.st-card.is-cur { border-color: rgba(201, 163, 90, .7); box-shadow: inset 0 3px 0 var(--oro); }
.st-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-n { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.badge.st-cur { background: var(--oro-c); color: var(--oro-o); }
.st-srv { margin: 0; font: 800 1.15rem/1.25 var(--font-titulo); overflow-wrap: anywhere; }
.st-srv small { font: 600 13px var(--font-texto); color: var(--gris); }
.st-dates, .st-me, .st-sum { margin: 0; font-size: 13.5px; color: var(--gris); }
.st-me-in { color: var(--ok); font-weight: 600; }
.st-me-pending { color: var(--prog); font-weight: 600; }
.st-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.st-people b { font: 800 1.05rem var(--font-titulo); font-variant-numeric: tabular-nums; margin-right: 2px; }
.st-acts { margin-top: auto; padding-top: 6px; }
.st-form { display: grid; gap: 14px; margin-top: 6px; }
/* 03/11: "Empezar nueva temporada" va DEBAJO de las temporadas (antes a la derecha: la columna de las tarjetas quedaba corta y con lugar
   vacío). Ancha: servidor · etiqueta · botón en una fila y "¿No está en la lista?" debajo. */
/* Solo el panel (.sv-panel.st-new): el chip "nuevo" de Miembros (.badge.st-new) usa el mismo nombre y como contenedor quedaba de 20 px. */
.sv-panel.st-new { container-type: inline-size; }
.st-new > p.small { max-width: 760px; }
@container (min-width: 760px) {
  /* subgrid: título, campo y ayuda de cada columna en la MISMA fila aunque un título ocupe 2 renglones (campos y botón alineados). */
  .st-form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 6px 18px; }
  .st-form > label.st-field:first-child { grid-column: 1; grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; gap: 6px; }
  .st-form > label.st-field:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; gap: 6px; }
  .st-form > .st-go { grid-column: 3; grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; gap: 6px; align-items: start; max-width: 260px; }
  .st-form > .st-link { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
}
.st-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.st-field input, .st-field select { width: 100%; }
.st-field small { font-weight: 400; }
.st-link > summary { font-size: 13.5px; }
.st-link .st-field { margin-top: 10px; }
.st-go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-suggest { margin-bottom: 16px; }

/* Resumen de una temporada terminada */
.st-arch { display: grid; gap: 16px; }
#seasons-tab { scroll-margin-top: 84px; } /* debajo de la barra de arriba (fija) */
.st-more { margin-top: 12px; }
.st-arch-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-arch-head > div { flex: 1; min-width: 220px; }
.st-arch-head h3 { margin: 0; font-size: 1.3rem; }
.st-arch-head p { margin: 2px 0 0; }
.st-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.st-arch-cols { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 1000px) { .st-arch-cols { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } }
.st-chart { min-width: 0; }
.st-growers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-growers li { display: flex; align-items: center; gap: 10px; }
.st-g-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-growers .up { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.st-polls-h { margin-top: 18px !important; }
.st-polls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.st-polls li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--hueso); }
.st-polls li span { color: var(--gris); }
.st-rank .up { color: var(--ok); font-weight: 700; } .st-rank .down { color: var(--rojo); font-weight: 700; }
.st-sp-c { width: 170px; }
.st-spark { height: 30px; width: 160px; }
@media (max-width: 980px) { .st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-kpis .wh-kpi:last-child { grid-column: 1 / -1; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-sp-c, .st-spark { width: 100%; }
}

/* Hoy: "En tus otros servidores" (arriba de la columna derecha: corto y urgente) */
.hoy-else h2 { margin-bottom: 4px; }
.else-list { list-style: none; margin: 0; padding: 0; }
.else-row { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.else-row:first-child { border-top: 0; }
.else-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.else-h > span { min-width: 0; }
.else-h b { display: block; font-size: 15px; }
.else-h small { display: block; font-size: 12.5px; color: var(--gris); }
.else-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.else-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.else-chip.e-r { background: #F6E1DE; color: var(--rojo); }
.else-chip.e-o { background: var(--prog-bg); color: var(--prog); }
.else-chip.e-n { background: var(--noche-bg); color: var(--noche-t); }
.else-chip.e-v { background: var(--ok-bg); color: var(--ok); }

/* Alarma de otro servidor: de cuál es, debajo del nombre. */
.alarm-srv { display: inline-flex; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--hueso); color: var(--gris); font-size: 12.5px; font-weight: 700; }

/* ================= Celular (03/11, Santi desde el iPhone a 414 px) =================
   Cabecera: fondo opaco (con el translúcido + desenfoque se leía el texto de la página por detrás, "se ve sucio") y, debajo de 900 px,
   el título de la página entre ☰ y lo de la derecha, cortado con "…"; si queda lugar para menos de ~3 letras no se muestra (consulta de
   contenedor sobre el propio título). */
@media (max-width: 899px) {
  .topbar-title { display: block; flex: 1 1 0; overflow: hidden; container-type: inline-size; }
  .topbar-sp { display: none; }
  .topbar-title .tt-in { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  @container (max-width: 44px) { .topbar-title .tt-in { visibility: hidden; } }
}
/* Reloj chico: sin el hueco vacío a la derecha (el botón "tu hora" quedaba con su relleno aunque su texto estuviera oculto). El botón
   cubre todo el reloj: tocar la hora abre la zona horaria. Con "solo mi hora" (Mis ajustes) se muestra la del jugador. */
@media (max-width: 760px) {
  .topbar .clock-chip { position: relative; gap: 0; padding: 0 12px; }
  .topbar .clock-chip .cc-loc, .topbar .clock-chip .cc-loc:hover { position: absolute; inset: 0; height: auto; padding: 0; border-radius: inherit; background: none; }
  [data-time="local"] .topbar .clock-chip .cc-loc { position: static; }
  [data-time="local"] .topbar .clock-chip .cc-loc-part { display: inline; }
}
/* Final de la página en el celular: los flotantes (● conectados + chat) más chicos y, con la página bajada hasta el final, dentro del pie:
   el crédito de CheWeb arriba y "Privacidad · Términos" abajo, en la MISMA fila que los flotantes (que dejan su lugar a la derecha). Así no
   hay banda vacía (antes main.cont reservaba --fab-h y el pie otros 84 px) y el flotante nunca tapa el contenido: queda sobre el pie. */
@media (max-width: 760px) {
  :root { --fab-m: 40px; }
  .online-fab, body:has(.alarm-bar) .online-fab { right: 16px; bottom: 16px; }
  .online-btn { height: var(--fab-m); min-width: var(--fab-m); padding: 0 12px; font-size: 13px; }
  .online-fab .fab-online { padding: 0 12px; gap: 6px; }
  .fab-chat { width: var(--fab-m); padding: 0; }
  .foot-app, body:has(.online-fab) .foot-app { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 18px 16px 16px; }
  .foot-app .cw-credito { order: -1; }
  .foot-app .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: var(--fab-m); }
  body:has(.online-fab) .foot-app .foot-links { max-width: calc(100% - 112px); }
  body:has(.online-fab) main.cont, body:has(.online-fab).pg-home main.cont.wrap { padding-bottom: 32px; }
}

/* Fakes: "Ayuda: abre la plaza de reuniones…" dentro de la caja de la regla (antes flotaba suelto debajo de la última tarjeta). */
.fk-rule-in .fk-rule-help { margin-top: 8px; line-height: 1.5; color: var(--gris); }
.fk-rule-help .wip { margin-left: 2px; }


/* -- Defensa: historial de compromiso (03/11). Pestañas Llamadas · Compromiso, "Tu compromiso", Archivadas y quién no respondió -- */
.def-tabs { margin: 14px 0 4px; }
.my-commit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; font-size: 14px; }
.my-commit .cm-mine-l { font-weight: 700; color: var(--tinta); }
.chip-me, .chip-srv { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.chip-me { background: var(--oro-c); color: var(--oro-o); }
.chip-srv { background: var(--hueso); color: var(--gris); }

/* -- PUNTAJE DE COMPROMISO (03/11): píldoras por área (verde ≥ 70, amarillo 40–69, rojo < 40, gris "—" sin datos), el puntaje grande,
   tabla ordenable (filas que abren el detalle), "Cómo se cuenta" a la derecha ≥ 1700 px y tarjetas en el celular. -- */
.cs-pill, .cs-big { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: var(--font-texto);
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.cs-pill { min-width: 40px; height: 24px; padding: 0 8px; font-size: 12.5px; }
.cs-big { min-width: 50px; height: 34px; padding: 0 12px; font-size: 17px; }
.cs-big.cs-mid { min-width: 42px; height: 28px; font-size: 15px; }
.cs-pill.lv-ok, .cs-big.lv-ok { background: var(--ok-bg); color: var(--ok); }
.cs-pill.lv-warn, .cs-big.lv-warn { background: var(--prog-bg); color: var(--prog); }
.cs-pill.lv-bad, .cs-big.lv-bad { background: var(--rojo-bg); color: var(--rojo); }
.cs-pill.lv-none, .cs-big.lv-none { background: var(--hueso); color: var(--gris); font-weight: 600; }
.cs-big.lv-ok { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 35%, transparent); }
.cs-big.lv-warn { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--prog) 35%, transparent); }
.cs-big.lv-bad { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rojo) 35%, transparent); }
.cm-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1700px) { .cm-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.cm-grid > .card { margin: 0; }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cm-head h2 { margin: 0; }
.cm-periods { margin-top: 0; flex-wrap: wrap; }
.cs-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.cs-tools .cm-count { margin: 0; }
.cs-sort { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gris); white-space: nowrap; }
.cs-sort select { height: 36px; }
.cs-tbl { width: 100%; }
.cs-tbl thead th { white-space: nowrap; vertical-align: bottom; }
.cs-tbl th.cs-total, .cs-tbl td.cs-total, .cs-tbl th.cs-a, .cs-tbl td.cs-a { text-align: center; width: 1%; padding-left: 6px; padding-right: 6px; }
.cs-sort-b { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 8px; background: none;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.cs-sort-b:hover { background: var(--hueso); color: var(--tinta); }
.cs-sort-b.on { color: var(--tinta); }
.cs-arrow { display: inline-block; min-width: .7em; font-size: 12px; color: var(--oro-o); }
.cs-row { cursor: pointer; }
.cs-row:hover > *, .cs-row:focus-visible > * { background: #FBF7EC; }
.cs-row:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.cs-row.is-me > * { background: #FBF7EC; }
.cs-tbl .cs-weak { font-size: 13.5px; color: var(--gris); min-width: 190px; }
.cm-side h2 { margin-top: 0; }
.cs-how { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--gris); }
.cs-how li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; align-content: start; }
.cs-how li b { color: var(--tinta); }
.cs-how li .cs-w { justify-self: end; font-weight: 700; color: var(--oro-o); font-variant-numeric: tabular-nums; }
.cs-how li > span:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) and (max-width: 1699px) { .cs-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; } }
.cm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
/* "Tu compromiso": la línea de Defensa y la tarjeta de Hoy. */
.my-commit .cmy-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmy-acc { font-weight: 700; }
.cmy-a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gris); }
.cmy-a .cs-pill { min-width: 34px; height: 22px; font-size: 12px; }
.cmy-hint { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--gris); }
.cmy-more { font-size: 13.5px; }
.hoy-commit h2 small { margin-left: 8px; font: 500 12.5px var(--font-texto); color: var(--gris); }
.cmy { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0 2px; }
.cmy + .cmy { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 10px; }
.cmy-body { display: grid; gap: 8px; min-width: 0; }
.cmy-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px 14px; }
.cmy-areas .cmy-a { justify-content: space-between; }
.cmy-body .cmy-more { justify-self: start; }
/* Detalle de una cuenta. */
.cs-dlg { width: min(760px, calc(100vw - 24px)); }
.cs-dh { display: flex; align-items: center; gap: 12px; }
.cs-dsub { margin: 0 0 4px; }
.cs-area { padding: 14px 0 4px; border-top: 1px solid var(--linea); }
.cs-area h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.cs-area h3 small { font: 500 12.5px var(--font-texto); }
.cs-area.is-none h3 { color: var(--gris); }
.cs-line { margin: 0 0 8px; font-size: 14px; }
.cs-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; }
.cs-it { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px dashed var(--linea); }
.cs-it:first-child { border-top: 0; }
.cs-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; }
.cs-it.is-ok .cs-ic { background: var(--ok-bg); color: var(--ok); }
.cs-it.is-no .cs-ic { background: var(--rojo-bg); color: var(--rojo); }
.cs-what { display: grid; gap: 2px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; justify-items: start; }
.cs-what > span { display: inline; }
.cs-what small { font-size: 12.5px; color: var(--gris); }
.cs-it.is-no .cs-what small { color: var(--rojo); }
.cs-kind { display: inline-flex; height: 18px; align-items: center; padding: 0 6px; border-radius: 6px; background: var(--hueso); color: var(--gris); font-size: 11px; font-weight: 700; }
.cs-when { text-align: right; font-size: 13px; }
@media (max-width: 760px) {
  .cs-sort { display: inline-flex; }
}
@media (max-width: 640px) {
  .cm-periods { display: flex; width: 100%; border-radius: 18px; }
  .cm-periods button { flex: 1 1 auto; }
  /* Celular: cada cuenta es una tarjeta: nombre y puntaje grande arriba, las 6 áreas en 3 × 2 con su nombre, y lo más flojo abajo. */
  .cs-wrap { overflow: visible; border: 0; }
  .cs-tbl, .cs-tbl tbody { display: block; }
  .cs-tbl thead { display: none; }
  .cs-tbl tr.cs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; margin: 0 0 10px;
    border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
  .cs-tbl tr.cs-row > * { display: block; padding: 0; border: 0; background: none; }
  .cs-tbl .cs-row:hover > *, .cs-tbl .cs-row.is-me > * { background: none; }
  .cs-tbl tr.cs-row.is-me { background: #FBF7EC; }
  .cs-tbl .who-cell { grid-column: 1; align-self: center; }
  .cs-tbl td.cs-total { grid-column: 2; justify-self: end; width: auto; }
  .cs-tbl td.cs-a { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: auto; padding: 6px 8px; border-radius: 10px; background: var(--hueso); text-align: left; }
  .cs-tbl td.cs-a::before { content: attr(data-label); font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-tbl td.cs-a .cs-pill { min-width: 34px; height: 22px; background-clip: padding-box; }
  .cs-tbl td.cs-a .cs-pill.lv-none { background: var(--papel); }
  .cs-tbl .cs-weak { grid-column: 1 / -1; min-width: 0; }
  .cs-it { grid-template-columns: 22px minmax(0, 1fr); }
  .cs-when { grid-column: 2; text-align: left; }
}
.badge.st-archived { display: inline-flex; align-items: center; gap: 4px; background: var(--noche); color: var(--crema); }
.archived-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.archived-list > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.archived-list[open] > summary { margin-bottom: 12px; }
.archived-list .call { box-shadow: none; border: 1px solid var(--linea); }
.more-calls { margin-top: 4px; }
.missed-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.missed-list li { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 12px; border-radius: var(--r-s); background: var(--hueso); }
.missed-list.counts li { background: var(--rojo-bg); }
.missed-list li small { font-size: 12px; }
.call.is-archived .row-actions { align-items: center; }

/* Crear alianza (03/11, una alianza por servidor): servidor del juego, etiqueta y cuenta en ESE servidor. */
.create-form .cr-link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.create-form .cr-link label { flex: 1 1 280px; }
.create-form .cr-link small { flex-basis: 100%; }
.create-form #cr-note:empty { display: none; }
.create-form small.muted { font-weight: 400; }
.cr-go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-head h2 { margin: 0; }
.grid-form.create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.card.card-fit { max-width: 920px; }
@media (max-width: 640px) { .grid-form.create-form { grid-template-columns: minmax(0, 1fr); } }
.sw-links { flex-wrap: wrap; }
.sw-links .sw-new-al { flex-basis: 100%; color: var(--oro); font-weight: 700; }
.join-conflict { margin-bottom: 12px; }

/* ===== ORDEN UX (03/11, Santi: "a veces parece un laberinto") =====
   Grupo: tarjeta de la alianza arriba, secciones a la izquierda (≥ 1100 px) o en mosaico (celular), cada sección con su línea. */
.g-page { display: flex; flex-direction: column; gap: 20px; }
.g-page > .card { margin: 0; }
.g-sum { display: grid; gap: 16px; }
.g-sum-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-sum-crest { flex: none; display: grid; place-items: center; width: 60px; height: 64px; border-radius: 14px; background: var(--hueso); }
.g-sum-crest:empty { display: none; }
.g-sum-crest svg { width: 44px; height: 50px; }
.g-sum-t { flex: 1 1 260px; min-width: 0; }
.g-sum-t h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 2px; overflow-wrap: anywhere; }
.g-sum-t .sub { margin: 0; color: var(--gris); font-size: 1rem; }
.g-sum-act { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.g-facts > div { padding: 10px 14px; border-radius: var(--r-s); background: var(--hueso); min-width: 0; }
.g-facts dt { font-size: 12.5px; font-weight: 600; color: var(--gris); margin: 0 0 2px; }
.g-facts dd { margin: 0; font-size: 14.5px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.g-facts dd b { font: 800 1.15rem var(--font-titulo); }
.g-facts .data-state { margin: 0; font-size: 14px; }
.g-facts .linkish { font-weight: 700; }
.g-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gris-c); flex: none; }
.g-dot.on { background: #4E9A5B; box-shadow: 0 0 0 3px var(--ok-bg); }
.g-fix { margin-left: 4px; }
.g-todo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 10px 10px 14px; border-radius: var(--r-s); background: var(--rojo-bg); color: var(--rojo); font-weight: 700; }
.g-todo > span { flex: 1; min-width: 0; }
.g-todo .btn { flex: none; }
.g-sum .panel-note { margin: 0; }
.g-layout { display: grid; gap: 16px; align-items: start; }
.g-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.g-nav button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--papel);
  font: 700 14px var(--font-texto); color: var(--tinta); text-align: left; cursor: pointer; }
.g-nav button:hover { border-color: var(--linea-f); }
.g-nav button.active { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.g-nav-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--hueso); color: var(--oro-o); }
.g-nav button.active .g-nav-ic { background: rgba(241, 226, 192, .12); color: var(--oro); }
.g-nav-t { flex: 1; min-width: 0; line-height: 1.25; }
.g-nav .tab-bd { flex: none; }
@media (min-width: 1100px) {
  .g-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .g-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 92px; }
  .g-nav button { min-height: 48px; border-color: transparent; background: none; }
  .g-nav button:hover { background: #fff; border-color: transparent; }
  .g-nav button.active { background: var(--noche); }
}
.g-panel { margin: 0; min-width: 0; container-type: inline-size; }
.g-sec-head { margin-bottom: 4px; }
.g-sec-head h2 { margin: 0 0 4px; font: 800 1.45rem var(--font-titulo); letter-spacing: -.015em; }
.g-sec-head .sub { margin: 0; color: var(--gris); font-size: 15px; }
.g-subtabs { margin: 16px 0 0; }
.g-panel .tab-panel { margin-top: 16px; }
.g-panel .tab-panel > p.small.muted:first-child { margin-top: 0; }
.g-block { padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--papel); min-width: 0; scroll-margin-top: 88px; }
.g-block + .g-block { margin-top: 16px; }
.g-block > h3 { margin: 0 0 10px; font: 700 1.08rem var(--font-titulo); }
.g-block .dc-box { margin-top: 0; }
.g-server { margin-top: 20px; }
.g-ro { margin: 0; }
.g-ro-cols { display: grid; gap: 16px; }
.g-ro-cols .g-block + .g-block { margin-top: 0; }
@container (min-width: 760px) { .g-ro-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.g-ro-st { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.g-ro-crest { display: flex; align-items: center; gap: 16px; }
.g-ro-crest svg { flex: none; }
.g-ro-crest p { margin: 0; }
.preset-card.is-mine { box-shadow: inset 0 0 0 2px var(--oro); }
.g-myperms { margin-top: 16px; }
.g-perm-list { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.g-perm-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; }
.g-perm-list .ic { color: var(--ok); margin-top: 3px; }
/* Dentro de la sección (más angosta que la página) las columnas se deciden por el ancho de la tarjeta, no de la ventana. */
.g-panel .st-cols { grid-template-columns: minmax(0, 1fr); }
.g-panel .sv-cols { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) { .g-panel .sv-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.g-panel .dc-cols { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 820px) { .g-panel .dc-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } /* 04/11: 12 casillas = columna larga; la caja de Discord no se estira vacía */
.g-panel .ban-wrap { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 700px) { .g-panel .ban-wrap { grid-template-columns: minmax(0, 1fr) 220px; } }
.g-panel .st-sub { display: none; } /* la línea de la sección ya lo explica */
/* Sin alianza: dos caminos lado a lado (¿Te invitaron? · ¿Sos el primero?) */
.g-start-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.g-start-head h1 { flex: 1 1 100%; margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.g-start-head .sub { flex: 1 1 320px; margin: 0; color: var(--gris); font-size: 1rem; }
.g-start { display: grid; gap: 20px; align-items: start; }
.g-start > .card { margin: 0; }
@media (min-width: 1100px) { .g-start { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); max-width: 1240px; } .g-start.g-start-solo { grid-template-columns: minmax(0, 920px); } }
.g-start-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--oro-c); color: var(--oro-o); margin-bottom: 10px; }
.g-start h2 { margin: 0 0 6px; font: 800 1.25rem var(--font-titulo); }
.g-start-join p { margin: 0 0 8px; }
.g-start-create > p.small { margin: 0 0 14px; }
.g-part { scroll-margin-top: 88px; min-width: 0; }
.g-part + .g-part, .g-panel #seasons-tab + .g-part { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); }
.g-part-h { margin: 0 0 12px; font: 700 1.15rem var(--font-titulo); }
.g-part-first .dc-box { margin-top: 0; }
.g-panel .sv-add { margin-top: 14px; }
.g-panel .sv-add[open] > summary { margin-bottom: 8px; }
.g-facts .data-state { display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .g-sum-act { width: 100%; justify-content: center; }
  .g-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .g-facts > div { padding: 8px 12px; }
  .g-todo { flex-wrap: wrap; } .g-todo > span { flex-basis: calc(100% - 30px); }
  .g-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-nav button { padding: 8px 10px; gap: 8px; font-size: 13.5px; }
  .g-nav-ic { width: 28px; height: 28px; }
  .g-sec-head h2 { font-size: 1.3rem; }
}

/* Mis ajustes (orden UX 03/11): cabecera como las páginas nuevas, una tarjeta por tema con ícono, filas "qué es · el control". */
.set-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.set-head .sub { margin: 0; color: var(--gris); font-size: 1rem; }
.set-sec { scroll-margin-top: 88px; }
.set-sec > .sec-head { gap: 6px 12px; }
.set-sec > .sec-head h2 { margin: 0; font: 800 1.3rem var(--font-titulo); letter-spacing: -.01em; }
.set-ic { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hueso); color: var(--oro-o); }
.set-ic.is-danger { background: var(--rojo-bg); color: var(--rojo); }
.set-ic [data-ic], .set-ic .ic { display: inline-flex; }
.set-sec > .sub { margin: 8px 0 6px; color: var(--gris); font-size: 14.5px; }
.set-rows { display: flex; flex-direction: column; margin: 0; }
.set-row { display: grid; gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--linea); align-items: center; margin: 0; }
@media (min-width: 760px) { .set-row { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); } }
.set-l { min-width: 0; }
.set-l b { display: block; font-weight: 700; font-size: 15px; }
.set-l small { display: block; margin-top: 2px; color: var(--gris); font-size: 13px; line-height: 1.45; }
.set-c { min-width: 0; }
.set-c fieldset.mode { margin: 0; padding: 0; border: 0; min-width: 0; }
.set-field { display: block; max-width: 420px; margin: 0; }
.set-field input:not([type=range]), .set-field select { width: 100%; }
.set-field input[type=range] { width: 100%; max-width: 320px; }
.set-c .snd-row { grid-template-columns: minmax(0, 220px) minmax(0, 240px) max-content; }
.set-c .snd-row:last-child { border-bottom: 0; }
.set-c .snd-row-solo { grid-template-columns: minmax(0, 300px) max-content; padding: 0; border: 0; }
.set-row-wide { align-items: start; }
.set-acts { padding: 14px 0 0; border-top: 1px solid var(--linea); align-items: center; }
.set-acts [data-ic] { display: inline-flex; }
.set-sec .toggle { padding: 14px 0; font-size: 15px; }
.set-sec .toggle > span { min-width: 0; }
.set-sub { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--linea); scroll-margin-top: 88px; }
.set-sub > .sec-head h3 { margin: 0; font: 700 1.12rem var(--font-titulo); }
.set-sub > p.small { margin: 4px 0 6px; }
.set-num { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--gris); }
.set-num input { width: 84px; text-align: center; }
.set-more { margin-top: 4px; border-top: 1px solid var(--linea); padding-top: 12px; }
.set-more[open] > summary { margin-bottom: 4px; }
.set-more .set-row:first-of-type { border-top: 0; }
.set-foot { margin: 14px 0 0; }
.set-langs .chip { cursor: pointer; font: inherit; font-weight: 600; }
.set-langs .chip.on { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.set-toc a { display: flex; align-items: center; gap: 10px; }
.set-toc a [data-ic], .set-toc a .ic { display: inline-flex; color: var(--gris-c); }
.set-toc a.toc-sub { padding-left: 38px; font-size: 13px; font-weight: 500; }
.set-toc a.on { background: #fff; color: var(--tinta); }
.set-toc a.on [data-ic] { color: var(--oro-o); }
.set-toc a.toc-danger [data-ic] { color: var(--rojo); }
.danger-zone .inline-form { margin-top: 10px; }
@media (max-width: 640px) { .set-c .snd-row { grid-template-columns: minmax(0, 1fr) auto; } .set-c .snd-row span { grid-column: 1 / -1; } }

/* Hoy (orden UX 03/11): "Tu alianza" = el estado de un vistazo (con "Tu compromiso" y los otros servidores adentro); sin alianza, "Empezá acá". */
.hoy-ally h2 { margin-bottom: 8px; }
.ha-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ha-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); min-width: 0; }
.ha-row:first-child { border-top: 0; padding-top: 4px; }
.ha-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--hueso); color: var(--oro-o); }
.ha-row.ha-warn .ha-ic { background: var(--prog-bg); color: var(--prog); }
.ha-row.ha-bad .ha-ic { background: var(--rojo-bg); color: var(--rojo); }
.ha-row.ha-bad b { color: var(--rojo); }
.ha-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ha-t b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; overflow-wrap: anywhere; }
.ha-t small { color: var(--gris); font-size: 13px; line-height: 1.4; }
.ha-t .punto { margin-right: 0; }
.ha-go { flex: none; font: 700 13px var(--font-texto); color: var(--oro-o); white-space: nowrap; }
.ha-go:hover { color: var(--tinta); }
.hoy-ally > .hoy-commit, .hoy-ally > .hoy-else { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.hoy-ally > .hoy-commit h2, .hoy-ally > .hoy-else h3 { margin: 0 0 10px; font: 700 1rem var(--font-titulo); }
.hoy-ally > .hoy-else:first-of-type:is(:nth-child(3)) { margin-top: 12px; }
.hoy-ally > h2[hidden] + .ha-rows:empty + .hoy-else { margin-top: 0; padding-top: 0; border-top: 0; }
.hoy-start { padding: 26px 28px; }
.hoy-start h2 { font-size: 1.45rem; }
.steps-lead { margin: 2px 0 10px; color: var(--gris); }
.hoy-start .steps { gap: 10px; }
.hoy-start .st { padding: 16px 18px; font-size: 15.5px; font-weight: 600; background: var(--papel); border: 1px solid var(--linea); }
.hoy-start .st i { width: 30px; height: 30px; flex-basis: 30px; border-color: var(--oro); color: var(--oro-o); font: 800 14px var(--font-titulo); font-style: normal; }
.hoy-start .st.ok i { color: #fff; }
.hoy-start .st a.btn { color: var(--noche); padding: 0 16px; font-size: 14px; }
.st-wait { margin-left: auto; color: var(--gris-c); font-size: 13px; white-space: nowrap; }
.hoy-new { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
@media (max-width: 900px) { .hoy-new { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hoy-start { padding: 20px 16px; } .hoy-start .st { flex-wrap: wrap; } .hoy-start .st > span { flex: 1 1 200px; } }
.hoy-start .st a.btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--oro); color: var(--noche); font: 700 14px var(--font-texto); }
.hoy-start .st a.btn:hover { background: var(--oro-o); color: var(--noche); }

/* Orden UX: "Nueva llamada", "Nuevo empuje", "Nueva lista de fakes" plegados se ven como LA acción principal de la página
   (botón dorado "+", como "+ Nueva votación"); abiertos, vuelven a ser la caja con el formulario. */
details.create-fold:not([open]) { border: 0; background: none; padding: 0; margin: 6px 0 0; box-shadow: none; }
details.create-fold:not([open]) > summary { display: inline-flex; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--oro); color: var(--noche); font-size: 15px; }
details.create-fold:not([open]) > summary:hover { background: var(--oro-o); }
details.create-fold:not([open]) > summary::before { background: var(--noche); transform: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

/* -- COMPROMISO V2 (03/11, Santi: "el compromiso es estar disponible y ofrecer"). "Lo vi, no puedo" en Defensa y Empujes, "No pude mandarlo"
   en Mis órdenes (panel plegado con el motivo opcional), la respuesta "no puede · motivo", "Todavía pocos datos" en lugar del puntaje y la
   página propia commitment.php (tabla para Líder/Oficial; tus cuentas con su detalle para los demás). -- */
.respond-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cant-box { margin: -2px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--hueso); display: grid; gap: 10px; max-width: 760px; }
.cant-box p { margin: 0; }
.cant-box .row-actions { margin: 0; }
.cant-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cant-why .lbl { margin-right: 4px; font: 700 12.5px var(--font-texto); color: var(--gris); }
.chip-s[aria-pressed="true"] { background: var(--noche); color: var(--crema); border-color: var(--noche); }
.badge.st-cant { background: #EEEAE0; color: var(--tinta); font-weight: 600; white-space: normal; max-width: 100%; height: auto; min-height: 22px; padding-top: 3px; padding-bottom: 3px; line-height: 1.25; }
.resp-tbl tr.is-cant td, .push-sends tr.is-cant td { color: var(--gris); }
.resp-tbl .cell-act { white-space: nowrap; }
.ord-conf.is-cant { background: var(--hueso); color: var(--tinta); }
.ord .cant-box { margin: 10px 0 0; }
/* "Todavía pocos datos": gris, en el lugar del puntaje grande (sin número que confunda). */
.cs-few { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--hueso);
  color: var(--gris); font: 600 12.5px/1.2 var(--font-texto); text-align: center; max-width: 140px; }
.cs-tbl td.cs-total .cs-few { min-width: 108px; }
.cmy-line .cs-few, .my-commit .cs-few { min-height: 28px; max-width: none; white-space: nowrap; }
.my-commit .cmy-more { white-space: nowrap; }
.cs-how-intro { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--oro); border-radius: 0 10px 10px 0; background: #FBF7EC; font-size: 14.5px; line-height: 1.45; color: var(--tinta); }
.cm-head h1 { margin: 0; }
/* Página Compromiso del miembro: cabecera, tus cuentas a la izquierda y "Cómo se cuenta" a la derecha desde 1100 px. */
.cm-page > .card, .cm-page .cm-grid { margin-top: 0; }
.cm-top { margin-bottom: 20px; }
.cm-top .sub { margin-bottom: 0; }
.cm-mine-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .cm-mine-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.cm-mine-grid > .card, .cm-accts > .card { margin: 0; }
.cm-accts { display: grid; gap: 20px; min-width: 0; }
.cm-mine-grid .cs-how { grid-template-columns: none; }
.cm-acct-h { display: flex; align-items: center; gap: 14px; }
.cm-acct-h h2 { margin: 0; }
.cm-acct-n { display: grid; gap: 2px; min-width: 0; }
.cm-up { display: grid; gap: 2px; margin: 14px 0 6px; padding: 10px 12px; border-radius: 10px; background: #FBF7EC; font-size: 14px; }
.cm-up b { font-size: 13px; color: var(--oro-o); }
.cm-acct .cs-dsub { margin: 10px 0 0; }
/* Áreas sin datos: una línea cada una (nombre, "—", peso y por qué no cuenta), juntas al final. */
.cs-area.is-none { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; }
.cs-area.is-none + .cs-area.is-none { border-top: 1px dashed var(--linea); }
.cs-area.is-none h3 { margin: 0; font-size: 14px; }
.cs-area.is-none h3 .cs-pill { height: 20px; min-width: 32px; font-size: 11.5px; }
.cs-area.is-none p { margin: 0; font-size: 13px; }
.cm-acct-h .cs-few, .cs-dh .cs-few { max-width: none; white-space: nowrap; }
.cm-head + .sub { margin-top: 10px; }
@media (max-width: 640px) {
  .cm-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .cm-periods button { min-width: 0; padding: 6px 4px; font-size: 12.5px; line-height: 1.2; white-space: normal; }
}
/* Las áreas sin datos, juntas al final: en 2 columnas cuando hay ancho (Compromiso del miembro y el diálogo). */
.cs-nones { border-top: 1px solid var(--linea); }
.cs-nones .cs-area.is-none:first-child { border-top: 0; }
@container (min-width: 820px) { .cs-nones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .cs-nones .cs-area.is-none { border-top: 1px dashed var(--linea); } .cs-nones .cs-area.is-none:nth-child(-n+2) { border-top: 0; } }
.cm-acct { container-type: inline-size; }
/* ================= Nada se sale de su caja (03/11, lo que encontró browser_ux3 en es/en/lt) ================= */
/* Botones segmentados: nunca más anchos que su lugar; en el celular el texto largo ("Tam tikru laiku") baja de renglón DENTRO del botón. */
.seg { max-width: 100%; }
.seg > button { min-width: 0; }
@media (max-width: 480px) {
  .al-when > .seg button, .pg-alarmas .al-when > .seg button { flex: 1 1 auto; white-space: normal; line-height: 1.15; height: auto; min-height: 36px; padding: 4px 8px; text-align: center; }
}
/* "Ver tiempos": la flechita girada entra en su botón. */
.calc-more > summary { padding-right: 3px; }
/* Compromiso y respuestas de Defensa a 1280 (los encontró browser_ux: la tabla no entraba y "Lo más flojo" / "Quitar" quedaban cortados):
   los encabezados se parten entre palabras ("Tropas al / día") y los botones de una respuesta bajan de renglón si no entran. */
.cs-tbl thead th { white-space: normal; }
.cs-tbl thead th .sort-btn, .cs-tbl thead th button { white-space: normal; text-align: inherit; }
.cs-tbl .cs-weak { min-width: 140px; }
.resp-tbl .cell-act { white-space: normal; min-width: 232px; }
.resp-tbl .cell-act .btn { margin-top: 3px; margin-bottom: 3px; }

/* ================= CAMPANITA (03/11): avisos en la barra de arriba (bell.js, src/Notify.php) ================= */
.topbar .menu-group.bell { position: relative; flex: none; }
.topbar .menu-group.bell > summary { width: 38px; padding: 0; justify-content: center; position: relative; color: var(--gris); }
.topbar .menu-group.bell > summary::after { display: none; }
.topbar .menu-group.bell > summary:hover, .topbar .menu-group.bell[open] > summary { color: var(--tinta); }
.bell-bd { position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--rojo); color: #fff;
  font: 700 11px/19px var(--font-texto); text-align: center; box-shadow: 0 0 0 2px var(--papel); }
.bell-bd[hidden] { display: none; }
.menu-panel.bell-pop { left: auto; right: 0; width: 400px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; gap: 0; }
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--linea); }
.bp-head b { font: 700 15px var(--font-texto); }
.bp-list { max-height: min(520px, calc(100vh - 190px)); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 6px; }
.bp-g { margin: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.menu-panel a.bp-it { display: grid; grid-template-columns: 32px minmax(0, 1fr) 10px; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; }
.menu-panel a.bp-it:hover { background: var(--hueso); }
.bp-it.unread { background: rgba(201, 163, 90, .09); }
.bp-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hueso); color: var(--gris); flex: none; }
.bp-ic.tone-bad { background: var(--rojo-bg, #f7e3e1); color: var(--rojo); }
.bp-ic.tone-gold { background: rgba(201, 163, 90, .2); color: #7a5a1c; }
.bp-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-msg { font-size: 13.5px; line-height: 1.35; color: var(--tinta); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bp-it.unread .bp-msg { font-weight: 600; }
.bp-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--gris); }
.bp-srv { padding: 0 7px; border-radius: 999px; background: var(--noche); color: var(--crema); font-size: 11px; font-weight: 700; line-height: 18px; }
.bp-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--rojo); }
.bp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--gris); font-size: 13.5px; }
.bp-empty p { margin: 0; }
.menu-panel a.bp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linea); border-radius: 0; font-size: 13px; color: var(--gris); }
.menu-panel a.bp-foot:hover { background: var(--hueso); color: var(--tinta); }
@media (max-width: 760px) {
  /* En el celular: compacta (36 px) y el panel ocupa el ancho, debajo de la barra. */
  .topbar .menu-group.bell > summary { width: 36px; height: 36px; }
  .menu-panel.bell-pop { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-width: none; }
  .bp-list { max-height: calc(100vh - 200px); }
}
/* Mis ajustes → Avisos → Campanita: una llave por tipo (dos columnas si hay lugar). */
.bell-kinds { display: grid; column-gap: 32px; container-type: inline-size; }
@media (min-width: 1000px) { .bell-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-sec .toggle.bell-k { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.bell-k > span { display: flex; flex-direction: column; gap: 2px; }
.bell-k b { font-size: 14.5px; }
.bell-k small { color: var(--gris); font-size: 12.5px; line-height: 1.4; font-weight: 400; }
@media (max-width: 420px) {
  /* Con la campanita: un poco menos de aire para que el título de la página siga entrando. */
  .topbar { gap: 6px; }
  .topbar .clock-chip { padding: 0 9px; }
  .topbar .menu-group.bell > summary { width: 34px; height: 34px; }
}

/* ================= Terminar temporada sin miedo (03/11): diálogo, registro en la tarjeta y "Quién puede" ================= */
.st-log { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.st-log li { display: flex; align-items: flex-start; gap: 6px; }
.st-log li svg { flex: none; margin-top: 2px; }
.st-log .st-until { color: var(--prog); font-weight: 600; }
#st-msg-top { margin: 0 0 14px; }
.st-end-dlg { width: min(560px, calc(100vw - 32px)); }
.st-end-dlg .sheet-inner { display: flex; flex-direction: column; gap: 14px; }
.st-live { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--rojo-bg); color: var(--rojo); font-weight: 700; font-size: 14px; }
.st-live svg { flex: none; margin-top: 1px; }
.st-end-h { margin: 0; font-weight: 700; }
.st-end-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.st-end-list li { display: flex; gap: 10px; align-items: flex-start; }
.st-end-list li svg { flex: none; margin-top: 2px; color: var(--oro-o); }
.st-type input { font: 700 16px var(--font-texto); letter-spacing: .02em; }
.st-end-acts { justify-content: flex-end; }
.st-who { margin-top: 0; }
.st-who .sec-head { display: flex; align-items: center; gap: 10px; }
.st-who .sec-head h3 { margin: 0; }
.st-who-list { display: grid; column-gap: 32px; }
@media (min-width: 900px) { .st-who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-who-k { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.st-who-k > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-who-k small { color: var(--gris); font-size: 12.5px; }
.st-who-ro { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; }
/* Grupo → Rangos y permisos → Registro (dueño y Líderes) */
.glog { list-style: none; margin: 8px 0 0; padding: 0; }
.glog li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; align-items: baseline; }
.glog li:first-child { border-top: 0; }
.glog .gl-when { color: var(--gris); font-size: 12.5px; white-space: nowrap; }
.glog .gl-srv { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--hueso); font-size: 11.5px; font-weight: 700; color: var(--gris); }
@media (max-width: 640px) { .glog li { grid-template-columns: minmax(0, 1fr); } }
.st-who .sec-head { margin-bottom: 4px; }
.st-who > p.small { margin: 0 0 6px; }
/* Rol único (03/11): etiqueta del rol en Miembros (ícono + nombre en una línea) y el selector por cuenta en Mis ajustes */
.role-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.role-tag .ricon { flex: none; }
.set-roles { display: flex; flex-direction: column; gap: 10px; }
.set-role-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.set-role-acc { min-width: 90px; }

/* ================= Limpiar un oasis (03/11, tools.php?t=oasisraid, assets/oasisraid.js) ================= */
/* A la izquierda los 2 pasos (animales y tropas); desde 1100 px el resultado y la mejor combinación a la derecha, fijos al bajar. */
.or-grid { display: grid; gap: 24px; margin-top: 18px; }
.or-in, .or-side { display: grid; gap: 22px; min-width: 0; align-content: start; }
@media (min-width: 1100px) {
  .or-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 36px; align-items: start; }
  .or-side { position: sticky; top: 90px; }
}
.or-step { min-width: 0; }
.or-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.15rem/1.25 var(--font-titulo); }
.or-paste { display: block; width: 100%; min-height: 72px; resize: vertical; }
.or-row { margin: 10px 0 0; }
#or-paste-msg:not(:empty) { margin-top: 10px; }
#or-paste-msg p { margin: 0; }
.ok-line { color: var(--ok); font-weight: 700; }
.or-h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; font-weight: 700; }
.or-animals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 8px; }
.or-ani { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 6px 8px;
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; min-width: 0; }
.or-ani input { grid-column: 1 / -1; width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.or-an { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.or-emo { flex: none; width: 28px; height: 28px; line-height: 0; }
.or-emo .uicon { width: 28px; height: 28px; display: block; }
.or-pick { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 12px; }
.or-pick label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.or-pick select { width: 100%; }
.or-tbl { width: 100%; }
.or-tbl th[scope=row] { font-weight: 600; }
.or-tbl input { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.or-tbl input.or-lv { width: 4rem; }
.or-u { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.or-u .uicon { flex: none; }
.or-have { font-variant-numeric: tabular-nums; }
.or-note { margin: 8px 0 0; }
.or-card { min-width: 0; padding: 16px 18px; border-radius: var(--r-s, 12px); background: var(--hueso); }
.or-card .empty-act { padding: 10px 0; }
.or-vs { margin: 0 0 8px; font: 700 1.05rem/1.3 var(--font-titulo); }
.or-vs b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.or-verdict { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border-left: 4px solid var(--oro); color: var(--tinta); font-weight: 700; line-height: 1.4; }
.or-verdict.up { color: var(--tinta); border-left-color: var(--ok); }
.or-verdict.down { color: var(--tinta); border-left-color: var(--rojo); }
.or-card .table-wrap { margin: 0 0 10px; }
.or-res { width: 100%; background: #fff; }
.or-res td small { font-weight: 400; }
.or-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.or-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #fff; }
.or-facts li span { min-width: 0; color: var(--gris); font-size: 14px; line-height: 1.35; }
.or-facts li b { flex: none; max-width: 60%; text-align: right; font-variant-numeric: tabular-nums; }
.or-check { margin: 10px 0 0; }
.or-sgs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.or-sg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.or-sg-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.or-sg-b span { font-size: 14px; }
.or-sg .btn { flex: none; }
.or-how ul { margin: 8px 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.45; }
/* Celular: cada tropa es una tarjeta (nombre arriba; Tenés · Mandás · Herrería en 3 columnas con su nombre encima). */
@media (max-width: 640px) {
  .or-tbl.stack tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; margin: 0 0 8px; }
  .or-tbl.stack th[scope=row] { grid-column: 1 / -1; padding: 0 0 6px; }
  .or-tbl.stack td { padding: 0; display: flex; flex-direction: column; gap: 4px; justify-content: flex-start; }
  .or-tbl.stack td[data-label]::before { float: none; width: auto; margin: 0; }
  .or-tbl.stack td input, .or-tbl.stack td input.or-lv { width: 100%; }
  .or-tbl.stack .or-have { padding: 8px 0; font-weight: 700; }
  .or-card { padding: 14px 12px; }
  .or-res th, .or-res td { padding-left: 6px; padding-right: 6px; }
  .or-res .uicon { display: none; }
  .or-res thead th { font-size: 11px; }
  .or-sg { flex-wrap: wrap; }
  .or-sg-b { flex: 1 1 calc(100% - 40px); }
  .or-sg .btn { margin-left: 34px; }
  .or-facts li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .or-facts li b { max-width: none; text-align: left; }
}

/* Qué es gratis y qué es Premium (04/11): dos columnas parejas (una debajo de la otra en el celular). */
.pr-inc h2 { margin: 0 0 14px; font: 800 1.35rem var(--font-titulo); letter-spacing: -.01em; }
.pr-inc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px; }
.pr-inc-col { border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 18px; background: #fff; min-width: 0; }
.pr-inc-prem { border-color: rgba(201, 163, 90, .55); background: #fffaf0; }
.pr-inc-col h3 { margin: 0 0 10px; font: 700 1.05rem var(--font-titulo); display: flex; align-items: center; gap: 6px; }
.pr-inc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-inc-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; min-width: 0; }
.pr-inc-list li > span:first-child { flex: none; margin-top: 2px; color: var(--ok); }
.pr-inc-prem .pr-inc-list li > span:first-child, .pr-inc-prem h3 > span:first-child { color: var(--oro); }
.pr-inc-note { margin: 12px 0 0; }

/* ================= Premium de verdad (04/11): candados, tarjeta de una herramienta Premium, chip de días y regalos ================= */
.pr-lock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; padding: 14px 16px; border-radius: var(--r-s);
  background: linear-gradient(180deg, #FBF4E2, #F6EBCF); border: 1px solid rgba(201, 163, 90, .45); }
.pr-lock-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--oro); color: var(--tinta); }
.pr-lock-tx { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-lock-tx b { font: 700 1rem var(--font-titulo); color: var(--tinta); overflow-wrap: anywhere; }
.pr-lock-tx p { margin: 0; font-size: 13.5px; color: var(--gris); }
.pr-lock-act { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-lock-act .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .pr-lock { padding: 14px; }
  .pr-lock-act { flex: 1 1 100%; }
  .pr-lock-act .btn { flex: 1 1 auto; width: auto; max-width: 100%; }
}
.pr-lock-big { padding: 20px 22px; gap: 18px; margin-top: 16px; }
.pr-lock-big .pr-lock-ic { width: 52px; height: 52px; }
.pr-lock-big .pr-lock-tx b { font-size: 1.15rem; }
.pr-lock-big .pr-lock-tx p { font-size: 14.5px; }
.pr-lock-trial { display: flex; align-items: center; gap: 6px; color: var(--prog) !important; font-weight: 600; }
.pr-gate { max-width: 860px; }
.pr-gate h1 { margin-bottom: 4px; }
.cm-lock { margin: 14px 0 0; }
.st-new-lock .pr-lock { margin-bottom: 0; }
/* Alarmas gratis: "2 de 3 alarmas gratis" */
.al-free { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 10px; padding: 8px 12px; border-radius: var(--r-s);
  background: var(--hueso); border: 1px solid var(--linea); }
.al-free-n { display: inline-flex; align-items: center; gap: 6px; }
.al-free.is-full { background: var(--prog-bg); border-color: rgba(138, 90, 11, .25); }
.seg-pr { color: var(--oro-o); font-size: 12px; margin-left: 2px; }
/* Insignia de Premium (04/11, como "Travian PLUS · Sigue activo para: 3d 09:53:27"): medalla dorada con corona + "Premium" arriba y la
   cuenta regresiva abajo. > 1440: "Sigue activo para: 29d 23:41:05"; 761–1440: solo "29d 23:41:05"; celular: medalla + "29d". */
.top-prem { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px; white-space: nowrap;
  color: #4A360C; background: linear-gradient(180deg, #FFF8E4 0%, #F4E3B2 100%); border: 1px solid #D2B26A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(90, 60, 10, .12); }
.top-prem:hover { border-color: #B8913F; color: #2E2108; }
.tp-medal { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #FFF4D2;
  background: radial-gradient(circle at 35% 30%, #EBCB7A 0%, #C9A35A 45%, #8C6A28 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .45), 0 0 0 1px #A98234; }
.tp-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.12; min-width: 0; }
.tp-name { font: 800 11px var(--font-texto); letter-spacing: .08em; text-transform: uppercase; color: #8A6420; }
.tp-left { font: 600 12.5px var(--font-texto); color: #4A360C; }
.tp-lbl { font-weight: 500; color: #6B5418; }
.tp-cd { font-weight: 800; font-variant-numeric: tabular-nums; }
.top-prem.is-ending { background: linear-gradient(180deg, #FFF1E6 0%, #F6D9C2 100%); border-color: #C9845A; }
.top-prem.is-ending .tp-name { color: var(--rojo); }
.top-prem.is-ending .tp-cd { color: var(--rojo); }
@media (max-width: 1440px) { .top-prem .tp-lbl { display: none; } }
@media (max-width: 760px) {
  .top-prem { height: 36px; padding: 0 10px 0 3px; gap: 5px; }
  .tp-medal { width: 28px; height: 28px; }
  .tp-name, .top-prem .tp-hms { display: none; }
  .tp-left { font-size: 12px; }
  .top-prem .tp-d[hidden] + .tp-hms { display: inline; }
}
/* Premium: estado de la prueba gratis / regalo */
.pr-st-left { font-weight: 700; color: var(--tinta); }
.pr-st.is-ending .pr-st-left { color: var(--prog); }
/* Desarrollador: dar Premium gratis (a una persona o a cada miembro de una alianza; siempre personal) */
.pr-gr-form { display: grid; grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 12px 0 6px; max-width: 920px; }
.pr-gr-mode, .pr-gr-g { grid-column: 1 / -1; }
.pr-gr-mode { margin: 0; }
.pr-gr-g { max-width: 560px; }
.pr-gr-hint { margin: 2px 0 0; font-weight: 400; }
.pr-gr-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 700; }
.pr-gr-f select, .pr-gr-f input { width: 100%; min-width: 0; }
.pr-gr-h { margin: 18px 0 8px; font-size: 1rem; }
.pr-gr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-gr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.pr-gr-who { display: flex; flex-direction: column; min-width: 0; }
.pr-gr-who b, .pr-gr-who small { overflow-wrap: anywhere; }
.pr-gr-until { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .pr-gr-form { grid-template-columns: 6rem minmax(0, 1fr); }
  .pr-gr-go { grid-column: 1 / -1; }
  .pr-gr-go .btn { width: 100%; }
  .pr-gr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-gr-until { grid-column: 1 / -1; grid-row: 2; }
}
.al-limit { color: var(--prog); font-weight: 600; }
.al-limit .ic { vertical-align: -2px; }

/* ---------- Cartel de cookies (04/11, SOLO con ga4_id: Layout::consentBanner + assets/analytics.js) ----------
   Abajo, en una tarjeta noche. Rechazar y Aceptar del MISMO tamaño y estilo (UE: rechazar tan fácil como aceptar); "Elegir" y
   "Guardar mi elección" con borde. Mientras está abierto, --ck-h (alto del cartel, lo pone analytics.js) sube los flotantes
   (conectados + chat, alarma, reloj de la PC) y deja libre el final de la página: nada queda tapado. */
.ck-bar { position: fixed; z-index: 89; left: 16px; right: 16px; bottom: 16px; max-width: 1040px; margin: 0 auto; background: var(--noche);
  color: var(--crema); border: 1px solid var(--linea-o); border-radius: var(--r); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .5); outline: none; }
.ck-bar[hidden] { display: none; }
.ck-bar:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.ck-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 16px 20px; }
.ck-txt { min-width: 0; }
.ck-txt h2 { margin: 0 0 4px; font: 800 16px/1.2 var(--font-titulo); color: var(--crema); }
.ck-txt p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(241, 226, 192, .82); overflow-wrap: anywhere; }
.ck-txt a { color: var(--oro); text-decoration: underline; text-underline-offset: 2px; }
.ck-txt a:hover { color: var(--crema); }
.ck-pnl { grid-column: 1 / -1; grid-row: 2; display: grid; gap: 8px; }
.ck-pnl[hidden] { display: none; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: var(--r-s); background: rgba(241, 226, 192, .07); cursor: pointer; }
.ck-row-tx { display: grid; gap: 2px; min-width: 0; }
.ck-row b { font-size: 14px; }
.ck-row small { font-size: 13px; color: rgba(241, 226, 192, .7); }
.ck-row input.sw:disabled { cursor: not-allowed; opacity: .7; }
.ck-gpc, .ck-state { margin: 0; font-size: 13px; color: rgba(241, 226, 192, .8); }
.ck-state:empty { display: none; }
.ck-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ck-b { min-width: 128px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--crema); background: var(--crema); color: var(--noche);
  font: 700 14px/1 var(--font-texto); cursor: pointer; white-space: nowrap; }
.ck-b:hover { background: #fff; border-color: #fff; }
.ck-b-alt { background: transparent; color: var(--crema); border-color: rgba(241, 226, 192, .45); }
.ck-b-alt:hover { background: rgba(241, 226, 192, .1); border-color: var(--crema); }
.ck-b:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.ck-b:disabled { opacity: .45; cursor: not-allowed; }
.ck-b[hidden] { display: none; }
@media (min-width: 1101px) { body:has(.shell) .ck-bar { left: calc(272px + 24px); right: 24px; } }
@media (max-width: 900px) { .ck-in { grid-template-columns: minmax(0, 1fr); } .ck-pnl { grid-row: auto; } .ck-btns { justify-content: stretch; }
  .ck-btns .ck-b { flex: 1 1 0; min-width: 0; padding: 0 10px; } }
@media (max-width: 760px) { .ck-bar { left: 8px; right: 8px; bottom: 8px; } .ck-in { padding: 14px 14px; gap: 12px; } }
/* El final de la página queda libre: el pie crece lo que mide el cartel (no el body: así la barra lateral sigue hasta abajo). */
body.ck-open .foot, body.ck-open .foot-app { padding-bottom: calc(var(--ck-h, 0px) + 24px); }
@media (max-width: 900px) { .ck-btns .ck-b[data-ck="save"] { flex-basis: 100%; } }
body.ck-open .online-fab, body.ck-open .alarm-bar, body.ck-open .clock-note { transform: translateY(calc(-1 * var(--ck-h, 0px) - 12px)); }
.foot-ck { padding: 0; margin: 0; border: 0; background: none; font: inherit; color: rgba(241, 226, 192, .75); cursor: pointer; }
.foot-ck:hover { color: var(--crema); }
.foot-ck:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 4px; }
.foot-app .foot-ck { color: var(--gris); }
.foot-app .foot-ck:hover { color: var(--tinta); }
@media print { .ck-bar { display: none; } }
/* Salud → Botón de arrepentimiento (04/11): pedidos sin atender primero. */
@media (max-width: 1099px) { .hl-o5 { order: 3; } }
.hl-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hl-rev-it { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); min-width: 0; }
.hl-rev-it.is-done { opacity: .65; }
.hl-rev-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hl-rev-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-rev-it .btn { justify-self: start; }
/* Crear cuenta (04/11): "Al crear tu cuenta aceptás los Términos y la Privacidad", chico, debajo del botón. */
.auth-legal { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.auth-legal a { color: var(--oro-o); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Botón de arrepentimiento (04/11, arrepentimiento.php + arrepentimiento.js): mismo sistema que las legales. */
.ar-box { margin-top: 8px; }
.ar-form { display: grid; gap: 14px; max-width: 60ch; margin: 0 0 12px; }
.ar-pick { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.ar-pick legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--tinta); }
.ar-o { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--linea-f); border-radius: var(--r-s); background: var(--papel); cursor: pointer; min-width: 0; }
.ar-o:has(input:checked) { border-color: var(--oro); background: #FFFBF1; }
.ar-o input { flex: none; margin: 0; width: 18px; height: 18px; accent-color: var(--oro-o); }
.ar-o-tx { display: grid; gap: 2px; min-width: 0; }
.ar-o-tx small { color: var(--gris); }
.ar-field { display: grid; gap: 6px; font-weight: 700; min-width: 0; }
.ar-field input, .ar-field textarea { width: 100%; font-weight: 400; }
.ar-form .btn { justify-self: start; }
.ar-done { padding: 12px 14px; margin: 0 0 14px; max-width: 60ch; }
.ar-mine-h { margin: 18px 0 8px; font-size: 1rem; }
.legal-sec ul.ar-mine, .ar-mine { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-width: 60ch; }
.ar-mine li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); }

/* ===== Selector de idioma (04/11: 10 idiomas). details#lang-btns.lang-pick: botón con la bandera + código, lista con los 10 en su idioma. ===== */
.idiomas.lang-pick { position: relative; display: block; padding: 0; gap: 0; border: 0; background: none; }
.lang-pick > summary { list-style: none; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 12px; border-radius: 999px; cursor: pointer;
  font: 700 13px var(--font-texto); letter-spacing: .04em; color: var(--crema); background: rgba(241, 226, 192, .07); border: 1px solid var(--linea-o); user-select: none; }
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary:hover { background: rgba(241, 226, 192, .12); }
.lang-pick .lang-cur-f { display: flex; }
.idiomas.lang-pick .lang-chev { width: 14px; height: 14px; opacity: .7; transition: transform .15s; box-shadow: none; border-radius: 0; }
.lang-pick[open] .lang-chev { transform: rotate(180deg); }
.lang-pick .lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 13.5rem; padding: 6px; display: grid; gap: 2px;
  background: var(--noche2); border: 1px solid var(--linea-o); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.lang-pick .lang-list button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; text-align: left; font: 500 14px var(--font-texto); letter-spacing: 0; color: rgba(241, 226, 192, .86); }
.lang-pick .lang-list button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.lang-pick .lang-list button:hover { background: rgba(241, 226, 192, .08); color: var(--crema); }
.lang-pick .lang-list button.active { background: var(--crema); color: var(--tinta); font-weight: 700; }
.lang-pick .lang-nm { flex: 1; min-width: 0; white-space: nowrap; }
.lang-pick .lang-cd { font: 700 11px var(--font-texto); letter-spacing: .06em; opacity: .55; }
.lang-pick svg:not(.lang-chev) { width: 20px; height: 14px; border-radius: 3px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
/* En la barra de arriba de la app (clara). */
.topbar .idiomas.lang-pick { padding: 0; background: none; border: 0; }
.topbar .lang-pick > summary { height: 36px; padding: 0 9px 0 10px; color: var(--tinta); background: #fff; border-color: var(--linea); }
.topbar .lang-pick > summary:hover { background: var(--hueso); }
.topbar .lang-pick .lang-list { background: #fff; border-color: var(--linea); box-shadow: 0 14px 34px rgba(22, 19, 15, .16); }
.topbar .lang-pick .lang-list button { color: var(--tinta); }
.topbar .lang-pick .lang-list button:hover { background: var(--hueso); color: var(--tinta); }
.topbar .lang-pick .lang-list button.active { background: var(--hueso); box-shadow: inset 0 0 0 1px var(--linea-f); }
.topbar .lang-pick svg:not(.lang-chev) { width: 20px; height: 14px; }
@media (max-width: 760px) { .lang-pick .lang-cur-c { display: none; } .lang-pick > summary { padding: 0 8px 0 10px; gap: 5px; } }
.lang-pick.lang-left .lang-list { right: auto; left: 0; }
/* Barra de arriba en el celular (04/11): con la insignia de Premium ("6d") y la cuenta regresiva de lo próximo (raid-mini) no entraba todo
   a 390 px (scroll horizontal y el raid-mini aplastado a 20 px con la hora afuera). Nada se aplasta: el raid-mini queda entero
   (ícono + hora) y lo que sobra se saca en este orden: ≤ 520 la flechita del idioma (queda la bandera) y, con la insignia, la hora del
   raid-mini (queda el ícono, el link y el título con la hora; la cuenta está en Lo próximo); ≤ 440 el idioma (antes del selector nuevo
   ya se ocultaba ≤ 420, pero `.idiomas.lang-pick { display: block }` le ganaba; se cambia en Mis ajustes → Hora e idioma) para que el
   título de la página siga a la vista en los iPhone de 430; ≤ 380 menos aire entre los botones. Probado de 760 a 360 con y sin insignia. */
@media (max-width: 760px) {
  .topbar .raid-mini { flex: none; gap: 5px; padding: 0 10px; }
}
@media (max-width: 520px) {
  .topbar .lang-pick .lang-chev { display: none; }
  .topbar .lang-pick > summary { padding: 0 9px; }
  .topbar:has(.top-prem) .raid-mini { width: 36px; padding: 0; justify-content: center; }
  .topbar:has(.top-prem) .raid-mini b { display: none; }
}
@media (max-width: 440px) { .topbar .idiomas.lang-pick { display: none; } }
@media (max-width: 380px) { .topbar { gap: 4px; } }

/* Sin alianza (04/11): las herramientas de la alianza se ven en gris con candado; tocarlas abre la explicación debajo. */
.side-it.is-locked { opacity: .48; }
.side-it.is-locked:hover { opacity: .75; background: rgba(241, 226, 192, .04); }
.side-it .side-lk { flex: 0 0 13px; opacity: .9; }
.side-lock-note { margin: 2px 6px 6px 40px; padding: 8px 10px; border-radius: 10px; background: rgba(241, 226, 192, .08); border: 1px solid rgba(241, 226, 192, .12);
  color: var(--crema); font-size: 12.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; }
.side-lock-note a { color: var(--oro); font-weight: 700; }
.side-lock-note a:hover { color: var(--crema); }

/* TU CUENTA DEL JUEGO (04/11, Solo.php) y el NICK ESCRITO (THQ.nickPick): un campo con sugerencias propias (sin <datalist>), la línea de
   estado debajo (✓ elegido / "La usa {nombre}" / no está) y la cuenta guardada "✓ Respetan · Galos · ts20" + Cambiar. */
.np { position: relative; min-width: 0; }
.np-box { position: relative; }
.np-in { width: 100%; }
.np-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70; margin: 0; padding: 5px; list-style: none; max-height: 18rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--linea-f); border-radius: var(--r-s); box-shadow: 0 14px 34px -10px rgba(22, 19, 15, .28); }
.np-it { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 9px; cursor: pointer; color: var(--tinta); }
.np-it b { font-weight: 700; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.np-it small { flex: none; color: var(--gris); font-size: 12.5px; font-weight: 500; text-align: right; }
.np-it:hover, .np-it.on { background: var(--hueso); }
.np-st { display: flex; align-items: flex-start; gap: 6px; min-height: 1.3em; margin: 6px 0 0; color: var(--gris); font-size: 13px; font-weight: 500; line-height: 1.4; }
.np-st:empty { display: none; }
.np-st svg { flex: none; margin-top: 1px; }
.np-st.np-ok { color: var(--ok); }
.np-st.np-ok b { color: var(--tinta); }
.np-st.np-warn { padding: 8px 10px; border-radius: 10px; background: var(--prog-bg); color: var(--prog); }
.np-st.np-bad { color: var(--rojo); }
.np-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-field > label { font-size: .84rem; font-weight: 700; color: var(--gris); line-height: 1.3; }
.auth-field.np-field > label { font-size: 13px; color: var(--tinta); margin-bottom: 1px; }
.auth-field.np-field .np-in { height: 50px; border-radius: 12px; padding: 0 16px; font-size: 16px; }
.season-field.np-field > label { color: var(--tinta); font-size: .92rem; }
.req-form { align-items: flex-start; }
.req-form .np-field { flex: 1 1 260px; max-width: 420px; }
.req-form > .btn { margin-top: 26px; }

.solo-acct { min-width: 0; }
.sa-form { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; }
.sa-form > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: .84rem; font-weight: 700; color: var(--gris); }
.sa-form:not(:has(.sa-srv)) { grid-template-columns: minmax(0, 1fr) auto; }
.sa-acts { display: flex; gap: 8px; align-items: center; padding-top: 25px; }
.sa-acts .btn { min-height: 44px; }
.sa-msg { grid-column: 1 / -1; }
.sa-msg:empty { display: none; }
.sa-msg .err { margin: 0; }
.sa-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); }
.sa-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; flex: none; }
.sa-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 10rem; }
.sa-who b { font-size: 15.5px; overflow-wrap: anywhere; color: var(--tinta); }
.sa-who small { color: var(--gris); font-size: 13px; font-weight: 500; }
.sa-done .btn { margin-left: auto; }
.sa-note { margin: 0; color: var(--gris); }
/* DÍA 0 / PENDIENTE DEL MAPA (04/11, src/Pending.php): la cuenta escrita que el mapa todavía no trae (ámbar, con reloj; nunca rojo: no es un error). */
.sa-done.is-pend { background: var(--prog-bg); }
.sa-done.is-pend .sa-ok { background: var(--prog); }
.sa-who .sa-pend { color: var(--prog); font-weight: 600; line-height: 1.45; margin-top: 2px; }
.chip-pend { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--prog-bg);
  color: var(--prog); font: 700 12px/1.3 var(--font-texto); white-space: normal; vertical-align: middle; }
.chip-pend svg { flex: none; }
.map-pend-band { align-items: flex-start; gap: 6px; background: var(--prog-bg); color: var(--prog); font-weight: 600; border-radius: 14px; line-height: 1.45; max-width: 100%; }
.map-pend-band > [data-ic] { flex: none; display: inline-flex; margin-top: 2px; }
.map-pend-note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--prog-bg);
  color: var(--prog); font-size: 13px; font-weight: 600; line-height: 1.45; }
.map-pend-note svg { flex: none; margin-top: 2px; }
.acc-pend { margin: 6px 0 0; max-width: 34rem; color: var(--prog); font-weight: 600; line-height: 1.45; }
.pend-fix { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.pend-fix .np-field { flex: 1 1 220px; max-width: 340px; }
.st-tagfix-btn { align-self: flex-start; justify-self: start; width: auto; margin-top: 8px; }
.st-tagwait + .st-tagfix-btn { margin-top: 6px; }
.st-tagfix { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.st-tagfix label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.st-tagfix input { width: 9rem; }
@media (max-width: 760px) { .sa-form, .sa-form:not(:has(.sa-srv)) { grid-template-columns: minmax(0, 1fr); } .sa-acts { padding-top: 0; } .sa-acts .btn { flex: 1; } }

/* Hoy sin alianza: el paso 1 lleva el formulario adentro; "Entrá a tu alianza" es opcional. */
.st.st-acct { align-items: flex-start; }
.st-acct .st-b { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.st-acct .st-b > small { color: var(--gris); font-weight: 400; font-size: 13.5px; line-height: 1.45; }
.st-acct .solo-acct { margin-top: 10px; font-weight: 400; }
.st-acct.ok span { text-decoration: none; }
.hoy-start .st-acct { margin-top: 12px; }
.hoy-start .st-acct + .steps { margin-top: 10px; }
.st-optional { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--hueso); color: var(--gris); font: 600 11.5px var(--font-texto); font-style: normal; vertical-align: 2px; }
.st.ok .st-optional { display: none; }
/* Recorrido de un usuario nuevo (04/11): cada paso de "Empezá acá" con su línea chica (qué es), "Ya podés usar" con la línea de cada
   herramienta, una banda arriba de la otra con aire, y el chip "Con alianza" de la Guía rápida. */
.st > span:has(> .st-t) { display: flex; flex-direction: column; min-width: 0; }
.st-t { display: block; font-weight: inherit; }
.st-line { display: block; margin: 3px 0 0; color: var(--gris); font-weight: 400; font-size: 13.5px; line-height: 1.4; }
.st.ok .st-line, .st-acct.ok .st-b > small { display: none; }
.acc-d .ac { align-items: flex-start; padding: 12px 14px; }
.acc-d .ac b { display: block; }
.acc-d .ac small { display: block; margin-top: 2px; color: var(--gris); font-weight: 400; font-size: 12.5px; line-height: 1.35; }
.use-note { margin: 12px 0 0; color: var(--gris); font-size: 13px; line-height: 1.45; }
.pg-home main.cont > .band { margin-bottom: 12px; }
.guide-need { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--hueso); color: var(--gris); font: 600 11.5px var(--font-texto); font-style: normal; vertical-align: 3px; white-space: nowrap; }

/* Grupo sin alianza: "Tu cuenta del juego" arriba de los dos caminos (entrar / crear). */
.g-start-acct { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start; max-width: 1240px; margin: 20px 0 0; }
.g-start-acct .g-start-ic { margin: 0; }
.g-sa-t h2 { margin: 0 0 4px; font: 800 1.25rem var(--font-titulo); }
.g-sa-t p { margin: 0; }
.g-sa-box { grid-column: 1 / -1; margin-top: 8px; }
@media (min-width: 900px) { .g-start-acct { grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr); align-items: center; } .g-sa-box { grid-column: auto; margin-top: 0; } }

/* Mis ajustes → Tu ficha: la fila de la cuenta del juego (el formulario ocupa el control). */
.set-solo { margin-bottom: 4px; }
.set-row-solo .set-c { min-width: 0; flex: 1 1 26rem; }

/* Miembros: quien entró hace poco (o el del aviso) con "¿No es él? Sacarlo" a la vista; "Hacer dueño" en "⋯". */
.members-tbl tr.is-new > * { background: var(--oro-c); }
.badge.st-new { background: var(--oro-c); color: var(--oro-o); }
.members-tbl .cell-act .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.not-him { white-space: nowrap; }
/* Adentro de un paso de Hoy (.st pone a sus botones como links): el formulario de la cuenta usa los botones píldora de siempre. */
.st .solo-acct .btn { margin-left: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent; font: 700 14px var(--font-texto); white-space: nowrap; cursor: pointer; }
.st .solo-acct .btn-oro { background: var(--oro); color: var(--tinta); }
.st .solo-acct .btn-oro:hover { background: var(--oro-o); }
.st .solo-acct .btn.ghost { background: #fff; color: var(--tinta); border-color: var(--linea-f); min-height: 38px; }
.st .solo-acct .btn.ghost:hover { border-color: var(--tinta); }
.st .solo-acct .btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 640px) { .members-tbl tr.is-new > * { background: transparent; } .members-tbl tr.is-new { background: var(--oro-c); } }