/* Latent Dragons — hoja de estilos base. Tema oscuro por defecto (herramienta creativa), tema claro opcional. */

:root {
  /* Tipografía: Inter si está instalada, si no la del sistema. */
  --font:
    "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Superficies: lienzo, tarjeta, campo, selección. Gris petróleo, no negro. */
  --bg: #1b2429;
  --bg-2: #243137;
  --bg-3: #2d3d44;
  --bg-4: #384c54;
  /* line separa; line-2 dibuja el contorno de un control. */
  --line: #435760;
  --line-2: #8fa2aa;
  --fg: #f5f5ee;
  --fg-2: #ccd9dc;
  --fg-3: #b2c3c9;
  --accent: #edba89; /* cobre del logotipo */
  --accent-2: #f4cba7;
  --accent-fg: #281d14;
  --teal: #89d4c0; /* pátina: foco y selección */
  --blue: #a4c8ff;
  --violet: #d0b5f2;
  --yellow: #e9cc7a;
  --red: #ffa5a5;
  --green: #8ed5ab;
  --orange: #f3b583;

  --shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-alta: 0 16px 40px rgba(0, 0, 0, 0.32);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-chip: 6px;
  --radius-modal: 16px;

  /* Espacio: 4, 8, 12, 16, 24, 32, 48 */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --sidebar: 232px;
  --topbar: 56px;
  --tabbar: 64px;
  /* Alto de la barra de pestañas de escritorio, con su borde. */
  --pestanas: 45px;
  --barra-pestanas: 40px;
  --content-max: 1360px;
  --fila: 44px;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f3f5f4;
  --bg-2: #ffffff;
  --bg-3: #eaf0ed;
  --bg-4: #dce6e1;
  --line: #cad5d1;
  --line-2: #637a83;
  --fg: #172c32;
  --fg-2: #40565f;
  --fg-3: #4d636b;
  --accent: #8b4b23;
  --accent-2: #713a19;
  --accent-fg: #ffffff;
  --teal: #176657;
  --blue: #234f8b;
  --violet: #67428d;
  --yellow: #705300;
  --red: #a12d36;
  --green: #22643e;
  --orange: #84400d;
  --shadow: 0 8px 24px rgba(23, 44, 50, 0.08);
  --shadow-alta: 0 16px 40px rgba(23, 44, 50, 0.16);
  color-scheme: light;
}

/* Tema del sistema cuando no se ha elegido uno a mano. */
@media (prefers-color-scheme: light) {
  :root[data-theme="sistema"] {
    --bg: #f3f5f4;
    --bg-2: #ffffff;
    --bg-3: #eaf0ed;
    --bg-4: #dce6e1;
    --line: #cad5d1;
    --line-2: #637a83;
    --fg: #172c32;
    --fg-2: #40565f;
    --fg-3: #4d636b;
    --accent: #8b4b23;
    --accent-2: #713a19;
    --accent-fg: #ffffff;
    --teal: #176657;
    --blue: #234f8b;
    --violet: #67428d;
    --yellow: #705300;
    --red: #a12d36;
    --green: #22643e;
    --orange: #84400d;
    --shadow: 0 8px 24px rgba(23, 44, 50, 0.08);
    --shadow-alta: 0 16px 40px rgba(23, 44, 50, 0.16);
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
img,
video {
  max-width: 100%;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 {
  font-size: 22px;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 15px;
}
p {
  margin: 0;
}
::selection {
  background: rgba(209, 154, 106, 0.35);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- disposición ---------- */
.app {
  display: flex;
  min-height: 100dvh;
}
.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.topbar {
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  font-size: 17px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .sub {
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 400;
  margin-left: 8px;
}
.content {
  flex: 1;
  padding: 16px;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
/* Pantallas de trabajo: a lo ancho de verdad. Con el tope de 1360 px
   centrado, en un monitor normal quedaban dos palmos de vacío a cada lado y
   el contenido apretado en el medio. Un dedo de margen y ya. */
.content.wide {
  max-width: none;
  padding: 14px 18px;
}
.content.flush {
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tabbar {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.brand b {
  font-size: 15px;
  letter-spacing: 0.02em;
}
.brand small {
  display: block;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-title {
  padding: 12px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-title button {
  opacity: 0.7;
}
.nav-title button:hover {
  opacity: 1;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--fila);
  padding: 8px 10px 8px 13px;
  border-radius: 10px;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover {
  background: var(--bg-3);
  color: var(--fg);
  text-decoration: none;
}
/* Activo: fondo, texto con más peso y franja lateral. No solo color. */
.nav-item.active {
  background: var(--bg-4);
  color: var(--fg);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--teal);
}
.nav-item .ico {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  opacity: 1;
}
.nav-item .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.nav-item .count {
  font-size: 11px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 10px;
  padding: 1px 7px;
}
.nav-item .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 10px;
}
.sidebar-footer {
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid var(--line);
}

/* ---------- componentes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  min-height: 40px;
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg-4);
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}
.btn.ghost:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.btn.danger {
  color: var(--red);
}
.btn.sm {
  padding: 5px 10px;
  min-height: 32px;
  font-size: 13px;
  border-radius: 8px;
}
.btn.icon {
  padding: 0;
  width: 40px;
}
.btn.icon.sm {
  width: 32px;
}
.btn .ico {
  width: 18px;
  height: 18px;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg);
  min-height: 42px;
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(209, 154, 106, 0.18);
}
.textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.45;
}
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.field .hint {
  font-size: 12px;
  color: var(--fg-3);
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.row.wrap {
  flex-wrap: wrap;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card {
  margin-top: 12px;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.card-title h2 {
  font-size: 15px;
}
.card-title a,
.card-title .btn {
  font-size: 13px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex: 0 0 auto;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.avatar.sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}
.avatar.lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.avatar-stack {
  display: inline-flex;
}
.avatar-stack .avatar {
  margin-left: -6px;
  border: 2px solid var(--bg-2);
}
.avatar-stack .avatar:first-child {
  margin-left: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-4);
  color: var(--fg-2);
  white-space: nowrap;
}
.badge .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.badge.todo {
  background: rgba(120, 130, 145, 0.18);
  color: #aab3c0;
}
.badge.doing {
  background: rgba(107, 143, 214, 0.18);
  color: #9db5ec;
}
.badge.review {
  background: rgba(155, 123, 220, 0.2);
  color: #bca6ec;
}
.badge.retake {
  background: rgba(229, 148, 90, 0.2);
  color: #f0b48a;
}
.badge.done {
  background: rgba(95, 196, 143, 0.18);
  color: #8ddcb3;
}
.badge.blocked {
  background: rgba(224, 108, 108, 0.2);
  color: #f09a9a;
}
[data-theme="light"] .badge.todo {
  color: #5b6470;
}
[data-theme="light"] .badge.doing {
  color: #3a5fb5;
}
[data-theme="light"] .badge.review {
  color: #6d4fc2;
}
[data-theme="light"] .badge.retake {
  color: #b5662a;
}
[data-theme="light"] .badge.done {
  color: #24894f;
}
[data-theme="light"] .badge.blocked {
  color: #b53a3a;
}
.badge.kind-meeting {
  color: var(--blue);
}
.badge.kind-training {
  color: var(--violet);
}
.badge.kind-shoot {
  color: var(--orange);
}
.badge.kind-milestone {
  color: var(--accent);
}
.badge.kind-deadline,
.badge.kind-delivery {
  color: var(--red);
}

.empty {
  text-align: center;
  color: var(--fg-3);
  padding: 40px 16px;
}
.empty .ico {
  width: 36px;
  height: 36px;
  opacity: 0.4;
  margin-bottom: 8px;
}
.empty b {
  display: block;
  color: var(--fg-2);
  font-weight: 600;
  margin-bottom: 4px;
}
.muted {
  color: var(--fg-3);
}
.small {
  font-size: 13px;
}
.tiny {
  font-size: 12px;
}
.bold {
  font-weight: 600;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.list {
  display: flex;
  flex-direction: column;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.list-item:hover {
  background: var(--bg-3);
  text-decoration: none;
}
.list-item + .list-item {
  border-top: 1px solid var(--line);
}
.list-item .grow {
  flex: 1;
  min-width: 0;
}
.list-item .title {
  font-weight: 500;
  display: block;
}
.list-item .meta {
  color: var(--fg-3);
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.list.divided .list-item {
  border-radius: 0;
}

.segmented {
  display: inline-flex;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0;
  background: none;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  min-height: 32px;
}
.segmented button.active {
  background: var(--bg-4);
  color: var(--fg);
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar) + 16px);
  transform: translateX(-50%);
  background: var(--bg-4);
  color: var(--fg);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 100;
  font-size: 14px;
  border: 1px solid var(--line-2);
  max-width: min(90vw, 480px);
}
.toast.error {
  border-color: var(--red);
}

/* modales y hojas */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: var(--shadow);
}
.modal.wide {
  max-width: 980px;
}
/* El visor se adapta a lo que pida el usuario. */
.modal.visor-modal {
  max-width: min(1600px, 96vw);
  width: min(1600px, 96vw);
}
.modal.visor-modal.completo {
  max-width: 100vw;
  width: 100vw;
  max-height: 100dvh;
  border-radius: 0;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 1;
}
.modal-head h2 {
  flex: 1;
  font-size: 16px;
}
.modal-body {
  padding: 16px;
}
.modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: var(--bg-2);
}
@media (max-width: 600px) {
  .overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    border-radius: 16px 16px 0 0;
    max-height: 92dvh;
    border-bottom: 0;
  }
}

/* ---------- inicio ---------- */
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 24px;
}
.hero .date {
  color: var(--fg-3);
  font-size: 14px;
}
.today-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px) {
  .today-grid {
    grid-template-columns: 1fr;
  }
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.stat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.stat:hover {
  background: var(--bg-3);
  text-decoration: none;
}
.stat b {
  display: block;
  font-size: 22px;
  font-weight: 600;
}
.stat span {
  color: var(--fg-3);
  font-size: 12px;
}

/* ---------- chat ---------- */
.content.flush.chat {
  /* Alto fijo y flex: none, como el Correo: con flex: 1 dentro de un panel
     sin alto propio, el navegador ignoraba este alto, la página crecía con
     los mensajes y la caja de escribir acababa por debajo de la ventana. */
  flex: none;
  display: flex;
  flex-direction: row;
  min-height: 0;
  height: calc(100dvh - var(--topbar) - var(--pestanas));
  padding: 0;
  overflow: hidden;
}
/* En el mosaico, el panel ya tiene su tamaño: se rellena. */
.paneles.mosaico .content.flush.chat {
  flex: 1 1 0;
  height: auto;
  padding: 0;
}
@media (max-width: 900px) {
  .content.flush.chat {
    height: calc(100dvh - var(--topbar) - var(--tabbar));
  }
}
.chat-list {
  width: 300px;
  flex: 0 0 300px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--bg-2);
}
.chat-list .nav-title {
  padding-top: 14px;
}
.chan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--fg-2);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.chan:hover {
  background: var(--bg-3);
  text-decoration: none;
}
.chan.active {
  background: var(--bg-4);
  color: var(--fg);
}
.chan.unread {
  color: var(--fg);
  font-weight: 600;
}
.chan .hash {
  color: var(--fg-3);
  font-weight: 500;
}
.chan .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chan .count {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 10px;
  padding: 1px 7px;
}
.chan .swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ======================================================================
   Chat · el canal abierto
   La caja de escribir no se mueve de abajo: la página tiene alto fijo y
   dentro solo hace scroll la conversación (.chat-mensajes). Cada caja de
   la cadena lleva min-height: 0; sin eso, un hijo flexible crece con su
   contenido y empuja todo lo de debajo fuera de la ventana.
   Todo lo nuevo va bajo .chat-* y solo usa variables del tema.
   ====================================================================== */
.chat-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  position: relative;
  background: var(--bg-2);
  /* El panel lateral se decide por el ancho del chat, no de la ventana:
     igual a pantalla completa que en el mosaico. */
  container: chatmain / inline-size;
}
.chat-main > .empty {
  margin: auto;
}
.chat-canal {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.chat-conversacion {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-mensajes-caja {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}

/* ---------- cabecera ---------- */
.chat-cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 14px 8px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  /* Lo que cabe se decide por el ancho de la propia cabecera, que con el
     panel lateral abierto es menor que el del chat. */
  container: chatcabecera / inline-size;
}
.chat-cabecera-icono {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--fg-2);
}
.chat-cabecera-icono .ico {
  width: 18px;
  height: 18px;
}
.chat-cabecera-icono .avatar {
  width: 36px;
  height: 36px;
}
.chat-cabecera-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-cabecera-titulo h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-cabecera-desc {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-cabecera-acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}
.chat-cabecera-acciones .meet-grupo {
  margin-right: 8px;
}

/* La videollamada, a la vista: botón de color, no uno más de la barra. */
.btn.meet-boton {
  height: 36px;
  padding: 0 16px 0 14px;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--bg);
  font-weight: 650;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--teal) 30%, transparent);
}
.btn.meet-boton:hover:not(:disabled) {
  background: color-mix(in srgb, var(--teal) 86%, var(--fg));
  border-color: color-mix(in srgb, var(--teal) 86%, var(--fg));
  color: var(--bg);
}
.btn.meet-boton .ico {
  width: 18px;
  height: 18px;
}
.btn.meet-boton.en-curso {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}
.meet-pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: chat-latido 1.4s ease-in-out infinite;
}
@keyframes chat-latido {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* ---------- botones de herramienta ---------- */
.chat-herr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.chat-herr:hover:not(:disabled),
.chat-herr.on,
.chat-herr[aria-expanded="true"] {
  background: var(--bg-3);
  color: var(--fg);
  text-decoration: none;
}
.chat-herr.on {
  color: var(--accent);
}
.chat-herr:disabled {
  opacity: 0.38;
  cursor: default;
}
.chat-herr .ico {
  width: 17px;
  height: 17px;
}
.chat-herr.grande {
  height: 36px;
  min-width: 36px;
}
.chat-herr.grande .ico {
  width: 19px;
  height: 19px;
}
.chat-herr.con-texto {
  padding: 0 10px;
}

/* «Contenido del canal»: de lo más usado del chat, así que se ve. Fondo suave
   de cobre en reposo, más marcado al pasar por encima y lleno cuando el
   panel está abierto. Sin sombra ni color propio: el botón de color de la
   cabecera sigue siendo el de la videollamada. */
.chat-herr.chat-contenido {
  padding: 0 12px 0 9px;
  gap: 7px;
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.chat-herr.chat-contenido:hover:not(:disabled) {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Con la cabecera delante: si no, gana la regla general de [aria-pressed]. */
.chat-cabecera .chat-herr.chat-contenido.on,
.chat-cabecera .chat-herr.chat-contenido.on:hover:not(:disabled) {
  color: var(--accent-fg);
  background: var(--accent);
  box-shadow: none;
}
.chat-herr.chat-contenido:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-contenido-icono {
  position: relative;
  flex: none;
  display: grid;
}
.chat-contenido-icono .ico-contenido {
  display: block;
  width: 22px;
  height: 22px;
}
/* El punto de novedades: con un aro del color de la cabecera para que se
   separe del dibujo. */
.chat-contenido-punto {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.chat-herr.mini {
  height: 24px;
  min-width: 24px;
  padding: 0 3px;
}
.chat-herr.mini .ico {
  width: 15px;
  height: 15px;
}
.chat-herr.emoji {
  font-size: 16px;
}
.chat-herr.arroba {
  font-size: 16px;
  font-weight: 700;
}
.emoji.gris {
  font-size: 16px;
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.12s ease,
    opacity 0.12s ease;
}
.chat-herr:hover .emoji.gris,
.chat-reaccion:hover .emoji.gris,
.chat-herr[aria-expanded="true"] .emoji.gris {
  filter: none;
  opacity: 1;
}

/* ---------- fijados ---------- */
.chat-fijados {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  font-size: 13px;
}
.chat-fijados > .ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.chat-fijados-ultimo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-fijados-ultimo b {
  flex: none;
  color: var(--accent);
  font-weight: 650;
}
.chat-fijados-ultimo:hover .ellipsis {
  color: var(--fg);
}

/* ---------- la conversación ---------- */
.chat-principio {
  padding: 28px 20px 10px;
}
.chat-principio-icono {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--bg-3);
  color: var(--fg-2);
  margin-bottom: 10px;
}
.chat-principio-icono .ico {
  width: 28px;
  height: 28px;
}
.chat-principio h3 {
  margin: 0 0 4px;
  font-size: 22px;
}
.chat-principio p {
  margin: 0;
  color: var(--fg-3);
  font-size: 14px;
  max-width: 60ch;
}
.chat-cargando-antes {
  min-height: 36px;
  display: grid;
  place-items: center;
}
.chat-vacio {
  height: 100%;
  display: grid;
  place-items: center;
}

/* Separador de día: una píldora que se queda arriba mientras bajas. */
.chat-dia {
  position: sticky;
  top: 6px;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 16px 0 2px;
  pointer-events: none;
}
.chat-dia span {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 40%, transparent);
}
/* Raya de «nuevos»: desde aquí no lo habías leído. */
.chat-nuevos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 2px 20px;
  color: var(--red);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chat-nuevos::before {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--red) 70%, transparent);
}
.chat-nuevos span {
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--red) 16%, transparent);
}

.chat-msg {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  margin-top: 8px;
  padding: 5px 20px 5px 18px;
  outline: none;
}
.chat-msg.compact {
  margin-top: 0;
  padding-top: 1px;
  padding-bottom: 1px;
}
.chat-msg:hover,
.chat-msg:focus-within,
.chat-msg.con-menu {
  background: color-mix(in srgb, var(--bg-3) 55%, transparent);
}
.chat-msg:focus-visible {
  box-shadow: inset 2px 0 var(--teal);
}
.chat-msg.me-menciona {
  background: color-mix(in srgb, var(--yellow) 9%, transparent);
  box-shadow: inset 2px 0 var(--yellow);
}
.chat-msg.destacado {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 var(--accent);
  transition: background 0.6s ease;
}
/* Acaba de llegar de otra persona: un resalte suave que se apaga solo. Sin
   él, lo que llega a un grupo del mismo autor no se nota. */
.chat-msg.recien {
  animation: chat-recien 6s ease-out;
}
@keyframes chat-recien {
  0%,
  35% {
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    box-shadow: inset 3px 0 var(--teal);
  }
  100% {
    background: transparent;
    box-shadow: inset 3px 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: la marca se queda fija mientras dura. */
  .chat-msg.recien {
    animation: none;
    box-shadow: inset 3px 0 var(--teal);
  }
}
/* Varias fotos seguidas de la misma persona: juntas, en mosaico, cada una con
   su hora, sus reacciones y su menú. Alineadas con el texto de los mensajes
   (margen + avatar + hueco). */
.chat-mosaico {
  --mosaico-izq: calc(18px + 40px + 12px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 180px));
  gap: 6px;
  padding: 3px 20px 3px var(--mosaico-izq);
}
.chat-msg.en-mosaico {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 12px;
}
.chat-msg.en-mosaico .chat-msg-lado {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  pointer-events: none;
}
.chat-msg.en-mosaico .chat-msg-hora-lado {
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--fg-2);
}
.chat-msg.en-mosaico .chat-adj {
  margin-top: 0;
  max-width: none;
}
.chat-msg.en-mosaico .chat-adj-miniatura {
  display: block;
  width: 100%;
}
.chat-msg.en-mosaico .chat-adj-miniatura img,
.chat-msg.en-mosaico .chat-adj-miniatura.cargando {
  width: 100%;
  max-width: none;
  height: 150px;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}
.chat-msg.en-mosaico .chat-acciones {
  top: 4px;
  right: 4px;
}
.chat-msg.recien.en-mosaico {
  outline: 2px solid color-mix(in srgb, var(--teal) 60%, transparent);
  outline-offset: 1px;
}
.chat-lado .chat-mosaico {
  --mosaico-izq: calc(14px + 32px + 10px);
}
/* La cabecera de un grupo que empieza con un mosaico: solo nombre y hora. */
.chat-msg-cabecera {
  padding-bottom: 0;
}
/* Con el dedo no hay «pasar el ratón»: la hora de cada mensaje de un grupo
   se ve siempre. */
@media (hover: none) {
  .chat-msg-hora-lado {
    visibility: visible;
  }
}
.chat-msg-lado .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.chat-msg-hora-lado {
  display: block;
  visibility: hidden;
  padding-top: 3px;
  color: var(--fg-3);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  white-space: nowrap;
}
.chat-msg:hover .chat-msg-hora-lado,
.chat-msg:focus-within .chat-msg-hora-lado {
  visibility: visible;
}
.chat-msg-cuerpo {
  min-width: 0;
}
.chat-msg-quien {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.3;
}
.chat-msg-quien b {
  font-size: 14.5px;
  font-weight: 680;
  color: var(--fg);
}
.chat-msg.mio .chat-msg-quien b {
  color: var(--accent);
}
.chat-msg-quien time {
  font-size: 12px;
  color: var(--fg-3);
}
.chat-msg-marca {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--accent);
}
.chat-msg-marca .ico {
  width: 12px;
  height: 12px;
}
.chat-msg-texto {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg-texto.borrado {
  color: var(--fg-3);
  font-style: italic;
}
.chat-msg-texto.solo-emoji {
  line-height: 1.2;
  padding: 2px 0;
}
.chat-msg-texto.solo-emoji.n1 {
  font-size: 42px;
}
.chat-msg-texto.solo-emoji.n2 {
  font-size: 36px;
}
.chat-msg-texto.solo-emoji.n3 {
  font-size: 30px;
}
.chat-msg-texto a,
.chat-rec-texto a {
  color: var(--blue);
  text-decoration: none;
}
.chat-msg-texto a:hover,
.chat-rec-texto a:hover {
  text-decoration: underline;
}
.chat-msg-editado {
  font-size: 12px;
  color: var(--fg-3);
}
.mention {
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  color: var(--blue);
  font-weight: 600;
}
.mention.mia {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.chat-parrafo + .chat-parrafo {
  margin-top: 6px;
}
.chat-codigo-linea {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-3);
  font-family: var(--mono);
  font-size: 0.86em;
}
.chat-codigo {
  margin: 4px 0;
  max-width: 760px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}
.chat-cita-texto {
  margin: 4px 0;
  padding: 1px 0 1px 12px;
  border-left: 3px solid var(--line-2);
  color: var(--fg-2);
}
.chat-lista {
  margin: 2px 0;
  padding-left: 22px;
  white-space: normal;
}
.chat-lista li + li {
  margin-top: 2px;
}

/* Barra de acciones al pasar por encima: reaccionar, responder, hilo… */
.chat-acciones {
  position: absolute;
  top: -15px;
  right: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  visibility: hidden;
}
.chat-msg:hover > .chat-acciones,
.chat-msg:focus-within > .chat-acciones,
.chat-msg.con-menu > .chat-acciones {
  visibility: visible;
}
.chat-acciones .chat-herr {
  height: 28px;
  min-width: 28px;
}
.chat-acciones .chat-herr.emoji {
  font-size: 15px;
}
.chat-msg.editando {
  background: color-mix(in srgb, var(--teal) 8%, transparent);
}

/* Respuesta citada y reenvío */
.chat-cita {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: min(560px, 100%);
  margin: 3px 0 4px;
  padding: 5px 10px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3));
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.chat-cita b {
  color: var(--accent);
  font-size: 12.5px;
}
.chat-cita .ellipsis {
  max-width: 100%;
}
.chat-cita:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-3));
}
.chat-cita.borrada {
  border-left-color: var(--line-2);
  font-style: italic;
  cursor: default;
}
.chat-cita:disabled {
  cursor: default;
}
.chat-reenvio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1px 0 3px;
  color: var(--fg-3);
  font-size: 12.5px;
  font-style: italic;
}
.chat-reenvio .ico {
  width: 14px;
  height: 14px;
}
.chat-enlace-boton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}
.chat-enlace-boton:hover {
  text-decoration: underline;
}

/* Reacciones: al pasar por encima se ve quién. */
.chat-reacciones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.chat-reaccion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chat-reaccion .emoji {
  font-size: 15px;
  line-height: 1;
}
.chat-reaccion .n {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.chat-reaccion:hover:not(:disabled) {
  border-color: var(--line-2);
}
/* La tuya, como cualquier botón pulsado de la plataforma. */
.chat-reaccion.mia {
  border-color: var(--teal);
  background: var(--bg-4);
  color: var(--fg);
}
.chat-reaccion:disabled {
  cursor: default;
}
.chat-reaccion.mas {
  color: var(--fg-3);
  visibility: hidden;
}
.chat-msg:hover .chat-reaccion.mas,
.chat-msg:focus-within .chat-reaccion.mas {
  visibility: visible;
}
.chat-reaccion-quien {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-alta);
  pointer-events: none;
}
.chat-reaccion-quien .grande {
  font-size: 24px;
  line-height: 1;
}
.chat-reaccion-quien b {
  color: var(--fg);
}
.chat-reaccion:hover .chat-reaccion-quien,
.chat-reaccion:focus-visible .chat-reaccion-quien {
  display: flex;
}

.chat-respuestas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.chat-respuestas .ico {
  width: 15px;
  height: 15px;
}
.chat-respuestas .ver {
  display: none;
  color: var(--fg-3);
  font-weight: 450;
}
.chat-respuestas:hover {
  border-color: var(--line);
  background: var(--bg-2);
}
.chat-respuestas:hover .ver {
  display: inline;
}
.chat-visto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--fg-3);
  font-size: 12px;
}
.chat-visto > .ico {
  width: 14px;
  height: 14px;
  color: var(--teal);
}
.chat-visto-caras {
  display: inline-flex;
  padding-left: 4px;
}
.chat-visto-caras .avatar {
  width: 18px;
  height: 18px;
  margin-left: -5px;
  border: 2px solid var(--bg-2);
  font-size: 8px;
}

/* Editar en su sitio */
.chat-editar textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  resize: none;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent);
}
.chat-editar-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.chat-editar-pie .hint {
  flex: 1;
  font-size: 12px;
}
.chat-composer-ayuda kbd,
.chat-editar-pie kbd,
.chat-menu kbd {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 10.5px;
}

/* ---------- adjuntos ---------- */
.chat-adj {
  margin-top: 6px;
  max-width: min(460px, 100%);
}
.chat-adj-miniatura {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-3);
  cursor: zoom-in;
  vertical-align: top;
}
.chat-adj-miniatura img {
  display: block;
  /* En unidades del chat y no en %: el botón se ajusta a la imagen y un
     porcentaje sobre él sería circular (dejaba una franja vacía al lado). */
  max-width: min(420px, 62cqw);
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.chat-adj-miniatura:hover {
  border-color: var(--line-2);
}
/* Mientras la imagen carga, un hueco de tamaño fijo: nada salta. */
.chat-adj-miniatura.cargando {
  width: min(260px, 62cqw);
  aspect-ratio: 4 / 3;
}
.chat-adj-miniatura.cargando img {
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* Un adjunto que aún llega o que no se puede ver: se dice, nunca vacío. */
.chat-adj-aviso {
  padding: 8px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.chat-adj-aviso.cargando {
  width: min(260px, 62cqw);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--bg-3);
}
.chat-adj.video {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-3);
}
.chat-adj.video video {
  display: block;
  width: 100%;
  max-height: 320px;
  background: var(--bg);
}
.chat-adj-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  font-size: 12.5px;
}
.chat-adj.archivo {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, 100%);
  padding: 10px 8px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-3);
}
.chat-adj-datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-adj-nombre {
  color: var(--fg);
  font-weight: 620;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.chat-adj-nombre:hover {
  text-decoration: underline;
}
.chat-adj-meta {
  color: var(--fg-3);
  font-size: 12px;
}

/* Vista previa de enlaces */
.chat-enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(480px, 100%);
  margin-top: 6px;
  padding: 8px 12px 8px 10px;
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--bg-3);
}
.chat-enlace.compacta {
  margin: 0;
  max-width: none;
}
.chat-enlace-sello {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--teal) 20%, var(--bg-2));
  color: var(--teal);
  font-weight: 800;
  font-size: 15px;
}
.chat-enlace-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: inherit;
  text-decoration: none;
}
.chat-enlace-texto:hover .chat-enlace-titulo {
  text-decoration: underline;
}
.chat-enlace-dominio {
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-enlace-titulo {
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-enlace-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.chat-enlace-video {
  position: relative;
  flex: none;
  width: 150px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-4);
  cursor: pointer;
}
.chat-enlace-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-enlace-play {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--fg);
  font-size: 14px;
}
.chat-enlace.reproduciendo {
  display: block;
  max-width: min(560px, 100%);
  padding: 0;
  border: 0;
  background: none;
}
.chat-enlace.reproduciendo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
}

/* ---------- abajo del todo: quién escribe y la caja ---------- */
.chat-abajo {
  position: absolute;
  right: 22px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.chat-abajo .ico {
  width: 16px;
  height: 16px;
}
.chat-abajo.con-nuevos {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}
.chat-soltar {
  position: absolute;
  inset: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--teal);
  border-radius: 16px;
  background: color-mix(in srgb, var(--teal) 12%, var(--bg-2));
  color: var(--fg);
  pointer-events: none;
}
.chat-soltar .ico {
  width: 36px;
  height: 36px;
  color: var(--teal);
}
.chat-soltar b {
  font-size: 17px;
}
.chat-soltar span {
  color: var(--fg-2);
}
.chat-escribiendo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 22px;
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
.chat-puntos {
  display: inline-flex;
  gap: 3px;
}
.chat-puntos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: chat-punto 1.2s ease-in-out infinite;
}
.chat-puntos i:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-puntos i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-punto {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
.chat-solo-lectura {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 14px;
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg-2);
  font-size: 13.5px;
}
.chat-solo-lectura .ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.chat-composer {
  flex: none;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom));
}
.chat-composer-caja {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.chat-composer-caja:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent);
}
.chat-composer-caja textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 220px;
  padding: 12px 14px 4px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  resize: none;
  outline: none;
}
/* La caja entera ya enseña el foco: el contorno global del textarea sobra. */
.chat-composer-caja textarea:focus-visible,
.chat-editar textarea:focus-visible,
.chat-buscar-caja .input:focus-visible,
.adjuntar-buscar .input:focus-visible,
.chat-emojis-buscar:focus-visible {
  outline: none;
}
.chat-composer-caja textarea::placeholder {
  color: var(--fg-3);
}
.chat-composer-barra {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px 6px 6px;
}
.chat-composer-formato {
  display: flex;
  gap: 1px;
}
.chat-composer-sep {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--line);
}
.chat-composer-cuenta {
  margin-right: 8px;
  color: var(--fg-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chat-composer-cuenta.pasado {
  color: var(--red);
  font-weight: 700;
}
.btn.chat-enviar {
  width: 40px;
  height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
}
.btn.chat-enviar .ico {
  width: 17px;
  height: 17px;
}
.chat-composer-ayuda {
  padding: 5px 4px 0;
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-respondiendo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-left: 3px solid var(--accent);
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-3));
  font-size: 13px;
  color: var(--fg-2);
}
.chat-respondiendo > .ico {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.chat-respondiendo + .chat-composer-caja,
.chat-respondiendo + .chat-cola + .chat-composer-caja {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.chat-cola {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  margin: 0 0 8px;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.chat-cola-item {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 6px 4px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-3);
}
.chat-cola-item img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
}
.chat-cola-item > .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fg-3);
}
.chat-cola-item.con-error {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
  background: color-mix(in srgb, var(--red) 12%, var(--bg-3));
}
.chat-cola-datos {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
}
.chat-cola-datos .hint {
  font-size: 12px;
}
.chat-cola-barra {
  display: block;
  width: 130px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-4);
  overflow: hidden;
}
.chat-cola-barra span {
  display: block;
  height: 100%;
  background: var(--teal);
  transition: width 0.2s ease;
}
/* Adjunto que no verá todo el canal: el aviso va en el propio adjunto. */
.chat-cola-item.con-aviso {
  max-width: min(460px, 100%);
  align-items: flex-start;
  border-color: color-mix(in srgb, var(--yellow) 60%, var(--line));
  background: color-mix(in srgb, var(--yellow) 10%, var(--bg-3));
}
.chat-cola-aviso {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg);
  white-space: normal;
}
.chat-cola-aviso .ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--yellow);
}
.chat-cola-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Sugerencias al escribir @, : o / */
.chat-sugerencias {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  z-index: 30;
  max-height: 290px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  list-style: none;
}
.chat-sugerencias button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.chat-sugerencias button.activa {
  background: var(--bg-3);
}
.chat-sugerencias .hint {
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-sug-icono {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-weight: 700;
}
.chat-sug-icono.emoji {
  background: none;
  font-size: 19px;
}

/* ---------- capas flotantes: menús y emojis ---------- */
.chat-flotante {
  position: fixed;
  z-index: 65;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  animation: chat-aparecer 0.12s ease-out;
}
@keyframes chat-aparecer {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chat-menu {
  min-width: 230px;
  max-width: 340px;
  max-height: min(70vh, 460px);
  padding: 6px;
  overflow-y: auto;
}
.chat-menu-op {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.chat-menu-op .grow {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-menu-op:hover,
.chat-menu-op:focus-visible {
  background: var(--bg-3);
  outline: none;
}
.chat-menu-op .ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.chat-menu-op.peligro,
.chat-menu-op.peligro .ico {
  color: var(--red);
}
.chat-menu-op.separar {
  margin-top: 5px;
  position: relative;
}
.chat-menu-op.separar::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--line);
}
.chat-emojis {
  width: 340px;
  max-width: calc(100vw - 16px);
  padding: 8px;
}
.chat-emojis-buscar {
  width: 100%;
  margin-bottom: 6px;
}
.chat-emojis-cats {
  display: flex;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.chat-emojis-cats button {
  flex: 1;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 17px;
  cursor: pointer;
  filter: grayscale(0.7);
}
.chat-emojis-cats button:hover {
  background: var(--bg-3);
  filter: none;
}
.chat-emojis-rejilla {
  height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chat-emojis-rejilla h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 7px 4px 4px;
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-emojis-fila {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.chat-emojis-fila button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.chat-emojis-fila button:hover,
.chat-emojis-fila button.activo {
  background: var(--bg-3);
}
.chat-emojis-fila button.activo {
  box-shadow: inset 0 0 0 2px var(--teal);
}
.chat-emojis-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 6px 4px 0;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12.5px;
}
.chat-emojis-pie .grande {
  font-size: 22px;
}
.chat-emojis-pie code {
  font-family: var(--mono);
}

/* ---------- panel lateral: hilo, buscar, contenido, personas ---------- */
.chat-lado {
  flex: none;
  width: 390px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--bg);
}
.chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-panel-cabeza {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 8px 12px 8px 18px;
  border-bottom: 1px solid var(--line);
}
.chat-panel-cabeza h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-panel-cabeza h3 .hint {
  font-weight: 450;
}
.chat-panel-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 16px;
  scrollbar-width: thin;
}
.chat-panel-nota {
  margin: 0;
  padding: 10px 18px;
  color: var(--fg-3);
  font-size: 13px;
}
.chat-panel-cuerpo .chat-panel-nota {
  padding: 10px 4px;
}
.chat-mas {
  display: block;
  margin: 12px auto 0;
}
.chat-lado .chat-msg {
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  padding-left: 14px;
  padding-right: 14px;
}
.chat-lado .chat-msg-lado .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.chat-lado .chat-acciones {
  right: 10px;
}
.chat-lado .chat-composer {
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}
.chat-lado .chat-composer-formato,
.chat-lado .chat-composer-sep {
  display: none;
}
.chat-hilo-cuenta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 4px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 650;
}
.chat-hilo-cuenta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Personas */
.chat-personas {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  overflow-y: auto;
  list-style: none;
}
.chat-personas li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.chat-personas li:hover {
  background: var(--bg-2);
}
.chat-personas .grow {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-personas b {
  font-size: 14px;
  font-weight: 620;
}
.chat-personas .hint {
  font-size: 12px;
}

/* Buscar */
.chat-buscar-campos {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.chat-buscar-caja {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.chat-buscar-caja:focus-within {
  border-color: var(--teal);
}
.chat-buscar-caja .ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.chat-buscar-caja .input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.chat-buscar-filtros {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-buscar-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-buscar-tipos .chip,
.chat-list-vistas .chip {
  padding: 3px 10px;
  font-size: 12.5px;
}
.chat-resultados {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-resultado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-resultado:hover,
.chat-resultado.activo {
  background: var(--bg-2);
}
.chat-resultado.activo {
  box-shadow: inset 0 0 0 1px var(--teal);
}
.chat-resultado .grow {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-resultado-quien {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}
.chat-resultado-quien time,
.chat-resultado-hilo {
  color: var(--fg-3);
  font-size: 12px;
}
.chat-resultado-hilo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chat-resultado-hilo .ico {
  width: 12px;
  height: 12px;
}
.chat-resultado-texto {
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.chat-resultado-texto mark {
  padding: 0 1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--yellow) 40%, transparent);
  color: var(--fg);
}
.chat-resultado-archivo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fg-2);
  font-size: 12.5px;
}

/* Contenido del canal */
.chat-recursos-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-recursos-titulo .ico-contenido {
  flex: none;
}
.chat-recursos-vacio {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 12px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
.chat-recursos-vacio p {
  max-width: 30ch;
}
.chat-rec-tipos {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.chat-rec-tipo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-rec-tipo .ico {
  width: 19px;
  height: 19px;
}
/* Los dibujos en color de cada tipo: siempre a todo color, menos en las
   pestañas vacías, que se apagan como su texto. */
.chat-rec-tipo .ico-tipo {
  display: block;
  width: 22px;
  height: 22px;
}
.chat-rec-tipo.vacio:not(.activo) .ico-tipo {
  filter: grayscale(0.85);
}
.chat-rec-nada {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-rec-nada .ico-tipo {
  flex: none;
  opacity: 0.75;
}
/* Si el servidor falla: qué ha pasado, en claro, y «Reintentar». */
.chat-rec-fallo {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.chat-rec-fallo p {
  margin: 0;
  color: var(--fg-2);
}
.chat-rec-tipo b {
  position: absolute;
  top: 3px;
  right: 6px;
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.chat-rec-tipo:hover {
  background: var(--bg-2);
}
.chat-rec-tipo.activo {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  color: var(--accent);
}
.chat-rec-tipo.activo b {
  color: var(--accent);
}
.chat-rec-tipo.vacio:not(.activo) {
  opacity: 0.5;
}
.chat-rec-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.chat-rec-miniatura {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-3);
  cursor: zoom-in;
}
.chat-rec-miniatura img,
.chat-rec-miniatura video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.chat-rec-miniatura:hover img,
.chat-rec-miniatura:hover video {
  opacity: 0.85;
}
.chat-rec-play {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--fg);
  font-size: 12px;
}
.chat-rec-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-rec-archivo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.chat-rec-archivo .grow {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-rec-nombre {
  color: var(--fg);
  font-weight: 620;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.chat-rec-nombre:hover {
  text-decoration: underline;
}
.chat-rec-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-3);
  font-size: 12px;
}
.chat-rec-pie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fg-3);
  font-size: 12px;
}
.chat-rec-pie .avatar {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.chat-rec-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.chat-rec-enlace,
.chat-rec-audio,
.chat-rec-guardado {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.chat-rec-enlace .chat-enlace + .chat-enlace {
  margin-top: 6px;
}
.chat-rec-texto {
  margin: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-rec-guardado .chat-rec-fila {
  justify-content: flex-start;
}

/* ---------- visor de fotos y vídeos ---------- */
.chat-visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
}
.chat-visor-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--fg);
}
.chat-visor-quien {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-visor-quien span {
  color: var(--fg-3);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-visor-cuenta {
  color: var(--fg-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.chat-visor-lienzo {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 6px 76px;
}
.chat-visor-lienzo img,
.chat-visor-lienzo video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--shadow-alta);
}
.chat-visor-flecha {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
  transform: translateY(-50%);
}
.chat-visor-flecha .ico {
  width: 22px;
  height: 22px;
}
.chat-visor-flecha.izq {
  left: 16px;
}
.chat-visor-flecha.der {
  right: 16px;
}
.chat-visor-tira {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px 14px;
  overflow-x: auto;
}
.chat-visor-tira button {
  flex: none;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
  opacity: 0.6;
}
.chat-visor-tira button.activo,
.chat-visor-tira button:hover {
  opacity: 1;
}
.chat-visor-tira button.activo {
  border-color: var(--accent);
}
.chat-visor-tira img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-visor-video {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--fg-2);
}

/* ---------- reenviar ---------- */
.chat-reenviar-muestra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 13px;
}
.chat-reenviar-lista {
  max-height: 260px;
  margin: 8px 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.chat-reenviar-op {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.chat-reenviar-op .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.chat-reenviar-op:hover {
  background: var(--bg-3);
}
.chat-reenviar-op.activo {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-3));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.chat-reenviar-op .hint {
  font-size: 12px;
}

/* Cargando: filas grises en vez de una rueda en medio de la nada. */
.chat-esqueleto-fila {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
}
.chat-esqueleto .avatar-hueco {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--bg-3);
}
.chat-esqueleto .lineas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}
.chat-esqueleto .lineas span {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-3);
  animation: chat-parpadeo 1.3s ease-in-out infinite;
}
@keyframes chat-parpadeo {
  50% {
    opacity: 0.5;
  }
}

/* ---------- lista de canales ---------- */
.chat-list-vistas {
  display: flex;
  gap: 6px;
  padding: 4px 10px 6px;
}
.chan .count.mencion {
  background: var(--red);
  color: var(--bg);
}

/* ---------- anchos ---------- */
/* Lo primero que se va, si no cabe: la palabra «Contenido» (queda el dibujo). */
@container chatcabecera (max-width: 660px) {
  .chat-contenido-texto {
    display: none;
  }
  .chat-herr.chat-contenido {
    padding: 0 7px;
  }
}
/* Con el chat estrecho, el panel lateral va por encima de la conversación. */
@container chatmain (max-width: 820px) {
  .chat-lado {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(400px, 100%);
    box-shadow: var(--shadow-alta);
  }
}
@container chatmain (max-width: 640px) {
  .chat-mosaico {
    --mosaico-izq: calc(12px + 40px + 12px);
    padding-right: 12px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .meet-boton .meet-texto,
  .chat-composer-ayuda {
    display: none;
  }
  .btn.meet-boton {
    padding: 0 10px;
  }
  .chat-msg {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@container chatmain (max-width: 480px) {
  .chat-composer-formato,
  .chat-composer-sep {
    display: none;
  }
  .chat-cabecera {
    padding-left: 12px;
  }
  .chat-cabecera-icono {
    display: none;
  }
}
@media (hover: none) {
  .chat-reaccion.mas {
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-puntos i,
  .meet-pulso,
  .chat-esqueleto .lineas span {
    animation: none;
  }
}

/* ---------- adjuntar: explorador con carpetas (chat y correo) ---------- */
.adjuntar-modal {
  width: min(620px, calc(100vw - 32px));
}
.adjuntar-origen {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--bg-3);
}
.adjuntar-origen button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.adjuntar-origen button.activo {
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: var(--shadow);
}
.adjuntar-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adjuntar-fila-migas {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adjuntar-fila-migas .adjuntar-migas {
  flex: 1;
}
.adjuntar-fila-migas .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12.5px;
}
.adjuntar-fila-migas .chip .ico {
  width: 13px;
  height: 13px;
}
.adjuntar-migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
}
.adjuntar-migas button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 200px;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.adjuntar-migas button:hover:not(:disabled) {
  background: var(--bg-3);
}
.adjuntar-migas button:disabled {
  color: var(--fg);
  cursor: default;
}
.adjuntar-migas .ico {
  width: 14px;
  height: 14px;
}
.adjuntar-migas .sep {
  flex: none;
  color: var(--fg-3);
}
.adjuntar-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.adjuntar-buscar:focus-within {
  border-color: var(--teal);
}
.adjuntar-buscar > .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.adjuntar-buscar .input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.adjuntar-lista {
  max-height: min(52vh, 420px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.adjuntar-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.adjuntar-fila:hover,
.adjuntar-fila:focus-visible {
  background: var(--bg-3);
  outline: none;
}
.adjuntar-fila .grow {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.adjuntar-fila > .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.adjuntar-nombre {
  font-size: 14px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adjuntar-meta {
  color: var(--fg-3);
  font-size: 12px;
}
.adjuntar-seccion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px 4px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.adjuntar-seccion .ico {
  width: 13px;
  height: 13px;
}

/* ---------- archivo ---------- */
.files-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--fg-3);
  font-size: 14px;
}
.crumbs a,
.crumbs button {
  color: var(--fg-2);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  font-weight: 500;
}
.crumbs a:hover,
.crumbs button:hover {
  background: var(--bg-3);
  text-decoration: none;
}
.crumbs .cur {
  color: var(--fg);
  font-weight: 600;
}
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.tile:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
}
.tile .thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  position: relative;
  overflow: hidden;
}
.tile .thumb img,
.tile .thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile .thumb .ico {
  width: 30px;
  height: 30px;
}
.tile .thumb .ver {
  position: absolute;
  right: 6px;
  top: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}
.tile .name {
  padding: 8px 10px 2px;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .meta {
  padding: 0 10px 8px;
  font-size: 12px;
  color: var(--fg-3);
}
.tile.folder .thumb {
  aspect-ratio: auto;
  height: 64px;
  color: var(--accent);
}
.dropzone {
  border: 2px dashed var(--line-2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: var(--fg-3);
  margin-top: 12px;
}
.dropzone.over {
  border-color: var(--accent);
  color: var(--fg);
  background: rgba(209, 154, 106, 0.06);
}
.preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview .media {
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: 60dvh;
}
.preview .media img,
.preview .media video {
  max-height: 60dvh;
  max-width: 100%;
}
.versions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.versions .v {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-3);
  font-size: 13px;
}
.versions .v.cur {
  outline: 1px solid var(--accent);
}
.progress {
  height: 6px;
  background: var(--bg-4);
  border-radius: 3px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}

/* ---------- tareas ---------- */
.task-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.task-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
}
.task-row + .task-row {
  margin-top: 6px;
}
.task-row:hover {
  background: var(--bg-3);
}
.task-row .check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--line-2);
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  padding: 0;
}
.task-row .check.done {
  background: var(--green);
  border-color: var(--green);
  color: #0b2a1a;
}
.task-row .grow {
  flex: 1;
  min-width: 0;
}
.task-row .title {
  display: block;
  font-weight: 500;
}
.task-row .title.done {
  color: var(--fg-3);
  text-decoration: line-through;
}
.task-row .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}
.task-row .due.late {
  color: var(--red);
  font-weight: 600;
}
.task-row .due.soon {
  color: var(--orange);
  font-weight: 600;
}
.prio {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: transparent;
}
.prio.high {
  background: var(--orange);
}
.prio.urgent {
  background: var(--red);
}
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.board .col {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  min-height: 200px;
}
.board .col h3 {
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--fg-2);
}
.board .task-row {
  border-color: transparent;
  background: var(--bg-3);
}
.comment {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}
.comment .text {
  white-space: pre-wrap;
  word-break: break-word;
}
.comment time {
  color: var(--fg-3);
  font-size: 12px;
  margin-left: 8px;
}

/* ---------- agenda ---------- */
.agenda-day {
  margin-bottom: 18px;
}
.agenda-day h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.agenda-day h3.today {
  color: var(--accent);
}
.event {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
}
.event + .event {
  margin-top: 6px;
}
.event:hover {
  background: var(--bg-3);
}
.event .time {
  width: 58px;
  flex: 0 0 58px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}
.event .time small {
  display: block;
  color: var(--fg-3);
  font-weight: 400;
  font-size: 12px;
}
.event .bar {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
}
.event .grow {
  flex: 1;
  min-width: 0;
}
.event .title {
  font-weight: 500;
  display: block;
}
.event .meta {
  color: var(--fg-3);
  font-size: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.week .day {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  min-height: 120px;
}
.week .day h4 {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.week .day h4.today {
  color: var(--accent);
}
.week .mini {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg-3);
  margin-bottom: 4px;
  cursor: pointer;
  border-left: 3px solid var(--blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week .mini b {
  font-weight: 600;
  margin-right: 4px;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timeline .ms {
  display: flex;
  gap: 12px;
  align-items: center;
}
.timeline .ms .d {
  width: 84px;
  flex: 0 0 84px;
  color: var(--fg-3);
  font-size: 13px;
}
.timeline .ms .n {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
}

/* ---------- actividad ---------- */
.act {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  background: none;
  border: 0;
}
.act:hover {
  background: var(--bg-3);
}
.act.unread {
  background: rgba(209, 154, 106, 0.07);
}
.act .t {
  flex: 1;
  min-width: 0;
}
.act .t b {
  font-weight: 600;
}
.act .t .when {
  color: var(--fg-3);
  font-size: 12px;
  margin-left: 6px;
}

/* ---------- flujos ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.step .n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 26px;
}
.step .tool {
  font-weight: 600;
}
.step .action {
  color: var(--fg-2);
}
.step .notes {
  color: var(--fg-3);
  font-size: 13px;
  margin-top: 2px;
}
.step .min {
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
}
.step-editor {
  display: grid;
  grid-template-columns: 1fr 2fr 80px auto;
  gap: 8px;
  align-items: start;
}
@media (max-width: 700px) {
  .step-editor {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- acceso ---------- */
.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(
      1200px 600px at 50% -10%,
      rgba(209, 154, 106, 0.1),
      transparent 60%
    ),
    var(--bg);
}
.login-box {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-box img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.login-box h1 {
  font-size: 22px;
  margin-bottom: 4px;
}
.login-box p {
  color: var(--fg-3);
  margin-bottom: 22px;
}
.login-box .input {
  text-align: center;
  font-size: 17px;
  min-height: 48px;
}
.login-box .code {
  letter-spacing: 0.4em;
  font-family: var(--mono);
  font-size: 24px;
}
.login-box form {
  text-align: left;
}
.login-box .btn {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
}
/* Entrar con Google: arriba y grande, en blanco como lo pide Google. */
.login-box .login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 0 0 4px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.login-box .login-google:hover {
  background: #f6f8fa;
}
.login-box .login-google.primera {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.login-o {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  color: var(--fg-3);
  font-size: 13px;
}
.login-o::before,
.login-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.login-box .login-pie {
  margin: 16px 0 0;
  font-size: 13px;
  text-align: center;
}
.login-box .enlace {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.login-box .dev {
  margin-top: 16px;
  padding: 10px;
  background: var(--bg-3);
  border-radius: 10px;
  font-size: 13px;
  color: var(--fg-2);
}

/* ---------- móvil ---------- */
.fab {
  display: none;
}
@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .main {
    /* Barra inferior + botón flotante + safe area: la última fila de
       cualquier lista tiene que quedar accesible, no debajo del botón. */
    padding-bottom: calc(var(--tabbar) + 72px + env(safe-area-inset-bottom));
  }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    z-index: 30;
  }
  .tabbar a,
  .tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--fg-3);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    background: none;
    border: 0;
    position: relative;
  }
  .tabbar a.active {
    color: var(--accent);
  }
  .tabbar .ico {
    width: 28px;
    height: 28px;
  }
  .tabbar .count {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    padding: 1px 5px;
    min-width: 16px;
  }
  .chat {
    height: calc(100dvh - var(--topbar) - var(--tabbar));
  }
  .chat-list {
    width: 100%;
    flex: 1;
    border-right: 0;
  }
  .chat.viewing .chat-list {
    display: none;
  }
  .chat:not(.viewing) .chat-main {
    display: none;
  }
  .content {
    padding: 12px;
  }
  .stat-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .stat b {
    font-size: 18px;
  }
  .week {
    display: flex;
    flex-direction: column;
  }
  .fab {
    display: flex;
    position: fixed;
    right: 16px;
    bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    box-shadow: var(--shadow);
    align-items: center;
    justify-content: center;
    z-index: 31;
    cursor: pointer;
  }
  .fab .ico {
    width: 26px;
    height: 26px;
  }
  .hide-mobile {
    display: none !important;
  }
}
@media (min-width: 901px) {
  .hide-desktop {
    display: none !important;
  }
}

.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.more-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.more-grid a .ico {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-4);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
}
.notice {
  background: rgba(209, 154, 106, 0.08);
  border: 1px solid rgba(209, 154, 106, 0.35);
  color: var(--fg-2);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}

/* ---------- Sistema visual: tipografía, botones, campos ---------- */
body {
  font-size: 15px;
  line-height: 1.53;
}
/* El apretado extremo solo tiene sentido en títulos grandes. */
h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
h2 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.muted,
.hint,
.meta,
.desc,
.tiny {
  color: var(--fg-3);
}
.meta,
.desc {
  font-size: 13px;
  line-height: 19px;
}
.tiny {
  font-size: 12px;
  line-height: 16px;
}
/* Dinero, plazos y cualquier cifra en columna: ancho fijo por dígito. */
.num,
.finance-entry strong,
.finance-stat h2,
.stat-value {
  font-variant-numeric: tabular-nums;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  touch-action: manipulation;
}

/* Cuatro jerarquías de botón, cada una con sus estados. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}
.btn:hover:not(:disabled) {
  background: var(--bg-3);
}
.btn:active:not(:disabled) {
  background: var(--bg-4);
}
.btn .ico,
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn.sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13.5px;
}
.btn.sm .ico,
.btn.sm svg {
  width: 18px;
  height: 18px;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 650;
}
.btn.primary:hover:not(:disabled),
.btn.primary:active:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--fg);
  border-color: transparent;
}
.btn.ghost:active:not(:disabled) {
  background: var(--bg-4);
}
.btn.danger,
.btn.rojo {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 60%, transparent);
  background: var(--bg-2);
  font-weight: 650;
}
.btn.danger:hover:not(:disabled),
.btn.rojo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 16%, var(--bg-2));
}
/* Desactivado real: se lee, pero se ve que no se puede pulsar. */
.btn:disabled {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--fg-3);
  cursor: not-allowed;
  opacity: 1;
}
.btn.primary:disabled {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--fg-3);
}
.btn.icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
}
.btn.icon.sm {
  width: 36px;
  min-height: 36px;
}
/* Foco visible en cualquier superficie. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Un filtro activo no es un botón principal. */
.chip.active,
.chips .active,
[aria-pressed="true"]:not(.btn.primary) {
  background: var(--bg-4);
  border-color: var(--teal);
  color: var(--fg);
}

.input,
.select,
.textarea {
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  padding: 10px 12px;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--fg-3);
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.field .hint {
  font-size: 12px;
}
.sidebar {
  background: var(--bg-2);
  padding: 8px 6px;
}
.brand {
  padding: 24px 16px 28px;
  gap: 12px;
}
.brand img {
  border-radius: 13px;
  width: 42px;
  height: 42px;
}
.brand b {
  letter-spacing: -0.025em;
}
.brand small {
  font-size: 12px;
  color: var(--fg-3);
}
.nav {
  padding: 0 8px;
}
.nav-item {
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 3px;
}
.nav-item.active {
  background: var(--bg-4);
  color: var(--fg);
  box-shadow: inset 3px 0 var(--teal);
}
.nav-item.active .ico {
  color: var(--teal);
}
.nav-title {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 24px;
}
.sidebar-footer {
  padding: 16px 12px;
}
.topbar {
  padding: 0 32px;
  background: var(--bg);
  backdrop-filter: none;
}
.topbar h1 {
  font-size: 19px;
  letter-spacing: -0.025em;
}
.content {
  padding: 30px 32px 48px;
}
.card {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 8px #00000005;
}
.card + .card {
  margin-top: 20px;
}
.card-title {
  margin-bottom: 20px;
}
.card-title h2 {
  font-size: 16px;
  font-weight: 650;
}
.card-title a {
  font-weight: 600;
}
/* Inicio es un panel de estado, y un panel se mira de una vez: si hay que
   bajar con la rueda para ver si algo va mal, no sirve. Tres columnas, cada
   tarjeta acotada por alto y con su propia rueda, y el saludo en una línea. */
.today-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.today-grid > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* La rejilla ocupa lo que queda de pantalla y las tarjetas se reparten esa
   altura. Con un tope fijo quedaba medio Inicio vacío por debajo. */
.content.inicio {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar) - var(--pestanas));
}
.content.inicio .today-grid {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.today-grid .card {
  padding: 11px 13px;
  overflow: auto;
  min-height: 0;
}
.content.inicio .today-grid > div > .card {
  flex: 1 1 0;
}
/* Equipo y Últimos archivos dicen poco: que no se estiren como los demás. */
.content.inicio .today-grid > div > .card:nth-child(n + 2) {
  flex: 0 0 auto;
}
.today-grid .card-title {
  margin-bottom: 8px;
}
.today-grid .card h2 {
  font-size: 0.98rem;
}
.hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 10px;
  margin: 0;
}
.hero-texto {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.hero h1 {
  font-size: 21px;
  line-height: 28px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero .date {
  color: var(--fg-3);
  font-size: 12.5px;
  white-space: nowrap;
}
.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
}
.hero .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.hero-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
/* Capturas de prueba: un botón como los otros, en su amarillo. */
.btn.rodaje {
  background: #ffb020;
  border-color: #ffb020;
  color: #111;
}
.btn.rodaje:hover {
  background: #ffc04d;
  border-color: #ffc04d;
  color: #111;
}
/* Las cifras, en una fila de fichas bajas: el número y su rótulo al lado, no
   uno encima de otro con un palmo de aire alrededor. */
.stat-row {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.stat {
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 9px 13px;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat b {
  font-size: 21px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.03em;
  display: inline;
}
.stat span {
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.25;
}
.stat:after {
  content: "";
  position: absolute;
  right: 22px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.stat:nth-child(2):after {
  background: var(--accent);
}
.stat:nth-child(3):after {
  background: var(--blue);
}
.event {
  padding: 14px 4px;
  gap: 14px;
}
.event .time {
  font-variant-numeric: tabular-nums;
}
.event .title {
  font-weight: 550;
}
.event .bar {
  border-radius: 3px;
}
.avatar {
  border-radius: 11px;
}
.avatar.sm {
  border-radius: 8px;
}
.badge {
  font-size: 12px;
  padding: 3px 9px;
  font-weight: 550;
}
.badge.deferred {
  background: var(--bg-4);
  color: var(--yellow);
}
.badge.cancelled {
  background: var(--bg-4);
  color: var(--fg-3);
  text-decoration: line-through;
}
.count {
  font-variant-numeric: tabular-nums;
}
.segmented {
  padding: 4px;
  border-radius: 11px;
  gap: 3px;
}
.segmented button {
  padding: 7px 13px;
  min-height: 34px;
  border-radius: 8px;
}
.segmented button.active {
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: 0 1px 5px #0002;
}
.chat-list {
  background: var(--bg);
  width: 250px;
  flex: 0 0 250px;
  padding: 8px 12px;
  overflow-y: auto;
}
.chan {
  padding: 9px 12px;
  border-radius: 9px;
  min-height: 40px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.chan.active {
  background: var(--bg-4);
  color: var(--fg);
}
.transcript {
  padding: 14px;
  background: var(--bg-3);
  border-left: 2px solid var(--teal);
  margin-top: 10px;
}
.page-intro {
  margin-bottom: 14px;
}
.page-intro h2 {
  font-size: 23px;
  margin: 3px 0 2px;
  color: var(--fg);
}
.page-intro p {
  color: var(--fg-2);
  font-size: 0.86rem;
  margin: 0;
}
.personal-grid {
  display: grid;
  /* 250px y 140px de alto por ficha llenaban la pantalla con seis cosas.
     Con carpetas y archivos, que solo llevan icono y nombre, cabe el doble. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.personal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 0;
  overflow-wrap: anywhere;
  /* El globo de la descripción se cuelga de la tarjeta; sin esto se colgaba
     de la página entera y aparecía a metros del enlace. */
  position: relative;
}
.personal-card .row {
  justify-content: space-between;
}
.personal-card h3 {
  font-size: 18px;
  margin: 12px 0;
}
.personal-card h3 input {
  margin-right: 12px;
}
/* El cuerpo de un pendiente o un enlace: se lee, no se edita aquí. */
.apunte-cuerpo {
  color: var(--fg-2);
  font-size: 14px;
  white-space: pre-wrap;
  margin: 6px 0 10px;
}
.apunte-editar {
  color: var(--fg-3);
  font-size: 13px;
  text-decoration: underline;
}
.apunte-editar:hover {
  color: var(--fg);
}
.personal-card .note-preview {
  color: var(--fg-2);
  font-size: 14px;
}
.note-preview p {
  min-height: 1em;
  margin: 5px 0;
}
.text-button,
.folder-link {
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.folder-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  padding: 18px 0;
}
.login {
  background:
    radial-gradient(ellipse at 15% 30%, #4d71613b, transparent 55%),
    radial-gradient(ellipse at 85% 80%, #91634022, transparent 50%), var(--bg);
}
.login-box {
  border-radius: 24px;
  border: 1px solid var(--line-2);
  padding: 48px;
  width: min(440px, calc(100vw - 32px));
  box-shadow: 0 24px 80px #0002;
  background: var(--bg-2);
}
.login-box > img {
  border-radius: 20px;
  width: 72px;
  height: 72px;
}
.login-box h1 {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.login-box > p {
  margin: 8px 0 30px;
  color: var(--fg-3);
}
.modal {
  border-radius: 18px;
  border-color: var(--line-2);
  box-shadow: 0 24px 100px #0006;
}
.modal-head,
.modal-foot {
  padding: 20px 24px;
}
.modal-body {
  padding: 24px;
}
.modal-head h2 {
  font-size: 20px;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.toolbar.wrap {
  flex-wrap: wrap;
}
/* Editable workflow canvas */
.graph-editor {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-2);
}
.graph-editor > .toolbar {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.graph-body {
  display: flex;
  min-height: 640px;
}
.graph-viewport {
  flex: 1;
  min-width: 0;
  height: 640px;
  overflow: auto;
  touch-action: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 20px 20px;
}
.graph-canvas {
  position: relative;
}
.graph-lines {
  position: absolute;
  overflow: visible;
  color: var(--teal);
}
.graph-lines > path,
.graph-arista > path:first-child {
  stroke: var(--teal);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.65;
}
/* Cada conexión se elige con un clic (y se quita con Supr): la franja de
   alrededor, invisible, es la que recibe el clic. */
.graph-arista-zona {
  stroke: transparent;
  stroke-width: 16;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}
.graph-arista:hover > path:first-child {
  stroke-width: 2;
  opacity: 1;
}
.graph-arista.elegida > path:first-child {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 1;
}
.graph-arista.elegida {
  color: var(--accent);
}
/* La conexión que se está arrastrando, hasta soltarla sobre otro paso. */
.graph-arista-nueva {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  fill: none;
  pointer-events: none;
}
.graph-viewport.conectando {
  cursor: crosshair;
}
.graph-arista-quitar {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: var(--shadow);
  cursor: pointer;
}
/* Los puntos de entrada y salida de cada paso, a la altura de las
   conexiones. Con un margen invisible alrededor: se aciertan con el dedo. */
.graph-puerto {
  position: absolute;
  top: calc(65px - 8px);
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: var(--bg-2);
  cursor: crosshair;
  touch-action: none;
  transition: transform 0.12s ease;
}
.graph-puerto::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.graph-puerto.salida {
  right: -9px;
}
.graph-puerto.entrada {
  left: -9px;
  border-color: var(--line-2);
}
.graph-puerto:hover,
.graph-node:focus-visible .graph-puerto.salida {
  transform: scale(1.25);
  background: var(--teal);
}
.graph-node.destino {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Otra persona editando, o una versión más nueva que la tuya. */
.graph-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 16%, var(--bg-2));
  color: var(--fg);
  font-size: 0.9rem;
}
.graph-aviso > .ico {
  flex: 0 0 auto;
  color: var(--yellow);
}
.graph-aviso.conflicto {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-2));
}
.graph-aviso.conflicto > .ico {
  color: var(--red);
}
.graph-node {
  position: absolute;
  width: 230px;
  min-height: 150px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--bg-2);
  padding: 18px;
  box-shadow: 0 5px 16px #0002;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.graph-node.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 30%, transparent);
}
.graph-node b {
  display: block;
  font-size: 16px;
  margin: 10px 0;
}
.graph-node p {
  font-size: 12px;
  color: var(--fg-2);
  margin-bottom: 10px;
}
.node-inspector {
  width: 270px;
  flex-shrink: 0;
  padding: 18px;
  max-height: 640px;
  overflow: auto;
  border-left: 1px solid var(--line);
}
.node-inspector h3 {
  margin-bottom: 20px;
}
.node-inspector .btn {
  margin-bottom: 10px;
}
.node-inspector textarea {
  font-size: 13px;
}
/* Calendar and production schedule */
.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
/* La fila de arriba manda: navegación a la izquierda, vistas a la derecha.
   Los filtros ocupan su propia línea para que no partan el selector. */
.calendar-toolbar > .row {
  order: 1;
  margin-right: auto;
}
.calendar-toolbar > .segmented {
  order: 2;
}
/* El Gantt cierra la fila, a la derecha del grupo de vistas: sin `order` se
   colaba delante de la navegación, que es donde menos pinta. */
.calendar-toolbar > .gantt-boton {
  order: 2;
}
.calendar-toolbar > .agenda-filtros {
  order: 3;
  flex: 1 0 100%;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.calendar-toolbar h2 {
  font-size: 20px;
  margin-left: 10px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.weekday {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  border-right: 1px solid var(--line);
}
.calendar-cell {
  min-height: 145px;
  padding: 10px 8px;
  position: relative;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  user-select: none;
}
.calendar-cell.outside {
  background: var(--bg);
  color: var(--fg-3);
}
.day-number {
  border: 0;
  background: none;
  color: inherit;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 12px;
}
.calendar-cell.today .day-number {
  background: var(--teal);
  color: var(--bg-2);
  font-weight: 700;
}
.calendar-event {
  display: block;
  width: 100%;
  border: 0;
  border-left: 3px solid var(--teal);
  background: var(--bg-3);
  color: var(--fg);
  border-radius: 5px;
  padding: 6px 8px;
  margin: 5px 0;
  text-align: left;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.4;
}
.calendar-event time {
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.add-event {
  background: none;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 10px;
  opacity: 0;
  width: 28px;
  height: 28px;
}
.calendar-cell:hover .add-event,
.add-event:focus-visible {
  opacity: 1;
}
.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.month-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 20px;
  text-align: left;
  cursor: pointer;
}
.month-tile > b {
  text-transform: capitalize;
  color: var(--teal);
}
.mini-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  font-size: 11px;
  margin-top: 20px;
}
/* ---------- Agenda por horas: día y semana (components/AgendaRejilla.tsx) ----------
   Cada evento ocupa su franja real (una hora = --hora) y se agarra para
   moverlo o estirarlo. Sustituye a la rejilla de casillas de una hora, donde
   una reunión de tres horas se veía igual que una de quince minutos. */
.agenda-rejilla {
  --col-horas: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
}
.agenda-cabeza,
.agenda-cuerpo {
  display: grid;
  grid-template-columns: var(--col-horas) repeat(
      var(--dias),
      minmax(110px, 1fr)
    );
}
.agenda-cabeza {
  border-bottom: 1px solid var(--line);
  /* El hueco de la barra de scroll del cuerpo, para que las columnas casen. */
  scrollbar-gutter: stable;
  overflow: hidden;
}
.agenda-dia-nombre {
  padding: 10px 6px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-2);
  text-transform: capitalize;
  border-left: 1px solid var(--line);
}
.agenda-dia-nombre[data-hoy] {
  color: var(--accent);
  font-weight: 700;
}
.agenda-hora-etiqueta {
  font-size: 12px;
  color: var(--fg-3);
  padding: 6px 4px;
  border-top: 1px solid var(--line);
}
.agenda-todo-dia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 26px;
  padding: 3px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.agenda-cuerpo {
  position: relative;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  user-select: none;
}
.agenda-horas {
  display: flex;
  flex-direction: column;
}
.agenda-hora {
  height: var(--hora);
  flex: none;
  font-size: 12px;
  color: var(--fg-3);
  text-align: right;
  padding-right: 6px;
  transform: translateY(-6px);
}
.agenda-columna {
  position: relative;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.agenda-columna[data-hoy] {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.agenda-hueco {
  height: var(--hora);
  border-bottom: 1px solid var(--line);
  cursor: cell;
}
.agenda-hueco:hover {
  background: var(--bg-3);
}
.agenda-hueco[data-marcado] {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.agenda-ahora {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  z-index: 3;
  pointer-events: none;
}
.agenda-ahora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.agenda-evento {
  position: absolute;
  z-index: 2;
  display: flex;
  overflow: hidden;
  border-radius: 6px;
  border-left: 3px solid var(--ev, var(--teal));
  background: color-mix(in srgb, var(--ev, var(--teal)) 24%, var(--bg-2));
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.agenda-evento[data-activo] {
  z-index: 4;
  box-shadow: var(--shadow-alta);
  opacity: 0.92;
}
.agenda-evento-cuerpo {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 3px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: grab;
  overflow: hidden;
}
.agenda-rejilla[data-arrastrando="mover"] .agenda-evento-cuerpo {
  cursor: grabbing;
}
.agenda-evento-cuerpo:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.agenda-evento-cuerpo time {
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  font-size: 12px;
}
.agenda-evento-titulo {
  font-weight: 600;
}
.agenda-evento[data-corto] .agenda-evento-cuerpo {
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 1px;
}
/* Los bordes que se agarran para cambiar la duración. */
.agenda-asa {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
  touch-action: none;
}
.agenda-asa.arriba {
  top: 0;
}
.agenda-asa.abajo {
  bottom: 0;
}
.agenda-evento[data-corto] .agenda-asa {
  height: 4px;
}
.agenda-evento:hover .agenda-asa::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 2px;
  background: var(--ev, var(--teal));
}
.agenda-asa.arriba::after {
  top: 1px;
}
.agenda-asa.abajo::after {
  bottom: 1px;
}
.agenda-rejilla[data-arrastrando="arriba"],
.agenda-rejilla[data-arrastrando="abajo"] {
  cursor: ns-resize;
}
.agenda-evento-dia {
  position: static;
  display: block;
  width: 100%;
  padding: 2px 6px;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Color por tipo de evento, con las variables del tema: así cambia con el
   tema claro u oscuro y con la paleta. Lo usan la rejilla por horas, el mes,
   los eventos de varios días y la leyenda. */
[data-tipo="meeting"] {
  --ev: var(--blue);
}
[data-tipo="milestone"] {
  --ev: var(--violet);
}
[data-tipo="deadline"] {
  --ev: var(--red);
}
[data-tipo="training"] {
  --ev: var(--green);
}
[data-tipo="shoot"] {
  --ev: var(--orange);
}
[data-tipo="delivery"] {
  --ev: var(--yellow);
}
.calendar-event[data-tipo] {
  border-left-color: var(--ev);
  background: color-mix(in srgb, var(--ev) 22%, var(--bg-2));
  touch-action: none;
}
.calendar-event[data-arrastrando] {
  opacity: 0.5;
}
.calendar-cell[data-destino] {
  outline: 2px dashed var(--ev, var(--accent));
  outline-offset: -3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.calendar-long-event[data-tipo] {
  background: color-mix(in srgb, var(--ev) 38%, var(--bg-2));
  color: var(--fg);
}
.agenda-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--fg-3);
}
.agenda-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agenda-leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ev);
}
.gantt-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 65vh;
}
/* ---------- El Gantt: botón propio y pantalla completa ---------- */
/* Metido en el grupo de vistas parecía una más. Es la pantalla donde se
   planifica el trabajo, así que va aparte y se ve desde la puerta. */
.gantt-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  min-height: 34px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.gantt-boton:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.gantt-boton.activo {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}
.gantt-boton .ico {
  width: 17px;
  height: 17px;
}
.gantt-caja.pleno {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}
.gantt-caja.pleno .gantt-scroll {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.gantt-meses {
  height: 22px;
  display: flex;
  align-items: center;
  background: var(--bg-3);
  font-size: 10px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 5;
}
.gantt-meses > b {
  position: sticky;
  left: 0;
  height: 22px;
  background: var(--bg-3);
}
/* Una banda por mes, alternando el fondo. Es lo que pedía Javi: saber de qué
   mes es el 16 sin tener que contar los días hacia atrás. */
.gantt-meses > span {
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  border-left: 1px solid var(--line-2);
  color: var(--fg-2);
  text-transform: capitalize;
}
.gantt-meses > span.impar {
  background: var(--bg-4);
}
.gantt-head {
  height: 22px;
  display: flex;
  align-items: center;
  background: var(--bg-3);
  font-size: 10px;
  position: sticky;
  top: 22px;
  z-index: 4;
}
.gantt-head > b {
  padding: 0 10px;
  height: 22px;
  line-height: 22px;
  position: sticky;
  left: 0;
  background: var(--bg-3);
}
.gantt-head > span {
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: var(--fg-3);
}
.gantt-head > span.finde {
  background: color-mix(in srgb, var(--bg-4) 60%, transparent);
}
.gantt-row {
  height: 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: var(--bg-2);
}
/* Las filas de resumen —proyecto y bloque— se distinguen del detalle. */
.gantt-row.resumen {
  background: var(--bg-3);
}
.gantt-row.nivel-0 {
  border-top: 2px solid var(--line-2);
}
.gantt-label {
  position: sticky;
  left: 0;
  z-index: 3;
  height: 34px;
  padding: 0 10px;
  background: inherit;
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.gantt-label .grow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.gantt-label b {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-row.nivel-2 .gantt-label b {
  font-weight: 500;
}
.gantt-label small {
  font-size: 10px;
  color: var(--fg-3);
  white-space: nowrap;
  flex: none;
}
/* La flechita de plegar: gira, para que se vea si está abierto o cerrado. */
.gantt-flecha {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  transition: transform 0.12s;
}
.gantt-flecha.abierta {
  transform: rotate(90deg);
}
.gantt-bar {
  position: absolute;
  top: 20px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #151d18;
  font-weight: 600;
  text-align: left;
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  cursor: pointer;
}
/* Un hito: una entrega cae en un día, y un día no es una barra. El rombo
   es como se marca un hito en cualquier Gantt, y además se distingue de un
   tramo de trabajo de un solo vistazo. */
.gantt-bar.hito {
  height: 16px;
  top: 25px;
  padding: 0;
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px var(--bg);
}
.gantt-bar.done {
  opacity: 0.5;
}
.gantt-bar.cancelled {
  opacity: 0.3;
  text-decoration: line-through;
}
.gantt-dependencies {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0.65;
}
@media (hover: none) {
  .add-event {
    opacity: 1;
  }
}
@media (max-width: 1100px) {
  .chat-list {
    width: 215px;
    flex-basis: 215px;
  }
  .year-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .content {
    padding: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .node-inspector {
    width: 235px;
  }
}
@media (max-width: 760px) {
  :root {
    --topbar: 65px;
  }
  .content {
    padding: 20px 16px 100px;
  }
  .topbar {
    padding: 10px 16px;
    height: auto;
    min-height: 60px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar h1 {
    font-size: 18px;
  }
  .topbar .sub {
    font-size: 12px;
  }
  .hero {
    padding: 8px 0 22px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero .date {
    font-size: 12px;
  }
  .stat-row {
    gap: 8px;
  }
  .stat {
    padding: 14px 12px;
  }
  .stat b {
    font-size: 26px;
  }
  .stat span {
    font-size: 12px;
  }
  .stat:after {
    display: none;
  }
  .card {
    padding: 18px;
  }
  .btn.sm,
  .btn.icon.sm {
    min-height: 40px;
  }
  .btn.icon.sm {
    width: 40px;
  }
  .tabbar {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a.active {
    color: var(--teal);
  }
  .chat-list {
    width: 100%;
    flex-basis: auto;
    padding: 8px 16px;
  }
  .chat.viewing .chat-list {
    display: none;
  }
  .personal-grid {
    grid-template-columns: 1fr;
  }
  .toolbar.wrap {
    gap: 8px;
  }
  .page-intro h2 {
    font-size: 28px;
  }
  .calendar-toolbar {
    gap: 12px;
  }
  .calendar-toolbar .row {
    gap: 6px;
  }
  .calendar-toolbar h2 {
    font-size: 15px;
    margin-left: 4px;
  }
  .calendar-toolbar .segmented {
    width: 100%;
    overflow: auto;
  }
  .calendar-toolbar .segmented button {
    padding: 6px 10px;
    flex: 1;
  }
  .calendar-grid {
    overflow: visible;
    border-radius: 0;
  }
  .calendar-cell {
    padding: 4px 2px;
    min-height: 110px;
  }
  .calendar-event {
    font-size: 9px;
    padding: 4px 2px;
    border-left-width: 2px;
  }
  .weekday {
    padding: 8px 1px;
    font-size: 12px;
  }
  .day-number {
    font-size: 11px;
    width: 24px;
    height: 24px;
  }
  .add-event {
    position: static;
    font-size: 14px;
  }
  .year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .month-tile {
    padding: 12px;
  }
  .mini-month {
    gap: 5px;
    font-size: 10px;
  }
  .graph-body {
    display: block;
  }
  .graph-viewport {
    height: 440px;
  }
  .node-inspector {
    width: 100%;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .graph-editor > .toolbar {
    gap: 6px;
  }
  .graph-editor > .toolbar .hint.grow {
    display: none;
  }
  .login-box {
    padding: 30px 24px;
  }
  .modal {
    max-height: 90dvh;
  }
  .modal-head,
  .modal-body,
  .modal-foot {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Panel de ajustes del correo. */
.ajustes-correo fieldset {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.ajustes-correo legend {
  padding: 0 6px;
  color: var(--fg-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ajustes-correo .opciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ajustes-correo .opcion {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 13px;
  cursor: pointer;
}
.ajustes-correo .opcion.activa {
  border-color: var(--accent);
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  font-weight: 600;
}
.ajustes-correo .check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--fg-2);
  cursor: pointer;
}
.visor {
  min-height: 300px;
  height: 74dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.visor.completo {
  height: calc(100dvh - 170px);
}
.visor-titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.visor-controles {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.visor-buscar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
}
.visor-buscar input {
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 13px;
  width: 190px;
  outline: none;
}
.visor-pagina {
  font-size: 12.5px;
  color: var(--fg-2);
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.visor-imagen {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #fff;
  margin: auto;
}
.visor-marco {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: #fff;
}
.visor-texto {
  align-self: stretch;
  width: 100%;
  overflow: auto;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Imagen: zoom con la rueda y arrastre, sin mover el resto del visor. */
.lienzo {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    linear-gradient(45deg, #1b201d 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #1b201d 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #1b201d 75%) 0 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #1b201d 75%) 0 0/20px 20px,
    #131715;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.lienzo:active {
  cursor: grabbing;
}
.lienzo img {
  transform-origin: center center;
  max-width: none;
  max-height: none;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lienzo img.ajustada {
  max-width: 100%;
  max-height: 100%;
}
.lienzo-ayuda {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #e8efe9;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}

/* Hoja de cálculo: cabeceras fijas, desplazamiento en los dos ejes y pestañas. */
.hoja-envoltura {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.hoja-tabla {
  flex: 1;
  overflow: auto;
}
.hoja-tabla table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
}
.hoja-tabla th,
.hoja-tabla td {
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 4px 9px;
  white-space: pre;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hoja-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-3);
  color: var(--fg-3);
  font-weight: 600;
  text-align: center;
  min-width: 90px;
}
.hoja-tabla th.num,
.hoja-tabla th.esquina {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-3);
  color: var(--fg-3);
  text-align: right;
  min-width: 44px;
  font-weight: 500;
}
.hoja-tabla th.esquina {
  z-index: 4;
}
.hoja-tabla td {
  color: var(--fg);
  background: var(--bg);
}
.hoja-tabla td.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hoja-pestanas {
  display: flex;
  gap: 2px;
  padding: 5px 8px;
  border-top: 1px solid var(--line);
  background: var(--bg-3);
  overflow-x: auto;
}
.hoja-pestanas button {
  flex: none;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 7px 7px 0 0;
  background: none;
  color: var(--fg-3);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.hoja-pestanas button.activa {
  background: var(--bg);
  border-color: var(--line);
  color: var(--fg);
  font-weight: 600;
}

/* Documento: hojas blancas como en Word, no un volcado de texto. */
.doc-hojas {
  flex: 1;
  overflow: auto;
  padding: 18px 0;
  background: #14181600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.doc-pagina {
  width: 794px;
  max-width: 96%;
  min-height: 1000px;
  padding: 74px 68px;
  background: #fff;
  color: #1c2320;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font:
    15px/1.55 "Times New Roman",
    Georgia,
    serif;
}
.doc-pagina h1 {
  font-size: 26px;
  margin: 0 0 14px;
}
.doc-pagina h2 {
  font-size: 21px;
  margin: 18px 0 10px;
}
.doc-pagina h3 {
  font-size: 17px;
  margin: 16px 0 8px;
}
.doc-pagina p {
  margin: 0 0 10px;
}
.doc-pagina ul {
  margin: 0 0 12px;
  padding-left: 26px;
}
.doc-pagina mark {
  background: #ffe066;
  color: inherit;
}
.doc-pagina .doc-tabla {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 14px;
}
.doc-pagina .doc-tabla td {
  border: 1px solid #b9c2bd;
  padding: 5px 8px;
  vertical-align: top;
  font-size: 14px;
}
.doc-pagina hr.salto-pagina {
  display: none;
}

/* Presentación: una tarjeta por diapositiva. */
.diapositivas {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
}
.diapositiva {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 16px 18px;
}
.diapositiva header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.diapositiva header .num {
  font-size: 11.5px;
  color: var(--fg-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 1px 8px;
}
.diapositiva h3 {
  margin: 0;
  font-size: 16.5px;
}
.diapositiva ul {
  margin: 10px 0 0;
  padding-left: 22px;
  color: var(--fg-2);
}
.diapositiva .notas {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
  color: var(--fg-3);
  font-size: 12.5px;
}
.vista-tabla {
  border-collapse: collapse;
  margin: 8px 0 14px;
  width: 100%;
}
.vista-tabla td {
  border: 1px solid var(--line-2);
  padding: 6px 9px;
  font-size: 13px;
  vertical-align: top;
}

/* ---------- Barra de formato ---------- */
.fmt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}
.fmt-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  margin-right: 4px;
  border-right: 1px solid var(--line);
}
.fmt-group:last-child {
  border-right: 0;
}
.fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}
.fmt-btn:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.fmt-btn.on {
  background: var(--bg);
  color: var(--accent);
}
.fmt-btn .ico {
  width: 16px;
  height: 16px;
}
.fmt-select {
  height: 30px;
  max-width: 140px;
  padding: 0 6px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12.5px;
  cursor: pointer;
}
.fmt-select.narrow {
  max-width: 82px;
}
.fmt-pop-wrap {
  position: relative;
  display: flex;
  gap: 2px;
}
.fmt-pop {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 5;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.fmt-swatches {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  gap: 6px;
}
.fmt-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
}
.fmt-pop-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.fmt-inline {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.mail-editor {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  margin: 14px 0 0;
  overflow: hidden;
  background: var(--bg-2);
}
.mail-editor-body {
  min-height: 250px;
  max-height: 46vh;
  overflow: auto;
  padding: 16px;
  outline: none;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.6;
}
.mail-editor-body:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.mail-editor-body p {
  margin: 0 0 10px;
}
.mail-editor-body ul,
.mail-editor-body ol {
  padding-left: 24px;
}
.mail-editor-body blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--line-2);
  color: var(--fg-2);
}
.mail-editor-body a {
  color: var(--accent);
}
.mail-editor-body img {
  max-width: 100%;
}
.mail-editor-body pre {
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
}
.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;
}

.calendar-long-event {
  z-index: 2;
  align-self: start;
  height: 23px;
  margin-left: 3px;
  margin-right: 3px;
  border: 0;
  border-radius: 5px;
  padding: 3px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #101a18;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.calendar-long-event:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ---------- Pestañas y paneles ---------- */
.tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px 10px 0;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  flex: none;
  overflow: visible;
}
/* La lista se desplaza en horizontal: la barra nunca crece hacia abajo. */
.tabs-lista {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}
.tabs-lista::-webkit-scrollbar {
  height: 4px;
}
.tab {
  display: flex;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  max-width: 220px;
  touch-action: none;
}
.tab.activa {
  background: var(--bg);
  border-color: var(--line);
}
.tab-abrir {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 6px 8px 11px;
  border: 0;
  background: none;
  color: var(--fg-3);
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
  touch-action: none;
}
.tab.activa .tab-abrir {
  color: var(--fg);
  font-weight: 600;
}
.tab-abrir span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-abrir .ico {
  width: 15px;
  height: 15px;
  flex: none;
}
.tab-cerrar {
  border: 0;
  background: none;
  color: var(--fg-3);
  padding: 0 8px 0 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tab-cerrar:hover {
  color: #d16a6a;
}
.tab-cerrar .ico {
  width: 13px;
  height: 13px;
}
.tab-nueva,
.tab-dividir {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px 6px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12.5px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.tab-nueva:hover,
.tab-dividir:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--accent);
}
.tab-dividir.on {
  color: var(--accent);
  border-color: var(--accent);
}
.tab-nueva .ico,
.tab-dividir .ico {
  width: 15px;
  height: 15px;
}
/* Aquí había un .tab-menu de cuando «Dividir» era un desplegable debajo del
   «+»: position absolute, 38 px más abajo y 190 px de ancho. El botón de
   dividir de cada pestaña se llama igual (más abajo, «Pestañas: dividir la
   pantalla») y heredaba todo eso: quedaba fuera de la barra y no se veía.
   Ni .tab-menu-wrap ni aquel desplegable se usan ya. */

/* Área de trabajo: una pantalla, o mosaico de 2 a 4 paneles. */
.paneles {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.panel.oculto {
  display: none;
}
.paneles.mosaico {
  display: grid;
  grid-template-columns: var(--corte-c, 50%) minmax(0, 1fr);
  grid-template-rows: var(--corte-f, 50%) minmax(0, 1fr);
  gap: 0;
}
.paneles.mosaico .panel {
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
.paneles.mosaico .panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 4px;
  background: var(--bg);
}
.paneles.mosaico .panel.enfocado {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.paneles.mosaico .content {
  padding: 14px;
  max-width: none;
}
/* Tiradores para repartir el espacio entre paneles. */
.tirador {
  position: absolute;
  z-index: 25;
  background: transparent;
}
.tirador.vertical {
  top: 0;
  bottom: 0;
  left: var(--corte-c, 50%);
  width: 12px;
  transform: translateX(-6px);
  cursor: col-resize;
}
.tirador.horizontal {
  left: 0;
  right: 0;
  top: var(--corte-f, 50%);
  height: 12px;
  transform: translateY(-6px);
  cursor: row-resize;
}
.tirador:hover,
body.tirando .tirador {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Con el teclado el tirador tiene que verse: si no, no se sabe qué se mueve. */
.tirador:focus-visible {
  background: color-mix(in srgb, var(--teal) 55%, transparent);
  outline: 3px solid var(--teal);
  outline-offset: -1px;
}
.tirador-panel:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -1px;
}
body.tirando {
  cursor: grabbing;
  user-select: none;
}
/* Previsualización de dónde va a caer la pestaña que se arrastra. */
.zona-previa {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left 0.08s ease,
    top 0.08s ease,
    width 0.08s ease,
    height 0.08s ease;
}
.zona-previa span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Iconos con más presencia ---------- */
.ico {
  stroke-width: 2.1;
}
.nav-item .ico {
  opacity: 1;
  color: var(--fg-3);
}
.nav-item:hover .ico,
.nav-item.active .ico {
  color: var(--accent);
}
.btn .ico,
.fmt-btn .ico {
  opacity: 1;
}
.tipo-archivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 9px;
  flex: none;
}
@media (max-width: 900px) {
  .paneles.dividido {
    flex-direction: column;
  }
  .tabs {
    padding: 4px 8px 0;
  }
}

@keyframes ld-girar {
  to {
    transform: rotate(360deg);
  }
}
.girando .ico {
  animation: ld-girar 0.9s linear infinite;
}

/* Videollamada: unirse y colgar van juntos. */
.meet-grupo {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.btn.colgar {
  background: color-mix(in srgb, #e5484d 18%, transparent);
  border-color: color-mix(in srgb, #e5484d 45%, transparent);
  color: #ff8b8f;
}
.btn.colgar:hover:not(:disabled) {
  background: color-mix(in srgb, #e5484d 30%, transparent);
  color: #fff;
}

/* Enlace de videollamada dentro de un mensaje: botón, no URL pelada. */
a.btn.llamada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  text-decoration: none;
}

/* ---------- Tarjeta de videollamada en el canal ---------- */
.llamada-tarjeta {
  margin: 4px 0;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 8%, var(--bg-2)),
    var(--bg-2)
  );
  max-width: 560px;
}
.llamada-tarjeta.cerrada {
  background: var(--bg-2);
  opacity: 0.9;
}
.llamada-cabecera {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.llamada-cabecera .ico {
  width: 17px;
  height: 17px;
  color: var(--accent);
}
.llamada-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #3ec97a 45%, transparent);
  background: color-mix(in srgb, #3ec97a 14%, transparent);
  color: #7ee2a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.llamada-estado.fin {
  border-color: var(--line-2);
  background: var(--bg-3);
  color: var(--fg-3);
}
.llamada-estado .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ec97a;
  animation: ld-latir 1.8s ease-in-out infinite;
}
@keyframes ld-latir {
  50% {
    opacity: 0.35;
  }
}
.llamada-pie {
  margin: 6px 0 10px;
  color: var(--fg-3);
  font-size: 12.5px;
}
.llamada-botones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.llamada-botones .btn {
  text-decoration: none;
}

/* Hoja de tipo de archivo: se lee la extensión, no hay que adivinar el icono. */
.hoja-tipo {
  flex: none;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ---------- Iconos: un solo criterio ---------- */
/* Los de línea (acciones) llevan trazo 2; los rellenos (navegación) dan
   presencia por tamaño y por el indicador de activo, no por el color. */
.ico {
  stroke-width: 2;
  flex: none;
}
.btn.icon {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.btn.ghost.icon {
  border-color: transparent;
  background: transparent;
}
.btn.ghost.icon:hover:not(:disabled) {
  background: var(--bg-3);
  border-color: transparent;
}
.btn.ghost .ico,
.fmt-btn .ico {
  color: var(--fg-2);
}
.btn.ghost:hover .ico,
.fmt-btn:hover .ico {
  color: var(--fg);
}
.nav-item .ico {
  width: 28px;
  height: 28px;
  color: var(--fg-3);
}
.nav-item:hover .ico {
  color: var(--fg-2);
}
.nav-item.active .ico {
  color: var(--teal);
}
.tabbar .ico {
  width: 28px;
  height: 28px;
}

/* Resumen posterior a la llamada. */
.llamada-tarjeta.resumen {
  background: var(--bg-2);
}
.resumen-archivos {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}
.resumen-archivo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
}
.resumen-archivo:hover {
  border-color: var(--accent);
}
.resumen-archivo > .ico {
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex: none;
}
.resumen-archivo span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.resumen-archivo em {
  font-style: normal;
  color: var(--fg-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resumen-archivo .ico.fuera {
  width: 15px;
  height: 15px;
  color: var(--fg-3);
}

/* Confirmación propia, en el estilo de la casa. */
.confirmar-titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.confirmar-titulo .ico {
  color: #e8a33d;
  width: 18px;
  height: 18px;
}
.confirmar-texto {
  margin: 4px 0 2px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.btn.rojo {
  background: #b23c38;
  border-color: #c1514c;
  color: #fff;
  font-weight: 600;
}
.btn.rojo:hover:not(:disabled) {
  background: #c1514c;
}

/* Mientras se arrastra una pestaña, nada de debajo recibe el clic. */
.capa-arrastre {
  position: absolute;
  inset: 0;
  z-index: 45;
  cursor: grabbing;
}

/* Con el mosaico abierto la ventana no se desplaza: cada panel lleva su scroll. */
body.mosaico-activo .app,
body.mosaico-activo .main {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Hueco del mosaico sin nada: se ve dónde se puede soltar. */
.hueco-libre {
  margin: 4px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: 12.5px;
  min-height: 0;
}

/* El visor siempre por encima de la ficha del archivo desde la que se abre. */
.overlay:has(.visor-modal) {
  z-index: 60;
}
/* Una confirmación sale siempre delante de la ventana que la pide. */
.overlay:has(.confirmar-modal) {
  z-index: 70;
}

/* Separador arrastrable entre paneles de una pantalla. */
.tirador-panel {
  flex: 0 0 7px;
  background: var(--line);
  cursor: col-resize;
  position: relative;
}
.tirador-panel::after {
  content: "";
  position: absolute;
  inset: 0 -3px;
}
.tirador-panel:hover,
body.tirando .tirador-panel {
  background: color-mix(in srgb, var(--accent) 55%, var(--line));
}

/* Archivos dentro de Mi espacio. */
.personal-archivo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.personal-archivo-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.personal-archivo-nombre {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-archivo-botones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.personal-archivo-botones .btn {
  text-decoration: none;
}

/* ---------- Archivo: cascada lateral ---------- */
.archivo-marco {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.archivo-cascada {
  flex: none;
  overflow: auto;
  padding: 10px 4px 20px 10px;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
}
.archivo-cascada-titulo {
  margin: 4px 0 8px 8px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.arbol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
}
.arbol-proyecto + .arbol-proyecto {
  margin-top: 6px;
}
.arbol-fila {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  position: relative;
}
.arbol-fila:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.arbol-fila.activa {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.arbol-fila.raiz .arbol-nombre {
  font-weight: 650;
  color: var(--fg);
}
.arbol-flecha {
  flex: none;
  width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
}
.arbol-flecha svg {
  width: 11px;
  height: 11px;
  transition: transform 0.12s ease;
}
.arbol-flecha.abierta svg {
  transform: rotate(90deg);
}
.arbol-flecha.hueca {
  cursor: default;
}
.arbol-nombre {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 2px;
  border: 0;
  background: none;
  color: var(--fg-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.arbol-nombre span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arbol-fila:hover .arbol-nombre,
.arbol-fila.activa .arbol-nombre {
  color: var(--fg);
}
.arbol-nombre .carpeta-ico {
  width: 16px;
  height: 16px;
  color: #e0b062;
  flex: none;
}
.arbol-nombre .punto {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.arbol-cargando,
.arbol-vacio {
  padding: 4px 0;
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
}
@media (max-width: 900px) {
  .archivo-cascada,
  .archivo-marco > .tirador-panel {
    display: none;
  }
}

/* Aviso con el enlace de la copia en Google. */
.google-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-2));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
}
.google-aviso > div {
  flex: 1;
  min-width: 220px;
}
.google-aviso p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--fg-2);
}
.google-aviso .btn {
  text-decoration: none;
}

/* ---------- Estados de error de una colección ---------- */
.estado-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line-2));
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 10%, var(--bg-2));
}
.estado-error > .ico {
  width: 20px;
  height: 20px;
  color: var(--red);
  flex: none;
}
.estado-error > div {
  flex: 1;
  min-width: 0;
}
.estado-error p {
  margin: 2px 0 0;
  color: var(--fg-2);
  font-size: 13px;
}
.estado-error.compacto {
  margin: 0 0 12px;
  padding: 10px 12px;
}

/* ---------- Finanzas ---------- */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-heading h1 {
  margin: 0 0 2px;
}
.page-heading p {
  margin: 0;
}
.finance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.finance-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
}
.finance-stat h2 {
  margin: 2px 0;
  font-size: 24px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}
.finance-stat small {
  font-size: 12px;
}
.finance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finance-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
.finance-entry > div:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.finance-entry > div:nth-child(2) strong {
  font-size: 17px;
}
.finance-entry p {
  margin: 2px 0 0;
  font-size: 13px;
}
.finance-entry.anulado {
  opacity: 0.72;
}
.finance-entry.anulado strong {
  text-decoration: line-through;
}
.marca-anulado {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .finance-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .finance-entry > div:nth-child(2) {
    text-align: left;
  }
}

/* Aviso de vista simplificada en el visor. */
.aviso-simplificada {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.aviso-simplificada .ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--fg-3);
}

/* Estado de la cuenta en la lista de equipo. */
.estado-cuenta {
  color: var(--fg-3);
}
.estado-cuenta.baja {
  color: var(--red);
  font-weight: 600;
}

/* Barra de filtros de Finanzas: columnas que no se estiran a lo ancho. */
.finance-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.finance-filtros .input {
  width: auto;
  min-width: 180px;
  max-width: 280px;
}
.finance-filtros .filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 0.9rem;
}
.finance-filtros .filtro .input {
  min-width: 150px;
}
.finance-filtros .btn {
  flex: none;
}

/* Carpeta con su botón de opciones encima. */
.tile-envoltura {
  position: relative;
  display: flex;
}
.tile-envoltura .tile {
  flex: 1;
}
.tile-accion {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tile-envoltura:hover .tile-accion,
.tile-accion:focus-visible {
  opacity: 1;
}
.tile-accion .ico {
  width: 15px;
  height: 15px;
}
@media (hover: none) {
  .tile-accion {
    opacity: 1;
  }
}

/* ---------- Buscador rápido (Ctrl/Cmd+K) ---------- */
.paleta-fondo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
}
.paleta {
  width: min(680px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-modal);
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  overflow: hidden;
}
.paleta-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.paleta-campo .ico {
  width: 20px;
  height: 20px;
  color: var(--fg-3);
}
.paleta-campo input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 16px;
  outline: none;
}
.paleta-campo kbd {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--fg-3);
}
.paleta-lista {
  overflow: auto;
  padding: 6px;
}
.paleta-grupo {
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.paleta-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.paleta-fila.activa {
  background: var(--bg-4);
  color: var(--fg);
}
.paleta-fila .ico {
  width: 18px;
  height: 18px;
  color: var(--fg-3);
}
.paleta-fila.activa .ico {
  color: var(--teal);
}
.paleta-hueco {
  width: 18px;
}
.paleta-titulo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paleta-pie {
  font-size: 12px;
  color: var(--fg-3);
}

/* Filtros personales de Tareas. */
.filtros-tareas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.filtros-tareas .filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.filtros-tareas .input.sm {
  min-height: 34px;
  padding: 4px 8px;
  font-size: 13px;
  width: auto;
}
.filtros-tareas .filtro.check {
  gap: 8px;
  color: var(--fg-2);
  cursor: pointer;
}

/* Contador de lo que ya vence. */
.stat.urgente b {
  color: var(--red);
}
.stat.urgente {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}

/* Encabezado de sección dentro de Ajustes. */
.seccion-ajustes {
  margin: 24px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Alcance de edición de una serie repetida (solo esta / siguientes / serie) */
.alcance-serie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
/* Participantes de una reunión: el modo y, debajo, las personas. */
.participantes-chips {
  margin-top: var(--e2);
}
.agenda-campana {
  color: var(--fg-2);
  flex: none;
}
.alcance-opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--fg-2);
  cursor: pointer;
  font-size: 0.93rem;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.alcance-opcion:hover {
  border-color: var(--line-2);
  color: var(--fg);
}
.alcance-opcion.activa {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 16%, var(--bg-3));
  color: var(--fg);
}
.alcance-opcion:focus-within {
  outline: 3px solid color-mix(in srgb, var(--teal) 55%, transparent);
  outline-offset: 1px;
}
.alcance-opcion input:disabled {
  cursor: not-allowed;
}

/* Visor: avance de las descargas que sí necesitan el archivo entero */
.visor-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e4);
}
.visor-progreso {
  width: min(320px, 70vw);
  height: 8px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-3);
}
.visor-progreso::-webkit-progress-bar {
  background: var(--bg-3);
}
.visor-progreso::-webkit-progress-value {
  background: var(--teal);
}
.visor-progreso::-moz-progress-bar {
  background: var(--teal);
}

/* Flujos: lista de nodos accesible junto al mapa */
.graph-lista {
  flex: 0 0 240px;
  max-width: 240px;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  padding: var(--e2);
  /* Mismo tope que el lienzo y el inspector (640 px). Sin él, en una fila
     flexible la lista crecía con los nodos y estiraba todo el mapa (con 40
     nodos, 4.300 px de alto) en vez de hacer scroll. */
  max-height: 640px;
}
.graph-lista .input.sm {
  width: 100%;
  height: 32px;
  padding: 4px 8px;
  margin-bottom: var(--e2);
  font-size: 0.9rem;
}
.graph-lista ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: nodo;
}
.graph-lista-item {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}
.graph-lista-item:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.graph-lista-item.activa {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, var(--bg-3));
  color: var(--fg);
}
.graph-lista-item:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
.graph-node:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  z-index: 3;
}

/* Agenda: filtros de proyecto, tipo y responsable junto al selector de vista */
.agenda-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}
.agenda-filtros .select.sm {
  min-width: 0;
  max-width: 190px;
  padding: 6px 28px 6px 10px;
  font-size: 0.88rem;
  height: 34px;
}
@media (max-width: 760px) {
  .agenda-filtros {
    width: 100%;
  }
  .agenda-filtros .select.sm {
    flex: 1 1 140px;
    max-width: none;
  }
}

/* Buscar: filtros por tipo, proyecto, persona y fechas */
.buscar-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--line);
}
.buscar-filtros .select.sm,
.buscar-filtros .input.sm {
  height: 34px;
  padding: 6px 10px;
  font-size: 0.88rem;
  max-width: 190px;
}
.buscar-fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--fg-3);
}
.segmented.sm button {
  padding: 6px 12px;
  font-size: 0.88rem;
}
@media (max-width: 760px) {
  .buscar-filtros > * {
    flex: 1 1 auto;
  }
  .buscar-filtros .select.sm,
  .buscar-filtros .input.sm {
    max-width: none;
  }
}

/* Salud de integraciones (administración) */
.salud-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.salud-item {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
}
.salud-item.ok {
  border-left-color: var(--teal);
}
.salud-item.mal {
  border-left-color: var(--red);
}
.salud-item.espera {
  border-left-color: var(--accent);
}
.salud-item.apagado {
  border-left-color: var(--line-2);
  opacity: 0.85;
}
.salud-icono {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.salud-item.ok .salud-icono {
  color: var(--teal);
}
.salud-item.mal .salud-icono {
  color: var(--red);
}
.salud-item.espera .salud-icono {
  color: var(--accent);
}
.salud-estado {
  margin-left: 8px;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-3);
  vertical-align: 1px;
}
.salud-estado.ok {
  background: color-mix(in srgb, var(--teal) 22%, var(--bg-3));
  color: var(--fg);
}
.salud-estado.mal {
  background: color-mix(in srgb, var(--red) 24%, var(--bg-3));
  color: var(--fg);
}
.salud-error {
  margin: 6px 0 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  color: var(--fg-2);
  word-break: break-word;
}
.salud-accion {
  margin: 4px 0 0;
  color: var(--fg);
  font-size: 0.9rem;
}
/* Algo que mirar aunque funcione: en amarillo, no en rojo. */
.salud-aviso {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: var(--r-sm, 8px);
  background: color-mix(in srgb, var(--yellow) 22%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--yellow) 55%, transparent);
  color: var(--fg);
  font-size: 0.88rem;
}
.salud-aviso .ico {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--yellow);
}

/* Revisión de entregables: el estado va con la versión, no con el nombre */
.revision-ficha > .row {
  width: 100%;
  gap: var(--e2);
  flex-wrap: wrap;
}
.revision-ficha {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  padding: var(--e3);
  margin-bottom: var(--e4);
}
.revision-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-3);
  color: var(--fg-3);
  white-space: nowrap;
}
.revision-chip.aprobado {
  background: color-mix(in srgb, var(--green) 24%, var(--bg-3));
  color: var(--fg);
}
.revision-chip.cambios {
  background: color-mix(in srgb, var(--red) 26%, var(--bg-3));
  color: var(--fg);
}
.revision-chip.revisar {
  background: color-mix(in srgb, var(--yellow) 24%, var(--bg-3));
  color: var(--fg);
}
.revision-notas {
  margin: 8px 0 0;
  white-space: pre-wrap;
  color: var(--fg-2);
  font-size: 0.92rem;
}
.revision-editor {
  margin-top: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

/* Agenda: lista de próximos días (entrada por defecto en móvil) */
.agenda-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.agenda-dia h3 {
  margin: 0 0 var(--e2);
  font-size: 0.95rem;
  color: var(--fg-2);
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 4px 0;
  z-index: 1;
}
.agenda-fila {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
}
.agenda-fila:hover {
  background: var(--bg-3);
}
.agenda-fila:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
.agenda-hora {
  flex: 0 0 auto;
  min-width: 72px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  font-size: 0.88rem;
}

/* Asistente: excluir un cambio del plan y ver el antes → después */
.asistente-excluir {
  display: inline-flex;
  align-items: center;
  margin-right: var(--e2);
}
.list-item.excluida {
  opacity: 0.55;
}
.list-item.excluida dd,
.list-item.excluida b {
  text-decoration: line-through;
}
.antes {
  color: var(--fg-3);
}
.estado-caducado {
  color: var(--red);
}

/* Acciones en grupo: se ve cuántos elementos y qué se les va a hacer */
.acciones-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: 10px 12px;
  margin-bottom: var(--e3);
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--teal) 12%, var(--bg-2));
  position: sticky;
  top: 0;
  z-index: 4;
}
.acciones-grupo .input.sm {
  height: 32px;
  padding: 4px 8px;
  width: auto;
  flex: 0 0 auto;
  max-width: 220px;
}
.task-marcar {
  display: inline-flex;
  align-items: center;
  padding-right: 2px;
}

/* Selección de archivos para acciones en grupo */
.tile-marcar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  padding: 3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(2px);
}
.tile.marcado {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.list-item.marcado {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

/* Vistas guardadas de tareas: las preguntas de cada día, con nombre */
.vistas-guardadas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

/* Chat: filtrar canales, favoritos y últimos usados */
.chat-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
}
.chat-filtro .ico {
  width: 15px;
  height: 15px;
  color: var(--fg-3);
  flex: 0 0 auto;
}
.chat-filtro .input.sm {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  font-size: 0.9rem;
}
.chan-fila {
  display: flex;
  align-items: center;
}
.chan-fila .chan {
  flex: 1;
  min-width: 0;
}
.chan-favorito {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.chan-fila:hover .chan-favorito,
.chan-favorito:focus-visible {
  color: var(--fg-3);
}
/* Un favorito se ve siempre, esté o no el puntero encima. */
.chan-fila .chan-favorito.activo,
.chan-fila:hover .chan-favorito.activo {
  color: var(--accent);
}
.chan-favorito:hover {
  background: var(--bg-3);
  color: var(--accent);
}
.chan-favorito .ico {
  width: 15px;
  height: 15px;
}
.chan-favorito:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -2px;
}

/* Pestañas: dividir la pantalla sin arrastrar (menú por pestaña) */
.tab-menu {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}
.tab-menu:hover {
  background: var(--bg-4);
  color: var(--fg);
}
.tab-menu:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -2px;
}
.tab-menu .ico {
  width: 14px;
  height: 14px;
}
.tab-menu-lista {
  position: fixed;
  z-index: 300;
  min-width: 250px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
}
.tab-menu-lista button {
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  font-size: 0.9rem;
}
.tab-menu-lista button:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.tab-menu-lista button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: -2px;
}
.tab {
  position: relative;
}

/* Barra lateral: grupos plegables que recuerdan su estado */
.nav-title.plegable {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.nav-title.plegable:hover {
  color: var(--fg-2);
}
.nav-title.plegable:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  border-radius: 6px;
}
.nav-title .caret {
  width: 11px;
  height: 11px;
  transition: transform 0.15s;
}
.nav-title .caret.cerrado {
  transform: rotate(-90deg);
}

/* ---------- Chat: canales silenciados ---------- */
.chan.silenciado {
  opacity: 0.55;
}
.chan.silenciado.unread,
.chan.silenciado.active {
  opacity: 1;
}
.chan .chan-mudo {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--fg-2);
}
.chat-herr.silencio.apagado {
  color: var(--fg-2);
  background: color-mix(in srgb, var(--fg-2) 14%, transparent);
}

/* ---------- Chat: grupos plegables y un apartado por proyecto ---------- */
.chat-grupo-cab .plegable {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 1;
}
.chat-grupo-cab .plegable:hover {
  color: var(--fg-2);
}
.chat-grupo-cab .plegable:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  border-radius: 6px;
}
.chat-grupo-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-grupo-cab .count {
  margin-left: auto;
}
.chat-grupo.hija .chat-grupo-cab {
  padding-top: 6px;
  padding-left: 18px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--fg-2);
}
.chat-grupo.hija .chan {
  padding-left: 22px;
}
.chat-grupo-titulo .swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

/* "Más": salir queda separado de lo cotidiano */
.mas-salir {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  align-items: flex-start;
}

/* Avisos de los pendientes de Mi espacio */
.aviso-config {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.aviso-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}
.aviso-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-3));
  color: var(--fg);
  white-space: nowrap;
}
.aviso-chip .ico {
  width: 12px;
  height: 12px;
}
.aviso-chip.pasado {
  background: var(--bg-3);
  color: var(--fg-3);
}

/* La alarma: ocupa la pantalla porque para eso es una alarma. */
.alarma-capa {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e4);
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(3px);
  animation: alarma-entra 0.18s ease-out;
}
.alarma {
  width: min(460px, 100%);
  padding: var(--e5);
  border: 1px solid var(--accent);
  border-radius: var(--radius-modal);
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  text-align: center;
}
.alarma-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: var(--e3);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-3));
  color: var(--accent);
  animation: alarma-late 1.4s ease-in-out infinite;
}
.alarma-icono svg {
  width: 30px;
  height: 30px;
}
.alarma h2 {
  margin: 4px 0 8px;
  font-size: 1.35rem;
}
.alarma-texto {
  margin: 0 0 var(--e2);
  color: var(--fg-2);
  white-space: pre-wrap;
}
.alarma-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin-top: var(--e4);
}
@keyframes alarma-entra {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@keyframes alarma-late {
  50% {
    transform: scale(1.09);
  }
}
@media (prefers-reduced-motion: reduce) {
  .alarma-icono,
  .alarma-capa {
    animation: none;
  }
}

/* Estado de los avisos: se ve de un vistazo si van a llegar o no */
.avisos-estado {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.avisos-estado .ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.avisos-estado.ok {
  border-left-color: var(--green);
}
.avisos-estado.ok > .ico {
  color: var(--green);
}
.avisos-estado.falta {
  border-left-color: var(--yellow);
}
.avisos-estado.falta > .ico {
  color: var(--yellow);
}
.avisos-estado p {
  margin: 4px 0 0;
}

/* Aviso flotante: lo que no se ve, no se activa. Va fijo abajo a propósito:
   dentro del flujo empujaba la página al aparecer y movía lo que estabas
   señalando. */
.tira-avisos {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 150;
  width: min(720px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 14%, var(--bg-2));
  box-shadow: var(--shadow-alta);
  color: var(--fg);
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .tira-avisos {
    bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom));
  }
}
.tira-avisos > .ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--yellow);
}
@media (max-width: 760px) {
  .tira-avisos {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .tira-avisos .grow {
    flex: 1 1 100%;
    order: 3;
  }
}

/* Enviar a: el destino se elige, no se supone */
.enviar-opciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--e3);
}
.enviar-opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--fg-2);
  cursor: pointer;
}
.enviar-opcion:hover {
  border-color: var(--line-2);
  color: var(--fg);
}
.enviar-opcion.activa {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, var(--bg-3));
  color: var(--fg);
}
.enviar-opcion:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
.enviar-opcion > .ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
}
.enviar-opcion .grow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* Arrastrar y soltar: se ve dónde va a caer el archivo */
.tile.soltar,
.list-item.soltar,
.arbol-fila.soltar {
  outline: 2px dashed var(--teal);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
}
.tile[draggable="true"],
.list-item[draggable="true"] {
  cursor: grab;
}
.tile[draggable="true"]:active,
.list-item[draggable="true"]:active {
  cursor: grabbing;
}
/* Estado de revisión visible desde la rejilla, sin abrir el archivo */
.revision-punto {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-2);
}
.revision-punto.aprobado {
  background: var(--green);
}
.revision-punto.cambios {
  background: var(--red);
}
.revision-punto.revisar {
  background: var(--yellow);
}

/* Mi espacio: la tarjeta es el archivo, sin etiquetas que sobran */
.personal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  min-height: 28px;
  opacity: 0;
  transition: opacity 0.12s;
}
.personal-card:hover .personal-acciones,
.personal-card:focus-within .personal-acciones {
  opacity: 1;
}
@media (hover: none) {
  .personal-acciones {
    opacity: 1;
  }
}
/* Carpetas y archivos: el icono y su nombre, y se acabó. Ni marco, ni fondo,
   ni tarjeta. Un icono grande se explica solo; meterlo en un recuadro solo
   añade ruido y hace la cuadrícula más fea. */
.personal-item {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  overflow-wrap: anywhere;
}
.personal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.personal-icono {
  display: grid;
  place-items: center;
  padding: 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.personal-icono:hover {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  transform: translateY(-2px);
}
.personal-icono:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.personal-tile-nombre {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: text;
  padding: 2px 6px;
  border-radius: 6px;
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.personal-tile-nombre:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.personal-nombre-editar {
  width: 100%;
  max-width: 180px;
  text-align: center;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-2);
  border: 2px solid var(--teal);
  border-radius: 6px;
  padding: 2px 6px;
}
.personal-card.soltar,
.personal-item.soltar {
  outline: 2px dashed var(--teal);
  outline-offset: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
}
.personal-card[draggable="true"],
.personal-item[draggable="true"] {
  cursor: grab;
}

/* ---------- Notas en post-it ----------
   El taco vive a la derecha; de ahí las arrastras a donde quieras. Las que
   fijas las pinta la carcasa, así que cruzan la navegación contigo. */
/* Mi espacio: huecos fijos.
   Carpetas a la izquierda, ocupando toda la altura y con su cascada delante;
   pendientes, enlaces y agenda apilados a la derecha con altura acotada y su
   propia rueda. Ningún bloque se mueve de sitio al llenarse o vaciarse. */
.personal-zona {
  display: grid;
  /* La tercera columna con ancho fijo: si se la deja crecer, el taco de
     post-its se encoge al vaciarse y arrastra consigo a todo lo demás. */
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr) 250px;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  align-items: start;
}
.personal-zona > .hueco-archivos {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: stretch;
  min-height: 420px;
}
.personal-zona > .hueco-todo {
  grid-column: 2;
  grid-row: 1;
}
.personal-zona > .hueco-link {
  grid-column: 2;
  grid-row: 2;
}
.personal-zona > .hueco-contact {
  grid-column: 2;
  grid-row: 3;
}
.personal-zona > .personal-seccion {
  margin: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Altura fija, no máxima: con "hasta tanto" cada bloque crecía y menguaba
   según lo que tuviera dentro y empujaba a los de abajo. Lo que no cabe se
   pasa con la rueda dentro del propio bloque. */
.personal-zona > .hueco-todo,
.personal-zona > .hueco-link,
.personal-zona > .hueco-contact {
  height: 29vh;
  min-height: 190px;
  overflow: auto;
}
.personal-zona > .postit-tira {
  grid-column: 3;
  grid-row: 1 / span 4;
}
.postit-tira {
  grid-column: 3;
  grid-row: 1 / span 99;
}
.postit-tira {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* Ancha lo que haga falta: si estiras un post-it aparcado, la tira le
     hace sitio en vez de dejarlo colgando fuera de la ventana. */
  min-width: 248px;
  max-width: 420px;
  /* Vacía no reserva media pantalla: el mosaico necesita ese ancho. */
  padding-bottom: 24px;
}
.postit-tira > .postit {
  max-width: 100%;
}
.postit-vacio {
  color: var(--fg-3);
  font-size: 0.86rem;
  line-height: 1.45;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  padding: 14px;
}
.postits-capa {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
}
.postits-capa > .postit {
  pointer-events: auto;
}

.postit {
  --papel: #fdea72;
  --papel-2: #f6d84a;
  --tinta: #3d3212;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, var(--papel), var(--papel-2));
  color: var(--tinta);
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.16),
    0 8px 18px -8px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.postit.moviendo {
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.2),
    0 22px 40px -12px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.2deg);
  cursor: grabbing;
}
.postits-capa .postit,
.postit.delante {
  z-index: 2;
}
.postit.fijada {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.16),
    0 10px 24px -8px rgba(0, 0, 0, 0.5),
    0 0 0 2px color-mix(in srgb, var(--tinta) 30%, transparent);
}
.postit-barra {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 4px 0 6px;
  cursor: grab;
  touch-action: none;
  flex: none;
}
.postit-barra .grow {
  flex: 1;
}
.postit-asa {
  width: 15px;
  height: 15px;
  opacity: 0.35;
}
.postit-boton {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tinta);
  opacity: 0.5;
  cursor: pointer;
}
.postit-boton:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.09);
}
.postit-boton[aria-pressed="true"] {
  opacity: 1;
  background: rgba(0, 0, 0, 0.13);
}
.postit-boton .ico {
  width: 14px;
  height: 14px;
}
.postit-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 2px 14px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
  overflow: hidden;
}
.postit-titulo {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 700;
}
.postit-texto {
  font-size: 0.87rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow: hidden;
  opacity: 0.88;
}
.postit-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 12px 12px;
}
.postit-titulo-editar,
.postit-texto-editar {
  font: inherit;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  padding: 5px 7px;
  width: 100%;
}
.postit-titulo-editar {
  font-weight: 700;
}
.postit-texto-editar {
  flex: 1;
  min-height: 0;
  resize: none;
  font-size: 0.87rem;
  line-height: 1.4;
}
.postit-listo {
  align-self: flex-end;
  border: 0;
  border-radius: 5px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.16);
  color: var(--tinta);
  cursor: pointer;
}
/* Tiradores de tamaño: los cuatro bordes y las cuatro esquinas. Invisibles
   salvo el pico de abajo a la derecha, que es el que enseña que se estira. */
.postit-agarre {
  position: absolute;
  touch-action: none;
  z-index: 2;
}
.postit-agarre.lado-n,
.postit-agarre.lado-s {
  left: 10px;
  right: 10px;
  height: 7px;
  cursor: ns-resize;
}
.postit-agarre.lado-n {
  top: -3px;
}
.postit-agarre.lado-s {
  bottom: -3px;
}
.postit-agarre.lado-e,
.postit-agarre.lado-w {
  top: 10px;
  bottom: 10px;
  width: 7px;
  cursor: ew-resize;
}
.postit-agarre.lado-e {
  right: -3px;
}
.postit-agarre.lado-w {
  left: -3px;
}
.postit-agarre.lado-ne,
.postit-agarre.lado-nw,
.postit-agarre.lado-se,
.postit-agarre.lado-sw {
  width: 14px;
  height: 14px;
}
.postit-agarre.lado-ne {
  top: -3px;
  right: -3px;
  cursor: nesw-resize;
}
.postit-agarre.lado-nw {
  top: -3px;
  left: -3px;
  cursor: nwse-resize;
}
.postit-agarre.lado-sw {
  bottom: -3px;
  left: -3px;
  cursor: nesw-resize;
}
.postit-agarre.lado-se {
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.18) 50%);
}
.postit-paleta {
  padding: 6px 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  flex: none;
}
.postit-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}
.postit-muestra {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--papel);
  cursor: pointer;
  padding: 0;
}
.postit-muestra.activa {
  box-shadow: 0 0 0 2px var(--tinta);
}
/* La regla genérica de botón pulsado ([aria-pressed="true"]:not(.btn.primary),
   peso 0,3,0) ganaba a las del post-it (0,2,0): la muestra del color elegido
   salía gris en vez de su color, y la chincheta de clavar, gris oscuro con
   tinta clara sobre el papel. Se les devuelve su aspecto con el mismo peso,
   solo aquí; la regla genérica no se toca porque de ella viven los chips. */
.postit-colores .postit-muestra[aria-pressed="true"] {
  background: var(--papel);
  border-color: rgba(0, 0, 0, 0.2);
}
.postit-barra .postit-boton[aria-pressed="true"] {
  background: rgba(0, 0, 0, 0.13);
  color: var(--tinta);
}
/* Los colores del taco. Papel de verdad: dos tonos y una tinta que se lee. */
.postit.c-amarillo,
.postit-muestra.c-amarillo {
  --papel: #fdea72;
  --papel-2: #f6d84a;
  --tinta: #453a14;
}
.postit.c-rosa,
.postit-muestra.c-rosa {
  --papel: #ffc0d3;
  --papel-2: #ffa5c0;
  --tinta: #4d1f31;
}
.postit.c-verde,
.postit-muestra.c-verde {
  --papel: #c4f08a;
  --papel-2: #a9e267;
  --tinta: #2b4014;
}
.postit.c-azul,
.postit-muestra.c-azul {
  --papel: #a9dcff;
  --papel-2: #86c9f7;
  --tinta: #12344c;
}
.postit.c-naranja,
.postit-muestra.c-naranja {
  --papel: #ffc98a;
  --papel-2: #ffb463;
  --tinta: #4a2c0c;
}
.postit.c-lila,
.postit-muestra.c-lila {
  --papel: #d9c2ff;
  --papel-2: #c4a4fb;
  --tinta: #331f55;
}
.postit.c-blanco,
.postit-muestra.c-blanco {
  --papel: #fbfbf4;
  --papel-2: #ededdf;
  --tinta: #2f2f28;
}

/* Las formas. La esquina doblada y el redondo son los que más gustan. */
.postit.f-esquina {
  border-radius: 3px 3px 3px 26px;
}
.postit.f-esquina::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--tinta) 22%, var(--papel-2)) 50%,
    transparent 50%
  );
}
.postit.f-circulo {
  border-radius: 50%;
}
.postit.f-circulo .postit-cuerpo {
  padding: 0 30px 26px;
  text-align: center;
  align-items: center;
}
.postit.f-circulo .postit-agarre.lado-se {
  right: 8%;
  bottom: 8%;
}
.postit.f-tira .postit-cuerpo,
.postit.f-ancho .postit-cuerpo {
  padding-top: 0;
}

@media (max-width: 900px) {
  .personal-zona {
    grid-template-columns: minmax(0, 1fr);
  }
  .personal-zona > .arbol-carpetas,
  .personal-zona > .personal-seccion,
  .personal-zona > .postit-tira {
    grid-column: 1;
    grid-row: auto;
  }
  .personal-zona > .arbol-carpetas {
    position: static;
    max-height: 190px;
    overflow: auto;
  }
  .postit-tira {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Foto de perfil: cuando la hay, manda la foto */
.avatar.foto {
  object-fit: cover;
  display: block;
  padding: 0;
  border: 0;
}

/* ---------- paletas ----------
   El tema (claro / oscuro) decide el contraste; la paleta decide el color.
   Son independientes: cualquier paleta funciona en claro y en oscuro. */
[data-paleta="medianoche"] {
  --bg: #171c2b;
  --bg-2: #1f2639;
  --bg-3: #293248;
  --bg-4: #344059;
  --line: #3d4a66;
  --line-2: #93a1c2;
  --accent: #f0c07a;
  --accent-2: #f7d69f;
  --accent-fg: #2a1f0c;
  --teal: #8fb8ff;
}
[data-theme="light"][data-paleta="medianoche"] {
  --bg: #f1f3f9;
  --bg-2: #ffffff;
  --bg-3: #e6eaf4;
  --bg-4: #d7deee;
  --line: #c6cee2;
  --line-2: #5c6784;
  --accent: #8a5a12;
  --accent-2: #6d4509;
  --accent-fg: #ffffff;
  --teal: #27488c;
}
[data-paleta="bosque"] {
  --bg: #17231c;
  --bg-2: #1f2f26;
  --bg-3: #2a3e33;
  --bg-4: #365044;
  --line: #3f5a4b;
  --line-2: #93b0a0;
  --accent: #e0c088;
  --accent-2: #eed7ab;
  --accent-fg: #26200f;
  --teal: #86cfa6;
}
[data-theme="light"][data-paleta="bosque"] {
  --bg: #f1f5f1;
  --bg-2: #ffffff;
  --bg-3: #e5eee7;
  --bg-4: #d5e3d9;
  --line: #c4d5c9;
  --line-2: #55705f;
  --accent: #7a5514;
  --accent-2: #5f410c;
  --accent-fg: #ffffff;
  --teal: #1d6b45;
}
[data-paleta="ciruela"] {
  --bg: #1f1826;
  --bg-2: #2a2033;
  --bg-3: #372a43;
  --bg-4: #473657;
  --line: #523f63;
  --line-2: #b299c4;
  --accent: #f0a0b8;
  --accent-2: #f8c2d3;
  --accent-fg: #2e1019;
  --teal: #c4a3f0;
}
[data-theme="light"][data-paleta="ciruela"] {
  --bg: #f6f2f7;
  --bg-2: #ffffff;
  --bg-3: #eee6f1;
  --bg-4: #e1d3e7;
  --line: #d3c2da;
  --line-2: #6b5177;
  --accent: #a13158;
  --accent-2: #7f2243;
  --accent-fg: #ffffff;
  --teal: #5f3d99;
}
[data-paleta="carbon"] {
  --bg: #1a1a1c;
  --bg-2: #232326;
  --bg-3: #2e2e32;
  --bg-4: #3c3c42;
  --line: #46464c;
  --line-2: #9c9ca4;
  --accent: #f19a5e;
  --accent-2: #f8b985;
  --accent-fg: #2a1608;
  --teal: #9fd3c8;
}
[data-theme="light"][data-paleta="carbon"] {
  --bg: #f4f4f5;
  --bg-2: #ffffff;
  --bg-3: #eaeaec;
  --bg-4: #dcdcdf;
  --line: #cbcbd0;
  --line-2: #5e5e66;
  --accent: #97490f;
  --accent-2: #763709;
  --accent-fg: #ffffff;
  --teal: #1d6558;
}

/* Muestras de paleta en Ajustes */
.paletas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.paleta-muestra {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: pointer;
  min-width: 108px;
}
.paleta-muestra:hover {
  border-color: var(--line-2);
  color: var(--fg);
}
.paleta-muestra.activa {
  border-color: var(--teal);
  color: var(--fg);
}
.paleta-muestra:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
.paleta-tiras {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.paleta-tiras span {
  flex: 1;
}
.paleta-nombre {
  font-size: 0.85rem;
  font-weight: 600;
}
.paleta-propia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
}
.paleta-propia label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--fg-3);
}
.paleta-propia input[type="color"] {
  width: 56px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-3);
  cursor: pointer;
}

/* Deslizadores de los ajustes del vigía */
.deslizador {
  width: 100%;
  accent-color: var(--teal);
  height: 34px;
}

/* Ficha del Gantt al pasar por encima.
   Va fija y sin capturar el puntero a propósito: dentro del flujo empujaba la
   página hacia abajo, el puntero salía de la barra y la ficha parpadeaba. */
.gantt-tooltip {
  position: fixed;
  z-index: 200;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  pointer-events: none;
}
.gantt-tooltip b {
  display: block;
  margin-bottom: 6px;
  font-size: 0.96rem;
}
.gantt-tooltip p {
  margin: 3px 0 0;
  font-size: 0.86rem;
  color: var(--fg-2);
  line-height: 1.35;
}
.gantt-tooltip p:last-child {
  margin-top: 8px;
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Conversaciones en privado ----------
   Hablar con una persona concreta es lo más normal del mundo, y hasta ahora
   solo se podía llegar ahí de rebote, compartiendo un archivo. Ahora tienen
   su sitio en la lista, con la cara de quien está al otro lado. */
.chan.directo {
  gap: 8px;
}
.chan.directo .avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
  flex: none;
}
.lista-personas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow: auto;
}
.persona-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.persona-fila:hover {
  background: var(--bg-3);
}
.persona-fila:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.persona-fila .grow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.persona-fila .hint {
  font-size: 0.78rem;
}

/* ---------- El asistente, como un chat ----------
   Hilo que baja solo, burbujas, y la caja abajo pegada. Antes era un
   formulario con fichas sueltas y ni el Enter enviaba. */
/* OJO CON EL NOMBRE. Esto se llamaba .asistente, igual que la burbuja de cada
   respuesta (.burbuja.asistente). Las dos reglas casaban con la misma burbuja,
   así que cada respuesta del asistente heredaba la altura de la pantalla
   entera y flex-direction: column: salían columnas de 177 px de ancho por 844
   de alto, vacías. Por eso quien habla va ahora en data-de="yo|asistente" y
   no en la clase: un atributo no puede casar con ningún contenedor. */
.asistente-pagina {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--topbar) - var(--pestanas));
  min-height: 0;
}
.asistente-hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* La conversación no se estira a lo ancho del monitor: se queda en una
     columna de lectura y se centra. A 1700 px, si no, cada respuesta cruzaba
     la pantalla de lado a lado. */
  padding: 22px max(16px, calc((100% - 980px) / 2)) 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asistente-bienvenida {
  margin: auto;
  max-width: 430px;
  text-align: center;
  color: var(--fg-2);
}
.asistente-bienvenida svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 10px;
}
.asistente-bienvenida b {
  display: block;
  color: var(--fg);
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.asistente-bienvenida p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.93rem;
}
.burbuja {
  /* flex: none es lo que arregla el desastre que se veía: en una columna
     flexible, las burbujas se encogían por debajo de su contenido y el texto
     salía por fuera, pisando la burbuja de abajo. Que no se encojan. */
  flex: 0 0 auto;
  max-width: min(680px, 88%);
  padding: 11px 15px;
  border-radius: 16px;
  line-height: 1.55;
}
.burbuja p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.burbuja[data-de="yo"] {
  align-self: flex-end;
  background: var(--accent);
  /* Antes #1a1206 a pelo: en el tema claro el acento es marrón oscuro y el
     texto salía casi negro sobre marrón (contraste 2,6:1). */
  color: var(--accent-fg);
  border-bottom-right-radius: 5px;
}
.burbuja[data-de="asistente"] {
  align-self: flex-start;
  background: var(--bg-3);
  color: var(--fg);
  border-bottom-left-radius: 5px;
}
/* Cuando la respuesta son fichas o una propuesta con sus campos, la burbuja
   sobra: era una caja con fondo alrededor de otra caja con borde. Se quita el
   envoltorio y se le da todo el ancho de la columna. Va DESPUÉS de las de
   [data-de] a propósito: misma especificidad (0,2,0), gana la última. */
.burbuja.escueta {
  background: none;
  padding: 0;
  max-width: 100%;
  width: 100%;
  border-radius: 0;
}
/* Los tres puntos de "está pensando". */
.pensando {
  display: flex;
  gap: 4px;
  padding: 3px 0;
}
.pensando span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: latido 1.2s infinite;
}
.pensando span:nth-child(2) {
  animation-delay: 0.18s;
}
.pensando span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes latido {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
/* Una propuesta de cambio, dentro del hilo como una respuesta más. */
.propuesta {
  margin-top: 4px;
}
.propuesta > b {
  display: block;
  margin-bottom: 8px;
}
.propuesta-cambio {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 7px;
  background: var(--bg-2);
}
.propuesta-cambio.excluida {
  opacity: 0.45;
}
.propuesta-cambio label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.propuesta-cambio dl {
  margin: 7px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  font-size: 0.86rem;
}
.propuesta-cambio dl > div {
  display: contents;
}
.propuesta-cambio dt {
  color: var(--fg-3);
}
.propuesta-cambio dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.propuesta-cambio .antes {
  color: var(--fg-3);
  text-decoration: line-through;
}
.propuesta .mal {
  color: var(--red, #e06c6c);
}
/* El resultado de una pregunta: el dato arriba y las cosas debajo, cada una
   con su enlace. Es una lista de sitios a los que ir, no un párrafo. */
.resultados {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Para que la ficha decida su forma por el ancho que tiene de verdad, no
     por el de la ventana: en una columna estrecha se apila y en una ancha
     pone el dato a la derecha. */
  container-type: inline-size;
}
.resultados-titular {
  font-size: 1.02rem;
  line-height: 1.4;
  margin-bottom: 3px;
}
.resultados-nota {
  margin: 4px 0 0;
  font-size: 0.78rem;
}
/* En una columna flexible, un botón suelto se estira a todo el ancho. Este es
   un enlace a una pantalla, no una barra. */
.resultados > .btn {
  align-self: flex-start;
  margin-top: 8px;
}
.ficha {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.ficha:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-3);
}
.ficha:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ficha:disabled {
  cursor: default;
}
.ficha-titulo {
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ficha-meta {
  font-size: 0.79rem;
  color: var(--fg-3);
}
.ficha-detalle {
  font-size: 0.84rem;
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Con sitio de sobra, el título manda y el dato se va a la derecha. */
@container (min-width: 460px) {
  .ficha {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 16px;
  }
  .ficha-meta {
    justify-self: end;
    text-align: right;
  }
  .ficha-detalle {
    grid-column: 1 / -1;
  }
}

/* La caja de escribir, abajo y siempre a la vista. */
.asistente-pie {
  flex: none;
  padding: 12px max(16px, calc((100% - 980px) / 2)) 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
/* El aviso de "no disponible" iba con position: absolute y un margen negativo
   a ojo, así que con dos líneas se metía dentro de la conversación. Ahora
   ocupa su sitio, como cualquier otra cosa. */
.asistente-aviso {
  margin: 0 0 8px;
}
.asistente-caja {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.asistente-caja .textarea {
  flex: 1;
  resize: none;
  max-height: 150px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.45;
}
.asistente-enviar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 0;
}
/* Los ejemplos de la pantalla de entrada. */
.asistente-ejemplos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.asistente-ejemplo {
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-2);
  font: inherit;
  font-size: 0.87rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.asistente-ejemplo:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--fg);
}
.asistente-ejemplo:disabled {
  opacity: 0.5;
  cursor: default;
}

/* La conversación, igual en la pantalla y en la esquina: el hilo se lleva el
   alto que sobre y la caja de escribir queda abajo. */
.charla {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.propuesta-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.propuesta-abrir {
  margin-left: 8px;
}
.propuesta-abrir.era-cambio {
  display: block;
  margin: 8px 0 0;
}
.propuesta-rechazadas {
  margin: 0 0 8px;
  color: var(--red);
}
/* En el mosaico el panel ya tiene su alto: la pantalla del asistente lo
   rellena en vez de medir la ventana entera y salirse por abajo. */
.paneles.mosaico .asistente-pagina {
  flex: 1 1 0;
  height: auto;
}

/* ---------- El asistente siempre a mano (asistente/Lanzador.tsx) ----------
   Un botón en la esquina de abajo a la derecha que abre la conversación ahí
   mismo. La posición (right/bottom) la calcula el componente para apartarse
   de la caja de escribir del Chat y de la ventana de redactar del Correo; aquí
   solo va el aspecto. Los estados van en data-*, no en clases: así ningún
   nombre de estado puede casar con una clase de contenedor. */
.lanzador-boton,
.lanzador-ventana {
  position: fixed;
  /* Encima de la ventana de redactar (45); debajo de los post-its clavados
     (48), que los has puesto tú ahí, y de los modales (50). */
  z-index: 47;
  transition:
    right 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    bottom 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lanzador-boton {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-alta);
  cursor: pointer;
  animation: lanzador-aparecer 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lanzador-boton .ico {
  width: 24px;
  height: 24px;
}
.lanzador-boton:hover {
  background: var(--accent-2);
}
.lanzador-boton:focus-visible,
.lanzador-titulo:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Pensando con la ventana cerrada: un aro que gira alrededor del botón. */
.lanzador-boton[data-pensando]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: lanzador-girar 0.9s linear infinite;
}
/* Una propuesta sin confirmar: el número, y tres latidos para que se note
   sin quedarse parpadeando toda la tarde. */
.lanzador-contador {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--bg);
  background: var(--red);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.lanzador-boton[data-aviso="propuesta"] {
  animation:
    lanzador-aparecer 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    lanzador-latido 1.4s ease-out 0.2s 3;
}
/* Una respuesta que llegó con la ventana cerrada: un punto, sin número. */
.lanzador-boton[data-aviso="nueva"]::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--teal);
}

.lanzador-ventana {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-alta);
  transform-origin: bottom right;
  animation: lanzador-abrir 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.lanzador-ventana[data-saliendo] {
  animation: lanzador-cerrar 0.13s ease-in forwards;
  pointer-events: none;
}
.lanzador-cabeza {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 4px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.lanzador-ventana[data-plegado] .lanzador-cabeza {
  border-bottom: 0;
}
.lanzador-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lanzador-titulo:hover {
  background: var(--bg-3);
}
.lanzador-titulo .ico {
  flex: none;
  color: var(--accent);
}
.lanzador-pendiente {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--fg);
  font-size: 0.75rem;
  font-weight: 600;
}

/* La conversación, en pequeño. */
.charla[data-variante="esquina"] .asistente-hilo {
  padding: 14px 14px 8px;
  gap: 10px;
}
.charla[data-variante="esquina"] .asistente-pie {
  padding: 8px 10px 10px;
}
.charla[data-variante="esquina"] .burbuja {
  max-width: 92%;
  padding: 9px 12px;
  font-size: 0.93rem;
}
.charla[data-variante="esquina"] .burbuja.escueta {
  max-width: 100%;
  padding: 0;
}
.charla[data-variante="esquina"] .asistente-bienvenida svg {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}
.charla[data-variante="esquina"] .asistente-bienvenida b {
  font-size: 1rem;
}
.charla[data-variante="esquina"] .asistente-bienvenida p {
  font-size: 0.86rem;
}
.charla[data-variante="esquina"] .asistente-ejemplos {
  margin-top: 12px;
  gap: 6px;
}
.charla[data-variante="esquina"] .asistente-ejemplo {
  padding: 6px 11px;
  font-size: 0.82rem;
}
.charla[data-variante="esquina"] .asistente-caja .textarea {
  min-height: 40px;
  max-height: 120px;
  padding: 9px 12px;
}
.charla[data-variante="esquina"] .asistente-enviar {
  width: 40px;
  height: 40px;
}

@keyframes lanzador-aparecer {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes lanzador-abrir {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
@keyframes lanzador-cerrar {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}
@keyframes lanzador-girar {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lanzador-latido {
  0% {
    box-shadow:
      var(--shadow-alta),
      0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  100% {
    box-shadow:
      var(--shadow-alta),
      0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

/* La leyenda del Gantt: qué significa cada color. Con varios grupos el color
   por sí solo no identifica nada, así que va siempre acompañado del nombre. */
.gantt-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  color: var(--fg-2);
}
.gantt-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gantt-leyenda i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* --- Gantt: barras, agregados y arrastre --- */
.gantt-barra {
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.gantt-bar {
  top: 5px;
  height: 24px;
}
/* Las barras de proyecto y de bloque son un resumen de lo que hay debajo:
   se dibujan más finas y con una muesca a cada lado, como un corchete, para
   que no se confundan con una tarea de verdad. */
.gantt-bar.agregada {
  top: 12px;
  height: 10px;
  border-radius: 3px;
  opacity: 0.85;
  font-size: 0;
}
.gantt-bar.agregada::before,
.gantt-bar.agregada::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 2px;
  height: 18px;
  background: inherit;
}
.gantt-bar.agregada::before {
  left: 0;
}
.gantt-bar.agregada::after {
  right: 0;
}
.gantt-bar.hito {
  top: 9px;
}
.gantt-bar.editable {
  cursor: grab;
}
.gantt-bar.editable:active {
  cursor: grabbing;
}
/* Los tiradores de los bordes, para alargar sin mover el principio.
   Se llamaban .tirador, igual que el separador del mosaico (App.tsx): heredaban
   su z-index 25 y se pintaban por encima de la columna de nombres y de la
   cabecera fija del Gantt al desplazarse, y se teñían de acento al arrastrar
   el separador. Nombre propio y listo. */
.gantt-tirador {
  position: absolute;
  top: 0;
  width: 7px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.25);
}
.gantt-tirador.izquierda {
  left: 0;
  border-radius: 6px 0 0 6px;
}
.gantt-tirador.derecha {
  right: 0;
  border-radius: 0 6px 6px 0;
}

/* ---------- Mi espacio por secciones ----------
   Pendientes, agenda, enlaces y archivos, cada uno en su bloque plegable.
   Antes iba todo en la misma rejilla y del mismo tamaño: con quince cosas
   ya no cabía nada y había que buscar a ojo. */
.personal-seccion {
  margin-bottom: 22px;
}
.personal-seccion-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 2px 6px;
  margin-bottom: 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  flex: none;
  text-align: left;
}
.personal-seccion-cabeza b {
  font-size: 0.95rem;
}
.personal-seccion-cabeza small {
  color: var(--fg-3);
  font-size: 0.78rem;
  background: var(--bg-3);
  border-radius: 999px;
  padding: 1px 8px;
}
.personal-seccion-cabeza .ico {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.personal-flecha {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
  flex: none;
  transition: transform 0.12s;
}
.personal-flecha.abierta {
  transform: rotate(90deg);
}

/* Pendientes, agenda y enlaces van en líneas, no en tarjetas: son cosas de
   una línea y en tarjeta ocupan diez veces lo que dicen. */
.personal-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.personal-lista .personal-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  min-height: 0;
}
.personal-lista .personal-card h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
/* Una línea y puntos suspensivos: en una columna de 350 px, sin esto los
   títulos se partían por la mitad de una palabra. La casilla y la chapa del
   aviso van dentro del mismo h3, así que se recorta el nombre, no el h3. */
.personal-lista .personal-card h3 > * {
  min-width: 0;
}
.personal-lista .personal-tile-nombre {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1;
  padding-right: 10px;
}
.personal-lista .personal-card h3 input[type="checkbox"] {
  flex: none;
}
.personal-lista .personal-card {
  align-items: center;
  flex-wrap: nowrap;
  padding: 5px 10px;
}
.personal-lista .personal-card > * {
  min-width: 0;
}
.personal-lista .personal-card > a,
.personal-lista .personal-card .apunte-cuerpo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* En una fila de enlace conviven el título y la dirección. El título pedía su
   espacio desde cero (flex-basis: 0) y la dirección desde su ancho entero, así
   que la dirección se lo quedaba todo y el título se quedaba en 0 px: el
   enlace salía sin nombre. Ahora reparten, dos partes para el título y una
   para la dirección, que es el orden en que se leen. */
.personal-lista .personal-card.link h3 {
  flex: 1 1 0;
}
/* El sitio cede el sitio: si no cabe todo, quien se recorta es él y no el
   nombre que le puso la persona. */
.personal-lista .personal-card.link > .enlace-sitio {
  flex: 0 0 auto;
  max-width: 40%;
  font-size: 0.82rem;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El nombre de un enlace es un enlace: que se vea y que se note al pasar. */
a.personal-tile-nombre {
  color: inherit;
  text-decoration: none;
}
a.personal-tile-nombre:hover,
a.personal-tile-nombre:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
/* Los botones de la fila no se parten ni se encogen: "Editar" salía como
   "Edita" y una "r" sola debajo. */
.personal-lista .personal-card button,
.personal-lista .personal-card .btn,
.personal-lista .personal-card .personal-acciones {
  flex: none;
  white-space: nowrap;
}
.personal-lista .personal-card .apunte-cuerpo {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.personal-lista .personal-card a {
  font-size: 0.82rem;
}
/* Un pendiente hecho se aparta sin desaparecer. */
.personal-lista .personal-card.todo:has(input:checked) h3 {
  text-decoration: line-through;
  color: var(--fg-3);
}

/* --- La agenda --- */
.agenda-busca {
  position: relative;
  margin-bottom: 8px;
}
.agenda-busca .ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--fg-3);
  pointer-events: none;
}
.agenda-busca .input {
  padding-left: 34px;
}
.personal-card.contacto {
  align-items: center;
  gap: 12px;
}
/* La inicial hace de retrato: distingue de un vistazo sin pedir una foto. */
.contacto-inicial {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-4);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}
.personal-card.contacto .grow {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.personal-card.contacto .grow b {
  font-size: 0.9rem;
}
.personal-card.contacto .grow small {
  font-size: 0.76rem;
  color: var(--fg-3);
}
.contacto-dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--fg-2);
  white-space: nowrap;
}
.contacto-dato .ico {
  width: 13px;
  height: 13px;
  color: var(--fg-3);
}
.ico.lleno {
  fill: var(--accent);
  color: var(--accent);
}
@media (max-width: 760px) {
  .contacto-dato {
    display: none;
  }
}

/* En lista, los botones de la fila flotan a la derecha.
   Antes se les reservaba un hueco fijo de 120 px que estaba ahí siempre,
   también con la fila en reposo y ningún botón a la vista: en una columna de
   290 px eso dejaba el nombre del enlace en tres letras. Ahora no reservan
   nada; aparecen encima al pasar el ratón, sobre el final de la fila, y para
   entonces el globo de debajo ya está enseñando la dirección entera. El
   nombre, que va a la izquierda, no lo tapa nadie. */
.personal-lista .personal-card {
  position: relative;
}
.personal-lista .personal-acciones,
.personal-lista .personal-card > .apunte-editar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-height: 0;
  background: var(--bg-2);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
}
.personal-lista .personal-acciones {
  right: 6px;
  padding: 0 2px;
}
.personal-lista .personal-card > .apunte-editar {
  right: 82px;
  padding: 2px 6px;
}
.personal-lista .personal-card:hover .personal-acciones,
.personal-lista .personal-card:hover > .apunte-editar,
.personal-lista .personal-card:focus-within .personal-acciones,
.personal-lista .personal-card:focus-within > .apunte-editar {
  opacity: 1;
  pointer-events: auto;
}
/* Sin ratón no hay "pasar por encima": ahí se ven siempre, y entonces sí hace
   falta reservarles el hueco para que no tapen nada. */
@media (hover: none) {
  .personal-lista .personal-card {
    padding-right: 120px;
  }
  .personal-lista .personal-acciones,
  .personal-lista .personal-card > .apunte-editar {
    opacity: 1;
    pointer-events: auto;
  }
}
.personal-lista .personal-card h3 {
  justify-content: flex-start;
}
/* El renombrar en línea no necesita el ancho de una tarjeta. */
.personal-lista .personal-nombre-editar {
  width: 100%;
}

/* Un bloque del Gantt listo para recibir una tarea que se suelta encima. */
.gantt-label.soltar {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.gantt-label .input.sm {
  width: 100%;
  font-size: 12px;
  padding: 3px 6px;
}

/* ---------- Tareas en cascada ----------
   La misma jerarquía que el Gantt: proyecto, bloque, tarea. Las dos
   pantallas enseñan lo mismo con la misma forma, así que una tarea se busca
   igual en las dos. */
.agrupar-por {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--fg-2);
}
.task-arbol {
  margin-bottom: 18px;
}
.task-arbol-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 5px 0;
}
.task-arbol-cabeza.nivel-0 {
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.task-arbol-cabeza.nivel-0 b {
  font-size: 0.98rem;
}
.task-arbol-cabeza.nivel-1 {
  padding-left: 18px;
  color: var(--fg-2);
}
.task-arbol-cabeza.nivel-1 b {
  font-size: 0.86rem;
  font-weight: 600;
}
.task-arbol-cabeza .muted {
  font-size: 0.76rem;
  background: var(--bg-3);
  border-radius: 999px;
  padding: 1px 8px;
}
.task-arbol-bloque {
  margin-bottom: 10px;
}
.task-arbol-bloque .task-row {
  margin-left: 18px;
}
.task-flecha {
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  flex: none;
  transition: transform 0.12s;
}
.task-flecha.abierta {
  transform: rotate(90deg);
}

/* La descripción de un enlace, al pasar el ratón por su línea. Se pinta con
   CSS y no con el tooltip del navegador porque ese tarda un segundo largo en
   aparecer y no se puede leer una frase entera en él. */
.personal-lista .personal-card.link {
  position: relative;
}
.enlace-globo {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% - 6px);
  z-index: 6;
  background: var(--bg-4);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.12s,
    transform 0.12s;
  pointer-events: none;
}
.enlace-globo-url {
  display: block;
  font-size: 0.76rem;
  color: var(--fg-3);
  word-break: break-all;
}
.enlace-globo-texto {
  display: block;
  margin-top: 5px;
}
.personal-card.link:hover .enlace-globo,
.personal-card.link:focus-within .enlace-globo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- La cascada, dentro del bloque de carpetas ---------- */
.archivos-dos {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  flex: 1;
  min-height: 0;
  padding-top: 6px;
}
.arbol-carpetas {
  border-right: 1px solid var(--line);
  padding-right: 8px;
  max-height: 62vh;
  overflow: auto;
}
.archivos-dos > .personal-grid {
  max-height: 62vh;
  overflow: auto;
}
@media (max-width: 900px) {
  .archivos-dos {
    grid-template-columns: 1fr;
  }
  .arbol-carpetas {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 170px;
  }
}
.arbol-carpetas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arbol-rama {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}
.arbol-rama:hover {
  background: var(--bg-3);
}
.arbol-rama.actual {
  background: var(--bg-4);
  color: var(--fg);
  font-weight: 600;
}
/* Cuando arrastras algo encima, la rama lo dice. */
.arbol-rama.soltar {
  border-color: var(--accent);
  background: var(--bg-4);
}
.arbol-rama .ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}
.arbol-rama .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arbol-rama small {
  font-size: 0.72rem;
  color: var(--fg-3);
}
.arbol-rama.raiz {
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
}

/* Sin post-its sueltos, la tira se aparta y el mosaico se queda el ancho. */
.postit-tira:has(.postit-vacio) {
  min-width: 0;
  max-width: 210px;
}
.postit-tira:has(.postit-vacio) .postit-vacio {
  font-size: 0.78rem;
}

/* ---------- Juegos de iconos ---------- */
/* Se eligen como la paleta, y la ficha se dibuja con su propio juego: hay que
   ver el trazo antes de decidir, no leer el nombre de la familia. */
.iconos-juegos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.icono-juego {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s;
}
.icono-juego:hover {
  border-color: var(--line-2);
}
.icono-juego.activo {
  border-color: var(--accent);
  background: var(--bg-3);
}
.icono-muestra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 19px;
  color: var(--fg);
  line-height: 1;
}
/* La fila de botones de muestra: seis, en una línea. */
.icono-muestra.botones {
  gap: 6px;
  font-size: 17px;
  flex-wrap: nowrap;
}
.icono-juego-nombre {
  font-weight: 600;
  color: var(--fg);
  font-size: 0.88rem;
}
.icono-juego-pie {
  font-size: 0.72rem;
  color: var(--fg-3);
}
/* Un dibujo a medida es una imagen: ni hereda el color del texto ni tiene
   trazo, así que solo se le fija el tamaño y se apaga cuando no toca. */
img.ico-dibujo {
  /* Algo mayores que los de trazo: el dibujo trae su propio margen dentro y
     si no, al lado del texto se ven encogidos. Donde manda una regla con más
     peso —la navegación, la barra de abajo— vale la de allí. */
  width: 1.75em;
  height: 1.75em;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.nav-item:hover img.ico-dibujo,
.nav-item.active img.ico-dibujo {
  opacity: 1;
}

/* ---------- Los flujos, en fichas con su miniatura ---------- */
.flujos-rejilla {
  display: grid;
  /* Cuatro por fila, que es lo pedido; por debajo de 1100 px se van
     acomodando solas hasta quedarse en una sola columna en el móvil. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) {
  .flujos-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .flujos-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .flujos-rejilla {
    grid-template-columns: 1fr;
  }
}
.flujo-ficha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.12s,
    transform 0.12s;
}
.flujo-ficha:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.flujo-lienzo {
  background: var(--bg-3);
  border-radius: 10px;
  padding: 4px;
  color: var(--accent);
}
.mini-flujo {
  display: block;
  width: 100%;
  height: 104px;
}
.mini-flujo.vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: 0.78rem;
  height: 104px;
}
.flujo-nombre {
  font-size: 0.92rem;
  line-height: 1.25;
}
.flujo-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flujo-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.74rem;
  color: var(--fg-3);
  margin-top: auto;
  padding-top: 2px;
}

/* ---------- Los dibujos de la casa ---------- */
/* Una sola geometría; el contorno lo ponen tres variables que cambia el
   ajuste de grosor. Heredan el color del texto, así que sirven igual en un
   botón activo, en uno apagado y en las dos paletas. */
.ico-casa-trazo {
  stroke: currentColor;
  fill: none;
  stroke-width: var(--ico-ancho, 1.72);
  stroke-linecap: var(--ico-remate, round);
  stroke-linejoin: round;
  transform: scale(var(--ico-escala, 0.96));
  transform-origin: 12px 12px;
}
/* El tamaño lo sigue poniendo el sitio donde va, igual que con los demás. */
svg.ico-casa {
  width: 1em;
  height: 1em;
}

/* ---------- Los botones en color (Caramelo, Gouache y Prisma) ----------
   Traen sus colores escritos en cada forma (iconos-color.tsx), así que no
   siguen el color del texto. Casi siempre es lo que se quiere; donde no:

   1. Sobre un fondo de color (el botón principal, el rojo de borrar, un
      chip elegido…) un icono de color se perdería o chocaría. Ahí vuelve a
      ser como los de trazo: del color del texto del botón, y los detalles
      blancos de dentro (las rayas de la papelera, el visto del círculo) del
      color del fondo, como recortados. --ico-fondo es ese fondo. */
svg.ico-color {
  width: 1em;
  height: 1em;
  flex: none;
}
.btn.primary,
.chip.active,
.chat-cabecera .chat-herr.chat-contenido.on,
.chat-abajo.con-nuevos,
.fab,
.gantt-boton.activo,
.lanzador-boton,
.mail-redactar,
.mail-casilla-todas.on,
.mail-fila.marcada .mail-casilla {
  --ico-fondo: var(--accent);
}
.btn.rojo {
  --ico-fondo: #b23c38;
}
.btn.meet-boton,
.deslizar-fondo.listo.archivar {
  --ico-fondo: var(--teal);
}
.btn.meet-boton.en-curso,
.task-row .check.done,
.deslizar-fondo.listo.hecha,
.vista-previa-casilla.hecha {
  --ico-fondo: var(--green);
}
:is(
    .btn.primary,
    .btn.rojo,
    .chip.active,
    .chat-cabecera .chat-herr.chat-contenido.on,
    .chat-abajo.con-nuevos,
    .fab,
    .gantt-boton.activo,
    .lanzador-boton,
    .mail-redactar,
    .mail-casilla-todas.on,
    .mail-fila.marcada .mail-casilla,
    .btn.meet-boton,
    .deslizar-fondo.listo,
    .task-row .check.done,
    .vista-previa-casilla.hecha
  )
  svg.ico-color
  [fill]:not([fill="none"]) {
  fill: currentColor;
}
:is(
    .btn.primary,
    .btn.rojo,
    .chip.active,
    .chat-cabecera .chat-herr.chat-contenido.on,
    .chat-abajo.con-nuevos,
    .fab,
    .gantt-boton.activo,
    .lanzador-boton,
    .mail-redactar,
    .mail-casilla-todas.on,
    .mail-fila.marcada .mail-casilla,
    .btn.meet-boton,
    .deslizar-fondo.listo,
    .task-row .check.done,
    .vista-previa-casilla.hecha
  )
  svg.ico-color
  [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}
:is(
    .btn.primary,
    .btn.rojo,
    .chip.active,
    .chat-cabecera .chat-herr.chat-contenido.on,
    .chat-abajo.con-nuevos,
    .fab,
    .gantt-boton.activo,
    .lanzador-boton,
    .mail-redactar,
    .mail-casilla-todas.on,
    .mail-fila.marcada .mail-casilla,
    .btn.meet-boton,
    .deslizar-fondo.listo,
    .task-row .check.done,
    .vista-previa-casilla.hecha
  )
  svg.ico-color
  [fill="#FFFFFF"]:not([fill="none"]) {
  fill: var(--ico-fondo, var(--bg));
}
:is(
    .btn.primary,
    .btn.rojo,
    .chip.active,
    .chat-cabecera .chat-herr.chat-contenido.on,
    .chat-abajo.con-nuevos,
    .fab,
    .gantt-boton.activo,
    .lanzador-boton,
    .mail-redactar,
    .mail-casilla-todas.on,
    .mail-fila.marcada .mail-casilla,
    .btn.meet-boton,
    .deslizar-fondo.listo,
    .task-row .check.done,
    .vista-previa-casilla.hecha
  )
  svg.ico-color
  [stroke="#FFFFFF"]:not([stroke="none"]) {
  stroke: var(--ico-fondo, var(--bg));
}
/* 2. La estrella dice si algo es favorito. Como la de trazo, va de contorno
      del color del texto (en la lista de canales, transparente hasta pasar
      por encima) y se rellena donde la plataforma la rellena: ahí, con el
      ámbar y el ocre del paquete. */
svg.estrella-color path {
  fill: none;
  stroke: currentColor;
}
svg.estrella-color.llena path,
svg.estrella-color.lleno path,
.mail-herr.estrella svg.estrella-color path,
.mail-fila-marcas .estrella path,
.chan-fila .chan-favorito.activo svg.estrella-color path,
.btn.estrella.activa svg.estrella-color path,
.carpeta-estrella svg.estrella-color path,
.favoritas-titulo svg.estrella-color path {
  fill: #f4ba55;
  stroke: #805416;
}

/* ======================================================================
   Correo
   Pantalla completa, sin marco: carpetas | lista | lectura. Todo lo de
   aquí va bajo .mail-* y solo usa las variables del tema.
   ====================================================================== */
.content.flush.mail-pagina {
  /* Alto fijo, como el Chat; flex: none para que el alto mande de verdad
     (con flex: 1 y un contenedor sin alto, la lista estiraba la página). */
  flex: none;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--topbar) - var(--pestanas));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  /* Las columnas se reparten según el ancho del propio correo, no de la
     ventana: así funciona igual a pantalla completa que en el mosaico. */
  container: correo / inline-size;
}
.mail-rejilla {
  display: grid;
  grid-template-columns:
    var(--mail-carpetas, 220px) 1px var(--mail-lista, 380px) 1px
    minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
/* En el mosaico, el panel ya tiene su tamaño: se rellena. */
.paneles.mosaico .content.flush.mail-pagina {
  flex: 1 1 0;
  height: auto;
}
/* El "papel" de los correos con diseño propio: casi blanco en oscuro (la
   tinta del tema), el blanco de las tarjetas en claro. */
.mail-pagina {
  --mail-papel: var(--fg);
  --mail-tinta: var(--bg);
}
[data-theme="light"] .mail-pagina {
  --mail-papel: var(--bg-2);
  --mail-tinta: var(--fg);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="sistema"] .mail-pagina {
    --mail-papel: var(--bg-2);
    --mail-tinta: var(--fg);
  }
}
.mail-pagina kbd,
.mail-atajos kbd,
.mail-menu kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.mail-filas,
.mail-lector-cuerpo,
.mail-carpetas-lista,
.mail-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}

/* ---------- Botón de herramienta: el ladrillo de todas las barras ---------- */
.mail-herr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.mail-herr:hover:not(:disabled),
.mail-herr.on {
  background: var(--bg-3);
  color: var(--fg);
  text-decoration: none;
}
.mail-herr.on {
  color: var(--accent);
}
.mail-herr:disabled {
  opacity: 0.38;
  cursor: default;
}
.mail-herr.con-texto {
  padding: 0 10px;
}
.mail-herr.mini {
  height: 26px;
  min-width: 26px;
  padding: 0 4px;
}
.mail-herr.peligro:hover {
  color: var(--red);
}
.mail-herr .ico {
  width: 17px;
  height: 17px;
}
.mail-herr.mini .ico {
  width: 15px;
  height: 15px;
}
.mail-herr.estrella,
.mail-herr.estrella:hover {
  color: var(--yellow);
}

/* ---------- Menús desplegables ---------- */
.mail-menu-caja {
  position: relative;
  display: inline-flex;
}
.mail-menu-boton.con-texto {
  letter-spacing: 0.08em;
  font-weight: 800;
}
.mail-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  max-width: 320px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  animation: mail-aparecer 0.12s ease-out;
}
.mail-menu.derecha {
  right: 0;
}
.mail-menu.izquierda {
  left: 0;
}
.mail-menu.arriba {
  top: auto;
  bottom: calc(100% + 6px);
}
.mail-menu-op {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mail-menu-op:hover:not(:disabled),
.mail-menu-op:focus-visible {
  background: var(--bg-3);
  text-decoration: none;
  outline: none;
}
.mail-menu-op:disabled {
  color: var(--fg-3);
  cursor: default;
}
.mail-menu-op .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--fg-3);
}
.mail-menu-op.peligro,
.mail-menu-op.peligro .ico {
  color: var(--red);
}
.mail-menu-op.separar,
.mail-menu-titulo.separar {
  margin-top: 9px;
}
.mail-menu-op.separar::before,
.mail-menu-titulo.separar::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -5px;
  border-top: 1px solid var(--line);
}
.mail-menu-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-menu-titulo {
  position: relative;
  padding: 6px 10px 4px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* La marca de "aplicada" se dibuja con bordes: nada de iconos extra. */
.mail-menu-marca {
  position: relative;
  display: inline-block;
}
.mail-menu-marca.on::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Tiradores ---------- */
.mail-tirador {
  position: relative;
  z-index: 3;
  background: var(--line);
}
.mail-tirador.vertical {
  cursor: col-resize;
}
.mail-tirador.horizontal {
  cursor: row-resize;
}
.mail-tirador::after {
  content: "";
  position: absolute;
  inset: 0 -4px;
}
.mail-tirador.horizontal::after {
  inset: -4px 0;
}
.mail-tirador:hover,
body.tirando .mail-tirador {
  background: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.mail-tirador:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 0;
  background: var(--teal);
}

/* ---------- Columna de carpetas ---------- */
.mail-carpetas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 14px 10px 10px;
  background: var(--bg);
}
.mail-redactar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin: 0 2px 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.mail-redactar:hover {
  background: var(--accent-2);
}
.mail-redactar:active {
  transform: scale(0.98);
}
.mail-redactar .ico {
  width: 19px;
  height: 19px;
}
.mail-carpetas-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -4px;
  padding: 0 4px;
}
.mail-carpeta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.mail-carpeta:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.mail-carpeta.activa {
  background: color-mix(in srgb, var(--accent) 17%, var(--bg));
  color: var(--fg);
  font-weight: 650;
}
.mail-carpeta .ico {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--fg-3);
}
.mail-carpeta.activa .ico {
  color: var(--accent);
}
.mail-carpeta-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-carpeta.con-nuevos .mail-carpeta-nombre {
  color: var(--fg);
  font-weight: 650;
}
.mail-carpeta-num {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.mail-carpeta.activa .mail-carpeta-num {
  color: var(--fg);
}
.mail-carpetas-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 4px 10px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mail-carpeta-fila {
  position: relative;
}
.mail-carpeta-fila .mail-carpeta {
  padding-right: 34px;
}
.mail-carpeta-menu {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.mail-carpeta-menu .mail-herr {
  height: 26px;
  min-width: 26px;
}
.mail-carpeta-fila:hover .mail-carpeta-menu,
.mail-carpeta-fila:focus-within .mail-carpeta-menu {
  opacity: 1;
}
.mail-etiqueta-ico {
  opacity: 0.9;
}
.mail-cuenta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 10px 4px 0 6px;
  border-top: 1px solid var(--line);
}
.mail-cuenta .mail-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.mail-cuenta-correo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12.5px;
}

/* ---------- Avatares ---------- */
.mail-avatar {
  --mail-tono: var(--accent);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mail-tono) 22%, var(--bg-2));
  color: var(--mail-tono);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.mail-avatar.grande {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.mail-avatar.tono-1 {
  --mail-tono: var(--teal);
}
.mail-avatar.tono-2 {
  --mail-tono: var(--blue);
}
.mail-avatar.tono-3 {
  --mail-tono: var(--violet);
}
.mail-avatar.tono-4 {
  --mail-tono: var(--yellow);
}
.mail-avatar.tono-5 {
  --mail-tono: var(--red);
}
.mail-avatar.tono-6 {
  --mail-tono: var(--green);
}
.mail-avatar.tono-7 {
  --mail-tono: var(--orange);
}
.mail-avatar.borrador {
  --mail-tono: var(--fg-3);
}
.mail-avatar .ico {
  width: 16px;
  height: 16px;
}

/* ---------- Lista ---------- */
.mail-lista {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-2);
  container-type: inline-size;
}
@container (max-width: 400px) {
  .mail-lote-palabra {
    display: none;
  }
}
.mail-lista-cabeza {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--line);
}
.mail-lista-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mail-lista-titulo h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.015em;
}
.mail-lista-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12.5px;
}
.mail-lista-titulo .mail-herr {
  margin-left: auto;
}
.mail-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.mail-buscar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.mail-buscar.activa {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.mail-buscar > .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.mail-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 13.5px;
  outline: none;
}
.mail-buscar input::placeholder {
  color: var(--fg-3);
}
.mail-buscar-borrar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.mail-buscar-borrar:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.mail-buscar-borrar .ico {
  width: 15px;
  height: 15px;
}
.mail-lista-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 0;
}
.mail-lista-nota {
  flex: 1;
  min-width: 0;
  color: var(--fg-3);
  font-size: 12px;
}
.mail-casilla-todas {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 11px;
  padding: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
  background: none;
  color: var(--accent-fg);
  cursor: pointer;
}
.mail-casilla-todas.on {
  border-color: var(--accent);
  background: var(--accent);
}
.mail-casilla-todas.mixto::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-2);
}
.mail-casilla-todas .ico {
  width: 13px;
  height: 13px;
}
.mail-filtros {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mail-filtro {
  flex: none;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.mail-filtro:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.mail-filtro.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  color: var(--fg);
  font-weight: 650;
}
.mail-lote-cuenta {
  flex: none;
  font-size: 13px;
  white-space: nowrap;
}
.mail-lote-acciones {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  margin-left: 4px;
}
.mail-lote-cerrar {
  margin-left: auto;
}

.mail-filas {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 16px;
}
.mail-grupo {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 18px 6px;
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mail-fila {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin: 0 8px 1px;
  border-radius: 10px;
}
.mail-fila:hover {
  background: var(--bg-3);
}
.mail-fila.activa {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
}
.mail-fila.activa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.mail-fila.marcada {
  background: color-mix(in srgb, var(--teal) 13%, var(--bg-2));
}
.mail-fila-avatar {
  position: relative;
  align-self: stretch;
  padding: 11px 0 0 10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.mail-fila.no-leido .mail-fila-avatar::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 25px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.mail-casilla {
  position: absolute;
  left: 10px;
  top: 11px;
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--accent-fg);
}
.mail-casilla .ico {
  display: none;
  width: 16px;
  height: 16px;
}
.mail-fila-avatar:hover .mail-avatar,
.mail-fila-avatar:focus-visible .mail-avatar,
.mail-fila.con-marcas .mail-fila-avatar .mail-avatar {
  visibility: hidden;
}
.mail-fila-avatar:hover .mail-casilla,
.mail-fila-avatar:focus-visible .mail-casilla,
.mail-fila.con-marcas .mail-casilla {
  display: grid;
}
.mail-fila.marcada .mail-casilla {
  border-color: var(--accent);
  background: var(--accent);
}
.mail-fila.marcada .mail-casilla .ico {
  display: block;
}
.mail-fila-principal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 11px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-fila-l1,
.mail-fila-l2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.mail-fila-quien {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 550;
}
.mail-fila-quien.falta {
  color: var(--red);
}
.mail-fila-n {
  flex: none;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 650;
}
.mail-fila-fecha {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mail-fila-asunto {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-2);
  font-size: 13.5px;
}
.mail-fila-extracto-corto {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12.5px;
}
.mail-fila-marcas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  color: var(--fg-3);
}
.mail-fila-marcas .ico {
  width: 14px;
  height: 14px;
}
.mail-fila-marcas .estrella {
  color: var(--yellow);
}
.mail-fila-l3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.45;
}
.mail-fila.no-leido .mail-fila-quien,
.mail-fila.no-leido .mail-fila-asunto {
  color: var(--fg);
  font-weight: 750;
}
.mail-fila.no-leido .mail-fila-fecha {
  color: var(--accent);
  font-weight: 700;
}
.mail-fila-acciones {
  position: absolute;
  right: 8px;
  top: 6px;
  display: none;
  gap: 1px;
  padding: 2px;
  border-radius: 9px;
  background: var(--bg-3);
}
.mail-fila.activa .mail-fila-acciones {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
}
.mail-fila.marcada .mail-fila-acciones {
  background: color-mix(in srgb, var(--teal) 13%, var(--bg-2));
}
.mail-fila-acciones .mail-herr {
  height: 28px;
  min-width: 28px;
}
.mail-fila-acciones .mail-herr:hover {
  background: var(--bg-4);
}
.mail-fila-acciones .ico {
  width: 16px;
  height: 16px;
}
.mail-fila:hover .mail-fila-acciones,
.mail-fila:focus-within .mail-fila-acciones {
  display: flex;
}
.mail-fila:hover .mail-fila-fecha,
.mail-fila:focus-within .mail-fila-fecha {
  visibility: hidden;
}
/* Densidad compacta: avatar pequeño, sin tercera línea. */
.mail-filas.compacta .mail-fila-avatar {
  padding-top: 7px;
}
.mail-filas.compacta .mail-avatar,
.mail-filas.compacta .mail-casilla {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.mail-filas.compacta .mail-casilla {
  top: 7px;
}
.mail-filas.compacta .mail-fila.no-leido .mail-fila-avatar::before {
  top: 17px;
}
.mail-filas.compacta .mail-fila-principal {
  gap: 0;
  padding: 6px 12px 7px 10px;
}
.mail-filas.compacta .mail-fila-acciones {
  top: 3px;
}
.mail-fila.borrador .mail-fila-acciones {
  top: 50%;
  transform: translateY(-50%);
}

/* Esqueletos: la forma de la lista antes de que llegue. */
.mail-fila.esqueleto {
  pointer-events: none;
}
.mail-fila.esqueleto .mail-avatar {
  background: var(--bg-3);
}
.mail-fila.esqueleto .mail-fila-principal {
  gap: 7px;
  padding-top: 14px;
}
.mail-hueso {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-3) 0%,
    var(--bg-4) 50%,
    var(--bg-3) 100%
  );
  background-size: 200% 100%;
  animation: mail-brillo 1.3s ease-in-out infinite;
}
.mail-hueso.fino {
  height: 8px;
}
.mail-hueso.ancho-25 {
  width: 25%;
}
.mail-hueso.ancho-40 {
  width: 40%;
}
.mail-hueso.ancho-60 {
  width: 60%;
}
.mail-hueso.ancho-70 {
  width: 70%;
}
.mail-hueso.ancho-80 {
  width: 80%;
}
.mail-hueso.ancho-90 {
  width: 90%;
}
@keyframes mail-brillo {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes mail-aparecer {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes mail-subir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.mail-mas {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}
.mail-mas .mail-fila {
  align-self: stretch;
}
.mail-fin {
  padding: 18px;
  color: var(--fg-3);
  font-size: 12px;
  text-align: center;
}

/* Vacíos y avisos */
.mail-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  color: var(--fg-2);
  text-align: center;
}
.mail-vacio b {
  color: var(--fg);
  font-size: 15px;
}
.mail-vacio p {
  max-width: 290px;
  color: var(--fg-3);
  font-size: 13px;
}
.mail-vacio-botones {
  margin-top: 10px;
}
.mail-vacio-icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-2));
  color: var(--accent);
}
.mail-vacio-icono .ico {
  width: 26px;
  height: 26px;
}
.mail-vacio-icono.grande {
  width: 84px;
  height: 84px;
}
.mail-vacio-icono.grande .ico {
  width: 38px;
  height: 38px;
}
.mail-aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 8%, var(--bg-2));
}
.mail-aviso > .ico {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--red);
}
.mail-aviso p {
  grid-column: 2;
  color: var(--fg-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mail-aviso .btn {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
}
.mail-conversacion .mail-aviso {
  margin: 0;
}

/* ---------- Lectura ---------- */
.mail-lector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.mail-lector-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.mail-barra-grupo {
  display: flex;
  align-items: center;
  gap: 1px;
}
.mail-barra-grupo + .mail-barra-grupo {
  margin-left: 5px;
  padding-left: 6px;
  border-left: 1px solid var(--line);
}
.mail-barra-hueco {
  flex: 1;
}
.mail-barra-hueco + .mail-barra-grupo {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.mail-posicion-texto {
  padding: 0 6px;
  color: var(--fg-3);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mail-volver {
  display: none;
}
.mail-lector-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mail-conversacion {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 28px 56px;
}
.mail-asunto h1 {
  font-size: 22px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.mail-asunto-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 18px;
}
.mail-asunto-datos:empty {
  margin-bottom: 14px;
}
.mail-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 550;
}
.mail-pastilla.etiqueta {
  padding-right: 3px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  color: var(--fg);
}
.mail-pastilla .ico {
  width: 13px;
  height: 13px;
}
.mail-pastilla button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.mail-pastilla button:hover {
  background: var(--bg-4);
  color: var(--fg);
}
.mail-pastilla button .ico {
  width: 12px;
  height: 12px;
}
.mail-hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mail-msj {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
.mail-msj.plegado {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-msj.plegado:hover {
  border-color: var(--line-2);
}
.mail-msj.plegado.no-leido {
  box-shadow: inset 3px 0 var(--accent);
}
.mail-msj.plegado .mail-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.mail-msj-nombre {
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.mail-msj-extracto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 13px;
}
.mail-msj-fecha {
  color: var(--fg-3);
  font-size: 12.5px;
  font-style: normal;
  white-space: nowrap;
}
.mail-msj.abierto {
  padding: 16px 20px 20px;
}
.mail-msj-cabeza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.mail-msj-plegar {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.mail-msj-quien {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 2px;
}
.mail-msj-linea1 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.mail-msj-linea1 .mail-msj-nombre {
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-msj-correo {
  /* El correo cede antes que el nombre: ocupa lo que sobre. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12.5px;
}
.mail-msj-linea1 .mail-herr {
  flex: none;
}
/* Estrella llena: el juego de iconos no trae versión rellena, se rellena aquí. */
.mail-herr.estrella .ico,
.mail-herr.estrella .ico .ico-casa-trazo,
.mail-fila-marcas .estrella,
.mail-fila-marcas .estrella .ico-casa-trazo {
  fill: currentColor;
}
.mail-herr.mail-guardar-contacto {
  color: var(--accent);
}
.mail-herr.mail-guardar-contacto:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  color: var(--accent);
}
.mail-msj-para {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.mail-msj-para:hover {
  color: var(--fg-2);
}
.mail-msj-para .ico {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.mail-msj-para .ico.girado {
  transform: rotate(180deg);
}
.mail-msj-lado {
  display: flex;
  align-items: center;
  gap: 1px;
}
.mail-msj-lado .mail-msj-fecha {
  margin-right: 6px;
}
.mail-msj-rel {
  color: var(--fg-3);
}
.mail-msj-detalles {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  margin: 12px 0 0 52px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  font-size: 12.5px;
}
.mail-msj-detalles dt {
  color: var(--fg-3);
  text-align: right;
}
.mail-msj-detalles dd {
  margin: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.mail-dir b {
  margin-right: 4px;
  color: var(--fg);
  font-weight: 600;
}
.mail-dir em {
  margin-left: 4px;
  color: var(--fg-3);
  font-style: normal;
}
.mail-cuerpo {
  margin: 14px 0 0 52px;
}
.mail-marco {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.mail-cuerpo.papel .mail-marco {
  border-radius: 10px;
  background: var(--mail-papel);
}
.mail-marco.midiendo {
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--bg-3) 0%,
    var(--bg-4) 50%,
    var(--bg-3) 100%
  );
  background-size: 200% 100%;
  animation: mail-brillo 1.3s ease-in-out infinite;
}
.mail-cuerpo-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mail-cita-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mail-cita-btn:hover {
  border-color: var(--line-2);
  color: var(--fg);
}
.mail-cita-btn .ico {
  width: 15px;
  height: 15px;
}
.mail-adjuntos {
  margin: 18px 0 0 52px;
}
.mail-adjuntos-cabeza {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
  color: var(--fg-2);
  font-size: 13px;
}
.mail-adjuntos-cabeza > span {
  color: var(--fg-3);
}
.mail-adjuntos-todos {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.mail-adjuntos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.mail-adjunto {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color 0.12s ease;
}
.mail-adjunto:hover {
  border-color: var(--line-2);
}
.mail-adjunto-ver {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-adjunto-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mail-adjunto-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.mail-adjunto-texto em {
  color: var(--fg-3);
  font-size: 12px;
  font-style: normal;
}
.mail-adjunto-acciones {
  display: flex;
  gap: 1px;
  padding-right: 6px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.mail-adjunto:hover .mail-adjunto-acciones,
.mail-adjunto:focus-within .mail-adjunto-acciones {
  opacity: 1;
}
.mail-adjunto-acciones .mail-herr {
  height: 28px;
  min-width: 28px;
}
.mail-responder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0 52px;
}
.mail-responder .btn {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 18px;
}
.mail-hilo-mas {
  position: relative;
  height: 32px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.mail-hilo-mas:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.mail-hilo-mas span {
  color: var(--accent);
  font-weight: 750;
}
.mail-msj.esqueleto .mail-avatar {
  background: var(--bg-3);
}
.mail-msj.esqueleto .mail-msj-quien {
  gap: 8px;
  padding-top: 6px;
}
.mail-hueso-bloque {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 6px 52px;
}
.mail-lector.vacio {
  display: grid;
  place-items: center;
}
.mail-lector-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 440px;
  padding: 32px;
  color: var(--fg-2);
  text-align: center;
}
.mail-lector-vacio b {
  color: var(--fg);
  font-size: 16px;
}
.mail-lector-vacio p {
  color: var(--fg-3);
  font-size: 13.5px;
}
.mail-atajos-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 8px 0 14px;
  color: var(--fg-3);
  font-size: 12.5px;
}
.mail-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mail-enlace:hover {
  color: var(--fg);
}

/* ---------- Redacción ---------- */
.mail-redactor {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  height: min(660px, calc(100dvh - var(--topbar) - 20px));
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  animation: mail-aparecer 0.14s ease-out;
}
.mail-redactor.minimizado {
  width: 320px;
  height: auto;
}
.mail-redactor-fondo {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(2px);
}
.mail-redactor.maximizado {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(1100px, 94vw);
  height: min(880px, 92dvh);
  border-bottom: 1px solid var(--line-2);
  border-radius: 16px;
}
.mail-redactor-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 42px;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.mail-redactor.minimizado .mail-redactor-cabeza {
  border-bottom: 0;
  cursor: pointer;
}
.mail-redactor-cabeza b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}
.mail-redactor-botones {
  display: flex;
  gap: 1px;
}
.mail-redactor-botones .mail-herr {
  height: 30px;
  min-width: 30px;
}
.mail-redactor-campos {
  flex: none;
  padding: 0 16px;
}
.mail-campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
}
.mail-campo-etiqueta {
  flex: none;
  width: 50px;
  color: var(--fg-3);
  font-size: 13px;
}
.mail-fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}
.mail-fichas-entrada {
  flex: 1;
  min-width: 140px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 13.5px;
  outline: none;
}
.mail-ficha {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  height: 26px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg);
  font-size: 13px;
  white-space: nowrap;
}
.mail-ficha.mal {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-2));
  color: var(--red);
}
.mail-ficha button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.mail-ficha button:hover {
  background: var(--bg-4);
  color: var(--fg);
}
.mail-ficha button .ico {
  width: 12px;
  height: 12px;
}
.mail-campo-extra {
  display: flex;
  gap: 2px;
  flex: none;
}
.mail-campo-extra button {
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-3);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.mail-campo-extra button:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.mail-asunto-entrada {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}
.mail-sugerencias {
  position: absolute;
  top: calc(100% - 2px);
  left: 50px;
  z-index: 6;
  width: min(420px, calc(100% - 50px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
}
.mail-sugerencia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-sugerencia.activa {
  background: var(--bg-3);
}
.mail-sugerencia b {
  font-size: 13px;
  white-space: nowrap;
}
.mail-sugerencia span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 12px;
}
.mail-sugerencia em {
  grid-column: 1 / -1;
  color: var(--fg-3);
  font-size: 12px;
  font-style: normal;
}
.mail-redactor-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mail-redactor .mail-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mail-redactor .fmt-bar {
  position: static;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.mail-redactor.sin-formato .fmt-bar {
  display: none;
}
.mail-redactor .mail-editor-body {
  flex: 1;
  max-height: none;
  padding: 14px 16px;
}
.mail-redactor .mail-editor-body:focus {
  box-shadow: none;
}
.mail-redactor-adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
  max-height: 112px;
  overflow-y: auto;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
}
.mail-adj-ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  height: 32px;
  padding: 0 3px 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 12.5px;
}
.mail-adj-ficha.fija {
  padding-right: 10px;
  color: var(--fg-2);
}
.mail-adj-ficha .ico {
  width: 14px;
  height: 14px;
}
.mail-adj-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-adj-ficha em {
  flex: none;
  color: var(--fg-3);
  font-size: 12px;
  font-style: normal;
}
.mail-adj-ficha button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.mail-adj-ficha button:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.mail-redactor-error {
  flex: none;
  margin: 0 16px 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 12%, var(--bg-2));
  color: var(--red);
  font-size: 13px;
}
.mail-redactor-pie {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 10px 10px 12px 14px;
  border-top: 1px solid var(--line);
}
.btn.mail-enviar {
  min-height: 38px;
  margin-right: 6px;
  padding: 0 20px;
  border-radius: 999px;
}
.mail-redactor-pie label.mail-herr {
  cursor: pointer;
}
.mail-aa {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mail-redactor-estado {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
  color: var(--fg-3);
  font-size: 12px;
}
.mail-soltar {
  position: absolute;
  inset: 42px 0 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 2px dashed var(--accent);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  color: var(--accent);
  font-weight: 700;
  pointer-events: none;
}
.mail-soltar .ico {
  width: 30px;
  height: 30px;
}

/* ---------- Deshacer ---------- */
.mail-deshacer {
  position: fixed;
  left: calc(var(--sidebar) + 20px);
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 16px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--bg);
  font-size: 13.5px;
  box-shadow: var(--shadow-alta);
  animation: mail-subir 0.18s ease-out;
}
.mail-deshacer > button:not(.mail-herr) {
  margin-left: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bg);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.mail-deshacer > button:hover,
.mail-deshacer .mail-herr:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg) 16%, transparent);
  color: var(--bg);
}
.mail-deshacer .mail-herr {
  color: var(--bg);
}

/* ---------- Atajos ---------- */
.mail-atajos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px 18px;
  margin: 0;
}
.mail-atajos dt {
  color: var(--fg-3);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.mail-atajos dd {
  margin: 0;
  font-size: 13.5px;
}

/* ---------- Lectura debajo de la lista ---------- */
.mail-rejilla.apilada {
  grid-template-columns: var(--mail-carpetas, 220px) 1px minmax(0, 1fr);
  grid-template-rows: var(--mail-alto-lista, 320px) 1px minmax(0, 1fr);
}
.mail-rejilla.apilada > .mail-carpetas,
.mail-rejilla.apilada > .mail-tirador.de-carpetas {
  grid-row: 1 / 4;
}
.mail-rejilla.apilada > .mail-lista {
  grid-column: 3;
  grid-row: 1;
}
.mail-rejilla.apilada > .mail-tirador.horizontal {
  grid-column: 3;
  grid-row: 2;
}
.mail-rejilla.apilada > .mail-lector {
  grid-column: 3;
  grid-row: 3;
}

/* ---------- Correo estrecho ----------
   Por debajo de 1180 px de correo (no de ventana: cuenta también el mosaico)
   las carpetas se quedan en iconos. Por debajo de 820 px no caben lista y
   lectura a la vez: se turnan, con un botón para volver. */
@container correo (max-width: 1180px) {
  .mail-rejilla,
  .mail-rejilla.apilada {
    grid-template-columns:
      64px 1px minmax(0, var(--mail-lista, 380px))
      1px minmax(0, 1fr);
  }
  .mail-rejilla.apilada {
    grid-template-columns: 64px 1px minmax(0, 1fr);
  }
  .mail-rejilla > .mail-tirador.de-carpetas {
    pointer-events: none;
  }
  .mail-carpetas {
    padding: 12px 8px 8px;
  }
  .mail-redactar {
    justify-content: center;
    width: 46px;
    margin: 0 auto 12px;
    padding: 0;
  }
  .mail-redactar span,
  .mail-carpeta-nombre,
  .mail-carpetas-seccion span,
  .mail-carpeta-menu,
  .mail-cuenta-correo,
  .mail-cuenta .mail-avatar {
    display: none;
  }
  .mail-carpeta,
  .mail-carpeta-fila .mail-carpeta {
    position: relative;
    justify-content: center;
    min-height: 40px;
    padding: 0 !important;
  }
  .mail-carpeta-num {
    position: absolute;
    top: 2px;
    right: 3px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
  }
  .mail-carpeta.activa .mail-carpeta-num {
    color: var(--accent-fg);
  }
  .mail-carpetas-seccion {
    justify-content: center;
    margin: 12px 0 4px;
  }
  .mail-cuenta {
    justify-content: center;
    padding: 8px 0 0;
  }
}
@container correo (max-width: 820px) {
  .mail-rejilla,
  .mail-rejilla.apilada {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .mail-rejilla > .mail-tirador {
    display: none;
  }
  .mail-rejilla > .mail-carpetas,
  .mail-rejilla.apilada > .mail-carpetas {
    grid-row: 1;
  }
  .mail-rejilla > .mail-lista,
  .mail-rejilla > .mail-lector,
  .mail-rejilla.apilada > .mail-lista,
  .mail-rejilla.apilada > .mail-lector {
    grid-column: 2;
    grid-row: 1;
  }
  .mail-rejilla.con-lector > .mail-lista,
  .mail-rejilla:not(.con-lector) > .mail-lector {
    display: none;
  }
  .mail-volver {
    display: inline-flex;
  }
  .mail-cerrar-lector {
    display: none;
  }
}
/* La lectura también mira su propio ancho: cabeceras y márgenes se apañan. */
.mail-lector {
  container: lector / inline-size;
}
@container lector (max-width: 700px) {
  .mail-conversacion {
    padding: 18px 16px 40px;
  }
  .mail-cuerpo,
  .mail-adjuntos,
  .mail-responder,
  .mail-msj-detalles,
  .mail-hueso-bloque {
    margin-left: 0;
  }
  .mail-texto-ancho,
  .mail-posicion-texto,
  .mail-msj-rel {
    display: none;
  }
  .mail-msj.abierto {
    padding: 14px 14px 16px;
  }
}
@container lector (max-width: 520px) {
  .mail-msj-cabeza {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mail-msj-lado {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: -6px;
  }
  .mail-msj-lado .mail-msj-fecha {
    margin-right: auto;
    padding-left: 52px;
  }
  .mail-lector-barra {
    padding: 0 6px;
  }
  .mail-barra-grupo + .mail-barra-grupo {
    margin-left: 2px;
    padding-left: 2px;
  }
}
@media (max-width: 900px) {
  .content.flush.mail-pagina {
    height: calc(100dvh - var(--topbar) - var(--tabbar));
  }
  .mail-deshacer {
    left: 16px;
    bottom: calc(var(--tabbar) + 16px);
  }
}
@media (max-width: 760px) {
  .mail-redactor,
  .mail-redactor.maximizado {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    height: calc(100dvh - 24px);
    border-radius: 14px 14px 0 0;
  }
}
@media (hover: none) {
  .mail-fila-acciones {
    display: none !important;
  }
  .mail-fila:hover .mail-fila-fecha {
    visibility: visible;
  }
  .mail-adjunto-acciones,
  .mail-carpeta-menu {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mail-hueso,
  .mail-marco.midiendo,
  .mail-menu,
  .mail-redactor,
  .mail-deshacer {
    animation: none;
  }
}

/* ======================================================================
   Avisos
   A pantalla completa, como el Chat y el Correo. Todo bajo .avisos-*: la
   clase .act es de Inicio y se queda como estaba.
   ====================================================================== */
.content.flush.avisos-pagina {
  flex: none;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--topbar) - var(--pestanas));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  container: avisos / inline-size;
}
.paneles.mosaico .content.flush.avisos-pagina {
  flex: 1 1 0;
  height: auto;
}
.avisos-pagina .fam-menciones {
  --fam: var(--accent);
}
.avisos-pagina .fam-tareas {
  --fam: var(--teal);
}
.avisos-pagina .fam-chat {
  --fam: var(--blue);
}
.avisos-pagina .fam-correo {
  --fam: var(--yellow);
}
.avisos-pagina .fam-archivos {
  --fam: var(--violet);
}
.avisos-pagina .fam-agenda {
  --fam: var(--green);
}
.avisos-pagina .fam-recordatorios {
  --fam: var(--orange);
}
.avisos-pagina .fam-proyectos,
.avisos-pagina .fam-otros {
  --fam: var(--fg-3);
}

/* ---------- Cabecera: todos los mandos juntos ---------- */
.avisos-cabeza {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--line);
}
.avisos-fila-mandos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.avisos-insignia {
  display: inline-block;
  min-width: 18px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 750;
  line-height: 18px;
  text-align: center;
}
.avisos-select {
  height: 38px;
  max-width: 240px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.avisos-select.activo {
  border-color: var(--accent);
  color: var(--fg);
}
.avisos-hueco {
  flex: 1;
}
.avisos-herr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}
.avisos-herr:hover {
  background: var(--bg-4);
  color: var(--fg);
}
.avisos-herr .ico {
  width: 17px;
  height: 17px;
}
.avisos-todo-leido .ico {
  width: 16px;
  height: 16px;
}
.avisos-familias {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.avisos-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.avisos-chip:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.avisos-chip.on {
  border-color: color-mix(in srgb, var(--fam, var(--accent)) 60%, var(--line));
  background: color-mix(in srgb, var(--fam, var(--accent)) 16%, var(--bg-2));
  color: var(--fg);
  font-weight: 650;
}
.avisos-chip em {
  color: var(--fg-3);
  font-style: normal;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.avisos-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fam);
}
.avisos-activos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--fg-3);
  font-size: 12.5px;
}
.avisos-activos button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 6px 0 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.avisos-activos button .ico {
  width: 13px;
  height: 13px;
}
.avisos-activos button.avisos-quitar {
  padding: 0 8px;
  background: none;
  color: var(--fg-2);
  font-weight: 500;
  text-decoration: underline;
}

/* ---------- Lista ---------- */
.avisos-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}
.avisos-columna {
  max-width: 1320px;
  margin: 0 auto;
  padding: 4px 24px 48px;
}
.avisos-seccion {
  margin-top: 10px;
}
.avisos-seccion-titulo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 6px;
  background: var(--bg);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avisos-seccion-titulo span {
  font-weight: 600;
  letter-spacing: 0;
}
.avisos-seccion-titulo em {
  color: var(--fg-3);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
/* Lo que te reclama a ti, aparte y arriba. */
.avisos-seccion.para-ti {
  margin-top: 14px;
  padding: 2px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.avisos-seccion.para-ti .avisos-seccion-titulo {
  position: static;
  background: none;
  color: var(--accent);
}

.avisos-fila {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
.avisos-fila:hover {
  background: var(--bg-3);
}
.avisos-principal {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 12px 14px 12px 24px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.avisos-fila.grupo > .avisos-principal {
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
}
/* Sin leer: punto, texto fuerte y un fondo apenas tintado. */
.avisos-fila.no-leido {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.avisos-fila.no-leido:hover {
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-3));
}
.avisos-fila.no-leido::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 29px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.avisos-fila.hijo.no-leido::before {
  top: 17px;
}
.avisos-fila.prio-alta.no-leido::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.avisos-fila + .avisos-fila {
  margin-top: 2px;
}

.avisos-cara {
  position: relative;
  width: 40px;
  height: 40px;
}
/* Mismas caras que en el resto de la plataforma: cuadradas con esquinas. */
.avisos-cara .avatar,
.avisos-inicial {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
}
.avisos-cara.icono {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fam) 18%, var(--bg-2));
  color: var(--fam);
}
.avisos-cara.icono .ico {
  width: 20px;
  height: 20px;
}
.avisos-inicial {
  --tono: var(--accent);
  background: color-mix(in srgb, var(--tono) 22%, var(--bg-2));
  color: var(--tono);
}
.avisos-inicial.tono-1 {
  --tono: var(--teal);
}
.avisos-inicial.tono-2 {
  --tono: var(--blue);
}
.avisos-inicial.tono-3 {
  --tono: var(--violet);
}
.avisos-inicial.tono-4 {
  --tono: var(--yellow);
}
.avisos-inicial.tono-5 {
  --tono: var(--red);
}
.avisos-inicial.tono-6 {
  --tono: var(--green);
}
.avisos-inicial.tono-7 {
  --tono: var(--orange);
}
.avisos-inicial.icono {
  --tono: var(--fam);
}
.avisos-inicial .ico {
  width: 15px;
  height: 15px;
}
/* El sello: qué clase de aviso es, en la esquina de la cara. */
.avisos-sello {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--fam);
  color: var(--bg);
}
.avisos-sello .ico {
  width: 11px;
  height: 11px;
}
.avisos-arroba {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.avisos-cara.icono .avisos-arroba {
  font-size: 19px;
}
.avisos-sello .avisos-arroba {
  font-size: 11px;
}
.avisos-pila {
  position: relative;
  width: 44px;
  height: 40px;
}
.avisos-pila > * {
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  border: 2px solid var(--bg);
  font-size: 11px !important;
}
.avisos-pila > :nth-child(1) {
  left: 0;
  top: 0;
  z-index: 2;
}
.avisos-pila > :nth-child(2) {
  left: 13px;
  top: 11px;
  z-index: 1;
}
.avisos-pila > :nth-child(3) {
  display: none;
}

.avisos-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.avisos-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.28em;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.avisos-titulo b {
  color: var(--fg);
  font-weight: 650;
}
.avisos-objeto {
  color: var(--fg);
  font-weight: 550;
}
.avisos-cuenta {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-2));
  color: var(--fg);
  font-size: 12px;
  font-weight: 650;
}
.avisos-detalle {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.avisos-ultimo {
  color: var(--fg-2);
}
.avisos-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 2px;
  color: var(--fg-3);
  font-size: 12px;
}
.avisos-tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fam);
  font-weight: 650;
}
.avisos-tipo .ico {
  width: 13px;
  height: 13px;
}
.avisos-proyecto::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--line-2);
  vertical-align: 1px;
}
.avisos-perdido {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--red);
  font-weight: 600;
}
.avisos-perdido .ico {
  width: 13px;
  height: 13px;
}
.avisos-fila.perdido .avisos-titulo,
.avisos-fila.perdido .avisos-detalle {
  text-decoration: line-through;
  text-decoration-color: var(--line-2);
}
.avisos-hora {
  padding-top: 2px;
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.avisos-flecha {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--fg-3);
  transition: transform 0.15s ease;
}
.avisos-flecha.girada {
  transform: rotate(180deg);
}
.avisos-fila.no-leido > .avisos-principal .avisos-titulo {
  color: var(--fg);
}
.avisos-fila.no-leido > .avisos-principal .avisos-titulo b {
  font-weight: 750;
}
.avisos-fila.no-leido > .avisos-principal .avisos-hora {
  color: var(--accent);
  font-weight: 650;
}
/* Lo de poca monta, ya leído, se queda en segundo plano. */
.avisos-fila.prio-baja:not(.no-leido) > .avisos-principal .avisos-titulo,
.avisos-fila.prio-baja:not(.no-leido) > .avisos-principal .avisos-titulo b,
.avisos-fila.prio-baja:not(.no-leido) > .avisos-principal .avisos-objeto {
  color: var(--fg-2);
  font-weight: 500;
}
.avisos-fila.prio-baja:not(.no-leido) > .avisos-principal .avisos-cara,
.avisos-fila.prio-baja:not(.no-leido) > .avisos-principal .avisos-pila {
  opacity: 0.8;
}

/* Acción de la fila: aparece al pasar por encima, en el sitio de la hora. */
.avisos-acciones {
  position: absolute;
  right: 10px;
  top: 8px;
  display: none;
  padding: 2px;
  border-radius: 10px;
  background: var(--bg-3);
}
.avisos-fila.grupo > .avisos-acciones {
  right: 38px;
}
.avisos-fila:hover > .avisos-acciones,
.avisos-fila:focus-within > .avisos-acciones {
  display: flex;
}
.avisos-fila:hover > .avisos-principal .avisos-hora,
.avisos-fila:focus-within > .avisos-principal .avisos-hora {
  visibility: hidden;
}
.avisos-fila:has(.avisos-fila:hover) > .avisos-acciones {
  display: none;
}
.avisos-fila:has(.avisos-fila:hover) > .avisos-principal .avisos-hora {
  visibility: visible;
}
.avisos-fila.no-leido > .avisos-acciones {
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-3));
}

/* Hijos de un grupo desplegado. */
.avisos-hijos {
  margin: -2px 10px 10px 72px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}
.avisos-fila.hijo > .avisos-principal {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 12px 8px 20px;
}
.avisos-fila.hijo .avisos-titulo {
  font-size: 13.5px;
}
.avisos-fila.hijo .avisos-detalle {
  -webkit-line-clamp: 1;
}

/* Esqueleto, vacío y final. */
.avisos-fila.esqueleto {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 14px 14px 24px;
  pointer-events: none;
}
.avisos-fila.esqueleto .avisos-cara {
  border-radius: 11px;
  background: var(--bg-3);
}
.avisos-fila.esqueleto .avisos-texto {
  gap: 8px;
  padding-top: 5px;
}
.avisos-hueso {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-3) 0%,
    var(--bg-4) 50%,
    var(--bg-3) 100%
  );
  background-size: 200% 100%;
  animation: avisos-brillo 1.3s ease-in-out infinite;
}
.avisos-hueso.largo {
  width: 62%;
}
.avisos-hueso.corto {
  width: 38%;
  height: 9px;
}
@keyframes avisos-brillo {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.avisos-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 72px 24px;
  color: var(--fg-2);
  text-align: center;
}
.avisos-vacio b {
  color: var(--fg);
  font-size: 16px;
}
.avisos-vacio p {
  max-width: 380px;
  color: var(--fg-3);
  font-size: 13.5px;
}
.avisos-vacio-icono {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-2));
  color: var(--accent);
}
.avisos-vacio-icono .ico {
  width: 32px;
  height: 32px;
}
.avisos-vacio-botones {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.avisos-mas {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}
.avisos-fin {
  padding: 18px 0 4px;
  color: var(--fg-3);
  font-size: 12px;
  text-align: center;
}

/* ---------- Estrecho ---------- */
@container avisos (max-width: 900px) {
  .avisos-solo-ancho {
    display: none;
  }
}
@container avisos (max-width: 760px) {
  .avisos-cabeza {
    padding: 12px 14px 10px;
  }
  .avisos-columna {
    padding: 2px 8px 40px;
  }
  .avisos-principal {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 10px 10px 20px;
  }
  .avisos-fila.grupo > .avisos-principal {
    grid-template-columns: 36px minmax(0, 1fr) auto 16px;
  }
  .avisos-cara,
  .avisos-cara .avatar,
  .avisos-inicial {
    width: 34px;
    height: 34px;
  }
  .avisos-pila {
    width: 36px;
  }
  .avisos-hijos {
    margin-left: 24px;
  }
}
@media (max-width: 900px) {
  .content.flush.avisos-pagina {
    height: calc(100dvh - var(--topbar) - var(--tabbar));
  }
}
@media (hover: none) {
  .avisos-acciones {
    position: static;
    display: flex;
    align-self: flex-end;
    margin: -8px 8px 6px 0;
    background: none;
  }
  .avisos-fila:hover > .avisos-principal .avisos-hora {
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .avisos-hueso {
    animation: none;
  }
}

/* ---------- Finanzas: facturación ----------
   Todo con prefijo fin- para no tocar nada fuera de esta sección. Los
   colores salen del tema; la factura en sí (la hoja) tiene los suyos. */
.fin-pestanas {
  display: flex;
  gap: 4px;
  margin: 6px 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.fin-pestanas button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.fin-pestanas button:hover {
  color: var(--fg);
}
.fin-pestanas button.activa {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.fin-pestanas .ico {
  width: 16px;
  height: 16px;
}
.fin-panel {
  min-height: 200px;
}
/* En rejilla, la separación la pone el gap: sin esto, cada tarjeta que
   sigue a otra baja un poco y la fila queda escalonada. */
.fin-panel :is(.finance-stats, .fin-informes, .fin-plantillas) > .card + .card {
  margin-top: 0;
}

/* Etiquetas de estado */
.fin-estado {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.fin-neutro {
  color: var(--fg-3);
}
.fin-azul {
  color: var(--blue);
}
.fin-amarillo {
  color: var(--yellow);
}
.fin-verde {
  color: var(--green);
}
.fin-rojo {
  color: var(--red);
}
.fin-violeta {
  color: var(--violet);
}
.fin-rojo-texto {
  color: var(--red);
}
.fin-verde-texto {
  color: var(--green);
}
.fin-ml {
  margin-left: 8px;
}
.fin-mt {
  margin-top: 18px;
}
.finance-stat.fin-alerta h2 {
  color: var(--red);
}

/* Avisos dentro de la sección */
.fin-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 13.5px;
}
.fin-nota p {
  margin: 0;
}
.fin-nota > .ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--accent);
}
.fin-enlace {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Buscador con icono */
.fin-buscar {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fin-buscar .ico {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}
.finance-filtros .fin-buscar .input {
  padding-left: 32px;
  min-width: 240px;
}
.finance-filtros .hint {
  margin: 0;
  flex: 1 1 320px;
}

/* Tablas de documentos y clientes */
.fin-tabla {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
.fin-fila {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font: inherit;
  color: var(--fg);
}
.fin-fila:last-child {
  border-bottom: 0;
}
.fin-fila > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fin-fila small {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-fila .num,
.fin-cuadro .num {
  text-align: right;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fin-cabecera {
  background: var(--bg-3);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 8px;
  padding-bottom: 8px;
}
.fin-fila-boton {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  cursor: pointer;
}
.fin-fila-boton:hover {
  background: var(--bg-3);
}
.fin-cols-docs {
  grid-template-columns:
    minmax(120px, 1fr) minmax(160px, 2fr) minmax(90px, 0.8fr)
    minmax(90px, 0.8fr) minmax(90px, 0.8fr) minmax(100px, auto);
}
.fin-cols-clientes {
  grid-template-columns:
    minmax(180px, 2fr) minmax(110px, 1fr) minmax(90px, 0.8fr) minmax(
      90px,
      0.8fr
    )
    auto;
}
.fin-fila-acciones {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 4px !important;
  justify-content: flex-end;
}
.fin-apagado {
  opacity: 0.6;
}

/* Editor de documentos: formulario a la izquierda, hoja a la derecha */
.modal.fin-editor {
  max-width: min(1500px, 97vw);
  width: min(1500px, 97vw);
  height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.modal.fin-editor > .modal-body {
  flex: 1;
  min-height: 0;
}
.fin-editor-titulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fin-hueco {
  flex: 1;
}
.modal.fin-editor > .modal-foot {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .fin-hueco {
    display: none;
  }
  .modal.fin-editor > .modal-foot {
    justify-content: flex-start;
  }
}
.fin-editor-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.fin-editor-form {
  min-width: 0;
}
.fin-solo-estrecho {
  display: none !important;
}
.fin-vista {
  position: sticky;
  top: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.fin-vista-escala {
  overflow: hidden;
}
.fin-vista iframe {
  display: block;
  border: 0;
  transform-origin: top left;
  background: #f2f2f0;
}
@media (max-width: 1000px) {
  .fin-editor-cuerpo {
    grid-template-columns: 1fr;
  }
  .fin-solo-estrecho {
    display: inline-flex !important;
    margin-bottom: 12px;
  }
  .fin-editor-cuerpo:not(.con-vista) .fin-vista {
    display: none;
  }
  .fin-editor-cuerpo.con-vista .fin-editor-form > :not(.fin-solo-estrecho) {
    display: none;
  }
  .fin-vista {
    position: static;
  }
}
@media (max-width: 600px) {
  .modal.fin-editor {
    height: 96dvh;
  }
}

.fin-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 14px;
  align-items: end;
}
.fin-rejilla.fin-textos {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 14px;
}
.fin-boton-campo {
  margin-bottom: 14px;
}
.fin-receptor {
  margin: 0 0 12px;
  padding: 10px 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.fin-receptor legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.fin-subtitulo {
  margin: 8px 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}
.fin-color {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--bg-2);
  cursor: pointer;
}
.fin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
}
.fin-malo {
  border-color: var(--red) !important;
}

/* Líneas */
.fin-lineas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-linea {
  display: grid;
  /* Concepto arriba a lo ancho; debajo, las cifras y los botones. */
  grid-template-columns:
    minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.7fr)
    minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.fin-linea .input {
  width: 100%;
  min-width: 0;
}
.fin-linea-concepto {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fin-linea-concepto textarea {
  resize: vertical;
  min-height: 34px;
  font-size: 13px;
}
.fin-linea-campo,
.fin-linea-importe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fin-linea-campo span,
.fin-linea-importe span {
  font-size: 12px;
  color: var(--fg-3);
}
.fin-linea-importe {
  text-align: right;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.fin-linea-importe b {
  padding-top: 8px;
}
.fin-linea-acciones {
  display: flex;
  gap: 2px;
  align-self: end;
}
@media (max-width: 600px) {
  .fin-linea {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fin-linea-acciones {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Totales del editor */
.fin-totales {
  margin-top: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.fin-totales > div,
.fin-par {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.fin-totales span,
.fin-par span {
  color: var(--fg-2);
}
.fin-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}
.fin-par {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

/* Documento emitido */
.fin-resumen-doc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.fin-resumen-doc > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fin-resumen-doc .muted {
  font-size: 12px;
}
.fin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.fin-cobros {
  margin-bottom: 16px;
}
.fin-cobro {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.fin-cobro-nuevo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-top: 10px;
}
.fin-cobro-nuevo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-3);
}
.fin-cobro-nuevo .input {
  width: 140px;
}
.fin-cobro-nuevo .fin-cobro-nota {
  flex: 1 1 160px;
}
.fin-cobro-nuevo .fin-cobro-nota .input {
  width: 100%;
}
.fin-relacionado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.fin-relacionado:hover {
  background: var(--bg-3);
}
.fin-relacionado > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fin-relacionado > span:first-child > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-huella {
  margin-top: 12px;
  word-break: break-all;
}

/* Plantillas */
.fin-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.fin-plantilla {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}
.fin-plantilla-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fin-muestra {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
  border: 1px solid var(--line);
}
.fin-plantilla-lineas {
  margin: 4px 0 8px;
  padding-left: 18px;
  color: var(--fg-2);
  font-size: 13px;
}
.modal.fin-editor-plantilla {
  max-width: min(1200px, 96vw);
}

/* Informes */
.fin-informes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
  align-items: start;
}
.fin-informe,
.fin-bloque {
  padding: 14px 16px;
}
.fin-informe h3,
.fin-bloque h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.fin-ancho {
  grid-column: 1 / -1;
}
.fin-cuadro {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fin-cuadro th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
}
.fin-cuadro td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.fin-cuadro .fin-suma td {
  font-weight: 700;
  border-bottom-color: var(--line-2);
}
.fin-barra {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
}
.fin-barra b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fin-barra-pista {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.fin-barra-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}
.fin-barra-relleno.fin-tramo-hasta_30 {
  background: var(--yellow);
}
.fin-barra-relleno.fin-tramo-hasta_60 {
  background: var(--orange);
}
.fin-barra-relleno.fin-tramo-mas_60 {
  background: var(--red);
}

/* Ajustes */
.fin-ajustes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1100px;
}
.fin-logo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fin-logo img {
  max-height: 64px;
  max-width: 220px;
  padding: 6px;
  border-radius: var(--radius-chip);
  background: #fff;
}
.fin-oculto {
  display: none;
}
.fin-legal ul {
  margin: 0;
  padding-left: 20px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
}
.fin-guardar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  background: var(--bg);
}

@media (max-width: 760px) {
  .fin-cols-docs,
  .fin-cols-clientes {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fin-cols-docs > :nth-child(3),
  .fin-cols-docs > :nth-child(5),
  .fin-cols-clientes > :nth-child(2),
  .fin-cols-clientes > :nth-child(4) {
    display: none;
  }
  .fin-cols-clientes > .fin-fila-acciones {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .fin-informes {
    grid-template-columns: 1fr;
  }
  .fin-barra {
    grid-template-columns: 110px minmax(0, 1fr) 90px;
  }
  .finance-filtros .fin-buscar .input {
    min-width: 0;
  }
}

/* ---------- Archivo y Google Drive ----------
   Visor de Drive, marcas de «en Drive» y el panel de sincronía. Clases
   propias: no se toca nada de fuera. */
.tile .thumb .tile-drive {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.preview .drive-media {
  display: block;
  padding: 0;
  min-height: 0;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.preview .drive-media iframe {
  display: block;
  width: 100%;
  height: min(58dvh, 560px);
  border: 0;
}
.visor-drive-marca {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}
.visor-titulo .ellipsis {
  max-width: min(60vw, 720px);
}
.modal.visor-drive {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 32px);
}
.modal.visor-drive.completo {
  height: 100dvh;
}
.modal.visor-drive > .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.visor-drive-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.visor-drive-barra .btn.activo {
  background: var(--bg-4);
  color: var(--fg);
}
.visor-drive-cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.visor-drive-cuerpo.con-ficha {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.visor-drive-marco {
  position: relative;
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.visor-drive-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.visor-drive-marco .visor-cargando {
  position: absolute;
  inset: 0;
  justify-content: center;
}
.visor-drive-ficha {
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.visor-drive-ficha dl {
  margin: 0;
  display: grid;
  gap: 2px;
}
.visor-drive-ficha dt {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}
.visor-drive-ficha dd {
  margin: 0;
  color: var(--fg);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.visor-drive-nota {
  margin: 0;
}
@media (max-width: 760px) {
  .visor-drive-texto {
    display: none;
  }
  .visor-drive-barra .visor-controles {
    flex: 0 1 auto;
    margin-right: auto;
  }
  .visor-drive-cuerpo.con-ficha {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .visor-drive-ficha {
    max-height: 34dvh;
  }
}

/* Panel de sincronía y plantilla de carpetas */
.archivo-drive-pestanas {
  margin-bottom: 14px;
}
.archivo-drive {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.archivo-drive .hint {
  margin: 0;
}
.archivo-drive-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.archivo-drive-estado > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.archivo-drive-estado b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archivo-drive-estado b .ico {
  color: var(--green);
}
.archivo-drive-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.archivo-drive-cifras > .card {
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.archivo-drive-cifras b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.archivo-drive-sub {
  margin: 6px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}
.archivo-drive-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.archivo-drive-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.archivo-drive-lista li > .ico {
  flex: none;
  color: var(--yellow);
}
.archivo-drive-lista .grow {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.archivo-drive-historial {
  max-height: 260px;
  overflow: auto;
}
.archivo-drive-historial .grow {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archivo-drive-sentido {
  flex: none;
  min-width: 118px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-3);
}
.archivo-drive-sentido.subida {
  color: var(--blue);
}
.archivo-drive-sentido.bajada {
  color: var(--teal);
}
.archivo-drive-sentido.aviso {
  color: var(--yellow);
}
.archivo-plantilla {
  width: 100%;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  tab-size: 2;
}

/* ---------- Fondo de pantalla (Ajustes → Apariencia) ----------
   Todo va calificado con :root[data-fondo], que solo existe si se ha elegido
   un fondo: con «Ninguno» nada de esto aplica. Va al final del archivo porque
   .sidebar, .topbar y .tabbar están definidas más de una vez más arriba.

   La capa es un elemento fijo (position: fixed), no background-attachment:
   fixed, que va roto en Safari de iOS y repinta en cada scroll. Va con
   z-index -1 y sin tocar .app: así no se crea un contexto de apilamiento
   nuevo y los modales y menús siguen ordenándose como siempre. */
html {
  /* Sin parpadeo en blanco mientras carga la imagen ni al rebotar. */
  background: var(--bg);
}
:root[data-fondo] {
  /* Las barras dejan ver el fondo; las columnas de navegación, un poco. */
  --fondo-superficie: 82%;
  --fondo-columna: 92%;
  --fondo-velo: var(--fondo-velo-oscuro, 0.4);
}
/* El velo usa el color del lienzo: claro en tema claro. Sobre imágenes casi
   negras un velo claro bajo deja un gris del tono del texto, por eso el tema
   claro tiene su propio velo, más alto. */
:root[data-fondo][data-theme="light"] {
  --fondo-velo: var(--fondo-velo-claro, 0.88);
}
@media (prefers-color-scheme: light) {
  :root[data-fondo][data-theme="sistema"] {
    --fondo-velo: var(--fondo-velo-claro, 0.88);
  }
}
:root[data-fondo] body {
  background: transparent;
}
:root[data-fondo] #fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* La miniatura debajo: se ve al momento mientras llega la grande. */
  background-image: var(--fondo-img), var(--fondo-min, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:root[data-fondo] #fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--fondo-velo);
}
/* Se vuelve translúcido el mobiliario, cada pieza con su color de siempre.
   El contenido (tarjetas, mensajes, correo, tablas, modales, menús) se queda
   opaco: ahí se lee. */
:root[data-fondo] .sidebar,
:root[data-fondo] .tabbar {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-superficie),
    transparent
  );
}
:root[data-fondo] .topbar {
  background: color-mix(
    in srgb,
    var(--bg) var(--fondo-superficie),
    transparent
  );
}
:root[data-fondo] .tabs {
  background: color-mix(
    in srgb,
    var(--bg-3) var(--fondo-superficie),
    transparent
  );
}
:root[data-fondo] .chat-list {
  background: color-mix(in srgb, var(--bg) var(--fondo-columna), transparent);
}
:root[data-fondo] .archivo-cascada {
  background: color-mix(in srgb, var(--bg-2) var(--fondo-columna), transparent);
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-fondo] {
    --fondo-superficie: 100%;
    --fondo-columna: 100%;
  }
}
@media print {
  #fondo {
    display: none;
  }
}

/* ---------- Que se vea el fondo: bloques semitransparentes ----------
   Con fondo, los bloques de contenido dejan pasar la imagen. Cuánto la
   dejan pasar no se elige a ojo: fondo-contraste.ts mide la imagen y pone
   aquí la opacidad mínima para que todo el texto llegue a 4,5:1 (AA) en el
   peor punto, con el velo, el tema y la paleta de cada uno:
     --fondo-bloque         bloques con desenfoque (Inicio, en escritorio)
     --fondo-bloque-nitido  bloques sin desenfoque (todo lo demás, el móvil)
     --fondo-lienzo         zonas grandes con el color del lienzo (Avisos,
                            el lector del correo)
   Mientras no ha medido (o si no puede), los valores de aquí: casi opacos.

   El desenfoque cuesta: el navegador lo recalcula al desplazarse. Va solo
   en los bloques grandes que no se mueven (los de Inicio) y nunca en el
   teléfono; las listas largas (chat, tareas, tablas, agenda) van nítidas.

   Lo que flota encima de todo (modales, menús, la paleta, el redactor del
   correo, los visores) sigue opaco: está fuera de estas listas o excluido
   con :not(). */
:root[data-fondo] {
  --fondo-bloque: 90%;
  --fondo-bloque-nitido: 92%;
  --fondo-lienzo: 88%;
  --fondo-desenfoque: blur(16px) saturate(1.15);
  --fondo-bloque-uso: var(--fondo-bloque);
}
@media (max-width: 900px), (pointer: coarse) {
  :root[data-fondo] {
    --fondo-desenfoque: none;
    --fondo-bloque-uso: var(--fondo-bloque-nitido);
  }
}

/* Bloques nítidos: tarjetas, tablas, listas y paneles de cada sección. */
:root[data-fondo]
  :is(
    .card,
    .stat,
    .finance-stat,
    .control-tabla,
    .flujo-ficha,
    .fin-nota,
    .filtros-tareas,
    .favoritas-archivo,
    .task-row,
    .tile,
    .chat-composer-caja,
    .chat-nota,
    .asistente-pie,
    .mail-lista
  ):not(:is(.modal, [role="dialog"], [role="menu"], .mail-redactor) *) {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido),
    transparent
  );
}
:root[data-fondo]
  :is(.stat, .tile, .task-row, .flujo-ficha):hover:not(
    :is(.modal, [role="dialog"], [role="menu"]) *
  ) {
  background: color-mix(
    in srgb,
    var(--bg-3) var(--fondo-bloque-nitido),
    transparent
  );
}
/* Inicio: los widgets y los contadores son grandes y no se mueven; en
   escritorio llevan desenfoque y, con él, pueden dejar pasar más imagen. */
:root[data-fondo] .content.inicio :is(.card, .stat) {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-uso),
    transparent
  );
  -webkit-backdrop-filter: var(--fondo-desenfoque);
  backdrop-filter: var(--fondo-desenfoque);
}
:root[data-fondo] .content.inicio .stat:hover {
  background: color-mix(
    in srgb,
    var(--bg-3) var(--fondo-bloque-uso),
    transparent
  );
}
/* Lo que va dentro de un bloque no lleva otra caja: una caja dentro de otra
   solo tapa. Las filas de tareas y de agenda de los widgets se separan con
   una línea, como una lista. */
:root[data-fondo] .card :is(.task-row, .event) {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
:root[data-fondo] .card :is(.task-row, .event):first-child {
  border-top: 0;
}
:root[data-fondo] .card :is(.task-row, .event) + :is(.task-row, .event) {
  margin-top: 0;
}
:root[data-fondo] .card :is(.task-row, .event):hover {
  background: color-mix(in srgb, var(--bg-3) 45%, transparent);
}
:root[data-fondo] .card .tile {
  background: color-mix(in srgb, var(--bg-3) 40%, transparent);
}
/* El chat: el panel de la conversación deja ver el fondo; su cabecera ya no
   pinta otra capa encima. Los mensajes son texto sobre el panel. */
:root[data-fondo] .chat-main {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido),
    transparent
  );
}
:root[data-fondo] .chat-main .chat-cabecera {
  background: none;
}
/* Agenda: la rejilla del mes, nítida (son cuarenta y dos celdas). */
:root[data-fondo] .calendar-cell {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido),
    transparent
  );
}
:root[data-fondo] .calendar-cell.outside {
  background: color-mix(
    in srgb,
    var(--bg) var(--fondo-bloque-nitido),
    transparent
  );
}
/* Avisos y el lector del correo: zonas grandes con el color del lienzo. */
:root[data-fondo] :is(.content.flush.avisos-pagina, .mail-lector) {
  background: color-mix(in srgb, var(--bg) var(--fondo-lienzo), transparent);
}
:root[data-fondo] .mail-carpetas {
  background: color-mix(in srgb, var(--bg) var(--fondo-columna), transparent);
}
/* La tabla de planos: la fila de títulos ya no pinta otra capa. */
:root[data-fondo] .control-fila.cab {
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}

/* Mi espacio: cada sección iba en su caja y entre todas tapaban el fondo.
   Como en Archivo, flotan: el título y su línea bastan para separarlas. */
:root[data-fondo] .personal-zona > .personal-seccion {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 10px 2px 0;
}

/* La pantalla de entrada: el dragón desde el primer momento, con la caja
   de entrar como un bloque más (aún sin medir la imagen: casi opaca). */
:root[data-fondo] .login {
  background: transparent;
}
:root[data-fondo] .login-box {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-uso),
    transparent
  );
  -webkit-backdrop-filter: var(--fondo-desenfoque);
  backdrop-filter: var(--fondo-desenfoque);
}

/* El área de contenido lleva su propio velo solo si la imagen tiene zonas
   claras grandes (--fondo-velo-texto, 0 en las de la casa): así el texto que
   flota sin bloque se lee también sobre una foto de cielo. */
:root[data-fondo] .content {
  background-color: color-mix(
    in srgb,
    var(--bg) var(--fondo-velo-texto, 0%),
    transparent
  );
}
/* Texto directamente sobre la imagen (cabeceras, Archivo, Mi espacio…).
   Si la imagen tiene puntos donde no llegaría a 4,5:1 (fondo-contraste.ts
   pone data-fondo-halo), un halo del color del lienzo pegado a la letra:
   no se ve como sombra, solo despega la letra del brillo de detrás. Dentro
   de los bloques y en los controles con su propio fondo no hace falta. */
:root[data-fondo][data-fondo-halo] :is(.content, .chat-main) {
  text-shadow:
    0 0 1px var(--bg),
    0 0 3px var(--bg),
    0 0 8px var(--bg),
    0 0 16px color-mix(in srgb, var(--bg) 70%, transparent);
}
:root[data-fondo][data-fondo-halo]
  :is(.content, .chat-main)
  :is(
    .card,
    .stat,
    .finance-stat,
    .control-tabla,
    .task-row,
    .tile,
    .calendar-cell,
    .mail-lista,
    .btn,
    button,
    input,
    textarea,
    select,
    .chip,
    .badge,
    .count,
    .avatar,
    .modal,
    .sala-tarjeta,
    .chat-gif-nodisp,
    [role="dialog"],
    [role="menu"]
  ) {
  text-shadow: none;
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-fondo] {
    --fondo-bloque: 100% !important;
    --fondo-bloque-nitido: 100% !important;
    --fondo-lienzo: 100% !important;
    --fondo-desenfoque: none;
  }
}

/* Ajustes: rejilla de fondos, con el mismo patrón que las paletas. */
.fondo-mini {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg) center / cover no-repeat;
  object-fit: cover;
}
.fondo-mini.vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
.fondo-velo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
}
.fondo-velo input[type="range"] {
  flex: 1;
  max-width: 280px;
  accent-color: var(--teal);
}
.fondo-velo output {
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* ---------- Esqueleto: lo que se ve mientras llega el trozo de una pantalla ---------- */
.esqueleto-barra {
  height: var(--topbar);
  border-bottom: 1px solid var(--line);
}
.esqueleto-linea,
.esqueleto-bloque {
  border-radius: 10px;
  background: var(--bg-3);
  margin-bottom: 14px;
  animation: esqueleto-latido 1.2s ease-in-out infinite alternate;
}
.esqueleto-linea {
  height: 16px;
  width: 42%;
}
.esqueleto-linea.ancha {
  height: 24px;
  width: 64%;
}
.esqueleto-bloque {
  height: 84px;
}
@keyframes esqueleto-latido {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto-linea,
  .esqueleto-bloque {
    animation: none;
  }
}

/* ---------- Móvil: navegación ----------
   La campana de Avisos vive arriba donde abajo está la barra de secciones
   (en escritorio Avisos ya está en la barra lateral). */
.campana-movil {
  display: none;
}
@media (max-width: 900px) {
  .campana-movil {
    display: inline-flex;
    position: relative;
    flex: none;
  }
  .campana-movil.activa {
    color: var(--accent);
  }
  .campana-movil .count {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
}
/* Las pestañas del navegador interno son cosa de escritorio: en el teléfono
   se navega con la barra de abajo y el botón de atrás. */
@media (max-width: 600px) {
  .tabs {
    display: none;
  }
}

/* ---------- Móvil: tacto ----------
   Todo lo de este bloque que cambia tamaños va dentro de (pointer: coarse) o
   (hover: none): con ratón, el escritorio queda exactamente igual. */
html {
  /* Sin el destello gris del navegador: la respuesta la da :active. */
  -webkit-tap-highlight-color: transparent;
}
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[role="tab"],
[role="radio"],
[role="option"] {
  /* Sin la espera de doble toque en los navegadores que aún la hacen. */
  touch-action: manipulation;
}
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
}
.toast-accion {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 6px;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (pointer: coarse) {
  /* Al tocar, respuesta inmediata, sin esperar al servidor. */
  a:active,
  button:not(:disabled):active,
  summary:active,
  [role="button"]:active,
  [role="option"]:active {
    opacity: 0.7;
  }
  /* 44 × 44 de zona tocable. Donde el control puede crecer, crece; donde
     el dibujo tiene que seguir pequeño, crece una zona invisible alrededor. */
  /* Con :root delante para ganar a las reglas de cada pantalla, que fijan
     alturas más pequeñas (p. ej. los filtros de Tareas). */
  :root
    :is(
      .btn,
      .input.sm,
      select.input,
      .chan,
      .meet-boton,
      .gantt-boton,
      .avisos-select,
      .toast-accion,
      .segmented button,
      .fin-pestanas button,
      .filtro
    ) {
    min-height: 44px;
  }
  :root :is(.btn.icon, .chat-herr, .avisos-herr, .mail-herr, .meet-boton) {
    min-width: 44px;
    min-height: 44px;
  }
  /* Las muestras de color del perfil. */
  .field .chips .chip {
    min-width: 44px;
    min-height: 44px;
  }
  /* La zona invisible de estos queda por encima de lo que tienen al lado. */
  .chan-favorito,
  .check {
    z-index: 1;
  }
  /* Filas de chips: con el hueco justo para que la zona de uno no pise la
     del de abajo. */
  :where(div, nav, section):has(> .chip) {
    row-gap: 10px;
  }
  /* «Ver todo» y parecidos: más relleno, y el mismo margen en negativo para
     que nada se mueva de sitio. */
  .card-title a {
    padding: 12px 12px;
    margin: -12px -12px;
  }
  .chip,
  .chan-favorito,
  .check,
  .cur,
  .fin-enlace,
  .task-marcar,
  .field label {
    position: relative;
  }
  .chip::after,
  .chan-favorito::after,
  .check::after,
  .cur::after,
  .fin-enlace::after,
  .task-marcar::after,
  .field label::after,
  .tile-accion::after,
  .tile-marcar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Lo que en escritorio aparece al pasar el ratón, con el dedo o se ve
   siempre o sale al mantener pulsado. Nunca se queda escondido. */
@media (hover: none) {
  .tile-accion,
  .mail-carpeta-menu,
  .mail-adjunto-acciones,
  .nav-title button,
  .postit-boton {
    opacity: 1;
  }
  .calendar-cell .add-event {
    opacity: 0.8;
  }
  .personal-card .personal-acciones,
  .personal-lista .personal-card .personal-acciones,
  .personal-lista .personal-card > .apunte-editar {
    opacity: 1;
    pointer-events: auto;
  }
  .chat-respuestas .ver {
    display: inline;
  }
  /* Las acciones de cada mensaje, fila de correo o aviso: con la pulsación
     larga, no pegadas al dedo tras tocar. */
  .chat-msg:hover > .chat-acciones,
  .chat-msg:focus-within > .chat-acciones,
  .chat-msg:hover .chat-reaccion.mas,
  .chat-msg:focus-within .chat-reaccion.mas {
    visibility: hidden;
  }
  .chat-msg.con-menu > .chat-acciones,
  .chat-msg.con-menu .chat-reaccion.mas {
    visibility: visible;
  }
  .mail-fila:hover .mail-fila-acciones,
  .mail-fila:focus-within .mail-fila-acciones,
  .avisos-fila:hover > .avisos-acciones,
  .avisos-fila:focus-within > .avisos-acciones {
    display: none;
  }
  .mail-fila:hover .mail-fila-fecha,
  .mail-fila:focus-within .mail-fila-fecha,
  .avisos-fila:hover > .avisos-principal .avisos-hora,
  .avisos-fila:focus-within > .avisos-principal .avisos-hora {
    visibility: visible;
  }
  .mail-fila.pulsada .mail-fila-acciones,
  .avisos-fila.pulsada > .avisos-acciones {
    display: flex;
  }
  .mail-fila.pulsada .mail-fila-fecha,
  .avisos-fila.pulsada > .avisos-principal .avisos-hora {
    visibility: hidden;
  }
  /* Mantener pulsado abre el menú: sin selección de texto ni la lupa. */
  .chat-msg,
  .task-row,
  .tile,
  .agenda-fila,
  .mail-fila,
  .avisos-fila {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* En el teléfono, la casilla de selección en grupo de las tareas estaba
   pegada a la de «hecha» y las dos zonas de toque se pisaban. La acción en
   grupo sigue en tableta y escritorio. */
@media (pointer: coarse) and (max-width: 600px) {
  /* Mientras no hay ninguna elegida (se elige desde «⋯» → Seleccionar). */
  .task-lista:not(.con-seleccion) .task-marcar {
    display: none;
  }
}

/* El aviso emergente y el botón flotante ya no se pisan: el aviso va a la
   izquierda, junto a la columna de botones flotantes. Donde hay un campo de
   escritura abajo el botón no sale y el aviso sube arriba. */
/* El aviso emergente dura unos segundos y puede llevar «Deshacer»: va
   siempre por encima de todo (la tira de avisos del sistema lo tapaba). */
.toast {
  z-index: 1000;
}
@media (max-width: 900px) {
  /* La tira que invita a activar los avisos tampoco tapa los botones
     flotantes: va a su izquierda, como el aviso emergente. */
  .tira-avisos {
    left: 16px;
    right: calc(16px + 54px + 12px);
    width: auto;
    transform: none;
  }
  body.con-compositor .tira-avisos {
    right: 16px;
  }
  .toast {
    left: 16px;
    right: calc(16px + 54px + 12px);
    bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
  }
  body.con-compositor .toast,
  body.redactando .toast {
    right: 16px;
    top: calc(var(--topbar) + var(--sobre-topbar, 0px) + 8px);
    bottom: auto;
  }
  body.redactando .fab {
    display: none;
  }
}

/* Deslizar una fila: lo que hay detrás dice qué va a pasar. */
.deslizar-fondo {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-weight: 700;
  pointer-events: none;
}
.deslizar-fondo.izquierda {
  justify-content: flex-end;
}
.deslizar-fondo.listo.hecha {
  background: var(--green);
  color: var(--bg);
}
.deslizar-fondo.listo.reabrir {
  background: var(--yellow);
  color: var(--bg);
}
.deslizar-fondo.listo.archivar {
  background: var(--teal);
  color: var(--bg);
}

/* Tirar para refrescar: el indicador sigue al dedo y gira mientras carga. */
.tirar-refrescar {
  position: fixed;
  top: calc(var(--topbar) + var(--sobre-topbar, 0px) + 4px);
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 60;
  pointer-events: none;
}
.tirar-refrescar::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
}
.tirar-refrescar.listo::after {
  border-color: var(--accent);
}
.tirar-refrescar.girando::after {
  border-color: var(--line-2);
  border-top-color: var(--accent);
  animation: girar-refresco 0.8s linear infinite;
}
@keyframes girar-refresco {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tirar-refrescar.girando::after {
    animation-duration: 2.4s;
  }
}

/* Letra mínima en el móvil: 12 px para todo, 13 px para las etiquetas. La
   lista sale de las reglas de arriba con menos de eso (se regenera con el
   mismo criterio si se añaden más). */
@media (max-width: 600px) {
  .brand small,
  .nav-title,
  .nav-item .count,
  .chan .count,
  .chat-nuevos,
  .chat-msg-hora-lado,
  .chat-msg-marca,
  .chat-msg-editado,
  .chat-enlace-dominio,
  .chat-composer-cuenta,
  .chat-composer-ayuda,
  .chat-cola-datos .hint,
  .chat-rec-tipo b,
  .adjuntar-seccion,
  .tile .thumb .ver,
  .event .time small,
  .tabbar a,
  .tabbar button,
  .tabbar .count,
  .eyebrow,
  .badge,
  .weekday,
  .calendar-event,
  .mini-month,
  .agenda-hora-etiqueta,
  .agenda-hora,
  .agenda-evento-cuerpo,
  .agenda-evento-cuerpo time,
  .agenda-evento-dia,
  .gantt-meses,
  .gantt-head,
  .gantt-label small,
  .gantt-bar,
  .topbar .sub,
  .hero .date,
  .flujo-pie,
  .stat span,
  .day-number,
  .lienzo-ayuda,
  .diapositiva header .num,
  .llamada-estado,
  .archivo-cascada-titulo,
  .marca-anulado,
  .paleta-grupo,
  .mail-menu-titulo,
  .mail-carpetas-seccion,
  .mail-grupo,
  .mail-fila-n,
  .mail-filas.compacta .mail-casilla,
  .mail-adjunto-texto em,
  .mail-sugerencia em,
  .mail-adj-ficha em,
  .mail-carpeta-num,
  .avisos-insignia,
  .avisos-seccion-titulo,
  .avisos-sello .avisos-arroba,
  .avisos-pila > *,
  .avisos-cuenta,
  .fin-estado,
  .fin-linea-campo span,
  .fin-linea-importe span,
  .tile .thumb .tile-drive,
  .visor-drive-marca,
  .visor-drive-ficha dt,
  .archivo-drive-sentido,
  .campana-movil .count {
    font-size: 12px;
  }
  .field .hint,
  .chat-editar-pie .hint,
  .chat-adj-meta,
  .chat-sugerencias .hint,
  .chat-personas .hint,
  .chat-buscar-tipos .chip,
  .chat-list-vistas .chip,
  .chat-rec-meta,
  .chat-reenviar-op .hint,
  .adjuntar-fila-migas .chip,
  .adjuntar-meta,
  .tile .meta,
  .task-row .meta,
  .event .meta,
  .gantt-label b,
  .gantt-label .input.sm,
  .mail-lista-sub,
  .avisos-chip,
  .avisos-meta,
  .fin-cobro-nuevo label {
    font-size: 13px;
  }
}

/* Filtros de Tareas en el teléfono: una sola fila que se desliza en
   horizontal (antes eran dos filas de chips); el activo se trae a la vista. */
@media (max-width: 600px) {
  .panel .chips:has(> a.chip),
  .vistas-guardadas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 6px;
    margin-block: -6px;
  }
  .panel .chips:has(> a.chip)::-webkit-scrollbar,
  .vistas-guardadas::-webkit-scrollbar {
    display: none;
  }
  .panel .chips:has(> a.chip) > .chip,
  .vistas-guardadas > .chip {
    flex: none;
  }
}

/* ---------- Móvil: formularios y teclado ---------- */

/* Safari de iOS amplía la página al enfocar un campo con letra de menos de
   16 px, y esa ampliación no se deshace sola. Con el dedo, ningún campo baja
   de 16 px. Lleva !important a propósito: cada pantalla fija 13–14 px en sus
   campos con reglas más específicas, y aquí tiene que ganar siempre. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="color"]
    ):not([type="file"]),
  textarea,
  select,
  [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }
}

/* Las ventanas, en el teléfono, son hojas que suben desde abajo: con el
   teclado abierto un recuadro centrado no cabe. El visor de archivos sigue a
   pantalla completa. */
@media (max-width: 600px) {
  .overlay:not(:has(.visor-modal)) {
    align-items: flex-end;
    padding: 0;
  }
  .overlay .modal:not(.visor-modal),
  .overlay .modal.wide:not(.visor-modal) {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    animation: hoja-sube 180ms ease-out;
  }
  .overlay .modal:not(.visor-modal) > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 16px;
  }
  .overlay .modal:not(.visor-modal) > .modal-head,
  .overlay .modal:not(.visor-modal) > .modal-foot {
    padding: 14px 16px;
  }
  /* El asa de arriba dice «esto es una hoja». */
  .overlay .modal:not(.visor-modal) > .modal-head::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--line-2);
  }
}
@keyframes hoja-sube {
  from {
    transform: translateY(32px);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .overlay .modal {
    animation: none !important;
  }
}

/* Con el teclado abierto (iOS: ver teclado.ts) lo que se escribe queda por
   encima del teclado: el chat y el redactor miden lo que se ve, y las hojas
   se apoyan en el borde del teclado. La barra de abajo y el botón flotante
   quedarían debajo del teclado: se quitan mientras tanto. */
@media (max-width: 900px) {
  html.con-teclado .content.flush.chat {
    height: calc(var(--alto-visible) - var(--topbar));
  }
  html.con-teclado .main {
    padding-bottom: 0;
  }
  html.con-teclado .tabbar,
  html.con-teclado .fab {
    display: none;
  }
  html.con-teclado .mail-redactor,
  html.con-teclado .mail-redactor.maximizado {
    bottom: var(--teclado);
    height: calc(var(--alto-visible) - 12px);
  }
  html.con-teclado .overlay {
    bottom: var(--teclado);
  }
  html.con-teclado .overlay .modal:not(.visor-modal) {
    max-height: calc(var(--alto-visible) - 12px);
  }
}

/* ---------- Listas largas ----------
   Las filas fuera de la pantalla no se pintan hasta que se acercan
   (content-visibility), con un alto de reserva para que la barra de scroll
   no baile. «auto» recuerda el alto real de cada fila una vez vista. En el
   chat no: ahí el scroll se calcula desde abajo y un alto estimado lo haría
   saltar. Solo hasta 1024 px: en el escritorio la contención movía algún
   texto medio píxel y allí no hace falta. */
@media (max-width: 1024px) {
  .mail-fila,
  .task-row,
  .avisos-fila,
  .agenda-dia {
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
  }
  .tile-envoltura,
  .file-grid > .tile {
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
  }
}
/* El chat conserva lo que se está leyendo al cargar los mensajes antiguos
   (Canal.tsx): el anclaje propio del navegador, que solo tienen algunos, se
   sumaba a eso y hacía saltar la lista. */
.chat-mensajes {
  overflow-anchor: none;
}

/* ---------- La barra de estado del teléfono ----------
   Con la aplicación instalada (black-translucent y viewport-fit=cover) la
   página empieza debajo de la hora y la muesca: la primera barra deja ese
   hueco. En el teléfono es la barra superior; en tableta, la de pestañas.
   En escritorio env() vale 0 y nada cambia. */
@media (max-width: 600px) {
  :root {
    --topbar: calc(65px + env(safe-area-inset-top));
  }
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top));
    min-height: var(--topbar);
  }
}
@media (min-width: 601px) {
  :root {
    --pestanas: calc(45px + env(safe-area-inset-top));
  }
  .tabs {
    padding-top: calc(6px + env(safe-area-inset-top));
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  :root {
    /* Lo que hay encima de la barra superior (las pestañas). */
    --sobre-topbar: var(--pestanas);
  }
}

/* Sin conexión: una banda discreta arriba del todo. */
.banda-sin-red {
  padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--yellow) 22%, var(--bg-2));
  border-bottom: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
/* En el teléfono, con la banda puesta es ella la que deja el hueco de la
   barra de estado. */
@media (max-width: 600px) {
  html.sin-red .topbar {
    padding-top: 10px;
    min-height: 60px;
  }
}

/* Versión nueva: una barra fija arriba que no se va sola (BarraVersion). */
.barra-version {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-2));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
@media (max-width: 600px) {
  .barra-version > span[aria-hidden] {
    display: none;
  }
  html.version-nueva .topbar {
    padding-top: 10px;
    min-height: 60px;
  }
}

/* ======================================================================
   Inicio en tableta y teléfono
   En el escritorio (desde 1025 px) Inicio llena la pantalla con tres
   columnas que se reparten la altura. Por debajo, tres columnas no caben:
   las tareas quedaban a una palabra por línea y Actividad, aplastada.
   ====================================================================== */
@media (max-width: 1024px) {
  .content.inicio {
    display: block;
    min-height: 0;
  }
  .today-grid,
  .content.inicio .today-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .content.inicio .today-grid > div > .card,
  .content.inicio .today-grid > div > .card:nth-child(n + 2) {
    flex: none;
  }
  .today-grid .card {
    overflow: visible;
  }
  /* Actividad, archivos y equipo, debajo y a lo ancho. */
  .today-grid > div:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .today-grid > div > .card + .card {
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  /* Una columna, en el orden en que se mira: agenda, tareas, actividad. */
  .today-grid,
  .content.inicio .today-grid,
  .today-grid > div:nth-child(3) {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    padding: 4px 0 12px;
  }
  .hero-texto {
    flex-direction: column;
    gap: 2px;
  }
  .hero h1 {
    font-size: 22px;
    line-height: 28px;
  }
  .hero .date {
    font-size: 12px;
    white-space: normal;
  }
  /* Tareas y Chat ya están en la barra de abajo; Capturas de prueba no, así
     que se queda, a lo ancho y con la altura de un botón. */
  .hero {
    flex-wrap: wrap;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn:not(.rodaje) {
    display: none;
  }
  .hero-actions .btn.rodaje {
    flex: 1;
    justify-content: center;
  }
  /* Las cifras, en una sola fila: el número encima de su rótulo. */
  .stat-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    min-height: 44px;
  }
  .stat b {
    font-size: 20px;
    line-height: 1.1;
  }
  .stat span {
    font-size: 12px;
  }
  /* La actividad, lo último: el resto está en Avisos. */
  .content.inicio .act:nth-of-type(n + 6) {
    display: none;
  }
}

/* Fila de tarea en el teléfono: el título se queda casi todo el ancho y el
   estado baja a su lado, debajo de los datos. Antes la etiqueta y el avatar
   dejaban el título a dos o tres palabras por línea. */
@media (max-width: 600px) {
  .task-row {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }
  .task-row > .task-marcar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .task-row > .prio {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .task-row > .check {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .task-row > .grow {
    grid-column: 4;
    grid-row: 1;
  }
  .task-row > .badge {
    grid-column: 4;
    grid-row: 2;
    justify-self: start;
  }
  .task-row > .avatar {
    grid-column: 5;
    grid-row: 1 / span 2;
  }
}

/* Tareas en el teléfono: la lista, lo primero. Agrupar y los filtros finos
   quedan detrás de «Filtros», al principio de la fila de vistas. */
.filtros-boton {
  display: none;
}
@media (max-width: 600px) {
  .vistas-guardadas > .filtros-boton {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .content:not(.filtros-abiertos) > .agrupar-por,
  .content:not(.filtros-abiertos) > .filtros-tareas {
    display: none;
  }
  .content.filtros-abiertos > .agrupar-por {
    margin-bottom: 10px;
  }
  .content > .vistas-guardadas {
    margin-bottom: 8px;
  }
  /* Lo mismo en Agenda: los tres filtros y la leyenda de colores. */
  .calendar-toolbar > .filtros-boton {
    display: inline-flex;
    order: 2;
    gap: 4px;
  }
  .calendar-toolbar > .filtros-boton.active {
    border-color: var(--accent);
    color: var(--accent);
  }
  .calendar-content:not(.filtros-abiertos) .agenda-filtros,
  .calendar-content:not(.filtros-abiertos) > .agenda-leyenda {
    display: none;
  }
}

/* Chat con un solo panel (hasta 900 px): la lista ocupa todo el ancho. El
   ancho que se arrastra en el escritorio va en línea y aquí no cuenta, y el
   tirador no tiene nada que separar. */
@media (max-width: 900px) {
  .chat .chat-list {
    width: 100% !important;
    flex-basis: auto !important;
  }
  .chat > .tirador-panel {
    display: none;
  }
}

/* Pantallas de alto fijo en tableta y teléfono (Chat, Correo, Avisos,
   Asistente): miden justo lo que queda entre la barra de arriba (y las
   pestañas, si las hay) y la barra de abajo, contando la zona segura del
   iPhone. La página no se desplaza por detrás: un solo scroll, el de dentro.
   Antes sobraban 77–121 px y en el iPhone la caja de escribir quedaba medio
   tapada por la barra de abajo. */
@media (max-width: 900px) {
  :root {
    --alto-pantalla: calc(
      100dvh - var(--topbar) - var(--sobre-topbar, 0px) - var(--tabbar) -
        env(safe-area-inset-bottom)
    );
  }
  .content.flush.chat,
  .content.flush.mail-pagina,
  .content.flush.avisos-pagina,
  .asistente-pagina {
    height: var(--alto-pantalla);
  }
  .main:has(
    .content.flush.chat,
    .content.flush.mail-pagina,
    .content.flush.avisos-pagina,
    .asistente-pagina
  ) {
    padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  }
  html.con-teclado .content.flush.chat {
    height: calc(
      var(--alto-visible) - var(--topbar) - var(--sobre-topbar, 0px)
    );
  }
}

/* Dentro de una conversación, en el teléfono, el botón del asistente
   tapaba los últimos mensajes. Se llega igual desde Más. */
@media (max-width: 600px) {
  .main:has(.chat.viewing) .lanzador-boton {
    display: none;
  }
}

/* Flujos en el teléfono: el mapa se consulta. La lista de pasos, a todo el
   ancho y encima del mapa. */
@media (max-width: 600px) {
  .graph-solo-ver {
    margin: 0;
    padding: 12px 14px 0;
  }
  .graph-body > .graph-lista {
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Con la letra muy grande (o una pantalla muy estrecha) los botones de la
   caja de escribir bajan de línea; Enviar no se encoge ni se sale. */
@media (max-width: 600px) {
  .chat-composer-barra {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .chat-composer-barra > .chat-enviar {
    flex: none;
    margin-left: auto;
  }
}

/* Con fondo, en tableta y teléfono la lista pasa por debajo de las dos
   barras: translúcidas a secas, los rótulos se mezclaban con las filas de
   detrás. Un desenfoque deja ver el fondo sin que se lea lo de debajo. */
@media (max-width: 900px) {
  :root[data-fondo] .tabbar,
  :root[data-fondo] .topbar {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

/* ======================================================================
   Archivo: carpetas y archivos como en Mi espacio
   La ficha es la de Mi espacio (.personal-item, .personal-tile,
   .personal-icono): el icono y su nombre, sin tarjeta. Aquí solo lo que
   Archivo tiene de más: miniaturas, insignias (versión, Drive, revisión),
   la selección y las acciones al pasar el ratón.
   ====================================================================== */
.archivo-item {
  position: relative;
}
.archivo-item:hover .personal-acciones,
.archivo-item:focus-within .personal-acciones {
  opacity: 1;
}
/* Con algo seleccionado, la casilla no se esconde: se ve qué va en el lote. */
.archivo-item.marcado .personal-acciones {
  opacity: 1;
}
.archivo-item .personal-acciones {
  justify-content: space-between;
}
.archivo-item .personal-acciones > :only-child:not(.tile-marcar) {
  margin-left: auto;
}
.archivo-item .tile-marcar {
  position: relative;
  top: auto;
  left: auto;
}
/* El nombre de un archivo no se edita aquí: sin la pista de «escribir». */
.archivo-nombre {
  cursor: default;
}
.archivo-nombre:hover {
  background: none;
}
/* La miniatura de una imagen o un vídeo ocupa lo que ocupa un icono. */
.archivo-icono {
  position: relative;
}
.archivo-icono img,
.archivo-icono video {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.archivo-icono .ver {
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
}
.archivo-icono .tile-drive {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.archivo-icono .revision-punto {
  top: 2px;
  left: 2px;
}
.archivo-item.marcado .personal-icono {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  outline: 2px solid var(--teal);
  outline-offset: 0;
}
.archivo-item[draggable="true"] {
  cursor: grab;
}
/* En la lista, la carpeta es una fila: el icono y el nombre abren y las
   acciones van a la derecha. */
.archivo-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}
.archivo-fila-abrir {
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: inherit;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}
.archivo-fila-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  cursor: default;
}
/* El nombre en la fila, a la izquierda y en una línea; se sigue pulsando
   para cambiarlo, como en la rejilla. */
.archivo-fila .personal-tile-nombre {
  text-align: left;
  font-weight: 500;
  font-size: inherit;
  -webkit-line-clamp: 1;
  margin-left: -6px;
}
.archivo-fila .personal-nombre-editar {
  max-width: 420px;
  text-align: left;
  font-weight: 500;
  margin-left: -6px;
}
.archivo-fila-abrir:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
.archivo-fila-acciones {
  display: flex;
  gap: 2px;
  opacity: 0;
}
.archivo-fila:hover .archivo-fila-acciones,
.archivo-fila:focus-within .archivo-fila-acciones {
  opacity: 1;
}
@media (hover: none) {
  .archivo-fila-acciones {
    opacity: 1;
  }
}
.archivo-fila.soltar {
  outline: 2px dashed var(--teal);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
}
/* En el teléfono caben tres fichas por fila: son iconos, no tarjetas. */
@media (max-width: 600px) {
  .file-grid.archivo-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}
@media (max-width: 1024px) {
  .archivo-rejilla > .archivo-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
  }
}
/* Mantener pulsado abre el menú de la ficha: sin la lupa ni la selección de
   texto del sistema. El campo del nombre queda fuera: ahí se escribe. */
@media (pointer: coarse) {
  .archivo-item .personal-icono,
  .archivo-item .personal-tile-nombre,
  .archivo-fila-abrir,
  .archivo-fila .personal-tile-nombre {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Un menú que acabas de abrir va por encima de la tira que invita a activar
   los avisos (z-index 150): cerca del borde de abajo, la tira tapaba sus
   últimas opciones. Sigue por debajo de los avisos emergentes. */
@media (max-width: 900px) {
  .chat-flotante {
    z-index: 160;
  }
}

/* ======================================================================
   Agenda: alta a mano y grupos
   ====================================================================== */
.agenda-herramientas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.agenda-herramientas .agenda-busca {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.agenda-herramientas > .btn {
  flex: none;
}
/* Una línea que dice lo que pasa en el formulario: por qué no vale el
   correo, o que ese correo ya estaba y se ha abierto el que hay. */
.agenda-aviso {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: color-mix(in srgb, var(--teal) 10%, var(--bg-2));
  font-size: 13.5px;
  line-height: 1.4;
}
.agenda-aviso.error {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--bg-2));
}
@media (max-width: 600px) {
  .agenda-herramientas {
    flex-wrap: wrap;
  }
}
/* Los participantes de un correo, para guardar varios a la vez. */
.participantes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.participante {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.participante:hover {
  background: var(--bg-3);
}
.participante .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.participante .grow b,
.participante .grow small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.participante .grow small {
  color: var(--fg-3);
  font-size: 12.5px;
}
.participante input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
}
.participante-etiquetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex: none;
  max-width: 45%;
}
.chip-papel {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 12px;
  white-space: nowrap;
}
.chip-papel.remitente {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
  color: var(--accent);
}
.chip-papel.ya {
  border-style: dashed;
}
.chip-papel.dudoso {
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--line-2));
}
/* Contactos marcados para hacer un grupo. */
.agenda-marcados {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--teal) 12%, var(--bg-2));
}
.contacto-marca {
  display: inline-flex;
  flex: none;
  cursor: pointer;
}
.personal-card.contacto.marcado {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
/* Los grupos, debajo de los contactos. */
.agenda-grupos {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.agenda-grupos-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.agenda-grupos-cabeza .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.agenda-grupos-cabeza small {
  color: var(--fg-3);
}
.agenda-grupos-cabeza .btn {
  margin-left: auto;
}
.personal-card.grupo {
  align-items: center;
  gap: 12px;
}
.personal-card.grupo .grow {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.personal-card.grupo small {
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La clave, como se teclea. */
.grupo-clave {
  flex: none;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
/* Un grupo entre las sugerencias de Para: con su icono y cuántos son. */
.mail-sugerencia.grupo b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mail-sugerencia.grupo b .ico {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.mail-sugerencia.grupo span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* La agenda vive en una columna estrecha de Mi espacio: ahí el correo y el
   teléfono no caben al lado del nombre (se partía letra a letra). Si la
   sección es estrecha, bajan a su propia línea, bajo el nombre. */
.hueco-contact {
  container: agenda / inline-size;
}
@container agenda (max-width: 520px) {
  .agenda-herramientas {
    flex-wrap: wrap;
  }
  .agenda-herramientas .agenda-busca {
    flex: 1 1 100%;
  }
  .personal-card.contacto {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .personal-card.contacto .grow b,
  .personal-card.contacto .grow small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .personal-card.contacto .contacto-dato {
    order: 5;
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 40px;
  }
  .personal-card.contacto .personal-acciones {
    order: 4;
  }
}

/* ---------- Correo: mover fichas entre Para, Cc y Cco ---------- */
.mail-ficha[draggable="true"] {
  cursor: grab;
}
.mail-ficha[draggable="true"]:active {
  cursor: grabbing;
}
.mail-campo.soltar {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  outline: 2px dashed var(--teal);
  outline-offset: -2px;
  border-radius: 8px;
}
/* Cc o Cco cerrados: mientras se arrastra una ficha, una franja fina donde
   soltarla. Al soltar, el campo se abre con ella dentro. */
.mail-franja {
  margin: 2px 0;
  padding: 6px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  text-align: center;
}
.mail-franja.soltar {
  border-color: var(--teal);
  color: var(--fg);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
}

/* ---------- Anotar: capa de dibujo sobre la imagen y el fotograma ---------- */
.anotador {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anotador-fila {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 8px;
}
.anotador-escenario {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(45deg, #1b201d 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #1b201d 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #1b201d 75%) 0 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #1b201d 75%) 0 0/20px 20px,
    #131715;
  /* El gesto es nuestro: ni desplazar la página ni el zoom del navegador. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.anotador-escenario.mano {
  cursor: grab;
}
.anotador-escenario.mano:active {
  cursor: grabbing;
}
.anotador-escenario.lapiz {
  cursor: crosshair;
}
.anotador-marco {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.anotador-marco > img,
.anotador-marco > video {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.anotador-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.anotador-rotulo {
  position: absolute;
  transform: translateY(-50%);
  min-width: 8ch;
  padding: 2px 6px;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  font-family: system-ui, sans-serif;
  outline: none;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

/* La barra de herramientas: oscura siempre, porque va encima de la imagen,
   con botones grandes y el activo en el color de la casa. */
.anotador-barra {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: rgba(16, 19, 21, 0.9);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  scrollbar-width: none;
}
/* Dos columnas: la barra entera cabe a la vista en un portátil sin tener
   que desplazarla, y los botones siguen siendo grandes. */
.anotador-grupo {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 3px;
}
.anotador-grupo + .anotador-grupo {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.anotador-grupo.colores {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 4px;
  padding-bottom: 2px;
  justify-items: center;
}
.anotador-grupo.grosores {
  grid-template-columns: repeat(3, 1fr);
}
.anotador-barra .herr.grosor {
  width: 29px;
}
.anotador-barra .herr {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f2f4f3;
  cursor: pointer;
}
.anotador-barra .herr svg {
  width: 26px;
  height: 26px;
}
.anotador-barra .herr:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}
.anotador-barra .herr.activa {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.anotador-barra .herr:disabled {
  opacity: 0.32;
  cursor: default;
}
.anotador-barra .herr.grosor span {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.7);
}
.anotador-barra .herr.grosor.activa {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.anotador-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.anotador-color.activo {
  border-color: #fff;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff;
}
.anotador-barra :focus-visible,
.anotador-zoom :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.anotador-zoom {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(16, 19, 21, 0.82);
}
.anotador-zoom button {
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: #eef2f0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.anotador-zoom button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.anotador-ayuda {
  z-index: 1;
}
.anotador-viendo {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 5px 6px 5px 13px;
  border-radius: 999px;
  background: rgba(16, 19, 21, 0.86);
  color: #eef2f0;
  font-size: 12.5px;
}
.anotador-viendo b {
  color: #ffd400;
  font-weight: 600;
}
.anotador-viendo button {
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.anotador-pie {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.anotador-texto {
  flex: 1;
  min-width: 200px;
  min-height: 38px;
  max-height: 120px;
  resize: vertical;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.anotador-panel-btn {
  margin-left: auto;
}
.anotador-panel-btn .chapa {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.anotador-notas {
  flex: 0 0 290px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}
.anotador-notas header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.anotador-notas ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anotador-vacio {
  padding: 12px;
  margin: 0;
}
.anotador-nota {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.anotador-nota:hover {
  border-color: var(--line-2);
}
.anotador-nota.activa {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.anotador-nota.resuelta {
  opacity: 0.62;
}
.anotador-nota img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}
.anotador-nota-cab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.anotador-nota-cab time {
  margin-left: auto;
  color: var(--fg-2);
  font-size: 12px;
}
.anotador-nota-texto {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pantallas estrechas: la lista de notas va encima del dibujo, plegable, y
   la barra de herramientas abajo y en horizontal para el pulgar. */
@media (max-width: 900px) {
  .anotador-notas {
    position: absolute;
    right: 8px;
    top: 48px;
    bottom: 8px;
    z-index: 3;
    width: min(290px, calc(100% - 16px));
    box-shadow: var(--shadow);
  }
  .anotador-fila {
    position: relative;
  }
}
@media (max-width: 600px) {
  /* Abajo, para el pulgar, en dos filas: herramientas arriba; colores,
     grosor y deshacer abajo. Todo a la vista, sin desplazar la barra. */
  .anotador-barra {
    left: 50%;
    top: auto;
    bottom: 6px;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    width: max-content;
    max-width: calc(100% - 12px);
    max-height: none;
    overflow: visible;
    padding: 4px;
  }
  .anotador-grupo {
    display: flex;
    flex-direction: row;
    gap: 2px;
  }
  .anotador-grupo + .anotador-grupo {
    padding-top: 0;
    border-top: 0;
  }
  .anotador-grupo.colores {
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    align-content: center;
    padding: 0;
  }
  .anotador-barra .herr {
    width: 35px;
    height: 35px;
    flex: none;
  }
  .anotador-barra .herr svg {
    width: 22px;
    height: 22px;
  }
  .anotador-barra .herr.grosor {
    width: 27px;
  }
  .anotador-color {
    width: 18px;
    height: 18px;
  }
  .anotador-ayuda {
    display: none;
  }
  .anotador-viendo {
    bottom: auto;
    top: 48px;
  }
}

/* ---------- Anotar: reproductor propio, fotograma a fotograma ---------- */
.video-barra {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.video-botones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.video-barra svg.ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-play {
  min-width: 46px;
  justify-content: center;
}
.video-tc {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.video-tc .muted {
  font-size: 12.5px;
}
/* El número de fotograma sale de unos fps que nadie ha dicho: se avisa. */
.video-supuesto {
  color: var(--accent);
  font-weight: 700;
  margin-right: 2px;
}
.video-fps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-2);
  font-size: 12.5px;
}
.video-fps select {
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
}
.video-sugerencia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-size: 12.5px;
}
.video-linea {
  position: relative;
  height: 22px;
  margin: 0 7px;
  cursor: pointer;
  touch-action: none;
}
.video-linea::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.video-hecho {
  position: absolute;
  left: 0;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.video-cabezal {
  position: absolute;
  top: 3px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--fg);
  pointer-events: none;
}
/* Las notas encima de la barra: rojas las pendientes, grises las resueltas. */
.video-marca {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  padding: 0;
  border: 2px solid var(--bg);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #ff3b30;
  cursor: pointer;
}
.video-marca.resuelta {
  background: var(--line-2);
}
.video-marca.activa {
  box-shadow: 0 0 0 2px var(--accent);
}
.anotador-tc {
  padding: 0 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.anotador-tc.grande {
  align-self: center;
  padding: 6px 9px;
  font-size: 13px;
}

/* ---------- Anotar: el hilo de notas de una versión ---------- */
.anotador-nota-li {
  position: relative;
}
.anotador-resolver {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
}
.anotador-resolver:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.anotador-nota {
  padding-bottom: 30px;
}
.hilo-notas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hilo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hilo-titulo .btn .ico {
  width: 16px;
  height: 16px;
}
.hilo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hilo-nota {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.hilo-nota.resuelta {
  opacity: 0.7;
}
.hilo-cuerpo {
  flex: 1;
  min-width: 0;
}
.hilo-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
}
.hilo-cab time {
  color: var(--fg-2);
  font-size: 12px;
}
.hilo-cab .anotador-tc {
  border: 0;
  color: var(--fg);
  cursor: pointer;
}
.hilo-origen {
  padding: 0 6px;
  border-radius: 5px;
  background: var(--line);
  font-size: 12px;
}
.hilo-texto {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
}
.hilo-miniatura {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
}
.hilo-miniatura:disabled {
  cursor: default;
}
.hilo-miniatura img {
  display: block;
  width: 100%;
  max-width: 320px;
}
.hilo-resuelta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
}
.hilo-resuelta .ico {
  width: 14px;
  height: 14px;
}
.hilo-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hilo-plegar {
  align-self: flex-start;
}
.hilo-escribir {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hilo-escribir .textarea {
  flex: 1;
}
@media (max-width: 600px) {
  .hilo-nota {
    flex-wrap: wrap;
  }
  .hilo-acciones {
    width: 100%;
    justify-content: flex-end;
  }
  .hilo-escribir {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Anotar: el plano con todas sus versiones, y comparar ---------- */
.modal.plano-modal {
  max-width: min(1400px, 96vw);
  width: min(1400px, 96vw);
}
.plano-titulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.plano {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plano-resumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
}
.plano-pendiente b {
  color: #ff5a4f;
}
.plano-versiones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plano-version {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.plano-version.abierta {
  border-color: var(--line-2);
}
.plano-cab {
  display: flex;
  align-items: center;
}
.plano-elegir {
  display: grid;
  place-items: center;
  width: 40px;
  align-self: stretch;
  cursor: pointer;
}
.plano-elegir input {
  width: 17px;
  height: 17px;
}
.plano-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 12px 9px 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.plano-toggle .ico {
  width: 16px;
  height: 16px;
  color: var(--fg-2);
}
.plano-num {
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}
.plano-toggle time {
  color: var(--fg-2);
  font-size: 12.5px;
}
.plano-cuantas {
  margin-left: auto;
  color: var(--fg-2);
  font-size: 12.5px;
}
.plano-cuantas b {
  color: var(--fg);
}
.plano-cuerpo {
  display: grid;
  grid-template-columns: minmax(200px, 360px) 1fr;
  gap: 14px;
  padding: 0 12px 12px 40px;
}
.plano-mini {
  align-self: start;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  display: grid;
  place-items: center;
  min-height: 120px;
}
.plano-mini img,
.plano-mini video {
  display: block;
  width: 100%;
}
.plano-hilo .hilo-notas {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.plano-mas {
  align-self: center;
}
@media (max-width: 760px) {
  .plano-cuerpo {
    grid-template-columns: 1fr;
    padding-left: 12px;
  }
}

/* Chapa de la rejilla: la versión y lo que queda por atender. */
.ver.con-notas {
  background: #d9362c;
  color: #fff;
}

.comparar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comparar-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.comparar-cual {
  display: flex;
  align-items: center;
  gap: 6px;
}
.comparar-cual kbd {
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: inherit;
}
.comparar-escenario {
  position: relative;
  height: 68dvh;
  display: flex;
  gap: 8px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.comparar-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #0d100f;
}
.comparar-capa {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.comparar-capa.vista {
  visibility: visible;
}
.comparar-medio {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  pointer-events: none;
}
.comparar-rotulo {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 19, 21, 0.86);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.comparar-video {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Anotar: el visor del chat con la misma capa de dibujo ---------- */
.chat-visor-lienzo.anotable {
  display: flex;
  align-items: stretch;
}
.chat-visor-lienzo.anotable img,
.chat-visor-lienzo.anotable video {
  max-width: none;
  max-height: none;
  object-fit: fill;
  border-radius: 0;
  box-shadow: none;
}
.chat-visor-lienzo.anotable .anotador-nota img {
  object-fit: cover;
}
.chat-visor-lienzo.anotable .anotador-escenario {
  background: transparent;
}
@media (max-width: 600px) {
  .chat-visor-lienzo.anotable {
    padding: 6px;
  }
}

/* Una nota enlazada en el chat: su miniatura, y a un toque de abrirla. */
.chat-nota {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg);
  text-decoration: none;
}
.chat-nota img {
  display: block;
  width: 100%;
  border-radius: 7px;
  background: #000;
}
.chat-nota span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 2px;
  font-size: 13px;
  font-weight: 600;
}
.chat-nota:hover {
  border-color: var(--accent);
}

/* ---------- Archivo: carpetas favoritas ---------- */
.favoritas-archivo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.favoritas-titulo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.favoritas-titulo .ico {
  width: 14px;
  height: 14px;
  color: #f5b301;
  fill: #f5b301;
}
.favorita {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg);
  font-size: 13.5px;
  text-decoration: none;
}
.favorita:hover {
  border-color: var(--accent);
}
.favorita.actual {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
}
.favorita b {
  font-weight: 600;
}
.favorita-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.favorita-proyecto {
  color: var(--fg-2);
  font-size: 12px;
}
/* La estrella: hueca si no, rellena y dorada si es favorita. */
.btn.estrella.activa .ico {
  color: #f5b301;
  fill: #f5b301;
}
.personal-icono {
  position: relative;
}
.carpeta-estrella {
  position: absolute;
  right: 2px;
  top: 0;
  color: #f5b301;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.carpeta-estrella.fila {
  position: static;
  margin-left: 6px;
  font-size: 14px;
}

/* ---------- Archivo: nombres al subir según la carpeta ---------- */
.regla-chip {
  max-width: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.regla-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regla-nombre {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.regla-campo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.regla-campo.con-error {
  border-color: #d9362c;
}
.regla-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.regla-variables .chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
}
.regla-leyenda {
  margin: 0;
  padding-left: 18px;
  columns: 2 260px;
  font-size: 13px;
  color: var(--fg-2);
}
.regla-heredada {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 13.5px;
}
.regla-ejemplo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
}
.regla-ejemplo b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* Estado de una versión en la pantalla del plano: tres botones a la vista. */
.plano-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.plano-estado .btn.activo.estado-aprobado {
  background: #1d8a45;
  border-color: #1d8a45;
  color: #fff;
}
.plano-estado .btn.activo.estado-cambios {
  background: #d9362c;
  border-color: #d9362c;
  color: #fff;
}
.plano-estado .btn.activo.estado-revisar {
  background: #c98a12;
  border-color: #c98a12;
  color: #fff;
}

/* ---------- Proyecto: control de planos ---------- */
.proyecto-pestanas {
  align-self: flex-start;
  margin-bottom: 14px;
}
.control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}
.control-principal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.control-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.control-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.control-filtro b {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--line);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.control-filtro.activo {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
}
.control-filtro.filtro-cambios b {
  background: #d9362c;
  color: #fff;
}
.control-filtro.filtro-revisar b {
  background: #c98a12;
  color: #fff;
}
.control-filtro.filtro-aprobado b {
  background: #1d8a45;
  color: #fff;
}
.control-busca {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.control-busca .input {
  flex: 1;
  min-width: 180px;
}
.control-busca .select {
  width: auto;
}
.control-vacio {
  padding: 18px 4px;
}
.control-tabla {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
}
.control-fila {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 0.8fr 1.4fr 1.3fr 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.control-fila:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.control-fila.cab {
  border-top: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}
.control-fila.con-notas {
  box-shadow: inset 3px 0 0 #d9362c;
}
.control-plano {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.control-mini {
  flex: none;
  width: 56px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  overflow: hidden;
  background: #0d100f;
}
.control-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.control-nombre,
.control-version,
.control-artista > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.control-nombre b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.control-nombre .small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.control-artista {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.control-resp {
  display: block;
  margin-top: 2px;
}
.control-notas b {
  color: #ff5a4f;
}
.control-lado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.control-bloque h2 {
  margin: 0 0 8px;
  font-size: 15px;
}
.control-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 460px;
  overflow-y: auto;
}
.control-nota,
.control-mensaje {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.control-nota:hover,
.control-mensaje:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.control-nota.resuelta {
  opacity: 0.6;
}
.control-nota img {
  flex: none;
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  background: #000;
}
.control-nota > span,
.control-mensaje > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.control-nota-texto,
.control-mensaje-texto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.control-adjunto {
  max-width: 160px;
  max-height: 90px;
  margin-top: 4px;
  border-radius: 6px;
  object-fit: cover;
}
@media (max-width: 1100px) {
  .control {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .control-fila {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .control-fila.cab {
    display: none;
  }
  .control-fila > :nth-child(3),
  .control-fila > :nth-child(5) {
    display: none;
  }
  .control-fila > :nth-child(4) {
    grid-column: 2;
  }
  .control-fila > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* Ajustes → Capturas de prueba: una persona por línea, con su casilla. */
.rodaje-acceso {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
}
.rodaje-acceso label {
  min-height: 40px;
  gap: 10px;
  cursor: pointer;
}

/* Ajustes → Contraseña y Sesión. */
.contrasena-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}
.contrasena-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sesiones {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sesiones li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.sesiones li .grow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.sesiones li .hint {
  flex-basis: 100%;
}

/* ======================================================================
   Sala creativa: la sala de voz siempre abierta (src/client/sala/).
   El megáfono lleva la pátina (--teal) para distinguirse de los canales
   de texto; hablar se marca con un aro del mismo color, como en Discord.
   ====================================================================== */
.sala-grupo {
  margin-bottom: 4px;
}
.sala-entrada {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sala-entrada:hover {
  background: var(--bg-3);
}
.sala-entrada.active {
  background: var(--bg-4);
}
.sala-entrada:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.sala-entrada .sala-ico,
.sala-ico {
  color: var(--teal);
  width: 17px;
  height: 17px;
  flex: none;
}
.sala-entrada.conectada .sala-ico {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--teal) 60%, transparent));
}
.sala-entrada.desactivada {
  cursor: default;
  opacity: 0.6;
}
.sala-cuenta {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 22%, transparent);
  color: var(--fg);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sala-presentes {
  list-style: none;
  margin: 0 0 6px;
  padding: 0 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sala-presentes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 13px;
  min-width: 0;
}
.sala-presentes li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sala-presentes li .ico {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--fg-3);
}
.sala-presentes .avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
  flex: none;
  transition: box-shadow 0.12s;
}
.sala-presentes li.habla .avatar,
.sala-persona.habla .avatar,
.sala-persona.habla video {
  box-shadow: 0 0 0 2px var(--teal);
}
.sala-presentes.en-portada {
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

/* La sala abierta, en el sitio de la conversación. */
.sala-vista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}
.sala-vista.fuera {
  justify-content: center;
  align-items: center;
}
.sala-portada {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.sala-portada h2 {
  margin: 0;
}
.sala-portada-ico {
  width: 44px;
  height: 44px;
  color: var(--teal);
}
.sala-escenario {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.sala-pantalla {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
}
.sala-pantalla video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  display: block;
}
.sala-pantalla.grande video {
  max-height: calc(100dvh - 330px);
  min-height: 200px;
}
.sala-pantalla:fullscreen video {
  max-height: none;
  height: 100%;
}
.sala-pantalla figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 13px;
}
.sala-pantalla figcaption .ico {
  width: 15px;
  height: 15px;
}
.sala-miniaturas,
.sala-rejilla-pantallas {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
}
.sala-rejilla-pantallas {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.sala-personas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.sala-personas.tira {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.sala-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.sala-personas.tira .sala-persona {
  padding: 8px 6px;
}
.sala-persona .avatar.lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
.sala-personas.tira .sala-persona .avatar.lg {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.sala-persona video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
}
.sala-persona-nombre {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sala-persona-nombre .ico {
  width: 14px;
  height: 14px;
  color: var(--red);
  flex: none;
}
.sala-sola,
.sala-simulada {
  text-align: center;
  margin: 0;
}
.sala-pie {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.sala-ajustes {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sala-controles {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.sala-controles .btn.icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.sala-controles.compacto {
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.sala-controles.compacto .btn.icon {
  width: 34px;
  height: 34px;
}
.sala-controles .btn.apagado {
  color: var(--red);
}
/* Al micro le llega sonido: el botón se ilumina (como el anillo verde de
   quien habla), en todas las salas y en la barra que acompaña. Si hablas y
   no se ilumina, el micro no está mandando nada a la plataforma. */
.sala-controles .btn.con-senal {
  background: #1f9d6a;
  border-color: #1f9d6a;
  color: #fff;
  box-shadow:
    0 0 0 2px #7ee2b8,
    0 0 12px rgba(46, 204, 138, 0.7);
  transition:
    background 0.12s,
    box-shadow 0.12s,
    color 0.12s;
}
.sala-controles .btn.encendido {
  background: color-mix(in srgb, var(--teal) 24%, var(--bg-3));
  color: var(--fg);
}
.sala-controles .btn.colgar {
  background: color-mix(in srgb, var(--red) 30%, var(--bg-3));
  color: var(--fg);
}
.sala-controles .btn.colgar:hover {
  background: color-mix(in srgb, var(--red) 45%, var(--bg-3));
}
.sala-aviso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 20%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  color: var(--fg);
  font-size: 13.5px;
}
.sala-aviso span {
  flex: 1;
  min-width: 180px;
}

/* La barra que acompaña por toda la plataforma: abajo de la barra lateral,
   como el panel «voz conectada» de Discord; en el teléfono, sobre la barra
   de abajo. */
.sala-barra {
  position: fixed;
  left: 0;
  bottom: 0;
  width: var(--sidebar);
  z-index: 44;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.sala-barra .sala-aviso {
  padding: 8px 10px;
  font-size: 12.5px;
}
.sala-barra-fila {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sala-barra-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.sala-barra-titulo:hover {
  background: var(--bg-4);
}
.sala-barra-titulo span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sala-barra-titulo b {
  color: var(--teal);
  font-size: 13px;
}
.sala-barra-titulo small {
  color: var(--fg-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sala-ventanita {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.sala-ventanita video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
html.en-sala .sidebar {
  padding-bottom: 150px;
}
/* En la sala, abajo van los controles: la tira de avisos sube arriba. */
body.en-vista-sala .tira-avisos {
  top: calc(var(--topbar) + 12px);
  bottom: auto;
}
@media (max-width: 900px) {
  .sala-barra {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px);
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .sala-barra-fila {
    flex-direction: row;
    align-items: center;
  }
  .sala-barra-titulo {
    flex: 1;
  }
  .sala-ventanita {
    width: 72px;
    flex: none;
  }
  .sala-barra-titulo .sala-ico {
    display: none;
  }
  html.en-sala .main {
    padding-bottom: calc(var(--tabbar) + 140px + env(safe-area-inset-bottom));
  }
  html.en-sala .fab {
    bottom: calc(var(--tabbar) + 84px + env(safe-area-inset-bottom));
  }
  /* La tira de avisos y los avisos emergentes, por encima de la barra. */
  html.en-sala .tira-avisos,
  html.en-sala .toast {
    bottom: calc(var(--tabbar) + 84px + env(safe-area-inset-bottom));
  }
  .sala-vista {
    padding: 12px;
  }
  .sala-pantalla.grande video {
    max-height: 50dvh;
  }
}
/* En el teléfono, la barra se queda con lo esencial (micro y salir); el
   resto está a un toque, en la propia sala. */
@media (max-width: 520px) {
  .sala-controles.compacto .btn.icon:nth-child(2),
  .sala-controles.compacto .btn.icon:nth-child(3) {
    display: none;
  }
}

/* ---------- Barra lateral: pie fijo y versión plegada ----------
   El pie (perfil y «Plegar barra») se queda siempre a la vista: lo que se
   desplaza es la lista de secciones y proyectos. Plegada, la barra pasa a una
   columna de 76 px con los mismos iconos y, en los proyectos, su abreviatura
   (ARM, DN…) sobre su color. «Crear» y «Salir» ya no están aquí: cerrar sesión
   vive en Ajustes › Sesión. */
.sidebar {
  overflow: hidden;
}
.sidebar .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}
.sidebar-footer {
  flex: none;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-item .abrev {
  display: none;
}
.barra-plegar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.barra-plegar:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.barra-plegar .ico {
  width: 15px;
  height: 15px;
  flex: none;
}
.barra-plegar .caret.izq {
  transform: rotate(180deg);
}

html.barra-compacta {
  --sidebar: 76px;
}
.sidebar.compacta .brand {
  padding: 20px 0 16px;
  justify-content: center;
}
.sidebar.compacta .brand > div {
  display: none;
}
.sidebar.compacta .nav {
  padding: 0 8px;
  align-items: stretch;
}
.sidebar.compacta .nav-item {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
.sidebar.compacta .nav-item .grow {
  display: none;
}
.sidebar.compacta .nav-item .count {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 16px;
}
.sidebar.compacta .nav-item .swatch {
  display: none;
}
.sidebar.compacta .nav-item .abrev {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.sidebar.compacta .nav-item:has(.abrev) {
  min-height: 38px;
}
.sidebar.compacta .nav-title.plegable {
  justify-content: center;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin-top: 6px;
}
.sidebar.compacta .nav-title.plegable span {
  display: none;
}
.sidebar.compacta .sidebar-footer {
  padding: 10px 6px;
  align-items: stretch;
}
.sidebar.compacta .sidebar-footer .nav-item .ico {
  display: none;
}
.sidebar.compacta .barra-plegar {
  justify-content: center;
  padding: 0;
}
.sidebar.compacta .barra-plegar span {
  display: none;
}

/* ---------- Asistente: se puede arrastrar y colocar donde se quiera ---------- */
.lanzador-boton,
.lanzador-cabeza {
  touch-action: none;
}
.lanzador-boton {
  cursor: grab;
}
.lanzador-boton[data-arrastrando],
.lanzador-ventana[data-arrastrando] {
  transition: none;
  user-select: none;
}
.lanzador-boton[data-arrastrando] {
  cursor: grabbing;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent),
    var(--shadow-alta);
}

/* ---------- Chat: filas de la lista de canales de 32 px (antes 40) ---------- */
.chat-list .chan:not(.directo) {
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ---------- Equipo: una tabla, con todos los proyectos a la vista ---------- */
.equipo-tabla {
  padding: 0;
  overflow: visible;
}
.equipo-fila {
  display: grid;
  grid-template-columns:
    52px minmax(0, 1.4fr) 120px minmax(170px, 1.5fr)
    190px 44px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.equipo-fila:first-child {
  border-top: 0;
}
.equipo-cabecera {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.equipo-persona {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.equipo-persona .title {
  font-weight: 650;
}
.equipo-persona .meta {
  font-size: 13px;
  color: var(--fg-3);
  overflow-wrap: anywhere;
}
.equipo-persona .equipo-correo {
  font-size: 12px;
}
.equipo-proyectos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proyecto-abrev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
  cursor: default;
}
.equipo-estado {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.equipo-estado .meta {
  font-size: 12.5px;
  color: var(--fg-3);
}
.estado-punto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}
.estado-punto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}
.estado-punto.pendiente::before {
  background: var(--yellow);
}
.estado-punto.baja {
  color: var(--fg-3);
}
.estado-punto.baja::before {
  background: var(--red);
}
.equipo-acciones {
  display: flex;
  justify-content: flex-end;
}
.menu-acciones {
  position: relative;
}
.menu-acciones-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-alta);
  display: flex;
  flex-direction: column;
}
.menu-acciones-lista button {
  text-align: left;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.menu-acciones-lista button:hover {
  background: var(--bg-4);
}
.menu-acciones-lista button.peligro {
  color: var(--red);
}
@media (max-width: 900px) {
  .equipo-cabecera {
    display: none;
  }
  .equipo-fila {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    row-gap: 8px;
  }
  .equipo-fila > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .equipo-fila > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .equipo-fila > :nth-child(6) {
    grid-column: 3;
    grid-row: 1;
  }
  .equipo-fila > :nth-child(3),
  .equipo-fila > :nth-child(4),
  .equipo-fila > :nth-child(5) {
    grid-column: 2 / 4;
  }
}

/* ---------- Tareas: una sola lista y filtros con cara propia ---------- */

/* La lista es un único bloque, no una caja por tarea: las filas se separan
   con una línea, los grupos con una banda, y el fondo se sigue viendo con la
   misma transparencia que el resto de los bloques. */
.task-lista {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  overflow: hidden;
}
:root[data-fondo] .task-lista {
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido),
    transparent
  );
}
.task-lista .task-row,
:root[data-fondo] .task-lista .task-row {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 8px 14px;
  min-height: 48px;
}
.task-lista .task-row:hover,
:root[data-fondo]
  .task-lista
  .task-row:hover:not(:is(.modal, [role="dialog"], [role="menu"]) *) {
  background: color-mix(in srgb, var(--bg-3) 55%, transparent);
}
.task-lista .task-group h3 {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-3) 60%, transparent);
}
.task-lista .task-arbol {
  margin: 0;
}
.task-lista .task-arbol-cabeza {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.task-lista .task-arbol-cabeza.nivel-0 {
  margin: 0;
  border-bottom: 0;
  background: color-mix(in srgb, var(--bg-3) 60%, transparent);
}
.task-lista .task-arbol-cabeza.nivel-1 {
  padding-left: 28px;
}
.task-lista .task-arbol-bloque {
  margin: 0;
}
.task-lista .task-arbol-bloque .task-row {
  margin-left: 0;
  padding-left: 42px;
}
.task-lista > :first-child > :first-child {
  border-top: 0;
}
.task-lista .task-row .title {
  font-size: 15px;
}
.task-lista .task-row .meta {
  font-size: 12.5px;
}
/* Prioridad: la barra de color baja al borde de la fila y, en las que
   importan, el nivel también está escrito (no depende solo del color). */
.prio-etq {
  font-weight: 600;
}
.prio-etq.urgent {
  color: var(--red);
}
.prio-etq.high {
  color: var(--orange);
}
@media (min-width: 601px) {
  .task-lista .task-row > .prio {
    order: -2;
    width: 3px;
    margin: -8px 0 -8px -14px;
    border-radius: 0 3px 3px 0;
  }
}
/* Seleccionar en grupo: la casilla aparece al pasar por la fila, o en todas
   cuando ya hay alguna marcada. «Hecha» es la única casilla a la vista. */
@media (hover: hover) and (min-width: 601px) {
  .task-lista:not(.con-seleccion)
    .task-row:not(:hover):not(:focus-within)
    .task-marcar {
    opacity: 0;
  }
}

/* Barra de filtros */
.filtros-tareas {
  gap: 8px;
  padding: 8px 10px;
}
.filtro-texto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 380px;
  min-height: 36px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg-3);
}
.filtro-texto:focus-within {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
  color: var(--fg);
}
.filtro-texto > .ico {
  width: 16px;
  height: 16px;
  flex: none;
}
.filtro-texto input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.filtro-texto input::placeholder {
  color: var(--fg-3);
}
.filtro-texto input::-webkit-search-cancel-button {
  display: none;
}
.filtro-texto-borrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.filtro-texto-borrar:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.filtro-texto-borrar .ico {
  width: 14px;
  height: 14px;
}

/* Cada filtro lleva su icono y su color: plazo (ámbar), persona (azul),
   prioridad (rojo), agrupar (violeta), hechas (verde). Son rectángulos
   redondeados con la ficha del icono a un lado, así no se confunden con las
   cápsulas de las vistas ni con los botones. */
.pastilla-filtro,
.pastilla-interruptor {
  --tono: var(--fg-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--tono) 45%, var(--line));
  border-radius: 10px;
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--tono) 9%, var(--bg-2))
      var(--fondo-bloque-nitido, 100%),
    transparent
  );
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
}
.pastilla-filtro[data-tono="plazo"],
.pastilla-interruptor[data-tono="plazo"] {
  --tono: var(--yellow);
}
.pastilla-filtro[data-tono="responsable"] {
  --tono: var(--blue);
}
.pastilla-filtro[data-tono="prioridad"] {
  --tono: var(--red);
}
.pastilla-filtro[data-tono="agrupar"] {
  --tono: var(--violet);
}
.pastilla-interruptor[data-tono="hechas"] {
  --tono: var(--green);
}
.pastilla-filtro > .ico:first-child,
.pastilla-interruptor > .ico:first-child {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 8px;
  flex: none;
  background: color-mix(in srgb, var(--tono) 24%, transparent);
  color: var(--tono);
}
.pastilla-filtro .etq,
.pastilla-interruptor .etq {
  color: var(--fg-3);
}
.pastilla-filtro .valor {
  font-weight: 600;
}
.pastilla-filtro .caret {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--fg-3);
}
.pastilla-filtro.activa,
.pastilla-interruptor.activa {
  border-color: var(--tono);
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--tono) 20%, var(--bg-2))
      var(--fondo-bloque-nitido, 100%),
    transparent
  );
}
.pastilla-filtro.activa .etq,
.pastilla-interruptor.activa .etq {
  color: var(--fg);
  font-weight: 600;
}
.pastilla-filtro select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.pastilla-filtro:focus-within,
.pastilla-interruptor:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.pastilla-interruptor .interruptor {
  position: relative;
  width: 28px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  background: var(--bg-4);
  border: 1px solid var(--line-2);
  transition: background 0.12s;
}
.pastilla-interruptor .interruptor::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg-2);
  transition: transform 0.12s;
}
.pastilla-interruptor.activa .interruptor {
  background: var(--tono);
  border-color: var(--tono);
}
.pastilla-interruptor.activa .interruptor::after {
  transform: translateX(12px);
  background: var(--bg);
}
@media (pointer: coarse) {
  .pastilla-filtro,
  .pastilla-interruptor,
  .filtro-texto {
    min-height: 44px;
  }
  .pastilla-filtro > .ico:first-child,
  .pastilla-interruptor > .ico:first-child {
    padding: 12px;
  }
}
@media (max-width: 600px) {
  .filtro-texto {
    flex: 1 1 100%;
    max-width: none;
  }
  .pastilla-filtro,
  .pastilla-interruptor {
    flex: 1 1 auto;
  }
}
/* Las vistas guardadas se leen como otra cosa que las pestañas de arriba:
   una etiqueta con marcapáginas y cápsulas más pequeñas, de trazo discontinuo. */
.vistas-etq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.vistas-etq .ico {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.vistas-guardadas > .chip:not(.filtros-boton) {
  padding: 4px 11px;
  border-style: dashed;
  font-size: 12.5px;
}
.vistas-guardadas > .chip.active:not(.filtros-boton) {
  border-style: solid;
}
@media (max-width: 600px) {
  .vistas-etq {
    display: none;
  }
}

/* ---------- Barra única ----------
   Con una sola pantalla, la cabecera de la página sube a la barra de
   pestañas: a la derecha, el subtítulo y los botones de esa página. Con el
   mosaico no pasa: cada panel lleva su cabecera y la barra queda como estaba. */
.tabs-acciones {
  display: none;
}
.tabs-acciones:not(:empty) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  align-self: center;
  margin: -2px 0 4px 8px;
}
.tabs:has(.tabs-acciones:not(:empty)) {
  position: relative;
  z-index: 20;
}
.tabs-titulo {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.tabs-sub {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 13px;
}
/* Sin cabecera propia en el panel, lo que dependía de su alto cuenta con 0. */
.panel.barra-fundida {
  --topbar: 0px;
}
/* La barra mide siempre lo mismo (--pestanas): los botones de la página caben
   en ese alto y no la agrandan, porque hay pantallas que cuentan con él. */
.tabs-acciones .btn {
  min-height: 0;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}
.tabs-acciones .btn.icon {
  width: 32px;
  padding: 0;
}
.tabs-acciones .segmented {
  padding: 2px;
}
.tabs-acciones .segmented button {
  min-height: 28px;
  height: 28px;
}

/* ---------- Ajustes: menú lateral y vista previa ---------- */
.content.ajustes {
  display: grid;
  grid-template-columns: 260px minmax(0, 780px);
  justify-content: start;
  align-items: start;
  gap: 24px;
}
.ajustes-menu {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido, 100%),
    transparent
  );
}
.ajustes-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ajustes-grupo-titulo {
  padding: 2px 8px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ajustes-enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.ajustes-enlace .ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--fg-3);
}
.ajustes-enlace:hover {
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  color: var(--fg);
}
.ajustes-enlace.activo {
  background: var(--bg-4);
  border-color: var(--teal);
  color: var(--fg);
  font-weight: 600;
}
.ajustes-enlace.activo .ico {
  color: var(--teal);
}
.ajustes-cuerpo .seccion-ajustes:first-child,
.ajustes-cuerpo > .notice + .seccion-ajustes {
  margin-top: 0;
}
@media (max-width: 900px) {
  .content.ajustes {
    display: block;
  }
  .ajustes-menu {
    position: static;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ajustes-menu::-webkit-scrollbar {
    display: none;
  }
  .ajustes-grupo {
    flex-direction: row;
    gap: 6px;
  }
  .ajustes-grupo-titulo {
    display: none;
  }
  .ajustes-enlace {
    width: auto;
    flex: none;
    white-space: nowrap;
  }
}
.paneles.mosaico .content.ajustes {
  display: block;
}
.paneles.mosaico .ajustes-menu {
  position: static;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  overflow-x: auto;
}
.paneles.mosaico .ajustes-grupo {
  flex-direction: row;
  gap: 6px;
}
.paneles.mosaico .ajustes-grupo-titulo {
  display: none;
}
.paneles.mosaico .ajustes-enlace {
  width: auto;
  flex: none;
  white-space: nowrap;
}

/* Vista previa de Apariencia: trozo de la plataforma con lo elegido. */
.vista-previa {
  margin-bottom: 16px;
}
.vista-previa-etq {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.vista-previa-ventana {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--bg) var(--fondo-superficie, 100%),
    transparent
  );
}
.vista-previa-barra {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 56px;
  padding: 12px 0;
  border-right: 1px solid var(--line);
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-superficie, 100%),
    transparent
  );
}
.vista-previa-barra svg {
  width: 26px;
  height: 26px;
  color: var(--fg-3);
}
.vista-previa-barra svg.activo {
  color: var(--teal);
}
.vista-previa-pagina {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
}
.vista-previa-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vista-previa-bloque {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido, 100%),
    transparent
  );
}
.vista-previa-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 14px;
}
.vista-previa-fila + .vista-previa-fila {
  border-top: 1px solid var(--line);
}
.vista-previa-fila .grow {
  min-width: 0;
}
.vista-previa-fila .hecho {
  color: var(--fg-3);
  text-decoration: line-through;
}
.vista-previa-casilla {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--line-2);
  border-radius: 6px;
}
.vista-previa-casilla.hecha {
  border-color: var(--green);
  background: var(--green);
}

/* ---------- Formulario de tarea por capas ---------- */
.prio-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prio-selector button {
  --tono: var(--fg-2);
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--tono) 45%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--tono) 8%, var(--bg-2));
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.prio-selector button.low {
  --tono: var(--fg-3);
}
.prio-selector button.normal {
  --tono: var(--blue);
}
.prio-selector button.high {
  --tono: var(--orange);
}
.prio-selector button.urgent {
  --tono: var(--red);
}
.prio-selector button.activa {
  border-color: var(--tono);
  background: color-mix(in srgb, var(--tono) 26%, var(--bg-2));
  font-weight: 600;
}
.atajos-fecha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.atajos-fecha .input {
  width: auto;
  min-height: 36px;
  padding: 4px 10px;
  font-size: 14px;
}
.form-mas {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.form-mas > summary {
  margin-bottom: 10px;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Agenda: barra de arriba con carácter ---------- */
/* Más tonos de filtro (los de Tareas ya existen). */
.pastilla-filtro[data-tono="proyecto"] {
  --tono: var(--teal);
}
.pastilla-filtro[data-tono="tipo"] {
  --tono: var(--orange);
}
/* Anterior · Hoy · Siguiente van juntos, como una sola pieza; «Hoy» destaca
   porque es lo que más se pulsa. */
.agenda-nav {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido, 100%),
    transparent
  );
}
.agenda-nav .btn {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.agenda-nav .btn + .btn {
  border-left: 1px solid var(--line);
}
.agenda-nav .btn:hover {
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
}
.agenda-nav .btn.hoy {
  padding-inline: 18px;
  color: var(--teal);
  font-weight: 700;
}
/* El Gantt: sigue aislado y resaltado a propósito, ahora con más oficio:
   degradado suave, ficha para el icono y un halo cuando está activo. */
.gantt-boton {
  position: relative;
  gap: 0;
  padding: 0 16px 0 0;
  min-height: 36px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent)
  );
  letter-spacing: 0.02em;
}
.gantt-boton .ico {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.gantt-boton:hover {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 36%, transparent),
    color-mix(in srgb, var(--accent) 14%, transparent)
  );
}
.gantt-boton.activo {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.gantt-boton.activo .ico {
  background: color-mix(in srgb, var(--accent-fg) 16%, transparent);
}
.calendar-toolbar > .gantt-boton {
  margin-left: 6px;
}

/* ---------- Inicio: más sitio para las tareas ---------- */
@media (min-width: 1100px) {
  .content.inicio .today-grid {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.55fr)
      minmax(0, 0.9fr);
  }
}

/* ---------- Controles con carácter ----------
   Un botón se lee como botón (relieve, se hunde al pulsarlo), un desplegable
   como desplegable (flecha) y una casilla como casilla (18 px, con color):
   antes los tres eran el mismo rectángulo liso. «Capturas de prueba» (.rodaje)
   conserva su estilo propio, sin tocar. */
.btn:not(.ghost):not(.rodaje):not(:disabled) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 1px 2px color-mix(in srgb, #000 28%, transparent);
}
.btn.primary:not(.rodaje):not(:disabled) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent),
    0 1px 2px color-mix(in srgb, #000 30%, transparent);
}
.btn:not(.ghost):not(.rodaje):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px color-mix(in srgb, #000 32%, transparent);
}
.btn.danger:not(.ghost) {
  border-color: color-mix(in srgb, var(--red) 60%, var(--line-2));
}
select.select:not([multiple]),
select.input:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
    linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

/* ---------- Estados vacíos con dibujo ----------
   Sin caja gris: el fondo de la pantalla se ve a través y solo queda un
   contorno discontinuo. Archivo y Chat conservan los suyos de siempre. */
.empty.ilustrado {
  max-width: 460px;
  margin: 28px auto;
  padding: 28px 24px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  /* Apenas un velo, para que el texto se lea sobre una imagen movida. */
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.empty.ilustrado > div:last-child:not(:first-of-type) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ilustracion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--tono-ilus, var(--teal)) 14%,
    transparent
  );
  color: var(--tono-ilus, var(--teal));
}
.ilustracion.ojo {
  --tono-ilus: var(--blue);
}
.ilustracion.cofre {
  --tono-ilus: var(--accent);
}
.ilustracion.llama {
  --tono-ilus: var(--orange);
}
.empty.ilustrado b {
  font-size: 16px;
}

/* ---------- Móvil: una tira de avisos más fina y cifras en 2 × 2 ---------- */
.tira-corta {
  display: none;
}
@media (max-width: 760px) {
  .tira-avisos {
    align-items: center;
    flex-wrap: nowrap;
    padding: 6px 8px 6px 12px;
  }
  .tira-avisos .grow {
    flex: 1 1 auto;
    order: 0;
  }
  .tira-larga {
    display: none;
  }
  .tira-corta {
    display: inline;
    font-weight: 600;
  }
}
@media (max-width: 600px) {
  .content.inicio .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
  }
  .content.inicio .stat {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px;
  }
}

/* Visores: fuera de la foto o del vídeo, un clic cierra (clic-fuera.ts). La
   clase solo está mientras el ratón pasa por una zona que cierra. */
.cierra-fuera,
.cierra-fuera *:not(button):not(a):not(input):not(textarea):not(select) {
  cursor: zoom-out !important;
}

/* El nombre de un flujo, editable en su sitio. */
.flujo-nombre-en-linea {
  display: block;
  width: min(100%, 640px);
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* El pie de una foto que vive en Drive: descargar y abrir en Drive. */
.chat-adj-pie.suelto {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: min(420px, 62cqw);
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-3);
}

/* Sala creativa: avisos breves, cuenta atrás del cierre por inactividad,
   modo con vídeo en la lista y el contador de uso de la cabecera. */
.sala-aviso.sala-nota,
.sala-aviso.sala-reconectando {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.sala-cuenta-atras {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  pointer-events: none;
  text-align: center;
}
.sala-cuenta-atras > div {
  max-width: 420px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.sala-cuenta-atras b {
  display: block;
  font-size: clamp(72px, 22vw, 140px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.sala-cuenta-atras p {
  margin: 12px 0 0;
  color: var(--fg-2);
}
.sala-entrada .sala-modo {
  opacity: 0.8;
}
.sala-contador {
  position: relative;
  display: block;
  min-width: 0;
}
.sala-contador-linea {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-3);
  font: inherit;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sala-contador-desglose {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 12.5px;
}
.salud-tabla {
  margin-top: 8px;
}
.salud-tabla summary {
  cursor: pointer;
  font-size: 13px;
}
.salud-tabla-caja {
  overflow-x: auto;
  margin-top: 6px;
}
.salud-tabla table {
  border-collapse: collapse;
  font-size: 12.5px;
}
.salud-tabla th,
.salud-tabla td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

/* Personas a un clic: la foto en grande, la ficha de perfil y el expediente
   de RRHH (components/Perfil.tsx, pages/equipo/Expediente.tsx). */
[data-perfil] {
  cursor: pointer;
}
b[data-perfil]:hover,
span[data-perfil]:not(.avatar):hover {
  text-decoration: underline;
}
[data-perfil]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.avatar-boton {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: zoom-in;
}
.avatar-boton:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.modal.visor-foto .modal-body {
  display: grid;
  place-items: center;
}
.visor-foto-img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 900px);
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.ficha-perfil {
  position: fixed;
  z-index: 95;
  width: min(340px, calc(100vw - 24px));
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-alta);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ficha-perfil.hoja {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.ficha-perfil-fondo {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(0, 0, 0, 0.35);
}
.ficha-perfil-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
}
.ficha-perfil-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
}
.ficha-perfil-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ficha-perfil-nombre b {
  font-size: 16px;
}
.ficha-perfil-nombre span {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.ficha-perfil-nombre .ico {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}
.ficha-perfil-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
}
.ficha-perfil-estado.sala {
  color: var(--green);
}
.ficha-perfil-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.equipo-fila.resaltada {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.equipo-expediente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
}
.equipo-expediente .meta.falta,
.expediente-cabeza .meta.falta {
  color: var(--yellow);
}
.expediente-rgpd {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.expediente-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.expediente-pestanas {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.expediente-datos fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px 12px;
  margin: 0 0 12px;
}
.expediente-datos legend {
  padding: 0 6px;
  font-weight: 600;
}
.expediente-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 12px;
}
.expediente-iban {
  display: flex;
  align-items: center;
  gap: 8px;
}
.expediente-pie {
  display: flex;
  justify-content: flex-end;
}
.expediente-seccion {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.expediente-seccion-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.expediente-seccion-cabeza h3 {
  flex: 1;
  margin: 0;
  font-size: 14px;
}
.expediente-seccion ul,
.expediente-registro,
.mis-documentos ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.expediente-seccion li,
.expediente-registro li,
.mis-documentos li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.expediente-seccion li b {
  display: block;
  overflow-wrap: anywhere;
}
.expediente-seccion li.archivado {
  opacity: 0.6;
}
.expediente-seccion .btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.expediente-permiso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.expediente-permiso .meta,
.expediente-seccion li .meta {
  display: block;
}

/* La campana de cada canal (pages/chat/Silencio.tsx) y «Sonar con» en
   Ajustes → Avisos. */
.campana-canal {
  position: relative;
  display: inline-flex;
}
.chat-herr.silencio.encendido {
  color: var(--accent);
}
.campana-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.campana-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.campana-menu button:hover,
.campana-menu button:focus-visible {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.campana-menu button.activo {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.campana-menu b {
  display: block;
  font-size: 13.5px;
}
.campana-menu small {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
}
.sonar-con {
  margin: 16px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sonar-con legend {
  padding: 0 6px;
  font-weight: 600;
}
.sonar-con .hint {
  margin-left: 6px;
}
.campana-menu .ico {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- llamada a la Sala creativa ----------
   La pastilla del diseño (boton-sala-creativa.png) rehecha con CSS: fondo
   lavanda, borde violeta y texto de verdad (nítido a cualquier tamaño); el
   megáfono, recortado del PNG. Mismos colores en los dos temas: es la marca
   de la llamada. Se ve bastante más que los iconos de formato y menos que
   Enviar, que sigue siendo el único botón relleno. */
:root {
  --sala-lavanda: #e8defa;
  --sala-lavanda-2: #ddd0f7;
  --sala-borde: #a98ee4;
  --sala-borde-2: #8f70dc;
  --sala-tinta: #3a2470;
  --sala-boton: #6b46c1;
}
.sala-separador {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 12px;
  background: var(--line);
}
.sala-llamar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px 0 8px;
  border: 1.5px solid var(--sala-borde);
  border-radius: 999px;
  background: var(--sala-lavanda);
  color: var(--sala-tinta);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.sala-llamar:hover:not(:disabled) {
  background: var(--sala-lavanda-2);
  border-color: var(--sala-borde-2);
}
.sala-llamar:disabled {
  opacity: 0.6;
  cursor: default;
}
.sala-llamar:focus-visible,
.sala-tarjeta-entrar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sala-megafono {
  display: block;
  flex: none;
}
/* En el móvil (o con el chat estrecho): solo el megáfono, en redondo. */
@container chatmain (max-width: 640px) {
  .sala-llamar-texto {
    display: none;
  }
  .sala-llamar {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .sala-separador {
    margin: 0 8px;
  }
}
@media (max-width: 700px) {
  .sala-llamar-texto {
    display: none;
  }
  .sala-llamar {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .sala-separador {
    margin: 0 8px;
  }
}

/* La tarjeta de la llamada en el chat. */
/* La llamada en el chat: el GIF sin fondo, como un sticker, y «Entrar»
   debajo. Nada de caja: el GIF va tal cual sobre el fondo del chat. */
.sala-tarjeta {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
}
.sala-gif {
  display: block;
  max-width: 100%;
  height: auto;
}
.btn.sala-tarjeta-entrar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--sala-boton);
  color: #fff;
  font-weight: 700;
}
.btn.sala-tarjeta-entrar:hover:not(:disabled) {
  background: #5a37ad;
  color: #fff;
}

/* El aviso grande cuando alguien llama: encima de todo. */
.sala-aviso-fondo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: start center;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  background: rgba(24, 12, 48, 0.4);
}
.sala-aviso {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(520px, 100%);
  margin-top: 8vh;
  padding: 16px 20px 16px 16px;
  border: 2px solid var(--sala-borde);
  border-radius: 18px;
  background: var(--sala-lavanda);
  color: var(--sala-tinta);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: sala-aviso-entra 0.25s ease-out;
}
.sala-aviso .sala-gif {
  flex: none;
}
.sala-aviso h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.25;
  text-wrap: balance;
}
.sala-aviso-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sala-aviso .btn.primary {
  border-color: var(--sala-boton);
  background: var(--sala-boton);
  color: #fff;
}
.sala-aviso .btn.ghost {
  border-color: var(--sala-borde);
  color: var(--sala-tinta);
}
@keyframes sala-aviso-entra {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}
@media (max-width: 520px) {
  .sala-aviso {
    flex-direction: column;
    text-align: center;
  }
  .sala-aviso-botones {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sala-aviso {
    animation: none;
  }
}

/* Ajustes → Avisos: «Llamadas a la Sala creativa». */
.llamadas-sala {
  margin: 16px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.llamadas-sala legend {
  padding: 0 6px;
  font-weight: 600;
}
.llamadas-volumen {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.llamadas-volumen input[type="range"] {
  flex: 1;
  min-width: 140px;
  max-width: 260px;
}

/* ---------- GIF y stickers (biblioteca en línea) ---------- */
.chat-herr.chat-gif {
  min-width: 34px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.gif-flotante {
  width: 380px;
  max-width: calc(100vw - 16px);
  padding: 0;
}
.gif-selector {
  display: flex;
  flex-direction: column;
  height: min(470px, 70vh);
}
.gif-cabeza {
  display: grid;
  gap: 8px;
  padding: 10px 10px 6px;
}
.gif-pestanas {
  display: flex;
  gap: 4px;
}
.gif-pestanas button {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gif-pestanas button.activa {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--fg);
}
.gif-buscar {
  width: 100%;
}
.gif-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 10px;
  scrollbar-width: thin;
}
.gif-seccion {
  margin: 8px 2px 6px;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Mosaico: columnas, cada GIF con su proporción. */
.gif-rejilla {
  columns: 3 100px;
  column-gap: 6px;
}
.gif-celda {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--bg-3);
  cursor: pointer;
  break-inside: avoid;
}
.gif-celda img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gif-celda:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Los stickers, sobre cuadros suaves: así se nota la transparencia. */
.gif-celda.sticker,
.gif-previa-imagen.sticker {
  background-color: #fff;
  background-image: conic-gradient(
    #ececf1 25%,
    #fff 0 50%,
    #ececf1 0 75%,
    #fff 0
  );
  background-size: 16px 16px;
}
.gif-celda.sticker img {
  object-fit: contain;
}
.gif-recientes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.gif-recientes .gif-celda {
  flex: none;
  width: 72px;
  height: 72px;
  margin: 0;
}
.gif-nota {
  margin: 0;
  padding: 18px 0;
  color: var(--fg-3);
  font-size: 13px;
  text-align: center;
}
.gif-fin {
  height: 1px;
}
.gif-pie {
  flex: none;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
}
.gif-previa {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 12px;
}
.gif-previa-imagen {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
}
.gif-previa-imagen img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gif-previa-titulo {
  margin: 0;
  color: var(--fg-2);
  font-size: 13px;
  text-align: center;
}
.gif-previa-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* En el móvil, una hoja que sube desde abajo. */
.gif-hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(0, 0, 0, 0.35);
}
.gif-hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
}
.gif-hoja .gif-selector {
  height: min(72vh, 560px);
}
.gif-hoja .gif-rejilla {
  columns: 2;
}

/* Un GIF o sticker enviado. */
.chat-gif,
.chat-sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  margin-top: 4px;
}
.chat-gif-boton {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}
.chat-gif .chat-gif-boton {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-3);
}
.chat-gif img,
.chat-sticker img {
  display: block;
  max-width: 100%;
  height: auto;
}
.chat-gif-boton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-gif-marca {
  color: var(--fg-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.chat-gif-nodisp {
  display: grid;
  place-items: center;
  min-width: 120px;
  min-height: 60px;
  max-width: 100%;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 12.5px;
}

/* ---------- Borrar canales ----------
   La consola que abre la papelera del chat: lista para marcar, con lo que
   tiene cada canal, y aparte los borrados para recuperarlos. */
.borrar-canales-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.borrar-canales-barra .chat-filtro {
  flex: 1 1 220px;
  padding: 0;
}
.borrar-canales-orden {
  display: flex;
  gap: 6px;
}
.borrar-canales-error {
  color: var(--fg-2);
}
.borrar-canales-lista,
.borrar-canales-borrados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.borrar-canales-lista {
  max-height: 46vh;
  overflow: auto;
}
.borrar-canal {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.borrar-canal:hover {
  background: var(--bg-3);
}
.borrar-canal.elegido {
  background: color-mix(in srgb, #b23c38 16%, transparent);
}
.borrar-canal.bloqueado {
  cursor: not-allowed;
  opacity: 0.62;
}
.borrar-canal input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #b23c38;
}
.borrar-canal .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.borrar-canal .nombre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.borrar-canal .nombre .ico {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
  flex: none;
}
.borrar-canal .grupo {
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-3);
  margin-left: 4px;
}
.borrar-canal .meta {
  font-size: 0.8rem;
  color: var(--fg-3);
}
.borrar-canal .meta.vacio {
  color: #e8a33d;
}
.borrar-canales-borrados {
  margin-top: 14px;
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
}
.borrar-canales-borrados summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg-2);
  padding: 4px 0 8px;
}
.borrar-canales-borrados .borrar-canal {
  cursor: default;
}
.borrar-canales-confirmar {
  margin: 10px 0;
  padding-left: 18px;
  max-height: 30vh;
  overflow: auto;
  line-height: 1.6;
}

/* ---------- Lista de chats: más legible ----------
   Los títulos de los grupos (Favoritos, General, cada proyecto…) iban en
   versalitas de 12 px muy espaciadas: se veían poco y costaba leerlos. Ahora
   van en su forma normal, más grandes y en negrita, como un título. */
.chat-list > .nav-title,
.chat-list .chat-grupo-cab {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}
.chat-list > .nav-title {
  font-size: 15.5px;
  color: var(--fg);
}
.chat-list .chat-grupo.hija .chat-grupo-cab {
  font-size: 14px;
  font-weight: 650;
}
/* Los botones de arriba de la lista (escribir en privado, nuevo canal,
   borrar canales): un 20 % más grandes. */
.chat-list > .nav-title .btn .ico {
  width: 21.6px;
  height: 21.6px;
}
/* Privado o solo avisos: detrás del nombre, pequeño y apagado. */
.chan .chan-marca {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--fg-3);
}
/* La estrella de favorito, sin cuadrado de fondo: la regla general de los
   botones pulsados ([aria-pressed="true"]) le ponía uno gris. */
.chan-fila .chan-favorito,
.chan-fila .chan-favorito:hover,
.chan-fila .chan-favorito[aria-pressed="true"]:not(.btn.primary) {
  background: transparent;
  border-color: transparent;
}
/* Y el rectángulo del nombre, un 20 % más corto: deja aire entre el nombre
   y la estrella, que ya no se tocan. */
.chan-fila.con-estrella .chan {
  flex: 0 1 calc((100% - 34px) * 0.8);
}
.chan-fila.con-estrella .chan-favorito {
  margin-left: auto;
}

/* ---------- Cabecera del canal: en orden ----------
   [i] nombre · [quién lo ve] [campana] ……… [buscar] [Videollamada] [Contenido]
   Lo que es del canal va junto a su nombre; lo que se hace en él, a la
   derecha. */
.chat-cabecera .chat-cabecera-titulo {
  flex: 0 1 auto;
}
.chat-cabecera-titulo h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-cabecera-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-cabecera-marca {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--fg-3);
}
.chat-cabecera-info {
  flex: none;
}
.chat-cabecera-canal {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}
.chat-cabecera .chat-cabecera-acciones {
  margin-left: auto;
  gap: 8px;
}
.chat-cabecera-acciones .meet-grupo {
  margin-right: 0;
}
/* La «i», quién lo ve, la campana y la lupa: un 20 % más grandes. */
.chat-cabecera .chat-herr.grande .ico {
  width: 22.8px;
  height: 22.8px;
}
.chat-cabecera .chat-herr.grande {
  min-width: 40px;
  height: 40px;
}
/* Videollamada y Contenido, gemelos: mismo alto, ancho, letra e icono. */
.chat-cabecera .btn.meet-boton,
.chat-cabecera .chat-herr.chat-contenido {
  height: 40px;
  min-width: 152px;
  padding: 0 16px;
  gap: 8px;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
}
.chat-cabecera .btn.meet-boton .ico,
.chat-cabecera .chat-contenido-icono .ico-contenido {
  width: 20px;
  height: 20px;
}
/* Si no cabe el texto, se van los dos a la vez y quedan dos botones de
   icono iguales. */
@container chatcabecera (max-width: 660px) {
  .chat-cabecera .meet-texto {
    display: none;
  }
  .chat-cabecera .btn.meet-boton,
  .chat-cabecera .chat-herr.chat-contenido {
    min-width: 44px;
    padding: 0 11px;
  }
}

/* Quién ve el canal, en su ventana. */
.chat-personas-ventana .chat-panel-nota:first-child {
  margin-top: 0;
}
.chat-personas-ventana .chat-personas {
  max-height: 56vh;
  overflow: auto;
}
.chat-personas-ventana .chat-personas li .grow {
  flex: 1;
  min-width: 0;
}

/* ---------- Tareas: cada control, una cosa y que se vea ----------
   El círculo hace la tarea; la casilla cuadrada del margen la elige; «⋯»
   abre sus acciones. Antes eran dos cuadrados iguales, uno al lado del otro
   y sin decir cuál era cuál. */
.task-row .check {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: transparent;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
}
.task-row .check .ico {
  width: 13px;
  height: 13px;
}
.task-row .check:hover:not(.done),
.task-row .check:focus-visible:not(.done) {
  border-color: var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}
.task-row .check.done {
  color: #0b2a1a;
}
/* Abierta, el círculo va vacío: el ✓ solo asoma al apuntar (los iconos en
   color no siguen el color del texto, así que se esconde el dibujo). */
.task-row .check:not(.done):not(:hover):not(:focus-visible) .ico {
  opacity: 0;
}
/* La casilla de elegir: más pequeña, cuadrada y separada del círculo. */
.task-row .task-marcar {
  padding: 4px 2px 4px 0;
  margin-right: 2px;
  cursor: pointer;
}
.task-row .task-marcar input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--teal);
}
.task-row.seleccionada {
  background: color-mix(in srgb, var(--teal) 13%, var(--bg-2));
  border-color: color-mix(in srgb, var(--teal) 60%, transparent);
}
/* «⋯»: a la vista al pasar por la fila (o siempre, con el dedo). */
.task-row .task-mas {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}
.task-row .task-mas .ico {
  width: 18px;
  height: 18px;
}
.task-row .task-mas:hover,
.task-row .task-mas:focus-visible,
.task-row .task-mas[aria-expanded="true"] {
  background: var(--bg-4);
  color: var(--fg);
}
@media (hover: hover) {
  .task-row:not(:hover):not(:focus-within) .task-mas {
    opacity: 0;
  }
}
/* Recién hecha: tachada y apagada en su sitio, con «Deshacer» a mano. */
.task-row.recien-hecha {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
}
.task-row.recien-hecha .title {
  color: var(--fg-3);
}
.task-recien-hecha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
  font-weight: 650;
}
.task-recien-hecha .ico {
  width: 12px;
  height: 12px;
}
.task-deshacer {
  margin-left: 4px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.task-deshacer:hover {
  background: var(--bg-4);
}
@media (max-width: 600px) {
  .task-row {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  }
  .task-row > .task-mas {
    grid-column: 6;
    grid-row: 1 / span 2;
  }
}

/* La línea que explica los controles, hasta que se pulsa «Entendido». */
.tareas-ayuda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-bottom: var(--e3);
  padding: 10px 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg-2);
}
.tareas-ayuda > span {
  display: block;
}
.tareas-ayuda-circulo,
.tareas-ayuda-casilla {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 7px;
}
.ayuda-dedo {
  display: none;
}
@media (hover: none) {
  .ayuda-raton {
    display: none;
  }
  .ayuda-dedo {
    display: inline;
  }
}
.tareas-ayuda .btn {
  margin-left: auto;
}
.tareas-ayuda-circulo,
.tareas-ayuda-casilla {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
}
.tareas-ayuda-casilla {
  width: 13px;
  height: 13px;
  border-width: 1.5px;
  border-radius: 3px;
}
.tareas-papelera-boton {
  color: var(--fg-2);
}

/* La barra de las elegidas: fija abajo, centrada en la zona de contenido y
   siempre a mano aunque se baje. Cada acción dice lo que hace. Mientras está,
   la tira de «Activar avisos» se aparta y el aviso emergente sube por encima
   de ella: nada la tapa. */
.acciones-grupo.flotante {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: calc(var(--sidebar) + (100vw - var(--sidebar)) / 2);
  transform: translateX(-50%);
  z-index: 120;
  margin: 0;
  width: max-content;
  max-width: calc(100vw - var(--sidebar) - 180px);
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent);
  background: color-mix(in srgb, var(--teal) 10%, var(--bg-2));
  box-shadow: var(--shadow-alta, 0 10px 30px rgba(0, 0, 0, 0.25));
}
.acciones-grupo .acciones-cuenta {
  white-space: nowrap;
}
.acciones-grupo.flotante select.input.sm {
  padding-right: 30px;
  min-width: 0;
  max-width: 132px;
}
/* Que la barra no tape las últimas filas. */
body.tareas-eligiendo .content {
  padding-bottom: calc(var(--alto-barra-grupo, 64px) + 48px);
}
body.tareas-eligiendo .tira-avisos {
  display: none;
}
body.tareas-eligiendo .toast {
  bottom: calc(var(--alto-barra-grupo, 64px) + 32px);
}
@media (max-width: 900px) {
  .acciones-grupo.flotante {
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom));
  }
  body.tareas-eligiendo .fab {
    display: none;
  }
  body.tareas-eligiendo .toast {
    right: 16px;
    bottom: calc(
      var(--tabbar) + var(--alto-barra-grupo, 64px) + 28px +
        env(safe-area-inset-bottom)
    );
  }
}
.acciones-grupo .acciones-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line-2);
}
.acciones-grupo .btn.borrar {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 55%, transparent);
}
.acciones-grupo .btn .ico {
  width: 15px;
  height: 15px;
}

/* La papelera de tareas. */
.papelera-todas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  cursor: pointer;
}
.papelera-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow: auto;
}
.papelera-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.papelera-lista li.elegida {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.papelera-fila {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.papelera-fila .grow {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.papelera-fila .hint {
  font-size: 12px;
}

/* ---------- Tareas como el menú de un juego ----------
   Las categorías son pestañas (Mis tareas, Todas y cada proyecto) con su
   número y un «!» dorado cuando dentro hay algo para ti; el tablero tiene una
   franja de color por estado; cada tarjeta lleva sus tres controles siempre
   en el mismo sitio (círculo: hecha · casilla: elegir · «⋯»: acciones), y
   abajo la barra de progreso. Todo con los colores del tema: vale en claro y
   en oscuro, y con fondo propio. */
.tareas-juego {
  --tarjeta-fondo: var(--bg-2);
  --tarjeta-fondo-hover: var(--bg-3);
  /* El oro del «!»: el mismo en claro y en oscuro, con texto oscuro encima
     (el amarillo del tema claro es casi marrón y no se leía). */
  --dorado: #f3c54d;
}
:root[data-fondo] .tareas-juego {
  --tarjeta-fondo: color-mix(
    in srgb,
    var(--bg-2) var(--fondo-bloque-nitido, 92%),
    transparent
  );
  --tarjeta-fondo-hover: color-mix(
    in srgb,
    var(--bg-3) var(--fondo-bloque-nitido, 92%),
    transparent
  );
}
.tareas-vista button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
}
.tareas-con-asistente .ico {
  color: var(--accent);
}

/* La fila de mando: buscar y filtrar. */
.tareas-mando {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.tareas-mando .filtro-texto {
  flex: 1 1 auto;
  max-width: 560px;
  min-width: 0;
}
.tareas-filtrar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tareas-filtrar.activo {
  border-color: var(--accent);
  color: var(--accent);
}
.tareas-filtrar-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.tareas-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e3);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--tarjeta-fondo);
}
.tareas-filtros .vistas-guardadas,
.tareas-filtros .filtros-tareas {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Las pestañas: esquinas en bisel, la activa encendida en cobre. */
.tareas-pestanas {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 0 var(--e3);
  padding: 14px 4px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.tareas-pestanas::-webkit-scrollbar {
  display: none;
}
.pestana {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 22px 9px 18px;
  color: var(--fg-2);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transition: color 0.15s ease;
}
/* El bisel va en el fondo (::before): así no recorta el «!» ni el globo. */
.pestana::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-3) 85%, transparent),
    color-mix(in srgb, var(--bg-2) 85%, transparent)
  );
  box-shadow: inset 0 1px 0 var(--line-2);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  transition: background 0.15s ease;
}
.pestana:hover {
  color: var(--fg);
  text-decoration: none;
}
.pestana:hover::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-3)),
    var(--bg-2)
  );
}
.pestana:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -4px;
}
.pestana .ico {
  width: 17px;
  height: 17px;
}
.pestana-color {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--fg-3);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 15%, transparent);
}
.pestana-cuenta {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--fg);
  font-size: 13px;
  text-align: center;
}
.pestana.activa {
  color: var(--fg);
  filter: drop-shadow(
    0 0 10px color-mix(in srgb, var(--accent) 40%, transparent)
  );
}
.pestana.activa::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 42%, var(--bg-3)),
    color-mix(in srgb, var(--accent) 16%, var(--bg-2))
  );
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 90%, white);
}
.pestana.activa .pestana-cuenta {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* El «!» de misión nueva: dorado, en la esquina, con un latido suave. */
.pestana-excl,
.tarea-excl,
.tareas-ayuda-excl {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dorado);
  color: #2a1d00;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 70%, transparent);
}
.tareas-ayuda-excl {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  font-size: 11px;
  vertical-align: 1px;
}
.pestana-excl {
  position: absolute;
  top: 2px;
  right: 8px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  animation: excl-latido 2.4s ease-in-out infinite;
}
.pestana.con-aviso {
  padding-right: 34px;
}
@keyframes excl-latido {
  0%,
  100% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--bg) 70%, transparent),
      0 0 0 0 color-mix(in srgb, var(--dorado) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--bg) 70%, transparent),
      0 0 0 6px color-mix(in srgb, var(--dorado) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pestana-excl {
    animation: none;
  }
}
/* El globo que dice qué hay: al pasar por la pestaña o con el foco. Se
   coloca fijo (Tasks.tsx mide la pestaña): la fila de pestañas se desplaza
   en horizontal y lo recortaría. */
.pestana-globo {
  position: fixed;
  z-index: 300;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid
    color-mix(in srgb, var(--dorado, var(--yellow)) 50%, var(--line-2));
  border-radius: 8px;
  background: var(--bg-4);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--shadow-alta);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
}

/* La lista: cada estado con su franja de color y las tarjetas en rejilla. */
.tareas-juego .task-groups {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.tarjetas-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tareas-juego .task-group {
  margin: 0;
}
.tareas-juego .grupo-cabeza,
.tablero-juego .col-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 14px;
  border-left: 4px solid var(--estado, var(--fg-3));
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--estado, var(--fg-3)) 26%, var(--bg-2)),
    color-mix(in srgb, var(--estado, var(--fg-3)) 6%, var(--bg-2))
  );
  color: var(--fg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}
.grupo-cuenta {
  color: var(--estado, var(--fg-3));
  font-weight: 700;
}
.tareas-juego .estado-blocked {
  --estado: var(--red);
}
.tareas-juego .estado-todo {
  --estado: var(--fg-3);
}
.tareas-juego .estado-doing {
  --estado: var(--blue);
}
.tareas-juego .estado-review {
  --estado: var(--violet);
}
.tareas-juego .estado-retake {
  --estado: var(--orange);
}
.tareas-juego .estado-deferred {
  --estado: var(--yellow);
}
.tareas-juego .estado-done {
  --estado: var(--green);
}
.tareas-juego .estado-cancelled {
  --estado: var(--fg-3);
}
.tareas-juego .tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.tareas-juego .task-arbol-bloque .tarjetas,
.tareas-juego .task-arbol-bloque {
  margin-bottom: 10px;
}

/* La tarjeta. */
:root .tareas-juego .task-row.task-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 12px 12px 12px 14px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tarjeta-fondo);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 4%, transparent);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}
:root .tareas-juego .task-row.task-tarjeta:hover {
  background: var(--tarjeta-fondo-hover);
  border-color: var(--line-2);
}
:root .tareas-juego .task-row.task-tarjeta.seleccionada {
  border-color: var(--teal);
  box-shadow:
    0 0 0 1px var(--teal),
    0 0 18px color-mix(in srgb, var(--teal) 30%, transparent);
  background: color-mix(in srgb, var(--teal) 9%, var(--tarjeta-fondo));
}
:root .tareas-juego .task-row.task-tarjeta.recien-hecha {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
}
.task-tarjeta .tarjeta-cabeza {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.task-tarjeta .tarjeta-cabeza .check {
  margin-top: 1px;
}
.task-tarjeta .tarjeta-cabeza .title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.task-tarjeta .tarjeta-cabeza .title .kbd {
  margin-right: 6px;
}
.task-tarjeta .tarea-excl {
  margin-top: 1px;
}
.task-tarjeta .task-marcar {
  flex: none;
  margin: 0;
  padding: 3px 2px;
}
.task-tarjeta .task-marcar input {
  width: 18px;
  height: 18px;
}
.task-tarjeta .task-mas {
  margin: -4px -4px 0 0;
}
/* En la tarjeta, «⋯» siempre a la vista: es su sitio fijo. */
@media (hover: hover) {
  .task-tarjeta.task-row:not(:hover):not(:focus-within) .task-mas {
    opacity: 0.55;
  }
}
.task-tarjeta .tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  /* Debajo del título, alineado con él (el círculo queda a su izquierda). */
  padding-left: 32px;
  font-size: 13px;
  color: var(--fg-3);
}
.tarjeta-nueva {
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--dorado);
  color: #2a1d00;
  font-size: 12px;
  font-weight: 700;
}
.tarjeta-donde {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
}
.tarjeta-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.tarjeta-pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
}
.tarjeta-pie .grow {
  flex: 1;
}
.tarjeta-dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-2);
}
.tarjeta-dato .ico {
  width: 15px;
  height: 15px;
}
.tarjeta-dato.due.late {
  color: var(--red);
  font-weight: 650;
}
.tarjeta-dato.due.soon {
  color: var(--orange);
  font-weight: 650;
}
.prio-chip {
  --prio: var(--blue);
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--prio) 55%, transparent);
  background: color-mix(in srgb, var(--prio) 18%, transparent);
  color: var(--prio);
  font-size: 12.5px;
  font-weight: 650;
}
.prio-chip.urgent {
  --prio: var(--red);
  background: color-mix(in srgb, var(--red) 30%, transparent);
}
.prio-chip.high {
  --prio: var(--orange);
}
.prio-chip.low {
  --prio: var(--teal);
}
.tarjeta-origen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-3);
  font-size: 12.5px;
}
.tarjeta-origen .ico {
  width: 15px;
  height: 15px;
}
.task-tarjeta .avatar.sm {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.task-tarjeta.para-ti {
  border-color: color-mix(in srgb, var(--dorado) 45%, var(--line));
}

/* El tablero: columnas con su franja; las hechas, plegadas al final. */
.tablero-juego.board {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tablero-juego > .col {
  flex: 1 1 280px;
  min-width: 270px;
}
.tablero-juego .col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 320px;
  padding: 0 0 10px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--estado, var(--fg-3));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 40%, var(--tarjeta-fondo));
}
.tablero-juego .col .col-cabeza {
  justify-content: flex-start;
  font-size: 15px;
  margin: 0;
  border-left: 0;
  border-radius: 0;
  padding: 11px 14px;
}
.tablero-juego .col-plegar {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}
.tablero-juego .col-plegar:hover {
  background: var(--bg-4);
  color: var(--fg);
}
.tablero-juego .col-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.tablero-juego .task-row.task-tarjeta .tarjeta-cuerpo {
  padding-left: 0;
}
.col-anadir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  cursor: pointer;
}
.col-anadir:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tablero-juego > .col-plegada {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  min-height: 320px;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 14px 0;
  color: var(--fg-2);
  font: inherit;
  cursor: pointer;
}
.tablero-juego .col-plegada:hover {
  color: var(--fg);
  border-color: var(--green);
}
.col-plegada-nombre {
  font-weight: 700;
  color: var(--green);
}
.col-plegada-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13.5px;
}

/* La barra de progreso de la pestaña: como la de experiencia de un juego. */
.tareas-progreso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: var(--e4);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tarjeta-fondo);
  font-size: 14px;
}
.tareas-progreso-barra {
  flex: 1 1 220px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.tareas-progreso-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 60%, transparent),
    var(--accent)
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: width 0.4s ease;
}
.tareas-progreso-resumen {
  color: var(--fg-2);
}

/* La barra de las elegidas, con el mismo aire: borde verde pátina y las dos
   acciones principales con color propio. */
/* En el escritorio, en una sola línea: los desplegables ceden ancho antes
   que mandar «Quitar selección» a otra fila. */
@media (min-width: 1100px) {
  .tareas-juego .acciones-grupo.flotante {
    flex-wrap: nowrap;
    max-width: calc(100vw - var(--sidebar) - 130px);
  }
  .tareas-juego .acciones-grupo.flotante select.input.sm {
    flex: 0 1 132px;
    min-width: 92px;
  }
  .tareas-juego .acciones-grupo.flotante .btn {
    flex: none;
    white-space: nowrap;
  }
}
.tareas-juego .acciones-grupo.flotante {
  border-width: 1.5px;
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--bg-2));
}

/* Con el dedo: la casilla solo cuando ya hay alguna elegida (se elige la
   primera desde «⋯» o manteniendo pulsado), como en el móvil de siempre. */
@media (pointer: coarse) {
  .tareas-juego:not(.con-seleccion) .task-tarjeta .task-marcar {
    display: none;
  }
}
@media (max-width: 600px) {
  .tareas-pestanas {
    margin-inline: -16px;
    padding-inline: 12px;
  }
  .pestana {
    min-height: 42px;
    padding: 8px 16px 8px 14px;
  }
  .pestana.con-aviso {
    padding-right: 30px;
  }
  .tareas-juego .tarjetas {
    grid-template-columns: 1fr;
  }
  .task-tarjeta .tarjeta-cuerpo {
    padding-left: 32px;
  }
  .tareas-progreso {
    padding: 12px 14px;
  }
}
.tareas-filtros-mas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
/* La barra de las elegidas en el teléfono: lo principal a la vista (cuántas,
   «Marcar hechas», «A la papelera») y el resto detrás de «Más». */
@media (max-width: 900px) {
  .tareas-juego .acciones-grupo.flotante {
    gap: 8px;
    padding: 10px 12px;
  }
  .tareas-juego .acciones-grupo.flotante:not(.con-mas) > select,
  .tareas-juego .acciones-grupo.flotante:not(.con-mas) > .acciones-sep,
  .tareas-juego .acciones-grupo.flotante:not(.con-mas) > .acciones-extra {
    display: none;
  }
  .tareas-juego .acciones-grupo.flotante .acciones-cuenta {
    flex: 1 1 calc(100% - 60px);
  }
  .tareas-juego .acciones-grupo.flotante > .btn:not(.acciones-quitar) {
    flex: 1 1 auto;
    justify-content: center;
  }
  .tareas-juego .acciones-grupo.flotante .acciones-quitar {
    order: -1;
    margin-left: auto;
  }
  .tareas-juego .acciones-grupo.flotante .acciones-cuenta {
    order: -2;
  }
  .acciones-quitar-texto {
    display: none;
  }
}

/* ---------- Inicio como la pantalla de partida de un juego ----------
   Todo cabe en la pantalla, sin bajar: la página tiene el alto de la
   ventana y los paneles se reparten lo que queda. Cada lista enseña lo que
   cabe en su panel y dice «y N más» (ListaQueCabe); no hay nada escondido ni
   ruedas dentro de ruedas. Arriba «Para ti ahora» (borde dorado: lo que
   lleva «!» en Tareas y las menciones sin leer) y los contadores, en
   pastillas pequeñas; debajo, dos filas de tres paneles. Colores del tema:
   vale en claro, en oscuro y con fondo propio. */
.content.inicio.inicio-juego {
  --dorado: #f3c54d;
  /* El panel donde vive ya tiene el alto de la ventana (menos la barra de
     arriba y la de pestañas o la de abajo): Inicio ocupa justo ese hueco. */
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-height: 0;
  padding: 12px 16px;
  overflow: hidden;
}
.inicio-juego .hero {
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.inicio-juego .hero-texto {
  align-items: baseline;
  gap: 12px;
}
.inicio-juego .hero h1 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.inicio-juego .hero .date {
  color: var(--fg-3);
  font-size: 13px;
}
.inicio-juego .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inicio-asistente .ico {
  color: var(--accent);
}

/* Para ti ahora: dos columnas de líneas en el escritorio. */
.para-ti {
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 104px;
  min-height: 0;
  padding: 6px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--dorado) 55%, var(--line));
  border-left: 4px solid var(--dorado);
  border-radius: 6px 10px 10px 6px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--dorado) 9%, var(--bg-2)),
    var(--bg-2)
  );
}
.para-ti h2 {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dorado) 75%, var(--fg));
}
:root[data-theme="light"] .para-ti h2 {
  color: #7a5600;
}
.para-ti-excl {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--dorado);
  color: #2a1d00;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.para-ti-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  align-content: start;
}
.para-ti-fila {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.para-ti-fila:hover {
  background: color-mix(in srgb, var(--dorado) 7%, transparent);
}
.para-ti-fila > .ico,
.para-ti-arroba {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--fg-3);
}
.para-ti-arroba {
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}
.para-ti-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.para-ti-fila .peligro {
  color: var(--red);
}
.para-ti-boton {
  flex: none;
  padding: 1px 9px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 650;
}
.para-ti-fila:hover .para-ti-boton {
  border-color: var(--accent);
  color: var(--accent);
}
.para-ti-vacio {
  margin: 2px 0 4px;
  color: var(--fg-3);
  font-size: 13px;
}

/* Contadores: pastillas pequeñas en una línea. */
.inicio-juego .stat-row {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.content.inicio-juego .stat {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.inicio-juego .stat::after,
.inicio-juego .stat:nth-child(n)::after {
  display: none;
}
.inicio-juego .stat b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}
.inicio-juego .stat span {
  font-size: 12.5px;
}
.inicio-juego .stat.urgente b,
.inicio-juego .stat.urgente span {
  color: var(--red);
}

/* Los paneles: dos filas de tres que se reparten el alto. */
.inicio-paneles {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "agenda tareas pila1"
    "actividad archivos pila2";
  gap: 10px;
}
.zona-agenda {
  grid-area: agenda;
}
.zona-tareas {
  grid-area: tareas;
}
.zona-pila1 {
  grid-area: pila1;
}
.zona-actividad {
  grid-area: actividad;
}
.zona-archivos {
  grid-area: archivos;
}
.zona-pila2 {
  grid-area: pila2;
}
.inicio-pila {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.inicio-pila > .inicio-panel {
  flex: 1 1 0;
}
.inicio-pila > .inicio-sala,
.inicio-pila > .inicio-equipo-panel {
  flex: 0 0 auto;
}
.content.inicio-juego .inicio-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0 12px 8px;
  border-radius: 10px;
  overflow: hidden;
}
.inicio-cabeza {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -12px 4px;
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--line);
}
.inicio-cabeza h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
  font-size: 14px;
  font-weight: 750;
}
.inicio-cabeza h2 .ico {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
}
.inicio-cabeza a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* «+2»: lo que no cabe en el panel, junto a su enlace. */
.inicio-cabeza-mas {
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 20%, transparent);
  font-size: 11.5px;
  font-weight: 750;
}
.para-ti-mas {
  margin-left: auto;
  color: var(--teal);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.inicio-vacio {
  margin: 4px 0;
  color: var(--fg-3);
  font-size: 13px;
}
.lista-que-cabe {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lista-que-cabe-mas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  display: flex;
  align-items: center;
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 600;
}

/* Agenda: una línea por evento. */
.inicio-dia {
  margin: 4px 0 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.inicio-evento {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.inicio-evento:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.inicio-evento-hora {
  flex: none;
  width: 44px;
  font-weight: 650;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.inicio-evento-barra {
  flex: none;
  width: 3px;
  height: 18px;
  border-radius: 2px;
}
.inicio-evento-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inicio-evento .badge {
  flex: none;
  font-size: 11px;
}

/* Mis tareas: una línea por tarea, con su círculo para hacerla. */
.content.inicio-juego .inicio-tareas .task-row,
:root[data-fondo] .content.inicio-juego .inicio-tareas .task-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  content-visibility: visible;
}
.content.inicio-juego .inicio-tareas .task-row:hover {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.content.inicio-juego .inicio-tareas .task-row > .prio {
  align-self: center;
  height: 18px;
}
.content.inicio-juego .inicio-tareas .task-row .grow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.content.inicio-juego .inicio-tareas .task-row .title {
  /* El título cede lo último: primero se acortan proyecto y bloque. */
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}
.content.inicio-juego .inicio-tareas .task-row .meta {
  flex: 1 100 auto;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
.content.inicio-juego .inicio-tareas .task-row .avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}

/* Actividad: una línea por cosa. */
.content.inicio-juego .inicio-actividad .act {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 2px;
}
.content.inicio-juego .inicio-actividad .act .avatar {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 8.5px;
}
.content.inicio-juego .inicio-actividad .act .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

/* Archivos: miniaturas pequeñas. */
.content.inicio-juego .inicio-archivos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
}

/* La Sala, en una línea. */
.inicio-sala {
  padding-top: 8px;
}
.inicio-sala-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.inicio-sala-fila > .ico {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.inicio-sala-caras {
  position: relative;
  display: inline-flex;
}
.inicio-sala-caras .avatar + .avatar {
  margin-left: -7px;
}
.inicio-sala-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-2);
}
.punto-verde {
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-2);
}

/* Conversaciones con algo sin leer. */
.inicio-conversaciones a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 2px;
  color: var(--fg);
  font-size: 13.5px;
}
.inicio-conversaciones a:hover {
  color: var(--accent);
  text-decoration: none;
}
.inicio-conversaciones .ico {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--fg-3);
}
.inicio-conversaciones .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inicio-pastilla {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
}

/* El progreso de cada proyecto: barras de experiencia. */
.inicio-progreso > a {
  /* Una línea por proyecto: nombre, barra y cifra. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(40px, 34%) auto;
  align-items: center;
  gap: 8px;
  height: 26px;
  color: var(--fg);
  font-size: 13px;
}
.inicio-progreso > a.lista-que-cabe-mas {
  display: flex;
  height: 22px;
}
.inicio-progreso > a:hover {
  text-decoration: none;
}
.inicio-progreso > a:hover .inicio-progreso-nombre {
  color: var(--accent);
}
.inicio-progreso-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inicio-progreso-cifra {
  grid-column: 3;
  grid-row: 1;
  color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
}
.inicio-progreso-barra {
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  overflow: hidden;
}
.inicio-progreso-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

/* Equipo: caras pequeñas con punto verde si está conectado. */
.content.inicio-juego .inicio-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Una o dos filas de caras; las que no caben las cuenta el pie. */
  max-height: 62px;
  overflow: hidden;
}
.inicio-persona {
  position: relative;
  display: inline-flex;
}
.inicio-persona.conectada::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.inicio-equipo-pie {
  flex: none;
  margin: 4px 0 0;
  color: var(--fg-3);
  font-size: 12px;
}

/* En el teléfono la app deja sitio bajo cada página para el botón flotante
   (para que la última fila de una lista no quede debajo). Inicio no baja:
   ese hueco se quedaba vacío, así que aquí solo se reserva la barra. */
@media (max-width: 900px) {
  .main:has(.panel.enfocado > .content.inicio-juego) {
    padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  }
}
/* Tableta y móvil: dos columnas, el mismo principio (todo a la vista). */
@media (max-width: 1024px) {
  .inicio-paneles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "agenda tareas"
      "pila1 pila2"
      "actividad archivos";
  }
}
@media (max-width: 600px) {
  .content.inicio.inicio-juego {
    gap: 7px;
    padding: 8px 10px;
  }
  .inicio-juego .hero h1 {
    font-size: 19px;
  }
  .inicio-juego .hero-texto {
    flex-direction: row;
    gap: 8px;
  }
  /* En el teléfono la fecha ya está en la barra de estado: el saludo y
     su botón caben así en una línea. */
  .inicio-juego .hero .date {
    display: none;
  }
  .content.inicio.inicio-juego .hero {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .content.inicio.inicio-juego .hero-actions {
    width: auto;
    margin-left: auto;
  }
  .content.inicio.inicio-juego .hero-actions .rodaje {
    width: auto;
    min-height: 0;
    padding: 3px 8px;
    font-size: 11.5px;
  }
  .para-ti {
    max-height: 142px;
    padding: 5px 9px;
  }
  .para-ti-lista {
    grid-template-columns: minmax(0, 1fr);
  }
  .para-ti-fila {
    height: 25px;
    font-size: 12.5px;
    gap: 7px;
  }
  .para-ti-boton {
    padding: 0 6px;
    font-size: 11px;
  }
  .content.inicio.inicio-juego .stat-row {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .content.inicio-juego .stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 7px;
  }
  .inicio-juego .stat b {
    font-size: 16px;
  }
  .inicio-juego .stat span {
    font-size: 10px;
    line-height: 1.15;
  }
  .inicio-paneles {
    gap: 7px;
  }
  .inicio-pila {
    gap: 7px;
  }
  .content.inicio-juego .inicio-panel {
    padding: 0 8px 6px;
  }
  .inicio-cabeza {
    margin: 0 -8px 2px;
    padding: 5px 8px 4px;
  }
  .inicio-cabeza h2 {
    font-size: 12.5px;
    padding-left: 6px;
  }
  .inicio-cabeza h2 .ico {
    display: none;
  }
  .inicio-cabeza a {
    font-size: 11px;
  }
  .inicio-evento,
  .inicio-conversaciones a,
  .content.inicio-juego .inicio-actividad .act {
    height: 24px;
    font-size: 12px;
  }
  .inicio-evento-hora {
    width: 34px;
    font-size: 11px;
  }
  .inicio-evento .badge {
    display: none;
  }
  .content.inicio-juego .inicio-tareas .task-row,
  :root[data-fondo] .content.inicio-juego .inicio-tareas .task-row {
    height: 28px;
    gap: 6px;
  }
  .content.inicio-juego .inicio-tareas .task-row .title {
    font-size: 12px;
  }
  .content.inicio-juego .inicio-tareas .task-row .meta,
  .content.inicio-juego .inicio-tareas .task-row .avatar,
  .content.inicio-juego .inicio-tareas .task-row .task-mas,
  .content.inicio-juego .inicio-tareas .task-row > .prio {
    display: none;
  }
  .content.inicio-juego .inicio-tareas .task-row .check {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
  .content.inicio-juego .inicio-actividad .act .avatar {
    display: none;
  }
  .content.inicio-juego .inicio-actividad .act .t {
    font-size: 11.5px;
  }
  .content.inicio-juego .inicio-archivos {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 5px;
  }
  .inicio-sala-fila {
    font-size: 11.5px;
    gap: 5px;
  }
  .inicio-sala-fila .btn {
    padding: 2px 8px;
    font-size: 11px;
  }
  .inicio-progreso > a {
    height: 22px;
    gap: 5px;
    font-size: 11.5px;
  }
  .inicio-progreso-cifra {
    font-size: 10.5px;
  }
  /* Equipo, en el teléfono: el recuento en una línea (las caras, en la
     sección Equipo). */
  .content.inicio-juego .inicio-equipo {
    display: none;
  }
  .inicio-equipo-pie {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content.inicio-juego .inicio-equipo .avatar {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
  .inicio-equipo-pie {
    font-size: 10.5px;
  }
}
/* Una ventana muy baja (el móvil tumbado) no da para todo: ahí sí baja. */
@media (max-height: 520px) {
  .content.inicio.inicio-juego {
    flex: none;
    overflow: visible;
  }
  .inicio-paneles {
    grid-template-rows: none;
    grid-auto-rows: 260px;
  }
}

/* Cuando la plataforma no arranca: qué hacer, a la vista. */
.arranque-salidas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.arranque-salidas .hint {
  margin: 0;
  font-size: 12.5px;
}

/* ---------- Salas del chat: «+» en cada sala, la pantalla Salas y el aviso de acceso ---------- */
/* El «+» de una sala: discreto hasta que se pasa por la cabecera. */
.chat-grupo-mas {
  opacity: 0.55;
}
.chat-grupo-cab:hover .chat-grupo-mas,
.chat-grupo-mas:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .chat-grupo-mas {
    opacity: 1;
  }
}
/* Quién gana y quién pierde acceso: antes de guardar, siempre a la vista. */
.aviso-acceso {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  font-size: 14px;
}
.aviso-acceso p {
  margin: 0;
}
.aviso-acceso p + p {
  margin-top: 6px;
}
.aviso-acceso .pierden b {
  color: var(--red);
}
.aviso-acceso .ganan b {
  color: var(--green);
}
.aviso-acceso.igual {
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  color: var(--fg-2);
}
/* Fusionar un proyecto en otro: el ensayo, antes de confirmar. */
.fusion-ensayo h4 {
  margin: 16px 0 6px;
  font-size: 14px;
}
.fusion-ensayo > p {
  margin: 0;
}
.fusion-lista {
  margin: 0;
  padding-left: 20px;
}
.fusion-lista li + li {
  margin-top: 4px;
}
.fusion-bloqueos {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.fusion-bloqueos ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.fusion-ensayo .aviso-acceso .ganan {
  color: var(--green);
}
.fusion-ensayo .aviso-acceso .pierden {
  color: var(--red);
}
.fusion-hechas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fusion-hechas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.fusion-hechas li + li {
  border-top: 1px solid var(--line);
}
.salas-gestion > .hint:first-child {
  margin-bottom: 12px;
}
.salas-lista {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.sala-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.sala-fila > .grow {
  flex: 1;
  min-width: 0;
}
.sala-fila .hint {
  font-size: 13px;
}
.sala-orden {
  display: flex;
  flex-direction: column;
}
.sala-canales {
  margin-left: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.salas-lista.archivadas b {
  color: var(--fg-2);
}
.salas-titulo {
  margin: 18px 0 6px;
  font-size: 14px;
}
.salas-registro {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
}
.salas-registro li + li {
  margin-top: 4px;
}
.sala-check {
  gap: 6px;
  min-height: 36px;
}
.sala-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 2px 0 8px;
}
@media (max-width: 600px) {
  .sala-fila {
    flex-wrap: wrap;
  }
  .sala-fila .grow {
    flex-basis: calc(100% - 48px);
  }
}
/* Una línea del sistema en el canal («Alex movió este canal…»). */
.chat-msg.sistema {
  display: flex;
  justify-content: center;
  padding: 6px 12px;
}
.chat-sistema-linea {
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-2) 10%, transparent);
  color: var(--fg-2);
  font-size: 13px;
  text-align: center;
}
/* La tira de «Activar avisos» va por encima de todo (z-index 150) y tapaba
   el pie de las ventanas: mientras hay una abierta, no sale. */
body:has(.overlay) .tira-avisos {
  display: none;
}
/* La llamada a la Sala creativa, lejos de Enviar: al extremo derecho de la
   barra de escribir. Pegada a Enviar se pulsaba sin querer. Siempre queda al
   menos un hueco de ~40 px entre los dos, también en el móvil. */
.chat-composer-barra:has(.sala-llamar) > .chat-enviar {
  margin-right: 28px;
}
.chat-composer-barra > .sala-separador {
  margin-left: auto;
}
@media (max-width: 700px) {
  .chat-composer-barra:has(.sala-llamar) > .chat-enviar {
    margin-right: 22px;
  }
}
@container chatmain (max-width: 640px) {
  .chat-composer-barra:has(.sala-llamar) > .chat-enviar {
    margin-right: 22px;
  }
}

/* ---------- El chat que acompaña (components/ChatFlotante.tsx) ----------
   Al salir del Chat con una conversación abierta, se queda aquí, abajo a la
   derecha: más grande que la ventanita de la Sala, para poder hablar de
   verdad. Encima de la ventana de redactar (45) y por debajo del asistente
   (47), que se aparta de ella; con la de redactar abierta, se pone a su
   izquierda. */
.chat-acompana {
  position: fixed;
  right: 24px;
  bottom: 16px;
  z-index: 46;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - var(--topbar) - 40px));
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: var(--shadow-alta);
  animation: chat-aparecer 0.14s ease-out;
}
body:has(.mail-redactor) .chat-acompana {
  right: calc(min(620px, 100vw - 32px) + 40px);
}
.chat-acompana.plegado {
  height: auto;
}
.chat-acompana-cabeza {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.chat-acompana.plegado .chat-acompana-cabeza {
  border-bottom: 0;
}
.chat-acompana-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.chat-acompana-titulo:hover {
  background: var(--bg-4);
}
.chat-acompana-sinleer {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  text-align: center;
}
.chat-acompana.plegado .chat-acompana-plegar .ico {
  transform: rotate(180deg);
}
.chat-acompana-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* El chat en pequeño: ocupa la caja entera y sin márgenes de página. */
.chat-canal.compacto {
  flex: 1;
  min-height: 0;
  height: 100%;
}
.chat-canal.compacto .chat-composer-ayuda,
.chat-canal.compacto .chat-composer-formato,
.chat-canal.compacto .chat-composer-formato + .chat-composer-sep {
  display: none;
}
.chat-canal.compacto .chat-composer-barra {
  flex-wrap: wrap;
  row-gap: 4px;
}
.chat-canal.compacto .chat-composer-barra:has(.sala-llamar) > .chat-enviar {
  margin-right: 12px;
}

/* ---------- La conversación de la ventana flotante (widget) ----------
   Con el chat de la plataforma dentro (widget/ConversacionReal.tsx): ocupa
   el alto que queda, sin el desplazamiento de la ventana, que ya lo lleva la
   lista de mensajes. */
.w-main:has(.w-chat-real) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.w-chat-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.w-chat-cabeza .w-back {
  margin: 0;
}
.w-chat-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w-chat-real {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
  border-top: 1px solid var(--line);
}

/* ---------- sala privada (dentro de un chat privado) ----------
   La misma pastilla que la Sala creativa (megáfono, radio, peso), en verde
   azulado y con un candado pequeño: se ve que es otra cosa, solo para los
   dos de la conversación. */
:root {
  --privada-fondo: #d8f1ea;
  --privada-fondo-2: #c6eadf;
  --privada-borde: #4fae97;
  --privada-borde-2: #2f8f78;
  --privada-tinta: #0f4a3e;
  --privada-boton: #1f7a65;
}
.sala-llamar.sala-privada-boton {
  background: var(--privada-fondo);
  border-color: var(--privada-borde);
  color: var(--privada-tinta);
}
.sala-llamar.sala-privada-boton:hover:not(:disabled) {
  background: var(--privada-fondo-2);
  border-color: var(--privada-borde-2);
}
/* Con la otra persona dentro: que se note desde lejos. */
.sala-llamar.sala-privada-boton.con-gente {
  border-color: var(--privada-boton);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--privada-borde) 35%, transparent);
}
.sala-llamar.sala-privada-boton.dentro {
  background: var(--privada-boton);
  border-color: var(--privada-boton);
  color: #fff;
  cursor: default;
}
.sala-privada-icono {
  position: relative;
  display: inline-flex;
  flex: none;
}
.sala-privada-candado {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 13px;
  height: 13px;
  padding: 2px;
  border-radius: 50%;
  background: var(--privada-tinta);
  color: #fff;
}
.sala-privada-boton.dentro .sala-privada-candado {
  background: #fff;
  color: var(--privada-boton);
}

/* La barra de arriba del chat privado. */
.sala-privada-barra {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--privada-fondo) 55%, var(--bg-2));
  color: var(--fg);
}
.sala-privada-barra.fuera {
  padding: 6px 16px;
}
.sala-privada-titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--privada-tinta);
  white-space: nowrap;
}
:root[data-theme="dark"] .sala-privada-titulo {
  color: #9fe3d1;
}
.sala-privada-titulo .ico {
  width: 15px;
  height: 15px;
}
.sala-privada-quien {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.sala-privada-quien li {
  display: inline-flex;
  border-radius: 50%;
}
/* Quién habla (también tú): un anillo verde, como en la Sala creativa,
   con un borde claro para que se vea sobre el verde de la barra. */
.sala-privada-quien li.habla {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1f9d6a;
}
.sala-privada-quien li.sala-privada-estado {
  border-radius: 0;
  padding-left: 4px;
  font-size: 13px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sala-privada-reloj {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--fg-2);
}
.sala-privada-barra .sala-controles {
  margin-left: auto;
}
.sala-privada-error {
  margin: 6px 16px;
}
.sala-privada-ajustes {
  flex: none;
  padding: 8px 16px;
}
.sala-privada-ajustes .sala-ajustes {
  max-width: 420px;
  margin-left: auto;
}

/* Arriba el vídeo o la pantalla; el alto lo pone la línea. */
.sala-privada-video {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, #000 82%, var(--bg-2));
}
.sala-privada-video .sala-pantalla {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.sala-privada-video .sala-pantalla video {
  flex: 1;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}
.sala-privada-video .sala-personas.tira {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-width: 140px;
  max-width: 34%;
}
.sala-privada-video .sala-pantalla ~ .sala-personas.tira {
  max-width: 180px;
}
/* Sin pantalla, las cámaras ocupan todo el panel. */
.sala-privada-video > .sala-personas.tira:only-child {
  flex: 1;
  flex-direction: row;
  max-width: none;
  overflow-x: auto;
}
.sala-privada-video .sala-persona {
  min-height: 0;
}
.sala-privada-video > .sala-personas.tira:only-child .sala-persona {
  flex: 1 1 0;
  height: 100%;
}
.sala-privada-video .sala-persona video {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
}

/* La línea que se arrastra: fina a la vista, gruesa para el dedo. */
.sala-privada-divisor {
  flex: none;
  position: relative;
  height: 12px;
  margin: -4px 0;
  z-index: 2;
  cursor: row-resize;
  touch-action: none;
  display: grid;
  place-items: center;
  background: transparent;
}
.sala-privada-divisor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
}
.sala-privada-asa {
  position: relative;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--fg-3, #8a8a8a);
  opacity: 0.7;
}
.sala-privada-divisor:hover .sala-privada-asa,
.sala-privada-divisor:focus-visible .sala-privada-asa,
.sala-privada-divisor:active .sala-privada-asa {
  opacity: 1;
  background: var(--privada-boton);
}
.sala-privada-divisor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .sala-privada-divisor {
    height: 24px;
    margin: -10px 0;
  }
  .sala-privada-asa {
    width: 56px;
    height: 6px;
  }
}

/* La tarjeta del chat: «Ana ha abierto la sala privada · Entrar». */
.sala-privada-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 10px 12px 10px 14px;
  border: 1.5px solid var(--privada-borde);
  border-radius: 14px;
  background: var(--privada-fondo);
  color: var(--privada-tinta);
}
.sala-privada-tarjeta-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.sala-privada-tarjeta-texto small {
  color: color-mix(in srgb, var(--privada-tinta) 75%, transparent);
}
.sala-privada-tarjeta .btn.primary {
  background: var(--privada-boton);
  border-color: var(--privada-boton);
  color: #fff;
}

/* En el móvil: la barra en dos filas (quién arriba, botones abajo). */
@media (max-width: 700px) {
  .sala-privada-barra {
    padding: 6px 10px;
    gap: 6px 10px;
  }
  .sala-privada-barra .sala-controles {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .sala-privada-video {
    padding: 6px;
    flex-direction: column;
  }
  .sala-privada-video .sala-personas.tira {
    flex-direction: row;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
  }
  .sala-privada-video .sala-pantalla ~ .sala-personas.tira {
    max-width: none;
    max-height: 30%;
  }
}
/* Los avisos de la sala (micro recuperado, «Pasando a vídeo…», el de
   «sigues ahí»), discretos debajo de la barra: sin el formato grande del
   aviso de llamada, que comparte nombre de clase. */
.sala-privada-avisos:empty {
  display: none;
}
.sala-privada-avisos {
  flex: none;
  display: grid;
  gap: 6px;
  padding: 6px 16px 0;
}
.sala-privada-avisos .sala-aviso {
  margin: 0;
  max-width: none;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--yellow) 18%, var(--bg-2));
  color: var(--fg);
  box-shadow: none;
  animation: none;
  font-size: 13px;
}
/* Con un fondo de imagen, el halo de las letras sobra en lo que ya tiene
   su propio fondo. */
:root[data-fondo][data-fondo-halo]
  .chat-main
  :is(.sala-privada-tarjeta, .sala-privada-barra, .sala-privada-avisos) {
  text-shadow: none;
}
/* En el teléfono, la barra de la sala privada sí lleva cámara y pantalla
   (es la barra de la propia sala, no la que acompaña por la plataforma). */
@media (max-width: 520px) {
  .sala-privada-barra .sala-controles.compacto .btn.icon:nth-child(2),
  .sala-privada-barra .sala-controles.compacto .btn.icon:nth-child(3) {
    display: inline-flex;
  }
}
/* «Sala privada» en la ficha de una persona: el verde azulado de la sala
   privada, para que se distinga de los demás botones. */
.ficha-perfil-botones .btn.ficha-sala-privada {
  background: var(--privada-fondo);
  border-color: var(--privada-borde);
  color: var(--privada-tinta);
}
.ficha-perfil-botones .btn.ficha-sala-privada:hover:not(:disabled) {
  background: var(--privada-fondo-2);
  border-color: var(--privada-borde-2);
}
:root[data-fondo][data-fondo-halo] .ficha-sala-privada {
  text-shadow: none;
}


/* ---------- Ventana flotante (entrega de Astra) ---------- */
/* Cargar también en el DOCUMENTO PiP. La anfitriona proporciona los 15 tokens.
   Sin colores de paleta locales: sirve para los dos temas y las cinco paletas. */
.w-widget {
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  container-type: inline-size;
  isolation: isolate;
}
.w-widget *, .w-widget *::before, .w-widget *::after { box-sizing: border-box; }
.w-widget :where(button, input, select, textarea) { font: inherit; }
.w-widget button { cursor: pointer; touch-action: manipulation; }
.w-widget button:disabled { cursor: not-allowed; color: var(--fg-3); background: var(--bg-3); border-color: var(--line); }
.w-widget :where(button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.w-widget :where(h2, h3, p) { margin: 0; }
.w-widget :where(h2, h3, p, span, strong, dd, button) { overflow-wrap: anywhere; }
.w-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 53px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.w-brand { display: flex; align-items: center; gap: 9px; border: 0; background: none; color: var(--fg); padding: 2px 0; text-align: left; }
.w-brand-mark { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.w-brand-mark > span { color: var(--accent); margin-left: 2px; }
.w-brand-name { font-size: 8px; letter-spacing: 1.6px; font-weight: 750; line-height: 1.25; }
.w-tools { display: flex; gap: 4px; align-items: center; }
.w-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; }
.w-icon svg { width: 100%; height: 100%; display: block; }
.w-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid transparent; border-radius: 8px; color: var(--fg-2); background: transparent; padding: 5px; }
.w-icon-btn:hover { background: var(--bg-3); color: var(--fg); }
.w-icon-btn[aria-pressed="true"] { background: var(--bg-3); color: var(--accent); border-color: var(--line-2); }
.w-mute-slash { position: absolute; width: 23px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.w-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex-shrink: 0; padding: 0 10px; border-bottom: 1px solid var(--line); gap: 2px; }
.w-nav-btn { white-space: nowrap; overflow-wrap: normal; display: flex; gap: 5px; align-items: center; justify-content: center; min-width: 0; min-height: 39px; border: 0; border-bottom: 2px solid transparent; color: var(--fg-2); background: transparent; padding: 7px 2px; font-size: 12px; font-weight: 600; }
.w-nav-btn[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.w-nav-btn:hover { background: var(--bg-2); }
.w-count { font-size: 10px; font-variant-numeric: tabular-nums; padding: 0 4px; border-radius: 4px; color: var(--fg-2); background: var(--bg-3); }
.w-main { flex: 1; min-height: 0; min-width: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); scroll-padding: 12px; }
.w-section-head { margin-bottom: 14px; }
.w-section-head h2 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.6px; width: fit-content; max-width: 100%; }
.w-section-head p { color: var(--fg-2); font-size: 12px; margin-top: 4px; }
.w-now-grid, .w-card-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.w-card { min-width: 0; padding: 13px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.w-card h3 { font-size: 15px; line-height: 1.35; font-weight: 650; letter-spacing: -.2px; margin-top: 7px; }
.w-card.w-hero { border-color: var(--accent); border-top: 3px solid var(--accent); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 8%, var(--bg-2)), var(--bg-2)); padding-top: 12px; }
.w-hero h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.5px; }
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--fg-2); font-size: 11px; }
.w-hero > .w-meta { color: var(--accent); }
.w-meta .w-icon { width: 15px; height: 15px; flex-basis: 15px; }
.w-tag { font-size: 10px; line-height: 1.6; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; color: var(--fg-2); background: var(--bg-3); }
.w-context { color: var(--fg-2); font-size: 11px; margin-top: 5px !important; }
.w-detail { color: var(--fg-2); font-size: 12px; margin-top: 5px !important; font-variant-numeric: tabular-nums; }
.w-preview { margin-top: 9px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.w-preview strong { font-weight: 600; }
.w-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.w-btn { min-height: 32px; max-width: 100%; border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 10px; background: var(--bg-3); color: var(--fg); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.w-btn:hover { background: var(--bg-4); }
.w-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.w-primary:hover { background: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.w-link { display: inline-flex; align-items: center; min-height: 30px; max-width: 100%; padding: 4px 2px; border: none; background: transparent; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; font-size: 11px; text-align: left; }
.w-link:hover { color: var(--fg); text-decoration-color: currentColor; }
.w-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 10px 12px; margin-bottom: 12px; border-left: 2px solid var(--teal); background: var(--bg-2); border-radius: 0 7px 7px 0; }
.w-focus > span { display: flex; align-items: center; gap: 5px; color: var(--teal); font-size: 11px; }
.w-focus strong { flex: 1 1 120px; font-size: 12px; }
.w-next { margin-top: 20px; }
.w-next > h3 { text-transform: uppercase; letter-spacing: 1.3px; font-size: 10px; color: var(--fg-2); margin-bottom: 8px; }
.w-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 10px; margin-bottom: 12px; border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 7px; font-size: 12px; }
.w-banner > span { flex: 1 1 130px; }
.w-warning { color: var(--fg); border-left: 3px solid var(--yellow); padding-left: 8px; margin-top: 8px !important; }
.w-error { border-left: 3px solid var(--red); }
.w-success { border-left: 3px solid var(--green); }
.w-empty { padding: 24px 12px; text-align: center; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg-2); }
.w-empty-symbol { display: inline-flex; width: 34px; height: 34px; justify-content: center; align-items: center; background: var(--bg-3); color: var(--teal); border-radius: 50%; margin-bottom: 9px; }
.w-empty h3 { font-size: 15px; }
.w-empty p { color: var(--fg-2); font-size: 12px; max-width: 290px; margin: 5px auto 0; }
.w-footnote { color: var(--fg-2); font-size: 11px; margin: 12px 0 !important; }
.w-section-link { margin-top: 12px; }
.w-check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 12px; }
.w-check input { accent-color: var(--accent); margin: 3px 0 0; width: 16px; height: 16px; flex-shrink: 0; }
.w-back { margin-bottom: 8px; }
.w-thread { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.w-message { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); min-width: 0; }
.w-message.w-own { border-left: 2px solid var(--teal); }
.w-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 7px; }
.w-message time { color: var(--fg-2); font-size: 10px; margin-left: auto; }
.w-compose { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; padding: 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); }
.w-compose > label { color: var(--fg); font-size: 12px; font-weight: 600; }
.w-compose textarea, .w-compose select { display: block; width: 100%; min-width: 0; color: var(--fg); background: var(--bg); border: 1px solid var(--line-2); border-radius: 7px; padding: 9px; }
.w-compose textarea { resize: vertical; min-height: 70px; max-height: 250px; }
.w-compose textarea::placeholder { color: var(--fg-2); }
.w-compose-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; }
.w-compose-footer > span { color: var(--fg-2); font-size: 10px; }
.w-settings { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.w-settings h3 { font-size: 13px; }
.w-sources { margin: 10px 0 14px; font-size: 11px; }
.w-sources > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.w-sources dt { font-weight: 600; }
.w-sources dd { margin: 0; color: var(--fg-2); }
@container (min-width: 550px) {
  .w-now-grid, .w-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-now-grid > .w-hero { grid-column: 1 / -1; padding: 18px; }
  .w-hero h3 { font-size: 23px; }
  .w-main { padding: 20px; }
}
@container (max-width: 330px) {
  .w-header { padding-inline: 10px; }
  .w-brand-name { display: none; }
  .w-nav { padding-inline: 5px; }
  .w-nav-btn { font-size: 11px; gap: 3px; }
  .w-count { display: none; }
  .w-main { padding: 10px; }
  .w-card { padding: 10px; }
  .w-section-head h2 { font-size: 19px; }
  .w-hero h3 { font-size: 17px; }
}
/* La altura usa el viewport del documento PiP, no el de la pestaña anfitriona. */
@media (max-height: 260px) {
  .w-header { min-height: 35px; padding-block: 2px; }
  .w-brand-mark { font-size: 20px; }
  .w-brand-name { display: none; }
  .w-icon-btn { width: 28px; height: 28px; }
  .w-nav-btn { min-height: 30px; padding-block: 4px; }
  .w-main { padding-top: 8px; }
  .w-section-head { margin-bottom: 8px; }
  .w-section-head h2 { font-size: 16px; }
  .w-section-head p { display: none; }
  .w-card.w-hero { padding-top: 9px; }
  .w-hero h3 { font-size: 16px; }
}
@media (forced-colors: active) {
  .w-card.w-hero, .w-primary, .w-icon-btn[aria-pressed="true"], .w-nav-btn[aria-current="page"] { border: 2px solid ButtonText; }
  .w-widget :focus-visible { outline-color: Highlight; }
  .w-primary { background: ButtonFace; color: ButtonText; }
}
/* Llamada a la Sala creativa y GIF/stickers (los mismos colores de la llamada que en el chat). */
.w-compose-botones { display: inline-flex; align-items: center; gap: 6px; }
.w-gif { min-width: 38px; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.w-sala-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line-2); }
.w-sala { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 6px; border: 1.5px solid #a98ee4; border-radius: 999px; background: #e8defa; color: #3a2470; font-size: 12px; font-weight: 700; }
.w-sala:hover:not(:disabled) { background: #ddd0f7; border-color: #8f70dc; }
.w-sala:disabled { opacity: .6; }
.w-sala-confirmar { margin-top: 8px; padding: 10px 12px; border: 1.5px solid #a98ee4; border-radius: 10px; background: #e8defa; color: #3a2470; }
.w-sala-confirmar p { margin: 0 0 8px; font-weight: 700; font-size: 12px; }
.w-sala-si { background: #6b46c1; border-color: #6b46c1; color: #fff; }
.w-sala-si:hover { background: #5a37ad; }
.w-gifs { margin-top: 8px; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); }
.w-gif-cabeza { display: grid; gap: 6px; margin-bottom: 8px; }
.w-gif-cabeza [role="tablist"] { display: flex; gap: 4px; }
.w-gif-cabeza input { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--bg); color: var(--fg); font: inherit; font-size: 12px; }
.w-gif-rejilla { columns: 3 80px; column-gap: 4px; max-height: 220px; overflow-y: auto; }
.w-gif-rejilla button { display: block; width: 100%; margin: 0 0 4px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--bg-3); break-inside: avoid; }
.w-gif-rejilla img { display: block; width: 100%; height: auto; }
.w-stickers button { background: #fff conic-gradient(#ececf1 25%, #fff 0 50%, #ececf1 0 75%, #fff 0) 0 0 / 14px 14px; }
.w-gif-previa { display: grid; gap: 8px; justify-items: center; }
.w-gif-previa img { max-width: 100%; max-height: 200px; border-radius: 8px; }
.w-gif-pie { margin: 6px 0 0; text-align: right; color: var(--fg-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; }