/* La pantalla del editor — Growmate
 *
 * Herramienta del CLIENTE, no una landing, y con una regla de color propia:
 * la cara es de Growmate pero en sobrio. El azul de marca aparece en el mate
 * del logotipo y en el aro del foco, y en ningún sitio más; todo lo demás es
 * gris y blanco. El motivo no es estético: lo único que tiene que tener
 * color aquí es el contenido del cliente —sus fotos, su texto—, porque es lo
 * que está mirando para decidir. Un botón azul competiría con su portada.
 *
 * Los tonos, las tipografías y la trama son los mismos del tablero
 * (Proyectos/tablero/public/estilo.css). Son copias, no un archivo
 * compartido: si allá se retocan, aquí también.
 */

:root {
  --marca:       #096ACC;
  --sobre-marca: #FFFFFF;

  --fondo:       #F6F7F9;
  --tarjeta:     #FFFFFF;
  --tinta:       #101720;
  --tinta-suave: #55606E;
  --linea:       #E2E6EC;
  --apagado:     #C3CBD6;
  --hueco:       #EDF0F4;   /* el fondo de un campo, y el de una foto que falta */

  /* Los tres avisos. Se distinguen por la barra de la izquierda y por el
     texto, nunca solo por el color: una advertencia que solo es ámbar no
     existe para quien no distingue el ámbar. */
  --ojo:      #B45309;
  --ojo-piel: #FEF6EC;
  /* La tinta que va ENCIMA del ámbar. Cambia con el tema: en oscuro el
     ámbar sube tanto que el blanco encima deja de leerse. */
  --sobre-ojo: #FFFFFF;
  --mal:      #B4241F;
  --mal-piel: #FDF1F0;
  --bien:     #1B7A4B;

  --radio:    12px;
  --radio-lg: 20px;
  --sombra:   0 1px 2px rgba(16,23,32,.05), 0 8px 24px rgba(16,23,32,.06);

  --fuente:         'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-display: 'Outfit', var(--fuente);

  --suave: cubic-bezier(.23, 1, .32, 1);

  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 5.2 C17.9 5.2 22.2 8.6 23.7 14 C25 18.3 24.2 22.9 21.1 25.2 C18.5 26.9 7.5 26.9 4.9 25.2 C1.7 22.9 1 18.3 2.3 14 C3.8 8.6 8.1 5.2 13 5.2 Z' fill='rgba(9,106,204,.026)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:       #0B1017;
    --tarjeta:     #141B24;
    --tinta:       #E8EDF3;
    --tinta-suave: #97A3B2;
    --linea:       #232C38;
    --apagado:     #3A4553;
    --hueco:       #1A222C;

    --ojo:      #E9A23B;
    --ojo-piel: #241C0F;
    --sobre-ojo: #0B1017;
    --mal:      #F2867F;
    --mal-piel: #251413;
    --bien:     #5FC38E;

    --marca:    #4C9BEA;
    --sombra:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 5.2 C17.9 5.2 22.2 8.6 23.7 14 C25 18.3 24.2 22.9 21.1 25.2 C18.5 26.9 7.5 26.9 4.9 25.2 C1.7 22.9 1 18.3 2.3 14 C3.8 8.6 8.1 5.2 13 5.2 Z' fill='rgba(120,175,240,.035)'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganar siempre. Vale la pena la regla fuerte: varias de
   las piezas que se esconden y se enseñan —la barra de guardar, el pie de un
   campo— son `flex` o `grid`, y eso pisa al `display:none` que trae `hidden`
   de fábrica. El fallo sale como una barra que dice «0 cambios sin
   guardar». */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--fondo);
  background-image: var(--trama);
  background-size: 19px 19px;
  color: var(--tinta);
  font: 400 1rem/1.55 var(--fuente);
  -webkit-font-smoothing: antialiased;
  /* Hueco para la barra de guardar, que va pegada abajo. */
  padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Encabezado ──────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  padding: calc(1rem + env(safe-area-inset-top)) 1.1rem 1rem;
  border-bottom: 1px solid var(--linea);
  background: var(--tarjeta);
}

.logo {
  margin: 0;
  font: 600 1.25rem/1 var(--fuente-display);
  letter-spacing: -.015em;
}

/* El mate ES la letra «o», y va DIBUJADO con dos tintas, no recortado con
 * una máscara: una máscara solo lleva contorno y el mate sale sin ojos. Los
 * ojos van SIEMPRE blancos, igual que en el sitio grande.
 *
 * La silueta y la posición de los ojos son las mismas que en `Mate.astro`
 * del sitio de Growmate, y las mismas que en el tablero. Ya van tres copias
 * del mismo dibujo: si algún día se retoca el original, hay que retocar las
 * tres, incluido `public/mate.svg` de aquí. */
