/*
 * Intux Studio Mail · estilos del instalador y del panel.
 * Identidad: Manual de identidad Intux Studio v1.0 (brand/).
 * Regla de oro: el lima es acento y solo vive sobre oscuro.
 */

/* ---------- Fuente de marca (servida desde /brand) ---------- */

@font-face {
  font-family: "Manrope";
  src: url("../../marca/fuente-Manrope/Manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../../marca/fuente-Manrope/Manrope-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../../marca/fuente-Manrope/Manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../../marca/fuente-Manrope/Manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../../marca/fuente-Manrope/Manrope-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Paleta del manual */
  --negro: #0E0E0E;
  --hueso: #F2F1EC;
  --lima: #C6F432;
  --arena: #E4E2DC;
  --piedra: #8C8C86;

  /* Tonos derivados para superficies oscuras de marca */
  --negro-2: #171716;
  --negro-3: #232321;
  --negro-line: #2E2E2B;
  --hueso-2: #B9B8B1;

  /* Semánticos (modo claro: base hueso) */
  --bg: var(--hueso);
  --surface: #FAF9F6;
  --surface-sunken: var(--arena);
  --ink: var(--negro);
  --ink-2: #55554F;          /* Piedra oscurecida: 7:1 sobre hueso */
  --line: #DAD8D0;
  --line-strong: var(--piedra);
  --field-bg: #FCFBF8;
  --field-border: var(--piedra);
  --ring: rgb(14 14 14 / 0.14);
  --focus: var(--negro);

  --btn-bg: var(--negro);
  --btn-ink: var(--hueso);
  --btn-bg-hover: #2B2B29;

  --ok-icon: var(--negro);
  --danger-ink: #A3261A;
  --danger-bg: #F8E8E4;
  --danger-line: #EBC3BA;
  --warn-ink: #7A4E00;
  --warn-bg: #F6EDD6;
  --warn-line: #E5D2A2;

  --select-bg: var(--negro);
  --select-ink: var(--hueso);

  /* Forma: botones en píldora (como la web de Intux), campos 12px, paneles 18px */
  --radius-pill: 999px;
  --radius-field: 12px;
  --radius-panel: 18px;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Curvas de movimiento (emil-design-eng): fuertes y nunca ease-in en UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--negro);
    --surface: var(--negro-2);
    --surface-sunken: #1F1F1D;
    --ink: var(--hueso);
    --ink-2: #B3B2AB;
    --line: var(--negro-line);
    --line-strong: #6E6E68;
    --field-bg: #121211;
    --field-border: #6E6E68;
    --ring: rgb(198 244 50 / 0.28);
    --focus: var(--lima);

    /* Sobre oscuro los botones pueden ser lima (manual, pág. 15) */
    --btn-bg: var(--lima);
    --btn-ink: var(--negro);
    --btn-bg-hover: #D4F862;

    --ok-icon: var(--lima);
    --danger-ink: #FF9C8B;
    --danger-bg: #2A1613;
    --danger-line: #5C2B22;
    --warn-ink: #F2C96E;
    --warn-bg: #261F0E;
    --warn-line: #4E3D14;

    --select-bg: var(--lima);
    --select-ink: var(--negro);

    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--focus);
}

::selection {
  background: var(--select-bg);
  color: var(--select-ink);
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

strong {
  font-weight: 700;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.lead {
  max-width: 54ch;
  color: var(--ink-2);
  text-wrap: pretty;
}

.num {
  font-variant-numeric: tabular-nums;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: currentColor;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--lima);
  color: var(--negro);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Layout de instalación y acceso ---------- */

.auth {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) 1.18fr;
  min-height: 100dvh;
  /* La columna de marca sigue negra aunque el formulario sea más alto que la pantalla */
  background: var(--negro);
}

.auth__brand {
  position: sticky;
  top: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100dvh;
  padding: 44px 48px 52px;
  overflow: hidden;
  background: var(--negro);
  color: var(--hueso);
}

.auth__logo {
  position: relative;
  z-index: 1;
}

.auth__logo img {
  display: block;
  height: auto;
}

.auth__logo-compact {
  display: none !important;
}

.auth__context {
  position: relative;
  z-index: 1;
}

/* Etiqueta de marca: Bold, mayúsculas, +20 % (manual, pág. 19) */
.auth__product {
  margin-bottom: 18px;
  color: var(--hueso-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.auth__tagline {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Pasos: el punto lima de la i marca dónde estás */
.steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  color: var(--piedra);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #3B3B38;
  border-radius: 50%;
}

.step:not(:last-child) .step__mark::after {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: 2px;
  height: 10px;
  background: var(--negro-line);
  transform: translateX(-50%);
}

.step--done {
  color: var(--hueso-2);
}

.step--done .step__mark {
  border-color: transparent;
  background: var(--negro-3);
}

.step__check {
  width: 12px;
  height: 12px;
  fill: var(--hueso);
}

.step--current {
  color: var(--hueso);
}

.step--current .step__mark {
  border-color: transparent;
}

.step__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lima);
  view-transition-name: step-dot;
}

.steps-compact {
  display: none;
}

.auth__main {
  display: flex;
  align-items: center;
  padding: clamp(32px, 7vh, 80px) clamp(24px, 7vw, 112px);
  background: var(--bg);
}

.auth__card {
  width: 100%;
  max-width: 460px;
}

.page-head {
  margin-bottom: 28px;
}

/* ---------- Avisos ---------- */

.notice {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-sunken);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.notice__icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.notice__title {
  margin-bottom: 2px;
  font-weight: 700;
}

.notice--success .notice__icon,
.notice--info .notice__icon {
  color: var(--ok-icon);
}

.notice--error {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}

.notice--error .notice__icon {
  color: var(--danger-ink);
}

.notice--warn {
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

.notice--warn .notice__icon {
  color: var(--warn-ink);
}

/* ---------- Lista de requisitos ---------- */

.checklist + .checklist {
  margin-top: 24px;
}

.checklist__title {
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.checklist__list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  list-style: none;
}

.check {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.check + .check {
  border-top: 1px solid var(--line);
}

.check__icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.check--ok .check__icon {
  color: var(--ok-icon);
}

.check--warn .check__icon {
  color: var(--warn-ink);
}

.check--fail .check__icon {
  color: var(--danger-ink);
}

.check__body {
  min-width: 0;
}

.check__name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.check__detail {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

.check__fix {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-sunken);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---------- Formularios ---------- */

.form {
  display: grid;
  gap: 20px;
}

.form__row--host {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.field__control {
  position: relative;
}

.field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__input:hover {
  border-color: var(--ink-2);
}

.field__input:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

@media (prefers-color-scheme: dark) {
  .field__input:focus {
    border-color: var(--lima);
  }
}

/* Autocompletado del navegador con los colores de la marca */
.field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--field-bg) inset;
  -webkit-text-fill-color: var(--ink);
}

.field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--field-bg) inset, 0 0 0 3px var(--ring);
}

.field--invalid .field__input {
  border-color: var(--danger-ink);
}

.field--invalid .field__input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-ink) 22%, transparent);
}

.field__control--password .field__input {
  padding-right: 52px;
}

.field__reveal {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.field__reveal:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.field__reveal .icon {
  width: 20px;
  height: 20px;
}

.field__reveal-hide,
.field__reveal[aria-pressed="true"] .field__reveal-show {
  display: none;
}

.field__reveal[aria-pressed="true"] .field__reveal-hide {
  display: block;
}

.field__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.field__hint-check {
  display: none;
  color: var(--ok-icon);
}

.field__hint.is-met {
  color: var(--ink);
}

.field__hint.is-met .field__hint-check {
  display: block;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

.field__error .icon {
  margin-top: 1px;
}

/* ---------- Botones y acciones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
  pointer-events: none;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-ink);
}

.btn--primary:hover {
  background: var(--btn-bg-hover);
}

.btn--secondary {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--surface-sunken);
}

.btn--small {
  height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.btn--wide {
  min-width: 168px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.checklist ~ .actions {
  margin-top: 32px;
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 4px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.link-back:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Resumen antes de instalar ---------- */

.summary {
  margin: 4px 0 0;
  padding: 2px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 0.9375rem;
}

.summary__row + .summary__row {
  border-top: 1px solid var(--line);
}

.summary dt {
  color: var(--ink-2);
}

.summary dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.summary-note {
  margin-top: -8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- Panel del super admin ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--negro);
  color: var(--hueso);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1160px;
  height: 72px;
  margin: 0 auto;
  padding: 0 32px;
}

.topbar__logo {
  display: block;
  border-radius: 6px;
}

.topbar__logo img {
  display: block;
  width: 168px;
  height: auto;
}

.topbar__account {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar__who {
  line-height: 1.3;
  text-align: right;
}

.topbar__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
}

.topbar__email {
  display: block;
  color: var(--hueso-2);
  font-size: 0.8125rem;
}

.btn--ghost {
  border-color: #45453F;
  background: transparent;
  color: var(--hueso);
}

.btn--ghost:hover {
  border-color: var(--hueso-2);
  background: var(--negro-3);
}

.topbar :focus-visible {
  outline-color: var(--lima);
}

.admin__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 52px 32px 88px;
}

.admin-head {
  margin-bottom: 36px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
}

.panel {
  padding: 24px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 40px 0 12px;
  border-top: 1px solid var(--line);
}

.empty__title {
  margin-bottom: 8px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.empty__text {
  max-width: 52ch;
  color: var(--ink-2);
}

.facts {
  margin: 0;
}

.facts__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.facts dt {
  color: var(--ink-2);
}

.facts dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.state--ok .icon {
  color: var(--ok-icon);
}

.state--warn {
  color: var(--warn-ink);
}

.panel__note {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: var(--warn-bg);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- Errores y dominios sin cliente ---------- */

.page--error {
  background: var(--negro);
  color: var(--hueso);
  color-scheme: dark;
}

.error-page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: 100dvh;
  padding: 44px 48px;
  overflow: hidden;
}

.error-page__logo {
  position: relative;
  z-index: 1;
}

.error-page__logo img {
  display: block;
  height: auto;
}

.error-page__body {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding-bottom: 8vh;
}

.error-page__code {
  margin-bottom: 12px;
  color: var(--lima);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.error-page .lead {
  color: var(--hueso-2);
}

.error-page__detail {
  max-height: 40vh;
  margin-top: 24px;
  padding: 12px;
  overflow: auto;
  border-radius: 10px;
  background: var(--negro-2);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.page--error ::selection {
  background: var(--lima);
  color: var(--negro);
}

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 960px) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .auth__brand {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 16px 20px;
  }

  .auth__logo-full {
    display: none !important;
  }

  .auth__logo-compact {
    display: block !important;
  }

  .auth__product,
  .steps {
    display: none;
  }

  .auth__tagline {
    color: var(--hueso-2);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .steps-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hueso);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
  }

  .steps-compact__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lima);
  }

  .auth__main {
    align-items: flex-start;
    padding: 32px 20px 56px;
  }

  .topbar__inner {
    height: 64px;
    padding: 0 16px;
  }

  .topbar__who {
    display: none;
  }

  .topbar__logo img {
    width: 136px;
  }

  .admin__inner {
    padding: 32px 16px 64px;
  }

  .panel {
    padding: 20px;
  }

  .error-page {
    padding: 28px 20px;
  }
}

@media (max-width: 440px) {
  .form__row--host {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .actions .btn {
    flex: 1 1 auto;
  }

  .link-back {
    margin-left: 0;
  }
}

/* ---------- Movimiento ---------- */

/*
 * Un solo gesto: al cambiar de paso, el punto lima viaja al siguiente
 * (View Transitions entre páginas; los navegadores que no lo soportan cambian sin animar).
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(step-dot) {
    animation-duration: 0.5s;
    animation-timing-function: var(--ease-out);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Vista previa (solo desarrollo local) ---------- */

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  align-items: start;
}

.preview-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-list li + li {
  border-top: 1px solid var(--line);
}

.preview-list a {
  display: block;
  padding: 11px 0;
  font-weight: 600;
  text-decoration: none;
}

.preview-list a:hover {
  text-decoration: underline;
}

/* =====================================================================
 * Webmail del cliente
 * La base es Intux; el cliente solo aporta su logo y un color de acento
 * (--accent), que se carga después de este archivo. Sin color propio,
 * el acento es el de Intux: negro sobre claro, lima sobre oscuro.
 * ===================================================================== */

:root {
  --accent: var(--negro);
  --accent-ink: var(--hueso);
  --accent-hover: #2B2B29;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: var(--lima);
    --accent-ink: var(--negro);
    --accent-hover: #D4F862;
  }
}

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-row: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

/* ---------- Piezas compartidas ---------- */

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: var(--accent-hover);
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
}

.btn--quiet:hover {
  background: var(--surface-sunken);
}

.btn--block {
  width: 100%;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}

.icon-btn .icon {
  width: 19px;
  height: 19px;
}

.icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.icon-btn.is-on {
  color: var(--accent);
}

.icon-btn--small {
  width: 30px;
  height: 30px;
}

.icon-btn--small .icon {
  width: 15px;
  height: 15px;
}

