/* Portal Sustentable · La Rural, con la marca Grupo Red Rural.
   Pisa los tokens de formulario.css (que son los de JV AGRA). Los colores base salen de
   "RED RURAL_Logos originales VERSION AyB.pdf", medidos sobre el PDF (03/11/2026):
   rojo #B01C0E, gris oscuro #4E4E4D, gris claro #989899 y negro #151616 (fondo del negativo).
   Contrastes WCAG verificados:
     rojo sobre blanco 7,0:1 · blanco sobre rojo 7,0:1 · blanco sobre negro 18,1:1
     gris claro sobre negro 6,3:1 · rojo claro sobre negro 5,2:1 · gris oscuro sobre blanco 8,3:1 */

:root {
  /* Marca */
  --azul: #B01C0E;        /* Rojo Red Rural · principal (el nombre del token viene de JV AGRA) */
  --azul-hover: #8E160B;
  --azul-rgb: 176, 28, 14;
  --profundo: #151616;    /* Negro del logo negativo · fondos oscuros */
  --profundo-rgb: 21, 22, 22;
  --trigo: #989899;       /* Gris claro del logo · acento sobre fondos oscuros */
  --azul-claro: #E8594B;  /* El rojo, aclarado para leerse sobre negro */

  /* Neutros: grises del logo, sin el tinte azul de JV AGRA */
  --tinta: #151616;
  --gris: #4E4E4D;
  --suave: #5C5C5B;       /* 6,1:1 sobre --hueso */
  --hueso: #F5F5F4;
  --linea: #E3E3E2;
  --borde-campo: #8C8C8B; /* 3,4:1 sobre blanco */

  /* Tintes del rojo para fondos suaves */
  --tinte: #FBEFED;
  --tinte-fuerte: #F6E0DC;
  --borde-drop: #C4847C;

  /* Con un rojo de principal, un foco rojo se confunde con un error: el foco va en gris oscuro. */
  --foco: #4E4E4D;
  --foco-rgb: 78, 78, 77;
  --aviso: #8A6100;       /* ámbar oscuro, 5,5:1 sobre blanco */
  /* Mismo color de estado que en el panel de JV AGRA: quien usa los dos no tiene que reaprenderlo. */
  --estado-dj: #C9A24B;
}

/* Flechas de los desplegables: son SVG embebidos y no toman variables. Van en el gris oscuro,
   para no sumar rojo al lado de los bordes de error. */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234E4E4D' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.combo-boton::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234E4E4D' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== Bienvenida clara =====
   Sobre el negro quedaba muy oscura (Juan, 03/11/2026). La versión principal del logo es a
   color sobre claro, y ahí el rojo oficial se lee a 7:1. La barra superior sigue oscura,
   igual que en el panel. */
body.previa { background: var(--hueso); color: var(--tinta); }
.previa-luna { opacity: .22; }
.previa-top .kicker { color: var(--gris); }
.previa-top .kicker::before { background: var(--azul); }
.previa-top h1 { color: var(--tinta); }
.previa-top .sub { color: var(--suave); }

.cultivo {
  background: #fff;
  border-color: var(--linea);
  color: var(--tinta);
  box-shadow: 0 10px 24px rgba(var(--profundo-rgb), .08);
}
/* La acción principal lleva el rojo; Colza, en desarrollo, queda en gris. */
.cultivo .ic { color: var(--azul); }
.cultivo:not(.inerte):hover {
  background: #fff;
  border-color: var(--azul);
  box-shadow: 0 22px 40px rgba(var(--profundo-rgb), .14);
}
.cultivo:not(.inerte):active { box-shadow: 0 10px 20px rgba(var(--profundo-rgb), .12); }
.cultivo:not(.inerte):focus-visible { outline-color: var(--foco); }
.cultivo.inerte { background: transparent; }
.cultivo.inerte .ic { color: var(--gris); }
.cultivo .proximamente { background: var(--gris); color: #fff; }

/* El logo apilado es más ancho que alto: un poco más de ancho para que se lea igual. */
.logo { width: 170px; }
.previa-top .logo { width: clamp(110px, 15vh, 160px); }
@media (max-width: 640px) { .logo { width: 140px; } }