.logo__mate {
  display: inline-block;
  width: .82em; height: .76em;
  margin: 0 .01em;
  vertical-align: -.03em;
}
.logo__cuerpo { fill: var(--marca); }
.logo__ojo    { fill: #FFFFFF; }

.barra__sitio {
  margin: 0;
  color: var(--tinta-suave);
  font-size: .95rem;
}
.barra__sitio::before { content: '·'; margin-right: .6rem; color: var(--apagado); }

.barra__acciones {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.pastilla {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: 500 .88rem var(--fuente);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--suave), border-color .2s var(--suave);
}
.pastilla:hover { background: var(--fondo); border-color: var(--apagado); }
.pastilla--salir { color: var(--tinta-suave); }

.barra__sitios {
  padding: .45rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: 500 .88rem var(--fuente);
}

/* ── El reparto de la pantalla ───────────────────────────────────────── */

.hoja {
  display: grid;
  grid-template-columns: 17rem minmax(0, 40rem);
  gap: 2.4rem;
  justify-content: center;
  padding: 2rem 1.1rem 0;
}

.cargando { margin: 3rem auto; color: var(--tinta-suave); }

/* ── Menú de secciones ───────────────────────────────────────────────── */

.menu {
  align-self: start;
  position: sticky;
  top: 1.2rem;
  max-height: calc(100vh - 3rem);
  overflow: auto;
}

.menu__pagina { margin: 0 0 1.4rem; }

.menu__titulo {
  margin: 0 0 .45rem .8rem;
  font: 500 .72rem/1 var(--fuente);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.menu__boton {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 400 .95rem/1.3 var(--fuente);
  text-align: left;
  cursor: pointer;
}
.menu__boton:hover { background: var(--tarjeta); }
.menu__boton[aria-current='true'] {
  background: var(--tarjeta);
  border-color: var(--linea);
  font-weight: 600;
  box-shadow: var(--sombra);
}

/* Cuántos campos de esa sección están sin guardar. Lleva el número Y la
   palabra en el título, para que no sea solo un punto de color. */
.menu__pendientes {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--ojo);
  color: var(--sobre-ojo);
  font: 600 .72rem/1.35rem var(--fuente);
  text-align: center;
}

/* ── La sección abierta ──────────────────────────────────────────────── */

.seccion { min-width: 0; }

.seccion__cabeza { margin-bottom: 1.6rem; }

.seccion__donde {
  margin: 0 0 .3rem;
  font: 500 .72rem/1 var(--fuente);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.seccion__nombre {
  margin: 0;
  font: 600 1.7rem/1.2 var(--fuente-display);
  letter-spacing: -.02em;
}

.seccion__ayuda { margin: .5rem 0 0; color: var(--tinta-suave); }

.seccion__ir {
  display: inline-block;
  margin-top: .8rem;
  color: var(--tinta-suave);
  font-size: .9rem;
}

/* ── Un campo ────────────────────────────────────────────────────────── */

.campo {
  padding: 1.1rem 1.2rem;
  margin-bottom: .8rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}

.campo--tocado { border-color: var(--ojo); }
.campo--mal    { border-color: var(--mal); }

.campo__cabeza {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .45rem;
}

.campo__nombre {
  font: 600 .98rem/1.3 var(--fuente);
  color: var(--tinta);
}

.campo__marca {
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--ojo-piel);
  color: var(--ojo);
  font: 600 .7rem/1.5 var(--fuente);
  white-space: nowrap;
}

.campo__cuenta {
  margin-left: auto;
  color: var(--tinta-suave);
  font: 400 .78rem var(--fuente);
  font-variant-numeric: tabular-nums;
}
.campo__cuenta--pasado { color: var(--mal); font-weight: 600; }

.campo__ayuda { margin: .45rem 0 0; color: var(--tinta-suave); font-size: .87rem; }

.campo__mal {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--mal);
  background: var(--mal-piel);
  color: var(--mal);
  font-size: .87rem;
  border-radius: 0 6px 6px 0;
}

.campo__pie { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }

.enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font: 500 .85rem var(--fuente);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace:hover { color: var(--tinta); }

