/*
 * boton-flecha.css — "botón outline con flecha" (plan-segmentacion.md §2.7).
 * Caja de texto (borde) + cuadrado sólido adosado a la derecha con chevron.
 *
 * Variante implementada acá: **sobre foto oscura** — caja y cuadrado en beige, chevron negro.
 * Confirmado por re-medición P12/P13 (histograma de color) y ahora también por rect vectorial
 * directo del botón "Ver servicios" de `inicio` (_dev/registro-decisiones.md, 2026-08-14):
 * caja 158×46px + cuadrado 35×46px = 191px de ancho total, 46px de alto.
 *
 * La variante sobre fondo claro (café-claro/texto café, ícono blanco — servicios "Cotizar
 * servicio") se agrega cuando se maquete `servicios`, con su propio modificador de clase.
 */

.gyo-boton-flecha {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  font-size: 18px;
  color: var(--color-beige);
  text-decoration: none;
}

.gyo-boton-flecha__texto {
  display: flex;
  align-items: center;
  padding-inline: var(--gyo-space-4);
  border: 1px solid var(--color-beige);
  border-right: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Fase 3, Parte B (2026-08-18): estado hover. Sin dato del PDF (no hay estados dibujados, ver
   CLAUDE.md §6/puntos-abiertos.md Bloque E) — criterio propio, no vinculante al píxel. Familia
   "outline que se rellena": la caja de texto (hoy borde/transparente) pasa a tener el mismo fondo
   sólido que ya tiene el cuadrado del ícono, y el texto pasa a ser del mismo color que ya usa el
   ícono adentro de ese cuadrado — el botón entero se ve como un solo bloque sólido en vez de
   mitad-outline/mitad-relleno. Mismo criterio en las 3 variantes, el color cambia porque cada
   variante ya tenía un cuadrado de un color distinto. */
.gyo-boton-flecha:hover .gyo-boton-flecha__texto {
  background-color: var(--color-beige);
  border-color: var(--color-beige);
  color: var(--color-negro-texto);
}

.gyo-boton-flecha__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  background-color: var(--color-beige);
  color: var(--color-negro-texto); /* chevron negro, confirmado por muestreo de píxel */
}

.gyo-boton-flecha__icono svg {
  width: 14px;
  height: 14px;
}

/* Variante sobre fondo claro (plan-segmentacion.md §2.7: "Ver más proyectos" de `inicio`,
   "Cotizar servicio" de `servicios`) — caja/borde y cuadrado café-claro, ícono BLANCO (no negro).
   Medido en "Ver más proyectos" (_dev/registro-decisiones.md, 2026-08-14): caja 196×46,
   cuadrado 35×46, mismo patrón de borde-sin-relleno + cuadrado sólido que la variante oscura. */
.gyo-boton-flecha--claro {
  color: var(--color-cafe-claro);
}

.gyo-boton-flecha--claro .gyo-boton-flecha__texto {
  border-color: var(--color-cafe-claro);
}

.gyo-boton-flecha--claro .gyo-boton-flecha__icono {
  background-color: var(--color-cafe-claro);
  color: #FFFFFF;
}

/* Mismo criterio de "outline que se rellena", con el color del cuadrado de esta variante
   (café-claro/blanco) en vez del de la variante oscura (beige/negro) de arriba. */
.gyo-boton-flecha--claro:hover .gyo-boton-flecha__texto {
  background-color: var(--color-cafe-claro);
  border-color: var(--color-cafe-claro);
  color: #FFFFFF;
}

/* Tercera variante, solo en `contacto` ("Enviar", dentro del formulario) — plan-segmentacion.md
   §2.7: caja beige SÓLIDA (no borde/transparente como las otras 2 variantes) + texto NEGRO +
   cuadrado café-claro + ícono blanco. Combinación distinta a las otras 2, confirmada por
   muestreo de píxel directo (2026-08-17): caja `#EBE2D8` (≈beige), texto negro, cuadrado
   `#A07A4A` (≈café-claro). */
.gyo-boton-flecha--formulario {
  color: var(--color-negro-texto);
  border: none;
  background: none;
  font-family: inherit; /* el HTML usa un <button>, que no hereda tipografía por defecto */
  cursor: pointer; /* el HTML usa un <button>, que no siempre trae cursor de puntero por defecto
    (a diferencia de los <a> de las otras 2 variantes) */
}

.gyo-boton-flecha--formulario .gyo-boton-flecha__texto {
  border: none;
  background-color: var(--color-beige);
}

.gyo-boton-flecha--formulario .gyo-boton-flecha__icono {
  background-color: var(--color-cafe-claro);
  color: #FFFFFF;
}

/* Acá la caja ya nace sólida (beige, no outline) — el hover igual sigue el mismo criterio de
   familia (adoptar el color del cuadrado), solo que el "antes" ya era un relleno en vez de un
   borde transparente. Mismo destino que `--claro`: café-claro/blanco, el color del cuadrado de
   esta variante. */
.gyo-boton-flecha--formulario:hover .gyo-boton-flecha__texto {
  background-color: var(--color-cafe-claro);
  color: #FFFFFF;
}