/* ─────────────────────────────────────────────────────────────
   ESCRITORIO
   Metafora de sistema operativo, calcada de gif.garajedeideas.com:
   pastillas arriba, iconos sueltos que se arrastran, ventanas que
   se abren encima y un dock de cristal abajo.
   ───────────────────────────────────────────────────────────── */

/* ── BARRA SUPERIOR ── */

.topbar {
  position: fixed;
  z-index: 950;
  inset: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem;
  pointer-events: none;           /* la barra no tapa el escritorio, sus piezas si */
}

.topbar > * { pointer-events: auto; }
.pill[hidden] { display: none; }

.pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .25rem .75rem;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--bg-elevated);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .35s;
}

.topbar__name { padding: 0; }

.topbar__name-btn {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  min-height: inherit;
  padding: .25rem 1.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: -.01em;
  cursor: pointer;
}

/* Barra de menus de macOS: la app en negrita, los menus en regular,
   misma tinta, sin separadores; el aire hace de separador. */
.topbar__brand { font-weight: 700; }
.topbar__role { display: flex; gap: 1.375rem; }

.topbar__right {
  position: relative;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.pill--cta {
  background-color: var(--cta-bg);
  color: var(--cta-ink);
  cursor: pointer;
}

.pill--cta svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill--cta:hover { background-color: var(--cta-hover); }

/* Modo claro / oscuro: pastilla cuadrada, como el boton de Modo oscuro del
   Centro de Control. Sol y luna apilados; el que no toca gira y se encoge. */
.theme-toggle {
  position: relative;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  cursor: pointer;
}

.theme-toggle:hover { background-color: var(--bg-card-hover); }
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

.theme-toggle__icon {
  position: absolute;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
}

.theme-toggle__icon.is--moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="dark"] .theme-toggle__icon.is--sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="dark"] .theme-toggle__icon.is--moon { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon { transition: none; }
}

/* Rolling text — Osmo "Button with CSS Character Stagger", el mismo efecto
   que tenia el boton de contacto antes del rediseño. Cada letra lleva una
   copia de si misma un renglon mas abajo (text-shadow); al hover sube y la
   copia ocupa su sitio. js/button-chars.js parte el texto en letras. */
.pill__chars {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
  white-space: nowrap;
}

.pill__chars span {
  display: inline-block;
  position: relative;
  text-shadow: 0 1.3em currentColor;
  transform: translateY(0em) rotate(.001deg);
  transition: transform .6s cubic-bezier(.625, .05, 0, 1);
}

.pill--cta:hover .pill__chars span { transform: translateY(-1.3em) rotate(.001deg); }

@media (prefers-reduced-motion: reduce) {
  .pill__chars span { transition: none; }
}

.pill:focus-within,
.topbar__name-btn:focus-visible { outline: none; }
.pill:has(:focus-visible),
.pill--cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Reloj, como el de la barra de menus de macOS */
.status__time { font-variant-numeric: tabular-nums; }

/* ── STACK ──
   Pastilla con cuatro iconos de app solapados, como los avatares de un
   grupo. Al pulsarla cae una tarjeta de cristal con todo el stack. */

.stack { padding: .25rem .625rem .25rem .5rem; }

.stack__toggle {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.stack__peek { display: flex; }

.stack__peek svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -.5rem;
  border-radius: .4rem;
  box-shadow: 0 0 0 2px var(--bg-elevated);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .35s;
}

.stack__peek svg:first-child { margin-left: 0; }

/* Hover: los iconos se abren en abanico. */
.stack__toggle:hover .stack__peek svg:nth-child(1),
[data-stack-open][aria-expanded="true"] .stack__peek svg:nth-child(1) { transform: translateX(-3px) rotate(-6deg); }
.stack__toggle:hover .stack__peek svg:nth-child(2),
[data-stack-open][aria-expanded="true"] .stack__peek svg:nth-child(2) { transform: translateX(-1px) translateY(-1px) rotate(-2deg); }
.stack__toggle:hover .stack__peek svg:nth-child(3),
[data-stack-open][aria-expanded="true"] .stack__peek svg:nth-child(3) { transform: translateX(1px) translateY(-1px) rotate(2deg); }
.stack__toggle:hover .stack__peek svg:nth-child(4),
[data-stack-open][aria-expanded="true"] .stack__peek svg:nth-child(4) { transform: translateX(3px) rotate(6deg); }

