/* ============================================================
   Estilos de página del coloreador de mandalas
   ------------------------------------------------------------
   Emplea únicamente tokens definidos en tokens.css.
   Diseño mobile-first: la base es para móvil y los refinamientos
   de pantallas medianas/grandes se declaran con min-width.
   ============================================================ */
@import 'tokens.css';

/* ------------------------------------------------------------
   En móvil el documento se desplaza verticalmente (scroll de página);
   solo se recorta el desbordamiento horizontal.
   ------------------------------------------------------------ */
html,
body {
  overflow-x: clip;
}

/* ------------------------------------------------------------
   Reset básico de caja y márgenes
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   Base del documento
   ------------------------------------------------------------ */
body {
  /* Columna flexible que permite centrar el contenedor principal. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;

  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
}

/* ------------------------------------------------------------
   Enfoque visible inmediato (nunca animado)
   ------------------------------------------------------------ */
:focus-visible {
  outline: var(--ancho-enfoque) solid var(--color-focus);
  outline-offset: var(--desfase-enfoque);
}

/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */

/* Texto visible solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Contenedor principal (macroestructura Workbench)
   ------------------------------------------------------------
   En móvil fluye en columna y se desplaza con la página (scroll
   en body). En escritorio la rejilla de dos columnas que ocupa el
   viewport se define en el media de min-width.
   ------------------------------------------------------------ */
.taller {
  width: 100%;
  max-width: var(--ancho-max);
  /* Centra horizontalmente; en móvil no fija el alto (scroll de página). */
  margin: 0 auto;
  padding: 0 var(--espacio-lateral) var(--space-4xl);

  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* ------------------------------------------------------------
   Panel
   ------------------------------------------------------------ */
.panel {
  background: var(--color-paper);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  /* Permite que los paneles se encogan dentro de la rejilla. */
  min-width: 0;
}

/* ------------------------------------------------------------
   Panel de herramientas (nav)
   ------------------------------------------------------------
   Alto natural (auto): en móvil el contenido fluye y la página hace
   scroll; el pie queda anclado al fondo del panel.
   ------------------------------------------------------------ */
.panel--herramientas {
  display: flex;
  flex-direction: column;
  /* En móvil: sin borde exterior, separado del borde superior del
     viewport y con línea divisora inferior hacia la section. */
  margin-top: var(--espacio-lateral);
  border: 0;
  border-bottom: var(--rule-hairline);
}

/* Identidad: título display y subtítulo monoespaciado. */
.panel__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.panel__subtitulo {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Separación entre grupos de herramientas (regla superior). */
.panel__subtitulo + .herramientas__grupo,
.herramientas__grupo + .herramientas__grupo {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hairline);
}

/* Rótulo de cada grupo de herramientas. */
.herramientas__caption {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Selector de plantilla: altura de diana táctil (44 px). */
.herramientas__select {
  min-height: var(--tamano-toque);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hairline);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  cursor: pointer;
}

/* Paleta de colores predefinidos: rejilla adaptable al ancho. */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tamano-toque));
  gap: var(--space-2xs);
}

.paleta__color {
  width: var(--tamano-toque);
  height: var(--tamano-toque);
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  cursor: pointer;
}

.paleta__color:hover {
  border-color: var(--color-neutral);
}

/* Ficha de color seleccionada: anillo de acento. */
.paleta__color--activo {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 2px var(--color-paper) inset,
    0 0 0 1px var(--color-accent);
}

/* Selector de color personalizado (etiqueta + input[type=color]). */
.herramientas__personalizado {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.herramientas__color {
  width: var(--tamano-toque);
  height: var(--tamano-toque);
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Controla el color de acento de los controles nativos. */
.herramientas__select,
.herramientas__color {
  accent-color: var(--color-accent);
}

/* Botones de acción: rejilla adaptable con dianas de 44 px. */
.herramientas__acciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tamano-toque));
  gap: var(--space-xs);
}

.herramienta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamano-toque);
  height: var(--tamano-toque);
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-size: 1.25rem;
}

