/* ============================================================================
   Anime Studio - home.css
   Pantalla de inicio (index.php) y galeria de proyectos que pinta
   app/js/ui/home.js.

   Reglas del sistema:
   - Ni un solo color literal: todo sale de tokens.css. Las unicas excepciones
     son las mascaras y los degradados en blanco y negro puros, que solo
     definen opacidad (no color), y las palabras clave del sistema en
     `forced-colors`.
   - Se carga DESPUES de main.css: aqui solo hay lo especifico de la portada.
     Los botones, campos, chips, progress, spinner, empty-state, checker y
     utilidades vienen de main.css y no se redefinen.
   - Estetica de software creativo: superficies oscuras, densidad alta,
     jerarquia tipografica clara y acento contenido.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. VARIABLES LOCALES
   Ambito .home: no ensucian el espacio global de tokens.css.
   ------------------------------------------------------------------------ */
.home {
  --home-max: 1220px;
  --home-gutter: var(--sp-7);
  --home-card-min: 236px;
  --home-radius: var(--r-lg);
  --home-topbar-h: 56px;
  --home-thumb-ratio: 16 / 10;
}

/* ---------------------------------------------------------------------------
   1. PAGINA
   ------------------------------------------------------------------------ */
body.home-body {
  min-height: 100vh;
  /* La portada SI hace scroll vertical: el bloqueo global del editor no aplica. */
  overscroll-behavior-y: auto;
  background: var(--s-0);
}

.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Bloque centrado con el ancho maximo de la pagina. */
.home-topbar,
.home-hero-inner,
.home-projects,
.home-footer {
  width: 100%;
  max-width: var(--home-max);
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

/* ---------------------------------------------------------------------------
   2. BARRA SUPERIOR
   ------------------------------------------------------------------------ */
.home-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--home-topbar-h);
  padding-block: var(--sp-5);
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--r-md);
}

.home-brand:hover {
  text-decoration: none;
  color: var(--fg);
}

.home-brand:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
  outline-offset: 3px;
}

/* Marca: cuadrado con el degradado del acento y un trazo diagonal. */
.home-brand-mark {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: var(--sh-1), var(--sh-inset);
}

.home-brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px 6px;
  border-radius: 2px;
  background: var(--accent-fg);
  opacity: 0.9;
  clip-path: polygon(0 100%, 42% 0, 100% 0, 58% 100%);
}

.home-brand-text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* --- Zona de sesion ----------------------------------------------------- */
.home-auth {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.home-user {
  max-width: 220px;
  gap: var(--sp-3);
}

.home-user-name {
  max-width: 140px;
  font-weight: var(--fw-medium);
}

.home-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
}

.home-offline {
  gap: var(--sp-2);
  color: var(--fg-mute);
  background: var(--s-1);
  border-color: var(--bd-soft);
  cursor: help;
}

/* ---------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------ */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  padding-block: calc(var(--sp-8) * 2.4) calc(var(--sp-8) * 2);
  background:
    radial-gradient(120% 90% at 12% -10%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(90% 80% at 92% 0%, var(--accent-2-soft) 0%, transparent 58%),
    var(--s-0);
}

/* Lienzo de la animacion generativa (ui/home.js). Puramente decorativo. */
.home-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  /* Se difumina hacia abajo para que el texto siempre gane contraste. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.25) 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.25) 78%, rgba(0, 0, 0, 0) 100%);
}

.home-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.home-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-ring);
}

.home-title {
  /* El salto de escala es lo que distingue una portada cuidada de una
     plantilla. El tracking negativo fuerte es lo que hace que un titular
     grande se lea actual en vez de estirado. */
  font-size: clamp(2.6rem, 8.5vw, 5.25rem);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--fg);
  margin: 0;
}

.home-claim {
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  /* Degradado del acento con respaldo solido en navegadores sin background-clip. */
  color: var(--accent-ring);
  background: linear-gradient(100deg, var(--accent-ring) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-claim {
    color: transparent;
  }
}

.home-lede {
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-dim);
}

/* --- Acciones principales ----------------------------------------------- */
.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.home-actions .btn-lg {
  padding-inline: var(--sp-6);
  font-weight: var(--fw-medium);
}

.home-actions .btn-primary {
  box-shadow: var(--sh-2);
}

/* --- Lista de caracteristicas ------------------------------------------- */
.home-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-5);
  padding: 0;
}

.home-feature {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
  white-space: nowrap;
}

.home-feature .icon {
  color: var(--accent-ring);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   4. SECCION DE PROYECTOS
   ------------------------------------------------------------------------ */
.home-projects {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-7) var(--sp-8);
}

