/*
 * 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;
}