/* Prototipo Portal Sustentable · JV AGRA
   Estilos nuevos: pantalla previa (soja/colza) y desplegable de esquema.
   Reutiliza los tokens de marca de formulario.css */

/* ====================================================================
   PANTALLA PREVIA — selección de cultivo (pantalla completa sobre azul)
   ==================================================================== */

body.previa {
  height: 100dvh;
  overflow: hidden;
  background: var(--profundo);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.previa .topbar { flex: none; }

.previa-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vh, 52px);
  padding: clamp(16px, 3vh, 32px) 20px;
  text-align: center;
  overflow: hidden;
}
.previa-luna {
  position: absolute;
  top: 50%; right: -160px;
  transform: translateY(-50%);
  width: min(560px, 70vh);
  height: min(560px, 70vh);
  opacity: .5;
  pointer-events: none;
}

.previa-top {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.previa-top .logo { width: clamp(84px, 11vh, 120px); height: auto; margin-bottom: 4px; }
.previa-top .kicker {
  display: flex; align-items: center; gap: 12px;
  color: var(--trigo); margin: 0;
}
.previa-top .kicker::before { content: ""; width: 34px; height: 1.5px; background: var(--trigo); }
.previa-top h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 4.6vh, 46px); letter-spacing: -.02em;
  margin: 6px 0 0; color: #fff;
}
.previa-top .sub { color: rgba(255, 255, 255, .72); margin: 0; font-size: clamp(14px, 2vh, 17px); }

/* --- Botones de cultivo sobre el azul --- */
.cultivos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 30px);
}
.cultivo {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Que los dos entren también en un celular angosto (2 botones + gap + márgenes). */
  width: clamp(120px, min(24vh, calc((100vw - 56px) / 2)), 210px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer; text-align: center;
  padding: 18px;
  font-family: var(--body);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}
.cultivo .ic { color: var(--trigo); line-height: 0; }
.cultivo .ic svg { width: clamp(48px, 8vh, 76px); height: auto; }
.cultivo .nombre {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(20px, 3.3vh, 28px); letter-spacing: -.01em;
}
.cultivo .pie {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #7FB6DD;
}

/* Elevación 3D */
.cultivo:not(.inerte):hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 26px 46px rgba(0, 0, 0, .4);
  border-color: var(--trigo);
  background: rgba(255, 255, 255, .1);
}
.cultivo:not(.inerte):active { transform: translateY(-2px) scale(.99); box-shadow: 0 12px 24px rgba(0, 0, 0, .34); }
.cultivo:not(.inerte):focus-visible { outline: 3px solid var(--trigo); outline-offset: 3px; }

/* Colza: inerte / en desarrollo */
.cultivo.inerte { cursor: not-allowed; opacity: .5; box-shadow: none; }
.cultivo.inerte .ic { color: rgba(255, 255, 255, .55); }
.cultivo.inerte .pie { color: rgba(255, 255, 255, .5); }
.cultivo .proximamente {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--profundo); background: var(--trigo);
  border-radius: 999px; padding: 4px 10px; font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .cultivo { transition: none; }
  .cultivo:not(.inerte):hover,
  .cultivo:not(.inerte):active { transform: none; }
}

/* ====================================================================
   DESPLEGABLE DE ESQUEMA — listbox a medida con logo por opción
   ==================================================================== */

.combo { position: relative; }