.home-projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.home-section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  color: var(--fg);
}

.home-count {
  min-width: 26px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* --- Almacenamiento ------------------------------------------------------ */
.home-storage {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 232px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  background: var(--s-1);
}

.home-storage-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.home-storage-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.home-storage-value {
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  white-space: nowrap;
}

.home-storage-bar {
  width: 92px;
  flex: 0 0 auto;
}

.home-storage.is-tight .progress-bar {
  background: var(--warn);
}

.home-storage-btn {
  flex: 0 0 auto;
}

/* --- Barra de filtros ---------------------------------------------------- */
.home-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--z-dock);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  background: var(--s-0);
  border-bottom: 1px solid var(--bd-soft);
}

.home-search-wrap {
  min-width: 180px;
  max-width: 420px;
}

.home-select-wrap {
  flex: 0 0 auto;
}

.home-select-wrap .select {
  min-width: 156px;
}

/* --- Aviso de carga ------------------------------------------------------ */
.home-loading {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}

.home-loading[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   5. REJILLA DE PROYECTOS
   ------------------------------------------------------------------------ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--home-card-min), 1fr));
  gap: var(--sp-6);
  align-content: start;
}

.project-grid[hidden] {
  display: none;
}

/* --- Tarjeta ------------------------------------------------------------- */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Sin borde: la tarjeta se separa del fondo por superficie, no por marco
     (ver el lenguaje visual en tokens.css). El borde solo aparece al pasar por
     encima, y lo hace en el color de acento para marcar el objetivo. */
  border: 1px solid transparent;
  border-radius: var(--home-radius);
  background: var(--s-1);
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-med),
    transform var(--t-med),
    background-color var(--t-fast);
}

.project-card:hover {
  border-color: var(--accent-soft-hover);
  background: var(--s-2);
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}

.project-card:focus-visible,
.project-card.is-active:focus {
  outline: none;
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 var(--focus-w) var(--accent-ring), var(--sh-2);
}

.project-card:active {
  transform: translateY(0);
}

/* --- Miniatura ----------------------------------------------------------- */
.project-thumb {
  position: relative;
  aspect-ratio: var(--home-thumb-ratio);
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--bd-soft);
  background-color: var(--canvas-bg);
}

/* Respaldo para navegadores sin aspect-ratio (Safari < 15). */
@supports not (aspect-ratio: 16 / 10) {
  .project-thumb {
    height: 0;
    padding-bottom: 62.5%;
  }
}

.project-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--t-med);
}

.project-thumb.has-thumb .project-thumb-img {
  opacity: 1;
}

.project-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--s-hi);
  pointer-events: none;
}

.project-thumb-fallback .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.1;
}

.project-thumb.has-thumb .project-thumb-fallback {
  display: none;
}

/* Contador de fotogramas sobre la miniatura. */
.project-frames {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  padding: 1px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--fg);
  background: var(--s-0);
  border: 1px solid var(--bd);
  opacity: 0.92;
  pointer-events: none;
}

/* Distintivo de origen / sincronizacion. */
.project-origin {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  border: 1px solid var(--bd);
  background: var(--s-0);
  color: var(--fg-dim);
  opacity: 0.94;
  pointer-events: none;
}

.project-origin.sync-synced {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--ok-soft);
}

.project-origin.sync-pending {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--warn-soft);
}

.project-origin.sync-remote {
  color: var(--accent-ring);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* --- Cuerpo -------------------------------------------------------------- */
.project-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  min-width: 0;
}

.project-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}

.project-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.project-more {
  flex: 0 0 auto;
  margin: -4px -6px 0 0;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.project-card:hover .project-more,
.project-card:focus-within .project-more,
.project-card.is-active .project-more,
.project-more:focus-visible {
  opacity: 1;
}

.project-meta,
.project-time {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

.project-time {
  font-size: var(--fs-xs);
}

/* Punto de aviso cuando hay cambios sin subir al servidor. */
.project-card.is-dirty .project-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--warn);
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   6. VISTA DE LISTA
   ------------------------------------------------------------------------ */
.project-grid[data-view="list"] {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.project-grid[data-view="list"] .project-card {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-md);
}

.project-grid[data-view="list"] .project-card:hover {
  transform: none;
}

.project-grid[data-view="list"] .project-thumb {
  width: 84px;
  min-width: 84px;
  flex: 0 0 auto;
  aspect-ratio: var(--home-thumb-ratio);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
}

@supports not (aspect-ratio: 16 / 10) {
  .project-grid[data-view="list"] .project-thumb {
    height: 52px;
    padding-bottom: 0;
  }
}

.project-grid[data-view="list"] .project-frames,
.project-grid[data-view="list"] .project-thumb-fallback .icon {
  display: none;
}

.project-grid[data-view="list"] .project-origin {
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
}

.project-grid[data-view="list"] .project-origin .icon {
  width: 10px;
  height: 10px;
}

.project-grid[data-view="list"] .project-info {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-4) 0 0;
}