.text-btn {
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.text-btn:hover {
  color: var(--ink);
  text-decoration: underline;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.tag--muted {
  background: var(--surface-sunken);
  color: var(--ink-2);
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar--small {
  width: 30px;
  height: 30px;
  font-size: 0.6875rem;
}

.avatar--large {
  width: 72px;
  height: 72px;
  font-size: 1.375rem;
}

.search {
  position: relative;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.search__input::placeholder {
  color: var(--ink-2);
}

.search__input:focus,
.textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.section-lead {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238C8C86' d='M216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background-color 0.18s ease;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.18s var(--ease-out);
}

.switch input:checked + .switch__track {
  background: var(--accent);
}

.switch input:checked + .switch__track::after {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.code {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-sunken);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.powered {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 500;
}

.powered {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.powered__logo img {
  display: block;
  height: auto;
}

.powered__icon--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .powered__icon--light {
    display: none;
  }

  .powered__icon--dark {
    display: block;
  }
}

.demo-flag {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--negro);
  color: var(--hueso);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgb(14 14 14 / 0.18);
  pointer-events: none;
}

.demo-flag .icon {
  color: var(--lima);
}

/* ---------- Estructura de la app ---------- */

.page--webmail {
  height: 100dvh;
  overflow: hidden;
}

.mail-top,
.tabbar,
.fab {
  display: none;
}

.mail-app {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  height: 100dvh;
}

.mail-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 22px 14px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.mail-side > * {
  flex-shrink: 0;
}

.mail-side__brand {
  display: block;
  padding: 4px 10px 6px;
  border-radius: 8px;
}


.mail-side__compose {
  margin: 0 4px;
}

.side-nav {
  display: grid;
  gap: 2px;
}

.side-nav__title {
  padding: 14px 12px 6px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.side-nav__item,
.side-nav__add,
.settings__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.side-nav__item .icon,
.side-nav__add .icon,
.settings__nav .icon {
  width: 19px;
  height: 19px;
}

.side-nav__item:hover,
.side-nav__add:hover,
.settings__nav a:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.side-nav__item[aria-current] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.side-nav__item[aria-current] .icon {
  color: var(--accent);
}

.side-nav__count {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.side-nav__count--unread {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
}

.mail-side__foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
}

.me:hover,
.me[aria-current] {
  background: var(--surface-sunken);
}

.me__text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.me__name,
.me__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me__name {
  font-size: 0.875rem;
  font-weight: 700;
}

.me__email {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.me__gear {
  margin-left: auto;
  color: var(--ink-2);
}

.mail-side .powered {
  padding: 0 10px;
}

.mail-main {
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--surface);
}

/* ---------- Bandeja ---------- */

.mail-panes,
.split {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  height: 100%;
}

.mail-list,
.split__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
}

.mail-list__head,
.pane-head {
  display: grid;
  gap: 14px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.mail-list__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mail-list__title h1,
.pane-head h1 {
  margin: 0;
  font-size: 1.5rem;
}

.mail-list__meta {
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.folder-chips {
  display: none;
}

.msgs,
.people {
  flex: 1;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.msg {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot from date"
    ". subject icons"
    ". preview preview";
  gap: 2px 10px;
  padding: 12px 12px 12px 10px;
  border-radius: 12px;
  text-decoration: none;
}

.msg:hover {
  background: var(--bg);
}

.msg[aria-current] {
  background: var(--accent-row);
}

.msg__dot {
  grid-area: dot;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.msg--unread .msg__dot {
  background: var(--accent);
}

.msg__from,
.msg__subject,
.person-row__name,
.person-row__sub,
.file__name,
.suggest__email,
.agenda__title,
.agenda__place {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__from {
  grid-area: from;
  font-size: 0.9375rem;
  font-weight: 600;
}

.msg__date {
  grid-area: date;
  color: var(--ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.msg__subject {
  grid-area: subject;
  font-size: 0.875rem;
}

.msg__icons {
  display: flex;
  grid-area: icons;
  gap: 4px;
  color: var(--ink-2);
}

.msg__icons .icon {
  width: 15px;
  height: 15px;
}

.msg__star {
  display: inline-flex;
  color: var(--accent);
}

.msg__preview {
  display: -webkit-box;
  grid-area: preview;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.msg--unread .msg__from {
  font-weight: 800;
}

.msg--unread .msg__subject,
.msg--unread .msg__date {
  color: var(--ink);
  font-weight: 700;
}

.list-empty {
  padding: 56px 24px;
  color: var(--ink-2);
  text-align: center;
}

.list-empty__title,
.read-empty__title {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
}

.mail-read,
.split__detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.read-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  height: 100%;
  padding: 40px;
  color: var(--ink-2);
  text-align: center;
}

.read-empty__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: var(--line-strong);
}

/* ---------- Lectura ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 57px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.toolbar__spacer {
  flex: 1;
}

.toolbar__back {
  display: none;
}

.letter {
  max-width: 780px;
  padding: 28px 40px 48px;
}

.letter__subject {
  margin-bottom: 22px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}

.letter__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.letter__from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  line-height: 1.4;
}

.letter__from strong {
  font-size: 0.9375rem;
}

.letter__email,
.letter__to,
.letter__date {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.letter__date {
  white-space: nowrap;
}

.letter__body {
  max-width: 68ch;
  padding: 24px 0;
  line-height: 1.7;
}

.letter__body p + p {
  margin-top: 1em;
}

.attachments {
  padding-bottom: 24px;
}

.attachments__title {
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.attachments__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
}

a.file:hover {
  border-color: var(--line-strong);
}

.file__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-sunken);
}

.file__text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.file__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.file__size {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.file__download {
  margin-left: auto;
  color: var(--ink-2);
}

.quick-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.quick-reply:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

/* ---------- Redactar ---------- */

.compose {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 24px;
}

.compose__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 57px;
  padding: 10px 18px 10px 24px;
  border-bottom: 1px solid var(--line);
}

.compose__head h2 {
  font-size: 1.0625rem;
}

.compose__status {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.compose__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
}

.compose__row:focus-within {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.compose__label {
  flex: none;
  width: 56px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.recipients {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.recipient {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 4px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-size: 0.875rem;
  font-weight: 600;
}

.recipient__remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.recipient__remove .icon {
  width: 12px;
  height: 12px;
}

.combo {
  position: relative;
  flex: 1;
  min-width: 120px;
}

.recipients__input,
.compose__subject {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.recipients__input:focus,
.compose__subject:focus,
.compose__body:focus {
  outline: none;
}

.suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: min(380px, 78vw);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  list-style: none;
  box-shadow: 0 14px 36px rgb(14 14 14 / 0.12);
}

.suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.suggest__item[aria-selected="true"],
.suggest__item:hover {
  background: var(--bg);
}

.suggest__text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.suggest__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.suggest__email {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.suggest .tag {
  margin-left: auto;
}

.compose__cc {
  display: flex;
  gap: 2px;
}

.format-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 18px;
  border-bottom: 1px solid var(--line);
}

.format-bar__sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--line);
}

.compose__body {
  flex: 1;
  width: 100%;
  min-height: 260px;
  padding: 18px 24px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

.compose__body:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ring);
}

.compose__files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 24px 18px;
  list-style: none;
}

.file--compact {
  padding: 6px 6px 6px 8px;
}

.file--compact .file__icon {
  width: 30px;
  height: 30px;
}

.compose__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.compose__discard {
  margin-left: auto;
}

/* ---------- Contactos ---------- */

.pane-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tabs__item {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.tabs__item:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.tabs__item[aria-current] {
  background: var(--ink);
  color: var(--bg);
}

.pane-note {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}

.person-row:hover {
  background: var(--bg);
}

.person-row[aria-current] {
  background: var(--accent-row);
}

.person-row__text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.person-row__name {
  font-size: 0.9375rem;
  font-weight: 700;
}

.person-row__sub {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.pane-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.profile {
  max-width: 640px;
  padding: 32px 40px 48px;
}

.profile__name {
  margin: 16px 0 2px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.profile__role {
  color: var(--ink-2);
}

.profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 28px;
}

.profile .pane-note {
  margin-top: 16px;
}

.facts dd a {
  text-decoration: none;
}

.facts dd a:hover {
  text-decoration: underline;
}

/* ---------- Calendario ---------- */

.calendar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  height: 100%;
}

.calendar__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pane-head--calendar .pane-head__row {
  justify-content: flex-start;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.segmented a {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.segmented a[aria-current] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(14 14 14 / 0.1);
}

.month {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 18px 18px;
  overflow-y: auto;
}

.month__head,
.month__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.month__head span {
  padding: 10px 8px 8px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.month__week {
  flex: 1;
  min-height: 104px;
  border-top: 1px solid var(--line);
}

.day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 6px;
  border-left: 1px solid var(--line);
}

.day:first-child {
  border-left: 0;
}

.day--out {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.day--out .day__num {
  color: var(--ink-2);
}

.day__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
}

.day--today .day__num {
  background: var(--accent);
  color: var(--accent-ink);
}

.ev {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  text-decoration: none;
}

.ev__time {
  flex: none;
  font-weight: 700;
}

.ev__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev--acento {
  background: var(--accent);
  color: var(--accent-ink);
}

.ev--equipo {
  background: var(--surface-sunken);
}

.ev--personal {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.ev:hover {
  filter: brightness(0.96);
}

.ev.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.kind-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.kind-dot--acento {
  background: var(--accent);
}

.kind-dot--equipo {
  background: var(--ink-2);
}

.kind-dot--personal {
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

.calendar__side {
  min-height: 0;
  padding-bottom: 24px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: var(--bg);
}

.side-title {
  padding: 22px 20px 4px;
  font-size: 1.0625rem;
}

.agenda {
  margin: 0;
  padding: 0 12px;
  list-style: none;
}

.agenda__date {
  padding: 14px 8px 6px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.agenda__date::first-letter {
  text-transform: uppercase;
}

.agenda__ev {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
}

.agenda__ev:hover {
  background: var(--surface);
}

.agenda__time {
  font-size: 0.8125rem;
  font-weight: 700;
}

.agenda__title {
  font-size: 0.875rem;
  font-weight: 600;
}

.agenda__place {
  grid-column: 2 / -1;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 18px 20px 0;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.event {
  padding: 22px 24px;
}

.event__kind {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.event__title {
  margin: 10px 0 18px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.event__facts {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event__facts li {
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.event__facts .icon {
  margin-top: 2px;
  color: var(--ink-2);
}

.event__notes {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.9375rem;
}

.view-agenda {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.view-agenda .month {
  display: none;
}

.view-agenda .calendar__side {
  border-left: 0;
  background: var(--surface);
}

.view-agenda .agenda,
.view-agenda .side-title,
.view-agenda .legend,
.view-agenda .event,
.view-agenda .toolbar {
  max-width: 760px;
}

/* ---------- Ajustes ---------- */

.settings {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  grid-template-areas:
    "head head"
    "nav body";
  align-content: start;
  column-gap: 32px;
  height: 100%;
  padding: 0 40px 64px;
  overflow-y: auto;
}

.settings__head {
  grid-area: head;
  padding: 28px 0 22px;
  border-bottom: 0;
}

.settings__head .lead {
  margin-top: -8px;
}

.settings__nav {
  position: sticky;
  top: 20px;
  display: grid;
  grid-area: nav;
  align-self: start;
  gap: 2px;
}

.settings__body {
  display: grid;
  grid-area: body;
  gap: 20px;
}

.settings__section {
  display: grid;
  gap: 14px;
  scroll-margin-top: 20px;
}

.settings__section .section-lead {
  margin-top: -6px;
}

.settings__section .actions {
  margin-top: 4px;
}

.form--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sync-facts dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.sub-title {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
}

.devices {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  list-style: none;
}

.device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.device__icon {
  width: 22px;
  height: 22px;
  color: var(--ink-2);
}

.device__text {
  display: grid;
  min-width: 0;
  line-height: 1.4;
}

.device__name {
  font-weight: 600;
}

.device__meta {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.device .btn {
  margin-left: auto;
}

/* ---------- Acceso al webmail ---------- */

.mail-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  min-height: 100dvh;
  padding: clamp(40px, 12vh, 120px) 20px 28px;
}

.mail-login__card {
  width: 100%;
  max-width: 420px;
}

.mail-login__logo {
  margin-bottom: 44px;
}

.mail-login__title {
  margin-bottom: 24px;
  font-size: 1.75rem;
}

.mail-login__help {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.mail-login__foot {
  margin-top: auto;
}

/* ---------- Vista previa: tarjeta destacada ---------- */

.preview-feature .section-lead {
  margin-bottom: 8px;
}

/* ---------- Webmail en pantallas medianas ---------- */

@media (max-width: 1180px) {
  .calendar {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .toolbar__wide span {
    display: none;
  }
}

/* ---------- Webmail en el celular ---------- */

@media (max-width: 860px) {
  .page--webmail {
    height: auto;
    overflow: visible;
  }

  .demo-flag {
    display: none;
  }

  .mail-top {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }


  .mail-top__me {
    border-radius: 50%;
  }

  .mail-app {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100dvh - 60px);
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .mail-side {
    display: none;
  }

  .mail-main {
    height: auto;
    overflow: visible;
  }

  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink-2);
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
  }

  .tabbar__item .icon {
    width: 22px;
    height: 22px;
  }

  .tabbar__item[aria-current] {
    color: var(--ink);
  }

  .tabbar__item[aria-current] .icon {
    color: var(--accent);
  }

  .mail-panes,
  .split,
  .calendar {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .mail-list,
  .split__list {
    border-right: 0;
  }

  .is-reading .mail-list,
  .is-composing .mail-list,
  .is-listing .mail-read,
  .split.is-reading .split__list,
  .split.is-listing .split__detail {
    display: none;
  }

  .msgs,
  .people,
  .mail-read,
  .split__detail {
    overflow: visible;
  }

  .mail-list__head,
  .pane-head {
    padding: 16px 16px 12px;
  }

  .folder-chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .chip[aria-current] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
  }

  .chip__count {
    font-weight: 800;
  }

  .fab {
    position: fixed;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(14 14 14 / 0.22);
  }

  .is-reading ~ .fab,
  .is-composing ~ .fab {
    display: none;
  }

  .toolbar {
    top: 60px;
    padding: 8px 10px;
  }

  .toolbar__back {
    display: inline-grid;
  }

  .toolbar__wide {
    display: none;
  }

  .letter {
    padding: 20px 18px 40px;
  }

  .letter__subject {
    font-size: 1.3125rem;
  }

  .letter__meta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .letter__date {
    grid-column: 2;
  }

  .compose__head,
  .compose__row {
    padding-right: 12px;
    padding-left: 16px;
  }

  .compose__label {
    width: auto;
    min-width: 44px;
  }

  .compose__status {
    display: none;
  }

  .compose__head .icon-btn {
    margin-left: auto;
  }

  .format-bar {
    padding: 6px 10px;
    overflow-x: auto;
  }

  .compose__body {
    padding: 16px;
  }

  .compose__files,
  .compose__actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .profile {
    padding: 24px 18px 40px;
  }

  .month {
    padding: 0 8px 8px;
    overflow: visible;
  }

  .month__head span {
    padding: 8px 2px;
    text-align: center;
  }

  .month__week {
    min-height: 56px;
  }

  .day {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
  }

  .day__num {
    flex: none;
    margin: 0 calc(50% - 13px);
  }

  /* En el celular cada evento es un punto; el detalle está en la agenda debajo */
  .ev {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
  }

  .ev--equipo {
    background: var(--ink-2);
  }

  .ev__time,
  .ev__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .calendar__side {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .pane-head--calendar .pane-head__row {
    gap: 10px;
  }

  .pane-head--calendar h1 {
    flex-basis: 100%;
  }

  .settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "nav"
      "body";
    height: auto;
    padding: 0 16px 40px;
    overflow: visible;
  }

  .settings__nav {
    position: static;
    display: flex;
    gap: 8px;
    margin: 0 -16px 16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings__nav a {
    flex: none;
    width: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .form--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .sync-facts .facts__row {
    flex-direction: column;
    gap: 4px;
  }

  .sync-facts dd {
    justify-content: flex-start;
    text-align: left;
  }
}


/* ---------- Co-marca: logo del cliente + logo de Intux ---------- */

.cobrand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cobrand img {
  display: block;
  height: auto;
}

/* El logo del cliente se ajusta a una caja fija sin deformarse, sea ancho o alto */
.cobrand__client img {
  width: 118px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

.cobrand--top .cobrand__client img {
  width: 112px;
  height: 34px;
}

.cobrand--login .cobrand__client img {
  width: 190px;
  height: 60px;
}

.cobrand__sep {
  flex: none;
  align-self: stretch;
  width: 1px;
  min-height: 28px;
  background: var(--line-strong);
}

.cobrand--login {
  gap: 20px;
}

/* =====================================================================
 * Identidad Intux en todo el webmail
 * Barra lateral, cabecera y pestañas móviles en negro con acentos lima
 * (lima siempre sobre oscuro); el contenido va sobre hueso con acentos en negro.
 * ===================================================================== */

.mail-side,
.mail-top,
.tabbar {
  color-scheme: dark;
  scrollbar-color: #3B3B38 transparent;
}

.mail-side {
  border-right-color: var(--negro-line);
  background: var(--negro);
  color: var(--hueso);
}

.mail-side .btn--accent {
  background: var(--lima);
  color: var(--negro);
}

.mail-side .btn--accent:hover {
  background: #D4F862;
}

.mail-side .side-nav__title {
  color: var(--piedra);
}

.mail-side .side-nav__item,
.mail-side .side-nav__add {
  color: var(--hueso-2);
}

.mail-side .side-nav__item:hover,
.mail-side .side-nav__add:hover,
.mail-side .me:hover,
.mail-side .me[aria-current] {
  background: var(--negro-3);
  color: var(--hueso);
}

.mail-side .side-nav__item[aria-current] {
  background: var(--negro-3);
  color: var(--hueso);
  box-shadow: none;
}

.mail-side .side-nav__item[aria-current] .icon {
  color: var(--lima);
}

.mail-side .side-nav__count {
  color: var(--hueso-2);
}

.mail-side .side-nav__count--unread {
  background: var(--lima);
  color: var(--negro);
}

.mail-side__foot {
  border-top-color: var(--negro-line);
}

.mail-side .me__email,
.mail-side .me__gear,
.mail-side .powered {
  color: var(--hueso-2);
}

.mail-side .avatar,
.mail-top .avatar {
  background: var(--negro-3);
  color: var(--hueso);
}

.mail-side .cobrand__sep,
.mail-top .cobrand__sep,
.auth__brand .cobrand__sep {
  background: #45453F;
}

.mail-side :focus-visible,
.mail-top :focus-visible,
.tabbar :focus-visible {
  outline-color: var(--lima);
}

/* ---------- Acceso al webmail (layout de Intux) ---------- */

.mail-login__foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page--mail-login .auth__tagline {
  max-width: 18ch;
}

@media (max-width: 860px) {
  .mail-top {
    border-bottom-color: var(--negro-line);
    background: var(--negro);
  }

  .tabbar {
    border-top-color: var(--negro-line);
    background: var(--negro);
  }

  .tabbar__item {
    color: var(--hueso-2);
  }

  .tabbar__item[aria-current] {
    color: var(--hueso);
  }

  .tabbar__item[aria-current] .icon {
    color: var(--lima);
  }

  .page--mail-login .auth__context {
    display: none;
  }

  .cobrand--login .cobrand__client img {
    width: 140px;
    height: 44px;
  }

  .cobrand--login .cobrand__intux img {
    width: 88px;
  }

  .cobrand--login {
    gap: 14px;
  }
}

/* ---------- Logo de Intux solo (cliente sin logo): siempre centrado ---------- */

.cobrand--solo {
  justify-content: center;
  width: 100%;
}

@media (max-width: 860px) {
  .mail-top--solo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .mail-top--solo .mail-top__brand {
    grid-column: 2;
  }

  .mail-top--solo .mail-top__me {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 860px) {
  .page--mail-login .auth__logo {
    flex: 1;
  }
}

/* ---------- Acceso al webmail: presentación general y ordenada ---------- */

.login-intro__name {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.login-intro__lead {
  max-width: 44ch;
  margin-top: 10px;
  color: var(--hueso-2);
  text-wrap: pretty;
}

.login-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(24px, 3vw, 44px);
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--negro-line);
}

.login-facts dt {
  margin-bottom: 4px;
  color: var(--piedra);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-facts dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.login-facts .icon {
  color: var(--lima);
}


/* =====================================================================
 * Capa visual: profundidad, vidrio líquido y movimiento
 * - Vidrio = aproximación web (backdrop-filter + borde interior + brillo),
 *   no el material oficial de Apple. Respaldo sólido con prefers-reduced-transparency.
 * - Movimiento solo con propósito, transform/opacity, curvas fuertes, < 300 ms.
 * ===================================================================== */

:root {
  /* Vidrio sobre claro */
  --glass-bg: rgb(252 251 248 / 0.62);
  --glass-bg-strong: rgb(252 251 248 / 0.8);
  --glass-edge: rgb(255 255 255 / 0.75);
  --glass-line: rgb(14 14 14 / 0.07);
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -1px 0 rgb(14 14 14 / 0.03);
  --glass-shadow: 0 1px 2px rgb(14 14 14 / 0.04), 0 18px 40px -20px rgb(14 14 14 / 0.18);
  --glass-blur: blur(22px) saturate(160%);

  /* Vidrio sobre negro (barra lateral, cabeceras oscuras) */
  --glass-dark-bg: rgb(255 255 255 / 0.07);
  --glass-dark-edge: rgb(255 255 255 / 0.1);
  --glass-dark-shine: inset 0 1px 0 rgb(255 255 255 / 0.08);

  /* Grano sutil para romper lo plano */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgb(30 30 28 / 0.55);
    --glass-bg-strong: rgb(24 24 23 / 0.78);
    --glass-edge: rgb(255 255 255 / 0.08);
    --glass-line: rgb(255 255 255 / 0.06);
    --glass-shine: inset 0 1px 0 rgb(255 255 255 / 0.07);
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 44px -22px rgb(0 0 0 / 0.7);
  }
}

/* ---------- Fondo ambiental: luz suave + grano (capa fija, no repinta al hacer scroll) ---------- */

.page::before,
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page::before {
  background:
    radial-gradient(1100px 680px at 88% -12%, rgb(255 255 255 / 0.95), transparent 62%),
    radial-gradient(900px 620px at -12% 112%, rgb(228 226 220 / 0.95), transparent 60%),
    var(--bg);
}

.page::after {
  background-image: var(--grain);
  opacity: 0.045;
}

@media (prefers-color-scheme: dark) {
  .page::before {
    background:
      radial-gradient(900px 600px at 92% -10%, rgb(198 244 50 / 0.07), transparent 60%),
      radial-gradient(900px 640px at -10% 110%, rgb(242 241 236 / 0.04), transparent 60%),
      var(--bg);
  }

  .page::after {
    opacity: 0.06;
  }
}

body.page {
  background: transparent;
}

/* Paneles negros de marca: brillo lima tenue + grano, sin imágenes externas */
.auth__brand,
.mail-side,
.topbar,
.page--error {
  background-image:
    radial-gradient(560px 380px at 0% 0%, rgb(198 244 50 / 0.1), transparent 70%),
    radial-gradient(520px 420px at 100% 100%, rgb(242 241 236 / 0.05), transparent 70%),
    var(--grain);
  background-color: var(--negro);
  background-size: auto, auto, 160px 160px;
}

.auth__main {
  background: transparent;
}

/* ---------- Vidrio: utilidades por superficie ---------- */

.auth__card,
.panel,
.checklist__list,
.summary,
.devices,
.suggest {
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* El formulario de acceso flota como una tarjeta de vidrio */
.auth__card {
  max-width: 480px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
}

.panel {
  border-radius: 22px;
}

.checklist__list,
.summary,
.devices {
  border-radius: 18px;
}

.suggest {
  background: var(--glass-bg-strong);
}

/* Barras fijas translúcidas: el contenido se ve desenfocado al pasar por debajo */
.toolbar,
.mail-list__head,
.pane-head,
.compose__head {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.mail-list__head,
.pane-head {
  position: sticky;
  top: 0;
  z-index: 3;
}

.topbar {
  background-color: rgb(14 14 14 / 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
}

/* Paneles del webmail: semitransparentes para dejar ver el fondo ambiental */
.mail-main {
  background: transparent;
}

.mail-list,
.split__list {
  background: rgb(250 249 246 / 0.55);
}

.mail-read,
.split__detail,
.calendar__main,
.settings {
  background: rgb(252 251 248 / 0.72);
}

.calendar__side {
  background: rgb(242 241 236 / 0.6);
}

@media (prefers-color-scheme: dark) {
  .mail-list,
  .split__list {
    background: rgb(20 20 19 / 0.6);
  }

  .mail-read,
  .split__detail,
  .calendar__main,
  .settings {
    background: rgb(23 23 22 / 0.72);
  }

  .calendar__side {
    background: rgb(14 14 14 / 0.55);
  }
}

/* Barra lateral oscura: elementos activos como vidrio sobre negro */
.mail-side .side-nav__item,
.tabbar__item {
  position: relative;
  isolation: isolate;
}

.mail-side .side-nav__item[aria-current] {
  background: transparent;
}

.nav-pill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--glass-dark-edge);
  border-radius: 10px;
  background: var(--glass-dark-bg);
  box-shadow: var(--glass-dark-shine);
}

.nav-pill--app {
  view-transition-name: nav-app;
}

.nav-pill--folder {
  view-transition-name: nav-folder;
}

.nav-pill--tab {
  inset: 6px 14px;
  border-radius: 14px;
  view-transition-name: nav-tab;
}

/* Avatares en cuadrado suavizado (menos genérico que el círculo) */
.avatar {
  border-radius: 32%;
}

/* ---------- Botones y controles: respuesta física al presionar ---------- */

.btn,
.icon-btn,
.chip,
.tabs__item,
.segmented a,
.side-nav__item,
.side-nav__add,
.tabbar__item,
.fab {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 160ms var(--ease-out);
}

.btn:active,
.icon-btn:active,
.chip:active,
.tabs__item:active,
.segmented a:active,
.fab:active {
  transform: scale(0.97);
}

/* Botón principal con brillo interior, como una pieza de vidrio sólido */
.btn--primary,
.btn--accent {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 6px 16px -8px rgb(14 14 14 / 0.45);
}

@media (prefers-color-scheme: dark) {
  .btn--primary,
  .btn--accent {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 22px -10px rgb(198 244 50 / 0.45);
  }
}

.mail-side .btn--accent {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 22px -10px rgb(198 244 50 / 0.5);
}

.btn--secondary,
.btn--ghost {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.btn--ghost {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.fab {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 12px 28px -10px rgb(14 14 14 / 0.5);
}

.switch__track,
.switch__track::after {
  transition-timing-function: var(--ease-out);
}

/* ---------- Barras del celular: vidrio oscuro flotante ---------- */

@media (max-width: 860px) {
  .mail-top {
    background: rgb(14 14 14 / 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }

  .tabbar {
    background: rgb(14 14 14 / 0.84);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }

  .toolbar {
    top: 60px;
  }

  .mail-list__head,
  .pane-head {
    position: static;
  }

  .auth__card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Partes fijas: no parpadean al navegar entre pantallas */
  .mail-side { view-transition-name: mail-side; }
  .mail-top { view-transition-name: mail-top; }
  .tabbar { view-transition-name: tabbar; }
  .topbar { view-transition-name: topbar; }
  .auth__brand { view-transition-name: auth-brand; }
  .mail-read { view-transition-name: mail-read; }

  /* El resaltado activo se desliza al nuevo elemento (movimiento en pantalla: ease-in-out) */
  ::view-transition-group(nav-app),
  ::view-transition-group(nav-folder),
  ::view-transition-group(nav-tab) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-in-out);
  }

  ::view-transition-old(nav-app),
  ::view-transition-new(nav-app),
  ::view-transition-old(nav-folder),
  ::view-transition-new(nav-folder),
  ::view-transition-old(nav-tab),
  ::view-transition-new(nav-tab) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Lectura: el contenido nuevo entra corto y suave (se usa a diario: casi imperceptible) */
  ::view-transition-old(mail-read) {
    animation: vt-fade-out 120ms ease both;
  }

  ::view-transition-new(mail-read) {
    animation: vt-rise-in 200ms var(--ease-out) both;
  }

  /* Las partes fijas no se funden */
  ::view-transition-old(mail-side),
  ::view-transition-new(mail-side),
  ::view-transition-old(mail-top),
  ::view-transition-new(mail-top),
  ::view-transition-old(tabbar),
  ::view-transition-new(tabbar),
  ::view-transition-old(topbar),
  ::view-transition-new(topbar) {
    animation: none;
  }

  /* Entrada escalonada solo en pantallas poco frecuentes: acceso, instalador y panel */
  .auth__card > *,
  .admin-head,
  .admin-grid > *,
  .preview-grid > * {
    animation: rise-in 300ms var(--ease-out) both;
  }

  .auth__card > :nth-child(2) { animation-delay: 40ms; }
  .auth__card > :nth-child(3) { animation-delay: 80ms; }
  .auth__card > :nth-child(4) { animation-delay: 120ms; }
  .auth__card > :nth-child(5) { animation-delay: 160ms; }
  .auth__card > :nth-child(6) { animation-delay: 200ms; }
  .admin-grid > :nth-child(1),
  .preview-grid > :nth-child(1) { animation-delay: 60ms; }
  .admin-grid > :nth-child(2),
  .preview-grid > :nth-child(2) { animation-delay: 110ms; }
  .preview-grid > :nth-child(3) { animation-delay: 160ms; }
  .preview-grid > :nth-child(4) { animation-delay: 210ms; }
  .preview-grid > :nth-child(5) { animation-delay: 260ms; }

  /* Sugerencias al escribir: se despliegan desde el campo, no desde el centro */
  .suggest {
    transform-origin: top left;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);

    @starting-style {
      opacity: 0;
      transform: scale(0.96) translateY(-4px);
    }
  }

  html {
    scroll-behavior: smooth;
  }
}

/* Sin filter: blur: en Chrome para Mac (chip Apple) el desenfoque animado sobre imágenes
   y vidrio deja manchas fucsia. Solo opacidad y movimiento. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vt-rise-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

/* Reducir movimiento: menos y más suave, no cero. Quedan los fundidos. */
@media (prefers-reduced-motion: reduce) {
  .auth__card > *,
  .admin-grid > *,
  .preview-grid > * {
    animation: fade-in 200ms ease both !important;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Reducir transparencia: superficies sólidas, sin desenfoque */
@media (prefers-reduced-transparency: reduce) {
  .auth__card,
  .panel,
  .checklist__list,
  .summary,
  .devices,
  .suggest,
  .toolbar,
  .mail-list__head,
  .pane-head,
  .compose__head,
  .mail-list,
  .split__list,
  .mail-read,
  .split__detail,
  .calendar__main,
  .settings,
  .calendar__side,
  .topbar,
  .mail-top,
  .tabbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .auth__card,
  .panel,
  .checklist__list,
  .summary,
  .devices,
  .suggest,
  .toolbar,
  .mail-list__head,
  .pane-head,
  .compose__head,
  .mail-read,
  .split__detail,
  .calendar__main,
  .settings {
    background: var(--surface);
  }

  .mail-list,
  .split__list,
  .calendar__side {
    background: var(--bg);
  }

  .topbar,
  .mail-top,
  .tabbar {
    background-color: var(--negro);
  }
}

/* La página de error es negra de principio a fin: sin la luz ambiental clara */
.page--error::before {
  display: none;
}

body.page.page--error {
  background-color: var(--negro);
  background-image:
    radial-gradient(560px 380px at 0% 0%, rgb(198 244 50 / 0.1), transparent 70%),
    radial-gradient(520px 420px at 100% 100%, rgb(242 241 236 / 0.05), transparent 70%),
    var(--grain);
  background-size: auto, auto, 160px 160px;
}

/* La lista hace scroll completa, así los correos pasan por debajo de la cabecera de vidrio */
@media (min-width: 861px) {
  .mail-list,
  .split__list {
    overflow-y: auto;
  }

  .msgs,
  .people {
    flex: none;
    overflow: visible;
  }
}

/* El panel negro ocupa toda la altura de la rejilla; solo su contenido queda fijo.
   Así el lado del formulario muestra el fondo ambiental claro, no negro. */
.auth {
  background: transparent;
}

.auth__brand {
  position: relative;
  display: block;
  align-self: stretch;
  height: auto;
  min-height: 100dvh;
  padding: 0;
}

.auth__brand-inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100dvh;
  padding: 44px 48px 52px;
}

@media (max-width: 860px) {
  .auth__brand {
    min-height: 0;
  }

  .auth__brand-inner {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 16px 20px;
  }
}


/* =====================================================================
 * Barra superior del webmail (estilo Gmail): búsqueda global, avisos,
 * ajustes y la cuenta del usuario con su foto.
 * ===================================================================== */

.mail-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.mail-body {
  min-height: 0;
  overflow: hidden;
}

.mail-body > * {
  height: 100%;
}

.appbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.appbar__search {
  flex: 1;
  max-width: 680px;
}

.appbar__search .search__input {
  height: 44px;
  border-color: var(--glass-line);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  box-shadow: var(--glass-shine);
}

.appbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.appbar__sep {
  width: 1px;
  height: 28px;
  margin: 0 8px;
  background: var(--line);
}

.appbar__bell {
  position: relative;
}

.appbar__badge {
  position: absolute;
  top: 3px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
}

/* La búsqueda de la lista pasa a la barra superior en escritorio */
.mail-list__head .search {
  display: none;
}

/* Botón de la cuenta: foto + nombre + cargo */
.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}

.account-chip:hover,
.account-chip[aria-expanded="true"] {
  border-color: var(--glass-line);
  background: var(--glass-bg);
  box-shadow: var(--glass-shine);
}

.account-chip:active {
  transform: scale(0.97);
}

.account-chip .avatar {
  width: 36px;
  height: 36px;
}

.account-chip__text {
  display: grid;
  line-height: 1.25;
}

.account-chip__name {
  font-size: 0.875rem;
  font-weight: 700;
}

.account-chip__role {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.account-chip__caret {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
  transition: transform 200ms var(--ease-out);
}

.account-chip[aria-expanded="true"] .account-chip__caret {
  transform: rotate(180deg);
}

/* Foto del usuario */
.avatar--photo {
  object-fit: cover;
  background: var(--surface-sunken);
}

.avatar--large.avatar--photo,
.avatar--large {
  width: 72px;
  height: 72px;
}

/* ---------- Menús desplegables de vidrio ---------- */

.menu-anchor {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 300px;
  padding: 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shine), 0 24px 48px -16px rgb(14 14 14 / 0.28);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* Se abre desde el botón que lo dispara (esquina superior derecha) */
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-4px);
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 180ms;
}

.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s;
}

@media (prefers-color-scheme: dark) {
  .menu {
    box-shadow: var(--glass-shine), 0 24px 48px -16px rgb(0 0 0 / 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu[data-open="true"] {
    transform: none;
  }
}

.menu--notices {
  width: 340px;
}

.menu__title {
  padding: 8px 10px 6px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.menu__profile {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 12px 16px;
  text-align: center;
}

.menu__profile .avatar {
  margin-bottom: 10px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--glass-line);
}

.menu__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.menu__email,
.menu__role {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.menu__list,
.menu__foot {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.menu__foot {
  margin-top: 6px;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.menu__item .icon {
  width: 19px;
  height: 19px;
  color: var(--ink-2);
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--surface-sunken);
}

.menu__item--exit {
  color: var(--danger-ink);
}

.menu__item--exit .icon {
  color: currentColor;
}

.notices {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.notice-item:hover {
  background: var(--surface-sunken);
}

.notice-item__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 32%;
  background: var(--surface-sunken);
}

.notice-item__time {
  color: var(--ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* En el celular la barra se oculta: la cuenta vive en la cabecera y la búsqueda en la lista */
@media (max-width: 860px) {
  .appbar {
    display: none;
  }

  .mail-main {
    display: block;
  }

  .mail-body {
    overflow: visible;
  }

  .mail-body > * {
    height: auto;
  }

  .mail-list__head .search {
    display: block;
  }
}

@media (max-width: 1100px) {
  .account-chip__text {
    display: none;
  }
}

/* Los menús viven dentro de la barra, que ya desenfoca. Un desenfoque anidado
   se dibuja mal en Chrome (deja ver el contenido de abajo), así que el menú
   lleva fondo sólido y conserva el borde con brillo y la sombra de vidrio. */
.menu {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-color-scheme: dark) {
  .menu {
    background: #1A1A19;
  }
}

/* Datos largos (correos, direcciones): bajan de línea completos en vez de partirse */
.facts__row {
  flex-wrap: wrap;
}

.facts dd {
  margin-left: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.sync-facts dd {
  overflow-wrap: anywhere;
}

/* =====================================================================
 * Panel del super admin: clientes (fase 2)
 * ===================================================================== */

[hidden] {
  display: none !important;
}

/* ---------- Navegación superior ---------- */

.topbar__inner {
  gap: 28px;
}

.topnav {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

.topnav__item {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--hueso-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.topnav__item:hover,
.topnav__item[aria-current] {
  color: var(--hueso);
}

.nav-pill--top {
  view-transition-name: nav-top;
}

.topnav__item[aria-current] .nav-pill--top {
  border-color: var(--glass-dark-edge);
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(nav-top),
  ::view-transition-group(nav-tabs) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-in-out);
  }

  ::view-transition-old(nav-top),
  ::view-transition-new(nav-top),
  ::view-transition-old(nav-tabs),
  ::view-transition-new(nav-tabs) {
    animation: none;
  }
}

/* ---------- Estructura de páginas ---------- */

.admin__inner--narrow {
  max-width: 760px;
}

.admin__notice {
  padding-top: 24px;
  padding-bottom: 0;
}

.admin__notice .notice {
  margin-bottom: 0;
}

.admin-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.link-back--top {
  margin: 0 0 14px -4px;
}

.panel__link {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.panel__link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.panel__search {
  margin-bottom: 14px;
}

.panel h2 {
  margin-bottom: 4px;
}

.form--spaced {
  margin-top: 18px;
}

.empty--compact {
  padding: 24px 0 8px;
  border-top: 0;
}

.empty .btn {
  margin-top: 18px;
}

.meta-line {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* ---------- Cifras del inicio ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.stat {
  padding: 18px 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}

.stat dt {
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.stat dd {
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stat__of {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- Lista de clientes ---------- */

.client-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.client-row:hover {
  background: var(--surface-sunken);
}

.client-row__logo,
.client-head__logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.client-row__logo img,
.client-head__logo img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

.client-row__initial {
  font-size: 1rem;
  font-weight: 800;
}

.client-row__text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.client-row__name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row__domain,
.client-row__users {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row__go {
  color: var(--ink-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge--ok {
  background: var(--surface-sunken);
  color: var(--ink);
}

.badge--ok::before {
  background: var(--ok-icon);
}

.badge--off {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* ---------- Ficha del cliente ---------- */

.client-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.client-head__logo {
  width: 84px;
  height: 64px;
  border-radius: 16px;
}

.client-head__text {
  flex: 1;
  min-width: 0;
}

.client-head h1 {
  margin-bottom: 2px;
}

.client-head .lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.client-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shine);
  scrollbar-width: none;
}

.client-tabs__item {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.client-tabs__item:hover,
.client-tabs__item[aria-current] {
  color: var(--ink);
}

.client-tabs__pill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(14 14 14 / 0.06), 0 4px 12px -6px rgb(14 14 14 / 0.18);
  view-transition-name: nav-tabs;
}

.client-tabs__count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 0.75rem;
  font-weight: 700;
}

.client-panel {
  padding: 28px 32px 32px;
}

.tab-section + .tab-section,
.tab-section + .howto,
.tab-section + .actions,
form > .tab-section + .actions {
  margin-top: 28px;
}

.tab-section {
  display: grid;
  gap: 14px;
}

.tab-section > h2,
.tab-section__head h2 {
  font-size: 1.125rem;
}

.tab-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tab-section__head .section-lead {
  margin-top: 4px;
}

.row-list {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  list-style: none;
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.row-item + .row-item {
  border-top: 1px solid var(--line);
}

.row-item__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 32%;
  background: var(--surface-sunken);
}

.row-item__main {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.row-item__title {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-item__sub {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.inline-form .field {
  flex: 1 1 280px;
}

.howto {
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  font-size: 0.875rem;
}

.howto__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
}

.howto ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
}

/* ---------- Marca ---------- */

.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.slot {
  display: grid;
  align-content: start;
  gap: 6px;
}

.slot__drop {
  display: block;
  cursor: pointer;
}

.slot__preview {
  display: grid;
  place-items: center;
  height: 132px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}

.slot--light .slot__preview {
  background: var(--hueso);
}

.slot--dark .slot__preview {
  border-color: #45453F;
  background: var(--negro);
  color: var(--hueso-2);
}

.slot__drop:hover .slot__preview,
.slot__drop:focus-within .slot__preview {
  border-style: solid;
  border-color: var(--ink);
}

.slot__drop:active .slot__preview {
  transform: scale(0.98);
}

.slot__drop:focus-within .slot__preview {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.slot__preview img {
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
}

.slot--square .slot__preview img {
  max-height: 72px;
}

.slot__empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.slot--light .slot__empty {
  color: #55554F;
}

.slot--dark .slot__empty {
  color: var(--hueso-2);
}

.slot__empty .icon {
  width: 22px;
  height: 22px;
}

.slot--changed .slot__preview {
  border-style: solid;
  border-color: var(--ok-icon);
}

.slot--invalid .slot__preview {
  border-color: var(--danger-ink);
}

.slot__label {
  font-weight: 700;
}

.slot__hint {
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.check-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  cursor: pointer;
}

.check-line input {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
}

.cobrand-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.cobrand-preview__dark,
.cobrand-preview__light {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 24px;
}

.cobrand-preview__dark {
  background: var(--negro);
}

.cobrand-preview__light {
  background: var(--hueso);
}

/* ---------- Servidores ---------- */

.server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.server-card {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.server-card legend {
  padding: 0 6px;
  font-weight: 800;
}

.choice {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice legend {
  margin-bottom: 8px;
}

.choice__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.choice__item:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface);
}

.choice__item input {
  margin-top: 4px;
  accent-color: var(--ink);
}

.test-box {
  padding: 18px;
  border-radius: 16px;
  background: var(--surface-sunken);
}

.test-results {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
}

.test-results .notice {
  margin-bottom: 10px;
}

.test-results__next {
  font-weight: 600;
}

/* ---------- Usuarios ---------- */

.row-item--user {
  display: block;
  padding: 0;
}

.row-item--user.is-off .row-item__title {
  color: var(--ink-2);
}

.user-edit__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.user-edit__summary::-webkit-details-marker {
  display: none;
}

.user-edit__summary:hover {
  background: var(--surface-sunken);
}

.row-list > :first-child .user-edit__summary {
  border-radius: 15px 15px 0 0;
}

.row-list > :last-child details:not([open]) .user-edit__summary {
  border-radius: 0 0 15px 15px;
}

.row-list > :only-child details:not([open]) .user-edit__summary {
  border-radius: 15px;
}

.user-edit__caret {
  color: var(--ink-2);
  transition: transform 200ms var(--ease-out);
}

.user-edit[open] .user-edit__caret {
  transform: rotate(180deg);
}

.user-edit__form {
  padding: 4px 14px 18px 56px;
}

.quota-tag {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.quota-tag__src {
  color: var(--ink-2);
  font-weight: 500;
}

.add-box {
  margin-top: 20px;
}

.add-box > summary {
  display: inline-flex;
  list-style: none;
}

.add-box > summary::-webkit-details-marker {
  display: none;
}

.add-box[open] > summary {
  margin-bottom: 16px;
}

.add-box__form {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .user-edit[open] .user-edit__form,
  .add-box[open] .add-box__form {
    animation: rise-in 220ms var(--ease-out) both;
  }
}

/* ---------- Estado y zona de riesgo ---------- */

.status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.status-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok-icon);
  box-shadow: 0 0 0 5px var(--surface-sunken);
}

.status-card--off .status-card__dot {
  background: var(--warn-ink);
  box-shadow: 0 0 0 5px var(--warn-bg);
}

.status-card__text {
  flex: 1;
  min-width: 220px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.status-card__title {
  color: var(--ink);
  font-weight: 800;
}

.danger-zone {
  padding: 18px;
  border: 1px solid var(--danger-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--danger-bg) 60%, transparent);
}

.btn--danger {
  color: var(--danger-ink);
}

.btn--danger-solid {
  background: var(--danger-ink);
  color: #FFFFFF;
}

.btn--danger-solid:hover {
  background: color-mix(in srgb, var(--danger-ink) 85%, black);
}

@media (prefers-color-scheme: dark) {
  .btn--danger-solid {
    color: var(--negro);
  }
}

/* ---------- Adaptación ---------- */

@media (max-width: 960px) {
  .slots,
  .server-grid,
  .cobrand-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .topnav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    justify-content: space-around;
    margin: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgb(14 14 14 / 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }

  .page--admin .admin__inner {
    padding-bottom: 96px;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .client-row__users,
  .client-row__go {
    display: none;
  }

  .client-panel {
    padding: 20px;
  }

  .user-edit__form {
    padding-left: 14px;
  }

  .quota-tag {
    display: none;
  }
}

/* Las miniaturas de logos de clientes siempre sobre hueso: así se ven como el cliente los diseñó */
.client-row__logo,
.client-head__logo {
  background: var(--hueso);
  box-shadow: inset 0 0 0 1px rgb(14 14 14 / 0.06);
}

@media (max-width: 860px) {
  /* Un elemento con desenfoque sería el contenedor de la navegación fija: en el celular la barra va sólida */
  .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--negro);
  }

  .client-head__visit {
    flex-basis: 100%;
    justify-content: center;
  }

  .client-head__logo {
    width: 64px;
    height: 48px;
  }
}

/* El aviso de confirmación queda pegado al contenido que confirma */
.admin__notice + .admin__inner {
  padding-top: 20px;
}

/* =====================================================================
 * Webmail real (fase 3)
 * ===================================================================== */

/* Barra de progreso al navegar sin recargar */
body[data-loading]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  animation: loading-bar 1.2s var(--ease-out) infinite;
}

@keyframes loading-bar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-loading]::before {
    animation: none;
    opacity: 0.6;
  }
}

/* Avisos flotantes */
.toast-region {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--negro);
  color: var(--hueso);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 12px 30px -10px rgb(14 14 14 / 0.45);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.toast--error {
  background: var(--danger-ink);
  color: #FFFFFF;
}

.toast[data-leaving] {
  opacity: 0;
  transform: translateY(6px);
}

@media (max-width: 860px) {
  .toast-region {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* Menú de cuenta: el botón de salir es un formulario */
button.menu__item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notices-summary .menu__item {
  height: auto;
  min-height: 40px;
  padding: 10px 12px;
  white-space: normal;
}

.notices-empty {
  padding: 8px 10px 12px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.mail-top__me {
  padding: 0;
  border: 0;
  border-radius: 32%;
  background: none;
  cursor: pointer;
}

.mail-top .menu {
  top: calc(100% + 8px);
}

/* Lista */
.mail-list__meta a {
  color: inherit;
  font-weight: 700;
}

.msg.is-leaving,
li.is-leaving {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 14px 18px;
}

.pager__info {
  margin-right: auto;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.new-mail {
  display: flex;
}

/* Lectura: el correo vive en un iframe aislado que se ajusta a su contenido */
.letter__frame {
  display: block;
  width: 100%;
  min-height: 120px;
  margin: 18px 0 20px;
  border: 0;
  background: transparent;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  /* Los correos están diseñados para fondo claro: se leen sobre una hoja hueso */
  .letter__frame {
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--hueso);
  }
}

.images-blocked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunken);
  font-size: 0.875rem;
}

.images-blocked .text-btn {
  margin-left: auto;
  color: var(--ink);
  text-decoration: underline;
}

/* Redactar */
.mail-panes--solo {
  grid-template-columns: minmax(0, 1fr);
}

.mail-panes--solo .compose {
  max-width: 920px;
  margin: 0 auto;
}

.compose__error {
  margin: 12px 24px 0;
  padding: 10px 14px;
  border: 1px solid var(--danger-line);
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--ink);
  font-size: 0.875rem;
}

.combo .suggest {
  top: calc(100% + 6px);
}

.compose__forward {
  display: grid;
  gap: 8px;
  padding: 0 24px 12px;
}

.compose__forward .compose__files {
  padding: 0;
}

.dropzone {
  margin: 0 24px 18px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  transition: border-color 150ms ease, background-color 150ms ease, transform 200ms var(--ease-out);
}

.dropzone.is-dragging {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.01);
}

.dropzone.is-over-limit {
  border-color: var(--danger-ink);
}

.dropzone__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.dropzone__hint {
  color: var(--ink-2);
  font-weight: 500;
}

.dropzone .compose__files {
  padding: 10px 0 0;
}

.dropzone .compose__files:empty {
  display: none;
}

.file.is-new {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@media (max-width: 860px) {
  .dropzone,
  .compose__error {
    margin-right: 16px;
    margin-left: 16px;
  }

  .compose__forward {
    padding: 0 16px 12px;
  }

  .mail-top .menu-anchor {
    position: static;
  }

  .mail-top .menu {
    right: 12px;
  }
}

/* Esqueleto mientras llega el correo (respuesta inmediata al clic) */
.sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--line) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

.sk--btn {
  width: 110px;
  height: 30px;
  border-radius: var(--radius-pill);
}

.sk--title {
  width: 62%;
  height: 26px;
  margin-bottom: 22px;
}

.sk--meta {
  width: 40%;
  height: 40px;
  margin-bottom: 28px;
}

.sk--line {
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
}

.sk--short {
  width: 55%;
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
  }
}

/* Mientras carga otra carpeta, la lista actual se atenúa */
body[data-loading] .mail-list {
  opacity: 0.55;
  transition: opacity 150ms ease 120ms;
}

@media (max-width: 860px) {
  /* Cabecera móvil sin logo del cliente: Intux centrado y la foto a la derecha, sin montarse */
  .mail-top--solo .menu-anchor {
    grid-column: 3;
    justify-self: end;
  }
}

/* =====================================================================
   Fase 4: ajustes, contactos y calendario
   ===================================================================== */

/* ---------- Foto de perfil ---------- */

.avatar--xl {
  width: 96px;
  height: 96px;
  font-size: 1.75rem;
}

.photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.photo-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.photo-row__actions .field__hint {
  flex-basis: 100%;
}

.photo-row__pick {
  cursor: pointer;
}

.photo-row__pick:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.settings__form {
  display: grid;
  gap: 14px;
}

/* Campos que solo cuentan con el interruptor encendido */
.toggle-group {
  display: grid;
  gap: 14px;
  transition: opacity 200ms ease;
}

.toggle-group[data-off] {
  opacity: 0.5;
}

/* ---------- Sincronización ---------- */

/* La contraseña nueva: bloque oscuro con la clave en lima (lima solo sobre oscuro) */
.secret {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-panel);
  background: var(--negro);
  color: var(--hueso);
}

.secret__title {
  font-weight: 700;
}

.secret__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.secret__value {
  color: var(--lima);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: all;
}

.secret .btn--secondary {
  border-color: var(--negro-line);
  background: var(--negro-3);
  color: var(--hueso);
}

.secret__hint {
  color: var(--hueso-2);
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
  .secret {
    animation: rise-in 320ms var(--ease-out) both;
  }
}

.howto {
  border: 1px solid var(--line);
  border-radius: 14px;
}

.howto__item + .howto__item {
  border-top: 1px solid var(--line);
}

.howto__item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.howto__item summary::-webkit-details-marker {
  display: none;
}

.howto__item summary .icon {
  color: var(--ink-2);
}

.howto__caret {
  margin-left: auto;
  transition: transform 200ms var(--ease-out);
}

.howto__item[open] .howto__caret {
  transform: rotate(180deg);
}

.howto__item ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 18px 16px 44px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.devices .device + .device {
  border-top: 1px solid var(--line);
}

.device form {
  margin-left: auto;
}

.device form .btn {
  margin-left: 0;
}

.device-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.device-new > .btn {
  margin-top: 27px;
}

/* ---------- Panel derecho: formularios ---------- */

.toolbar__title {
  margin-left: 6px;
  font-weight: 700;
}

.toolbar form {
  display: contents;
}

.sheet {
  display: grid;
  gap: 14px;
  max-width: 640px;
  padding: 22px 24px 40px;
}

.calendar__side .sheet {
  padding: 18px 20px 32px;
}

.calendar__side .form--two {
  grid-template-columns: minmax(0, 1fr);
}

[data-region="read"][aria-busy="true"] > * {
  opacity: 0.55;
  transition: opacity 150ms ease;
}

.when {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.when__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
}

.when__row:has(.when__time[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.kind-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kind-pick__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.kind-pick__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kind-pick__item:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-sunken);
}

.kind-pick__item:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.suggest-field {
  position: relative;
}

/* ---------- Tipos de evento ---------- */

.ev--empresa,
.tev--empresa {
  background: var(--accent);
  color: var(--accent-ink);
}

.ev--allday {
  font-weight: 600;
}

.kind-dot--empresa {
  background: var(--accent);
}

/* ---------- Mes ---------- */

a.day__num {
  text-decoration: none;
}

a.day__num:hover {
  background: var(--surface-sunken);
}

.day--today a.day__num:hover {
  background: var(--accent);
}

.day__more {
  padding: 1px 7px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.day__more:hover {
  color: var(--ink);
}

.side-empty {
  padding: 8px 20px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

/* ---------- Semana y día: rejilla de horas ---------- */

.timegrid {
  --cols: 7;
  --hour: 48px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 18px 18px;
}

.timegrid--1 {
  --cols: 1;
}

.timegrid__head,
.timegrid__allday,
.timegrid__body {
  display: grid;
  grid-template-columns: 64px repeat(var(--cols), minmax(0, 1fr));
}

.timegrid__day {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  color: var(--ink-2);
  text-decoration: none;
}

.timegrid__wd {
  font-size: 0.75rem;
  font-weight: 700;
}

.timegrid__num {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.timegrid__day.is-today .timegrid__num {
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
}

.timegrid__allday {
  border-top: 1px solid var(--line);
}

.timegrid__label {
  padding: 6px 8px 6px 0;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: right;
}

.timegrid__allday-cell {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 4px;
  border-left: 1px solid var(--line);
}

.timegrid__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  overscroll-behavior: contain;
}

.timegrid__body {
  height: calc(var(--hour) * 24);
}

.timegrid__hours {
  display: grid;
  grid-template-rows: repeat(24, minmax(0, 1fr));
}

.timegrid__hours::before {
  content: "";
}

.timegrid__hour {
  padding-right: 10px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  transform: translateY(-0.6em);
}

.timegrid__col {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(48, minmax(0, 1fr));
  min-width: 0;
  border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% var(--hour);
}

.timegrid__col.is-today {
  background-color: color-mix(in srgb, var(--surface-sunken) 35%, transparent);
}

.timegrid__slots {
  display: grid;
  grid-row: 1 / -1;
  grid-column: 1;
  grid-template-rows: repeat(24, minmax(0, 1fr));
}

.timegrid__slot:hover {
  background: color-mix(in srgb, var(--surface-sunken) 60%, transparent);
}

.tev {
  --lane: 0;
  --lanes: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-column: 1;
  justify-self: start;
  width: calc(100% / var(--lanes) - 4px);
  min-width: 0;
  margin: 1px 0 1px calc(100% * var(--lane) / var(--lanes) + 2px);
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.25;
  text-decoration: none;
}

.tev__title {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tev__time {
  opacity: 0.8;
}

.tev--short {
  flex-direction: row;
  gap: 6px;
  padding-block: 2px;
}

.tev--short .tev__time {
  display: none;
}

.tev--equipo {
  background: var(--surface-sunken);
  box-shadow: inset 3px 0 0 var(--ink-2);
}

.tev--personal {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.tev:hover {
  filter: brightness(0.96);
}

.tev.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.timegrid__now {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  background: var(--ink);
  pointer-events: none;
}

.timegrid__now::before {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

/* ---------- Agenda ---------- */

.agenda-view {
  flex: 1;
  min-height: 0;
  padding: 0 28px 40px;
  overflow-y: auto;
}

.agenda-day {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.agenda-day__date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
}

.agenda-day__num {
  min-width: 2ch;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.agenda-day--today .agenda-day__num {
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
}

.agenda-day__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agenda-row {
  display: grid;
  grid-template-columns: 10px 96px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.agenda-row:hover,
.agenda-row.is-selected {
  background: var(--accent-row);
}

.agenda-row__time {
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.agenda-row__title {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-row__place {
  display: flex;
  grid-column: 3;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.agenda-row__place .icon {
  width: 14px;
  height: 14px;
}

/* ---------- Aviso de recordatorio ---------- */

.toast--reminder a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.toast--reminder .icon {
  color: var(--lima);
}

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  .photo-row {
    align-items: flex-start;
  }

  .device-new {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-new > .btn {
    margin-top: 0;
  }

  .sheet {
    padding: 18px 16px 32px;
  }

  .timegrid {
    --hour: 44px;
    padding: 0 8px 8px;
  }

  .timegrid__head,
  .timegrid__allday,
  .timegrid__body {
    grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr));
  }

  .timegrid__day {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6px 0;
  }

  .timegrid__num {
    font-size: 1rem;
  }

  .timegrid__hour {
    padding-right: 6px;
    font-size: 0.625rem;
  }

  .timegrid__scroll {
    max-height: 62dvh;
  }

  .tev {
    padding: 3px 4px;
    font-size: 0.6875rem;
  }

  .agenda-view {
    padding: 0 16px 24px;
    overflow: visible;
  }

  .agenda-day {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .agenda-row {
    grid-template-columns: 10px 84px minmax(0, 1fr);
    padding: 8px 4px;
  }

  /* En el celular el panel de un evento o contacto ocupa la pantalla */
  .calendar.is-reading .calendar__main {
    display: none;
  }

  .calendar.is-reading .calendar__side {
    border-top: 0;
  }
}

/* ---------- Ajustes de la fase 4 ---------- */

/* La rejilla de horas tiene alto fijo: un evento con mucho texto no la estira */
.timegrid__body {
  grid-template-rows: calc(var(--hour) * 24);
}

.tev__time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-head--calendar h1 {
  font-size: 1.375rem;
  white-space: nowrap;
}

.cal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Ajustes: el título se desplaza con la página (sin barra de vidrio flotante) */
.settings__head {
  position: static;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Fichas del equipo: la barra solo hace falta en el celular (botón volver) */
@media (min-width: 861px) {
  .toolbar--mobile {
    display: none;
  }
}

@media (max-width: 860px) {
  .pane-head--calendar h1 {
    flex-basis: 100%;
    font-size: 1.375rem;
  }

  .pane-head--calendar .month-nav {
    margin-right: auto;
  }

  .cal-actions {
    flex-basis: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .cal-actions .segmented a {
    padding-inline: 11px;
  }

  .timegrid--7 .tev__time {
    display: none;
  }

  .timegrid--7 .tev {
    padding-inline: 3px;
  }

  .timegrid--7 .tev__title {
    text-overflow: clip;
  }

  /* El panel del evento no es un contenedor con scroll en el celular (la barra queda bajo la cabecera) */
  .calendar__side {
    overflow: visible;
  }

  .photo-row .avatar--xl {
    width: 72px;
    height: 72px;
  }
}

/* ---------- Mes: clic en el espacio libre de un día = nuevo evento ese día ---------- */

.day {
  position: relative;
}

.day__add {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px;
  color: var(--ink-2);
  cursor: cell;
}

.day > :not(.day__add) {
  position: relative;
  z-index: 1;
}

.day__plus {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 150ms ease, transform 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .day:hover {
    background-color: color-mix(in srgb, var(--surface-sunken) 40%, transparent);
  }

  .day:hover .day__plus {
    opacity: 1;
    transform: none;
  }
}

.day__add:focus-visible .day__plus {
  opacity: 1;
  transform: none;
}

.day.is-picked {
  box-shadow: inset 0 0 0 2px var(--ink);
}

@media (max-width: 860px) {
  .day__plus {
    display: none;
  }
}

/* Fecha y hora caben en el panel lateral */
.when__row > *,
.when .field__input {
  min-width: 0;
  width: 100%;
}

.when__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.when .field,
.when .field__control {
  min-width: 0;
}

.calendar__side .when .field__input {
  padding-inline: 10px;
  font-size: 0.875rem;
}

/* =====================================================================
   Fase 5: Documentos
   ===================================================================== */

.drive {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.drive__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.drive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

.drive__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drive__note {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* Ruta: la carpeta actual manda; las anteriores se leen más suaves */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 4px 8px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.crumbs__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs__item[aria-current] {
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.crumbs__item:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.crumbs__sep {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
}

.select--small {
  height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  background-position: right 12px center;
}

.segmented--icons button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.segmented--icons button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(14 14 14 / 0.1);
}

.segmented--icons .icon {
  width: 17px;
  height: 17px;
}

.menu--new {
  right: auto;
  left: 0;
  width: 240px;
  transform-origin: top left;
}

label.menu__item {
  cursor: pointer;
}

/* Barra de selección: negra, con el acento lima (lima solo sobre oscuro) */
.selbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 16px;
  background: var(--negro);
  color: var(--hueso);
}

.selbar__count {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selbar__actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.selbar .icon-btn,
.selbar .btn--quiet {
  color: var(--hueso);
}

.selbar .icon-btn:hover,
.selbar .btn--quiet:hover {
  background: var(--negro-3);
}

.selbar .icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.selbar .icon-btn.is-on {
  color: var(--lima);
}

.selbar :focus-visible {
  outline-color: var(--lima);
}

@media (prefers-reduced-motion: no-preference) {
  .selbar:not([hidden]) {
    animation: selbar-in 200ms var(--ease-out);
  }
}

@keyframes selbar-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.drive__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px 24px 120px;
  overflow-y: auto;
  outline: none;
}

.drive__group {
  margin: 18px 2px 10px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.drive__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.drive-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 420px;
  margin: 72px auto 0;
  color: var(--ink-2);
  text-align: center;
}

.drive-empty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 24px;
  background: var(--negro);
  color: var(--lima);
}

.drive-empty__icon .icon {
  width: 32px;
  height: 32px;
}

.drive-empty__title {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
}

/* ---------- Elementos: cuadrícula ---------- */

.files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.files--folders {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.fitem {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

.fitem:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
}

.fitem[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--accent-row);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.fitem__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken);
  color: var(--ink-2);
}

.fitem__thumb .icon {
  width: 42px;
  height: 42px;
}

.fitem__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fitem__thumb--pdf,
.fitem__thumb--sheet,
.fitem__thumb--doc,
.fitem__thumb--slides {
  color: var(--ink);
}

.fitem__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 40px 12px 12px;
}

.fitem__name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitem__meta {
  display: flex;
  gap: 6px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.fitem__size,
.fitem__owner {
  display: none;
}

.fitem__badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}

.fitem__badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgb(250 249 246 / 0.9);
  color: var(--ink);
}

.fitem__badge .icon {
  width: 14px;
  height: 14px;
}

.fitem__badge--star {
  background: var(--negro);
  color: var(--lima);
}

.fitem__more {
  position: absolute;
  right: 6px;
  bottom: 8px;
}

/* Casilla de selección: aparece al pasar el mouse o al seleccionar */
.fitem__check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 150ms ease, transform 150ms var(--ease-out), background-color 150ms ease;
}

.fitem__check .icon {
  width: 14px;
  height: 14px;
}

/* Como en Drive: el check solo se ve en lo seleccionado. En pantallas táctiles, mientras
   hay selección, se ven en todas para poder sumar más con un toque. */
.fitem[aria-selected="true"] .fitem__check {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .drive.has-selection .fitem__check {
    opacity: 1;
    transform: none;
  }
}

.fitem[aria-selected="true"] .fitem__check {
  border-color: var(--negro);
  background: var(--negro);
  color: var(--lima);
}

@media (hover: hover) and (pointer: fine) {
  /* Pasar el mouse: solo un tono más, sin casillas ni bordes que distraigan */
  .fitem:hover:not([aria-selected="true"]) {
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  }

  .fitem__more {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .fitem:hover .fitem__more,
  .fitem:focus-within .fitem__more,
  .fitem[aria-selected="true"] .fitem__more {
    opacity: 1;
  }
}

/* Carpetas: fichas compactas en una línea */
.fitem--folder {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
}

.fitem--folder .fitem__thumb {
  aspect-ratio: auto;
  width: 40px;
  height: 40px;
  margin: 10px 0 10px 12px;
  border-radius: 12px;
  background: var(--negro);
  color: var(--lima);
}

.fitem--folder .fitem__thumb .icon {
  width: 20px;
  height: 20px;
}

.fitem--folder .fitem__body {
  padding: 10px 70px 10px 4px;
}

.fitem--folder .fitem__badges {
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}

.fitem--folder .fitem__more {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.fitem--folder .fitem__check {
  top: 18px;
  left: 20px;
}

.fitem--folder .fitem__badge {
  background: none;
}

/* ---------- Elementos: lista ---------- */

.drive[data-view="list"] .files {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.drive[data-view="list"] .fitem {
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  grid-template-rows: none;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 44px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.drive[data-view="list"] .fitem[aria-selected="true"] {
  background: var(--accent-row);
  box-shadow: inset 3px 0 0 var(--ink);
}

.drive[data-view="list"] .fitem__thumb {
  aspect-ratio: auto;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 10px;
}

.drive[data-view="list"] .fitem__thumb .icon {
  width: 18px;
  height: 18px;
}

.drive[data-view="list"] .fitem__body {
  grid-template-columns: minmax(0, 1fr) 150px 130px 90px;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.drive[data-view="list"] .fitem__meta {
  display: contents;
}

.drive[data-view="list"] .fitem__owner,
.drive[data-view="list"] .fitem__size {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
}

.drive[data-view="list"] .fitem__date {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.drive[data-view="list"] .fitem__badges,
.drive[data-view="list"] .fitem__more {
  position: static;
  transform: none;
}

.drive[data-view="list"] .fitem__badge {
  background: none;
}

.drive[data-view="list"] .fitem__badge--star {
  color: var(--ink);
}

.drive[data-view="list"] .fitem__check {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .drive[data-view="list"] .fitem:hover {
    background: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
  }
}

/* ---------- Movimiento de los elementos ---------- */

.fitem.is-dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--ink);
  background-color: var(--accent-row);
}

.fitem.is-drop-target {
  transform: scale(1.02);
}

.fitem.is-leaving {
  opacity: 0;
  transform: scale(0.94);
}

@media (prefers-reduced-motion: no-preference) {
  /* Más específico que la entrada escalonada: si no, la tarjeta resaltada volvía a entrar borrosa */
  .files > .fitem.is-new,
  .fitem.is-new {
    animation: fitem-new 1400ms var(--ease-out);
  }

  /* Entrada escalonada corta al abrir una carpeta (Documentos no se usa cientos de veces al día) */
  .files > .fitem {
    animation: rise-in 260ms var(--ease-out) both;
  }

  .files > .fitem:nth-child(2) { animation-delay: 25ms; }
  .files > .fitem:nth-child(3) { animation-delay: 50ms; }
  .files > .fitem:nth-child(4) { animation-delay: 75ms; }
  .files > .fitem:nth-child(5) { animation-delay: 100ms; }
  .files > .fitem:nth-child(n+6) { animation-delay: 120ms; }
}

@keyframes fitem-new {
  0% {
    box-shadow: 0 0 0 0 rgb(14 14 14 / 0.35);
    transform: scale(0.96);
  }

  30% {
    box-shadow: 0 0 0 4px rgb(14 14 14 / 0.18);
    transform: none;
  }

  100% {
    box-shadow: 0 0 0 0 rgb(14 14 14 / 0);
  }
}

/* ---------- Soltar archivos ---------- */

.dropveil {
  position: absolute;
  inset: 10px;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 2px dashed var(--ink);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}

.drive.is-dropping .dropveil {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}

.dropveil__card {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.dropveil__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  border-radius: 26px;
  background: var(--negro);
  color: var(--lima);
}

.dropveil__icon .icon {
  width: 36px;
  height: 36px;
}

.dropveil__title {
  font-size: 1.25rem;
  font-weight: 800;
}

.dropveil__where {
  color: var(--ink-2);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .drive.is-dropping .dropveil__icon {
    animation: drop-bob 1100ms var(--ease-in-out) infinite alternate;
  }
}

@keyframes drop-bob {
  to {
    transform: translateY(-6px);
  }
}

.drag-ghost {
  position: fixed;
  top: -200px;
  left: -200px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--negro);
  color: var(--hueso);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.drag-ghost .icon {
  width: 16px;
  height: 16px;
  color: var(--lima);
}

/* ---------- Panel de subidas ---------- */

.uploads {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  width: min(380px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--glass-shine), 0 24px 48px -16px rgb(14 14 14 / 0.3);
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(16px);
  }
}

.uploads__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 10px 16px;
  background: var(--negro);
  color: var(--hueso);
}

.uploads__head .icon-btn {
  color: var(--hueso);
}

.uploads__head .icon-btn:hover {
  background: var(--negro-3);
}

.uploads__title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 700;
}

.uploads.is-collapsed .uploads__list {
  display: none;
}

.uploads.is-collapsed [data-uploads-toggle] .icon {
  transform: rotate(180deg);
}

.uploads__list {
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}

.upload {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 12px;
}

.upload__icon {
  color: var(--ink-2);
}

.upload__text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.upload__name {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__state {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.upload__bar {
  position: absolute;
  right: 46px;
  bottom: 4px;
  left: 46px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
}

.upload__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms linear;
}

.upload.is-done .upload__icon {
  color: var(--ink);
}

.upload.is-done .upload__bar {
  opacity: 0;
  transition: opacity 400ms ease 300ms;
}

.upload.is-failed .upload__state {
  color: var(--danger-ink);
}

.upload.is-failed .upload__fill {
  background: var(--danger-ink);
}

/* ---------- Menú contextual ---------- */

.ctx {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  z-index: 70;
}

.menu__sep {
  height: 1px;
  margin: 6px 8px;
  border: 0;
  background: var(--line);
}

.menu__item--danger {
  color: var(--danger-ink);
}

.menu__item--danger .icon {
  color: currentColor;
}

/* ---------- Diálogos ---------- */

.dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.dialog::backdrop,
.viewer::backdrop {
  background: rgb(14 14 14 / 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.dialog__card {
  display: grid;
  gap: 14px;
  width: min(480px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 48px));
  padding: 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--glass-shine), 0 30px 60px -20px rgb(14 14 14 / 0.4);
}

.dialog__card--small {
  width: min(400px, calc(100vw - 32px));
}

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] .dialog__card,
  .viewer[open] {
    animation: dialog-in 220ms var(--ease-out);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog__title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dialog__lead {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tree {
  display: grid;
  gap: 2px;
  min-height: 160px;
  max-height: 360px;
  margin: 0 -8px;
  padding: 4px;
  overflow-y: auto;
}

.tree__loading {
  padding: 16px;
  color: var(--ink-2);
}

.tree__row {
  --depth: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px calc(10px + var(--depth) * 20px);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.tree__row input {
  position: absolute;
  opacity: 0;
}

.tree__row .icon {
  color: var(--ink-2);
}

.tree__row:hover {
  background: var(--surface-sunken);
}

.tree__row:has(input:checked) {
  background: var(--negro);
  color: var(--hueso);
}

.tree__row:has(input:checked) .icon {
  color: var(--lima);
}

.tree__row:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

.tree__row:has(input:focus-visible) {
  outline: 2px solid var(--focus);
}

.share-list {
  display: grid;
  gap: 2px;
  max-height: 320px;
  margin: 0 -8px;
  padding: 0 4px;
  overflow-y: auto;
  list-style: none;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.share-row input {
  position: absolute;
  opacity: 0;
}

.share-row:hover {
  background: var(--surface-sunken);
}

.share-row__text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.share-row__name {
  font-weight: 700;
}

.share-row__sub {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-row__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.share-row:has(input:checked) .share-row__check {
  border-color: var(--negro);
  background: var(--negro);
  color: var(--lima);
}

.share-row:has(input:focus-visible) {
  outline: 2px solid var(--focus);
}

/* ---------- Visor ---------- */

.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(14 14 14 / 0.94);
  color: var(--hueso);
}

.viewer[open] {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: auto minmax(0, 1fr);
}

.viewer__bar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.viewer__bar .icon-btn {
  color: var(--hueso);
}

.viewer__bar .icon-btn:hover {
  background: var(--negro-3);
}

.viewer__bar .btn--secondary {
  border-color: var(--negro-line);
  background: var(--negro-3);
  color: var(--hueso);
}

.viewer__title {
  flex: 1;
  min-width: 0;
}

.viewer__name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__meta {
  color: var(--hueso-2);
  font-size: 0.8125rem;
}

.viewer__stage {
  display: grid;
  grid-column: 2;
  place-items: center;
  min-height: 0;
  padding: 8px 0 24px;
}

.viewer__stage img,
.viewer__stage video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}

.viewer__stage iframe {
  width: min(1000px, 100%);
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: #FFFFFF;
}

.viewer__stage audio {
  width: min(520px, 100%);
}

.viewer__text {
  width: min(900px, 100%);
  height: 100%;
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 0.875rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
}

.viewer__none {
  display: grid;
  justify-items: center;
  gap: 16px;
  color: var(--hueso-2);
  text-align: center;
}

.viewer__none .icon {
  width: 64px;
  height: 64px;
  color: var(--lima);
}

.viewer__nav {
  display: grid;
  align-self: center;
  justify-self: center;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--negro-3);
  color: var(--hueso);
  cursor: pointer;
}

.viewer__nav:hover {
  background: #33332F;
}

.viewer__nav--prev {
  grid-column: 1;
  grid-row: 2;
}

.viewer__nav--next {
  grid-column: 3;
  grid-row: 2;
}

.viewer :focus-visible {
  outline-color: var(--lima);
}

/* ---------- Adjuntar desde Documentos ---------- */

.picker__tabs {
  flex-wrap: wrap;
}

.picker__tabs button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.picker__crumbs:empty {
  display: none;
}

.picker__crumbs .text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.picker__list {
  display: grid;
  gap: 2px;
  min-height: 200px;
  max-height: 360px;
  margin: 0 -8px;
  padding: 0 4px;
  overflow-y: auto;
  list-style: none;
}

.picker__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.picker__row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.picker__row:hover {
  background: var(--surface-sunken);
}

.picker__row input {
  width: 18px;
  height: 18px;
  accent-color: var(--negro);
}

.picker__name {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker__meta {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.picker__empty {
  padding: 24px 12px;
  color: var(--ink-2);
}

.picker__count {
  margin-right: auto;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.dropzone__docs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Guardar un adjunto en Documentos (vista de lectura) */
.attachments__list li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.attachments__list li .file {
  flex: 1;
  min-width: 0;
}

.file__save .icon-btn.is-on {
  color: var(--ink);
}

/* Avisos con acción («Deshacer», «Abrir») */
.toast__action {
  margin-left: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lima);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
}

/* Espacio usado (barra lateral oscura) */
.quota {
  display: grid;
  gap: 8px;
  margin: 14px 12px 4px;
}

.quota__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--negro-3);
}

.quota__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--lima);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}

.quota--full .quota__fill {
  background: #F2994A;
}

.quota__text {
  color: var(--hueso-2);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Documentos en el celular ---------- */

@media (max-width: 860px) {
  .drive {
    height: auto;
  }

  .drive__head {
    position: sticky;
    top: 60px;
    padding: 12px 16px;
  }

  .drive__scroll {
    padding: 4px 16px 140px;
    overflow: visible;
  }

  .crumbs__item {
    max-width: 180px;
  }

  .crumbs__item[aria-current] {
    font-size: 1.1875rem;
  }

  .files {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .files--folders {
    grid-template-columns: minmax(0, 1fr);
  }

  .drive[data-view="list"] .fitem {
    padding-left: 8px;
  }

  .drive[data-view="list"] .fitem__check {
    display: none;
  }

  .drive[data-view="list"] .fitem__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .drive[data-view="list"] .fitem__owner,
  .drive[data-view="list"] .fitem__size {
    display: none;
  }

  .uploads {
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .viewer[open] {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  .viewer__nav {
    position: fixed;
    bottom: 24px;
  }

  .viewer__nav--prev {
    left: 24px;
  }

  .viewer__nav--next {
    right: 24px;
  }

  .ctx {
    width: min(260px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .drive__head,
  .dropveil {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Relleno del medidor de espacio en pasos de 5 % (sin estilos en línea por la CSP) */
.quota__fill--0 { transform: scaleX(0); }
.quota__fill--5 { transform: scaleX(0.05); }
.quota__fill--10 { transform: scaleX(0.1); }
.quota__fill--15 { transform: scaleX(0.15); }
.quota__fill--20 { transform: scaleX(0.2); }
.quota__fill--25 { transform: scaleX(0.25); }
.quota__fill--30 { transform: scaleX(0.3); }
.quota__fill--35 { transform: scaleX(0.35); }
.quota__fill--40 { transform: scaleX(0.4); }
.quota__fill--45 { transform: scaleX(0.45); }
.quota__fill--50 { transform: scaleX(0.5); }
.quota__fill--55 { transform: scaleX(0.55); }
.quota__fill--60 { transform: scaleX(0.6); }
.quota__fill--65 { transform: scaleX(0.65); }
.quota__fill--70 { transform: scaleX(0.7); }
.quota__fill--75 { transform: scaleX(0.75); }
.quota__fill--80 { transform: scaleX(0.8); }
.quota__fill--85 { transform: scaleX(0.85); }
.quota__fill--90 { transform: scaleX(0.9); }
.quota__fill--95 { transform: scaleX(0.95); }
.quota__fill--100 { transform: scaleX(1); }

.quota-tag__used {
  color: var(--ink-2);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .fitem__badge {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
}

/* Barra de pestañas del celular: cinco aplicaciones en una sola fila */
@media (max-width: 860px) {
  .tabbar {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .tabbar__item {
    min-width: 0;
    font-size: 0.6875rem;
  }

  .tabbar__item span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
   Documentos: visor ampliado, detalles y movimiento
   ===================================================================== */

/* Visor aislado (Word, Excel, PowerPoint, Photoshop, TIFF, HEIC, ZIP, fuentes) */
.viewer__isolated {
  position: relative;
  width: min(1100px, 100%);
  height: 100%;
}

.viewer__isolated iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #EDECE7;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.viewer__isolated.is-ready iframe {
  opacity: 1;
}

.viewer__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--hueso-2);
  font-weight: 600;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.viewer__isolated.is-ready .viewer__loading {
  opacity: 0;
}

/* Miniaturas: aparecen al terminar de cargar */
.fitem__thumb img[data-thumb] {
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

.fitem__thumb img[data-thumb].is-loaded {
  opacity: 1;
}

/* Cortado: se ve apagado hasta pegarlo */
.fitem.is-cut {
  opacity: 0.5;
}

.fitem.is-cut .fitem__thumb {
  filter: grayscale(1);
}

/* Destino que recibe archivos (carpeta o Papelera) */
.is-receiving {
  animation: receive 600ms var(--ease-out);
}

@keyframes receive {
  30% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgb(198 244 50 / 0.35);
  }
}

.fitem--flying {
  box-shadow: 0 20px 40px -14px rgb(14 14 14 / 0.45);
}

/* Subida en curso: anillo de progreso dentro de la ficha */
.fitem--uploading {
  --p: 0;
  border-style: dashed;
}

.fitem--uploading .fitem__thumb {
  background: var(--surface);
}

.ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--p) * 360deg), var(--line) 0);
  transition: background 200ms linear;
}

.ring::before {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.ring__value {
  position: relative;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fitem--uploading.is-done {
  border-style: solid;
}

.fitem--uploading.is-done .ring {
  background: var(--negro);
}

.fitem--uploading.is-done .ring::before {
  background: var(--negro);
}

.fitem--uploading.is-done .ring__value {
  color: var(--lima);
}

@media (prefers-reduced-motion: no-preference) {
  .fitem--uploading {
    animation: rise-in 260ms var(--ease-out) both;
  }

  /* Opciones del menú contextual: entran escalonadas (muy breve) */
  .ctx[data-open="true"] .menu__item {
    animation: menu-item-in 220ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 16ms);
  }
}

@keyframes menu-item-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}

/* La carpeta que se abre se convierte en el contenido nuevo */
::view-transition-group(carpeta-abierta) {
  animation-duration: 360ms;
  animation-timing-function: var(--ease-in-out);
}

::view-transition-old(carpeta-abierta) {
  animation: vt-fade-out 160ms ease both;
}

::view-transition-new(carpeta-abierta) {
  animation: vt-rise-in 300ms var(--ease-out) both;
}

html[data-opening] .drive__scroll {
  view-transition-name: carpeta-abierta;
}

/* Selección con recuadro */
.lasso {
  position: fixed;
  z-index: 40;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  pointer-events: none;
}

body.is-lassoing {
  user-select: none;
  -webkit-user-select: none;
}

/* Panel de detalles */
.details {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: min(380px, 100%);
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -24px 0 48px -32px rgb(14 14 14 / 0.35);
  transform: translateX(16px);
  opacity: 0;
  transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}

.details.is-open {
  transform: none;
  opacity: 1;
}

.details__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.details__title {
  font-size: 1rem;
  font-weight: 800;
}

.details__body {
  flex: 1;
  padding: 18px 20px 32px;
  overflow-y: auto;
}

.details__loading,
.details__note {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.details__hero {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.details__hero .fitem__thumb {
  border-radius: 14px;
}

.details__name {
  font-size: 1.0625rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.details__facts {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.details__facts div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.875rem;
}

.details__facts dt {
  color: var(--ink-2);
}

.details__facts dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  overflow-wrap: anywhere;
}

.details__facts dd .icon {
  width: 15px;
  height: 15px;
}

.details__sub {
  margin-bottom: 10px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.timeline {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--line);
  list-style: none;
}

.timeline li {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.45;
}

.timeline li::before {
  position: absolute;
  top: 6px;
  left: -21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.timeline time {
  display: block;
  color: var(--ink-2);
  font-size: 0.75rem;
}

@media (max-width: 860px) {
  .details {
    position: fixed;
    top: auto;
    left: 0;
    max-height: 80dvh;
    width: 100%;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(24px);
    z-index: 65;
  }
}

.ring {
  position: relative;
}

/* Los SVG (logos, íconos) se ven completos, no recortados */
.fitem__thumb img.is-vector {
  padding: 14%;
  object-fit: contain;
  background: var(--surface);
}

/* =====================================================================
   Compartir: panel, diálogo y página del enlace
   ===================================================================== */

/* Panel: tablas y etiquetas */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}

.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.45;
}

.table tr:last-child td {
  border-bottom: 0;
}

.muted {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.count-tag {
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: middle;
}

.badge--warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.badge--warn::before {
  background: var(--warn-ink);
}

.timeline--admin {
  margin-top: 6px;
}

/* Marcas en los elementos: enlace público */
.fitem__badge--public {
  background: var(--negro);
  color: var(--lima);
}

/* Diálogo de compartir */
.dialog__card--share {
  width: min(600px, calc(100vw - 32px));
  overflow-y: auto;
}

.share-sec {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.share-sec__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.share-sec__title .icon {
  color: var(--ink-2);
}

.dialog__hint {
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.share-row__role {
  flex: none;
  width: auto;
}

.link-url {
  display: flex;
  gap: 8px;
}

.link-url .field__input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
}

.link-on.is-public .link-url .field__input {
  border-color: var(--warn-ink);
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.link-scope {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.link-scope .kind-pick__item {
  justify-self: start;
}

.kind-pick__item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.field__optional {
  color: var(--ink-2);
  font-weight: 500;
}

.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-actions__off {
  color: var(--danger-ink);
}

@media (max-width: 560px) {
  .link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .share-list .share-row {
    flex-wrap: wrap;
  }
}

/* Página pública del enlace */
.page--share {
  min-height: 100dvh;
  background: var(--bg);
}

.share-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px;
}

.share-top__safe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--negro);
  color: var(--hueso);
  font-size: 0.8125rem;
  font-weight: 700;
}

.share-top__safe .icon {
  width: 15px;
  height: 15px;
  color: var(--lima);
}

.share-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.share-foot {
  display: flex;
  justify-content: center;
  padding: 24px 24px 40px;
}

.share-head {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.share-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.share-crumbs a {
  color: var(--ink-2);
}

.share-crumbs__sep {
  width: 13px;
  height: 13px;
}

.share-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.share-head__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--negro);
  color: var(--lima);
}

.share-head__icon .icon {
  width: 26px;
  height: 26px;
}

.share-head__text {
  flex: 1;
  min-width: 0;
}

.share-head h1 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.share-head__meta,
.share-head__perm {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.share-head__perm {
  font-weight: 600;
}

.share-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface-sunken);
  font-weight: 600;
}

.share-msg--error {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.share-stage {
  display: grid;
  place-items: center;
  min-height: 60dvh;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.share-stage img,
.share-stage video {
  max-width: 100%;
  max-height: 75dvh;
  border-radius: 10px;
}

.share-stage iframe {
  width: 100%;
  height: 75dvh;
  border: 0;
  border-radius: 10px;
}

.share-stage audio {
  width: min(520px, 100%);
}

.share-isolated {
  position: relative;
  width: 100%;
  height: 75dvh;
}

.share-isolated iframe {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.share-isolated.is-ready iframe {
  opacity: 1;
}

.share-stage__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-weight: 600;
}

.share-isolated.is-ready .share-stage__loading {
  display: none;
}

.share-text {
  width: 100%;
  max-height: 75dvh;
  margin: 0;
  overflow: auto;
  font: 0.875rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
}

.share-none {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--ink-2);
  text-align: center;
}

.share-item {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.share-files .fitem {
  cursor: pointer;
}

.share-files .fitem__body {
  padding-right: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .share-files .fitem:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
  }
}

.share-upload {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.share-upload__zone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 20px;
  border: 2px dashed var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms var(--ease-out);
}

.share-upload__zone:hover,
.share-upload__zone.is-dragging {
  border-color: var(--ink);
}

.share-upload__zone.is-dragging {
  transform: scale(1.01);
}

.share-upload__zone:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.share-upload__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--negro);
  color: var(--lima);
}

.share-upload__title {
  font-weight: 800;
}

.share-upload__hint {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.share-upload__list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.share-upload .btn {
  justify-self: start;
}

/* Puerta: contraseña, inicio de sesión o aviso */
.share-gate {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 8vh auto 0;
  padding: 36px 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  text-align: center;
}

.share-gate h1 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.share-gate p {
  color: var(--ink-2);
}

.share-gate__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: var(--negro);
  color: var(--lima);
}

.share-gate__icon .icon {
  width: 28px;
  height: 28px;
}

.share-gate__form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.share-gate__form .field__input {
  flex: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .share-head,
  .share-stage,
  .share-gate,
  .share-files {
    animation: rise-in 320ms var(--ease-out) both;
  }

  .share-stage,
  .share-files {
    animation-delay: 60ms;
  }
}

@media (max-width: 640px) {
  .share-top {
    padding: 16px;
  }

  .share-top__safe span {
    display: none;
  }

  .share-main {
    padding: 4px 16px 48px;
  }

  .share-head__actions {
    width: 100%;
  }

  .share-head__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.link-note {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-sunken);
  font-size: 0.8125rem;
  font-weight: 600;
}

.link-note.is-error {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .link-note:not([hidden]) {
    animation: rise-in 200ms var(--ease-out);
  }
}

.share-top__safe {
  white-space: nowrap;
}

.table--compact td {
  padding: 9px 14px;
}

.table--compact td:first-child {
  white-space: nowrap;
}

/* =====================================================================
 * Acceso al webmail: lienzo negro con luz lima y tarjeta de vidrio líquido
 * - Siempre oscuro: es el momento de marca de Intux y el lima solo va sobre negro.
 * - Todo en un contenedor centrado (máx. 1200 px): no se desequilibra en pantallas anchas.
 * - El vidrio tiene algo que refractar: luces lentas detrás (solo transform/opacity).
 * ===================================================================== */

body.page--mail-login {
  --bg: var(--negro);
  --surface: var(--negro-2);
  --surface-sunken: #1F1F1D;
  --ink: var(--hueso);
  --ink-2: #B3B2AB;
  --line: rgb(255 255 255 / 0.1);
  --line-strong: #6E6E68;
  --field-bg: rgb(10 10 10 / 0.55);
  --field-border: rgb(255 255 255 / 0.16);
  --ring: rgb(198 244 50 / 0.28);
  --focus: var(--lima);
  --accent: var(--lima);
  --accent-ink: var(--negro);
  --accent-hover: #D4F862;
  --btn-bg: var(--lima);
  --btn-ink: var(--negro);
  --btn-bg-hover: #D4F862;
  --ok-icon: var(--lima);
  --danger-ink: #FF9C8B;
  --danger-bg: rgb(42 22 19 / 0.8);
  --danger-line: #5C2B22;
  --warn-ink: #F2C96E;
  --warn-bg: rgb(38 31 14 / 0.8);
  --warn-line: #4E3D14;
  color-scheme: dark;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
}

body.page--mail-login::before {
  background: var(--negro);
}

body.page--mail-login ::selection {
  background: var(--lima);
  color: var(--negro);
}

/* ---------- Luz ambiental: tres manchas desenfocadas que derivan muy despacio ---------- */

.gate__light {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.gate__light span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.gate__light span:nth-child(1) {
  top: -18vmax;
  left: -12vmax;
  width: 58vmax;
  height: 58vmax;
  background: radial-gradient(circle at 50% 50%, rgb(198 244 50 / 0.2), transparent 64%);
}

.gate__light span:nth-child(2) {
  right: -16vmax;
  bottom: -22vmax;
  width: 62vmax;
  height: 62vmax;
  background: radial-gradient(circle at 50% 50%, rgb(120 150 30 / 0.22), transparent 62%);
}

.gate__light span:nth-child(3) {
  top: 30%;
  left: 52%;
  width: 34vmax;
  height: 34vmax;
  background: radial-gradient(circle at 50% 50%, rgb(242 241 236 / 0.08), transparent 66%);
}

@media (prefers-reduced-motion: no-preference) {
  .gate__light span:nth-child(1) { animation: gate-drift-a 26s ease-in-out infinite alternate; }
  .gate__light span:nth-child(2) { animation: gate-drift-b 32s ease-in-out infinite alternate; }
  .gate__light span:nth-child(3) { animation: gate-drift-c 22s ease-in-out infinite alternate; }
}

@keyframes gate-drift-a {
  to { transform: translate3d(14vmax, 10vmax, 0) scale(1.08); }
}

@keyframes gate-drift-b {
  to { transform: translate3d(-12vmax, -8vmax, 0) scale(0.94); }
}

@keyframes gate-drift-c {
  to { transform: translate3d(-18vmax, 6vmax, 0) scale(1.15); }
}

/* ---------- Composición ---------- */

.gate {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(1200px, 100% - 48px);
  min-height: 100dvh;
  margin-inline: auto;
  padding-block: clamp(28px, 5vh, 48px) 24px;
}

.gate__brand {
  display: flex;
  justify-content: center;
}

.gate__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 448px);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  padding-block: clamp(32px, 6vh, 72px);
}

.gate__headline {
  color: var(--hueso);
  font-size: clamp(3rem, 1.6rem + 3.4vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.gate__lead {
  max-width: 42ch;
  margin-top: 24px;
  color: #B3B2AB;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.gate__modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

/* Cada módulo es una gota de vidrio pequeña: borde de luz arriba, sombra abajo */
.gate__module {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  color: var(--hueso);
  font-size: 0.875rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}

.gate__module .icon {
  width: 18px;
  height: 18px;
  color: var(--lima);
}

/* ---------- Tarjeta de vidrio líquido ---------- */

.gate__card {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.02) 46%, rgb(255 255 255 / 0.05)),
    rgb(22 22 21 / 0.42);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 -1px 0 rgb(255 255 255 / 0.04),
    0 2px 6px rgb(0 0 0 / 0.3),
    0 40px 80px -32px rgb(0 0 0 / 0.75);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}

/* Borde de luz: más brillante arriba a la izquierda, como un canto de vidrio */
.gate__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.06) 38%, rgb(255 255 255 / 0.04) 70%, rgb(198 244 50 / 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Reflejo que sigue al puntero (app.js mueve el elemento con transform) */
.gate__sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.gate__glint {
  position: absolute;
  top: -180px;
  left: -180px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.gate__card:hover .gate__glint {
  opacity: 1;
}

.gate__card .mail-login__title {
  color: var(--hueso);
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}

.gate__card .field__input {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.gate__card .field__input:hover {
  border-color: rgb(255 255 255 / 0.32);
}

.gate__card .field__input:focus {
  border-color: var(--lima);
}

.gate__card .field__input::placeholder {
  color: #8C8C86;
}

.gate__card .field__hint,
.gate__card .mail-login__help {
  color: #A9A8A1;
}

.gate__card .switch__track {
  background: rgb(255 255 255 / 0.18);
}

.gate__card .btn--accent {
  box-shadow: 0 10px 30px -12px rgb(198 244 50 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.gate__card .mail-login__foot {
  border-top-color: rgb(255 255 255 / 0.1);
}

.gate__card .powered {
  color: #A9A8A1;
}

/* ---------- Pie con datos útiles ---------- */

.gate__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  color: #8C8C86;
  font-size: 0.8125rem;
}

.gate__facts > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gate__facts .icon {
  width: 14px;
  height: 14px;
  color: var(--lima);
}

.gate__facts a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.gate__facts a:hover {
  color: var(--hueso);
  text-decoration: underline;
}

/* ---------- Entrada: un solo momento, el mensaje y luego la tarjeta ---------- */

@media (prefers-reduced-motion: no-preference) {
  .gate__headline,
  .gate__lead,
  .gate__module,
  .gate__card {
    animation: gate-in 0.7s var(--ease-out) both;
  }

  .gate__lead { animation-delay: 60ms; }
  .gate__module { animation-delay: calc(120ms + var(--i, 0) * 50ms); }
  .gate__module[data-i="1"] { --i: 1; }
  .gate__module[data-i="2"] { --i: 2; }
  .gate__module[data-i="3"] { --i: 3; }
  .gate__card { animation-name: gate-card-in; animation-delay: 90ms; }
}

@keyframes gate-in {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes gate-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
}

/* Sin transparencias: superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .gate__card {
    background: var(--negro-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .gate__module {
    background: var(--negro-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Tableta y celular: una columna, el formulario a la vista ---------- */

@media (max-width: 960px) {
  .gate__stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 28px;
    padding-block: 28px;
  }

  .gate__intro {
    max-width: 448px;
    text-align: center;
  }

  .gate__headline {
    font-size: clamp(2.25rem, 1.4rem + 4vw, 3.25rem);
  }

  .gate__lead,
  .gate__modules {
    display: none;
  }

  .gate__card {
    max-width: 448px;
  }
}

@media (max-width: 480px) {
  .gate {
    width: calc(100% - 32px);
    padding-top: 24px;
  }

  .gate__card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .gate__facts {
    gap: 6px 18px;
    font-size: 0.75rem;
  }

  .gate__facts a {
    display: none;
  }
}

/* El punto final en lima, como el punto de la «i» de Intux */
.gate__dot {
  color: var(--lima);
}

/* Actualización silenciosa de Documentos (después de compartir, renombrar, destacar…):
   la lista se reemplaza sin volver a entrar ni parpadear; solo resalta lo que cambió. */
[data-quiet] .files > .fitem:not(.is-new),
[data-quiet] .fitem__thumb img[data-thumb] {
  animation: none;
  transition: none;
}

/* ---------- Portadas: el ícono queda debajo y la portada lo cubre al cargar ---------- */

.fitem__thumb {
  position: relative;
}

.fitem__thumb img.is-cover {
  position: absolute;
  inset: 0;
}

/* Video: un botón de reproducir discreto sobre la portada */
.fitem__play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(14 14 14 / 0.62);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Triángulo de reproducir dibujado con clip-path */
.fitem__play::after {
  content: "";
  width: 8px;
  height: 10px;
  margin-left: 2px;
  background: var(--hueso);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.drive[data-view="list"] .fitem__play {
  display: none;
}

/* Mientras el navegador genera la portada, el ícono respira apenas */
@media (prefers-reduced-motion: no-preference) {
  .fitem__thumb[data-thumb-gen].is-working > .icon {
    animation: thumb-working 1.2s ease-in-out infinite alternate;
  }
}

@keyframes thumb-working {
  to { opacity: 0.45; }
}

/* Marco del visor que genera portadas: existe pero no se ve ni se puede enfocar */
.covers-frame {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 640px;
  height: 480px;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =====================================================================
 * Redactar en ventana flotante (como Gmail): abajo a la derecha, sigue abierta
 * mientras se navega. Barra negra de Intux; cuerpo sólido para escribir cómodo,
 * con borde de vidrio y sombra amplia para que flote sobre la app.
 * ===================================================================== */

.cwin {
  position: fixed;
  right: 24px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 48px));
  height: min(680px, calc(100dvh - 104px));
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgb(14 14 14 / 0.08),
    0 24px 64px -16px rgb(14 14 14 / 0.38),
    0 0 0 1px rgb(14 14 14 / 0.04);
  transform-origin: bottom right;
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    width 240ms var(--ease-drawer),
    height 240ms var(--ease-drawer),
    right 240ms var(--ease-drawer),
    bottom 240ms var(--ease-drawer);

  @starting-style {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
}

.cwin.is-leaving {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition-duration: 160ms;
}

/* Barra superior: título (clic para minimizar o abrir) y tres botones */
.cwin__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 8px 0 4px;
  background:
    radial-gradient(240px 80px at 0% 0%, rgb(198 244 50 / 0.12), transparent 70%),
    var(--negro);
  color: var(--hueso);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
}

.cwin__title {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cwin__tools {
  display: flex;
  gap: 2px;
}

.cwin__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--hueso-2);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}

.cwin__btn .icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .cwin__btn:hover,
  .cwin__title:hover {
    background: rgb(255 255 255 / 0.08);
    color: var(--hueso);
  }
}

.cwin__btn:active {
  transform: scale(0.94);
}

.cwin__bar :focus-visible {
  outline-color: var(--lima);
  outline-offset: -2px;
}

.cwin__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cwin__loading {
  display: grid;
  gap: 14px;
  padding: 24px 20px;
}

/* El formulario de siempre, ajustado a la ventana */
.cwin .compose {
  flex: 1;
  min-height: 0;
  padding-bottom: 16px;
}

.cwin .compose__head {
  min-height: 0;
  padding: 8px 20px 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cwin .compose__head h2,
.cwin .compose__head [data-discard] {
  display: none;
}

.cwin .compose__head:has(.compose__status:empty) {
  display: none;
}

.cwin .compose__status {
  margin-left: 0;
}

.cwin .compose__row {
  min-height: 46px;
  padding: 6px 20px;
}

.cwin .compose__body {
  min-height: 160px;
  padding: 14px 20px;
  resize: none;
}

.cwin .dropzone {
  margin: 0 20px 14px;
}

.cwin .compose__files {
  padding: 0 20px 14px;
}

.cwin .compose__actions {
  position: sticky;
  bottom: -16px;
  margin-bottom: -16px;
  padding: 12px 20px 16px;
  background: linear-gradient(to bottom, transparent, var(--surface) 30%);
}

.cwin .compose__error {
  margin: 12px 20px 0;
}

/* Minimizada: solo la barra */
.cwin[data-state="min"] {
  width: min(320px, calc(100vw - 48px));
  height: 48px;
  border-color: transparent;
}

.cwin[data-state="min"] .cwin__body {
  visibility: hidden;
}

/* Ampliada: centrada, con el resto de la app atenuado */
.cwin[data-state="max"] {
  right: max(24px, calc((100vw - 980px) / 2));
  bottom: max(24px, calc((100dvh - 820px) / 2));
  width: min(980px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 48px));
}

.cwin__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(14 14 14 / 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

/* El fondo atenuado vive fuera de la ventana: overflow visible solo mientras está ampliada */
.cwin[data-state="max"] {
  overflow: visible;
}

.cwin[data-state="max"] > .cwin__bar {
  border-radius: 20px 20px 0 0;
}

.cwin[data-state="max"] > .cwin__body {
  border-radius: 0 0 20px 20px;
  background: var(--surface);
}

.cwin[data-state="max"] .cwin__scrim {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-color-scheme: dark) {
  .cwin {
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.4),
      0 28px 72px -16px rgb(0 0 0 / 0.8),
      0 0 0 1px rgb(255 255 255 / 0.06);
  }
}

/* Celular: pantalla completa; minimizada queda como barra sobre las pestañas */
@media (max-width: 860px) {
  .cwin,
  .cwin[data-state="max"] {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .cwin__bar {
    height: calc(52px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .cwin [data-cwin="max"] {
    display: none;
  }

  .cwin[data-state="min"] {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    height: 52px;
    border-radius: 16px;
  }

  .cwin[data-state="min"] .cwin__bar {
    height: 52px;
    padding-top: 0;
  }

  .cwin .compose__actions {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* =====================================================================
 * Carpetas: nombre completo (hasta dos líneas), sin fecha, color e ícono
 * propios y una marca cuando están compartidas.
 * ===================================================================== */

.drive:not([data-view="list"]) .fitem--folder .fitem__body {
  padding: 12px 44px 12px 14px;
}

.drive:not([data-view="list"]) .fitem--folder .fitem__meta,
.drive:not([data-view="list"]) .fitem--folder .fitem__badges {
  display: none;
}

.drive:not([data-view="list"]) .fitem--folder .fitem__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.drive:not([data-view="list"]) .fitem--folder .fitem__thumb {
  width: 44px;
  height: 44px;
  margin: 12px 0 12px 12px;
}

/* Colores (fondo del ícono / color del trazo) */
:is(.fitem, .look) .fitem__thumb--c-negro { background: #0E0E0E; color: #C6F432; }
:is(.fitem, .look) .fitem__thumb--c-lima { background: #C6F432; color: #0E0E0E; }
:is(.fitem, .look) .fitem__thumb--c-arena { background: #E4E2DC; color: #0E0E0E; }
:is(.fitem, .look) .fitem__thumb--c-azul { background: #3767C8; color: #F2F1EC; }
:is(.fitem, .look) .fitem__thumb--c-bosque { background: #2E7552; color: #F2F1EC; }
:is(.fitem, .look) .fitem__thumb--c-ambar { background: #E0A21B; color: #0E0E0E; }
:is(.fitem, .look) .fitem__thumb--c-coral { background: #D9573F; color: #F2F1EC; }
:is(.fitem, .look) .fitem__thumb--c-uva { background: #6E56CF; color: #F2F1EC; }
:is(.fitem, .look) .fitem__thumb--c-piedra { background: #8C8C86; color: #F2F1EC; }

.fitem--folder .fitem__thumb[class*="fitem__thumb--c-"] {
  overflow: visible;
}

/* En modo oscuro la carpeta negra necesita un borde para no perderse en el fondo */
@media (prefers-color-scheme: dark) {
  .fitem__thumb--c-negro {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  }
}

/* Compartida: una pastilla con personas en la esquina del ícono */
.fitem__shared {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
}

.fitem__shared .icon {
  width: 12px !important;
  height: 12px !important;
}

.drive[data-view="list"] .fitem__shared {
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
}

.drive[data-view="list"] .fitem__shared .icon {
  width: 10px !important;
  height: 10px !important;
}

/* ---------- Diálogo «Color e ícono» ---------- */

.look__preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.look__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  transition: background-color 180ms ease, color 180ms ease;
}

.look__tile .icon {
  width: 22px;
  height: 22px;
}

.look__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.look__group {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.look__group legend {
  margin-bottom: 10px;
}

.look__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.look__color {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 150ms ease;
}

.look__color.fitem__thumb--c-arena {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.look__color:has(input:checked) {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}

.look__color:active {
  transform: scale(0.92);
}

.look__icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.look__icon {
  position: relative;
  display: grid;
  place-items: center;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out);
}

.look__icon .icon {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .look__icon:hover {
    background: var(--surface-sunken);
    color: var(--ink);
  }
}

.look__icon:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.look__icon:active {
  transform: scale(0.94);
}

.look__color input,
.look__icon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.look__color:has(input:focus-visible),
.look__icon:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* =====================================================================
 * Selección en Documentos (como Drive): sin casilla. El elemento elegido se tiñe
 * y su borde se dibuja con un anillo que crece; en modo oscuro el anillo es lima.
 * La casilla solo existe en pantallas táctiles, donde sirve para elegir varios.
 * ===================================================================== */

@media (hover: hover) and (pointer: fine) {
  .fitem__check,
  .fitem[aria-selected="true"] .fitem__check {
    display: none;
  }
}

.fitem {
  --sel-ring: var(--ink);
  --sel-bg: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

@media (prefers-color-scheme: dark) {
  .fitem {
    --sel-ring: var(--lima);
    --sel-bg: color-mix(in srgb, var(--lima) 9%, var(--surface));
  }
}

.fitem[aria-selected="true"],
.drive:not([data-view="list"]) .fitem[aria-selected="true"] {
  border-color: transparent;
  background: var(--sel-bg);
  box-shadow: 0 0 0 2px var(--sel-ring);
}

@media (prefers-reduced-motion: no-preference) {
  .fitem[aria-selected="true"] {
    animation: sel-ring 220ms var(--ease-out);
  }
}

@keyframes sel-ring {
  from {
    background: var(--surface);
    box-shadow: 0 0 0 0 var(--sel-ring);
  }
}

.drive[data-view="list"] .fitem[aria-selected="true"] {
  background: var(--sel-bg);
  box-shadow: inset 3px 0 0 var(--sel-ring);
}

/* ---------- Ayuda de atajos de teclado («?») ---------- */

.shortcuts .dialog__card {
  width: min(560px, calc(100vw - 32px));
}

.shortcuts__list {
  display: grid;
  margin: 0;
  max-height: min(60dvh, 520px);
  overflow-y: auto;
}

.shortcuts__list > div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.shortcuts__list > div:last-child {
  border-bottom: 0;
}

.shortcuts__list dt {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.shortcuts__list dd {
  margin: 0;
  font-size: 0.875rem;
}

.shortcuts kbd {
  display: inline-block;
  min-width: 24px;
  margin: 2px 0;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.75rem/1.4 var(--font);
  text-align: center;
}

/* El diálogo de color no se ensancha con nombres largos: la columna puede encogerse */
.dialog__card.look {
  grid-template-columns: minmax(0, 1fr);
  width: min(460px, calc(100vw - 32px));
}

/* ---------- Menú de clic derecho en la lista de correos ---------- */

/* El correo sobre el que se abrió el menú queda marcado mientras está abierto */
.msg.is-menu {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent);
}

/* «Mover a…» puede tener muchas carpetas: el menú se desplaza por dentro */
.ctx {
  max-height: min(70dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- Acceso sin scroll: todo cabe en la pantalla ---------- */

.gate {
  height: 100dvh;
  min-height: 0;
}

.gate__stage {
  min-height: 0;
}

.gate__lead {
  max-width: 34ch;
  text-wrap: balance;
}

/* Pantallas bajas (laptops de 720–820 px): menos aire vertical */
@media (max-height: 820px) {
  .gate {
    padding-block: 20px 14px;
  }

  .gate__stage {
    padding-block: 16px;
  }

  .gate__card {
    padding: 26px 30px;
  }

  .gate__card .mail-login__title {
    margin-bottom: 14px;
    font-size: 1.375rem;
  }

  .gate__card .form {
    gap: 14px;
  }

  .gate__card .mail-login__help {
    margin-top: 12px;
  }

  .gate__card .mail-login__foot {
    margin-top: 18px;
    padding-top: 14px;
  }

  .gate__modules {
    margin-top: 26px;
  }
}

/* Celular: logo, titular corto y formulario; los datos del pie solo si hay espacio */
@media (max-width: 960px) {
  .gate {
    padding-block: 18px 12px;
  }

  .gate__stage {
    align-content: center;
    gap: 18px;
    padding-block: 12px;
  }

  .gate__headline {
    font-size: clamp(1.875rem, 1.2rem + 3vw, 2.5rem);
  }

  .gate__card .mail-login__title {
    margin-bottom: 12px;
    font-size: 1.25rem;
  }

  .gate__card .form {
    gap: 12px;
  }

  .gate__card .mail-login__help {
    margin-top: 10px;
    font-size: 0.8125rem;
  }

  .gate__card .mail-login__foot {
    margin-top: 14px;
    padding-top: 12px;
  }
}

@media (max-width: 960px) and (max-height: 760px) {
  .gate__headline {
    display: none;
  }
}

@media (max-height: 640px) {
  .gate__facts {
    display: none;
  }
}

/* Acceso (escritorio): el mensaje ocupa su mitad con presencia, centrado frente a la tarjeta */
@media (min-width: 961px) {
  .gate__stage {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    gap: clamp(40px, 5vw, 96px);
  }

  .gate__intro {
    justify-self: center;
    width: min(100%, 560px);
  }

  .gate__headline {
    font-size: clamp(4rem, 1.2rem + 5.4vw, 7.25rem);
    letter-spacing: -0.045em;
    line-height: 0.92;
  }

  .gate__lead {
    max-width: 30ch;
    margin-top: 28px;
    font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem);
  }
}

/* ---------- Programar envío ---------- */

.schedule {
  position: relative;
}

.schedule__menu {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 0;
  transform-origin: bottom left;
  z-index: 5;
  width: 280px;
  padding: 8px;
}

/* El menú está dentro de un .menu: se muestra con hidden, no con data-open */
.schedule__menu:not([hidden]) {
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

.schedule__title {
  padding: 6px 10px 4px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.schedule__preset {
  justify-content: space-between;
  width: 100%;
}

.schedule__time {
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-transform: capitalize;
}

.schedule__custom {
  display: grid;
  gap: 6px;
  padding: 6px 10px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.schedule__custom .field__input {
  height: 40px;
  font-size: 0.875rem;
}

.schedule__menu .btn--block {
  width: calc(100% - 20px);
  margin: 0 10px 6px;
}

/* ---------- Pantalla «Programados» ---------- */

.scheduled {
  max-width: 920px;
  padding-bottom: 40px;
}

.scheduled__list {
  display: grid;
  gap: 10px;
  margin: 8px 24px 0;
  padding: 0;
  list-style: none;
}

.scheduled__item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.scheduled__item.is-leaving {
  opacity: 0;
  transform: translateX(12px);
}

.scheduled__item.is-error {
  border-color: var(--danger-line);
}

.scheduled__when {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
}

.scheduled__item.is-error .scheduled__when {
  color: var(--danger-ink);
}

.scheduled__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.scheduled__subject {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled__to,
.scheduled__sending {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled__error {
  color: var(--danger-ink);
  font-size: 0.8125rem;
}

.scheduled__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 860px) {
  .scheduled__list {
    margin: 8px 16px 0;
  }

  .scheduled__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* Programar: cada opción en una línea (nombre a la izquierda, hora a la derecha) */
.schedule__menu {
  width: 340px;
}

.schedule__menu .schedule__preset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: auto;
  min-height: 42px;
  white-space: nowrap;
}

.schedule__time {
  text-transform: none;
}

.scheduled {
  max-width: none;
}

.scheduled__list {
  max-width: 920px;
}

/* =====================================================================
 * Ajustes › Apariencia y App y notificaciones
 * ===================================================================== */

.theme-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
  margin-top: 8px;
}

.theme-pick__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-pick__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Miniatura de cada modo: barra lateral + contenido, como la app */
.theme-pick__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 0 0 0 var(--ink);
  transition: box-shadow 180ms var(--ease-out), transform 120ms var(--ease-out);
}

.theme-pick__preview::before,
.theme-pick__preview::after {
  content: "";
  position: absolute;
}

/* barra lateral */
.theme-pick__preview::before {
  inset: 0 auto 0 0;
  width: 28%;
  background: #0E0E0E;
}

/* «tarjetas» del contenido */
.theme-pick__preview::after {
  top: 18%;
  right: 10%;
  left: 36%;
  height: 22%;
  border-radius: 6px;
  box-shadow: 0 34px 0 0 currentColor;
}

.theme-pick__preview--claro {
  background: #F2F1EC;
  color: #E4E2DC;
}

.theme-pick__preview--claro::after {
  background: #FAF9F6;
}

.theme-pick__preview--oscuro {
  background: #171716;
  color: #232321;
}

.theme-pick__preview--oscuro::after {
  background: #232321;
}

.theme-pick__preview--auto {
  background: linear-gradient(135deg, #F2F1EC 50%, #171716 50%);
  color: #8C8C86;
}

.theme-pick__preview--auto::after {
  background: linear-gradient(135deg, #FAF9F6 50%, #232321 50%);
}

.theme-pick__item:has(input:checked) .theme-pick__preview {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
}

.theme-pick__item:has(input:focus-visible) .theme-pick__preview {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.theme-pick__item:active .theme-pick__preview {
  transform: scale(0.97);
}

.theme-auto {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.theme-auto .field__hint {
  display: inline;
  margin-left: 4px;
}

/* App instalable */
.app-install {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.app-install__icon img {
  display: block;
  border-radius: 22%;
  box-shadow: 0 6px 16px -6px rgb(14 14 14 / 0.4);
}

.app-install__text {
  flex: 1;
  min-width: 0;
}

.app-install__title {
  font-weight: 700;
}

.app-install__state {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.ios-steps {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface-sunken);
}

.ios-steps ol {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 0.9375rem;
}

.ios-steps__glyph .icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.push {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.push__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.push__title {
  font-weight: 700;
}

.push__prefs {
  display: grid;
  gap: 12px;
}

.push__prefs:not([hidden]) {
  display: grid;
}

.device__this {
  color: var(--ink-2);
  font-weight: 500;
}

@media (max-width: 560px) {
  .theme-pick {
    gap: 8px;
  }

  .app-install {
    flex-wrap: wrap;
  }
}

/* ---------- Gestos táctiles: deslizar un correo y jalar para actualizar ---------- */

.msgs > li.is-swiping {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.msgs > li.is-swiping .msg {
  position: relative;
  z-index: 1;
  background: var(--bg);
  touch-action: pan-y;
}

/* Capa de la acción que aparece debajo de la fila */
.swipe-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 160ms ease;
}

.swipe-layer .icon {
  width: 20px;
  height: 20px;
  transition: transform 160ms var(--ease-out);
}

.swipe-layer[data-side="izquierda"] {
  justify-content: flex-end;
  background: var(--surface-sunken);
  color: var(--ink-2);
}

.swipe-layer[data-side="derecha"] {
  justify-content: flex-start;
  background: var(--surface-sunken);
  color: var(--ink-2);
}

/* Pasado el umbral, la acción «se enciende» */
.swipe-layer[data-side="izquierda"][data-ready="true"] {
  background: #2E7552;
  color: #F2F1EC;
}

.swipe-layer[data-side="derecha"][data-ready="true"] {
  background: var(--negro);
  color: var(--lima);
}

.swipe-layer[data-ready="true"] .icon {
  transform: scale(1.15);
}

.pull {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 56px);
  left: 50%;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shine), 0 8px 24px -10px rgb(14 14 14 / 0.4);
  color: var(--ink-2);
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
  transition: opacity 200ms ease, color 150ms ease;
}

.pull .icon {
  width: 20px;
  height: 20px;
}

.pull.is-ready {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .pull.is-loading .icon {
    animation: pull-spin 700ms linear infinite;
  }
}

@keyframes pull-spin {
  to { transform: rotate(360deg); }
}

/* En pantallas táctiles el gesto horizontal sobre un correo es nuestro (deslizar);
   el vertical sigue siendo del navegador (desplazar la lista). */
@media (pointer: coarse) {
  .msgs .msg {
    touch-action: pan-y;
  }

  .msgs {
    overflow-x: clip;
  }
}

/* «Tomar foto o video»: solo en pantallas táctiles (en computador no hay cámara trasera) */
@media (hover: hover) and (pointer: fine) {
  .menu__item--touch {
    display: none;
  }
}

/* ---------- Compartido desde el celular ---------- */

.share-in__body {
  display: grid;
  gap: 18px;
  max-width: 640px;
  padding: 8px 24px 32px;
}

.share-in__files {
  padding: 0;
}

.share-in__text {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.share-in__title {
  font-weight: 700;
}

.share-in__url {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.share-in__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

@media (max-width: 860px) {
  .share-in__body {
    padding: 8px 16px 32px;
  }
}

/* =====================================================================
 * VIDRIO LÍQUIDO EN TODA LA APP (apple-design: materiales y profundidad)
 * - Un fondo de luz ambiental da algo que refractar al vidrio.
 * - Escritorio: barra lateral (material oscuro y denso) y área de trabajo
 *   (material claro) flotan como láminas con esquinas redondeadas.
 * - Nunca vidrio claro sobre vidrio claro: dentro del área de trabajo, las
 *   tarjetas son superficies casi sólidas con borde de luz, sin desenfoque.
 * - Celular: barra de pestañas flotante de vidrio.
 * - Respaldos: menos transparencia / más contraste → superficies sólidas.
 * ===================================================================== */

body.page--webmail {
  --lg-gap: 10px;
  --lg-radius: 24px;
  /* Material claro (área de trabajo) */
  --lg-main: rgb(250 249 246 / 0.66);
  --lg-main-edge: rgb(255 255 255 / 0.72);
  --lg-main-shine: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.35);
  --lg-main-shadow: 0 1px 2px rgb(14 14 14 / 0.04), 0 30px 70px -36px rgb(40 40 20 / 0.35);
  /* Material oscuro (barra lateral, pestañas, avisos) */
  --lg-dark: rgb(16 16 15 / 0.84);
  --lg-dark-edge: rgb(255 255 255 / 0.09);
  --lg-dark-shine: inset 0 1px 0 rgb(255 255 255 / 0.1);
  /* Tarjetas dentro del área de trabajo */
  --lg-card: rgb(255 255 255 / 0.62);
  --lg-card-edge: rgb(255 255 255 / 0.8);
  --lg-card-line: rgb(14 14 14 / 0.06);
  --lg-blur: blur(28px) saturate(175%);
}

@media (prefers-color-scheme: dark) {
  body.page--webmail {
    --lg-main: rgb(26 26 24 / 0.6);
    --lg-main-edge: rgb(255 255 255 / 0.07);
    --lg-main-shine: inset 0 1px 0 rgb(255 255 255 / 0.07);
    --lg-main-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 30px 70px -30px rgb(0 0 0 / 0.8);
    --lg-dark: rgb(10 10 9 / 0.72);
    --lg-card: rgb(255 255 255 / 0.045);
    --lg-card-edge: rgb(255 255 255 / 0.07);
    --lg-card-line: rgb(255 255 255 / 0.06);
  }
}

/* ---------- Luz ambiental (fija, detrás de todo; no repinta al desplazar) ---------- */

body.page--webmail::before {
  background:
    radial-gradient(70vmax 60vmax at -10% -20%, rgb(198 244 50 / 0.16), transparent 62%),
    radial-gradient(60vmax 50vmax at 110% 10%, rgb(255 255 255 / 0.9), transparent 60%),
    radial-gradient(70vmax 60vmax at 90% 120%, rgb(214 206 180 / 0.55), transparent 62%),
    radial-gradient(50vmax 40vmax at 30% 110%, rgb(198 244 50 / 0.08), transparent 60%),
    var(--bg);
}

@media (prefers-color-scheme: dark) {
  body.page--webmail::before {
    background:
      radial-gradient(70vmax 60vmax at -10% -20%, rgb(198 244 50 / 0.13), transparent 62%),
      radial-gradient(60vmax 50vmax at 115% 115%, rgb(120 150 30 / 0.16), transparent 60%),
      radial-gradient(50vmax 40vmax at 60% -10%, rgb(242 241 236 / 0.04), transparent 60%),
      var(--bg);
  }
}

/* ---------- Escritorio: láminas flotantes ---------- */

@media (min-width: 861px) {
  body.page--webmail .mail-app {
    grid-template-columns: 262px minmax(0, 1fr);
    gap: var(--lg-gap);
    padding: var(--lg-gap);
    background: transparent;
  }

  body.page--webmail .mail-side {
    border: 1px solid var(--lg-dark-edge);
    border-radius: var(--lg-radius);
    background:
      radial-gradient(420px 260px at 0% 0%, rgb(198 244 50 / 0.1), transparent 70%),
      var(--lg-dark);
    box-shadow: var(--lg-dark-shine), 0 24px 60px -30px rgb(0 0 0 / 0.6);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
  }

  body.page--webmail .mail-main {
    height: calc(100dvh - var(--lg-gap) * 2);
    overflow: hidden;
    border: 1px solid var(--lg-main-edge);
    border-radius: var(--lg-radius);
    background: var(--lg-main);
    box-shadow: var(--lg-main-shine), var(--lg-main-shadow);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
  }

  /* La barra superior es parte de la lámina: sin fondo propio, con un borde de desvanecido */
  body.page--webmail .appbar {
    border-bottom: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--lg-card-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Cabeceras fijas dentro de la lámina: un velo del mismo material (no otro vidrio encima) */
body.page--webmail .mail-list__head,
body.page--webmail .pane-head,
body.page--webmail .toolbar {
  background: linear-gradient(to bottom, var(--lg-main) 70%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Campo de búsqueda: una gota de vidrio sobre la lámina */
body.page--webmail .appbar__search .search__input {
  border-color: var(--lg-card-edge);
  background: var(--lg-card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 2px rgb(14 14 14 / 0.04);
}

@media (prefers-color-scheme: dark) {
  body.page--webmail .appbar__search .search__input {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

/* ---------- Tarjetas dentro del área de trabajo (casi sólidas + borde de luz) ---------- */

body.page--webmail .panel,
body.page--webmail .fitem,
body.page--webmail .attachments .file,
body.page--webmail .quick-reply,
body.page--webmail .scheduled__item,
body.page--webmail .app-install,
body.page--webmail .share-in__text {
  border-color: var(--lg-card-edge);
  background: var(--lg-card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px rgb(14 14 14 / 0.03);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-color-scheme: dark) {
  body.page--webmail .panel,
  body.page--webmail .fitem,
  body.page--webmail .attachments .file,
  body.page--webmail .quick-reply,
  body.page--webmail .scheduled__item,
  body.page--webmail .app-install,
  body.page--webmail .share-in__text {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

/* Correo elegido en la lista: una gota de luz */
body.page--webmail .msg[aria-current] {
  background: var(--lg-card);
  box-shadow: inset 0 0 0 1px var(--lg-card-edge), inset 0 1px 0 rgb(255 255 255 / 0.6), 0 6px 18px -12px rgb(14 14 14 / 0.25);
}

@media (prefers-color-scheme: dark) {
  body.page--webmail .msg[aria-current] {
    box-shadow: inset 0 0 0 1px var(--lg-card-edge), inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

/* Selección de Documentos sobre el nuevo material */
body.page--webmail .fitem[aria-selected="true"] {
  background: var(--sel-bg);
  box-shadow: 0 0 0 2px var(--sel-ring);
}

/* ---------- Menús, diálogos, avisos y Redactar: el mismo material ---------- */

body.page--webmail .menu,
body.page--webmail .ctx {
  border-color: var(--lg-main-edge);
  background: var(--glass-bg-strong);
  box-shadow: var(--lg-main-shine), 0 24px 48px -16px rgb(14 14 14 / 0.3);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

body.page--webmail .dialog__card {
  border-color: var(--lg-main-edge);
  box-shadow: var(--lg-main-shine), 0 40px 90px -30px rgb(14 14 14 / 0.45);
}

body.page--webmail .toast {
  border: 1px solid var(--lg-dark-edge);
  border-radius: 16px;
  background: var(--lg-dark);
  box-shadow: var(--lg-dark-shine), 0 16px 40px -14px rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

body.page--webmail .cwin {
  border-color: var(--lg-main-edge);
  background: var(--surface);
  box-shadow: var(--lg-main-shine), 0 30px 80px -24px rgb(14 14 14 / 0.45);
}

body.page--webmail .cwin__bar {
  background:
    radial-gradient(240px 80px at 0% 0%, rgb(198 244 50 / 0.14), transparent 70%),
    var(--lg-dark);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}

/* El fondo atenuado de los diálogos también desenfoca (se enfoca la tarea) */
body.page--webmail dialog::backdrop {
  background: rgb(14 14 14 / 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  body.page--webmail .mail-main {
    background: transparent;
  }

  body.page--webmail .mail-top {
    border-bottom-color: var(--lg-dark-edge);
    background: var(--lg-dark);
    box-shadow: var(--lg-dark-shine);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
  }

  /* Pestañas flotantes de vidrio (como iOS) */
  body.page--webmail .tabbar {
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    padding-bottom: 0;
    overflow: hidden;
    border: 1px solid var(--lg-dark-edge);
    border-radius: 28px;
    background:
      radial-gradient(200px 80px at 50% 0%, rgb(255 255 255 / 0.06), transparent 70%),
      var(--lg-dark);
    box-shadow: var(--lg-dark-shine), 0 18px 40px -16px rgb(0 0 0 / 0.55);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
  }

  body.page--webmail .mail-app {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

/* ---------- Respaldos de accesibilidad ---------- */

@media (prefers-reduced-transparency: reduce) {
  body.page--webmail .mail-side,
  body.page--webmail .tabbar,
  body.page--webmail .mail-top,
  body.page--webmail .toast,
  body.page--webmail .cwin__bar {
    background: var(--negro);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page--webmail .mail-main,
  body.page--webmail .menu,
  body.page--webmail .ctx {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page--webmail .mail-list__head,
  body.page--webmail .pane-head,
  body.page--webmail .toolbar {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.page--webmail .mail-main,
  body.page--webmail .panel,
  body.page--webmail .fitem,
  body.page--webmail .menu {
    border-color: var(--line-strong);
    background: var(--surface);
  }
}

/* Ajuste: sobre el fondo claro, el material oscuro necesita más densidad para seguir siendo
   el negro de Intux (si no, se ve gris oliva); en oscuro conserva su transparencia. */
body.page--webmail {
  --lg-dark: rgb(14 14 14 / 0.93);
}

@media (prefers-color-scheme: dark) {
  body.page--webmail {
    --lg-dark: rgb(10 10 9 / 0.72);
  }
}

/* Celular: la lista no pinta su propio fondo (la luz ambiental se ve continua) */
@media (max-width: 860px) {
  body.page--webmail .mail-list,
  body.page--webmail .mail-panes,
  body.page--webmail .split__list {
    background: transparent;
  }
}

/* ---------- Documentos: la barra de selección flota sobre la cabecera (como Drive) ----------
   No ocupa espacio propio: al seleccionar, las carpetas y archivos no se mueven ni hay scroll. */
.drive__head {
  position: sticky;
}

.drive__head .selbar {
  position: absolute;
  top: 50%;
  right: 16px;
  left: 16px;
  z-index: 4;
  min-height: 52px;
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 14px 30px -14px rgb(0 0 0 / 0.5);
  transform: translateY(-50%);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(calc(-50% - 6px));
  }
}

.drive__head .selbar[hidden] {
  display: none;
}

/* Celular: la barra de selección flota abajo, sobre las pestañas (a la mano del pulgar) */
@media (max-width: 860px) {
  .drive__head .selbar {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 45;
    border-radius: 22px;
    transform: none;

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

/* backdrop-filter convierte la cabecera en «contenedor» de lo fijo: en celular se quita
   para que la barra de selección pueda flotar abajo de verdad. */
@media (max-width: 860px) {
  body.page--webmail .drive__head {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 860px) {
  .drive__head .selbar {
    bottom: calc(98px + env(safe-area-inset-bottom));
  }

  /* Con selección, el final de la lista no queda tapado por la barra */
  .drive.has-selection {
    padding-bottom: 72px;
  }
}

/* Barra lateral de alto completo (pegada al borde, sin flotar); el área de trabajo sigue
   siendo una lámina de vidrio flotante a su derecha. */
@media (min-width: 861px) {
  body.page--webmail .mail-app {
    gap: 0;
    padding: 0;
  }

  body.page--webmail .mail-side {
    height: 100dvh;
    border: 0;
    border-right: 1px solid var(--lg-dark-edge);
    border-radius: 0;
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.04);
  }

  body.page--webmail .mail-main {
    height: calc(100dvh - var(--lg-gap) * 2);
    margin: var(--lg-gap);
  }
}

/* ---------- Selector de orden (y cualquier .select): sin la flecha del navegador ---------- */
.select {
  -webkit-appearance: none;
  appearance: none;
}

/* En la cabecera de Documentos: pastilla de vidrio, mismo alto que «Nuevo» y la vista */
.drive__tools .select--small {
  height: 40px;
  min-width: 132px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--lg-card-edge, var(--line));
  background-color: var(--lg-card, var(--surface));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px rgb(14 14 14 / 0.04);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  background-position: right 14px center;
  background-size: 12px;
  transition: border-color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
}

@media (prefers-color-scheme: dark) {
  .drive__tools .select--small {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

@media (hover: hover) and (pointer: fine) {
  .drive__tools .select--small:hover {
    border-color: var(--line-strong);
  }
}

.drive__tools .select--small:active {
  transform: scale(0.98);
}

.drive__tools .select--small:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* La vista (cuadrícula / lista) a juego: mismo alto y material */
.drive__tools .segmented {
  height: 40px;
  align-items: center;
  border: 1px solid var(--lg-card-edge, var(--line));
  background: var(--lg-card, var(--surface-sunken));
}

/* =====================================================================
 * Entrar y salir de carpetas (Documentos): un solo gesto direccional
 * - Entrar: lo nuevo llega desde la derecha; lo anterior se retira un poco a la izquierda.
 * - Salir (ruta o atrás): al revés. Misma ruta de ida y vuelta (coherencia espacial).
 * - Sin cascada de tarjetas durante el cambio: el contenido se mueve como una sola lámina.
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html[data-nav-dir] .drive__scroll {
    view-transition-name: carpeta-nav;
  }

  /* Durante el cambio, ni la animación vieja de «tarjeta que se abre» ni la cascada */
  html[data-nav-dir] .fitem {
    view-transition-name: none !important;
  }

  ::view-transition-group(carpeta-nav) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }

  html[data-nav-dir="adentro"]::view-transition-old(carpeta-nav) {
    animation: carpeta-sale-izq 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  html[data-nav-dir="adentro"]::view-transition-new(carpeta-nav) {
    animation: carpeta-entra-der 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html[data-nav-dir="afuera"]::view-transition-old(carpeta-nav) {
    animation: carpeta-sale-der 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  html[data-nav-dir="afuera"]::view-transition-new(carpeta-nav) {
    animation: carpeta-entra-izq 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@keyframes carpeta-sale-izq {
  to { opacity: 0; transform: translateX(-28px); }
}

@keyframes carpeta-entra-der {
  from { opacity: 0; transform: translateX(44px); }
}

@keyframes carpeta-sale-der {
  to { opacity: 0; transform: translateX(28px); }
}

@keyframes carpeta-entra-izq {
  from { opacity: 0; transform: translateX(-44px); }
}

/* La carpeta responde al toque: se hunde un poco (al instante, en el pointerdown) */
.fitem--folder {
  transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.fitem--folder:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: no-preference) {
  /* Sin la mezcla «plus-lighter» del navegador (lavaba los colores en el cruce) */
  html[data-nav-dir]::view-transition-old(carpeta-nav),
  html[data-nav-dir]::view-transition-new(carpeta-nav),
  html[data-nav-dir]::view-transition-old(carpeta-ruta),
  html[data-nav-dir]::view-transition-new(carpeta-ruta) {
    mix-blend-mode: normal;
  }

  /* La ruta (título) hace relevo: sale la anterior y entra la nueva, sin encimarse */
  html[data-nav-dir] .crumbs {
    view-transition-name: carpeta-ruta;
  }

  ::view-transition-group(carpeta-ruta) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }

  html[data-nav-dir]::view-transition-old(carpeta-ruta) {
    animation: ruta-sale 110ms ease-out both;
  }

  html[data-nav-dir="adentro"]::view-transition-new(carpeta-ruta) {
    animation: ruta-entra-der 240ms cubic-bezier(0.23, 1, 0.32, 1) 70ms both;
  }

  html[data-nav-dir="afuera"]::view-transition-new(carpeta-ruta) {
    animation: ruta-entra-izq 240ms cubic-bezier(0.23, 1, 0.32, 1) 70ms both;
  }
}

@keyframes ruta-sale {
  to { opacity: 0; }
}

@keyframes ruta-entra-der {
  from { opacity: 0; transform: translateX(12px); }
}

@keyframes ruta-entra-izq {
  from { opacity: 0; transform: translateX(-12px); }
}

/* Relevo limpio: lo anterior se va rápido y lo nuevo llega justo después (sin encimarse) */
@media (prefers-reduced-motion: no-preference) {
  html[data-nav-dir="adentro"]::view-transition-old(carpeta-nav) {
    animation: carpeta-sale-izq 130ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  html[data-nav-dir="afuera"]::view-transition-old(carpeta-nav) {
    animation: carpeta-sale-der 130ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  html[data-nav-dir="adentro"]::view-transition-new(carpeta-nav) {
    animation: carpeta-entra-der 340ms cubic-bezier(0.32, 0.72, 0, 1) 90ms both;
  }

  html[data-nav-dir="afuera"]::view-transition-new(carpeta-nav) {
    animation: carpeta-entra-izq 340ms cubic-bezier(0.32, 0.72, 0, 1) 90ms both;
  }

  /* El resto de la página no hace su fundido general durante el cambio de carpeta */
  html[data-nav-dir]::view-transition-old(root),
  html[data-nav-dir]::view-transition-new(root) {
    animation: none;
  }
}

/* Documentos sin entrada en cascada: al llegar desde otra pantalla ya hay un fundido de página,
   y sumar la cascada (tarjetas que suben) se veía como un brinco o una animación repetida.
   Las tarjetas aparecen quietas; solo se resalta lo recién creado o movido (.is-new). */
.files > .fitem:not(.is-new) {
  animation: none;
}

/* ---------- Portadas sin «brinco» ----------
   Si el archivo tiene portada, el ícono del formato no se muestra: el recuadro queda en un
   tono neutro y la imagen aparece encima con un fundido corto (sin el cambio ícono → foto).
   Si la portada falla, vuelve el ícono. */
.fitem__thumb:has(> img.is-cover) > .icon,
.fitem__thumb:has(> img.is-vector) > .icon {
  visibility: hidden;
}

.fitem__thumb.is-cover-failed > .icon {
  visibility: visible;
}

.fitem__thumb.is-cover-failed > img {
  display: none;
}

.fitem__thumb:has(> img.is-cover):not(.is-cover-failed) {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

.fitem__thumb img[data-thumb] {
  transition-duration: 160ms;
}

/* Documentos apagado para la empresa: sin «Adjuntar desde Documentos» ni «Guardar en Documentos» */
body[data-modules-off*="documentos"] [data-pick-docs],
body[data-modules-off*="documentos"] .file__save {
  display: none;
}

/* ---------- Administración de la empresa y módulos ---------- */

.company__body {
  display: grid;
  gap: 18px;
  max-width: 980px;
  padding: 8px 24px 40px;
}

.company__meter {
  display: grid;
  gap: 10px;
  margin: 10px 0 8px;
}

.company__meter .quota__bar {
  height: 8px;
}

.company .add-box {
  margin-top: 16px;
}

.badge--admin {
  background: var(--negro);
  color: var(--lima);
}

@media (prefers-color-scheme: dark) {
  .badge--admin {
    background: color-mix(in srgb, var(--lima) 16%, transparent);
  }
}

.modules-form {
  gap: 10px;
}

.module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}

.module-row--fixed {
  cursor: default;
}

.module-row__text {
  display: grid;
  gap: 2px;
}

.module-row__title {
  font-weight: 700;
}

.module-row__desc {
  color: var(--ink-2);
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  .company__body {
    padding: 8px 16px 32px;
  }
}

.row-item__you {
  color: var(--ink-2);
  font-weight: 500;
}

/* Campos numéricos cortos en formularios en línea (p. ej. «Espacio total (GB)») */
.inline-form .field:has([name="total_quota"]) {
  flex: 0 1 220px;
  width: 220px;
}

.inline-form:has([name="total_quota"]) {
  align-items: flex-end;
}

/* Panel de subidas: entra desde abajo y se retira por el mismo camino */
.uploads {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(12px);
  }
}

.uploads.is-leaving {
  opacity: 0;
  transform: translateY(12px);
}

/* =====================================================================
 * Instalador y acceso al panel: mismo lenguaje que el acceso al correo
 * ===================================================================== */

.gate--auth .gate__brand img {
  width: auto;
  height: 46px;
}

.gate__headline--small {
  font-size: clamp(2.75rem, 1.4rem + 3.2vw, 4.75rem);
}

.gate__progress {
  margin-top: 18px;
  color: #8C8C86;
  font-size: 0.8125rem;
}

/* Pasos sobre el lienzo oscuro */
.gate__steps {
  margin-top: 32px;
}

.gate__steps .step {
  color: #6E6E68;
}

.gate__steps .step--done {
  color: #B3B2AB;
}

.gate__steps .step--current {
  color: var(--hueso);
}

.gate__steps .step__mark {
  border-color: #3B3B38;
}

.gate__steps .step--done .step__mark {
  background: rgb(255 255 255 / 0.08);
}

.gate__steps .step__check {
  fill: var(--lima);
  color: var(--lima);
}

/* El instalador tiene formularios largos: la página puede desplazarse */
.gate--install {
  height: auto;
  min-height: 100dvh;
}

.gate--install .gate__stage {
  align-items: start;
}

.gate--install .gate__intro {
  position: sticky;
  top: 48px;
}

@media (min-width: 961px) {
  .gate--install .gate__stage {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  }
}

/* Contenido del formulario dentro de la tarjeta de vidrio */
.gate__card .page-head {
  margin-bottom: 20px;
}

.gate__card .page-head h1 {
  color: var(--hueso);
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}

.gate__card .page-head .lead,
.gate__card .summary-note,
.gate__card .field__hint {
  color: #A9A8A1;
}

.gate__card .lead strong {
  color: var(--hueso);
}

.gate__card .select {
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background-color: var(--field-bg);
  color: var(--ink);
}

.gate__card .btn--primary {
  background: var(--lima);
  color: var(--negro);
  box-shadow: 0 10px 30px -12px rgb(198 244 50 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.gate__card .btn--primary:hover {
  background: #D4F862;
}

.gate__card .btn--secondary {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.04);
  color: var(--hueso);
}

.gate__card .link-back {
  color: #A9A8A1;
}

.gate__card .summary,
.gate__card .checklist__list {
  border-color: rgb(255 255 255 / 0.08);
  background: rgb(255 255 255 / 0.04);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gate__card .summary dt,
.gate__card .checklist__list {
  color: #A9A8A1;
}

.gate__card .summary dd {
  color: var(--hueso);
}

.install-servers {
  margin: 0;
  padding: 0;
  border: 0;
}

.install-servers legend {
  margin-bottom: 8px;
  color: var(--hueso);
}

.form__row--server {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 130px;
  gap: 12px;
}

.install-test {
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.03);
}

.install-test summary {
  color: var(--hueso);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.install-test[open] summary {
  margin-bottom: 14px;
}

.install-test .btn {
  margin-top: 12px;
}

@media (max-width: 960px) {
  .gate--auth .gate__lead,
  .gate--auth .gate__steps {
    display: none;
  }

  .gate--install .gate__intro {
    position: static;
  }

  .gate--auth .gate__headline--small {
    font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
  }
}

@media (max-width: 560px) {
  .form__row--server {
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .form__row--server .field:last-child {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
 * Panel del super admin con el lenguaje del webmail
 * ===================================================================== */

.page--admin .mail-main.admin-main {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.page--admin .admin {
  min-height: 100%;
  background: transparent;
}

.page--admin .admin__inner {
  max-width: 1080px;
  padding: 36px 40px 72px;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-brand img {
  width: auto;
  height: 34px;
}

.admin-brand__tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgb(198 244 50 / 0.14);
  color: var(--lima);
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-me {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-me .me__text {
  flex: 1;
  min-width: 0;
}

.admin-me form {
  margin: 0;
}

.admin-me__exit {
  color: var(--hueso-2);
}

.admin-me__exit:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--hueso);
}

.page--admin .mail-side__foot .powered {
  margin-top: 14px;
}

/* Cabecera de la ficha: título = sección, debajo la empresa y su estado */
.page--admin .client-head {
  margin-bottom: 24px;
}

.page--admin .client-panel {
  margin-top: 0;
}

/* Celular: la barra lateral se vuelve una cabecera compacta desplazable */
@media (max-width: 860px) {
  .page--admin .mail-app {
    display: block;
    padding-bottom: 0;
  }

  .page--admin .mail-side {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 10px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--negro-line);
    scrollbar-width: none;
  }

  .page--admin .mail-side .side-nav {
    display: flex;
    gap: 4px;
  }

  .page--admin .mail-side .side-nav__title,
  .page--admin .mail-side__foot .powered,
  .page--admin .admin-me .me__text,
  .page--admin .admin-me .avatar,
  .page--admin .admin-brand__tag {
    display: none;
  }

  .page--admin .mail-side .side-nav__item {
    flex: none;
    white-space: nowrap;
  }

  .page--admin .mail-side__foot {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .page--admin .admin-brand img {
    height: 26px;
  }

  .page--admin .mail-main.admin-main {
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .page--admin .admin__inner {
    padding: 22px 16px 48px;
  }
}

.admin-brand,
.admin-brand:hover {
  text-decoration: none;
}

/* Celular: marca y salir arriba; las secciones debajo como pastillas que se acomodan */
@media (max-width: 860px) {
  .page--admin .mail-side {
    flex-wrap: wrap;
    row-gap: 8px;
    overflow: visible;
  }

  .page--admin .admin-brand {
    order: 0;
    margin-right: auto;
  }

  .page--admin .mail-side__foot {
    order: 1;
  }

  .page--admin .mail-side .side-nav {
    order: 2;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  .page--admin .mail-side .side-nav + .side-nav {
    width: auto;
  }

  .page--admin .mail-side .side-nav__item {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--negro-line);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
  }

  .page--admin .mail-side .side-nav__item .icon {
    width: 16px;
    height: 16px;
  }

  .page--admin .mail-side .side-nav__item .nav-pill {
    border-radius: var(--radius-pill);
  }

  .page--admin .client-head__visit {
    display: none;
  }
}

@media (max-width: 860px) {
  .page--admin .mail-side .side-nav {
    flex-direction: row;
  }

  .page--admin .mail-side .side-nav__item {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    gap: 6px;
  }
}

@media (max-width: 860px) {
  .page--admin .mail-side {
    position: static;
  }
}

/* Instalador › Tu empresa: el campo corto a la derecha con el ancho justo para su etiqueta */
.gate__card .form__row--host:has([name="quota"]) {
  grid-template-columns: minmax(0, 1fr) 190px;
}

@media (max-width: 560px) {
  .gate__card .form__row--host:has([name="quota"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.diagnosis__sub {
  margin: 22px 0 8px;
  font-size: 1rem;
}

/* =====================================================================
 * App móvil (1.3.0): el webmail instalado se siente como una app de correo.
 * Cabecera compacta bajo la isla dinámica, pestañas tipo iOS de borde a borde,
 * botón Redactar siempre visible, filas densas y redacción a pantalla completa.
 * Esta capa manda sobre las anteriores en el celular.
 * ===================================================================== */

@media (max-width: 860px) {
  body.page--webmail {
    /* Margen de la isla dinámica; si el iPhone no lo informa, la app pone uno de respaldo (--safe-top-js) */
    --safe-top: max(env(safe-area-inset-top), var(--safe-top-js, 0px));
    --m-top: calc(56px + var(--safe-top));
    --m-tab: calc(52px + max(env(safe-area-inset-bottom), 6px));
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }

  body.page--webmail a,
  body.page--webmail button,
  body.page--webmail label {
    touch-action: manipulation;
  }

  /* Campos de 16 px: iOS no hace zoom al tocarlos */
  body.page--webmail input,
  body.page--webmail textarea,
  body.page--webmail select {
    font-size: max(16px, 1em);
  }

  /* ---------- Cabecera: co-marca debajo de la isla dinámica ---------- */

  body.page--webmail .mail-top {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--m-top);
    padding: var(--safe-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 0;
    background: rgb(14 14 14 / 0.9);
    box-shadow: none;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }

  body.page--webmail .mail-top__brand {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
  }

  body.page--webmail .mail-top .cobrand {
    gap: 10px;
  }

  body.page--webmail .mail-top .cobrand__intux img {
    width: auto;
    height: 20px;
  }

  body.page--webmail .mail-top .cobrand__client img {
    width: auto;
    max-width: 128px;
    height: 26px;
    object-fit: contain;
    object-position: left center;
  }

  body.page--webmail .mail-top .cobrand__sep {
    height: 22px;
  }

  body.page--webmail .mail-top__me {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    border: 0;
    background: none;
  }

  body.page--webmail .mail-top .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  body.page--webmail .mail-top .menu {
    position: fixed;
    top: calc(var(--m-top) + 8px);
    right: 12px;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--m-top) - var(--m-tab) - 24px);
    overflow-y: auto;
  }

  /* ---------- Contenido: nada queda bajo las barras ---------- */

  body.page--webmail .mail-app {
    min-height: calc(100dvh - var(--m-top));
    padding-bottom: calc(var(--m-tab) + 16px);
  }

  body.page--webmail .mail-main {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* ---------- Pestañas inferiores tipo iOS ---------- */

  body.page--webmail .tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    width: 100%;
    height: var(--m-tab);
    padding: 0 max(4px, env(safe-area-inset-right)) max(env(safe-area-inset-bottom), 6px) max(4px, env(safe-area-inset-left));
    overflow: visible;
    border: 0;
    border-top: 1px solid rgb(255 255 255 / 0.07);
    border-radius: 0;
    background: rgb(14 14 14 / 0.9);
    box-shadow: none;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }

  body.page--webmail .tabbar__item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 0 0;
    border-radius: 0;
    background: none;
    color: #8E8D87;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-user-select: none;
    user-select: none;
    transition: color 150ms ease;
  }

  body.page--webmail .tabbar__item > span:not(.nav-pill) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page--webmail .tabbar__item .icon {
    width: 25px;
    height: 25px;
    transition: transform 160ms var(--ease-out);
  }

  body.page--webmail .tabbar__item:active .icon {
    transform: scale(0.88);
  }

  body.page--webmail .tabbar__item[aria-current] {
    background: none;
    color: var(--hueso);
  }

  body.page--webmail .tabbar__item[aria-current] .icon {
    color: var(--lima);
  }

  body.page--webmail .tabbar .nav-pill {
    display: none;
  }

  /* ---------- Botón Redactar (siempre a la vista, sobre las pestañas) ---------- */

  body.page--webmail .fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--m-tab) + 16px);
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    padding: 0 22px 0 18px;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 18px;
    background: var(--negro);
    color: var(--hueso);
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: 0 10px 28px -8px rgb(14 14 14 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.1);
    -webkit-user-select: none;
    user-select: none;
  }

  body.page--webmail .fab .icon {
    width: 22px;
    height: 22px;
    color: var(--lima);
  }

  body.page--webmail .fab:active {
    transform: scale(0.96);
  }

  body.page--webmail .is-reading ~ .fab,
  body.page--webmail .is-composing ~ .fab {
    display: none;
  }

  /* La lista termina por encima del botón */
  body.page--webmail .mail-list {
    padding-bottom: 84px;
  }

  /* ---------- Bandeja: título grande, búsqueda y carpetas compactas ---------- */

  body.page--webmail .mail-list__head {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 8px;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page--webmail .mail-list__title {
    order: -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }

  body.page--webmail .mail-list__title h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  body.page--webmail .mail-list__meta {
    color: var(--ink-2);
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  body.page--webmail .mail-list__head .search__input {
    height: 38px;
    padding-left: 38px;
    border: 0;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    box-shadow: none;
    font-size: 16px;
  }

  body.page--webmail .mail-list__head .search__icon {
    left: 12px;
    width: 18px;
    height: 18px;
  }

  body.page--webmail .folder-chips {
    gap: 6px;
    margin: 0 -16px;
    padding: 2px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.page--webmail .folder-chips::-webkit-scrollbar {
    display: none;
  }

  body.page--webmail .folder-chips .chip {
    height: 32px;
    padding: 0 13px;
    border: 0;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  body.page--webmail .folder-chips .chip[aria-current] {
    background: var(--ink);
    color: var(--bg);
  }

  body.page--webmail .new-mail {
    display: flex;
    justify-content: center;
  }

  body.page--webmail .new-mail[hidden] {
    display: none;
  }

  /* ---------- Filas de correo (como Mail de iPhone) ---------- */

  body.page--webmail .msgs {
    padding: 0;
  }

  body.page--webmail .msgs > li {
    position: relative;
  }

  body.page--webmail .msgs > li + li::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 32px;
    height: 1px;
    background: var(--line);
    content: "";
    opacity: 0.8;
  }

  body.page--webmail .msg {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 1px 8px;
    padding: 11px 16px 12px 14px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body.page--webmail .msg:active {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }

  body.page--webmail .msg__dot {
    align-self: center;
    width: 10px;
    height: 10px;
  }

  body.page--webmail .msg--unread .msg__dot {
    background: var(--ink);
  }

  body.page--webmail .msg__from {
    font-size: 1rem;
    font-weight: 700;
  }

  body.page--webmail .msg__date {
    align-self: center;
    font-size: 0.8125rem;
    font-weight: 500;
  }

  body.page--webmail .msg__subject {
    font-size: 0.9375rem;
    font-weight: 500;
  }

  body.page--webmail .msg__preview {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  body.page--webmail .pager {
    padding: 12px 16px;
  }

  /* ---------- Lectura ---------- */

  body.page--webmail .toolbar {
    position: sticky;
    top: var(--m-top);
    z-index: 5;
    gap: 2px;
    min-height: 50px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }

  body.page--webmail .toolbar .icon-btn {
    width: 44px;
    height: 44px;
  }

  body.page--webmail .toolbar .icon-btn .icon {
    width: 22px;
    height: 22px;
  }

  body.page--webmail .toolbar .btn--small {
    min-height: 40px;
    padding: 0 10px;
  }

  body.page--webmail .letter {
    padding: 18px 16px 32px;
  }

  body.page--webmail .letter__subject {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  body.page--webmail .letter__meta {
    gap: 4px 12px;
  }

  body.page--webmail .letter__meta .avatar {
    width: 40px;
    height: 40px;
  }

  body.page--webmail .attachments .file {
    min-height: 60px;
  }

  /* ---------- Títulos de las demás pantallas: grandes, como iOS ---------- */

  body.page--webmail .pane-head {
    position: static;
    padding: 14px 16px 10px;
    border-bottom: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page--webmail .pane-head h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  body.page--webmail .mail-body .btn {
    min-height: 40px;
  }

  /* ---------- Redactar: pantalla completa como Mail ---------- */

  body.page--webmail .cwin,
  body.page--webmail .cwin[data-state="max"] {
    inset: 0;
    z-index: 60;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    transform-origin: bottom center;
  }

  body.page--webmail .cwin__bar {
    gap: 6px;
    height: var(--m-top);
    padding: var(--safe-top) 8px 0;
    background: var(--negro);
  }

  body.page--webmail .cwin__tools {
    display: contents;
  }

  body.page--webmail .cwin [data-cwin="close"] {
    order: -1;
  }

  body.page--webmail .cwin [data-cwin="max"] {
    display: none;
  }

  body.page--webmail .cwin__title {
    padding: 0 6px;
    font-size: 1.0625rem;
    text-align: center;
  }

  body.page--webmail .cwin__btn {
    width: 44px;
    height: 44px;
    color: var(--hueso);
  }

  body.page--webmail .cwin__btn .icon {
    width: 22px;
    height: 22px;
  }

  body.page--webmail .cwin__send {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 3px;
    border: 0;
    border-radius: 50%;
    background: var(--lima);
    color: var(--negro);
    cursor: pointer;
    transition: transform 140ms var(--ease-out), opacity 150ms ease;
  }

  body.page--webmail .cwin__send .icon {
    width: 20px;
    height: 20px;
  }

  body.page--webmail .cwin__send:active {
    transform: scale(0.92);
  }

  body.page--webmail .cwin__send[aria-busy="true"] {
    opacity: 0.5;
  }

  body.page--webmail .cwin .compose__row {
    min-height: 48px;
    padding: 4px 16px;
  }

  body.page--webmail .cwin .compose__body {
    min-height: 40dvh;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  body.page--webmail .cwin .dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0 16px 10px;
    padding: 4px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  body.page--webmail .cwin .dropzone__label,
  body.page--webmail .cwin .dropzone__docs {
    min-height: 44px;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  body.page--webmail .cwin .dropzone__hint {
    display: none;
  }

  body.page--webmail .cwin .dropzone .compose__files {
    flex-basis: 100%;
    padding: 4px 0;
  }

  /* El envío vive en la barra: abajo quedan las opciones secundarias en una fila */
  body.page--webmail .cwin .compose__actions {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
    background: none;
  }

  body.page--webmail .cwin .compose__actions > [type="submit"] {
    display: none;
  }

  body.page--webmail .cwin .compose__actions .btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.875rem;
  }

  body.page--webmail .cwin .compose__discard {
    margin-left: auto;
  }

  body.page--webmail .cwin .schedule__menu {
    position: fixed;
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }

  /* Minimizada: una barra sobre las pestañas */
  body.page--webmail .cwin[data-state="min"] {
    inset: auto 10px calc(var(--m-tab) + 10px);
    width: auto;
    height: 52px;
    border-radius: 16px;
    background: var(--negro);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.5);
  }

  body.page--webmail .cwin[data-state="min"] .cwin__bar {
    height: 52px;
    padding-top: 0;
  }

  body.page--webmail .cwin[data-state="min"] .cwin__send {
    display: none;
  }

  /* ---------- Visor y diálogos: respetan la isla y la barra de inicio ---------- */

  body.page--webmail .viewer__bar {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  body.page--webmail .toast-region {
    bottom: calc(var(--m-tab) + 12px);
  }

  body.page--webmail .uploads {
    bottom: calc(var(--m-tab) + 12px);
  }
}

/* Botón de enviar en la barra de redacción: solo en el celular */
.cwin__send {
  display: none;
}

/* Correos que llegan solos a la lista */
.msgs > li.is-arriving {
  animation: msg-arrive 520ms var(--ease-out) both;
}

.msgs > li.is-arriving .msg {
  background: color-mix(in srgb, var(--lima) 14%, transparent);
  transition: background-color 900ms ease;
}

@keyframes msg-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .msgs > li.is-arriving {
    animation: none;
  }
}

/* Aviso en Ajustes cuando las notificaciones no pueden llegar */
.push-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font-size: 0.875rem;
}

.push-warn .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* Modo oscuro en el celular: el botón Redactar va en lima (lima siempre sobre oscuro) */
@media (max-width: 860px) and (prefers-color-scheme: dark) {
  body.page--webmail .fab {
    border-color: transparent;
    background: var(--lima);
    color: var(--negro);
  }

  body.page--webmail .fab .icon {
    color: var(--negro);
  }

  body.page--webmail .msg--unread .msg__dot {
    background: var(--lima);
  }
}

/* Acceso: el logo nunca queda debajo de la isla dinámica ni el pie bajo la barra de inicio */
@media (max-width: 860px) {
  .page--mail-login .gate {
    padding-top: calc(env(safe-area-inset-top) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
}

/* Firma con diseño (HTML) en Ajustes */
.textarea--code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.sig-preview__label {
  margin-top: 16px;
}

.sig-preview {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}


/* =====================================================================
 * App móvil (1.3.2): menú lateral como Gmail, campana con avisos y cabecera
 * con más aire bajo la isla dinámica.
 * ===================================================================== */

.mail-top__btn,
.drawer-scrim {
  display: none;
}

/* Centro de avisos (computador y celular) */
.menu--notices {
  width: 340px;
}

.notices {
  display: grid;
  gap: 2px;
  max-height: min(70dvh, 520px);
  padding: 0 6px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notices__group {
  margin: 10px 10px 4px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.notice-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .notice-row:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

.notice-row:active {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

.notice-row__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.notice-row__icon .icon {
  width: 18px;
  height: 18px;
}

.notice-row__icon--live {
  background: var(--negro);
  color: var(--lima);
}

.notice-row__text {
  display: grid;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.notice-row__text strong,
.notice-row__text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-row__text span {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.notices-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 16px 20px;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-align: center;
}

.notices-empty__icon {
  width: 28px;
  height: 28px;
  color: var(--ink);
}

.notices-empty__title {
  color: var(--ink);
  font-weight: 700;
}

.notices-loading {
  padding: 16px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  /* ---------- Cabecera: ☰ · logos · campana · cuenta ---------- */

  body.page--webmail .mail-top,
  body.page--webmail .mail-top--solo {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 2px;
    padding-right: max(6px, env(safe-area-inset-right));
    padding-left: max(6px, env(safe-area-inset-left));
  }

  body.page--webmail .mail-top__brand {
    grid-column: 2;
    justify-self: start;
    padding: 0 6px;
    overflow: hidden;
  }

  body.page--webmail .mail-top--solo .mail-top__brand {
    justify-self: center;
  }

  body.page--webmail .mail-top .cobrand__intux img {
    height: 18px;
  }

  body.page--webmail .mail-top .cobrand__client img {
    max-width: 112px;
    height: 24px;
  }

  body.page--webmail .mail-top .cobrand__sep {
    min-height: 0;
    height: 20px;
  }

  body.page--webmail .mail-top__bell {
    grid-column: 3;
  }

  body.page--webmail .mail-top [data-region="top-me"],
  body.page--webmail .mail-top--solo .mail-top__me {
    grid-column: 4;
    justify-self: center;
  }

  body.page--webmail .mail-top__me {
    margin: 0;
  }

  body.page--webmail .mail-top__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--hueso);
    cursor: pointer;
    transition: background-color 150ms ease, transform 140ms var(--ease-out);
  }

  body.page--webmail .mail-top__btn .icon {
    width: 24px;
    height: 24px;
  }

  body.page--webmail .mail-top__btn:active {
    background: rgb(255 255 255 / 0.1);
    transform: scale(0.94);
  }

  body.page--webmail .mail-top__btn .appbar__badge {
    position: absolute;
    top: 5px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--lima);
    color: var(--negro);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
  }

  body.page--webmail .mail-top .menu--notices {
    right: 10px;
    left: 10px;
    width: auto;
  }

  body.page--webmail .notices {
    max-height: calc(100dvh - var(--m-top) - var(--m-tab) - 80px);
  }

  body.page--webmail .notice-row {
    min-height: 56px;
  }

  /* Las carpetas viven en el menú lateral, como en Gmail */
  body.page--webmail .folder-chips {
    display: none;
  }

  /* ---------- Menú lateral ---------- */

  body.page--webmail:not(.page--admin) .mail-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(86vw, 330px);
    height: 100dvh;
    padding: calc(var(--safe-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px) max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 0 22px 22px 0;
    box-shadow: 24px 0 60px -20px rgb(0 0 0 / 0.6);
    visibility: hidden;
    transform: translateX(-104%);
    transition: transform 340ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), visibility 0s linear 340ms;
  }

  body.page--webmail.has-drawer .mail-side {
    visibility: visible;
    transform: none;
    transition: transform 340ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), visibility 0s;
  }

  body.page--webmail:not(.page--admin) .mail-side .side-nav__item {
    min-height: 46px;
    font-size: 0.9375rem;
  }

  body.page--webmail:not(.page--admin) .mail-side__brand {
    padding: 4px 8px 14px;
  }

  body.page--webmail .drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: block;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  body.page--webmail.has-drawer .drawer-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  body.page--webmail.has-drawer {
    overflow: hidden;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  body.page--webmail:not(.page--admin) .mail-side,
  body.page--webmail.has-drawer .mail-side,
  body.page--webmail .drawer-scrim {
    transition: none;
  }
}

/* Panel › Estado: comando del cron listo para copiar */
.cron-cmd {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 12px;
}

.cron-cmd .code {
  flex: 1 1 320px;
  min-width: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.tab-section .status-card + .field__hint {
  margin-top: 14px;
}

/* Los menús de la cabecera móvil van sólidos: un vidrio dentro de otro vidrio se dibuja transparente */
@media (max-width: 860px) {
  body.page--webmail .mail-top .menu {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 24px 60px -18px rgb(14 14 14 / 0.45);
    color: var(--ink);
    color-scheme: light dark;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.page--webmail .mail-top .menu--notices {
    position: fixed;
    top: calc(var(--m-top) + 8px);
  }
}

/* =====================================================================
 * App móvil 1.4.0 — lenguaje de iOS 26 y Material moderno (iPhone y Android)
 * Vidrio líquido flotante: cápsula arriba (menú · marca → buscador · avisos ·
 * cuenta), barra de pestañas con gota deslizante y «+» al lado. Gestos de Mail,
 * vista previa al mantener presionado, hoja de redactar y transiciones de app.
 * Esta capa manda sobre las anteriores en el celular.
 * ===================================================================== */

.dock,
.topcap {
  display: none;
}

@media (max-width: 860px) {
  html body.page--webmail {
    --safe-top: env(safe-area-inset-top);
    --cap-h: 52px;
    --m-top: calc(var(--safe-top) + var(--cap-h) + 18px);
    --dock-h: 62px;
    --dock-bottom: max(env(safe-area-inset-bottom), 12px);
    --m-tab: calc(var(--dock-h) + var(--dock-bottom) + 12px);
    --gl-bg: rgb(250 249 245 / 0.62);
    --gl-bg-strong: rgb(250 249 245 / 0.9);
    --gl-hi: rgb(255 255 255 / 0.85);
    --gl-line: rgb(14 14 14 / 0.08);
    --gl-shadow: 0 12px 34px -12px rgb(14 14 14 / 0.28), 0 2px 6px -2px rgb(14 14 14 / 0.08);
    --gl-blur: blur(24px) saturate(190%);
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --act-del: #E5484D;
    --act-star: #F0A52B;
    --act-more: #8E8D87;
    background: var(--bg);
  }

  /* Vidrio líquido: desenfoque, brillo en el borde superior y sombra suave */
  html body.page--webmail .topcap,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before,
  html body.page--webmail .reader .toolbar__back,
  html body.page--webmail .peek__menu,
  html body.page--webmail .mail-top .menu,
  html body.page--webmail #menu-nuevo {
    background: var(--gl-bg);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), var(--gl-shadow);
  }

  /* Contenido: libre de los elementos flotantes */
  html body.page--webmail .mail-app {
    min-height: 100dvh;
    padding-top: var(--m-top);
    padding-bottom: var(--m-tab);
  }

  html body.page--webmail .mail-main,
  html body.page--webmail .mail-list__head,
  html body.page--webmail .pane-head {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body.page--webmail .fab,
  html body.page--webmail [data-plus-target],
  html body.page--webmail .mail-list__head .search,
  html body.page--webmail .folder-chips {
    display: none;
  }

  html body.page--webmail .mail-list {
    padding-bottom: 24px;
  }

  /* ---------- Cápsula superior ---------- */

  html body.page--webmail .mail-top {
    position: fixed;
    inset: 0 0 auto;
    z-index: 40;
    display: block;
    height: auto;
    padding: calc(var(--safe-top) + 8px) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  /* Velo bajo la barra de estado: el contenido que sube no choca con la hora */
  html body.page--webmail .mail-top::before {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--safe-top) + 14px);
    background: linear-gradient(to bottom, var(--bg) 55%, color-mix(in srgb, var(--bg) 0%, transparent));
    content: "";
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }

  html body.page--webmail .mail-top.is-scrolled::before {
    opacity: 1;
  }

  html body.page--webmail .topcap {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 2px;
    height: var(--cap-h);
    padding: 0 4px;
    border-radius: 26px;
    pointer-events: auto;
    transition: transform 460ms var(--ease-ios), opacity 260ms ease;
  }

  html body.page--webmail .mail-top.is-hidden .topcap {
    opacity: 0;
    transform: translate3d(0, calc(-100% - var(--safe-top) - 20px), 0);
  }

  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 160ms ease, transform 200ms var(--ease-spring);
  }

  html body.page--webmail .topcap__btn .icon {
    width: 22px;
    height: 22px;
  }

  html body.page--webmail .topcap__btn:active,
  html body.page--webmail .topcap__me:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    transform: scale(0.9);
  }

  html body.page--webmail .topcap__me .avatar {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
    box-shadow: 0 0 0 2px var(--gl-hi);
  }

  html body.page--webmail .topcap .appbar__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--negro);
    color: var(--hueso);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--gl-hi);
  }

  html body.page--webmail .topcap__center {
    position: relative;
    min-width: 0;
    height: 44px;
  }

  html body.page--webmail .topcap__brand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    transition: opacity 320ms ease, transform 520ms var(--ease-ios), filter 320ms ease;
  }

  html body.page--webmail .topcap__brand .cobrand {
    gap: 10px;
  }

  html body.page--webmail .topcap__brand .cobrand__intux img {
    width: auto;
    height: 18px;
  }

  html body.page--webmail .topcap__brand .cobrand__client img {
    width: auto;
    max-width: 104px;
    height: 24px;
  }

  html body.page--webmail .topcap__brand .cobrand__sep {
    min-height: 0;
    height: 18px;
    background: var(--gl-line);
  }

  html body.page--webmail .topcap__search {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 8px, 0);
    transition: opacity 320ms ease 80ms, transform 520ms var(--ease-ios) 40ms;
  }

  html body.page--webmail .mail-top.is-search .topcap__brand {
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
    transform: translate3d(0, -10px, 0) scale(0.94);
  }

  html body.page--webmail .mail-top.is-search .topcap__search {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  html body.page--webmail .topcap__glass {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ink-2);
  }

  html body.page--webmail .topcap__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }

  html body.page--webmail .topcap__input::placeholder {
    color: var(--ink-2);
  }

  html body.page--webmail .topcap__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  /* Menús de la cápsula: hojas de vidrio bajo ella */
  html body.page--webmail .mail-top .menu {
    position: fixed;
    top: calc(var(--safe-top) + var(--cap-h) + 16px);
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - var(--m-top) - var(--m-tab) - 16px);
    overflow-y: auto;
    border: 0;
    border-radius: 24px;
    background: var(--gl-bg-strong);
    color: var(--ink);
    transform-origin: top right;
  }

  /* ---------- Barra de pestañas flotante + «+» ---------- */

  html body.page--webmail .dock {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--dock-bottom);
    left: max(12px, env(safe-area-inset-left));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: transform 480ms var(--ease-ios), opacity 260ms ease;
  }

  html body.page--webmail .dock > * {
    pointer-events: auto;
  }

  html body.page--webmail .tabbar {
    position: relative;
    inset: auto;
    z-index: auto;
    display: flex;
    flex: 1;
    width: auto;
    min-width: 0;
    height: var(--dock-h);
    padding: 5px;
    overflow: visible;
    border: 0;
    border-radius: 31px;
  }

  html body.page--webmail .tabbar__drop {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    z-index: 0;
    width: var(--drop-w, 0);
    border-radius: 26px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    box-shadow: inset 0 1px 0 var(--gl-hi);
    transform: translate3d(var(--drop-x, 0), 0, 0);
    transition: transform 560ms var(--ease-spring), width 420ms var(--ease-ios), scale 260ms var(--ease-spring);
  }

  html body.page--webmail .tabbar__drop.is-press {
    scale: 1.06 0.94;
  }

  html body.page--webmail .tabbar__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border-radius: 26px;
    background: none;
    color: var(--ink-2);
    font-size: 0.625rem;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
    transition: color 200ms ease;
  }

  html body.page--webmail .tabbar__item .icon {
    width: 24px;
    height: 24px;
    color: inherit;
    transition: transform 260ms var(--ease-spring);
  }

  html body.page--webmail .tabbar__item:active .icon {
    transform: scale(0.86);
  }

  html body.page--webmail .tabbar__item[aria-current] {
    background: none;
    color: var(--ink);
  }

  html body.page--webmail .tabbar__item[aria-current] .icon {
    color: var(--ink);
    transform: scale(1.04);
  }

  html body.page--webmail .plus {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--dock-h);
    height: var(--dock-h);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--negro);
    color: var(--lima);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 14px 30px -10px rgb(14 14 14 / 0.6);
    cursor: pointer;
    transition: transform 260ms var(--ease-spring), opacity 200ms ease;
  }

  html body.page--webmail .plus .icon {
    width: 28px;
    height: 28px;
  }

  html body.page--webmail .plus:active {
    transform: scale(0.88) rotate(90deg);
  }

  html body.page--webmail .plus[hidden] {
    display: none;
  }

  /* ---------- Lista de correos ---------- */

  html body.page--webmail .mail-list__head {
    padding: 6px 20px 6px;
  }

  html body.page--webmail .mail-list__title h1 {
    font-size: 2.125rem;
    letter-spacing: -0.03em;
  }

  html body.page--webmail .msgs > li {
    position: relative;
    overflow: hidden;
    transition: height 280ms var(--ease-ios), opacity 200ms ease;
  }

  html body.page--webmail .msgs > li + li::before {
    z-index: 2;
    left: 34px;
  }

  html body.page--webmail .msg {
    position: relative;
    z-index: 1;
    padding: 12px 18px 13px 14px;
    background: var(--bg);
    -webkit-touch-callout: none;
    transition: transform 300ms var(--ease-ios), background-color 160ms ease, scale 380ms var(--ease-ios);
  }

  html body.page--webmail .msg.is-pressing {
    border-radius: 16px;
    scale: 0.97;
  }

  /* Bandeja de acciones bajo la fila */
  html body.page--webmail .swipe-tray {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  html body.page--webmail .swipe-tray--start {
    justify-content: flex-start;
  }

  html body.page--webmail .swipe-act {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }

  html body.page--webmail .swipe-act .icon {
    flex: none;
    width: 22px;
    height: 22px;
  }

  html body.page--webmail .swipe-act--del { background: var(--act-del); }
  html body.page--webmail .swipe-act--star { background: var(--act-star); }
  html body.page--webmail .swipe-act--more { background: var(--act-more); }
  html body.page--webmail .swipe-act--read { background: var(--negro); color: var(--hueso); }
  html body.page--webmail .swipe-act--read .icon { color: var(--lima); }

  html body.page--webmail .swipe-tray.is-armed .swipe-act {
    transition: width 240ms var(--ease-ios);
  }

  html body.page--webmail .swipe-tray--end.is-armed .swipe-act:last-child,
  html body.page--webmail .swipe-tray--start.is-armed .swipe-act:first-child {
    align-items: flex-end;
    padding: 0 28px;
  }

  html body.page--webmail .swipe-tray--start.is-armed .swipe-act:first-child {
    align-items: flex-start;
  }

  /* ---------- Vista previa al mantener presionado ---------- */

  html body.page--webmail .peek {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: calc(var(--safe-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  }

  html body.page--webmail .peek__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(14 14 14 / 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    opacity: 0;
    transition: opacity 280ms ease;
  }

  html body.page--webmail .peek.is-open .peek__backdrop {
    opacity: 1;
  }

  html body.page--webmail .peek__card {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    max-height: 44dvh;
    padding: 18px 18px 20px;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5), 0 0 0 0.5px var(--gl-line);
    color: var(--ink);
    font: inherit;
    text-align: left;
    transform-origin: top left;
    cursor: pointer;
  }

  html body.page--webmail .peek__head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  html body.page--webmail .peek__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    font-size: 0.8125rem;
    font-weight: 800;
  }

  html body.page--webmail .peek__who {
    display: grid;
    min-width: 0;
  }

  html body.page--webmail .peek__who strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.page--webmail .peek__who span {
    color: var(--ink-2);
    font-size: 0.8125rem;
  }

  html body.page--webmail .peek__subject {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
  }

  html body.page--webmail .peek__text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
  }

  html body.page--webmail .peek__menu {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 440px;
    max-height: 48dvh;
    overflow-y: auto;
    border-radius: 18px;
    background: var(--gl-bg-strong);
    transform-origin: top center;
  }

  html body.page--webmail .peek__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
  }

  html body.page--webmail .peek__item + .peek__item {
    box-shadow: inset 0 0.5px 0 var(--gl-line);
  }

  html body.page--webmail .peek__item .icon {
    flex: none;
    width: 20px;
    height: 20px;
  }

  html body.page--webmail .peek__item:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  html body.page--webmail .peek__item--danger {
    color: var(--act-del);
  }

  html body.page--webmail .peek__sep {
    display: block;
    height: 7px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }

  /* ---------- Lectura: atrás arriba, acciones abajo (como Mail) ---------- */

  html body.page--webmail:has(.mail-panes.is-reading) .mail-top .topcap,
  html body.page--webmail:has(.mail-panes.is-composing) .mail-top .topcap {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(-100% - var(--safe-top) - 20px), 0);
  }

  html body.page--webmail:has(.mail-panes.is-reading) .dock {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(100% + var(--dock-bottom) + 20px), 0);
  }

  html body.page--webmail:has(.mail-panes.is-reading) .dock > * {
    pointer-events: none;
  }

  html body.page--webmail:has(.mail-panes.is-reading) .mail-app {
    padding-top: 0;
  }

  html body.page--webmail .reader .toolbar {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--dock-bottom);
    left: max(12px, env(safe-area-inset-left));
    top: auto;
    z-index: 45;
    display: flex;
    justify-content: space-between;
    min-height: 0;
    height: var(--dock-h);
    padding: 0 10px;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body.page--webmail .reader .toolbar::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 31px;
    content: "";
  }

  html body.page--webmail .reader .toolbar__spacer,
  html body.page--webmail .reader .toolbar__wide {
    display: none;
  }

  html body.page--webmail .reader .toolbar .btn--quiet {
    order: 10;
    width: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 24px;
  }

  html body.page--webmail .reader .toolbar .btn--quiet span {
    display: none;
  }

  html body.page--webmail .reader .toolbar .btn--quiet .icon,
  html body.page--webmail .reader .toolbar .icon-btn .icon {
    width: 24px;
    height: 24px;
  }

  html body.page--webmail .reader .toolbar .icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 24px;
  }

  html body.page--webmail .reader .toolbar__back {
    position: fixed;
    top: calc(var(--safe-top) + 8px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 46;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ink);
  }

  html body.page--webmail .reader .letter {
    padding: calc(var(--safe-top) + 72px) 20px calc(var(--m-tab) + 24px);
  }

  html body.page--webmail .reader .letter__subject {
    font-size: 1.625rem;
    letter-spacing: -0.02em;
  }

  /* ---------- Redactar: hoja que sube desde abajo ---------- */

  html body.page--webmail .cwin,
  html body.page--webmail .cwin[data-state="max"] {
    inset: calc(var(--safe-top) + 10px) 0 0;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    box-shadow: 0 -12px 40px -12px rgb(0 0 0 / 0.35);
    transition: transform 480ms var(--ease-ios), opacity 200ms ease, inset 380ms var(--ease-ios), height 380ms var(--ease-ios), border-radius 380ms var(--ease-ios);

    @starting-style {
      opacity: 1;
      transform: translate3d(0, 100%, 0);
    }
  }

  html body.page--webmail .cwin.is-leaving {
    opacity: 1;
    transform: translate3d(0, 100%, 0);
    transition: transform 320ms cubic-bezier(0.4, 0, 1, 1);
  }

  html body.page--webmail .cwin__bar {
    position: relative;
    height: 60px;
    padding: 8px 8px 0;
    border-bottom: 0.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
  }

  html body.page--webmail .cwin__bar::before {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    content: "";
    transform: translateX(-50%);
  }

  html body.page--webmail .cwin__btn,
  html body.page--webmail .cwin__title {
    color: var(--ink);
  }

  html body.page--webmail .cwin__send {
    background: var(--negro);
    color: var(--lima);
  }

  html body.page--webmail .cwin[data-state="min"] {
    inset: auto max(12px, env(safe-area-inset-right)) calc(var(--m-tab) + 6px) max(12px, env(safe-area-inset-left));
    height: 56px;
    border-radius: 28px;
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.4), inset 0 0 0 0.5px var(--gl-line);
  }

  html body.page--webmail .cwin[data-state="min"] .cwin__bar {
    height: 56px;
    padding-top: 0;
    border: 0;
  }

  html body.page--webmail .cwin[data-state="min"] .cwin__bar::before {
    display: none;
  }

  /* La app de fondo se aleja un poco mientras la hoja está abierta (como iOS) */
  html body.page--webmail .mail-app {
    transition: transform 480ms var(--ease-ios), border-radius 480ms var(--ease-ios), filter 480ms ease;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) {
    background: #000;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .mail-app {
    overflow: hidden;
    border-radius: 16px;
    filter: brightness(0.82);
    transform: scale(0.93) translate3d(0, calc(var(--safe-top) * 0.4), 0);
    transform-origin: 50% 0;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .mail-top,
  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .dock {
    opacity: 0;
    pointer-events: none;
  }

  /* ---------- Documentos: «Nuevo» sale como hoja de vidrio sobre la barra ---------- */

  html body.page--webmail #menu-nuevo {
    position: fixed;
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--m-tab) + 4px);
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    border: 0;
    border-radius: 24px;
    background: var(--gl-bg-strong);
    transform-origin: bottom right;
  }

  /* ---------- Otras pantallas: títulos grandes y aire ---------- */

  html body.page--webmail .pane-head {
    padding: 6px 20px 10px;
  }

  html body.page--webmail .pane-head h1 {
    font-size: 2.125rem;
    letter-spacing: -0.03em;
  }

  html body.page--webmail .toast-region {
    bottom: calc(var(--m-tab) + 10px);
  }

  html body.page--webmail:has(.mail-panes.is-reading) .toast-region {
    bottom: calc(var(--m-tab) + 10px);
  }
}

/* Modo oscuro en el celular: vidrio oscuro, la gota y el «+» en lima */
@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail {
    --gl-bg: rgb(34 34 32 / 0.6);
    --gl-bg-strong: rgb(30 30 28 / 0.92);
    --gl-hi: rgb(255 255 255 / 0.14);
    --gl-line: rgb(255 255 255 / 0.08);
    --gl-shadow: 0 14px 36px -12px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  }

  html body.page--webmail .tabbar__drop {
    background: rgb(255 255 255 / 0.1);
  }

  html body.page--webmail .tabbar__item[aria-current],
  html body.page--webmail .tabbar__item[aria-current] .icon {
    color: var(--hueso);
  }

  html body.page--webmail .tabbar__item[aria-current] .icon {
    color: var(--lima);
  }

  html body.page--webmail .plus,
  html body.page--webmail .cwin__send {
    background: var(--lima);
    color: var(--negro);
  }

  html body.page--webmail .topcap .appbar__badge {
    background: var(--lima);
    color: var(--negro);
  }

  html body.page--webmail .swipe-act--read {
    background: var(--lima);
    color: var(--negro);
  }

  html body.page--webmail .swipe-act--read .icon {
    color: var(--negro);
  }
}

/* ---------- Transiciones entre pantallas en el celular ---------- */

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html body.page--webmail .mail-read {
    view-transition-name: none;
  }

  html body.page--webmail .mail-top {
    view-transition-name: mail-top;
  }

  html body.page--webmail .dock {
    view-transition-name: dock;
  }

  html body.page--webmail .tabbar {
    view-transition-name: none;
  }

  /* Entrar (abrir un correo): la pantalla nueva llega desde la derecha y la anterior se corre */
  html[data-slide="forward"]::view-transition-old(root) {
    animation: 420ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-push-old;
  }

  html[data-slide="forward"]::view-transition-new(root) {
    animation: 420ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-push-new;
  }

  html[data-slide="back"]::view-transition-old(root) {
    z-index: 2;
    animation: 380ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-pop-old;
  }

  html[data-slide="back"]::view-transition-new(root) {
    animation: 380ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-pop-new;
  }

  /* Cambiar de pestaña: un fundido corto con un leve acercamiento */
  html:not([data-slide])::view-transition-old(root) {
    animation: 180ms ease-out both ixm-fade-out;
  }

  html:not([data-slide])::view-transition-new(root) {
    animation: 260ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-fade-in;
  }
}

@keyframes ixm-push-new {
  from { transform: translate3d(100%, 0, 0); box-shadow: -20px 0 40px rgb(0 0 0 / 0.12); }
  to { transform: none; box-shadow: -20px 0 40px rgb(0 0 0 / 0); }
}

@keyframes ixm-push-old {
  to { transform: translate3d(-28%, 0, 0); filter: brightness(0.92); }
}

@keyframes ixm-pop-old {
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes ixm-pop-new {
  from { transform: translate3d(-28%, 0, 0); filter: brightness(0.92); }
}

@keyframes ixm-fade-out {
  to { opacity: 0; }
}

@keyframes ixm-fade-in {
  from { opacity: 0; transform: scale(0.985); }
}

/* App móvil 1.4.0: la luz ambiental se ve detrás de todo, sin bandas de color */
@media (max-width: 860px) {
  html body.page--webmail .mail-list,
  html body.page--webmail .mail-list__head,
  html body.page--webmail .mail-read,
  html body.page--webmail .reader,
  html body.page--webmail .split__detail,
  html body.page--webmail .split__list,
  html body.page--webmail .pane-head,
  html body.page--webmail .msg {
    background: transparent;
  }

  html body.page--webmail .msgs > li.is-swiping .msg,
  html body.page--webmail .msg.is-pressing {
    background: var(--surface);
  }

  html body.page--webmail::before {
    transition: opacity 480ms ease;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending))::before {
    opacity: 0;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .mail-app {
    background: var(--bg);
  }
}

/* Hoja de redactar: acciones secundarias ligeras, como cápsulas suaves */
@media (max-width: 860px) {
  html body.page--webmail .cwin .compose__actions .btn--secondary {
    border: 0;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    box-shadow: none;
  }

  html body.page--webmail .cwin .compose__row:focus-within {
    box-shadow: inset 0 -1.5px 0 var(--ink);
  }
}

/* Fotos de perfil e iniciales: círculo perfecto en toda la app */
.avatar,
.avatar--photo,
.peek__avatar {
  border-radius: 50%;
}

.avatar--photo {
  aspect-ratio: 1;
  object-fit: cover;
  overflow: hidden;
}

/* «Saltar al contenido» es para teclado: en pantallas táctiles no aparece al tocar arriba */
@media (pointer: coarse) {
  .skip-link,
  .skip-link:focus {
    display: none;
  }
}

@media (max-width: 860px) {
  /* Deslizar correos: el navegador solo se queda con el desplazamiento vertical */
  html body.page--webmail .msgs .msg {
    touch-action: pan-y;
  }

  /* Franja bajo la hora: sólida y nítida, del color de la app (sin degradado ni borroso) */
  html body.page--webmail .mail-top::before {
    height: var(--safe-top);
    background: var(--bg);
    opacity: 1;
    transition: none;
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .mail-top::before {
    opacity: 0;
  }
}

/* App instalada: sin zoom por doble toque y sin rebote lateral */
html.is-app,
html.is-app body {
  touch-action: pan-x pan-y;
  overscroll-behavior-x: none;
}

html.is-app .msgs .msg {
  touch-action: pan-y;
}

/* ---------- Documentos en el celular: 2 columnas (cuadrícula) o 3 (compacta) ---------- */

.view-btn--phone {
  display: none;
}

@media (max-width: 860px) {
  .view-btn--phone {
    display: inline-grid;
  }

  html body.page--webmail .drive:not([data-view="list"]) .files,
  html body.page--webmail .drive:not([data-view="list"]) .files--folders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Cuadrícula: carpetas en fichas de dos columnas */
  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb {
    width: 38px;
    height: 38px;
    margin: 10px 0 10px 10px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__body {
    padding: 10px 34px 10px 10px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__name {
    font-size: 0.875rem;
  }

  /* Compacta: tres columnas, carpetas de pie (ícono arriba, nombre abajo) */
  html body.page--webmail .drive[data-view="compact"] .files,
  html body.page--webmail .drive[data-view="compact"] .files--folders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--folder {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 14px 6px 10px;
    text-align: center;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--folder .fitem__thumb {
    width: 48px;
    height: 48px;
    margin: 0 0 8px;
    border-radius: 14px;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--folder .fitem__thumb .icon {
    width: 24px;
    height: 24px;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--folder .fitem__body {
    width: 100%;
    padding: 0;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--folder .fitem__name {
    font-size: 0.8125rem;
    text-align: center;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem__more,
  html body.page--webmail .drive[data-view="compact"] .fitem--file .fitem__meta,
  html body.page--webmail .drive[data-view="compact"] .fitem--file .fitem__badges {
    display: none;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--file .fitem__body {
    padding: 8px 8px 10px;
  }

  html body.page--webmail .drive[data-view="compact"] .fitem--file .fitem__name {
    font-size: 0.8125rem;
  }
}

/* =====================================================================
 * 1.4.1 — Filas con avatar, deslizar en cápsulas (como Mail de iOS 26)
 * y calendario móvil (meses continuos, vista del año y agenda del día)
 * ===================================================================== */

.msg__avatar {
  display: none;
}

@media (max-width: 860px) {
  /* ---------- Filas con avatar ---------- */
  html body.page--webmail .msg {
    grid-template-columns: 10px 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "dot av from date"
      ". av subject icons"
      ". av preview preview";
    column-gap: 10px;
    padding: 12px 18px 13px 8px;
  }

  html body.page--webmail .msg__avatar {
    display: grid;
    grid-area: av;
    align-self: start;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .msg__avatar--0 { background: var(--negro); color: var(--lima); }
  .msg__avatar--1 { background: #E4E2DC; color: var(--negro); }
  .msg__avatar--2 { background: #CFCDC4; color: var(--negro); }
  .msg__avatar--3 { background: color-mix(in srgb, var(--lima) 42%, var(--hueso)); color: var(--negro); }

  html body.page--webmail .msgs > li + li::before {
    left: 82px;
  }

  /* ---------- Deslizar: la fila es una tarjeta y las acciones, cápsulas ---------- */
  html body.page--webmail .msgs > li.is-swiping .msg {
    border-radius: 28px;
    background: color-mix(in srgb, var(--ink) 7%, var(--bg));
  }

  html body.page--webmail .msgs > li.is-swiping::before,
  html body.page--webmail .msgs > li.is-swiping + li::before {
    opacity: 0;
  }

  html body.page--webmail .swipe-tray {
    align-items: center;
    padding: 0 4px;
  }

  html body.page--webmail .swipe-act,
  html body.page--webmail .swipe-act.swipe-act--del,
  html body.page--webmail .swipe-act.swipe-act--star,
  html body.page--webmail .swipe-act.swipe-act--more,
  html body.page--webmail .swipe-act.swipe-act--read {
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 0 4px;
    background: none;
    color: var(--ink-2);
  }

  html body.page--webmail .swipe-tray.is-armed .swipe-act {
    align-items: center;
    padding: 0 4px;
  }

  html body.page--webmail .swipe-act__pill {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    height: 54px;
    border-radius: 27px;
    color: #fff;
  }

  html body.page--webmail .swipe-act__pill .icon {
    width: 24px;
    height: 24px;
  }

  html body.page--webmail .swipe-act__label {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    text-overflow: ellipsis;
  }

  .swipe-act--del .swipe-act__pill { background: var(--act-del); }
  .swipe-act--star .swipe-act__pill,
  .swipe-act--read .swipe-act__pill { background: var(--negro); color: var(--lima); }
  .swipe-act--more .swipe-act__pill { background: color-mix(in srgb, var(--ink) 13%, transparent); color: var(--ink); }

  /* ---------- Calendario móvil ---------- */
  /* El calendario de siempre solo se oculta cuando el del celular ya cargó */
  html body.page--webmail .calendar__main[data-mcal-ready] > :not(.mcal) {
    display: none;
  }

  html body.page--webmail .calendar.is-listing .calendar__side {
    display: none;
  }

  html body.page--webmail .calendar {
    display: block;
  }

  .mcal {
    position: fixed;
    inset: var(--m-top) 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .mcal__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 6px;
  }

  .mcal__year,
  .mcal__today {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 14px 0 8px;
    border: 0;
    border-radius: 20px;
    background: var(--gl-bg);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), 0 6px 18px -10px rgb(14 14 14 / 0.25);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 200ms var(--ease-spring);
  }

  .mcal__today {
    padding: 0 16px;
  }

  .mcal__year .icon {
    width: 20px;
    height: 20px;
  }

  .mcal__year:active,
  .mcal__today:active {
    transform: scale(0.93);
  }

  .mcal__title {
    margin: 0;
    overflow: hidden;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mcal[data-mode="year"] .mcal__year,
  .mcal[data-mode="year"] .mcal__week {
    visibility: hidden;
  }

  .mcal[data-mode="year"] .mcal__week {
    display: none;
  }

  .mcal__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 4px 8px 6px;
    border-bottom: 0.5px solid var(--line);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
  }

  .mcal__week .is-weekend {
    opacity: 0.6;
  }

  .mcal__scroll {
    flex: 1;
    min-height: 0;
    padding: 0 8px calc(var(--m-tab) + 40dvh * 0.6);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mcal__scroll[data-mode="year"] {
    padding-bottom: calc(var(--m-tab) + 24px);
  }

  .mcal__month {
    padding: 10px 0 4px;
  }

  .mcal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .mcal__mlabel {
    grid-column-end: span 3;
    margin: 6px 0 4px;
    padding-left: 10px;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .mcal__mlabel + .mcal__blank,
  .mcal__mlabel + .mcal__d {
    grid-column-start: 1;
  }

  .mcal__d {
    position: relative;
    display: grid;
    grid-template-rows: 34px 1fr;
    justify-items: center;
    height: 66px;
    padding: 4px 2px 0;
    border: 0;
    border-top: 0.5px solid var(--line);
    background: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  .mcal__blank {
    border-top: 0.5px solid transparent;
  }

  .mcal__d--weekend .mcal__n {
    color: var(--ink-2);
  }

  .mcal__n {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-spring);
  }

  .mcal__d:active .mcal__n {
    transform: scale(0.88);
  }

  .mcal__d.is-selected .mcal__n {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    color: var(--ink);
  }

  .mcal__d.is-today .mcal__n {
    background: var(--negro);
    color: var(--hueso);
  }

  .mcal__d.is-today.is-selected .mcal__n {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--negro) 22%, transparent);
  }

  .mcal__bars {
    display: grid;
    gap: 3px;
    align-content: start;
    width: 100%;
    padding: 4px 4px 0;
  }

  .mcal__line {
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
  }

  .mcal__line--equipo { background: #8C8C86; }
  .mcal__line--empresa { background: var(--negro); }

  .mcal__more {
    color: var(--ink-2);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
  }

  /* Año */
  .mcal__yblock {
    padding: 8px 8px 22px;
  }

  .mcal__ytitle {
    margin: 4px 4px 10px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .mcal__ytitle.is-now {
    text-decoration: underline;
    text-decoration-color: var(--ink);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }

  .mcal__ygrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .mcal__mini {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease, transform 220ms var(--ease-spring);
  }

  .mcal__mini:active {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    transform: scale(0.96);
  }

  .mcal__mininame {
    font-size: 1rem;
    font-weight: 800;
  }

  .mcal__mini.is-now .mcal__mininame {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .mcal__minidays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px 0;
    font-size: 0.5625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    text-align: center;
  }

  .mcal__minidays .is-today {
    border-radius: 50%;
    background: var(--negro);
    color: var(--hueso);
  }

  /* Agenda del día: hoja de vidrio sobre la barra */
  .mcal__day {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--m-tab) + 4px);
    left: max(12px, env(safe-area-inset-left));
    max-height: 34dvh;
    padding: 14px 8px 8px;
    overflow-y: auto;
    border-radius: 26px;
    background: var(--gl-bg-strong);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), var(--gl-shadow);
    animation: mcal-sheet 420ms var(--ease-spring) both;
  }

  .mcal[data-mode="year"] .mcal__day {
    display: none;
  }

  .mcal__dayhead {
    margin: 0 10px 8px;
    font-size: 0.9375rem;
    text-transform: none;
  }

  .mcal__dayhead strong::first-letter {
    text-transform: uppercase;
  }

  .mcal__evts {
    display: grid;
    gap: 2px;
  }

  .mcal__none {
    margin: 0 10px 8px;
    color: var(--ink-2);
    font-size: 0.875rem;
  }

  .mcal__evt {
    display: grid;
    grid-template-columns: 4px 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 6px 10px;
    border-radius: 16px;
    color: var(--ink);
    text-decoration: none;
  }

  .mcal__evt:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .mcal__evdot {
    align-self: stretch;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
  }

  .mcal__evt--equipo .mcal__evdot { background: #8C8C86; }
  .mcal__evt--empresa .mcal__evdot { background: var(--negro); }

  .mcal__evtime {
    display: grid;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .mcal__evtime span:first-child {
    color: var(--ink);
    font-weight: 600;
  }

  .mcal__evtext {
    display: grid;
    min-width: 0;
  }

  .mcal__evtext strong,
  .mcal__evtext span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mcal__evtext span {
    color: var(--ink-2);
    font-size: 0.8125rem;
  }
}

@keyframes mcal-sheet {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.98); }
}

/* Acercamiento entre año y mes */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(mcal-zoom) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }

  html[data-mcal-zoom]::view-transition-old(root) {
    animation: 240ms ease-out both ixm-fade-out;
  }

  html[data-mcal-zoom]::view-transition-new(root) {
    animation: 360ms cubic-bezier(0.32, 0.72, 0, 1) both ixm-fade-in;
  }
}

/* Modo oscuro: avatares, cápsulas y calendario con lima sobre oscuro */
@media (max-width: 860px) and (prefers-color-scheme: dark) {
  .msg__avatar--0 { background: var(--lima); color: var(--negro); }
  .msg__avatar--1 { background: #2C2C29; color: var(--hueso); }
  .msg__avatar--2 { background: #3B3B37; color: var(--hueso); }
  .msg__avatar--3 { background: color-mix(in srgb, var(--lima) 22%, #1A1A18); color: var(--lima); }

  .swipe-act--star .swipe-act__pill,
  .swipe-act--read .swipe-act__pill { background: var(--lima); color: var(--negro); }
  .swipe-act--more .swipe-act__pill { background: rgb(255 255 255 / 0.16); color: var(--hueso); }

  .mcal__d.is-today .mcal__n,
  .mcal__minidays .is-today {
    background: var(--lima);
    color: var(--negro);
  }

  .mcal__line--empresa,
  .mcal__evt--empresa .mcal__evdot { background: var(--lima); }
  .mcal__ytitle.is-now { text-decoration-color: var(--lima); }
}

@media (max-width: 860px) {
  .mcal__bar,
  .mcal__week {
    flex: none;
  }

  .mcal__bar {
    min-height: 52px;
  }

  .mcal__mlabel {
    grid-column: 1 / -1;
    padding-left: 10px;
  }
}

@media (max-width: 860px) {
  /* Las posiciones de meses y años se miden dentro del propio desplazamiento */
  .mcal__scroll {
    position: relative;
  }

  .mcal[data-mode="year"] .mcal__title {
    visibility: hidden;
  }
}

/* ---------- Editor con formato (redactar y firma) ---------- */

.editor {
  display: grid;
  min-width: 0;
}

.editor[hidden] {
  display: none;
}

.editor__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.editor__tools button {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.editor__tools button .icon {
  width: 18px;
  height: 18px;
}

.editor__tools button:active,
.editor__tools button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .editor__tools button:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

.editor__spacer {
  flex: 1;
}

.editor__code {
  font-size: 0.8125rem !important;
  font-weight: 600;
}

.editor__canvas {
  display: block;
  width: 100%;
  min-height: 160px;
  border: 0;
  background: transparent;
  color-scheme: light dark;
}

.compose .editor {
  flex: 1;
}

.editor--signature {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.editor--signature + textarea {
  margin-top: 8px;
}

.editor {
  grid-template-rows: auto 1fr;
  align-content: start;
}

.compose .editor__tools {
  padding: 4px 12px;
  border-top: 1px solid var(--line);
}


/* Celular: fondo de un solo color (la franja bajo la hora no deja corte) y la sombra de las
   piezas flotantes solo hacia abajo (sin halo borroso por encima de la cápsula). */
@media (max-width: 860px) {
  html body.page--webmail::before {
    display: none;
  }

  html body.page--webmail {
    --gl-shadow: 0 14px 28px -18px rgb(14 14 14 / 0.32), 0 3px 6px -4px rgb(14 14 14 / 0.12);
    background: var(--bg);
  }

  html body.page--webmail .topcap {
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), 0 14px 28px -18px rgb(14 14 14 / 0.32), 0 3px 6px -4px rgb(14 14 14 / 0.12);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail {
    --gl-shadow: 0 14px 28px -18px rgb(0 0 0 / 0.7), 0 3px 6px -4px rgb(0 0 0 / 0.4);
  }

  html body.page--webmail .topcap {
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), 0 14px 28px -18px rgb(0 0 0 / 0.7), 0 3px 6px -4px rgb(0 0 0 / 0.4);
  }
}

/* App instalada: la altura real de la pantalla (la mide la app al abrir) */
@media (max-width: 860px) {
  html.is-app body.page--webmail .mail-app {
    min-height: var(--app-h, 100dvh);
  }
}

/* =====================================================================
 * 1.6.0 — Zona de la hora sin desvanecido y barra de abajo más arriba
 * iOS 26 toma el color de la zona de la hora del elemento fijo y sólido que toca el
 * borde superior. Esta franja lo da con el color exacto de cada pantalla.
 * ===================================================================== */

.statusbar-tint {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  height: max(env(safe-area-inset-top), 1px);
  background: var(--bg);
  pointer-events: none;
}

body.page--mail-login .statusbar-tint,
body.page--gate-auth .statusbar-tint {
  background: var(--negro);
}

@media (min-width: 861px) {
  .statusbar-tint {
    display: none;
  }
}

@media (max-width: 860px) {
  /* La franja propia del encabezado ya no hace falta */
  html body.page--webmail .mail-top::before {
    display: none;
  }

  /* La barra flotante queda un poco más arriba de la barra de inicio */
  html body.page--webmail {
    --dock-bottom: calc(max(env(safe-area-inset-bottom), 12px) + 6px);
  }

  html body.page--webmail:has(.cwin:not([data-state="min"]):not(.is-leaving):not(.is-sending)) .statusbar-tint {
    background: #000;
  }
}

/* =====================================================================
 * Calendario del celular 1.6.0 — como Calendario de Apple: alto completo,
 * año / mes / día con pellizcos, vista de día con horas.
 * ===================================================================== */

@media (max-width: 860px) {
  /* El calendario usa toda la pantalla: sin la cápsula de arriba */
  html body.page--webmail.has-mcal .mail-top .topcap {
    display: none;
  }

  html body.page--webmail.has-mcal .mail-app {
    padding-top: 0;
  }

  .mcal {
    inset: calc(var(--safe-top) + 6px) 0 0;
  }

  .mcal__top {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }

  .mcal__spacer {
    flex: 1;
  }

  .mcal__glass {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 16px 0 10px;
    border: 0;
    border-radius: 22px;
    background: var(--gl-bg);
    -webkit-backdrop-filter: var(--gl-blur);
    backdrop-filter: var(--gl-blur);
    box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 0.5px var(--gl-line), var(--gl-shadow);
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 220ms var(--ease-spring);
  }

  .mcal__glass[hidden] {
    display: none;
  }

  .mcal__today {
    padding: 0 18px;
  }

  .mcal__glass .icon {
    width: 22px;
    height: 22px;
  }

  .mcal__glass:active {
    transform: scale(0.92);
  }

  .mcal__title {
    flex: none;
    margin: 6px 0 4px;
    padding: 0 20px;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  .mcal[data-mode="year"] .mcal__title,
  .mcal[data-mode="day"] .mcal__title,
  .mcal:not([data-mode="month"]) .mcal__week,
  .mcal:not([data-mode="day"]) .mcal__dayhead {
    display: none;
  }

  .mcal__week {
    padding: 4px 8px 6px;
  }

  .mcal__scroll {
    padding: 0 6px calc(var(--m-tab) + 16px);
    touch-action: pan-y;
    transform-origin: 50% 30%;
    will-change: transform;
  }

  .mcal__scroll[data-mode="day"] {
    padding: 0 0 calc(var(--m-tab) + 16px);
  }

  /* Mes */
  .mcal__month {
    padding: 14px 0 0;
  }

  .mcal__mrow {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .mcal__mlabel {
    grid-column-end: span 2;
    margin: 0 0 6px;
    padding: 0 0 0 12px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .mcal__d {
    grid-template-rows: 38px 1fr;
    height: 92px;
    padding-top: 6px;
  }

  .mcal__n {
    width: 34px;
    height: 34px;
    font-size: 1.125rem;
  }

  .mcal__lines {
    display: grid;
    gap: 3px;
    align-content: start;
    width: 100%;
    padding: 4px 3px 0;
  }

  /* Año */
  .mcal__yblock {
    padding: 4px 8px 26px;
  }

  .mcal__ytitle {
    margin: 0 0 12px;
    font-size: 2.25rem;
    text-align: center;
  }

  .mcal__ytitle.is-now {
    text-decoration: none;
  }

  .mcal__mini.is-now .mcal__mininame {
    text-decoration: none;
  }

  .mcal__ygrid {
    gap: 22px 14px;
  }

  .mcal__minidays {
    font-size: 0.625rem;
    line-height: 1.85;
  }

  /* Día: semana arriba, horas con los eventos */
  .mcal__dayhead {
    flex: none;
    padding: 2px 8px 8px;
    border-bottom: 0.5px solid var(--line);
  }

  .mcal__strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    touch-action: pan-y;
  }

  .mcal__sday {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
  }

  .mcal__sletter {
    color: var(--ink-2);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .mcal__snum {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-spring);
  }

  .mcal__sday:active .mcal__snum {
    transform: scale(0.88);
  }

  .mcal__sday.is-today .mcal__snum {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .mcal__sday.is-selected .mcal__snum {
    background: var(--negro);
    color: var(--hueso);
    text-decoration: none;
  }

  .mcal__dtitle {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
  }

  .mcal__dtitle::first-letter {
    text-transform: uppercase;
  }

  .mcal__allday {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 0.5px solid var(--line);
  }

  .mcal__allday-label {
    width: 44px;
    color: var(--ink-2);
    font-size: 0.6875rem;
  }

  .mcal__chip {
    padding: 4px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink);
    font-size: 0.8125rem;
    text-decoration: none;
  }

  .mcal__hours {
    position: relative;
    margin: 10px 0 0;
  }

  .mcal__hour {
    position: absolute;
    right: 0;
    left: 54px;
    height: 0;
    border-top: 0.5px solid var(--line);
  }

  .mcal__hlabel {
    position: absolute;
    top: -8px;
    left: -52px;
    width: 46px;
    color: var(--ink-2);
    font-size: 0.6875rem;
    text-align: right;
    white-space: nowrap;
  }

  .mcal__block {
    position: absolute;
    display: grid;
    align-content: start;
    gap: 1px;
    overflow: hidden;
    padding: 4px 8px 4px 13px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 9%, var(--bg));
    color: var(--ink);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 200ms var(--ease-spring);
  }

  .mcal__block:active {
    transform: scale(0.97);
  }

  .mcal__block strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mcal__block span {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Marca del tipo de evento: una barrita redondeada dentro del bloque */
  .mcal__block::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    content: "";
  }

  .mcal__block--equipo::before { background: #8C8C86; }
  .mcal__block--empresa { background: color-mix(in srgb, var(--negro) 12%, var(--bg)); }
  .mcal__block--empresa::before { background: var(--negro); }

  .mcal__now {
    position: absolute;
    right: 0;
    left: 54px;
    z-index: 2;
    height: 2px;
    background: var(--negro);
  }

  .mcal__now::before {
    position: absolute;
    top: -4px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--negro);
    content: "";
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  .mcal__sday.is-selected .mcal__snum {
    background: var(--lima);
    color: var(--negro);
  }

  .mcal__now,
  .mcal__now::before {
    background: var(--lima);
  }

  .mcal__block--empresa {
    background: color-mix(in srgb, var(--lima) 14%, var(--bg));
  }

  .mcal__block--empresa::before {
    background: var(--lima);
  }
}

/* Acceso: mensaje de marca más largo («Todo lo que hace crecer tu empresa, conectado.») */
.gate__headline--long {
  max-width: 15ch;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.04;
  text-wrap: balance;
}

.gate__lead {
  max-width: 44ch;
}

.gate__includes {
  margin: 22px 0 10px;
  color: var(--piedra, #8C8C86);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gate__includes + .gate__modules {
  margin-top: 0;
}

@media (max-width: 860px) {
  .gate__headline--long {
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(1.75rem, 7.4vw, 2.25rem);
  }

  .gate__includes {
    display: none;
  }
}

/* Acceso en el celular: la luz verde empieza bajo la zona de la hora y aparece suave,
   así la franja sólida de arriba no deja un corte visible. */
@media (max-width: 860px) {
  .gate__light {
    top: env(safe-area-inset-top);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px);
    mask-image: linear-gradient(to bottom, transparent, #000 140px);
  }

  body.page--mail-login {
    background: var(--negro);
  }
}

/* =====================================================================
 * iPhone instalado: al abrir, iOS usa una pantalla «corta» (como si tuviera barra de
 * navegador) y la alarga solo al desplazar. Todo lo de abajo se ubica según el alto
 * completo de la pantalla (lvh), que iOS sí informa bien desde el inicio.
 * ===================================================================== */
@media (max-width: 860px) {
  html body.page--webmail {
    min-height: 100lvh;
  }

  html body.page--webmail .mail-app,
  html.is-app body.page--webmail .mail-app {
    min-height: 100lvh;
  }

  html body.page--webmail .dock {
    top: calc(100lvh - var(--dock-h) - var(--dock-bottom));
    bottom: auto;
  }

  html body.page--webmail .reader .toolbar {
    top: calc(100lvh - var(--dock-h) - var(--dock-bottom));
    bottom: auto;
  }

  html body.page--webmail #menu-nuevo {
    top: auto;
    bottom: calc(100dvh - 100lvh + var(--m-tab) + 4px);
  }

  .mcal {
    bottom: auto;
    height: calc(100lvh - var(--safe-top) - 6px);
  }

  html body.page--webmail .cwin:not([data-state="min"]) {
    bottom: auto;
    height: calc(100lvh - var(--safe-top) - 10px);
  }

  html body.page--webmail .cwin[data-state="min"] {
    top: calc(100lvh - var(--m-tab) - 62px);
    bottom: auto;
  }

  html body.page--webmail:not(.page--admin) .mail-side {
    height: 100lvh;
  }

  html body.page--webmail .toast-region {
    bottom: calc(100dvh - 100lvh + var(--m-tab) + 10px);
  }
}

/* Acceso: el fondo negro llega hasta abajo desde que se abre */
@media (max-width: 860px) {
  body.page--mail-login {
    min-height: 100lvh;
  }
}

/* =====================================================================
 * 1.6.1 — En el celular la página no se desplaza: lo hace el contenedor de la app.
 * - iOS no desenfoca nada bajo la hora (no hay página moviéndose debajo).
 * - En Safari la barra de abajo queda sobre la barra del navegador (borde visible).
 * - En la app instalada todo se ubica con el alto real de la pantalla (--app-h).
 * ===================================================================== */
@media (max-width: 860px) {
  html:has(body.page--webmail:not(.page--admin)),
  html body.page--webmail:not(.page--admin) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html body.page--webmail:not(.page--admin) .mail-app,
  html.is-app body.page--webmail:not(.page--admin) .mail-app {
    position: fixed;
    inset: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-app body.page--webmail:not(.page--admin) .mail-app {
    bottom: auto;
    height: var(--app-h, 100%);
  }

  /* Barra de abajo: en el navegador, sobre su borde visible */
  html body.page--webmail .dock,
  html body.page--webmail .reader .toolbar {
    top: auto;
    bottom: var(--dock-bottom);
  }

  /* App instalada: con el alto real de la pantalla */
  html.is-app body.page--webmail .dock,
  html.is-app body.page--webmail .reader .toolbar {
    top: calc(var(--app-h, 100dvh) - var(--dock-h) - var(--dock-bottom));
    bottom: auto;
  }

  .mcal {
    bottom: 0;
    height: auto;
  }

  html.is-app .mcal {
    bottom: auto;
    height: calc(var(--app-h, 100dvh) - var(--safe-top) - 6px);
  }

  html body.page--webmail .cwin:not([data-state="min"]) {
    bottom: 0;
    height: auto;
  }

  html.is-app body.page--webmail .cwin:not([data-state="min"]) {
    bottom: auto;
    height: calc(var(--app-h, 100dvh) - var(--safe-top) - 10px);
  }

  html body.page--webmail .cwin[data-state="min"] {
    top: auto;
    bottom: calc(var(--m-tab) + 6px);
  }

  html.is-app body.page--webmail .cwin[data-state="min"] {
    top: calc(var(--app-h, 100dvh) - var(--m-tab) - 62px);
    bottom: auto;
  }

  html body.page--webmail:not(.page--admin) .mail-side {
    height: 100%;
  }

  html.is-app body.page--webmail:not(.page--admin) .mail-side {
    height: var(--app-h, 100dvh);
  }

  html body.page--webmail .toast-region {
    top: auto;
    bottom: calc(var(--m-tab) + 10px);
  }

  html.is-app body.page--webmail .toast-region {
    bottom: calc(100% - var(--app-h, 100%) + var(--m-tab) + 10px);
  }

  html body.page--webmail #menu-nuevo {
    top: auto;
    bottom: calc(var(--m-tab) + 4px);
  }

  html.is-app body.page--webmail #menu-nuevo {
    bottom: calc(100% - var(--app-h, 100%) + var(--m-tab) + 4px);
  }

  /* La cápsula de arriba queda fija siempre */
  html body.page--webmail .mail-top.is-hidden .topcap {
    opacity: 1;
    transform: none;
  }
}

/* Cápsula y botones de arriba más cerca de la isla dinámica (como las apps de Apple) */
@media (max-width: 860px) {
  html body.page--webmail {
    --m-top: calc(var(--safe-top) + var(--cap-h) + 12px);
  }

  html body.page--webmail .mail-top {
    padding-top: calc(var(--safe-top) + 1px);
  }

  .mcal {
    top: calc(var(--safe-top) + 1px);
  }

  html.is-app .mcal {
    height: calc(var(--app-h, 100dvh) - var(--safe-top) - 1px);
  }

  html body.page--webmail .reader .toolbar__back {
    top: calc(var(--safe-top) + 2px);
  }

  html body.page--webmail .reader .letter {
    padding-top: calc(var(--safe-top) + 64px);
  }

  html body.page--webmail .mail-top .menu {
    top: calc(var(--safe-top) + var(--cap-h) + 8px);
  }
}

/* =====================================================================
 * Barra de pestañas: la gota activa con el mismo margen en los cuatro lados y
 * curvas concéntricas con la barra (radio interno = radio externo − margen).
 * Sin rebote ni deformación al tocar: solo se oscurece un poco.
 * ===================================================================== */
@media (max-width: 860px) {
  html body.page--webmail .tabbar {
    --tab-pad: 6px;
    --tab-radius: calc(var(--dock-h) / 2);
    padding: var(--tab-pad);
    border-radius: var(--tab-radius);
  }

  html body.page--webmail .tabbar__drop {
    top: var(--tab-pad);
    bottom: var(--tab-pad);
    border-radius: calc(var(--tab-radius) - var(--tab-pad));
    transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), width 420ms cubic-bezier(0.32, 0.72, 0, 1), background-color 160ms ease;
  }

  html body.page--webmail .tabbar__drop.is-press {
    scale: none;
    background: color-mix(in srgb, var(--ink) 14%, transparent);
  }

  html body.page--webmail .tabbar__item {
    gap: 3px;
    padding: 1px 0 0;
    border-radius: calc(var(--tab-radius) - var(--tab-pad));
    line-height: 1.15;
  }

  html body.page--webmail .tabbar__item > span {
    line-height: 1.15;
  }

  html body.page--webmail .tabbar__item[aria-current] .icon {
    transform: none;
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .tabbar__drop.is-press {
    background: rgb(255 255 255 / 0.16);
  }
}

/* =====================================================================
 * Documentos en el celular (como Google Drive): cuadrícula de 2 columnas;
 * las carpetas son tarjetas con el ícono grande arriba y el nombre abajo.
 * ===================================================================== */
@media (max-width: 860px) {
  html body.page--webmail .drive:not([data-view="list"]) .files--folders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: start;
    padding: 20px 12px 14px;
    border-radius: 22px;
    text-align: center;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb {
    width: 72px;
    height: 72px;
    margin: 0 0 12px;
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 10px 20px -12px rgb(14 14 14 / 0.45);
    transition: transform 260ms var(--ease-spring);
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder:active .fitem__thumb {
    transform: scale(0.94);
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb .icon {
    width: 34px;
    height: 34px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__body {
    width: 100%;
    padding: 0 4px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  /* «⋯» arriba a la derecha de la tarjeta */
  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__more {
    top: 8px;
    right: 8px;
    bottom: auto;
    opacity: 1;
    transform: none;
  }

  /* Marca de carpeta compartida: sobre la esquina del ícono */
  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__shared {
    right: -6px;
    bottom: -6px;
  }

  .view-btn--phone {
    display: none !important;
  }
}

/* Documentos en el celular: el encabezado queda en su sitio (sin el empuje de 60 px de antes) */
@media (max-width: 860px) {
  html body.page--webmail .drive__head {
    top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb--c-negro {
    background: #262624;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 10px 20px -12px rgb(0 0 0 / 0.7);
  }
}

/* =====================================================================
 * 1.6.2 — Celular simple y predecible (probado en WebKit, el motor de Safari)
 * - La página se desplaza normal (se deshace el contenedor fijo de 1.6.1, que en
 *   iPhone recortaba la barra de abajo y tapaba la de arriba).
 * - La cápsula de arriba está siempre visible, también al leer un correo.
 * - La barra de abajo se apoya en el borde visible de la pantalla.
 * ===================================================================== */
@media (max-width: 860px) {
  html:has(body.page--webmail:not(.page--admin)),
  html body.page--webmail:not(.page--admin) {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  html body.page--webmail:not(.page--admin) .mail-app,
  html.is-app body.page--webmail:not(.page--admin) .mail-app {
    position: static;
    inset: auto;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* App instalada: un píxel de más para que iOS pueda «acomodarse» al abrir (sin espacio abajo) */
  html.is-app body.page--webmail:not(.page--admin) .mail-app {
    min-height: calc(100dvh + 1px);
  }

  html body.page--webmail .dock,
  html.is-app body.page--webmail .dock,
  html body.page--webmail .reader .toolbar,
  html.is-app body.page--webmail .reader .toolbar {
    top: auto;
    bottom: var(--dock-bottom);
  }

  html.is-app .mcal,
  .mcal {
    bottom: 0;
    height: auto;
  }

  html.is-app body.page--webmail .cwin:not([data-state="min"]) {
    bottom: 0;
    height: auto;
  }

  html.is-app body.page--webmail .cwin[data-state="min"] {
    top: auto;
    bottom: calc(var(--m-tab) + 6px);
  }

  html.is-app body.page--webmail:not(.page--admin) .mail-side {
    height: 100%;
  }

  html.is-app body.page--webmail .toast-region {
    bottom: calc(var(--m-tab) + 10px);
  }

  html.is-app body.page--webmail #menu-nuevo {
    bottom: calc(var(--m-tab) + 4px);
  }

  /* La cápsula nunca se esconde (tampoco al leer un correo) */
  html body.page--webmail:has(.mail-panes.is-reading) .mail-top .topcap,
  html body.page--webmail:has(.mail-panes.is-composing) .mail-top .topcap {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  html body.page--webmail:has(.mail-panes.is-reading) .mail-app {
    padding-top: var(--m-top);
  }

  /* Al leer: «atrás» como una fila bajo la cápsula, en el contenido */
  html body.page--webmail .reader .toolbar__back {
    position: static;
    display: none;
  }

  html body.page--webmail .reader-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    margin: 4px 0 0 10px;
    padding: 0 14px 0 6px;
    border-radius: 20px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
  }

  html body.page--webmail .reader-back .icon {
    width: 22px;
    height: 22px;
  }

  html body.page--webmail .reader-back:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  html body.page--webmail .reader .letter {
    padding-top: 8px;
  }
}

.reader-back {
  display: none;
}

/* ---------- Documentos: carpetas como Google Drive (miniatura a todo el ancho) ---------- */
@media (max-width: 860px) {
  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    padding: 8px 8px 12px;
    border-radius: 20px;
    text-align: left;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0 0 10px;
    border-radius: 14px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__thumb .icon {
    width: 44px;
    height: 44px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__body {
    padding: 0 32px 0 6px;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__name {
    text-align: left;
  }

  html body.page--webmail .drive:not([data-view="list"]) .fitem--folder .fitem__more {
    top: auto;
    right: 6px;
    bottom: 8px;
  }
}

/* Vidrio de la cápsula y la barra más opaco: lo que pasa por detrás no se lee a través */
@media (max-width: 860px) {
  html body.page--webmail .topcap,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: #FAF9F5;
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .topcap,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: #1E1E1C;
  }
}

/* =====================================================================
 * Zona de la hora (iOS 26): franja sólida del color de la app que llega hasta la cápsula.
 * Su altura no depende solo de iOS (que a veces la informa en 0 al abrir la app).
 * ===================================================================== */
:root {
  --safe-top-real: max(env(safe-area-inset-top), var(--safe-top-js, 0px));
}

@media (max-width: 860px) {
  html body.page--webmail,
  html body.page--mail-login {
    --safe-top: var(--safe-top-real);
  }

  .statusbar-tint {
    height: max(var(--safe-top-real), 1px);
  }

  /* En el webmail la franja baja hasta el borde de la cápsula: no queda rendija */
  body.page--webmail .statusbar-tint {
    height: calc(var(--safe-top-real) + 8px);
  }

  body.page--webmail.has-mcal .statusbar-tint {
    height: max(var(--safe-top-real), 1px);
  }

  /* Acceso: el contenido empieza bajo la zona de la hora aunque iOS la informe en 0 */
  .page--mail-login .gate {
    padding-top: calc(var(--safe-top-real) + 16px);
  }
}

@media (max-width: 860px) {
  /* La franja va detrás de la cápsula (la cápsula se dibuja completa sobre ella) */
  body.page--webmail .statusbar-tint {
    z-index: 35;
  }
}

/* Aviso para activar notificaciones (app instalada) */
.push-nudge {
  position: fixed;
  right: 12px;
  bottom: calc(var(--m-tab, 90px) + 10px);
  left: 12px;
  z-index: 80;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 18px 44px -14px rgb(14 14 14 / 0.45), inset 0 0 0 0.5px var(--line);
  animation: mcal-sheet 420ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

.push-nudge__text {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 0.9375rem;
}

.push-nudge__text span {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.push-nudge__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =====================================================================
 * 1.7.0 — Encabezado como WhatsApp y Calendario de Apple (iOS 26):
 * un velo del color de la app con desenfoque progresivo que se desvanece hacia el
 * contenido, y encima botones de vidrio separados (☰ · buscador · avisos · cuenta).
 * ===================================================================== */
@media (max-width: 860px) {
  /* Velo: sólido bajo la hora, luego se aclara y desenfoca de a poco */
  body.page--webmail .statusbar-tint,
  body.page--webmail.has-mcal .statusbar-tint {
    z-index: 35;
    height: calc(var(--safe-top-real) + var(--cap-h) + 34px);
    background: linear-gradient(to bottom,
      var(--bg) 0,
      var(--bg) var(--safe-top-real),
      color-mix(in srgb, var(--bg) 82%, transparent) calc(var(--safe-top-real) + 30px),
      color-mix(in srgb, var(--bg) 0%, transparent) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
  }

  /* La cápsula deja de ser una barra: solo agrupa piezas de vidrio separadas */
  html body.page--webmail .topcap {
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center {
    background: rgb(255 255 255 / 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 0.5px rgb(14 14 14 / 0.1), 0 6px 18px -10px rgb(14 14 14 / 0.3);
  }

  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  html body.page--webmail .topcap__center {
    height: 48px;
    border-radius: 24px;
  }

  html body.page--webmail .topcap__search {
    padding: 0 14px;
  }

  html body.page--webmail .topcap__me .avatar {
    width: 40px;
    height: 40px;
    box-shadow: none;
  }

  html body.page--webmail .topcap .appbar__badge {
    top: 2px;
    right: 0;
  }

  /* Barra de abajo con el mismo vidrio claro */
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: rgb(255 255 255 / 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: rgb(40 40 38 / 0.7);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 6px 18px -10px rgb(0 0 0 / 0.6);
  }
}

/* Logo del buscador: un poco más grande y centrado de verdad (el logo del cliente sin caja vacía) */
@media (max-width: 860px) {
  html body.page--webmail .topcap__brand .cobrand {
    gap: 12px;
  }

  html body.page--webmail .topcap__brand .cobrand__intux img {
    width: auto;
    height: 23px;
  }

  html body.page--webmail .topcap__brand .cobrand__client img {
    width: auto;
    max-width: 120px;
    height: 28px;
    object-position: center;
  }

  html body.page--webmail .topcap__brand .cobrand__sep {
    height: 22px;
  }
}

@media (max-width: 860px) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: rgb(252 251 248 / 0.86);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before {
    background: rgb(36 36 34 / 0.88);
  }
}

/* =====================================================================
 * 1.7.1 — Barra de abajo fija con íconos que entran uno a uno; en la app instalada,
 * más abajo y concéntrica con las esquinas de la pantalla; se encoge al desplazar.
 * Filas de correo con una entrada leve.
 * ===================================================================== */
@media (max-width: 860px) {
  /* Fija: no se desliza ni se cruza entre pantallas */
  html body.page--webmail .dock {
    transition: none;
    view-transition-name: none;
  }

  /* App instalada: mismo margen abajo que a los lados (curva paralela a la esquina) */
  html.is-app body.page--webmail {
    --dock-bottom: 12px;
  }

  html.is-app body.page--webmail .dock,
  html.is-app body.page--webmail .reader .toolbar {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  /* Al desplazar hacia abajo: más baja y sin textos */
  html body.page--webmail .tabbar,
  html body.page--webmail .plus {
    transition: height 340ms cubic-bezier(0.32, 0.72, 0, 1), width 340ms cubic-bezier(0.32, 0.72, 0, 1), padding 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  html body.page--webmail .tabbar__item > span {
    max-height: 16px;
    transition: opacity 180ms ease, max-height 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  html body.page--webmail.dock-min .tabbar {
    --tab-pad: 5px;
    height: 50px;
    border-radius: 25px;
  }

  html body.page--webmail.dock-min .tabbar__item > span {
    max-height: 0;
    opacity: 0;
  }

  html body.page--webmail.dock-min .tabbar__item {
    gap: 0;
  }

  html body.page--webmail.dock-min .plus {
    width: 50px;
    height: 50px;
  }

  html body.page--webmail.dock-min .plus .icon {
    width: 24px;
    height: 24px;
  }
}

/* Entrada de los íconos de la barra, uno tras otro (solo al abrir) */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html body.page--webmail .tabbar__item {
    animation: dock-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  html body.page--webmail .tabbar__item:nth-child(2) { animation-delay: 40ms; }
  html body.page--webmail .tabbar__item:nth-child(3) { animation-delay: 80ms; }
  html body.page--webmail .tabbar__item:nth-child(4) { animation-delay: 120ms; }
  html body.page--webmail .tabbar__item:nth-child(5) { animation-delay: 160ms; }

  html body.page--webmail .plus {
    animation: dock-pop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
  }

  html body.page--webmail .tabbar__drop {
    animation: dock-fade 300ms ease 160ms both;
  }

  /* Filas de correo: entran suaves, una tras otra (no al actualizar en su sitio) */
  html body.page--webmail [data-region="body"]:not([data-quiet]) .msgs > li {
    animation: msg-in 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  html body.page--webmail .msgs > li:nth-child(2) { animation-delay: 30ms; }
  html body.page--webmail .msgs > li:nth-child(3) { animation-delay: 60ms; }
  html body.page--webmail .msgs > li:nth-child(4) { animation-delay: 90ms; }
  html body.page--webmail .msgs > li:nth-child(5) { animation-delay: 120ms; }
  html body.page--webmail .msgs > li:nth-child(6) { animation-delay: 150ms; }
  html body.page--webmail .msgs > li:nth-child(7) { animation-delay: 180ms; }
  html body.page--webmail .msgs > li:nth-child(8) { animation-delay: 210ms; }
  html body.page--webmail .msgs > li:nth-child(n+9) { animation-delay: 240ms; }
}

@keyframes dock-pop {
  from { opacity: 0; transform: scale(0.5); }
}

@keyframes dock-fade {
  from { opacity: 0; }
}

@keyframes msg-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
}

/* =====================================================================
 * 1.8.0 — Pantalla de carga, categorías de correo y buscador del calendario
 * ===================================================================== */

/* Pantalla de carga (el GIF del logo de Intux, del color exacto del fondo) */
.preloader {
  display: none;
}

html.is-preloading .preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--hueso);
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}

html.is-preloading .preloader--dark {
  background: var(--negro);
}

@media (prefers-color-scheme: dark) {
  html.is-preloading .preloader {
    background: var(--negro);
  }
}

.preloader img {
  display: block;
  width: min(92vw, 520px);
  height: auto;
}

html.is-preloaded .preloader {
  opacity: 0;
  visibility: hidden;
}

/* La app aparece con un fundido corto al terminar */
html.is-preloaded body {
  animation: app-in 520ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes app-in {
  from { opacity: 0.4; transform: scale(0.985); }
}

/* Categorías de la bandeja (celular), como Apple Mail */
.mail-cats {
  display: none;
}

@media (max-width: 860px) {
  .mail-cats {
    display: flex;
    gap: 8px;
    margin: 4px -20px 2px;
    padding: 2px 20px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mail-cats::-webkit-scrollbar {
    display: none;
  }

  .mail-cat {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mail-cat .icon {
    width: 20px;
    height: 20px;
  }

  /* Sin elegir: solo el ícono; la elegida muestra también su nombre */
  .mail-cat span {
    display: none;
  }

  .mail-cat[aria-selected="true"] {
    background: var(--negro);
    color: var(--hueso);
  }

  .mail-cat[aria-selected="true"] span {
    display: inline;
  }

  .mail-cat:active {
    transform: scale(0.94);
  }

  [data-msgs][data-filter="principal"] > li:not([data-cat="principal"]),
  [data-msgs][data-filter="transacciones"] > li:not([data-cat="transacciones"]),
  [data-msgs][data-filter="actualizaciones"] > li:not([data-cat="actualizaciones"]),
  [data-msgs][data-filter="promociones"] > li:not([data-cat="promociones"]) {
    display: none;
  }

  .mail-cats__empty {
    margin: 0;
    padding: 40px 24px;
    color: var(--ink-2);
    text-align: center;
  }

  /* Barra de abajo: módulo bajo el dedo al deslizar */
  html body.page--webmail .tabbar__item.is-hover {
    color: var(--ink);
  }

  /* Buscador del calendario: entre el año y «Hoy»; se abre a lo ancho */
  .mcal__find {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px;
    color: var(--ink-2);
    font-weight: 500;
  }

  .mcal__find .icon {
    flex: none;
  }

  .mcal__findinput {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .mcal__findinput::placeholder {
    color: var(--ink-2);
  }

  .mcal__findclose {
    display: none;
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .mcal.is-finding .mcal__back,
  .mcal.is-finding .mcal__today {
    display: none;
  }

  .mcal.is-finding .mcal__findclose {
    display: inline;
  }

  .mcal__results {
    position: absolute;
    top: 60px;
    right: 12px;
    left: 12px;
    z-index: 5;
    display: grid;
    gap: 2px;
    max-height: calc(100% - var(--m-tab) - 76px);
    padding: 8px;
    overflow-y: auto;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 20px 50px -18px rgb(14 14 14 / 0.4), inset 0 0 0 0.5px var(--line);
    animation: mcal-sheet 360ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
  }

  .mcal__results[hidden] {
    display: none;
  }

  .mcal__hit {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
  }

  .mcal__hit:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .mcal__hit.is-past {
    opacity: 0.6;
  }

  .mcal__hit .mcal__evdot {
    align-self: stretch;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
  }

  .mcal__hittext {
    display: grid;
    min-width: 0;
  }

  .mcal__hittext strong,
  .mcal__hittext span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mcal__hittext span {
    color: var(--ink-2);
    font-size: 0.8125rem;
  }

  .mcal__hittext span::first-letter {
    text-transform: uppercase;
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  .mail-cat[aria-selected="true"] {
    background: var(--lima);
    color: var(--negro);
  }
}

/* =====================================================================
 * Calendario (celular): barra como Calendario de Apple — año · [vista · buscar · +],
 * «Hoy» junto al título y cuatro formas de ver el mes.
 * ===================================================================== */
@media (max-width: 860px) {
  .mcal__top {
    position: relative;
    justify-content: space-between;
  }

  .mcal__find {
    display: none;
  }

  .mcal.is-finding .mcal__find {
    display: flex;
  }

  .mcal.is-finding .mcal__tools,
  .mcal.is-finding .mcal__back {
    display: none;
  }

  .mcal__tools {
    gap: 0;
    padding: 0 4px;
  }

  .mcal__tool {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 150ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mcal__tool .icon {
    width: 22px;
    height: 22px;
  }

  .mcal__tool:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    transform: scale(0.9);
  }

  .mcal__titlerow {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 0 0;
  }

  .mcal__titlerow .mcal__title {
    min-width: 0;
  }

  .mcal__today {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 17px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mcal[data-mode="year"] .mcal__titlerow {
    justify-content: flex-end;
  }

  /* Menú de la vista */
  .mcal__menu {
    position: absolute;
    top: 54px;
    right: 14px;
    z-index: 6;
    display: grid;
    min-width: 230px;
    padding: 8px;
    border-radius: 26px;
    background: var(--surface);
    box-shadow: 0 24px 60px -18px rgb(14 14 14 / 0.42), inset 0 0 0 0.5px var(--line);
    transform-origin: top right;
    animation: dock-pop 320ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
  }

  .mcal__menu[hidden] {
    display: none;
  }

  .mcal__menuitem {
    display: grid;
    grid-template-columns: 18px 24px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
  }

  .mcal__menuitem .icon {
    width: 20px;
    height: 20px;
  }

  .mcal__menuitem .icon:first-child {
    width: 16px;
    height: 16px;
    visibility: hidden;
  }

  .mcal__menuitem.is-on .icon:first-child {
    visibility: visible;
  }

  .mcal__menuitem:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .mcal__menusep {
    height: 1px;
    margin: 6px 12px;
    background: var(--line);
  }

  /* Alto de los días según la vista */
  .mcal[data-density="compacta"] .mcal__d { height: 64px; }
  .mcal[data-density="apilada"] .mcal__d { height: 92px; }
  .mcal[data-density="detalles"] .mcal__d { height: 116px; }
  .mcal[data-density="lista"] .mcal__d { height: 56px; }

  /* Compacta y Lista: puntos */
  .mcal[data-density="compacta"] .mcal__lines,
  .mcal[data-density="lista"] .mcal__lines {
    display: flex;
    justify-content: center;
    gap: 3px;
  }

  .mcal__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
  }

  /* Detalles: el título de cada evento */
  .mcal__chip2 {
    display: block;
    min-width: 0;
    padding: 2px 4px;
    overflow: hidden;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--ink);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
  }

  .mcal__chip2--equipo { background: color-mix(in srgb, #8C8C86 22%, transparent); }
  .mcal__chip2--empresa { background: var(--negro); color: var(--hueso); }

  /* Lista: el mes arriba y los eventos del día abajo */
  .mcal__list {
    display: none;
  }

  .mcal[data-density="lista"][data-mode="month"] .mcal__scroll {
    flex: 0 0 52%;
    padding-bottom: 8px;
  }

  .mcal[data-density="lista"][data-mode="month"] .mcal__list {
    display: block;
    flex: 1;
    min-height: 0;
    padding: 10px 16px calc(var(--m-tab) + 16px);
    overflow-y: auto;
    border-top: 0.5px solid var(--line);
  }

  .mcal__listhead {
    margin: 4px 4px 8px;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .mcal__listhead::first-letter {
    text-transform: uppercase;
  }

  .mcal__lrow {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 0 6px;
    border-bottom: 0.5px solid var(--line);
    color: var(--ink);
    text-decoration: none;
  }

  .mcal__lrow .mcal__dot {
    width: 10px;
    height: 10px;
  }

  .mcal__lrow strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mcal__ltime {
    color: var(--ink-2);
    font-size: 0.875rem;
  }

  .mcal__lrow:active {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  .mcal__chip2--empresa { background: var(--lima); color: var(--negro); }
  .mcal__dot.mcal__line--empresa { background: var(--lima); }
}

/* Calendario: el velo de arriba no cubre sus botones (el calendario empieza bajo la hora) */
@media (max-width: 860px) {
  body.page--webmail.has-mcal .statusbar-tint {
    height: max(var(--safe-top-real), 1px);
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* =====================================================================
 * Avisos en el celular: campana dentro del buscador; hoja sólida (se lee sin
 * importar lo que haya debajo). En la app instalada, pantalla que entra desde la
 * derecha mientras la app se corre a la izquierda.
 * ===================================================================== */
.notices-panel__head {
  display: none;
}

.topcap__bell {
  display: none;
}

@media (max-width: 860px) {
  html body.page--webmail .topcap {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  html body.page--webmail .topcap__search {
    right: 46px;
  }

  html body.page--webmail .topcap__brand {
    right: 40px;
  }

  .topcap__bell {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .topcap__bell .icon {
    width: 22px;
    height: 22px;
  }

  .topcap__bell:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  html body.page--webmail .topcap__bell .appbar__badge {
    top: 4px;
    right: 4px;
  }

  /* Hoja de avisos: sólida, bajo el buscador */
  html body.page--webmail .notices-panel {
    position: fixed;
    top: calc(var(--safe-top-real) + var(--cap-h) + 18px);
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    z-index: 60;
    width: auto;
    max-height: calc(100dvh - var(--safe-top-real) - var(--cap-h) - var(--m-tab) - 30px);
    overflow-y: auto;
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 60px -18px rgb(14 14 14 / 0.42), inset 0 0 0 0.5px var(--line);
  }

  .notice-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .notice-row__when {
    align-self: start;
    padding-top: 2px;
    color: var(--ink-2);
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* App instalada: pantalla completa que entra desde la derecha */
  html.is-app body.page--webmail .notices-panel {
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    max-height: none;
    padding: calc(var(--safe-top-real) + 6px) 0 calc(env(safe-area-inset-bottom) + 16px);
    border-radius: 0;
    background: var(--bg);
    box-shadow: -20px 0 50px rgb(0 0 0 / 0.12);
    opacity: 1;
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 440ms;
    animation: none;
  }

  html.is-app body.page--webmail .notices-panel[data-open="true"] {
    visibility: visible;
    transform: none;
    transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  html.is-app body.page--webmail .notices-panel__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 10px;
  }

  html.is-app body.page--webmail .notices-panel__head .menu__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .notices-panel__back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink);
  }

  .notices-panel__back .icon {
    width: 22px;
    height: 22px;
  }

  html.is-app body.page--webmail .notices-panel .notices {
    flex: 1;
    max-height: none;
    padding: 0 10px;
  }

  html.is-app body.page--webmail .notice-row {
    min-height: 64px;
  }

  /* La app se corre a la izquierda mientras entran los avisos */
  html.is-app body.page--webmail .mail-app,
  html.is-app body.page--webmail .mail-top,
  html.is-app body.page--webmail .dock {
    transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1), filter 440ms ease;
  }

  html.is-app body.page--webmail.has-notices .mail-app,
  html.is-app body.page--webmail.has-notices .mail-top,
  html.is-app body.page--webmail.has-notices .dock {
    filter: brightness(0.9);
    transform: translate3d(-28%, 0, 0);
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html.is-app body.page--webmail .notices-panel,
  html.is-app body.page--webmail .mail-app,
  html.is-app body.page--webmail .mail-top,
  html.is-app body.page--webmail .dock {
    transition: none;
  }
}

@media (max-width: 860px) {
  html.is-app body.page--webmail .notices-panel .notices {
    align-content: start;
  }

  .notices-panel__back:focus:not(:focus-visible) {
    outline: none;
  }

  html body.page--webmail .topcap__input::placeholder {
    text-overflow: ellipsis;
  }
}

.notices-panel__back:focus {
  outline: none;
}

/* =====================================================================
 * 1.8.3 — App instalada: franja de la hora sólida (sin desenfoque), barra de
 * abajo con el mismo margen abajo y a los lados, y al bajar se encoge a la mitad
 * (solo íconos, como Instagram); el «+» queda fijo a la derecha.
 * ===================================================================== */
@media (max-width: 860px) {
  html.is-app body.page--webmail .statusbar-tint {
    height: max(var(--safe-top-real), 1px);
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  html.is-app body.page--webmail {
    --dock-bottom: 20px;
  }

  html.is-app body.page--webmail .dock,
  html.is-app body.page--webmail .reader .toolbar {
    right: 20px;
    bottom: 20px;
    left: 20px;
  }

  html body.page--webmail .dock {
    justify-content: space-between;
  }

  html body.page--webmail .tabbar {
    max-width: 100%;
    transition: max-width 420ms cubic-bezier(0.32, 0.72, 0, 1), height 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  html body.page--webmail.dock-min .tabbar {
    max-width: calc(var(--tabs, 4) * 52px + 12px);
  }

  html body.page--webmail.dock-min .tabbar__item .icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 860px) {
  /* Documentos: el encabezado se desplaza con el contenido (no se queda bajo el buscador) */
  html body.page--webmail .drive__head {
    position: static;
  }

  /* Vidrio casi opaco: lo que pasa por detrás no se lee a través */
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before,
  .mcal__glass {
    background: #FAF9F5;
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  html body.page--webmail .tabbar,
  html body.page--webmail .reader .toolbar::before,
  .mcal__glass {
    background: #242422;
  }
}

/* =====================================================================
 * 1.8.4 — La barra de estado del iPhone es opaca (la pinta iOS del color del tema):
 * nada pasa por debajo de la hora y no hay desenfoque posible.
 * Calendario: la barra de arriba se mantiene (no desaparece al entrar).
 * Pantalla de carga fija en el centro.
 * ===================================================================== */
@media (max-width: 860px) {
  html.is-app body.page--webmail .statusbar-tint {
    display: none;
  }

  /* Calendario: misma cápsula que las demás pantallas; el calendario va debajo */
  html body.page--webmail.has-mcal .mail-top .topcap {
    display: grid;
  }

  html body.page--webmail.has-mcal .statusbar-tint {
    display: none;
  }

  .mcal,
  html.is-app .mcal {
    top: calc(var(--safe-top-real) + var(--cap-h) + 14px);
    bottom: 0;
    height: auto;
  }
}

/* Pantalla de carga: el logo fijo en el centro de la pantalla completa */
html.is-preloading .preloader {
  height: 100lvh;
}

.preloader img {
  position: absolute;
  top: 50lvh;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 860px) {
  /* La cuenta va en la tercera columna: el buscador llega hasta la foto */
  html body.page--webmail .topcap [data-region="top-me"] {
    grid-column: 3;
    justify-self: end;
  }
}

/* =====================================================================
 * 1.8.5 — Conversación, punto de no leído centrado, «Hoy» junto al mes,
 * formulario de eventos sin solaparse y letra del tamaño del sistema (iPhone).
 * ===================================================================== */

/* Conversación (correos del mismo hilo) */
.thread {
  margin: 4px 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.thread__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.thread__head::-webkit-details-marker {
  display: none;
}

.thread__icon {
  width: 16px;
  height: 16px;
}

.thread__list {
  display: grid;
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
}

.thread__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 8px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

a.thread__item:hover,
a.thread__item:active {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.thread__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.thread__who {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.875rem;
}

.thread__who time {
  flex: none;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.thread__preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.thread__item.is-mine .avatar {
  background: var(--negro);
  color: var(--lima);
}

.thread__item--current {
  display: block;
  padding: 6px 8px 4px 48px;
}

.thread__current {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  /* Punto de no leído a la altura del centro de la foto */
  html body.page--webmail .msg__dot {
    grid-row: 1 / span 3;
    grid-column: 1;
    align-self: start;
    margin-top: 20px;
  }

  /* Calendario: «Hoy» junto al mes/año, del mismo alto */
  .mcal__top .mcal__today {
    height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: #FAF9F5;
    box-shadow: inset 0 0 0 0.5px var(--gl-line), var(--gl-shadow);
  }

  .mcal__top .mcal__tools {
    margin-left: auto;
  }

  .mcal.is-finding .mcal__today {
    display: none;
  }

  /* Formulario de un evento: el encabezado no se monta sobre los campos y los
     botones de guardar no quedan detrás de la barra de abajo */
  html body.page--webmail .calendar.is-reading .calendar__side .toolbar {
    position: static;
    top: auto;
  }

  html body.page--webmail:has(.calendar.is-reading) .dock {
    display: none;
  }

  html body.page--webmail .calendar.is-reading .event-form {
    padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  .mcal__top .mcal__today {
    background: #242422;
  }

  .thread__item.is-mine .avatar {
    background: var(--lima);
    color: var(--negro);
  }
}

/* Letra del tamaño que la persona eligió en su iPhone (Ajustes › Pantalla › Tamaño del texto) */
@supports (font: -apple-system-body) {
  @media (max-width: 860px) {
    html:has(body.page--webmail) {
      font: -apple-system-body;
    }

    html body.page--webmail {
      font-family: var(--font);
    }
  }
}

@media (max-width: 860px) {
  /* Calendario: el contenido (p. ej. un evento) empieza debajo de la cápsula de arriba */
  html body.page--webmail.has-mcal .mail-app {
    padding-top: var(--m-top);
  }
}

/* =====================================================================
 * 1.9.1 — Botones de arriba planos (sin sombras difusas), número de avisos legible
 * y calendario sin la cápsula, que se oculta suave (sin brinco).
 * ===================================================================== */
@media (max-width: 860px) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  .mcal__glass,
  .mcal__top .mcal__today {
    box-shadow: inset 0 0 0 1px rgb(14 14 14 / 0.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body.page--webmail .topcap__me .avatar {
    box-shadow: none;
  }

  /* Número de avisos: grande y legible, con borde del color del botón */
  html body.page--webmail .topcap__bell .appbar__badge,
  html body.page--webmail .topcap .appbar__badge {
    top: 3px;
    right: 1px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid #FAF9F5;
    border-radius: 11px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 18px;
    box-shadow: none;
  }

  /* Calendario: la cápsula se va con un fundido corto, sin mover nada */
  html body.page--webmail .topcap {
    transition: opacity 220ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  html body.page--webmail.has-mcal .mail-top .topcap {
    display: grid;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -10px, 0) scale(0.97);
  }

  .mcal,
  html.is-app .mcal {
    top: calc(var(--safe-top-real) + 2px);
  }

  html body.page--webmail.has-mcal .mail-app {
    padding-top: calc(var(--safe-top-real) + 8px);
  }
}

@media (max-width: 860px) and (prefers-color-scheme: dark) {
  html body.page--webmail .topcap__btn,
  html body.page--webmail .topcap__me,
  html body.page--webmail .topcap__center,
  .mcal__glass,
  .mcal__top .mcal__today {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  }

  html body.page--webmail .topcap__bell .appbar__badge,
  html body.page--webmail .topcap .appbar__badge {
    border-color: #242422;
  }
}

@media (max-width: 860px) {
  /* Calendario: la cápsula oculta no puede recibir toques (ni su buscador) */
  html body.page--webmail.has-mcal .mail-top,
  html body.page--webmail.has-mcal .mail-top * {
    pointer-events: none !important;
  }

  html body.page--webmail.has-mcal .mail-top .topcap {
    visibility: hidden;
    transition: opacity 220ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms;
  }
}

/* =====================================================================
 * 1.9.2 — Logo centrado en el buscador, conversaciones agrupadas y entrada
 * de módulo como una sola pieza.
 * ===================================================================== */
@media (max-width: 860px) {
  /* Logo centrado en toda la cápsula (la campana queda a la derecha sin empujarlo) */
  html body.page--webmail .topcap__brand {
    right: 44px;
    left: 44px;
  }

  /* Cuántos correos tiene la conversación */
  .msg__count {
    display: inline-grid;
    min-width: 22px;
    height: 20px;
    margin-left: 4px;
    padding: 0 6px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: 2px;
  }

  /* Módulo nuevo: entra completo con un fundido y un leve desplazamiento */
  [data-region="body"].is-entering {
    animation: module-in 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  [data-region="body"].is-entering .msgs > li {
    animation: none;
  }

  /* Calendario: solo fundido (sin desplazarse: los botones no brincan y el mes sale completo) */
  .mcal {
    animation: mcal-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
}

@keyframes module-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-region="body"].is-entering,
  .mcal {
    animation: none;
  }
}

@media (min-width: 861px) {
  .msg__count {
    display: inline-grid;
    min-width: 20px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--ink-2);
    font-size: 0.6875rem;
    font-weight: 700;
  }
}

/* Varias cuentas: filas en el menú de la foto y ventana para agregar */
.menu__accounts {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.acct-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.acct-row__main {
  flex: 1;
  min-width: 0;
}

.acct-row__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog--account .dialog__card {
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
}

.compose__from {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
}

@media (max-width: 860px) {
  /* Menú de la cuenta: sólido (lo de abajo no se ve a través) */
  html body.page--webmail .mail-top #menu-cuenta-movil {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* En pantallas táctiles, el primer elemento enfocado al abrir un menú no lleva aro */
@media (pointer: coarse) {
  .menu .menu__item:focus:not(:active),
  .menu button:focus {
    outline: none;
  }
}

/* Conversación en acordeón: cada mensaje se abre en su lugar */
.thread__msg > summary {
  list-style: none;
  cursor: pointer;
}

.thread__msg > summary::-webkit-details-marker {
  display: none;
}

.thread__msg[open] > summary .thread__preview {
  display: none;
}

.thread__msg[open] > summary {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.thread__body {
  display: grid;
  gap: 8px;
  padding: 4px 8px 12px 48px;
  animation: thread-open 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.thread__frame {
  display: block;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
}

.thread__reply {
  justify-self: start;
}

@keyframes thread-open {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@media (max-width: 860px) {
  .thread__body {
    padding-left: 8px;
  }
}

/* Acordeón de la conversación: cada mensaje es una tarjeta; al abrirla, el contenido
   ocupa todo el ancho de la tarjeta, alineado con su encabezado. */
.thread__list {
  gap: 6px;
}

.thread__msg {
  border-radius: 14px;
  transition: background-color 200ms ease;
}

.thread__msg > summary.thread__item {
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
}

.thread__msg[open] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.thread__msg[open] > summary {
  background: none;
}

.thread__chev {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.thread__msg[open] .thread__chev {
  transform: rotate(180deg);
}

.thread__body,
.thread__msg[open] .thread__body {
  gap: 10px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
  margin: 0 8px;
}

.thread__frame {
  margin-top: 12px;
  border-radius: 0;
  background: transparent;
}

.thread__reply {
  margin-left: -6px;
}

@media (max-width: 860px) {
  .thread__body,
  .thread__msg[open] .thread__body {
    padding: 0 6px 12px;
  }
}

.thread__item--current {
  padding: 8px 14px 4px;
}

.thread-after {
  margin-top: 18px;
}

/* ---------- 1.11: productividad del correo ---------- */

/* Etiquetas de color (reglas) */
.label-chip {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg, #E4E2DC);
  color: var(--chip-ink, var(--negro));
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}
.label-chip--negro { --chip-bg: var(--negro); --chip-ink: var(--hueso); }
.label-chip--lima { --chip-bg: color-mix(in srgb, var(--lima) 70%, var(--hueso)); }
.label-chip--arena { --chip-bg: #E4DCC8; }
.label-chip--azul { --chip-bg: #D3DEEC; }
.label-chip--bosque { --chip-bg: #D2E0D3; }
.label-chip--ambar { --chip-bg: #F1DFB8; }
.label-chip--coral { --chip-bg: #F1D3CB; }
.label-chip--uva { --chip-bg: #E0D6EA; }
:root[data-theme="dark"] .label-chip { --chip-ink: var(--hueso); }
:root[data-theme="dark"] .label-chip--negro { --chip-bg: var(--hueso); --chip-ink: var(--negro); }
:root[data-theme="dark"] .label-chip--lima { --chip-bg: var(--lima); --chip-ink: var(--negro); }
:root[data-theme="dark"] .label-chip--arena { --chip-bg: #4A4434; }
:root[data-theme="dark"] .label-chip--azul { --chip-bg: #2F3D50; }
:root[data-theme="dark"] .label-chip--bosque { --chip-bg: #2F4232; }
:root[data-theme="dark"] .label-chip--ambar { --chip-bg: #52421E; }
:root[data-theme="dark"] .label-chip--coral { --chip-bg: #553029; }
:root[data-theme="dark"] .label-chip--uva { --chip-bg: #3F3350; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .label-chip { --chip-ink: var(--hueso); }
  :root:not([data-theme="light"]) .label-chip--negro { --chip-bg: var(--hueso); --chip-ink: var(--negro); }
  :root:not([data-theme="light"]) .label-chip--lima { --chip-bg: var(--lima); --chip-ink: var(--negro); }
  :root:not([data-theme="light"]) .label-chip--arena { --chip-bg: #4A4434; }
  :root:not([data-theme="light"]) .label-chip--azul { --chip-bg: #2F3D50; }
  :root:not([data-theme="light"]) .label-chip--bosque { --chip-bg: #2F4232; }
  :root:not([data-theme="light"]) .label-chip--ambar { --chip-bg: #52421E; }
  :root:not([data-theme="light"]) .label-chip--coral { --chip-bg: #553029; }
  :root:not([data-theme="light"]) .label-chip--uva { --chip-bg: #3F3350; }
}

/* Selector de color de la regla */
.label-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
}
.label-colors legend { margin-bottom: 8px; }
.label-color {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.label-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.label-color:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.label-color:has(input:focus-visible) { outline: 2px solid var(--focus, var(--ink)); outline-offset: 4px; }
.label-color:active { transform: scale(0.92); }

/* Listas de ajustes (respuestas rápidas, reglas) */
.xlist {
  display: grid;
  gap: 2px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.xlist__row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 4px 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.xlist__text { display: grid; flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.4; }
.xlist__text > span { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }

/* Posponer (lector) */
.snooze { position: relative; }
.snooze > summary { list-style: none; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 240px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 44px -14px rgb(14 14 14 / 0.35), inset 0 0 0 1px var(--line);
  transform-origin: top right;
  animation: ixm-pop 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.snooze__title { margin: 6px 10px 4px; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.snooze__menu button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.snooze__menu button span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .snooze__menu button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
@keyframes ixm-pop {
  from { opacity: 0; transform: scale(0.96); }
}

/* Invitación de calendario */
.invite {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.invite__date {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 56px;
  border-radius: 12px;
  background: var(--negro);
  color: var(--hueso);
  line-height: 1;
}
.invite__date small { color: var(--lima); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
.invite__date strong { font-size: 1.375rem; }
.invite__text { flex: 1; min-width: 180px; }
.invite__title { margin: 0 0 2px; font-weight: 600; }
.invite__when { margin: 0; color: var(--ink-2); font-size: 0.875rem; }
.invite__actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.invite__done { margin: 0; width: 100%; color: var(--ink-2); font-size: 0.875rem; }

/* Plantillas al redactar */
.editor__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.editor__tools .editor__tpl { display: inline-flex; gap: 6px; align-items: center; width: auto; padding: 0 10px; font-size: 0.8125rem; }
.tpl-menu {
  display: grid;
  gap: 2px;
  max-height: 260px;
  margin: 6px 0;
  padding: 6px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tpl-menu button {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tpl-menu button strong { font-size: 0.875rem; }
.tpl-menu button span { overflow: hidden; color: var(--ink-2); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.tpl-menu a { padding: 8px 10px; color: var(--ink-2); font-size: 0.8125rem; }
@media (hover: hover) and (pointer: fine) {
  .tpl-menu button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}

/* Búsqueda global y bandeja unificada */
.search-all {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 16px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font-size: 0.8125rem;
  text-decoration: none;
}
.search-all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch__form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 20px 24px 8px;
  padding: 0 16px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--field-bg, var(--surface));
  box-shadow: inset 0 0 0 1px var(--field-border, var(--line));
}
.gsearch__form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; outline: none; }
.gsearch__hint { margin: 12px 24px; color: var(--ink-2); }
.gsearch .notices,
.unified .notices { max-height: none; overflow: visible; padding: 0 18px; }
.gsearch .notice-row,
.unified .notice-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.notice-row--more { display: block; padding: 8px 10px 8px 58px; color: var(--ink-2); font-size: 0.8125rem; }
.notice-row.is-unread strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 2px; }
.acct-tag { color: var(--ink-2); font-size: 0.75rem; font-style: normal; }
.unified__warn { margin: 0 24px 8px; color: var(--warn-ink); font-size: 0.875rem; }
.gsearch .notice-row__when,
.unified .notice-row__when { align-self: start; padding-top: 2px; color: var(--ink-2); font-size: 0.75rem; white-space: nowrap; }

@media (max-width: 760px) {
  .gsearch__form { margin: 12px 20px 8px; }
  .gsearch .notices, .unified .notices { padding: 0 8px; }
  /* En la barra inferior del lector: menú que sube desde el reloj */
  html body.page--webmail .reader .toolbar .snooze { display: flex; align-items: center; }
  html body.page--webmail .reader .toolbar .snooze__menu {
    position: absolute;
    top: auto;
    right: -40px;
    bottom: calc(100% + 14px);
    display: grid;
    width: min(290px, calc(100vw - 40px));
    min-width: 0;
    background: var(--surface);
    transform-origin: bottom right;
  }
  html body.page--webmail .reader .toolbar .snooze__menu button {
    width: auto;
    height: auto;
    min-height: 44px;
    border-radius: 10px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snooze__menu { animation: none; }
}

@keyframes mcal-in {
  from { opacity: 0; }
}

/* Enviando: el panel de redactar se va de una vez (no se puede tocar «Enviar» dos veces) */
html body.page--webmail .cwin.is-sending {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 240ms;
}
html body.page--webmail .cwin.is-sending .cwin__scrim { opacity: 0; }
form[data-compose].is-sending { display: none; }
.sending-note {
  display: grid;
  place-items: center;
  min-height: 40vh;
  color: var(--ink-2);
  font-size: 0.9375rem;
  animation: mcal-in 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html body.page--webmail .cwin.is-sending { transform: none; transition: none; }
}