input[type='text'], input[type='tel'], input[type='email'], textarea, select.control {
  display: block;
  width: 100%;
  padding: .7rem .8rem;
  font: 400 1rem/1.5 var(--fuente);
  color: var(--tinta);
  background: var(--hueco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: vertical; min-height: 5.5rem; }
textarea.alto { min-height: 9rem; }
::placeholder { color: var(--tinta-suave); opacity: .75; }

/* ── Interruptor ─────────────────────────────────────────────────────── */

/* La bola y el carril se turnan los tonos: apagado va carril claro con bola
   oscura, y encendido al revés. Un solo color para la bola se pierde contra
   uno de los dos carriles, y en oscuro se pierde justo en el estado
   encendido, que es el que decide a quién le llegan las cotizaciones. */
.palanca { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.palanca input { position: absolute; opacity: 0; width: 0; height: 0; }

.palanca__via {
  flex: none;
  width: 2.9rem; height: 1.7rem;
  border: 1px solid var(--apagado);
  border-radius: 999px;
  background: var(--linea);
  transition: background-color .25s var(--suave), border-color .25s var(--suave);
  position: relative;
}
.palanca__via::after {
  content: '';
  position: absolute; inset: 2px auto 2px 2px;
  width: 1.2rem;
  border-radius: 999px;
  background: var(--tinta-suave);
  transition: transform .25s var(--suave), background-color .25s var(--suave);
}
.palanca input:checked + .palanca__via {
  background: var(--tinta);
  border-color: var(--tinta);
}
.palanca input:checked + .palanca__via::after {
  background: var(--tarjeta);
  transform: translateX(1.15rem);
}
.palanca input:focus-visible + .palanca__via { outline: 2px solid var(--marca); outline-offset: 2px; }
.palanca__si { color: var(--tinta-suave); font-size: .9rem; }

/* ── Galería de iconos ───────────────────────────────────────────────── */

.iconos { display: flex; flex-wrap: wrap; gap: .5rem; }

.icono {
  display: grid;
  place-items: center;
  gap: .3rem;
  width: 5.2rem;
  padding: .7rem .3rem .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hueco);
  cursor: pointer;
  text-align: center;
}
.icono input { position: absolute; opacity: 0; width: 0; height: 0; }
.icono svg { width: 1.7rem; height: 1.7rem; stroke: var(--tinta); stroke-width: 1.7;
             fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icono span { font-size: .72rem; color: var(--tinta-suave); line-height: 1.25; }
.icono:has(input:checked) { border-color: var(--tinta); background: var(--tarjeta); box-shadow: var(--sombra); }
.icono:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ── Foto ────────────────────────────────────────────────────────────── */

.foto { display: flex; gap: 1rem; align-items: flex-start; }

.foto__vista {
  flex: none;
  width: 8.5rem; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--hueco);
  border: 1px solid var(--linea);
}

.foto__hueco {
  display: grid; place-items: center;
  color: var(--tinta-suave);
  font-size: .78rem;
  text-align: center;
  padding: .4rem;
}

.foto__lado { flex: 1; min-width: 0; }

.boton--dormido {
  margin-top: .6rem;
  padding: .45rem .8rem;
  border: 1px dashed var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font: 500 .85rem var(--fuente);
  cursor: not-allowed;
}

/* ── Listas ──────────────────────────────────────────────────────────── */

/* La lista entera va en su propio recuadro, igual que un campo suelto: las
   piezas son un grupo, y un grupo que solo se marca con una separación se
   pierde entre lo de arriba y lo de abajo. */
.lista {
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: .8rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.lista--tocada { border-color: var(--ojo); }

.lista__tope { margin: 0 0 .7rem; color: var(--tinta-suave); font-size: .87rem; }

.pieza {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hueco);
  margin-bottom: .5rem;
  overflow: hidden;
}
.pieza--tocada { border-color: var(--ojo); }

.pieza__cabeza { display: flex; align-items: center; gap: .3rem; padding: .4rem .5rem .4rem .2rem; }

.pieza__abrir {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 0;
  padding: .35rem .5rem;
  border: 0;
  background: none;
  color: var(--tinta);
  font: 500 .95rem/1.3 var(--fuente);
  text-align: left;
  cursor: pointer;
}
.pieza__flecha { flex: none; transition: transform .22s var(--suave); color: var(--tinta-suave); }
.pieza__abrir[aria-expanded='true'] .pieza__flecha { transform: rotate(90deg); }
.pieza__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pieza__mando {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--tinta-suave);
  font-size: .9rem;
  cursor: pointer;
}
.pieza__mando:hover:not([disabled]) { background: var(--tarjeta); border-color: var(--linea); color: var(--tinta); }
.pieza__mando[disabled] { opacity: .3; cursor: default; }

.pieza__cuerpo { padding: .2rem .8rem 1rem; background: var(--tarjeta); border-top: 1px solid var(--linea); }
.pieza__cuerpo .campo { border: 0; box-shadow: none; background: none; padding: .9rem 0 0; margin: 0; }
.pieza__cuerpo .campo + .campo { border-top: 1px solid var(--linea); }

.lista__anadir { margin-top: .3rem; }

/* ── La barra de guardar ─────────────────────────────────────────────── */