.stack__chevron {
  width: .875rem;
  height: .875rem;
  margin-left: -.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-muted);
  transition: transform .3s var(--ease-out);
}

[data-stack-open][aria-expanded="true"] .stack__chevron { transform: rotate(180deg); }

/* Tarjeta: mismo cristal que el dock (Explorar), centrada bajo la pastilla.
   Se centra con margen y no con transform, que lo anima GSAP. */
.stack { position: relative; }

.stack-card {
  --card-w: 24.5rem;
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  padding: .375rem;
  border-radius: 1.25rem;
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  white-space: normal;
}

.stack-card[hidden] { display: none; }

.stack-card__group { padding: .5rem .25rem .25rem; }

.stack-card__group + .stack-card__group {
  margin-top: .25rem;
  border-top: .5px solid var(--hairline);
}

.stack-card__title {
  margin: 0 0 .375rem .5rem;
  color: var(--ink-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.stack-card__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-card__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: .5rem .125rem;
  border-radius: .625rem;
  font-size: .6875rem;
  line-height: 1.2;
  text-align: center;
  transition: background-color .12s ease, color .12s ease;
}

/* Resaltado de menu de Mac, como en el dock. */
.stack-card__tool:hover {
  background-color: var(--select);
  color: var(--white);
}

.stack-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .2);
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}

.stack-card__tool:hover .stack-card__icon { transform: translateY(-2px) scale(1.06); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stack-card { background-color: var(--glass-solid); }
}

@media (prefers-reduced-motion: reduce) {
  .stack__peek svg,
  .stack__chevron,
  .stack-card__icon { transition: none; }
}

/* ── ESCRITORIO E ICONOS ── */

.desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.icon[hidden] { display: none; }

.icon__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  padding: .3rem;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color .12s ease, border-color .12s ease;
}