.project-grid[data-view="list"] .project-head {
  flex: 1 1 42%;
  align-items: center;
}

.project-grid[data-view="list"] .project-more {
  order: 3;
}

.project-grid[data-view="list"] .project-meta {
  flex: 1 1 32%;
  text-align: right;
}

.project-grid[data-view="list"] .project-time {
  flex: 0 0 auto;
  min-width: 130px;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   7. ESQUELETOS DE CARGA
   ------------------------------------------------------------------------ */
.project-card.is-skeleton {
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  background: var(--s-1);
}

.project-card.is-skeleton:hover {
  transform: none;
  border-color: var(--bd);
  background: var(--s-1);
  box-shadow: none;
}

.skeleton-block,
.skeleton-line {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--s-2) 0%,
    var(--s-3) 40%,
    var(--s-2) 80%
  );
  background-size: 260% 100%;
  animation: home-skeleton 1.5s var(--ease) infinite;
}

.skeleton-block {
  aspect-ratio: var(--home-thumb-ratio);
  width: 100%;
  border-radius: 0;
}

@supports not (aspect-ratio: 16 / 10) {
  .skeleton-block {
    height: 0;
    padding-bottom: 62.5%;
  }
}

.skeleton-line {
  height: 10px;
  width: 100%;
}

.skeleton-line-lg {
  height: 13px;
  width: 72%;
}

.skeleton-line-sm {
  width: 46%;
}

@keyframes home-skeleton {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* ---------------------------------------------------------------------------
   8. ESTADO VACIO
   ------------------------------------------------------------------------ */
#project-empty {
  max-width: 520px;
  padding-block: calc(var(--sp-8) * 2);
  border: 1px dashed var(--bd);
  border-radius: var(--home-radius);
  background: var(--s-1);
}

#project-empty[hidden] {
  display: none;
}

#project-empty .empty-icon {
  width: 52px;
  height: 52px;
  color: var(--accent-ring);
  opacity: 0.55;
}

#project-empty.is-filtered {
  border-style: solid;
  background: transparent;
}

/* ---------------------------------------------------------------------------
   9. ARRASTRAR Y SOLTAR
   ------------------------------------------------------------------------ */
.home-drop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: var(--s-0);
  /* El fondo se ve a traves: capa de enfasis, no pantalla opaca. */
  opacity: 0.97;
  animation: home-drop-in 140ms var(--ease-out);
}

.home-drop[hidden] {
  display: none;
}

.home-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: min(560px, 100%);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  border: 2px dashed var(--accent);
  border-radius: calc(var(--home-radius) * 2);
  background: var(--accent-soft);
  box-shadow: var(--sh-3);
}

.home-drop-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-ring);
  stroke-width: 1.4;
}

.home-drop-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}

.home-drop-text {
  font-size: var(--fs-md);
  color: var(--fg-dim);
  max-width: 44ch;
}

@keyframes home-drop-in {
  from { opacity: 0; }
  to   { opacity: 0.97; }
}

/* ---------------------------------------------------------------------------
   10. LISTAS DE DETALLE (dialogos de home.js)
   ------------------------------------------------------------------------ */
.home-detail-list {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  font-size: var(--fs-md);
}

.home-detail-list dt {
  color: var(--fg-mute);
  font-size: var(--fs-sm);
  align-self: center;
}

.home-detail-list dd {
  margin: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.home-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bd-soft);
}

/* ---------------------------------------------------------------------------
   11. PIE
   ------------------------------------------------------------------------ */
.home-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--bd-soft);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}

.home-footer-brand {
  font-weight: var(--fw-semibold);
  color: var(--fg-dim);
}

.home-footer-version {
  color: var(--fg-mute);
}

.home-footer-link {
  color: var(--accent-ring);
}

.home-noscript {
  padding: var(--sp-6);
  margin: var(--sp-6);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: var(--fg);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .home {
    --home-gutter: var(--sp-6);
    --home-card-min: 208px;
  }

  .home-storage {
    min-width: 200px;
  }
}

