/* Fast Fruit Planta — interfaz. Colores y fuentes de /marca/tokens.css (marca de fastfruit.com.co). */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 15px/1.5 var(--ff-font-ui); color: var(--ff-ink); background: var(--ff-canvas);
}
h1, h2, h3 { font-family: var(--ff-font-display); font-weight: 900; line-height: 1.15; margin: 0 0 var(--ff-space-3); color: var(--ff-forest); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
a { color: var(--ff-forest); }
:focus-visible { outline: 3px solid var(--ff-orange); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Barra superior */
.barra {
  display: flex; align-items: center; gap: var(--ff-space-4); flex-wrap: wrap;
  padding: var(--ff-space-3) var(--ff-space-6); background: var(--ff-forest); color: var(--ff-on-forest);
}
.barra-logo img { display: block; height: 38px; width: auto; }
.barra-titulo { font-family: var(--ff-font-display); font-weight: 600; font-size: 1.1rem; padding-left: var(--ff-space-4); border-left: 1px solid rgb(255 255 255 / .35); }
.barra-usuario { margin-left: auto; display: flex; align-items: center; gap: var(--ff-space-3); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--ff-green-soft); color: var(--ff-forest); }
.chip-admin { background: var(--ff-yellow); color: var(--ff-ink); }

.contenido { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--ff-space-8) var(--ff-space-6); }
.contenido:focus { outline: none; }
.pie { padding: var(--ff-space-3) var(--ff-space-6); color: var(--ff-muted); font-size: .8rem; text-align: right; }
.cargando { color: var(--ff-muted); }
.subtitulo { color: var(--ff-muted); margin: 0 0 var(--ff-space-6); max-width: 70ch; }

/* Botones y formularios */
.boton {
  font: 600 .95rem var(--ff-font-ui); padding: 9px 18px; border-radius: var(--ff-radius-sm); cursor: pointer;
  border: 1px solid var(--ff-line); background: var(--ff-white); color: var(--ff-ink);
}
.boton:hover { border-color: var(--ff-forest); }
.boton-primario { background: var(--ff-forest); border-color: var(--ff-forest); color: var(--ff-on-forest); }
.boton-primario:hover { background: #335b0f; }
.boton-claro { background: transparent; color: var(--ff-on-forest); border-color: rgb(255 255 255 / .6); }
.boton-pequeno { padding: 4px 12px; font-size: .85rem; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: .9rem; margin: var(--ff-space-3) 0 var(--ff-space-1); }
input, select, textarea {
  width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--ff-line); border-radius: var(--ff-radius-sm);
  background: var(--ff-white); color: var(--ff-ink);
}
.mensaje-error { color: var(--ff-danger); font-weight: 500; margin: var(--ff-space-3) 0 0; }
.aviso { background: var(--ff-orange-soft); border-left: 4px solid var(--ff-orange); padding: var(--ff-space-2) var(--ff-space-3); border-radius: var(--ff-radius-sm); font-size: .9rem; }
.tarjeta { background: var(--ff-white); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-md); padding: var(--ff-space-6); }

/* Ingreso */
.pagina-ingreso { background: var(--ff-forest) url('/marca/leaf-pattern.svg') center / 420px repeat; }
.ingreso { flex: 1; display: grid; place-content: center; gap: var(--ff-space-6); padding: var(--ff-space-6); }
.ingreso-marca { text-align: center; color: var(--ff-on-forest); }
.ingreso-marca img { height: 56px; width: auto; }
.ingreso-marca p { margin: var(--ff-space-2) 0 0; font-weight: 500; }
.ingreso-form { width: min(380px, 90vw); }
.ingreso-form .boton { width: 100%; margin-top: var(--ff-space-6); }

/* Módulos */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ff-space-4); }
.modulo { display: flex; flex-direction: column; gap: var(--ff-space-2); text-decoration: none; color: inherit; min-height: 150px; }
a.modulo:hover { border-color: var(--ff-forest); box-shadow: 0 4px 14px rgb(62 109 18 / .12); }
.modulo-icono { font-size: 1.8rem; line-height: 1; }
.modulo h2 { font-size: 1.1rem; margin: 0; }
.modulo p { margin: 0; color: var(--ff-muted); font-size: .9rem; flex: 1; }
.estado { align-self: flex-start; font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.estado-activo { background: var(--ff-green-soft); color: var(--ff-forest); }
.estado-pendiente { background: var(--ff-orange-soft); color: var(--ff-ink); }
.modulo-pendiente { opacity: .8; }

/* Registros */
.registros-cabecera { display: flex; gap: var(--ff-space-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--ff-space-4); }
.registros-cabecera > div { min-width: 220px; }
.registros-cabecera label { margin-top: 0; }
.tabla-contenedor { overflow-x: auto; background: var(--ff-white); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-md); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--ff-line); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
th { background: var(--ff-green-soft); color: var(--ff-forest); font-weight: 600; position: sticky; top: 0; }
tbody tr:hover { background: var(--ff-canvas); }
td.accion { max-width: none; overflow: visible; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { padding: var(--ff-space-8); text-align: center; color: var(--ff-muted); }
.paginacion { display: flex; gap: var(--ff-space-3); align-items: center; justify-content: flex-end; margin-top: var(--ff-space-3); color: var(--ff-muted); font-size: .9rem; }

/* Diálogo de edición */
.dialogo { border: none; border-radius: var(--ff-radius-md); padding: var(--ff-space-6); width: min(560px, 94vw); max-height: 90vh; }
.dialogo::backdrop { background: rgb(36 51 33 / .55); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ff-space-4); }
.acciones { display: flex; justify-content: flex-end; gap: var(--ff-space-3); margin-top: var(--ff-space-6); }
details { margin-top: var(--ff-space-4); font-size: .88rem; }
.historial-item { border-left: 3px solid var(--ff-green); padding: var(--ff-space-1) var(--ff-space-3); margin: var(--ff-space-2) 0; }

@media (max-width: 640px) {
  .barra { padding: var(--ff-space-3) var(--ff-space-4); }
  .barra-titulo { display: none; }
  .contenido { padding: var(--ff-space-6) var(--ff-space-4); }
  .campos { grid-template-columns: 1fr; }
}