.icon__visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.icon__label {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

/* Hover y seleccion: el mismo gesto que el Finder. */
.icon:hover .icon__visual,
.icon.is-selected .icon__visual {
  background-color: var(--icon-hover);
  border-color: var(--icon-hover-border);
}

.icon:hover .icon__label,
.icon.is-selected .icon__label {
  background-color: var(--select);
  color: var(--white);
}

.icon:focus { outline: none; }
.icon:focus-visible .icon__label { outline: 2px solid var(--select); outline-offset: 2px; }

/* Carpeta: dos piezas negras, la trasera con pestaña. */
.folder { display: block; width: 100%; height: auto; overflow: visible; }
.folder__back  { fill: var(--folder-back); }
.folder__front { fill: var(--folder-front); }

.folder__tag {
  position: absolute;
  right: .55rem;
  bottom: 1.1rem;
  padding: .1rem .3rem;
  border-radius: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  transform: rotate(-6deg);
}

.folder__tag.is--pink { background-color: #f67bbd; color: #1b1818; }
.folder__tag.is--blue { background-color: #3b83f6; color: #fff; }
.folder__tag.is--red  { background-color: #e5432f; color: #1b1818; }

/* Posiciones de respaldo (sin JS). Con JS, layoutRing() en js/desktop.js
   las coloca en corona alrededor de la foto. */
.icon.is-1 { left: 6%;  top: 22%; }
.icon.is-2 { left: 19%; top: 11%; }
.icon.is-3 { left: 11%; top: 52%; }
.icon.is-4 { left: 23%; top: 70%; }
.icon.is-5 { right: 6%; top: 13%; }
.icon.is-6 { right: 17%; top: 47%; }
.icon.is-7 { right: 6%; top: 66%; }
.icon.is-8 { right: 20%; top: 20%; }

/* Documento: hoja blanca con esquina doblada y lineas de texto. Usa los
   colores de sistema, asi que cambia sola en modo oscuro. */
.icon__visual.is--doc { padding: .35rem .75rem; }
.doc { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12)); }
.doc__page { fill: var(--bg-elevated); stroke: var(--hairline); }
.doc__fold { fill: var(--fill); stroke: var(--hairline); }
.doc__line { fill: var(--label-3); }

/* Tarjeta central: retrato con marco de cristal y etiqueta azul. */
.profile {
  --w: clamp(11rem, 27vh, 16rem);
  position: absolute;
  left: calc(50% - var(--w) / 2);
  top: calc(50% - var(--w) / 2 - 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: var(--w);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.profile__frame {
  display: block;
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--frame-border);
  border-radius: var(--r-md);
  background-color: var(--frame-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile__frame img {
  display: block;
  width: 100%;
  height: auto;            /* si no, el height="1080" del HTML pisa el aspect-ratio */
  aspect-ratio: 1;
  border-radius: .375rem;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Etiqueta como la de los iconos: texto normal y resaltado azul solo al
   pasar por encima, como un archivo del Finder. */
.profile__label {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

.profile:hover .profile__label {
  background-color: var(--select);
  color: var(--white);
}

.profile:focus { outline: none; }
.profile:focus-visible .profile__label { outline: 2px solid var(--select); outline-offset: 2px; }

/* Caja de seleccion al arrastrar sobre el fondo. */
.select-box {
  position: fixed;
  z-index: 970;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 1px solid rgba(10, 102, 255, .55);
  border-radius: 2px;
  background-color: rgba(10, 102, 255, .08);
  opacity: 0;
  pointer-events: none;
}

/* ── VENTANAS ── */

.window {
  --pad: clamp(1.25rem, 3vw, 2.5rem);
  --win-w: min(62rem, calc(100vw - 1.5rem));
  --win-h: min(46rem, calc(100dvh - 10rem));
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}

.window[hidden] { display: none; }
.window:focus { outline: none; }

.window--contact {
  --win-w: min(27rem, calc(100vw - 1.5rem));
  --win-h: auto;
}

/* Ventana de macOS: sin marco exterior, borde de medio pixel y la sombra
   larga y suave de las ventanas activas del sistema. */
.window__frame {
  width: var(--win-w);
  height: var(--win-h);
  border-radius: .875rem;
  box-shadow: var(--win-shadow);
}

.window__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: inherit;
  background-color: var(--bg-elevated);
  overflow: hidden;
}

/* Barra de titulo translucida: el contenido se intuye al hacer scroll. */
.window__bar {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border-bottom: .5px solid var(--hairline);
  background-color: var(--glass-bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

[data-window-dragging] .window__bar,
[data-window-dragging] { cursor: grabbing; }

.window__controls { display: flex; gap: .5rem; }

.window__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: .75rem;
  height: .75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
  cursor: pointer;
}

/* Area tactil mayor que el punto, sin cambiar su tamaño visible. */
.window__dot::before { content: ""; position: absolute; inset: -.375rem; }

.window__dot.is--close { background-color: var(--dot-close); }
.window__dot.is--min { background-color: var(--dot-min); }

.window__dot svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 0, 0, .5);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .15s;
}

.window__controls:hover svg,
.window__dot:focus-visible svg { opacity: 1; }
.window__dot:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

.window__title,
.window__meta {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window__title { font-weight: 500; color: var(--ink); }
.window__meta { justify-self: end; color: var(--ink-muted); }

.window__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.window__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── CONTENIDO DE LA VENTANA DE CONTACTO ──
   Ficha de Contactos de macOS: fondo gris de sistema, tarjetas blancas
   agrupadas, separadores finos con sangria y grises de etiqueta de Apple. */

.window--contact .window__inner { background-color: var(--bg-grouped); }
.window--contact .window__bar { background-color: var(--glass-bar-grouped); }

.contact {
  --ease-apple: cubic-bezier(.25, .1, .25, 1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(100dvh - 12rem);
  padding: 2rem 1.25rem 1.5rem;
  font-size: .9375rem;
  line-height: 1.35;
}

.contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact__avatar {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .1);
  pointer-events: none;
  -webkit-user-drag: none;
}

.contact__name {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.contact__role {
  margin: .3rem 0 0;
  color: var(--label-2);
}

/* Acciones: dos botones iguales, el principal en tinta. */
.contact__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 0;
  border-radius: .75rem;
  background-color: var(--bg-card);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-apple), transform .2s var(--ease-apple);
}

.contact__btn:hover { background-color: var(--bg-card-hover); }
.contact__btn:active { transform: scale(.97); }

.contact__btn.is--primary {
  background-color: var(--cta-bg);
  box-shadow: none;
  color: var(--cta-ink);
}

.contact__btn.is--primary:hover { background-color: var(--cta-hover); }
.contact__btn.is--primary[data-copy-button="copied"] { background-color: var(--available); }

.contact__btn:focus { outline: none; }
.contact__btn:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

.contact__icon,
.contact__chev {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__icon { width: 1.125rem; height: 1.125rem; }

/* Estado copiado: cambia icono y texto. */
.contact__icon.is--check,
.contact__btn-text.is--check,
[data-copy-button="copied"] .is--copy { display: none; }
[data-copy-button="copied"] .contact__icon.is--check,
[data-copy-button="copied"] .contact__btn-text.is--check { display: inline; }

/* Lista agrupada (inset grouped). */
.contact__group {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: .75rem;
  background-color: var(--bg-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.contact__group li { position: relative; }

/* Separador con sangria, como en iOS: no llega al borde izquierdo. */
.contact__group li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  height: 1px;
  background-color: var(--sep);
  transform: scaleY(.5);
  transform-origin: top;
}

.contact__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: .7rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s var(--ease-apple);
}

.contact__row:hover { background-color: var(--hover); }
.contact__row:active { background-color: var(--fill); }
.contact__row:focus { outline: none; }
.contact__row:focus-visible { outline: 2px solid var(--select); outline-offset: -2px; border-radius: .75rem; }

.contact__label {
  flex: none;
  width: 5.5rem;
  color: var(--label-2);
}

.contact__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact__chev {
  width: 1rem;
  height: 1rem;
  color: var(--label-3);
  transition: color .15s, transform .2s var(--ease-apple);
}

.contact__row:hover .contact__chev { color: var(--label-2); transform: translateX(2px); }

/* Pie de seccion, como los de Ajustes. */
.contact__note {
  margin: -.5rem 0 0;
  padding: 0 1rem;
  color: var(--label-2);
  font-size: .8125rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .contact__btn,
  .contact__row,
  .contact__chev { transition: none; }
}

/* ── DOCK ──
   Cristal claro como los menus de macOS: material translucido con
   desenfoque, filas redondeadas y resaltado azul de seleccion al hover. */

.dock {
  --dock-pad: .375rem;
  position: fixed;
  z-index: 900;
  inset: auto 0 .75rem;
  width: 90vw;
  max-width: 30rem;
  margin-inline: auto;
  border-radius: var(--r-pill);  /* mismo radio que las pastillas de arriba */
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  overflow: hidden;
}

.dock__menu {
  height: 0;
  overflow: hidden;
}

.dock[data-open] .dock__menu { height: auto; }

.dock__list {
  max-height: calc(100dvh - 9rem);
  margin: 0;
  padding: var(--dock-pad) var(--dock-pad) 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
}

.dock__list::-webkit-scrollbar { display: none; }

.dock__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .375rem .5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

/* Resaltado de menu de Mac: azul de seleccion y texto en blanco. */
.dock__link:hover {
  background-color: var(--select);
  color: var(--white);
}

.dock__link:focus { outline: none; }
.dock__link:focus-visible { outline: 2px solid var(--select); outline-offset: -2px; }

.dock__link-text {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.dock__link-meta {
  margin-left: auto;
  white-space: nowrap;
  color: var(--ink-muted);
  font-size: .8125rem;
  transition: color .12s ease;
}

.dock__link:hover .dock__link-meta { color: rgba(255, 255, 255, .8); }

/* Iconos pequeños del menu: misma pieza que en el escritorio, a escala. */
.icon__visual.is--sm {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08);
}

.icon__visual.is--sm img { border-radius: .5rem; }
.icon__visual.is--sm.is--folder { padding: .3rem .2rem; box-shadow: none; }
.icon__visual.is--sm .folder__tag { display: none; }
.icon__visual.is--sm.is--doc { padding: .25rem .5rem; box-shadow: none; }

/* Redes: dos botones de relleno gris, separados de la lista por una linea fina. */
.dock__social {
  display: flex;
  gap: var(--dock-pad);
  margin-top: var(--dock-pad);
  padding: calc(var(--dock-pad) + .125rem) 0 var(--dock-pad);
  border-top: .5px solid var(--hairline);
}

.dock__ext {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .625rem .75rem;
  border-radius: var(--r-sm);
  background-color: var(--fill);
  color: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease;
}

.dock__ext:hover { background-color: var(--fill-hover); }
.dock__ext:focus { outline: none; }
.dock__ext:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

.dock__chev {
  width: .875rem;
  height: .875rem;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .625rem .875rem;
  cursor: pointer;
}

/* Con el menu abierto, la barra se separa de la lista como un pie. */
.dock[data-open] .dock__bar { box-shadow: inset 0 .5px 0 var(--hairline); }

.dock__logo {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}

.dock__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.dock__burger {
  position: relative;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--fill);
  cursor: pointer;
  transition: background-color .15s ease;
}

.dock__burger:hover { background-color: var(--fill-hover); }

.dock__burger span {
  position: absolute;
  left: .6rem;
  right: .6rem;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.dock__burger span:first-child { top: calc(50% - 3px); }
.dock__burger span:last-child  { top: calc(50% + 1.5px); }

.dock[data-open] .dock__burger span:first-child { transform: translateY(2.25px) rotate(45deg); }
.dock[data-open] .dock__burger span:last-child  { transform: translateY(-2.25px) rotate(-45deg); }

.dock__burger:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }

/* Sin desenfoque disponible, el cristal pasa a casi opaco para que se lea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock { background-color: var(--glass-solid); }
}

/* ── RESPONSIVE ── */

@media (max-width: 1200px) {
  .topbar__role { display: none; }
}

@media (max-width: 900px) {
  .stack__label { display: none; }
}

@media (max-width: 479px) {
  .status__date { display: none; }   /* en movil pequeño, solo la hora */
}

/* Movil: los iconos se ordenan en rejilla y las ventanas ocupan la pantalla. */
@media (max-width: 767px) {
  .topbar { padding: .5rem; }
  .pill { min-height: 2.5rem; font-size: .875rem; }
  .topbar__name-btn { padding: .25rem .875rem; font-size: .875rem; }
  .pill--cta { display: none; }
  .theme-toggle { width: 2.5rem; }
  .stack__peek svg { width: 1.5rem; height: 1.5rem; }
  .topbar__right { position: static; }
  .stack { position: static; }
  .stack-card { top: calc(100% - .25rem); right: .5rem; left: .5rem; width: auto; margin-left: 0; }

  .desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 1.75rem .5rem;
    padding: 4.5rem 1rem 7rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .icon,
  .profile { position: static; }

  .icon__visual { width: 4.5rem; height: 4.5rem; }
  .icon__label { font-size: .75rem; white-space: normal; overflow-wrap: anywhere; } /* corta en los _ (<wbr>) */

  .profile {
    --w: min(13rem, 60vw);
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: .5rem;
  }

  .window {
    --win-w: calc(100vw - 1rem);
    --win-h: calc(100dvh - 5.75rem);
  }

  .window--contact { --win-h: calc(100dvh - 5.75rem); }
  .window__bar { grid-template-columns: auto 1fr; }
  .window__title { justify-self: end; }
  .window__meta { display: none; }

  .contact {
    max-height: none;
    padding-top: 2.5rem;
  }

  /* Con una ventana abierta, la barra pasa por detras: la ventana ocupa la
     pantalla y su propia barra hace de cabecera. */
  body[data-window-open] .topbar { z-index: 400; }
  .window--contact .window__scroll { overflow-y: auto; }
}