@media (max-width: 760px) {
  .home {
    --home-gutter: var(--sp-5);
    --home-card-min: 100%;
  }

  .home-hero {
    padding-block: var(--sp-7);
  }

  .home-hero-inner {
    gap: var(--sp-4);
  }

  .home-lede {
    font-size: var(--fs-md);
  }

  /* Movil: acciones grandes, a lo ancho y faciles de acertar. */
  .home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    width: 100%;
  }

  .home-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--ctrl-h-touch);
  }

  .home-actions .btn-primary {
    grid-column: 1 / -1;
  }

  .home-features {
    gap: var(--sp-3) var(--sp-5);
  }

  .home-feature {
    font-size: var(--fs-xs);
  }

  .home-projects-head {
    gap: var(--sp-3);
  }

  .home-storage {
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .home-storage-bar {
    flex: 1 1 auto;
    width: auto;
  }

  .home-toolbar {
    gap: var(--sp-3);
  }

  .home-search-wrap {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }

  .home-select-wrap {
    flex: 1 1 calc(50% - var(--sp-3));
  }

  .home-select-wrap .select {
    width: 100%;
    min-width: 0;
  }

  /* Una sola columna: las tarjetas mandan y el titulo crece. */
  .project-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .project-name {
    font-size: var(--fs-lg);
  }

  /* Sin hover fiable: el menu de la tarjeta siempre visible. */
  .project-more {
    opacity: 1;
  }

  .project-grid[data-view="list"] .project-info {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .project-grid[data-view="list"] .project-meta,
  .project-grid[data-view="list"] .project-time {
    text-align: left;
    min-width: 0;
  }

  .home-footer {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .home-actions {
    grid-template-columns: 1fr;
  }

  .home-select-wrap {
    flex: 1 1 100%;
  }

  .home-user-name {
    display: none;
  }
}

/* Puntero grueso: objetivos tactiles grandes aunque la ventana sea ancha. */
@media (pointer: coarse) {
  .project-more {
    opacity: 1;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    margin: -8px -10px 0 0;
  }

  .project-card {
    /* La pulsacion larga abre el menu contextual: sin seleccion de texto. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .home-storage-btn {
    min-height: var(--ctrl-h-sm-cur);
  }
}

/* ---------------------------------------------------------------------------
   13. MOVIMIENTO REDUCIDO Y ALTO CONTRASTE
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .project-card:hover {
    transform: none;
  }

  .skeleton-block,
  .skeleton-line {
    animation: none;
    background: var(--s-2);
  }

  .home-drop {
    animation: none;
  }

  .project-thumb-img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .project-card {
    border: 1px solid CanvasText;
  }

  .project-card:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .home-brand-mark,
  .home-avatar {
    background: Highlight;
  }

  .home-hero-canvas {
    display: none;
  }

  .project-origin,
  .project-frames {
    border-color: CanvasText;
  }
}

/* Impresion: la portada se imprime como una lista limpia. */
@media print {
  .home-hero-canvas,
  .home-toolbar,
  .home-drop,
  .project-more,
  .home-auth {
    display: none !important;
  }

  .project-card {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ===================================================================
   CABECERA DE LA PAGINA «MIS PROYECTOS» (projects.php)

   No lleva hero: esta pagina es una herramienta, no un escaparate. La
   jerarquia la da el tamano del titulo y el aire, no una franja de color.
   =================================================================== */
.page-head {
  padding-block: var(--sp-8) var(--sp-6);
  background:
    radial-gradient(90% 140% at 8% -40%, var(--accent-soft) 0%, transparent 60%),
    var(--s-0);
}

.page-head-inner {
  width: min(var(--home-max), 100%);
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

.page-crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
  margin-bottom: var(--sp-4);
}

.page-crumbs a {
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--t-fast);
}

.page-crumbs a:hover {
  color: var(--fg);
  text-decoration: none;
}

.page-crumb-sep {
  opacity: 0.5;
}

.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.page-title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* En la pagina de proyectos la cabecera de seccion sobra ENTERA: el titulo ya
   lo da la cabecera de pagina, y dejar solo el contador ahi deja una pastilla
   con un numero suelto sin nada que lo explique. */
.home-page-projects .home-projects > .home-projects-head > #home-projects-title,
.home-page-projects .home-projects > .home-projects-head > #home-count {
  display: none;
}

/* La cabecera de seccion se queda, pero solo con el almacenamiento: el titulo
   y el contador los da ya la cabecera de pagina, y dejarlos duplicaria. */
.home-page-projects .home-projects > .home-projects-head {
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}

@media (max-width: 640px) {
  .page-head { padding-block: var(--sp-6) var(--sp-5); }
  .page-head-row { align-items: stretch; }
  .page-head-actions .btn { flex: 1 1 auto; }
}