/* Disparador: mismo alto y estilo que un <select> nativo del formulario */
.combo-boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--hueso);
  border: 1.5px solid var(--borde-campo);
  border-radius: 10px;
  padding: 12px 14px;
  padding-right: 36px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.combo-boton::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 12px; height: 8px;
  transform: translateY(-50%);
  background: 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='%23005D9A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .15s;
}
.combo.abierto .combo-boton::after { transform: translateY(-50%) rotate(180deg); }
.combo-boton:hover { border-color: var(--azul); }
.combo-boton:focus-visible {
  outline: none;
  border-color: var(--azul);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 93, 154, .25);
}
.combo-boton .placeholder { color: #8A8C8E; }
.combo-boton .elegido {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.combo-boton .elegido .txt {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo[aria-invalid="true"] .combo-boton { border-color: var(--error); background: #fff; }

/* Logo a la derecha, 1:1, acorde al alto del campo */
.logo-esquema {
  flex: none;
  height: 26px; width: auto; max-width: 96px;
  object-fit: contain;
  border-radius: 6px;
}

/* Panel de opciones */
.combo-lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(8, 52, 79, .16);
  max-height: 320px;
  overflow: auto;
}
.combo-lista[hidden] { display: none; }
.combo-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.combo-opcion .txt { flex: 1; font-size: 16px; }
.combo-opcion:hover,
.combo-opcion.resaltado {
  background: #E8F1F8;
}
.combo-opcion[aria-selected="true"] {
  background: var(--hueso);
  font-weight: 600;
}
.combo-opcion[aria-selected="true"] .txt { color: var(--azul); }

/* ====================================================================
   NAVEGACIÓN / VOLVER
   ==================================================================== */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 28px;
}
.volver:hover { color: #fff; }
.volver svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Distintivo de grano elegido, dentro del hero del formulario */
.grano-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.grano-pill .emoji { font-size: 16px; }

/* ====================================================================
   LOGIN (simulado) — selector de rol
   ==================================================================== */
.login main.wrap { padding-top: 40px; padding-bottom: 60px; }
.login .card { max-width: 560px; margin-left: auto; margin-right: auto; }
.roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 720px) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .roles { grid-template-columns: 1fr; } }
.rol-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1.5px solid var(--borde-campo);
  border-radius: 14px;
  background: var(--hueso);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.rol-opcion:hover { border-color: var(--azul); transform: translateY(-2px); }
.rol-opcion .ri { font-size: 30px; line-height: 1; }
.rol-opcion .rn { font-family: var(--display); font-weight: 700; font-size: 17px; }
.rol-opcion .rd { font-size: 12px; color: var(--suave); line-height: 1.35; }
.rol-opcion.sel { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,93,154,.2); background: #fff; }
.rol-opcion:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.login-extra { margin-top: 20px; }
.login-extra[hidden] { display: none; }
.login-extra label { display:block; font-weight:600; font-size:15px; margin-bottom:7px; }

/* ====================================================================
   BARRA DE SESIÓN (topbar)
   ==================================================================== */
.topbar {
  background: var(--profundo);
  color: #fff;
}
.topbar .wrap {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  max-width: 1200px;
}
.topbar .marca { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 18px; }
.topbar .marca span { color: #7FB6DD; }
.topbar .quien {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.topbar .rolchip {
  background: var(--trigo); color: var(--profundo);
  border-radius: 999px; padding: 3px 10px; font-weight: 600;
}
.topbar nav { display: flex; gap: 6px; }
.topbar nav a {
  color: rgba(255,255,255,.85);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
}
.topbar nav a:hover, .topbar nav a.activo { background: rgba(255,255,255,.12); color:#fff; }
.topbar .salir {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color:#fff;
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.topbar .salir:hover { background: rgba(255,255,255,.12); }

/* ===== Usuarios de prueba (ayuda del login) ===== */
.usuarios-demo { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 14px; }
.usuarios-demo summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.usuarios-demo > p { font-size: 13px; color: var(--suave); margin: 10px 0; }
.usuarios-demo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.usuarios-demo button { width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; background: var(--hueso); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.usuarios-demo button:hover { border-color: var(--azul); background: #fff; }
.usuarios-demo .u { font-weight: 700; color: var(--tinta); font-family: var(--mono); }
.usuarios-demo .r { font-size: 13px; color: var(--suave); }
.usuarios-demo .k { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--gris); }

/* ====================================================================
   PORTAL (app real) — agregados sobre el prototipo
   ==================================================================== */
/* Botón "Ingresar" de la bienvenida (sólo para la administración) */
.topbar .ingresar { text-decoration: none; display: inline-block; }
.topbar .quien > span[title] { text-transform: none; letter-spacing: 0; font-family: var(--body, inherit); font-size: 14px; }
@media (max-width: 720px) {
  .topbar .wrap { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; }
}

/* Panel: nombre del cliente que abre el detalle */
.ver-detalle {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--tinta);
  cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px;
}
.ver-detalle:hover { color: var(--azul); text-decoration-color: currentColor; }
.ver-detalle:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.marca-dup {
  display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave);
}

/* Diálogo de detalle / edición */
dialog.detalle {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  border: 0; border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 24px 60px rgba(8,52,79,.28);
  color: var(--tinta);
}
dialog.detalle::backdrop { background: rgba(8,52,79,.45); }
dialog.detalle h2 { font-family: var(--display); margin: 0 36px 4px 0; font-size: 24px; }
.cerrar-detalle {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--linea); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta);
}
.cerrar-detalle:hover { background: var(--hueso); }
.detalle-reg { font-family: var(--mono); font-size: 12px; color: var(--suave); margin: 0 0 16px; }
.detalle-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.detalle-tabla th, .detalle-tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.detalle-tabla th { width: 38%; color: var(--suave); font-weight: 600; }
.detalle-tabla td { overflow-wrap: anywhere; }
.detalle-adjuntos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Maestro: resumen de la importación */
.resumen-import { margin-top: 22px; border: 1.5px solid var(--ok); border-radius: 14px; padding: 18px 20px; background: #F3FAF5; }
.resumen-import.no-cierra { border-color: var(--error, #B3261E); background: #FDF1F0; }
.resumen-import h3 { margin: 0 0 10px; font-family: var(--display); }
.resumen-import details { margin-top: 14px; }
.resumen-import summary { cursor: pointer; font-weight: 600; }

/* Usuarios */
tr.inactivo td { color: var(--suave); }
.nota-interna { color: var(--suave); font-size: 15px; }