.herramienta:hover:not(:disabled) {
  background: var(--color-paper-2);
  border-color: var(--color-neutral);
}

.herramienta:active:not(:disabled) {
  background: var(--color-paper-3);
}

.herramienta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Botón activo (p. ej. borrador encendido). */
.herramienta--activo {
  background: var(--color-paper-2);
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}

/* Pie del panel (Web Mandala).
   En móvil su regla superior conserva la misma separación que los
   demás grupos; en escritorio el margin-top:auto la ancla al fondo. */
.panel__pie {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: var(--rule-hairline);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ------------------------------------------------------------
   Lienzo (superficie de trabajo)
   ------------------------------------------------------------
   En móvil fluye tras el nav y la página hace scroll; sin borde
   exterior de sección.
   ------------------------------------------------------------ */
.panel--lienzo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border: 0;
}

.lienzo {
  margin: 0;
}

.lienzo__superficie {
  background: var(--color-paper-2);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* SVG del mandala: ocupa el ancho disponible manteniendo la proporción. */
.lienzo__svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
  cursor: pointer;
}

.lienzo__caption {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

/* Barra de estado accesible (reserva altura para evitar saltos). */
.estado {
  min-height: var(--space-lg);
  margin: var(--space-sm) 0 0;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============================================================
   Pantallas medianas y grandes (mobile-first, min-width)
   ------------------------------------------------------------
   Dos columnas: herramientas + lienzo, con ambos paneles de la
   misma altura ocupando el 100 % del alto del viewport. Cada
   panel gestiona su propio desplazamiento para no recortar
   contenido en pantallas cortas.
   ============================================================ */
@media (min-width: 40rem) {
  /* En escritorio el workbench es de altura fija: el documento no
     scrolla y cada panel gestiona su propio desplazamiento. */
  html,
  body {
    overflow: hidden;
  }

  .taller {
    display: grid;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: 'herramientas lienzo';
    gap: var(--space-2xl);
  }

  .panel--herramientas {
    grid-area: herramientas;
    /* Restaura el borde completo y sin separación superior en escritorio. */
    margin-top: 0;
    border: var(--rule-hairline);
    /* Desplazamiento propio cuando el contenido excede la altura. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    /* Esquinas rectas al pegar al borde del viewport. */
    border-radius: 0;
  }

  .panel--lienzo {
    grid-area: lienzo;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    /* Esquinas rectas al pegar al borde del viewport. */
    border-radius: 0;
  }

  /* El pie vuelve a anclarse al fondo del nav en escritorio. */
  .panel__pie {
    margin-top: auto;
  }

  /* La figura se centra con margen automático: permite hacer scroll
     correcto hasta el inicio cuando el contenido supera la altura. */
  .panel--lienzo .lienzo {
    width: 100%;
    margin: auto;
  }

  /* El mandala conserva un tamaño cómodo y se centra en su panel. */
  .lienzo__superficie {
    width: 100%;
    max-width: var(--ancho-mandala);
    margin-inline: auto;
  }

  /* Leyenda y estado se alinean con el ancho del mandala. */
  .lienzo__caption,
  .estado {
    max-width: var(--ancho-mandala);
    margin-inline: auto;
  }
}

/* ============================================================
   Impresión
   ------------------------------------------------------------
   La hoja imprime únicamente el mandala coloreado, centrado
   sobre una hoja en blanco, sin el panel de herramientas.
   ============================================================ */
@page {
  size: auto;
  margin: 12mm;
}

@media print {
  html,
  body {
    overflow: visible;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: var(--color-imprimir);
  }

  /* Se oculta todo lo que no es el mandala en sí. */
  .panel--herramientas,
  .estado,
  .lienzo__caption {
    display: none;
  }

  .taller {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: none;
    margin: 0;
    padding: 12mm;
    gap: 0;
  }

  .panel--lienzo {
    border: 0;
    padding: 0;
    width: auto;
    flex: 0 0 auto;
  }

  .lienzo__superficie {
    border: 0;
    padding: 0;
    background: var(--color-imprimir);
    width: min(100%, 176mm);
  }
}