.guardar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom));
  background: var(--tarjeta);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 24px rgba(16,23,32,.07);
}
@media (prefers-reduced-motion: no-preference) {
  .guardar { animation: subir .28s var(--suave) both; }
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.guardar__cuenta { margin: 0; font-weight: 500; }
.guardar__botones { display: flex; gap: .6rem; margin-left: auto; }

.boton {
  padding: .75rem 1.2rem;
  font: 600 1rem var(--fuente-display);
  color: var(--tarjeta);
  background: var(--tinta);
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform .25s var(--suave), opacity .2s var(--suave);
}
.boton:active { transform: scale(.985, 1.02); }
.boton[disabled] { opacity: .5; cursor: progress; }

.boton--calma {
  color: var(--tinta);
  background: transparent;
  border-color: var(--linea);
}
.boton--calma:hover { background: var(--fondo); }

/* ── Avisos y pantallas de parada ────────────────────────────────────── */

.parada {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin: 3.5rem auto;
  padding: 2rem 1.8rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  text-align: center;
}
.parada h1 { margin: 0 0 .6rem; font: 600 1.4rem/1.25 var(--fuente-display); }
.parada p  { margin: 0 0 1.2rem; color: var(--tinta-suave); }
.parada .boton { margin: 0 auto; }

.recado {
  position: fixed;
  /* Se sube solo cuando hay barra de guardar debajo; si no, se queda a ras
     y no tapa el contenido. */
  left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fondo);
  font-size: .92rem;
  box-shadow: var(--sombra);
}
body:has(.guardar:not([hidden])) .recado { bottom: 7rem; }

@media (prefers-reduced-motion: no-preference) {
  .recado { animation: asomar .3s var(--suave) both; }
}
@keyframes asomar { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }

/* ── Diálogos ────────────────────────────────────────────────────────── */

.tarjeta-dialogo {
  width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: 0 24px 60px rgba(16,23,32,.25);
}
.tarjeta-dialogo::backdrop { background: rgba(16,23,32,.45); }

.dialogo__cuerpo { padding: 1.6rem 1.5rem 1.4rem; max-height: 80vh; overflow: auto; }
.dialogo__cuerpo h2 { margin: 0 0 .4rem; font: 600 1.25rem/1.25 var(--fuente-display); }
.dialogo__cuerpo > p { margin: 0 0 1.1rem; color: var(--tinta-suave); }
.dialogo__botones { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; flex-wrap: wrap; }

.riesgo {
  padding: .9rem 1rem;
  margin-bottom: .7rem;
  border-left: 3px solid var(--ojo);
  background: var(--ojo-piel);
  border-radius: 0 8px 8px 0;
}
.riesgo h3 { margin: 0 0 .25rem; font: 600 .95rem var(--fuente); }
.riesgo p  { margin: 0; font-size: .88rem; color: var(--tinta); }
.riesgo__paso { margin-top: .4rem !important; font-weight: 600; }

.tiempo { list-style: none; margin: 0; padding: 0; }

.tiempo__renglon {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linea);
}
.tiempo__renglon:first-child { border-top: 0; }
.tiempo__que { flex: 1; min-width: 0; }
.tiempo__campo { margin: 0; font-weight: 600; font-size: .95rem; }
.tiempo__quien { margin: .1rem 0 0; color: var(--tinta-suave); font-size: .82rem; }
.tiempo__valor {
  margin: .35rem 0 0;
  font-size: .88rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

/* ── Teléfono ────────────────────────────────────────────────────────── */

@media (max-width: 56rem) {
  .hoja { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-top: 1.2rem; }

  /* El menú se pliega arriba: en el teléfono la columna de la izquierda se
     comería la pantalla, pero un desplegable escondería dónde está uno. */
  .menu {
    position: static;
    max-height: none;
    padding: .9rem 1rem;
    background: var(--tarjeta);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
  }
  .menu[data-plegado='si'] .menu__pagina { display: none; }

  .menu__resumen {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinta);
    font: 600 1rem var(--fuente);
    text-align: left;
    cursor: pointer;
  }
  .menu__resumen::after { content: '▾'; margin-left: auto; color: var(--tinta-suave); }
  .menu[data-plegado='no'] .menu__resumen::after { content: '▴'; }
  .menu__pagina:first-of-type { margin-top: 1rem; }

  .seccion__nombre { font-size: 1.45rem; }
  .campo { padding: 1rem; border-radius: var(--radio); }
  .guardar__botones { width: 100%; margin-left: 0; }
  .guardar .boton { flex: 1; }
  .barra { gap: .5rem; }
  .barra__acciones { width: 100%; margin-left: 0; }
}

@media (min-width: 56.01rem) { .menu__resumen { display: none; } }