/* ============================================================================
   Motivos · el aire visual de cada tipo de cocina (templates/_comun).

   Lo elige la IA junto con la plantilla y la portada (lib/motivos.ts, que es
   donde está la lista con lo que significa cada uno). Aquí solo va el PATRÓN
   de cada motivo, en blanco semitransparente, pensado para ir encima de un
   fondo de color: la cinta, la banda de la frase y el pie. La plantilla pone
   `data-motivo` en el body y usa `var(--motivo-patron)` donde toca.

   Geometría propia, dibujada a mano en SVG: nada copiado de ninguna parte.
   ========================================================================== */

/* Clásico: filete doble fino, casi nada. */
body[data-motivo="clasico"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Cpath d='M0 6h48M0 11h48' stroke='%23fff' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E");
  --motivo-tam: 48px 18px;
}

/* Andino: escalones y zigzag, como un tejido de la sierra. */
body[data-motivo="andino"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 40l12-12 12 12 12-12 12 12' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='3'/%3E%3Cpath d='M0 16h8v-8h8v8h8v-8h8v8h8v-8h8' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='3'/%3E%3C/svg%3E");
  --motivo-tam: 48px 48px;
}

/* Mexicano: banderines de fiesta colgados. */
body[data-motivo="mexicano"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M0 0h16l-8 14zM16 0h16l-8 14zM32 0h16l-8 14z' fill='%23fff' fill-opacity='.22'/%3E%3Ccircle cx='8' cy='22' r='2' fill='%23fff' fill-opacity='.35'/%3E%3Ccircle cx='24' cy='22' r='2' fill='%23fff' fill-opacity='.35'/%3E%3Ccircle cx='40' cy='22' r='2' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E");
  --motivo-tam: 48px 28px;
}

/* Castizo: azulejo de rombos con el cuadradito en medio. */
body[data-motivo="castizo"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 4l16 16-16 16L4 20z' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='2'/%3E%3Crect x='17' y='17' width='6' height='6' fill='%23fff' fill-opacity='.34'/%3E%3C/svg%3E");
  --motivo-tam: 40px 40px;
}

/* Marinero: ondas. */
body[data-motivo="marinero"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 12q12-10 24 0t24 0' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='2.5'/%3E%3C/svg%3E");
  --motivo-tam: 48px 24px;
}

/* Trattoria: cuadros vichy muy suaves. */
body[data-motivo="trattoria"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='16' height='16' fill='%23fff' fill-opacity='.14'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23fff' fill-opacity='.14'/%3E%3C/svg%3E");
  --motivo-tam: 32px 32px;
}

/* Brasa: rayado de parrilla en diagonal. */
body[data-motivo="brasa"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M-4 4l8-8M0 16L16 0M12 20l8-8' stroke='%23fff' stroke-opacity='.3' stroke-width='3'/%3E%3C/svg%3E");
  --motivo-tam: 16px 16px;
}

/* Oriental: arcos de ola, uno tras otro. */
body[data-motivo="oriental"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 24a12 12 0 0 1 24 0M24 24a12 12 0 0 1 24 0M12 12a12 12 0 0 1 24 0M-12 12a12 12 0 0 1 24 0M36 12a12 12 0 0 1 24 0' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E");
  --motivo-tam: 48px 24px;
}

/* Moderno: retícula de puntos. */
body[data-motivo="moderno"] {
  --motivo-patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%23fff' fill-opacity='.32'/%3E%3C/svg%3E");
  --motivo-tam: 14px 14px;
}

/* La franja decorativa: una banda del color de la casa con el patrón encima.
   Las plantillas la pintan con `::before` en el pie y donde quieran. */
.motivo-franja,
.motivo-franja::before {
  background-color: var(--acento, #a33);
  background-image: var(--motivo-patron, none);
  background-size: var(--motivo-tam, auto);
}